@editframe/elements 0.21.0-beta.0 → 0.23.6-beta.0

package/src/gui/ContextMixin.ts

@@ -1,8 +1,11 @@
-import { consume, createContext, provide } from "@lit/context";
+import { ContextProvider, consume, createContext, provide } from "@lit/context";
 import type { LitElement } from "lit";
 import { property, state } from "lit/decorators.js";
 import { EF_RENDERING } from "../EF_RENDERING.ts";
-import type { EFTimegroup } from "../elements/EFTimegroup.js";
+import {
+  isEFTemporal,
+  type TemporalMixinInterface,
+} from "../elements/EFTemporal.js";
 import { globalURLTokenDeduplicator } from "../transcoding/cache/URLTokenDeduplicator.js";
 import { currentTimeContext } from "./currentTimeContext.js";
 import { durationContext } from "./durationContext.js";
@@ -16,9 +19,8 @@ import { type FocusContext, focusContext } from "./focusContext.js";
 import { focusedElementContext } from "./focusedElementContext.js";
 import { loopContext, playingContext } from "./playingContext.js";
 
-export const targetTimegroupContext = createContext<EFTimegroup | null>(
-  "target-timegroup",
-);
+export const targetTemporalContext =
+  createContext<TemporalMixinInterface | null>(Symbol("target-temporal"));
 
 export declare class ContextMixinInterface extends LitElement {
   signingURL?: string;
@@ -28,8 +30,8 @@ export declare class ContextMixinInterface extends LitElement {
   loop: boolean;
   currentTimeMs: number;
   focusedElement?: HTMLElement;
-  targetTimegroup: EFTimegroup | null;
-  play(): void;
+  targetTemporal: TemporalMixinInterface | null;
+  play(): Promise<void>;
   pause(): void;
 }
 
@@ -58,6 +60,13 @@ export function ContextMixin<T extends Constructor<LitElement>>(superClass: T) {
     @state()
     focusedElement?: HTMLElement;
 
+    #playingProvider!: ContextProvider<typeof playingContext>;
+    #loopProvider!: ContextProvider<typeof loopContext>;
+    #currentTimeMsProvider!: ContextProvider<typeof currentTimeContext>;
+    #targetTemporalProvider!: ContextProvider<typeof targetTemporalContext>;
+
+    #loop = false;
+
     #apiHost?: string;
     @property({ type: String, attribute: "api-host" })
     get apiHost() {
@@ -71,11 +80,97 @@ export function ContextMixin<T extends Constructor<LitElement>>(superClass: T) {
     @provide({ context: efContext })
     efContext = this;
 
-    @provide({ context: targetTimegroupContext })
+    #targetTemporal: TemporalMixinInterface | null = null;
+
     @state()
-    targetTimegroup: EFTimegroup | null = null;
+    get targetTemporal(): TemporalMixinInterface | null {
+      return this.#targetTemporal;
+    }
+    #controllerSubscribed = false;
+
+    /**
+     * Find the first root temporal element (recursively searches through children)
+     * Supports ef-timegroup, ef-video, ef-audio, and any other temporal elements
+     * even when they're wrapped in non-temporal elements like divs
+     */
+    private findRootTemporal(): TemporalMixinInterface | null {
+      const findRecursive = (
+        element: Element,
+      ): TemporalMixinInterface | null => {
+        if (isEFTemporal(element)) {
+          return element as TemporalMixinInterface & HTMLElement;
+        }
+
+        for (const child of element.children) {
+          const found = findRecursive(child);
+          if (found) return found;
+        }
+
+        return null;
+      };
+
+      for (const child of this.children) {
+        const found = findRecursive(child);
+        if (found) return found;
+      }
+
+      return null;
+    }
+
+    set targetTemporal(value: TemporalMixinInterface | null) {
+      if (this.#targetTemporal === value) return;
+
+      // Unsubscribe from old controller updates
+      if (this.#targetTemporal?.playbackController) {
+        this.#targetTemporal.playbackController.removeListener(
+          this.#onControllerUpdate,
+        );
+        this.#controllerSubscribed = false;
+      }
+
+      this.#targetTemporal = value;
+      this.#targetTemporalProvider?.setValue(value);
+
+      // Sync all provided contexts
+      this.requestUpdate("targetTemporal");
+      this.requestUpdate("playing");
+      this.requestUpdate("loop");
+      this.requestUpdate("currentTimeMs");
+
+      // If the new targetTemporal has a playbackController, apply stored loop value immediately
+      if (value?.playbackController && this.#loop) {
+        value.playbackController.setLoop(this.#loop);
+      }
 
-    // Add reactive properties that depend on the targetTimegroup
+      // If the new targetTemporal doesn't have a playbackController yet,
+      // wait for it to complete its updates (it might be initializing)
+      if (value && !value.playbackController) {
+        // Wait for the temporal element to initialize
+        (value as any).updateComplete?.then(() => {
+          if (value === this.#targetTemporal && !this.#controllerSubscribed) {
+            this.requestUpdate();
+          }
+        });
+      }
+    }
+
+    #onControllerUpdate = (
+      event: import("./PlaybackController.js").PlaybackControllerUpdateEvent,
+    ) => {
+      switch (event.property) {
+        case "playing":
+          this.#playingProvider.setValue(event.value as boolean);
+          break;
+        case "loop":
+          this.#loopProvider.setValue(event.value as boolean);
+          break;
+        case "currentTimeMs":
+          this.#currentTimeMsProvider.setValue(event.value as number);
+          break;
+      }
+    };
+
+    // Add reactive properties that depend on the targetTemporal
     @provide({ context: durationContext })
     @property({ type: Number })
     durationMs = 0;
@@ -236,39 +331,58 @@ export function ContextMixin<T extends Constructor<LitElement>>(superClass: T) {
       this.#signingURL = value;
     }
 
-    @provide({ context: playingContext })
     @property({ type: Boolean, reflect: true })
-    playing = false;
+    get playing(): boolean {
+      return this.targetTemporal?.playbackController?.playing ?? false;
+    }
+    set playing(value: boolean) {
+      if (this.targetTemporal?.playbackController) {
+        this.targetTemporal.playbackController.setPlaying(value);
+      }
+    }
 
-    @provide({ context: loopContext })
-    @property({ type: Boolean, reflect: true })
-    loop = false;
+    @property({ type: Boolean, reflect: true, attribute: "loop" })
+    get loop(): boolean {
+      return this.targetTemporal?.playbackController?.loop ?? this.#loop;
+    }
+    set loop(value: boolean) {
+      const oldValue = this.#loop;
+      this.#loop = value;
+      if (this.targetTemporal?.playbackController) {
+        this.targetTemporal.playbackController.setLoop(value);
+      }
+      this.requestUpdate("loop", oldValue);
+    }
 
     @property({ type: Boolean })
     rendering = false;
 
-    @provide({ context: currentTimeContext })
     @property({ type: Number })
-    currentTimeMs = Number.NaN;
-
-    #FPS = 30;
-    #MS_PER_FRAME = 1000 / this.#FPS;
+    get currentTimeMs(): number {
+      return (
+        this.targetTemporal?.playbackController?.currentTimeMs ?? Number.NaN
+      );
+    }
+    set currentTimeMs(value: number) {
+      if (this.targetTemporal?.playbackController) {
+        this.targetTemporal.playbackController.setCurrentTimeMs(value);
+      }
+    }
 
     #timegroupObserver = new MutationObserver((mutations) => {
       let shouldUpdate = false;
 
       for (const mutation of mutations) {
         if (mutation.type === "childList") {
-          const newTimegroup = this.querySelector("ef-timegroup");
-          if (newTimegroup !== this.targetTimegroup) {
-            this.targetTimegroup = newTimegroup;
+          const newTemporal = this.findRootTemporal();
+          if (newTemporal !== this.targetTemporal) {
+            this.targetTemporal = newTemporal;
             shouldUpdate = true;
           } else if (
             mutation.target instanceof Element &&
-            (mutation.target.tagName === "EF-TIMEGROUP" ||
-              mutation.target.closest("ef-timegroup"))
+            isEFTemporal(mutation.target)
           ) {
-            // Handle childList changes within existing timegroups
+            // Handle childList changes within existing temporal elements
             shouldUpdate = true;
           }
         } else if (mutation.type === "attributes") {
@@ -287,11 +401,7 @@ export function ContextMixin<T extends Constructor<LitElement>>(superClass: T) {
               mutation.attributeName || "",
             ) ||
             (mutation.target instanceof Element &&
-              (mutation.target.tagName === "EF-TIMEGROUP" ||
-                mutation.target.tagName === "EF-VIDEO" ||
-                mutation.target.tagName === "EF-AUDIO" ||
-                mutation.target.tagName === "EF-CAPTIONS" ||
-                mutation.target.closest("ef-timegroup")))
+              isEFTemporal(mutation.target))
           ) {
             shouldUpdate = true;
           }
@@ -302,23 +412,23 @@ export function ContextMixin<T extends Constructor<LitElement>>(superClass: T) {
         // Trigger an update to ensure reactive properties recalculate
         // Use a microtask to ensure DOM updates are complete
         queueMicrotask(() => {
-          // Recalculate duration and endTime when timegroup changes
+          // Recalculate duration and endTime when temporal element changes
           this.updateDurationProperties();
           this.requestUpdate();
-          // Also ensure the targetTimegroup updates its computed properties
-          if (this.targetTimegroup) {
-            this.targetTimegroup.requestUpdate();
+          // Also ensure the targetTemporal updates its computed properties
+          if (this.targetTemporal) {
+            (this.targetTemporal as any).requestUpdate();
           }
         });
       }
     });
 
     /**
-     * Update duration properties when timegroup changes
+     * Update duration properties when temporal element changes
      */
     updateDurationProperties(): void {
-      const newDuration = this.targetTimegroup?.durationMs ?? 0;
-      const newEndTime = this.targetTimegroup?.endTimeMs ?? 0;
+      const newDuration = this.targetTemporal?.durationMs ?? 0;
+      const newEndTime = this.targetTemporal?.endTimeMs ?? 0;
 
       if (this.durationMs !== newDuration) {
         this.durationMs = newDuration;
@@ -332,8 +442,26 @@ export function ContextMixin<T extends Constructor<LitElement>>(superClass: T) {
     connectedCallback(): void {
       super.connectedCallback();
 
-      // Initialize targetTimegroup
-      this.targetTimegroup = this.querySelector("ef-timegroup");
+      // Create manual context providers for playback state
+      this.#playingProvider = new ContextProvider(this, {
+        context: playingContext,
+        initialValue: this.playing,
+      });
+      this.#loopProvider = new ContextProvider(this, {
+        context: loopContext,
+        initialValue: this.loop,
+      });
+      this.#currentTimeMsProvider = new ContextProvider(this, {
+        context: currentTimeContext,
+        initialValue: this.currentTimeMs,
+      });
+      this.#targetTemporalProvider = new ContextProvider(this, {
+        context: targetTemporalContext,
+        initialValue: this.targetTemporal,
+      });
+
+      // Initialize targetTemporal to first root temporal element
+      this.targetTemporal = this.findRootTemporal();
       // Initialize duration properties
       this.updateDurationProperties();
 
