@rr0/ufoathome 0.1.0 → 0.2.0

package/dist-embed/rr0-ufo-recorder.mjs

@@ -1,4 +1,4 @@
-const S = `
+const T = `
 <div class="appearance">
   <div class="presets" role="group" aria-label="UFO shape">
     <button class="preset" id="preset-oval" type="button" data-preset="oval">Oval</button>
@@ -13,8 +13,8 @@ const S = `
   <button id="record" type="button">Record</button>
   <label>Sampling rate (ms) <input id="samplingRate" type="number" min="16" step="16" value="100"/></label>
 </div>
-<div id="player-slot"></div>
-`, b = `
+<div id="ufo-slot"></div>
+`, B = `
 :host {
   display: block;
   font-family: sans-serif;
@@ -37,39 +37,92 @@ button.preset[aria-pressed="true"] {
   outline: 2px solid #39f;
   font-weight: bold;
 }
-`, k = `
-<div class="toolbar">
-  <button id="play" type="button">Play</button>
-  <button id="pause" type="button">Pause</button>
-  <input id="seek" type="range" min="0" max="0" value="0" step="1"/>
+`, M = `
+<div class="stage">
+  <canvas id="canvas" width="640" height="360"></canvas>
+  <div class="toolbar" id="toolbar">
+    <button id="play-pause" type="button" title="Play" aria-label="Play">▶</button>
+    <span id="time-start" class="time-label" title="Current position">0:00</span>
+    <input id="seek" type="range" min="0" max="0" value="0" step="1"/>
+    <span id="time-end" class="time-label" title="Duration">0:00</span>
+    <button id="loop" type="button" title="Auto-replay" aria-label="Auto-replay" aria-pressed="true">↻</button>
+  </div>
 </div>
-<canvas id="canvas" width="640" height="360"></canvas>
 `, A = `
 :host {
   display: block;
   font-family: sans-serif;
 }
+.stage {
+  position: relative;
+  width: 100%;
+}
+canvas {
+  display: block;
+  width: 100%;
+  height: auto;
+  aspect-ratio: 640 / 360;
+  background: var(--ufo-canvas-background, #050510);
+  border: var(--ufo-canvas-border, 1px solid #333);
+  box-sizing: border-box;
+}
 .toolbar {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
   display: flex;
   align-items: center;
   gap: 0.5em;
-  margin-bottom: 0.5em;
+  padding: 0.4em 0.6em;
+  background: rgba(0, 0, 0, 0.55);
+  transition: opacity 0.15s ease;
 }
-canvas {
-  background: #050510;
-  border: 1px solid #333;
+/* While playing, the toolbar auto-hides and only reappears on hover — kept always visible while
+   paused/stopped, since that's when the user is most likely to want it. Deliberately hover-only,
+   not :focus-within: a clicked button/range input keeps keyboard focus after the pointer moves
+   away, which would otherwise keep the toolbar stuck visible indefinitely after any interaction. */
+.toolbar.auto-hide {
+  opacity: 0;
+  pointer-events: none;
+}
+.stage:hover .toolbar.auto-hide {
+  opacity: 1;
+  pointer-events: auto;
 }
 input[type=range] {
   flex: 1;
 }
+.toolbar button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.8em;
+  height: 1.8em;
+  padding: 0;
+  border-radius: 3px;
+  cursor: pointer;
+  font-size: 1em;
+  line-height: 1;
+}
+.toolbar button[aria-pressed="true"] {
+  outline: 2px solid #39f;
+}
+.time-label {
+  color: #fff;
+  font-variant-numeric: tabular-nums;
+  font-size: 0.85em;
+  min-width: 3em;
+  text-align: center;
+}
 `;
