@clockworkdog/cogs-client 3.0.0-alpha.10 → 3.0.0-alpha.13

package/dist/state-based/MediaClipManager.d.ts

@@ -8,8 +8,9 @@ export declare abstract class MediaClipManager<T extends MediaClipState> {
     private surfaceElement;
     protected clipElement: HTMLElement;
     protected constructAssetURL: (file: string) => string;
+    protected getAudioOutput: (outputLabel: string) => string;
     protected mediaPreloader: MediaPreloader;
-    constructor(surfaceElement: HTMLElement, clipElement: HTMLElement, state: T, constructAssetURL: (file: string) => string, mediaPreloader: MediaPreloader);
+    constructor(surfaceElement: HTMLElement, clipElement: HTMLElement, state: T, constructAssetURL: (file: string) => string, getAudioOutput: (outputLabel: string) => string, mediaPreloader: MediaPreloader);
     protected abstract update(): void;
     abstract destroy(): void;
     isConnected(element?: HTMLElement): boolean;

package/dist/state-based/MediaClipManager.js

@@ -7,11 +7,13 @@ export class MediaClipManager {
     surfaceElement;
     clipElement;
     constructAssetURL;
+    getAudioOutput;
     mediaPreloader;
-    constructor(surfaceElement, clipElement, state, constructAssetURL, mediaPreloader) {
+    constructor(surfaceElement, clipElement, state, constructAssetURL, getAudioOutput, mediaPreloader) {
         this.surfaceElement = surfaceElement;
         this.clipElement = clipElement;
         this.constructAssetURL = constructAssetURL;
+        this.getAudioOutput = getAudioOutput;
         this.mediaPreloader = mediaPreloader;
         this._state = state;
         // Allow the class to be constructed, then call the loop
@@ -36,8 +38,6 @@ export class MediaClipManager {
     _state;
     setState(newState) {
         this._state = newState;
-        clearTimeout(this.timeout);
-        this.loop();
     }
     timeout;
     loop = async () => {
@@ -52,24 +52,36 @@ export class MediaClipManager {
 }
 export function assertElement(mediaElement, parentElement, clip, constructAssetURL, preloader) {
     let element;
+    const assetURL = constructAssetURL(clip.file);
     switch (clip.type) {
         case 'image':
             {
                 element = mediaElement instanceof HTMLImageElement ? mediaElement : document.createElement('img');
-                const assetURL = constructAssetURL(clip.file);
                 if (!element.src.includes(assetURL)) {
                     element.src = assetURL;
                 }
             }
             break;
         case 'audio':
-            element = mediaElement instanceof HTMLAudioElement ? mediaElement : preloader.getElement(clip.file, clip.type);
+            if (mediaElement instanceof HTMLAudioElement && mediaElement.src.includes(assetURL)) {
+                element = mediaElement;
+            }
+            else {
+                element = preloader.getElement(clip.file, clip.type);
+            }
             break;
         case 'video':
-            element = mediaElement instanceof HTMLVideoElement ? mediaElement : preloader.getElement(clip.file, clip.type);
+            if (mediaElement instanceof HTMLVideoElement && mediaElement.src.includes(assetURL)) {
+                element = mediaElement;
+            }
+            else {
+                element = preloader.getElement(clip.file, clip.type);
+            }
             break;
     }
-    parentElement.replaceChildren(element);
+    if (parentElement.children.length !== 1 || parentElement.childNodes[0] !== element) {
+        parentElement.replaceChildren(element);
+    }
     element.style.position = 'absolute';
     element.style.width = '100%';
     element.style.height = '100%';
@@ -93,9 +105,15 @@ export function assertAudialProperties(mediaElement, properties, sinkId) {
         mediaElement.volume = properties.volume;
     }
     if (mediaElement.sinkId !== sinkId) {
-        mediaElement.setSinkId(sinkId).catch(() => {
+        try {
+            mediaElement.setSinkId(sinkId).catch(() => {
+                /* Do nothing, will be tried in next loop */
+            });
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        }
+        catch (_) {
             /* Do nothing, will be tried in next loop */
-        });
+        }
     }
 }
 const OUTER_TARGET_SYNC_THRESHOLD_MS = 50; // When outside of this range we attempt to sync playback
@@ -217,7 +235,8 @@ export class AudioManager extends MediaClipManager {
         }
         if (!currentState || !this.audioElement)
             return;
-        assertAudialProperties(this.audioElement, currentState, this._state.audioOutput);
+        const sinkId = this.getAudioOutput(this._state.audioOutput);
+        assertAudialProperties(this.audioElement, currentState, sinkId);
         const nextSyncState = assertTemporalProperties(this.audioElement, currentState, this._state.keyframes, this.syncState);
         if (this.syncState.state !== 'seeking' && nextSyncState.state === 'seeking') {
             this.audioElement.addEventListener('seeked', () => {
@@ -244,8 +263,9 @@ export class VideoManager extends MediaClipManager {
         }
         if (!currentState || !this.videoElement)
             return;
+        const sinkId = this.getAudioOutput(this._state.audioOutput);
         assertVisualProperties(this.videoElement, currentState, this._state.fit);
-        assertAudialProperties(this.videoElement, currentState, this._state.audioOutput);
+        assertAudialProperties(this.videoElement, currentState, sinkId);
         const nextSyncState = assertTemporalProperties(this.videoElement, currentState, this._state.keyframes, this.syncState);
         if (this.syncState.state !== 'seeking' && nextSyncState.state === 'seeking') {
             this.videoElement.addEventListener('seeked', () => {

package/dist/state-based/MediaPreloader.js

@@ -17,7 +17,12 @@ export class MediaPreloader {
         // Clean up previous elements
         for (const [filename, media] of Object.entries(this._elements)) {
             if (!(filename in this._state)) {
+                if (media.inUse) {
+                    console.warn(`Failed to clean up element ${media.element.src}`);
+                    continue;
+                }
                 media.element.src = '';
+                media.element.load();
                 delete this._elements[filename];
             }
             media.inUse = media.element.isConnected;
@@ -64,7 +69,9 @@ export class MediaPreloader {
         else {
             const element = document.createElement(type);
             element.src = this._constructAssetURL(file);
-            this._elements[file] = { element, type, inUse: true };
+            if (type === 'video') {
+                this._elements[file] = { element, type, inUse: true };
+            }
             return element;
         }
     }

package/dist/state-based/SurfaceManager.d.ts

@@ -8,12 +8,13 @@ export declare const DATA_CLIP_ID = "data-clip-id";
  */
 export declare class SurfaceManager {
     private constructAssetUrl;
+    private getAudioOutput;
     private mediaPreloader;
     private _state;
     setState(newState: MediaSurfaceState): void;
     private _element;
     get element(): HTMLDivElement;
     private resources;
-    constructor(constructAssetUrl: (file: string) => string, testState?: MediaSurfaceState, mediaPreloader?: MediaPreloader);
+    constructor(constructAssetUrl: (file: string) => string, getAudioOutput: (outputLabel: string) => string, testState?: MediaSurfaceState, mediaPreloader?: MediaPreloader);
     update(): void;
 }

package/dist/state-based/SurfaceManager.js

@@ -8,6 +8,7 @@ export const DATA_CLIP_ID = 'data-clip-id';
  */
 export class SurfaceManager {
     constructAssetUrl;
+    getAudioOutput;
     mediaPreloader;
     _state = {};
     setState(newState) {
@@ -19,8 +20,9 @@ export class SurfaceManager {
         return this._element;
     }
     resources = {};
-    constructor(constructAssetUrl, testState, mediaPreloader = new MediaPreloader(constructAssetUrl)) {
+    constructor(constructAssetUrl, getAudioOutput, testState, mediaPreloader = new MediaPreloader(constructAssetUrl)) {
         this.constructAssetUrl = constructAssetUrl;
+        this.getAudioOutput = getAudioOutput;
         this.mediaPreloader = mediaPreloader;
         this._element = document.createElement('div');
         this._element.className = 'surface-manager';
@@ -66,13 +68,13 @@ export class SurfaceManager {
             if (!resource.manager) {
                 switch (clip.type) {
                     case 'image':
-                        resource.manager = new ImageManager(this._element, resource.element, clip, this.constructAssetUrl, this.mediaPreloader);
+                        resource.manager = new ImageManager(this._element, resource.element, clip, this.constructAssetUrl, this.getAudioOutput, this.mediaPreloader);
                         break;
                     case 'audio':
-                        resource.manager = new AudioManager(this._element, resource.element, clip, this.constructAssetUrl, this.mediaPreloader);
+                        resource.manager = new AudioManager(this._element, resource.element, clip, this.constructAssetUrl, this.getAudioOutput, this.mediaPreloader);
                         break;
                     case 'video':
-                        resource.manager = new VideoManager(this._element, resource.element, clip, this.constructAssetUrl, this.mediaPreloader);
+                        resource.manager = new VideoManager(this._element, resource.element, clip, this.constructAssetUrl, this.getAudioOutput, this.mediaPreloader);
                         break;
                 }
             }

package/dist/utils/getStateAtTime.js

@@ -1,5 +1,10 @@
 import { defaultAudioOptions, defaultImageOptions, defaultVideoOptions } from '../types/MediaSchema';
 export function getStateAtTime(state, time) {
+    //If there are any null keyframes the clip has been terminated
+    const nullKeyframes = state.keyframes.filter((kf) => kf[1] === null);
+    if (nullKeyframes.some((kf) => kf[0] <= time)) {
+        return undefined;
+    }
     switch (state.type) {
         case 'image': {
             const firstTimestamp = state.keyframes[0][0];

package/package.json

@@ -3,7 +3,7 @@
   "description": "Connect to COGS to build a custom Media Master",
   "author": "Clockwork Dog <info@clockwork.dog>",
   "homepage": "https://github.com/clockwork-dog/cogs-sdk/tree/main/packages/javascript",
-  "version": "3.0.0-alpha.10",
+  "version": "3.0.0-alpha.13",
   "keywords": [],
   "license": "MIT",
   "repository": {
@@ -37,7 +37,7 @@
     "cy:generate": "cypress run --e2e"
   },
   "dependencies": {
-    "@clockworkdog/timesync": "^3.0.0-alpha.10",
+    "@clockworkdog/timesync": "^3.0.0-alpha.13",
     "howler": "clockwork-dog/howler.js#fix-looping-clips",
     "reconnecting-websocket": "^4.4.0",
     "zod": "^4.1.13"