@@ -342,164 +470,91 @@ export function ContextMixin<T extends Constructor<LitElement>>(superClass: T) {
         subtree: true,
         attributes: true,
       });
-
-      if (this.playing) {
-        this.startPlayback();
-      }
     }
 
     disconnectedCallback(): void {
       super.disconnectedCallback();
       this.#timegroupObserver.disconnect();
-      this.stopPlayback();
-      // Note: Global token cache is shared across all context providers
-      // No need to clear per-instance cache on disconnect
-    }
 
-    update(changedProperties: Map<string | number | symbol, unknown>) {
-      if (changedProperties.has("playing")) {
-        if (this.playing) {
-          this.startPlayback();
-        } else {
-          this.stopPlayback();
-        }
-      }
-      if (
-        changedProperties.has("currentTimeMs") &&
-        this.targetTimegroup &&
-        !Number.isNaN(this.currentTimeMs)
-      ) {
-        if (this.targetTimegroup.currentTimeMs !== this.currentTimeMs) {
-          if (this.isConnected) {
-            if (this.targetTimegroup.currentTimeMs === this.currentTimeMs) {
-              return;
-            }
-            this.targetTimegroup.currentTimeMs = this.currentTimeMs;
-          }
-        }
+      // Unsubscribe from controller
+      if (this.#targetTemporal?.playbackController) {
+        this.#targetTemporal.playbackController.removeListener(
+          this.#onControllerUpdate,
+        );
+        this.#controllerSubscribed = false;
       }
-      super.update(changedProperties);
-    }
 
