@rr0/ufoathome 0.2.0 → 0.3.0

package/dist-embed-ufo/assets/UfoMessages_fr-COCxf8Q_.js

@@ -0,0 +1 @@
+const e={play:"Lecture",pause:"Pause",autoReplay:"Lecture automatique",currentPosition:"Position actuelle",duration:"Durée",fullscreen:"Plein écran",exitFullscreen:"Quitter le plein écran"};export{e as ufoMessages_fr};

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

@@ -1,6 +1,9 @@
-const k = `
-<div class="stage">
-  <canvas id="canvas" width="640" height="360"></canvas>
+const L=`
+<div class="stage" id="stage">
+  <div class="frame" id="frame">
+    <canvas id="canvas" width="640" height="360"></canvas>
+  </div>
+  <button id="fullscreen" class="fullscreen-btn" type="button" title="Fullscreen" aria-label="Fullscreen">⛶</button>
   <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>
@@ -9,20 +12,51 @@ const k = `
     <button id="loop" type="button" title="Auto-replay" aria-label="Auto-replay" aria-pressed="true">↻</button>
   </div>
 </div>
-`, x = `
+`,F=`
 :host {
   display: block;
   font-family: sans-serif;
 }
+/* height:100% is a no-op fallback (resolves to auto) whenever .stage's own parent/host has no
+   definite height of its own (the normal, standalone case — .stage's height stays driven by
+   .frame's content, unchanged) — but it matters when this element is embedded with a definite
+   host size from outside (e.g. <rr0-scene>'s .ufo-overlay sizing this element to fill its own
+   #stage while THAT is fullscreen): it lets .toolbar/.fullscreen-btn, anchored to .stage below,
+   actually reach that outer element's true edges instead of only .frame's letterboxed ones. */
 .stage {
   position: relative;
   width: 100%;
+  height: 100%;
+}
+/* The browser's own fullscreen UA styles force the fullscreened element (.stage) to fill the
+   whole viewport (100vw/100vh) regardless of its content's aspect ratio. .toolbar/.fullscreen-btn
+   are anchored to .stage itself (not .frame) specifically so they stay pinned to the true screen
+   edges, full width, like a normal video player's controls — not stuck to the letterboxed
+   content's own (possibly smaller, centered) box above/around them. */
+.stage:fullscreen {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100vw;
+  height: 100vh;
+  background: #000;
+}
+/* max-width/max-height are unconditional (not just a :fullscreen override): percentages resolve
+   against .stage's height, which is only definite when .stage itself has one (fullscreen, or the
+   nested-in-<rr0-scene> case above) — otherwise they're inert, so this is always safe. When
+   definite, the browser's aspect-ratio/min-max interplay algorithm correctly derives whichever
+   of width/height is the tighter constraint from the other — a real "contain, centered" fit,
+   not just a single-axis cap that can let the other axis overflow and crop instead of shrink. */
+.frame {
+  width: 100%;
+  max-width: 100%;
+  aspect-ratio: 640 / 360;
+  max-height: 100%;
 }
 canvas {
   display: block;
   width: 100%;
-  height: auto;
-  aspect-ratio: 640 / 360;
+  height: 100%;
   background: var(--ufo-canvas-background, #050510);
   border: var(--ufo-canvas-border, 1px solid #333);
   box-sizing: border-box;
@@ -39,18 +73,38 @@ canvas {
   background: rgba(0, 0, 0, 0.55);
   transition: opacity 0.15s ease;
 }
-/* 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 {
+/* While playing, the toolbar and fullscreen button auto-hide and only reappear on hover — kept
+   always visible while paused/stopped, since that's when the user is most likely to want them.
+   Deliberately hover-only, not :focus-within: a clicked button/range input keeps keyboard focus
+   after the pointer moves away, which would otherwise keep them stuck visible indefinitely after
+   any interaction. */
+.auto-hide {
   opacity: 0;
   pointer-events: none;
 }
-.stage:hover .toolbar.auto-hide {
+.stage:hover .auto-hide {
   opacity: 1;
   pointer-events: auto;
 }
+.fullscreen-btn {
+  position: absolute;
+  top: 0.4em;
+  right: 0.4em;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.8em;
+  height: 1.8em;
+  padding: 0;
+  border: none;
+  border-radius: 3px;
+  cursor: pointer;
+  font-size: 1em;
+  line-height: 1;
+  background: rgba(0, 0, 0, 0.55);
+  color: #fff;
+  transition: opacity 0.15s ease;
+}
 input[type=range] {
   flex: 1;
 }
@@ -76,396 +130,4 @@ input[type=range] {
   min-width: 3em;
   text-align: center;
 }
-`;
-function w(i, t, e) {
-  const { bounds: s } = i;
-  return t >= s.x && t <= s.x + s.width && e >= s.y && e <= s.y + s.height;
-}
-class h {
-  keyframes = [];
-  addKeyframe(t, e) {
-    const s = this.findInsertIndex(t);
-    this.keyframes[s]?.t === t ? this.keyframes[s] = { t, shapes: e } : this.keyframes.splice(s, 0, { t, shapes: e });
-  }
-  findInsertIndex(t) {
-    let e = 0, s = this.keyframes.length;
-    for (; e < s; ) {
-      const a = e + s >>> 1;
-      this.keyframes[a].t < t ? e = a + 1 : s = a;
-    }
-    return e;
-  }
-  getKeyframeAt(t) {
-    const e = this.findInsertIndex(t), s = this.keyframes[e];
-    return s?.t === t ? s : void 0;
-  }
-  getShapeAt(t, e) {
-    return this.getKeyframeAt(t)?.shapes.find((s) => s.sourceId === e)?.shape;
-  }
-  /**
-   * Finds the most recent shape recorded at-or-before t for that source (hold-last-value),
-   * which is what playback needs since not every source has a keyframe at every sampled tick.
-   */
-  getLatestShapeAt(t, e) {
-    let s = this.findInsertIndex(t);
-    for (this.keyframes[s]?.t !== t && (s -= 1); s >= 0; s--) {
-      const a = this.keyframes[s].shapes.find((n) => n.sourceId === e);
-      if (a) return a.shape;
-    }
-  }
-  hitTest(t, e, s) {
-    const a = this.getKeyframeAt(t);
-    if (a) {
-      for (let n = a.shapes.length - 1; n >= 0; n--)
-        if (w(a.shapes[n].shape, e, s))
-          return a.shapes[n];
-    }
-  }
-  get duration() {
-    return this.keyframes.length === 0 ? 0 : this.keyframes[this.keyframes.length - 1].t;
-  }
-  get sourceIds() {
-    const t = /* @__PURE__ */ new Set();
-    for (const e of this.keyframes)
-      for (const s of e.shapes)
-        t.add(s.sourceId);
-    return [...t];
-  }
-  get allKeyframes() {
-    return this.keyframes;
-  }
-  toJSON() {
-    return { keyframes: this.keyframes };
-  }
-  static fromJSON(t) {
-    const e = new h();
-    for (const s of t.keyframes)
-      e.addKeyframe(s.t, s.shapes);
-    return e;
-  }
-}
-function c(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 T(i) {
-  if (i.durationSeconds !== void 0) return i.durationSeconds * 1e3;
-  const t = i.time ? c(i.time) : void 0, e = i.endTime ? c(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 u({ eventType: "sighting", time: t, place: e }, new h(), s);
-  }
-}
-class P {
-  constructor(t, e) {
-    this.timeline = t, this.onFrame = e;
-  }
-  rafId = null;
-  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.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.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);
-    };
-    this.rafId = requestAnimationFrame(t);
-  }
-  pause() {
-    this.state === "playing" && (this.state = "paused", this.rafId !== null && (cancelAnimationFrame(this.rafId), this.rafId = null));
-  }
-  stop() {
-    this.state = "stopped", this.rafId !== null && (cancelAnimationFrame(this.rafId), this.rafId = null);
-  }
-  seek(t) {
-    this.currentT = Math.max(0, Math.min(t, this.timeline.duration)), this.resolveFrame(this.currentT);
-  }
-  get playbackState() {
-    return this.state;
-  }
-  get time() {
-    return this.currentT;
-  }
-  resolveFrame(t) {
-    const e = /* @__PURE__ */ new Map();
-    for (const s of this.timeline.sourceIds) {
-      const a = this.timeline.getLatestShapeAt(t, s);
-      a && e.set(s, a);
-    }
-    this.onFrame(t, e);
-  }
-}
-const d = 6, p = d / 2, I = 20;
-class E {
-  constructor(t) {
-    this.ctx = t;
-  }
-  clear(t, e) {
-    this.ctx.clearRect(0, 0, t, e);
-  }
-  paintShape(t) {
-    this.ctx.save(), this.ctx.globalAlpha = 1 - t.transparency, t.haloScale > 0 && this.paintHalo(t), this.paintBase(t), t.selected && this.paintSelectionHandles(t), this.ctx.restore();
-  }
-  paintBase(t) {
-    if (this.ctx.fillStyle = t.color, this.ctx.beginPath(), t.kind === "oval") {
-      const { x: e, y: s, width: a, height: n } = t.bounds, r = a / 2, o = n / 2;
-      this.ctx.ellipse(e + r, s + o, r, o, 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((a, n) => {
-        n === 0 ? this.ctx.moveTo(a.x, a.y) : this.ctx.lineTo(a.x, a.y);
-      }), this.ctx.closePath(), this.ctx.restore();
-    }
-    this.ctx.fill();
-  }
-  paintHalo(t) {
-    this.ctx.save(), this.ctx.shadowColor = t.color, this.ctx.shadowBlur = I * t.haloScale, this.paintBase(t), this.ctx.restore();
-  }
-  paintSelectionHandles(t) {
-    const { x: e, y: s, width: a, height: n } = t.bounds, r = a / 2, o = n / 2;
-    this.ctx.strokeStyle = "lightgray", this.ctx.strokeRect(e, s, a, n), this.ctx.fillStyle = "lightgray";
-    const b = [
-      [e, s],
-      [e + r, s],
-      [e + a, s],
-      [e + a, s + o],
-      [e + a, s + n],
-      [e + r, s + n],
-      [e, s + n],
-      [e, s + o]
-    ];
-    for (const [v, S] of b)
-      this.ctx.fillRect(v - p, S - p, d, d);
-  }
-}
-function M(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 L(i) {
-  return new u(
-    {
-      eventType: "sighting",
-      time: i.time,
-      endTime: i.endTime,
-      durationSeconds: i.durationSeconds,
-      place: i.place
-    },
-    h.fromJSON(i.timeline),
-    i.witnessId
-  );
-}
-function B(i, t) {
-  for (const e of i) {
-    const s = e.toLowerCase().split("-")[0];
-    if (t.includes(s)) return s;
-  }
-  return "en";
-}
-const A = ["en", "fr"], C = {
-  en: () => Promise.resolve().then(() => F).then((i) => i.ufoMessages_en),
-  fr: () => import("./UfoMessages_fr-DKnWFOyl.js").then((i) => i.ufoMessages_fr)
-};
-function D(i) {
-  return C[i]();
-}
-const g = {
-  play: "Play",
-  pause: "Pause",
-  autoReplay: "Auto-replay",
-  currentPosition: "Current position",
-  duration: "Duration"
-}, F = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
-  __proto__: null,
-  ufoMessages_en: g
-}, Symbol.toStringTag, { value: "Module" }));
-class R extends HTMLElement {
-  static get observedAttributes() {
-    return ["src"];
-  }
-  shadow;
-  canvas;
-  canvasRenderer;
-  toolbar;
-  playPauseButton;
-  loopButton;
-  seekInput;
-  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 = g;
-  /** 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>${x}</style>${k}`, this.shadow.appendChild(t.content.cloneNode(!0)), this.canvas = this.shadow.getElementById("canvas"), this.canvasRenderer = new E(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");
-    t && this.loadFromSrc(t);
-  }
-  attributeChangedCallback(t, e, s) {
-    t === "src" && s && s !== e && this.isConnected && this.loadFromSrc(s);
-  }
-  /** Fetches a SightingRecordingJson from `url` and loads it — what the `src` attribute uses. */
-  async loadFromSrc(t) {
-    const e = await fetch(t);
-    this.sightingData = await e.json();
-  }
-  get sightingData() {
-    return M(this.currentSighting);
-  }
-  set sightingData(t) {
-    this.currentSighting = L(t), this.player = this.createPlayer(), this.updateTimeLabels(), this.updatePlayPauseButton(), this.refresh();
-  }
-  /**
-   * 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;
-  }
-  /** Exposed so UfoRecorderElement can paint a live drag preview on the same canvas. */
-  get canvasElement() {
-    return this.canvas;
-  }
-  get renderer() {
-    return this.canvasRenderer;
-  }
-  /**
-   * Re-reads the timeline's duration into the seek slider and repaints the
-   * current frame — call after externally mutating `sighting.timeline`
-   * (e.g. UfoRecorderElement adding keyframes while recording).
-   */
-  refresh() {
-    this.seekInput.max = String(this.currentSighting.timeline.duration), this.player.seek(this.player.time);
-  }
-  onFrame(t, e) {
-    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.timeStartLabel.textContent = this.formatPosition(t), this.updatePlayPauseButton();
-  }
-  createPlayer() {
-    const t = new P(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 = B(navigator.languages, A);
-    t !== "en" && this.applyMessages(await D(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 = T(t);
-    this.realDurationMs = e !== void 0 && e > 0 ? e : void 0, this.realStartMs = t.time ? c(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 l(t);
-    const e = this.currentSighting.timeline.duration, s = e > 0 ? t / e * this.realDurationMs : 0;
-    return this.realStartMs !== void 0 ? f(m(this.realStartMs + s)) : l(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 ? l(this.currentSighting.timeline.duration) : this.realStartMs !== void 0 ? f(m(this.realStartMs + this.realDurationMs)) : l(this.realDurationMs);
-  }
-}
-function m(i) {
-  const t = new Date(i);
-  return { hour: t.getUTCHours(), minute: t.getUTCMinutes(), second: t.getUTCSeconds() };
-}
-function f(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 l(i) {
-  const t = Math.round(i / 1e3), e = Math.floor(t / 60), s = t % 60;
-  return `${e}:${String(s).padStart(2, "0")}`;
-}
-const y = "rr0-ufo";
-function O() {
-  customElements.get(y) || customElements.define(y, R);
-}
-O();
+`;function C(n,e,t){const{bounds:s}=n;return e>=s.x&&e<=s.x+s.width&&t>=s.y&&t<=s.y+s.height}function l(n,e,t){return n+(e-n)*t}function T(n){const e=/^#([0-9a-f]{6})$/i.exec(n);if(!e)return;const t=parseInt(e[1],16);return[t>>16&255,t>>8&255,t&255]}function O(n){return`#${n.map(e=>Math.round(e).toString(16).padStart(2,"0")).join("")}`}function _(n,e,t){const s=T(n),i=T(e);return!s||!i?t<1?n:e:O([l(s[0],i[0],t),l(s[1],i[1],t),l(s[2],i[2],t)])}function R(n,e,t){const s={x:l(n.bounds.x,e.bounds.x,t),y:l(n.bounds.y,e.bounds.y,t),width:l(n.bounds.width,e.bounds.width,t),height:l(n.bounds.height,e.bounds.height,t)},i=l(n.angle,e.angle,t),r=l(n.transparency,e.transparency,t),a=l(n.haloScale,e.haloScale,t),o=_(n.color,e.color,t);return n.kind==="polygon"&&e.kind==="polygon"&&n.points.length===e.points.length?{...n,bounds:s,angle:i,transparency:r,haloScale:a,color:o,points:n.points.map((c,f)=>({x:l(c.x,e.points[f].x,t),y:l(c.y,e.points[f].y,t)}))}:{...t<1?n:e,bounds:s,angle:i,transparency:r,haloScale:a,color:o}}class k{keyframes=[];addKeyframe(e,t){const s=this.findInsertIndex(e);if(this.keyframes[s]?.t===e){const i=new Set(t.map(r=>r.sourceId));this.keyframes[s]={t:e,shapes:[...this.keyframes[s].shapes.filter(r=>!i.has(r.sourceId)),...t]}}else this.keyframes.splice(s,0,{t:e,shapes:[...t]})}findInsertIndex(e){let t=0,s=this.keyframes.length;for(;t<s;){const i=t+s>>>1;this.keyframes[i].t<e?t=i+1:s=i}return t}getKeyframeAt(e){const t=this.findInsertIndex(e),s=this.keyframes[t];return s?.t===e?s:void 0}getShapeAt(e,t){return this.getKeyframeAt(e)?.shapes.find(s=>s.sourceId===t)?.shape}getLatestShapeAt(e,t){let s=this.findInsertIndex(e);for(this.keyframes[s]?.t!==e&&(s-=1);s>=0;s--){const i=this.keyframes[s].shapes.find(r=>r.sourceId===t);if(i)return i.shape}}getInterpolatedShapeAt(e,t){const s=this.findShapeAtOrBefore(e,t);if(s?.t===e)return s.shape;const i=this.findShapeAtOrAfter(e,t);return s?i?R(s.shape,i.shape,(e-s.t)/(i.t-s.t)):s.shape:i?.shape}findShapeAtOrBefore(e,t){let s=this.findInsertIndex(e);for(this.keyframes[s]?.t!==e&&(s-=1);s>=0;s--){const i=this.keyframes[s].shapes.find(r=>r.sourceId===t);if(i)return{t:this.keyframes[s].t,shape:i.shape}}}findShapeAtOrAfter(e,t){for(let s=this.findInsertIndex(e);s<this.keyframes.length;s++){const i=this.keyframes[s].shapes.find(r=>r.sourceId===t);if(i)return{t:this.keyframes[s].t,shape:i.shape}}}hitTest(e,t,s){const i=this.sourceIds;for(let r=i.length-1;r>=0;r--){const a=this.getInterpolatedShapeAt(e,i[r]);if(a&&C(a,t,s))return{sourceId:i[r],shape:a}}}get duration(){return this.keyframes.length===0?0:this.keyframes[this.keyframes.length-1].t}get sourceIds(){const e=new Set;for(const t of this.keyframes)for(const s of t.shapes)e.add(s.sourceId);return[...e]}get allKeyframes(){return this.keyframes}toJSON(){return{keyframes:this.keyframes}}static fromJSON(e){const t=new k;for(const s of e.keyframes)t.addKeyframe(s.t,s.shapes);return t}}function N(n,e,t){return Math.max(e,Math.min(t,n))}function U(n,e,t){const s=((e-n)%360+540)%360-180;return((n+s*t)%360+360)%360}function m(n,e,t){return n+(e-n)*t}function H(n,e,t){return{lat:n.lat===void 0||e.lat===void 0?void 0:m(n.lat,e.lat,t),lng:n.lng===void 0||e.lng===void 0?void 0:m(n.lng,e.lng,t),elevationM:m(n.elevationM,e.elevationM,t),headingDeg:n.headingDeg===void 0||e.headingDeg===void 0?void 0:U(n.headingDeg,e.headingDeg,t),pitchDeg:m(n.pitchDeg,e.pitchDeg,t),fovDeg:m(n.fovDeg,e.fovDeg,t)}}class y{keyframes=[];addKeyframe(e,t){const s=this.findInsertIndex(e);this.keyframes[s]?.t===e?this.keyframes[s]={t:e,pose:t}:this.keyframes.splice(s,0,{t:e,pose:t})}clear(){this.keyframes.length=0}findInsertIndex(e){let t=0,s=this.keyframes.length;for(;t<s;){const i=t+s>>>1;this.keyframes[i].t<e?t=i+1:s=i}return t}getLatestPoseAt(e){let t=this.findInsertIndex(e);return this.keyframes[t]?.t!==e&&(t-=1),t>=0?this.keyframes[t].pose:void 0}getInterpolatedPoseAt(e){const t=this.findInsertIndex(e),s=this.keyframes[t]?.t===e?this.keyframes[t]:this.keyframes[t-1];if(s?.t===e)return s.pose;const i=this.keyframes[t]?.t===e?void 0:this.keyframes[t];return s?i?H(s.pose,i.pose,N((e-s.t)/(i.t-s.t),0,1)):s.pose:i?.pose}get duration(){return this.keyframes.length===0?0:this.keyframes[this.keyframes.length-1].t}get allKeyframes(){return this.keyframes}toJSON(){return{keyframes:this.keyframes}}static fromJSON(e){const t=new y;for(const s of e.keyframes)t.addKeyframe(s.t,s.pose);return t}}function S(n){if(n.year!==void 0)return Date.UTC(n.year,(n.month??1)-1,n.day??1,n.hour??0,n.minute??0,n.second??0)}function $(n){if(n.durationSeconds!==void 0)return n.durationSeconds*1e3;const e=n.time?S(n.time):void 0,t=n.endTime?S(n.endTime):void 0;return e!==void 0&&t!==void 0?t-e:void 0}class w{constructor(e,t,s,i,r,a){this.event=e,this.timeline=t,this.observerTrack=s,this.witnessId=i,this.witnessName=r,this.caseId=a}static create(e,t,s){return new w({eventType:"sighting",time:e,place:t},new k,new y,s)}}class J{constructor(e,t){this.timeline=e,this.onFrame=t}rafId=null;state="stopped";currentT=0;lastWallTime=0;playbackRate=1;loop=!1;durationOverrideMs=0;get seekableDuration(){return Math.max(this.timeline.duration,this.durationOverrideMs)}play(){if(this.state==="playing")return;this.currentT>=this.seekableDuration&&(this.currentT=0,this.resolveFrame(0)),this.state="playing",this.lastWallTime=performance.now();const e=()=>{if(this.state!=="playing")return;const t=performance.now();if(this.currentT+=(t-this.lastWallTime)*this.playbackRate,this.lastWallTime=t,this.currentT>=this.seekableDuration){if(this.loop&&this.seekableDuration>0){this.currentT%=this.seekableDuration,this.resolveFrame(this.currentT),this.rafId=requestAnimationFrame(e);return}this.currentT=this.seekableDuration,this.stop(),this.resolveFrame(this.currentT);return}this.resolveFrame(this.currentT),this.rafId=requestAnimationFrame(e)};this.rafId=requestAnimationFrame(e)}pause(){this.state==="playing"&&(this.state="paused",this.rafId!==null&&(cancelAnimationFrame(this.rafId),this.rafId=null))}stop(){this.state="stopped",this.rafId!==null&&(cancelAnimationFrame(this.rafId),this.rafId=null)}seek(e){this.currentT=Math.max(0,Math.min(e,this.seekableDuration)),this.resolveFrame(this.currentT)}get playbackState(){return this.state}get time(){return this.currentT}resolveFrame(e){const t=new Map;for(const s of this.timeline.sourceIds){const i=this.timeline.getInterpolatedShapeAt(e,s);i&&t.set(s,i)}this.onFrame(e,t)}}const K=["nw","n","ne","e","se","s","sw","w"],q=24;function z(n,e,t){const s=n.x-e.x,i=n.y-e.y,r=Math.cos(t),a=Math.sin(t);return{x:e.x+s*r-i*a,y:e.y+s*a+i*r}}function W(n){return{x:n.x+n.width/2,y:n.y+n.height/2}}function j(n){const{x:e,y:t,width:s,height:i}=n.bounds,r={nw:{x:e,y:t},n:{x:e+s/2,y:t},ne:{x:e+s,y:t},e:{x:e+s,y:t+i/2},se:{x:e+s,y:t+i},s:{x:e+s/2,y:t+i},sw:{x:e,y:t+i},w:{x:e,y:t+i/2},rotate:{x:e+s/2,y:t-q}},a=W(n.bounds),o={};for(const c of Object.keys(r))o[c]=z(r[c],a,n.angle);return o}const I=6,b=I/2,Z=20;class G{constructor(e){this.ctx=e}clear(e,t){this.ctx.clearRect(0,0,e,t)}paintShape(e){this.ctx.save(),this.ctx.globalAlpha=1-e.transparency,e.haloScale>0&&this.paintHalo(e),this.paintBase(e),this.ctx.restore(),e.selected&&this.paintSelectionHandles(e)}paintBase(e){if(this.ctx.fillStyle=e.color,this.ctx.beginPath(),e.kind==="oval"){const{x:t,y:s,width:i,height:r}=e.bounds,a=i/2,o=r/2;this.ctx.ellipse(t+a,s+o,a,o,e.angle,0,2*Math.PI)}else{const{x:t,y:s,width:i,height:r}=e.bounds;this.ctx.save(),this.ctx.translate(t+i/2,s+r/2),this.ctx.rotate(e.angle),this.ctx.translate(-i/2,-r/2),e.points.forEach((a,o)=>{o===0?this.ctx.moveTo(a.x,a.y):this.ctx.lineTo(a.x,a.y)}),this.ctx.closePath(),this.ctx.restore()}this.ctx.fill()}paintHalo(e){this.ctx.save(),this.ctx.shadowColor=e.color,this.ctx.shadowBlur=Z*e.haloScale,this.paintBase(e),this.ctx.restore()}paintSelectionHandles(e){const t=j(e);this.ctx.strokeStyle="lightgray",this.ctx.beginPath(),this.ctx.moveTo(t.nw.x,t.nw.y),this.ctx.lineTo(t.ne.x,t.ne.y),this.ctx.lineTo(t.se.x,t.se.y),this.ctx.lineTo(t.sw.x,t.sw.y),this.ctx.closePath(),this.ctx.stroke(),this.ctx.fillStyle="lightgray";for(const s of K){const i=t[s];this.ctx.fillRect(i.x-b,i.y-b,I,I)}this.ctx.beginPath(),this.ctx.moveTo(t.n.x,t.n.y),this.ctx.lineTo(t.rotate.x,t.rotate.y),this.ctx.stroke(),this.ctx.beginPath(),this.ctx.ellipse(t.rotate.x,t.rotate.y,b+1,b+1,0,0,2*Math.PI),this.ctx.fill()}}function Q(n){return{version:1,time:n.event.time,endTime:n.event.endTime,durationSeconds:n.event.durationSeconds,place:n.event.place,witnessId:n.witnessId,witnessName:n.witnessName,caseId:n.caseId,timeline:n.timeline.toJSON(),observerTrack:n.observerTrack.toJSON()}}function V(n){return new w({eventType:"sighting",time:n.time,endTime:n.endTime,durationSeconds:n.durationSeconds,place:n.place},k.fromJSON(n.timeline),n.observerTrack?y.fromJSON(n.observerTrack):new y,n.witnessId,n.witnessName,n.caseId)}function X(n,e){for(const t of n){const s=t.toLowerCase().split("-")[0];if(e.includes(s))return s}return"en"}const Y="modulepreload",ee=function(n,e){return new URL(n,e).href},E={},P=function(e,t,s){let i=Promise.resolve();if(t&&t.length>0){let a=function(h){return Promise.all(h.map(d=>Promise.resolve(d).then(p=>({status:"fulfilled",value:p}),p=>({status:"rejected",reason:p}))))};const o=document.getElementsByTagName("link"),c=document.querySelector("meta[property=csp-nonce]"),f=c?.nonce||c?.getAttribute("nonce");i=a(t.map(h=>{if(h=ee(h,s),h in E)return;E[h]=!0;const d=h.endsWith(".css"),p=d?'[rel="stylesheet"]':"";if(!!s)for(let g=o.length-1;g>=0;g--){const v=o[g];if(v.href===h&&(!d||v.rel==="stylesheet"))return}else if(document.querySelector(`link[href="${h}"]${p}`))return;const u=document.createElement("link");if(u.rel=d?"stylesheet":Y,d||(u.as="script"),u.crossOrigin="",u.href=h,f&&u.setAttribute("nonce",f),document.head.appendChild(u),d)return new Promise((g,v)=>{u.addEventListener("load",g),u.addEventListener("error",()=>v(new Error(`Unable to preload CSS for ${h}`)))})}))}function r(a){const o=new Event("vite:preloadError",{cancelable:!0});if(o.payload=a,window.dispatchEvent(o),!o.defaultPrevented)throw a}return i.then(a=>{for(const o of a||[])o.status==="rejected"&&r(o.reason);return e().catch(r)})},te=["en","fr"],se={en:()=>P(()=>Promise.resolve().then(()=>ie),void 0,import.meta.url).then(n=>n.ufoMessages_en),fr:()=>P(()=>import("./assets/UfoMessages_fr-COCxf8Q_.js"),[],import.meta.url).then(n=>n.ufoMessages_fr)};function ne(n){return se[n]()}const A={play:"Play",pause:"Pause",autoReplay:"Auto-replay",currentPosition:"Current position",duration:"Duration",fullscreen:"Fullscreen",exitFullscreen:"Exit fullscreen"},ie=Object.freeze(Object.defineProperty({__proto__:null,ufoMessages_en:A},Symbol.toStringTag,{value:"Module"}));class re extends HTMLElement{static get observedAttributes(){return["src"]}shadow;stageElement;canvas;canvasRenderer;toolbar;playPauseButton;loopButton;fullscreenButton;seekInput;timeStartLabel;timeEndLabel;currentSighting=w.create();player;loopEnabled=!0;highlightedSourceId;enableClickToPlay=!0;fullscreenTarget;messages=A;realDurationMs;realStartMs;handleFullscreenChange=()=>this.updateFullscreenButton();constructor(){super(),this.shadow=this.attachShadow({mode:"open"});const e=document.createElement("template");e.innerHTML=`<style>${F}</style>${L}`,this.shadow.appendChild(e.content.cloneNode(!0)),this.stageElement=this.shadow.getElementById("stage"),this.canvas=this.shadow.getElementById("canvas"),this.canvasRenderer=new G(this.canvas.getContext("2d")),this.toolbar=this.shadow.getElementById("toolbar"),this.playPauseButton=this.shadow.getElementById("play-pause"),this.loopButton=this.shadow.getElementById("loop"),this.fullscreenButton=this.shadow.getElementById("fullscreen"),this.seekInput=this.shadow.getElementById("seek"),this.timeStartLabel=this.shadow.getElementById("time-start"),this.timeEndLabel=this.shadow.getElementById("time-end"),this.fullscreenTarget=this.stageElement,this.playPauseButton.addEventListener("click",()=>this.togglePlayPause()),this.loopButton.addEventListener("click",()=>this.toggleLoop()),this.fullscreenButton.addEventListener("click",()=>this.toggleFullscreen()),this.seekInput.addEventListener("input",()=>this.player.seek(Number(this.seekInput.value))),this.canvas.addEventListener("click",()=>{this.enableClickToPlay&&this.togglePlayPause()}),document.addEventListener("fullscreenchange",this.handleFullscreenChange),this.player=this.createPlayer(),this.updateTimeLabels(),this.updatePlayPauseButton(),this.updateFullscreenButton(),this.refresh(),this.loadLocaleMessages()}connectedCallback(){const e=this.getAttribute("src");e&&this.loadFromSrc(e)}disconnectedCallback(){document.removeEventListener("fullscreenchange",this.handleFullscreenChange)}attributeChangedCallback(e,t,s){e==="src"&&s&&s!==t&&this.isConnected&&this.loadFromSrc(s)}async loadFromSrc(e){const t=await fetch(e);this.sightingData=await t.json()}get sightingData(){return Q(this.currentSighting)}set sightingData(e){this.currentSighting=V(e),this.player=this.createPlayer(),this.updateTimeLabels(),this.updatePlayPauseButton(),this.refresh()}get sighting(){return this.currentSighting}get canvasElement(){return this.canvas}get renderer(){return this.canvasRenderer}get currentTime(){return this.player.time}get playbackState(){return this.player.playbackState}get selectedSourceId(){return this.highlightedSourceId}get durationSeconds(){return this.currentSighting.event.durationSeconds}set durationSeconds(e){this.currentSighting.event.durationSeconds=e,this.updateTimeLabels(),this.refresh()}set selectedSourceId(e){e!==this.highlightedSourceId&&(this.highlightedSourceId=e,this.refresh())}refresh(){this.seekInput.max=String(this.player.seekableDuration),this.player.seek(this.player.time)}onFrame(e,t){this.canvasRenderer.clear(this.canvas.width,this.canvas.height);const s=this.playbackState!=="playing";for(const[i,r]of t){const a=s&&i===this.highlightedSourceId;this.canvasRenderer.paintShape(a?{...r,selected:!0}:r)}this.seekInput.value=String(e),this.timeStartLabel.textContent=this.formatPosition(e),this.updatePlayPauseButton(),this.dispatchEvent(new CustomEvent("timeupdate",{detail:{time:e}}))}createPlayer(){const e=new J(this.currentSighting.timeline,(t,s)=>this.onFrame(t,s));return e.loop=this.loopEnabled,e}togglePlayPause(){this.player.playbackState==="playing"?(this.player.pause(),this.refresh()):this.player.play(),this.updatePlayPauseButton()}updatePlayPauseButton(){const e=this.player.playbackState==="playing";this.playPauseButton.textContent=e?"⏸":"▶",this.playPauseButton.title=e?this.messages.pause:this.messages.play,this.playPauseButton.setAttribute("aria-label",e?this.messages.pause:this.messages.play),this.toolbar.classList.toggle("auto-hide",e),this.fullscreenButton.classList.toggle("auto-hide",e)}toggleLoop(){this.loopEnabled=!this.loopEnabled,this.loopButton.setAttribute("aria-pressed",String(this.loopEnabled)),this.player.loop=this.loopEnabled}toggleFullscreen(){document.fullscreenElement?document.exitFullscreen():this.fullscreenTarget.requestFullscreen().catch(e=>{console.error("<rr0-ufo>: requestFullscreen() failed —",e)})}updateFullscreenButton(){const e=document.fullscreenElement===this.fullscreenTarget;this.fullscreenButton.title=e?this.messages.exitFullscreen:this.messages.fullscreen,this.fullscreenButton.setAttribute("aria-label",this.fullscreenButton.title)}async loadLocaleMessages(){const e=X(navigator.languages,te);e!=="en"&&this.applyMessages(await ne(e))}applyMessages(e){this.messages=e,this.timeStartLabel.title=e.currentPosition,this.timeEndLabel.title=e.duration,this.loopButton.title=e.autoReplay,this.loopButton.setAttribute("aria-label",e.autoReplay),this.updatePlayPauseButton(),this.updateFullscreenButton()}updateTimeLabels(){const e=this.currentSighting.event,t=$(e);this.realDurationMs=t!==void 0&&t>0?t:void 0,this.realStartMs=e.time?S(e.time):void 0;const s=this.currentSighting.timeline.duration;this.player.playbackRate=this.realDurationMs!==void 0&&s>0?s/this.realDurationMs:1,this.player.durationOverrideMs=this.realDurationMs??0,this.timeEndLabel.textContent=this.formatEndOfTimeline(),this.timeStartLabel.textContent=this.formatPosition(this.player.time)}formatPosition(e){if(this.realDurationMs===void 0)return x(e);const t=this.currentSighting.timeline.duration,s=t>0&&e<=t?e/t*this.realDurationMs:e;return this.realStartMs!==void 0?B(M(this.realStartMs+s)):x(s)}formatEndOfTimeline(){return this.realDurationMs===void 0?x(this.currentSighting.timeline.duration):this.realStartMs!==void 0?B(M(this.realStartMs+this.realDurationMs)):x(this.realDurationMs)}}function M(n){const e=new Date(n);return{hour:e.getUTCHours(),minute:e.getUTCMinutes(),second:e.getUTCSeconds()}}function B(n){if(n.hour===void 0)return"0:00";const e=t=>String(t).padStart(2,"0");return n.second?`${e(n.hour)}:${e(n.minute??0)}:${e(n.second)}`:`${e(n.hour)}:${e(n.minute??0)}`}function x(n){const e=Math.round(n/1e3),t=Math.floor(e/60),s=e%60;return`${t}:${String(s).padStart(2,"0")}`}const D="rr0-ufo";function ae(){customElements.get(D)||customElements.define(D,re)}ae();

package/dist-embed-witnesses/assets/UfoMessages_fr-COCxf8Q_.js

@@ -0,0 +1 @@
+const e={play:"Lecture",pause:"Pause",autoReplay:"Lecture automatique",currentPosition:"Position actuelle",duration:"Durée",fullscreen:"Plein écran",exitFullscreen:"Quitter le plein écran"};export{e as ufoMessages_fr};

package/dist-embed-witnesses/assets/WitnessSelectorMessages_en-D8xgZDfY.js

@@ -0,0 +1 @@
+const s={witness:"Witness"};export{s as witnessSelectorMessages_en};

package/dist-embed-witnesses/assets/WitnessSelectorMessages_fr-C0GHqC_J.js

@@ -0,0 +1 @@
+const s={witness:"Témoin"};export{s as witnessSelectorMessages_fr};