-function P(i, t = "#39ff14") {
+function R(i, t = "#39ff14") {
   return { kind: "oval", bounds: i, color: t, angle: 0, transparency: 0, haloScale: 0, selected: !1 };
 }
-function g(i, t, e = "#39ff14") {
+function E(i, t, e = "#39ff14") {
   return { kind: "polygon", bounds: i, points: t, color: e, angle: 0, transparency: 0, haloScale: 0, selected: !1 };
 }
-function R(i, t = "#39ff14") {
+function L(i, t = "#39ff14") {
   const { width: e, height: s } = i, n = [
     { x: 0.5 * e, y: 0 },
     { x: 0.8 * e, y: 0.25 * s },
@@ -80,40 +133,40 @@ function R(i, t = "#39ff14") {
     { x: 0, y: 0.5 * s },
     { x: 0.2 * e, y: 0.25 * s }
   ];
-  return g(i, n, t);
+  return E(i, n, t);
 }
-function T(i, t = "#39ff14") {
+function C(i, t = "#39ff14") {
   const { width: e, height: s } = i, n = [
     { x: 0, y: 0 },
     { x: e, y: s / 2 },
     { x: 0, y: s }
   ];
-  return g(i, n, t);
+  return E(i, n, t);
 }
-const B = {
-  oval: P,
-  saucer: R,
-  triangle: T
+const D = {
+  oval: R,
+  saucer: L,
+  triangle: C
 };
-function L(i, t) {
+function F(i, t) {
   return {
-    ...B[t.presetId](i, t.color),
+    ...D[t.presetId](i, t.color),
     transparency: t.transparency,
     haloScale: t.haloScale
   };
 }
-function F(i, t, e) {
+function _(i, t, e) {
   const { bounds: s } = i;
   return t >= s.x && t <= s.x + s.width && e >= s.y && e <= s.y + s.height;
 }
-function v(i, t, e) {
+function S(i, t, e) {
   const s = i.bounds.width, n = i.bounds.height;
   return {
     ...i,
     bounds: { x: t - s / 2, y: e - n / 2, width: s, height: n }
   };
 }
-class h {
+class c {
   keyframes = [];
   addKeyframe(t, e) {
     const s = this.findInsertIndex(t);
@@ -141,16 +194,16 @@ class h {
   getLatestShapeAt(t, e) {
     let s = this.findInsertIndex(t);
     for (this.keyframes[s]?.t !== t && (s -= 1); s >= 0; s--) {
-      const n = this.keyframes[s].shapes.find((r) => r.sourceId === e);
+      const n = this.keyframes[s].shapes.find((a) => a.sourceId === e);
       if (n) return n.shape;
     }
   }
   hitTest(t, e, s) {
     const n = this.getKeyframeAt(t);
     if (n) {
-      for (let r = n.shapes.length - 1; r >= 0; r--)
-        if (F(n.shapes[r].shape, e, s))
-          return n.shapes[r];
+      for (let a = n.shapes.length - 1; a >= 0; a--)
+        if (_(n.shapes[a].shape, e, s))
+          return n.shapes[a];
     }
   }
   get duration() {
@@ -170,21 +223,30 @@ class h {
     return { keyframes: this.keyframes };
   }
   static fromJSON(t) {
-    const e = new h();
+    const e = new c();
     for (const s of t.keyframes)
       e.addKeyframe(s.t, s.shapes);
     return e;
   }
 }
-class c {
+function d(i) {
+  if (i.year !== void 0)
+    return Date.UTC(i.year, (i.month ?? 1) - 1, i.day ?? 1, i.hour ?? 0, i.minute ?? 0, i.second ?? 0);
+}
+function U(i) {
+  if (i.durationSeconds !== void 0) return i.durationSeconds * 1e3;
+  const t = i.time ? d(i.time) : void 0, e = i.endTime ? d(i.endTime) : void 0;
+  return t !== void 0 && e !== void 0 ? e - t : void 0;
+}
+class u {
   constructor(t, e, s) {
     this.event = t, this.timeline = e, this.witnessId = s;
   }
   static create(t, e, s) {
-    return new c({ eventType: "sighting", time: t, place: e }, new h(), s);
+    return new u({ eventType: "sighting", time: t, place: e }, new c(), s);
   }
 }
-class u {
+class N {
   constructor(t, e) {
     this.timeline = t, this.onFrame = e;
   }
@@ -192,14 +254,29 @@ class u {
   state = "stopped";
   currentT = 0;
   lastWallTime = 0;
+  /**
+   * Multiplies elapsed wall-clock time before advancing currentT. 1 (default) means playback
+   * takes as long as `timeline.duration` itself; UfoElement sets this to
+   * `timeline.duration / sightingDurationMs(event)` when the sighting's real declared duration
+   * is known, so watching it takes as long as the observation was actually reported to last,
+   * rather than however long the recording itself took to author (e.g. a quick mouse drag).
+   * Manually dragging the seek bar always jumps directly regardless of this rate.
+   */
+  playbackRate = 1;
+  /** When true, playback restarts from 0 instead of stopping once it reaches the end. */
+  loop = !1;
   play() {
     if (this.state === "playing") return;
-    this.state = "playing", this.lastWallTime = performance.now();
+    this.currentT >= this.timeline.duration && (this.currentT = 0, this.resolveFrame(0)), this.state = "playing", this.lastWallTime = performance.now();
     const t = () => {
       if (this.state !== "playing") return;
       const e = performance.now();
-      if (this.currentT += e - this.lastWallTime, this.lastWallTime = e, this.currentT >= this.timeline.duration) {
-        this.currentT = this.timeline.duration, this.resolveFrame(this.currentT), this.stop();
+      if (this.currentT += (e - this.lastWallTime) * this.playbackRate, this.lastWallTime = e, this.currentT >= this.timeline.duration) {
+        if (this.loop && this.timeline.duration > 0) {
+          this.currentT %= this.timeline.duration, this.resolveFrame(this.currentT), this.rafId = requestAnimationFrame(t);
+          return;
+        }
+        this.currentT = this.timeline.duration, this.stop(), this.resolveFrame(this.currentT);
         return;
       }
       this.resolveFrame(this.currentT), this.rafId = requestAnimationFrame(t);
@@ -230,8 +307,8 @@ class u {
     this.onFrame(t, e);
   }
 }
-const d = 6, m = d / 2, C = 20;
-class M {
+const p = 6, f = p / 2, O = 20;
+class H {
   constructor(t) {
     this.ctx = t;
   }
@@ -243,68 +320,118 @@ class M {
   }
   paintBase(t) {
     if (this.ctx.fillStyle = t.color, this.ctx.beginPath(), t.kind === "oval") {
-      const { x: e, y: s, width: n, height: r } = t.bounds, o = n / 2, l = r / 2;
+      const { x: e, y: s, width: n, height: a } = t.bounds, o = n / 2, l = a / 2;
       this.ctx.ellipse(e + o, s + l, o, l, t.angle, 0, 2 * Math.PI);
     } else {
       const { x: e, y: s } = t.bounds;
-      this.ctx.save(), this.ctx.translate(e, s), this.ctx.rotate(t.angle), t.points.forEach((n, r) => {
-        r === 0 ? this.ctx.moveTo(n.x, n.y) : this.ctx.lineTo(n.x, n.y);
+      this.ctx.save(), this.ctx.translate(e, s), this.ctx.rotate(t.angle), t.points.forEach((n, a) => {
+        a === 0 ? this.ctx.moveTo(n.x, n.y) : this.ctx.lineTo(n.x, n.y);
       }), this.ctx.closePath(), this.ctx.restore();
     }
     this.ctx.fill();
   }
   paintHalo(t) {
-    this.ctx.save(), this.ctx.shadowColor = t.color, this.ctx.shadowBlur = C * t.haloScale, this.paintBase(t), this.ctx.restore();
+    this.ctx.save(), this.ctx.shadowColor = t.color, this.ctx.shadowBlur = O * t.haloScale, this.paintBase(t), this.ctx.restore();
   }
   paintSelectionHandles(t) {
-    const { x: e, y: s, width: n, height: r } = t.bounds, o = n / 2, l = r / 2;
-    this.ctx.strokeStyle = "lightgray", this.ctx.strokeRect(e, s, n, r), this.ctx.fillStyle = "lightgray";
-    const I = [
+    const { x: e, y: s, width: n, height: a } = t.bounds, o = n / 2, l = a / 2;
+    this.ctx.strokeStyle = "lightgray", this.ctx.strokeRect(e, s, n, a), this.ctx.fillStyle = "lightgray";
+    const P = [
       [e, s],
       [e + o, s],
       [e + n, s],
       [e + n, s + l],
-      [e + n, s + r],
-      [e + o, s + r],
-      [e, s + r],
+      [e + n, s + a],
+      [e + o, s + a],
+      [e, s + a],
       [e, s + l]
     ];
-    for (const [w, x] of I)
-      this.ctx.fillRect(w - m, x - m, d, d);
+    for (const [x, k] of P)
+      this.ctx.fillRect(x - f, k - f, p, p);
   }
 }
-function N(i) {
+function $(i) {
   return {
     version: 1,
     time: i.event.time,
+    endTime: i.event.endTime,
+    durationSeconds: i.event.durationSeconds,
     place: i.event.place,
     witnessId: i.witnessId,
     timeline: i.timeline.toJSON()
   };
 }
-function D(i) {
-  return new c(
-    { eventType: "sighting", time: i.time, place: i.place },
-    h.fromJSON(i.timeline),
+function K(i) {
+  return new u(
+    {
+      eventType: "sighting",
+      time: i.time,
+      endTime: i.endTime,
+      durationSeconds: i.durationSeconds,
+      place: i.place
+    },
+    c.fromJSON(i.timeline),
     i.witnessId
   );
 }
-class H extends HTMLElement {
+function W(i, t) {
+  for (const e of i) {
+    const s = e.toLowerCase().split("-")[0];
+    if (t.includes(s)) return s;
+  }
+  return "en";
+}
+const J = ["en", "fr"], q = {
+  en: () => Promise.resolve().then(() => Z).then((i) => i.ufoMessages_en),
+  fr: () => import("./UfoMessages_fr-DKnWFOyl.js").then((i) => i.ufoMessages_fr)
+};
+function z(i) {
+  return q[i]();
+}
+const w = {
+  play: "Play",
+  pause: "Pause",
+  autoReplay: "Auto-replay",
+  currentPosition: "Current position",
+  duration: "Duration"
+}, Z = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  ufoMessages_en: w
+}, Symbol.toStringTag, { value: "Module" }));
+class G extends HTMLElement {
   static get observedAttributes() {
     return ["src"];
   }
   shadow;
   canvas;
   canvasRenderer;
-  playButton;
-  pauseButton;
+  toolbar;
+  playPauseButton;
+  loopButton;
   seekInput;
-  currentSighting = c.create();
+  timeStartLabel;
+  timeEndLabel;
+  currentSighting = u.create();
   player;
+  loopEnabled = !0;
+  /** Set to false by composing elements that need the canvas's own click for something else
+   * instead of toggling playback — see UfoRecorderElement, which uses pointerdown/pointermove on
+   * this same canvas to place shapes while recording. */
+  enableClickToPlay = !0;
+  /** Matches the template's baked-in English defaults until (if ever) loadLocaleMessages()
+   * resolves a better match — see its doc comment. */
+  messages = w;
+  /** The sighting's real reported duration/start, cached by updateTimeLabels() so onFrame doesn't
+   * recompute them every animation frame — see formatPosition, which turns a `Timeline` position
+   * (ms since recording start) into what's actually displayed. */
+  realDurationMs;
+  realStartMs;
   constructor() {
     super(), this.shadow = this.attachShadow({ mode: "open" });
     const t = document.createElement("template");
-    t.innerHTML = `<style>${A}</style>${k}`, this.shadow.appendChild(t.content.cloneNode(!0)), this.canvas = this.shadow.getElementById("canvas"), this.canvasRenderer = new M(this.canvas.getContext("2d")), this.playButton = this.shadow.getElementById("play"), this.pauseButton = this.shadow.getElementById("pause"), this.seekInput = this.shadow.getElementById("seek"), this.playButton.addEventListener("click", () => this.player.play()), this.pauseButton.addEventListener("click", () => this.player.pause()), this.seekInput.addEventListener("input", () => this.player.seek(Number(this.seekInput.value))), this.player = new u(this.currentSighting.timeline, (e, s) => this.onFrame(e, s)), this.refresh();
+    t.innerHTML = `<style>${A}</style>${M}`, this.shadow.appendChild(t.content.cloneNode(!0)), this.canvas = this.shadow.getElementById("canvas"), this.canvasRenderer = new H(this.canvas.getContext("2d")), this.toolbar = this.shadow.getElementById("toolbar"), this.playPauseButton = this.shadow.getElementById("play-pause"), this.loopButton = this.shadow.getElementById("loop"), this.seekInput = this.shadow.getElementById("seek"), this.timeStartLabel = this.shadow.getElementById("time-start"), this.timeEndLabel = this.shadow.getElementById("time-end"), this.playPauseButton.addEventListener("click", () => this.togglePlayPause()), this.loopButton.addEventListener("click", () => this.toggleLoop()), this.seekInput.addEventListener("input", () => this.player.seek(Number(this.seekInput.value))), this.canvas.addEventListener("click", () => {
+      this.enableClickToPlay && this.togglePlayPause();
+    }), this.player = this.createPlayer(), this.updateTimeLabels(), this.updatePlayPauseButton(), this.refresh(), this.loadLocaleMessages();
   }
   connectedCallback() {
     const t = this.getAttribute("src");
@@ -319,14 +446,15 @@ class H extends HTMLElement {
     this.sightingData = await e.json();
   }
   get sightingData() {
-    return N(this.currentSighting);
+    return $(this.currentSighting);
   }
   set sightingData(t) {
-    this.currentSighting = D(t), this.player = new u(this.currentSighting.timeline, (e, s) => this.onFrame(e, s)), this.refresh();
+    this.currentSighting = K(t), this.player = this.createPlayer(), this.updateTimeLabels(), this.updatePlayPauseButton(), this.refresh();
   }
   /**
-   * The live Sighting/Timeline, exposed so UfoRecorderElement (which composes
-   * this element) can add keyframes to it directly as it records.
+   * The live Sighting/Timeline, exposed so UfoRecorderElement/SceneElement
+   * (which compose this element) can add keyframes to it directly as it
+   * records, or read its time/place for lighting.
    */
   get sighting() {
     return this.currentSighting;
@@ -350,14 +478,82 @@ class H extends HTMLElement {
     this.canvasRenderer.clear(this.canvas.width, this.canvas.height);
     for (const s of e.values())
       this.canvasRenderer.paintShape(s);
-    this.seekInput.value = String(t);
+    this.seekInput.value = String(t), this.timeStartLabel.textContent = this.formatPosition(t), this.updatePlayPauseButton();
+  }
+  createPlayer() {
+    const t = new N(this.currentSighting.timeline, (e, s) => this.onFrame(e, s));
+    return t.loop = this.loopEnabled, t;
+  }
+  togglePlayPause() {
+    this.player.playbackState === "playing" ? this.player.pause() : this.player.play(), this.updatePlayPauseButton();
+  }
+  updatePlayPauseButton() {
+    const t = this.player.playbackState === "playing";
+    this.playPauseButton.textContent = t ? "⏸" : "▶", this.playPauseButton.title = t ? this.messages.pause : this.messages.play, this.playPauseButton.setAttribute("aria-label", t ? this.messages.pause : this.messages.play), this.toolbar.classList.toggle("auto-hide", t);
+  }
+  toggleLoop() {
+    this.loopEnabled = !this.loopEnabled, this.loopButton.setAttribute("aria-pressed", String(this.loopEnabled)), this.player.loop = this.loopEnabled;
+  }
+  /**
+   * Auto-detects the visitor's preferred UI language from `navigator.languages`, falling back to
+   * English (already baked into the template) when none of their preferences are supported —
+   * see selectLocale. There is deliberately no language-picker UI: this is the only mechanism.
+   */
+  async loadLocaleMessages() {
+    const t = W(navigator.languages, J);
+    t !== "en" && this.applyMessages(await z(t));
+  }
+  applyMessages(t) {
+    this.messages = t, this.timeStartLabel.title = t.currentPosition, this.timeEndLabel.title = t.duration, this.loopButton.title = t.autoReplay, this.loopButton.setAttribute("aria-label", t.autoReplay), this.updatePlayPauseButton();
   }
+  /**
+   * Caches the sighting's real-world reported duration/start (see sightingDurationMs) and sets
+   * the player's playback rate and the seek bar's end label from them, rather than from
+   * `timeline.duration` (how long the recording itself took to author).
+   */
+  updateTimeLabels() {
+    const t = this.currentSighting.event, e = U(t);
+    this.realDurationMs = e !== void 0 && e > 0 ? e : void 0, this.realStartMs = t.time ? d(t.time) : void 0, this.player.playbackRate = this.realDurationMs !== void 0 ? this.currentSighting.timeline.duration / this.realDurationMs : 1, this.timeEndLabel.textContent = this.formatEndOfTimeline(), this.timeStartLabel.textContent = this.formatPosition(this.player.time);
+  }
+  /**
+   * Turns a `Timeline` position (ms since recording start, i.e. what Player deals in) into what's
+   * actually displayed: a real clock time (e.g. "02:47") when a real start/duration are both
+   * known, an elapsed real duration ("0:00" based) when only the duration is known, or the
+   * recording's own elapsed time when neither is known — see updateTimeLabels.
+   */
+  formatPosition(t) {
+    if (this.realDurationMs === void 0) return h(t);
+    const e = this.currentSighting.timeline.duration, s = e > 0 ? t / e * this.realDurationMs : 0;
+    return this.realStartMs !== void 0 ? y(g(this.realStartMs + s)) : h(s);
+  }
+  /**
+   * The fixed end-of-timeline label — always the *full* real declared duration (clock time or
+   * elapsed), or the recording's own length when no real duration is known. Unlike
+   * formatPosition, doesn't scale by `timeline.duration`: a single-keyframe/static recording
+   * (timeline.duration === 0) still has a full declared real duration to show as its end.
+   */
+  formatEndOfTimeline() {
+    return this.realDurationMs === void 0 ? h(this.currentSighting.timeline.duration) : this.realStartMs !== void 0 ? y(g(this.realStartMs + this.realDurationMs)) : h(this.realDurationMs);
+  }
+}
+function g(i) {
+  const t = new Date(i);
+  return { hour: t.getUTCHours(), minute: t.getUTCMinutes(), second: t.getUTCSeconds() };
+}
+function y(i) {
+  if (i.hour === void 0) return "0:00";
+  const t = (e) => String(e).padStart(2, "0");
+  return i.second ? `${t(i.hour)}:${t(i.minute ?? 0)}:${t(i.second)}` : `${t(i.hour)}:${t(i.minute ?? 0)}`;
+}
+function h(i) {
+  const t = Math.round(i / 1e3), e = Math.floor(t / 60), s = t % 60;
+  return `${e}:${String(s).padStart(2, "0")}`;
 }
-const p = "rr0-ufo-player";
-function E() {
-  customElements.get(p) || customElements.define(p, H);
+const m = "rr0-ufo";
+function I() {
+  customElements.get(m) || customElements.define(m, G);
 }
-class _ {
+class X {
   constructor(t, e) {
     this.timeline = t, this.clock = e;
   }
@@ -375,11 +571,11 @@ class _ {
   }
   recordSample(t) {
     if (!this.currentPointer || !this.shapePrototype) return;
-    const e = v(this.shapePrototype, this.currentPointer.x, this.currentPointer.y);
+    const e = S(this.shapePrototype, this.currentPointer.x, this.currentPointer.y);
     this.timeline.addKeyframe(t, [{ sourceId: this.sourceId, shape: e }]);
   }
 }
-class O {
+class Y {
   constructor(t) {
     this.intervalMs = t;
   }
@@ -398,11 +594,11 @@ class O {
     this.rafId !== null && (cancelAnimationFrame(this.rafId), this.rafId = null);
   }
 }
-E();
-const a = { width: 48, height: 28 }, U = "ufo-1", y = ["oval", "saucer", "triangle"], K = { presetId: "oval", color: "#39ff14", transparency: 0, haloScale: 1.5 };
-class J extends HTMLElement {
+I();
+const r = { width: 48, height: 28 }, Q = "ufo-1", v = ["oval", "saucer", "triangle"], j = { presetId: "oval", color: "#39ff14", transparency: 0, haloScale: 1.5 };
+class V extends HTMLElement {
   shadow;
-  playerElement;
+  ufoElement;
   recordButton;
   samplingRateInput;
   presetButtons;
@@ -411,16 +607,16 @@ class J extends HTMLElement {
   haloScaleInput;
   recorder;
   isRecording = !1;
-  currentAppearance = { ...K };
+  currentAppearance = { ...j };
   constructor() {
     super(), this.shadow = this.attachShadow({ mode: "open" });
     const t = document.createElement("template");
-    t.innerHTML = `<style>${b}</style>${S}`, this.shadow.appendChild(t.content.cloneNode(!0)), this.playerElement = document.createElement(p), this.shadow.getElementById("player-slot").replaceWith(this.playerElement), this.recordButton = this.shadow.getElementById("record"), this.samplingRateInput = this.shadow.getElementById("samplingRate"), this.presetButtons = {
+    t.innerHTML = `<style>${B}</style>${T}`, this.shadow.appendChild(t.content.cloneNode(!0)), this.ufoElement = document.createElement(m), this.ufoElement.enableClickToPlay = !1, this.shadow.getElementById("ufo-slot").replaceWith(this.ufoElement), this.recordButton = this.shadow.getElementById("record"), this.samplingRateInput = this.shadow.getElementById("samplingRate"), this.presetButtons = {
       oval: this.shadow.getElementById("preset-oval"),
       saucer: this.shadow.getElementById("preset-saucer"),
       triangle: this.shadow.getElementById("preset-triangle")
-    }, this.colorInput = this.shadow.getElementById("color"), this.transparencyInput = this.shadow.getElementById("transparency"), this.haloScaleInput = this.shadow.getElementById("haloScale"), this.playerElement.canvasElement.addEventListener("pointerdown", (e) => this.onPointerDown(e)), this.playerElement.canvasElement.addEventListener("pointermove", (e) => this.onPointerMove(e)), this.recordButton.addEventListener("click", () => this.toggleRecording());
-    for (const e of y)
+    }, this.colorInput = this.shadow.getElementById("color"), this.transparencyInput = this.shadow.getElementById("transparency"), this.haloScaleInput = this.shadow.getElementById("haloScale"), this.ufoElement.canvasElement.addEventListener("pointerdown", (e) => this.onPointerDown(e)), this.ufoElement.canvasElement.addEventListener("pointermove", (e) => this.onPointerMove(e)), this.recordButton.addEventListener("click", () => this.toggleRecording());
+    for (const e of v)
       this.presetButtons[e].addEventListener("click", () => this.setAppearance({ presetId: e }));
     this.colorInput.addEventListener("input", () => this.setAppearance({ color: this.colorInput.value })), this.transparencyInput.addEventListener(
       "input",
@@ -431,10 +627,10 @@ class J extends HTMLElement {
     ), this.updatePresetButtons(), this.renderPreview();
   }
   get sightingData() {
-    return this.playerElement.sightingData;
+    return this.ufoElement.sightingData;
   }
   set sightingData(t) {
-    this.playerElement.sightingData = t;
+    this.ufoElement.sightingData = t;
   }
   /** The UFO's appearance (shape preset, color, transparency, halo) used for the next recording. */
   get appearance() {
@@ -447,7 +643,7 @@ class J extends HTMLElement {
     this.currentAppearance = { ...this.currentAppearance, ...t }, this.updatePresetButtons(), this.isRecording || this.renderPreview();
   }
   updatePresetButtons() {
-    for (const t of y)
+    for (const t of v)
       this.presetButtons[t]?.setAttribute(
         "aria-pressed",
         String(t === this.currentAppearance.presetId)
@@ -457,38 +653,38 @@ class J extends HTMLElement {
     return Number(this.samplingRateInput.value);
   }
   buildPrototype(t = this.defaultBounds()) {
-    return L(t, this.currentAppearance);
+    return F(t, this.currentAppearance);
   }
   defaultBounds() {
-    const t = this.playerElement.canvasElement;
+    const t = this.ufoElement.canvasElement;
     return {
-      x: t.width / 2 - a.width / 2,
-      y: t.height / 2 - a.height / 2,
-      width: a.width,
-      height: a.height
+      x: t.width / 2 - r.width / 2,
+      y: t.height / 2 - r.height / 2,
+      width: r.width,
+      height: r.height
     };
   }
   renderPreview() {
-    const t = this.playerElement.canvasElement;
-    this.playerElement.renderer.clear(t.width, t.height), this.playerElement.renderer.paintShape(this.buildPrototype());
+    const t = this.ufoElement.canvasElement;
+    this.ufoElement.renderer.clear(t.width, t.height), this.ufoElement.renderer.paintShape(this.buildPrototype());
   }
   toggleRecording() {
-    const t = this.playerElement.canvasElement;
-    this.isRecording ? (this.recorder?.stop(), this.isRecording = !1, this.recordButton.textContent = "Record", t.style.cursor = "", t.style.touchAction = "", this.playerElement.refresh()) : (this.recorder = new _(this.playerElement.sighting.timeline, new O(this.samplingRate)), this.recorder.start(U, this.buildPrototype()), this.isRecording = !0, this.recordButton.textContent = "Stop", t.style.cursor = "crosshair", t.style.touchAction = "none");
+    const t = this.ufoElement.canvasElement;
+    this.isRecording ? (this.recorder?.stop(), this.isRecording = !1, this.recordButton.textContent = "Record", t.style.cursor = "", t.style.touchAction = "", this.ufoElement.refresh()) : (this.recorder = new X(this.ufoElement.sighting.timeline, new Y(this.samplingRate)), this.recorder.start(Q, this.buildPrototype()), this.isRecording = !0, this.recordButton.textContent = "Stop", t.style.cursor = "crosshair", t.style.touchAction = "none");
   }
   onPointerDown(t) {
     this.isRecording && this.onPointerMove(t);
   }
   onPointerMove(t) {
     if (!this.isRecording) return;
-    const e = this.playerElement.canvasElement, s = e.getBoundingClientRect(), n = t.clientX - s.left, r = t.clientY - s.top;
-    this.recorder?.onPointerMove(n, r), this.playerElement.renderer.clear(e.width, e.height), this.playerElement.renderer.paintShape(
-      v(this.buildPrototype({ x: 0, y: 0, width: a.width, height: a.height }), n, r)
+    const e = this.ufoElement.canvasElement, s = e.getBoundingClientRect(), n = t.clientX - s.left, a = t.clientY - s.top;
+    this.recorder?.onPointerMove(n, a), this.ufoElement.renderer.clear(e.width, e.height), this.ufoElement.renderer.paintShape(
+      S(this.buildPrototype({ x: 0, y: 0, width: r.width, height: r.height }), n, a)
     );
   }
 }
-const f = "rr0-ufo-recorder";
-function W() {
-  E(), customElements.get(f) || customElements.define(f, J);
+const b = "rr0-ufo-recorder";
+function tt() {
+  I(), customElements.get(b) || customElements.define(b, V);
 }
-W();
+tt();

package/dist-embed-scene/UfoMessages_fr-DKnWFOyl.js

@@ -0,0 +1,10 @@
+const e = {
+  play: "Lecture",
+  pause: "Pause",
+  autoReplay: "Lecture automatique",
+  currentPosition: "Position actuelle",
+  duration: "Durée"
+};
+export {
+  e as ufoMessages_fr
+};