-    play() {
-      this.playing = true;
+      this.pause();
     }
 
-    pause() {
-      this.playing = false;
-    }
+    updated(changedProperties: Map<string | number | symbol, unknown>) {
+      super.updated?.(changedProperties);
 
-    #playbackAudioContext: AudioContext | null = null;
-    #playbackAnimationFrameRequest: number | null = null;
-    #AUDIO_PLAYBACK_SLICE_MS = ((47 * 1024) / 48000) * 1000; // AAC-aligned: ~1002.67ms
-
-    #syncPlayheadToAudioContext(target: EFTimegroup, startMs: number) {
-      const rawTimeMs =
-        startMs + (this.#playbackAudioContext?.currentTime ?? 0) * 1000;
-      const nextTimeMs =
-        Math.round(rawTimeMs / this.#MS_PER_FRAME) * this.#MS_PER_FRAME;
-      if (nextTimeMs !== this.currentTimeMs) {
-        this.currentTimeMs = nextTimeMs;
-      }
-      this.#playbackAnimationFrameRequest = requestAnimationFrame(() => {
-        this.#syncPlayheadToAudioContext(target, startMs);
-      });
-    }
+      // Subscribe to controller when it becomes available
+      if (
+        !this.#controllerSubscribed &&
+        this.#targetTemporal?.playbackController
+      ) {
+        this.#targetTemporal.playbackController.addListener(
+          this.#onControllerUpdate,
+        );
+        this.#controllerSubscribed = true;
 
