@rr0/ufoathome 0.1.0 → 0.2.0

package/dist-embed-ufo/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
+};

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

@@ -0,0 +1,471 @@
+const k = `
+<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>
+`, x = `
+: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;
+  padding: 0.4em 0.6em;
+  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 {
+  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 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();

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rr0/ufoathome",
   "type": "module",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "UFO@home — record and replay a UFO sighting's shape, movement and appearance",
   "author": "Jérôme Beau <rr0@rr0.org> (https://rr0.org)",
   "license": "MIT",
@@ -14,20 +14,23 @@
     "node": ">=20"
   },
   "exports": {
-    "./player": "./dist-embed-player/rr0-ufo-player.mjs",
-    "./recorder": "./dist-embed/rr0-ufo-recorder.mjs"
+    "./ufo": "./dist-embed-ufo/rr0-ufo.mjs",
+    "./recorder": "./dist-embed/rr0-ufo-recorder.mjs",
+    "./scene": "./dist-embed-scene/rr0-scene.mjs"
   },
   "files": [
     "dist-embed",
-    "dist-embed-player"
+    "dist-embed-ufo",
+    "dist-embed-scene"
   ],
   "scripts": {
     "dev": "vite",
     "build": "tsc --noEmit && vite build",
     "build:embed": "tsc --noEmit && vite build --config vite.embed.config.ts",
-    "build:embed-player": "tsc --noEmit && vite build --config vite.embed-player.config.ts",
-    "build:all": "npm run build && npm run build:embed && npm run build:embed-player",
-    "prepublishOnly": "npm run build:embed && npm run build:embed-player && npm test",
+    "build:embed-ufo": "tsc --noEmit && vite build --config vite.embed-ufo.config.ts",
+    "build:embed-scene": "tsc --noEmit && vite build --config vite.embed-scene.config.ts",
+    "build:all": "npm run build && npm run build:embed && npm run build:embed-ufo && npm run build:embed-scene",
+    "prepublishOnly": "npm run build:embed && npm run build:embed-ufo && npm run build:embed-scene && npm test",
     "preview": "vite preview",
     "test": "vitest run",
     "test:watch": "vitest"
@@ -35,9 +38,11 @@
   "dependencies": {
     "@rr0/data": "^0.3.40",
     "@rr0/place": "^0.5.3",
-    "@rr0/time": "^0.11.2"
+    "@rr0/time": "^0.11.2",
+    "three": "^0.185.1"
   },
   "devDependencies": {
+    "@types/three": "^0.185.3",
     "jsdom": "^25.0.0",
     "typescript": "^5.9.2",
     "vite": "^6.3.5",