-    private async stopPlayback() {
-      if (this.#playbackAudioContext) {
-        if (this.#playbackAudioContext.state !== "closed") {
-          await this.#playbackAudioContext.close();
+        // Apply stored loop value when playbackController becomes available
+        if (this.#loop) {
+          this.#targetTemporal.playbackController.setLoop(this.#loop);
         }
-      }
-      if (this.#playbackAnimationFrameRequest) {
-        cancelAnimationFrame(this.#playbackAnimationFrameRequest);
-      }
-      this.#playbackAudioContext = null;
-      this.#playbackAnimationFrameRequest = null;
-    }
 
-    private async startPlayback() {
-      await this.stopPlayback();
-      const timegroup = this.targetTimegroup;
-      if (!timegroup) {
-        return;
+        // Trigger initial sync of context providers
+        this.#playingProvider.setValue(this.playing);
+        this.#loopProvider.setValue(this.loop);
+        this.#currentTimeMsProvider.setValue(this.currentTimeMs);
       }
+    }
 
-      await timegroup.waitForMediaDurations();
-
-      let currentMs = timegroup.currentTimeMs;
-      const fromMs = currentMs;
-      const toMs = timegroup.endTimeMs;
-
-      if (fromMs >= toMs) {
-        this.pause();
-        return;
-      }
-
-      let bufferCount = 0;
-      this.#playbackAudioContext = new AudioContext({
-        latencyHint: "playback",
-      });
-
-      if (this.#playbackAnimationFrameRequest) {
-        cancelAnimationFrame(this.#playbackAnimationFrameRequest);
-      }
-      this.#syncPlayheadToAudioContext(timegroup, currentMs);
-      const playbackContext = this.#playbackAudioContext;
-      if (playbackContext.state === "suspended") {
-        console.warn(
-          "AudioContext is suspended, media playback will not work until user has interacted with page.",
+    async play() {
+      // If targetTemporal is not set, try to find it now
+      // This handles cases where the DOM may not have been fully ready during connectedCallback
+      if (!this.targetTemporal) {
+        // Wait for any temporal custom elements to be defined
+        const potentialTemporalTags = Array.from(this.children)
+          .map((el) => el.tagName.toLowerCase())
+          .filter((tag) => tag.startsWith("ef-"));
+
+        await Promise.all(
+          potentialTemporalTags.map((tag) =>
+            customElements.whenDefined(tag).catch(() => {}),
+          ),
         );
-        this.playing = false;
-        return;
-      }
-      await playbackContext.suspend();
 
-      const fillBuffer = async () => {
-        if (bufferCount > 2) {
+        const foundTemporal = this.findRootTemporal();
+        if (foundTemporal) {
+          this.targetTemporal = foundTemporal;
+          // Wait for it to initialize
+          await (foundTemporal as any).updateComplete;
+        } else {
+          console.warn("No temporal element found to play");
           return;
         }
-        const canFillBuffer = await queueBufferSource();
-        if (canFillBuffer) {
-          fillBuffer();
-        }
-      };
+      }
 
-      const queueBufferSource = async () => {
-        if (currentMs >= toMs) {
-          return false;
+      // If playbackController doesn't exist yet, wait for it
+      if (!this.targetTemporal.playbackController) {
+        await (this.targetTemporal as any).updateComplete;
+        // After waiting, check again
+        if (!this.targetTemporal.playbackController) {
+          console.warn("PlaybackController not available for temporal element");
+          return;
         }
-        const startMs = currentMs;
-        const endMs = currentMs + this.#AUDIO_PLAYBACK_SLICE_MS;
-        currentMs += this.#AUDIO_PLAYBACK_SLICE_MS;
-        const audioBuffer = await timegroup.renderAudio(startMs, endMs);
-        bufferCount++;
-        const source = playbackContext.createBufferSource();
-        source.buffer = audioBuffer;
-        source.connect(playbackContext.destination);
-        source.start((startMs - fromMs) / 1000);
-        source.onended = () => {
-          bufferCount--;
-          if (endMs >= toMs) {
-            this.pause();
-            if (this.loop) {
-              this.updateComplete.then(() => {
-                this.currentTimeMs = 0;
-                this.updateComplete.then(() => {
-                  this.play();
-                });
-              });
-            }
-          } else {
-            fillBuffer();
-          }
-        };
-        return true;
-      };
+      }
+
+      this.targetTemporal.playbackController.play();
+    }
 
-      await fillBuffer();
-      await playbackContext.resume();
+    pause() {
+      if (this.targetTemporal?.playbackController) {
+        this.targetTemporal.playbackController.pause();
+      }
     }
   }