@clockworkdog/cogs-client 3.0.0-alpha.6 → 3.0.0-alpha.8

package/dist/index.d.ts

@@ -5,6 +5,8 @@ export type { default as MediaClipStateMessage } from './types/MediaClipStateMes
 export type { default as ShowPhase } from './types/ShowPhase';
 export type { default as MediaObjectFit } from './types/MediaObjectFit';
 export * as MediaSchema from './types/MediaSchema';
+export * from './state-based/SurfaceManager';
+export * from './state-based/MediaPreloader';
 export { default as CogsAudioPlayer } from './AudioPlayer';
 export { default as CogsVideoPlayer } from './VideoPlayer';
 export { SurfaceManager } from './state-based/SurfaceManager';

package/dist/index.js

@@ -1,6 +1,8 @@
 export { default as CogsConnection } from './CogsConnection';
 export * from './CogsConnection';
 export * as MediaSchema from './types/MediaSchema';
+export * from './state-based/SurfaceManager';
+export * from './state-based/MediaPreloader';
 export { default as CogsAudioPlayer } from './AudioPlayer';
 export { default as CogsVideoPlayer } from './VideoPlayer';
 export { SurfaceManager } from './state-based/SurfaceManager';

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

@@ -1,9 +1,11 @@
 import { AudioState } from '../types/MediaSchema';
 import { ClipManager } from './ClipManager';
+import { MediaPreloader } from './MediaPreloader';
 export declare class AudioManager extends ClipManager<AudioState> {
+    private mediaPreloader;
     private audioElement?;
     private isSeeking;
-    constructor(surfaceElement: HTMLElement, clipElement: HTMLElement, state: AudioState);
+    constructor(surfaceElement: HTMLElement, clipElement: HTMLElement, state: AudioState, constructAssetURL: (file: string) => string, mediaPreloader: MediaPreloader);
     private updateAudioElement;
     /**
      * Helper function to seek to a specified time.

package/dist/state-based/AudioManager.js

@@ -12,15 +12,17 @@ function playbackSmoothing(deltaTime) {
     return Math.sign(deltaTime) * Math.pow(Math.abs(deltaTime) / MAX_SYNC_THRESHOLD_MS, PLAYBACK_ADJUSTMENT_SMOOTHING) * MAX_PLAYBACK_RATE_ADJUSTMENT;
 }
 export class AudioManager extends ClipManager {
+    mediaPreloader;
     audioElement;
     isSeeking = false;
-    constructor(surfaceElement, clipElement, state) {
-        super(surfaceElement, clipElement, state);
+    constructor(surfaceElement, clipElement, state, constructAssetURL, mediaPreloader) {
+        super(surfaceElement, clipElement, state, constructAssetURL);
+        this.mediaPreloader = mediaPreloader;
         this.clipElement = clipElement;
     }
     updateAudioElement() {
-        this.destroy();
-        this.audioElement = document.createElement('audio');
+        const element = this.mediaPreloader.getElement(this._state.file, 'audio');
+        this.audioElement = element;
         this.clipElement.replaceChildren(this.audioElement);
     }
     /**
@@ -53,9 +55,10 @@ export class AudioManager extends ClipManager {
         if (!currentState || !this.audioElement)
             return;
         const { t, rate, volume } = { ...defaultAudioOptions, ...currentState };
-        // this.audioElement.src will be a fully qualified URL
-        if (!this.audioElement.src.endsWith(this._state.file)) {
-            this.audioElement.src = this._state.file;
+        // this.videoElement.src will be a fully qualified URL
+        const assetURL = this.constructAssetURL(this._state.file);
+        if (!this.audioElement.src.includes(assetURL)) {
+            this.updateAudioElement();
         }
         if (this.audioElement.volume !== volume) {
             this.audioElement.volume = volume;
@@ -105,7 +108,6 @@ export class AudioManager extends ClipManager {
     }
     destroy() {
         if (this.audioElement) {
-            this.audioElement.src = '';
             this.audioElement.remove();
         }
     }

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

@@ -6,7 +6,8 @@ import { MediaClipState } from '../types/MediaSchema';
 export declare abstract class ClipManager<T extends MediaClipState> {
     private surfaceElement;
     protected clipElement: HTMLElement;
-    constructor(surfaceElement: HTMLElement, clipElement: HTMLElement, state: T);
+    protected constructAssetURL: (file: string) => string;
+    constructor(surfaceElement: HTMLElement, clipElement: HTMLElement, state: T, constructAssetURL: (file: string) => string);
     /**
      * This is the delay to be used in the update loop.
      * It is intended to be dynamic for each loop.

package/dist/state-based/ClipManager.js

@@ -6,9 +6,11 @@ const DEFAULT_DELAY = 1_000;
 export class ClipManager {
     surfaceElement;
     clipElement;
-    constructor(surfaceElement, clipElement, state) {
+    constructAssetURL;
+    constructor(surfaceElement, clipElement, state, constructAssetURL) {
         this.surfaceElement = surfaceElement;
         this.clipElement = clipElement;
+        this.constructAssetURL = constructAssetURL;
         this._state = state;
         // Allow the class to be constructed, then call the loop
         setTimeout(this.loop);
@@ -36,6 +38,9 @@ export class ClipManager {
     }
     _state;
     setState(newState) {
+        if (this._state.file !== newState.file) {
+            throw new Error(`Cannot change from ${this._state.file} to ${newState.file}.  Create a new clip instead.`);
+        }
         this._state = newState;
         clearTimeout(this.timeout);
         this.loop();

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

@@ -2,7 +2,7 @@ import { ImageState } from '../types/MediaSchema';
 import { ClipManager } from './ClipManager';
 export declare class ImageManager extends ClipManager<ImageState> {
     private imageElement?;
-    constructor(surfaceElement: HTMLElement, clipElement: HTMLElement, state: ImageState);
+    constructor(surfaceElement: HTMLElement, clipElement: HTMLElement, state: ImageState, constructAssetURL: (file: string) => string);
     private updateImageElement;
     protected update(): void;
     destroy(): void;

package/dist/state-based/ImageManager.js

@@ -3,8 +3,8 @@ import { getStateAtTime } from '../utils/getStateAtTime';
 import { ClipManager } from './ClipManager';
 export class ImageManager extends ClipManager {
     imageElement;
-    constructor(surfaceElement, clipElement, state) {
-        super(surfaceElement, clipElement, state);
+    constructor(surfaceElement, clipElement, state, constructAssetURL) {
+        super(surfaceElement, clipElement, state, constructAssetURL);
         this.clipElement = clipElement;
     }
     updateImageElement() {
@@ -28,9 +28,10 @@ export class ImageManager extends ClipManager {
         }
         if (!this.imageElement || !currentState)
             return;
-        // this.imageElement.src will be a fully qualified URL
-        if (!this.imageElement.src.startsWith(this._state.file)) {
-            this.imageElement.src = this._state.file;
+        // this.videoElement.src will be a fully qualified URL
+        const assetURL = this.constructAssetURL(this._state.file);
+        if (!this.imageElement.src.includes(assetURL)) {
+            this.imageElement.src = assetURL;
         }
         if (this.imageElement.style.objectFit !== this._state.fit) {
             this.imageElement.style.objectFit = this._state.fit;

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

@@ -0,0 +1,14 @@
+import { MediaClientConfig } from '../types/CogsClientMessage';
+export declare class MediaPreloader {
+    private _state;
+    private _elements;
+    private _constructAssetURL;
+    constructor(constructAssetURL: (file: string) => string, testState?: MediaClientConfig['files']);
+    get state(): {
+        [x: string]: import("../types/CogsClientMessage").Media;
+    };
+    setState(newState: MediaClientConfig['files']): void;
+    private update;
+    getElement(file: string, type: 'audio' | 'video'): HTMLAudioElement;
+    releaseElement(resource: string | HTMLMediaElement): void;
+}

package/dist/state-based/MediaPreloader.js

@@ -0,0 +1,86 @@
+export class MediaPreloader {
+    _state;
+    _elements = {};
+    _constructAssetURL;
+    constructor(constructAssetURL, testState = {}) {
+        this._constructAssetURL = constructAssetURL;
+        this._state = testState;
+    }
+    get state() {
+        return { ...this._state };
+    }
+    setState(newState) {
+        this._state = newState;
+        this.update();
+    }
+    update() {
+        // Clean up previous elements
+        for (const [filename, media] of Object.entries(this._elements)) {
+            if (!(filename in this._state)) {
+                media.element.src = '';
+                delete this._elements[filename];
+            }
+            media.inUse = media.element.isConnected;
+        }
+        for (const [filename, fileConfig] of Object.entries(this._state)) {
+            if (filename in this._elements) {
+                continue;
+            }
+            // Create new elements
+            let preloadAttr;
+            if (fileConfig.preload === true) {
+                preloadAttr = 'auto';
+            }
+            else if (fileConfig.preload === false) {
+                preloadAttr = 'none';
+            }
+            else {
+                preloadAttr = fileConfig.preload;
+            }
+            switch (fileConfig.type) {
+                case 'audio': {
+                    const element = document.createElement('audio');
+                    element.src = this._constructAssetURL(filename);
+                    element.preload = preloadAttr;
+                    this._elements[filename] = { element, inUse: false, type: 'audio' };
+                    break;
+                }
+                case 'video': {
+                    const element = document.createElement('video');
+                    element.src = this._constructAssetURL(filename);
+                    element.preload = preloadAttr;
+                    this._elements[filename] = { element, inUse: false, type: 'video' };
+                    break;
+                }
+            }
+        }
+    }
+    getElement(file, type) {
+        const media = this._elements[file];
+        if (media && media.inUse === false) {
+            media.inUse = true;
+            return media.element;
+        }
+        else {
+            const element = document.createElement(type);
+            element.src = this._constructAssetURL(file);
+            this._elements[file] = { element, type, inUse: true };
+            return element;
+        }
+    }
+    releaseElement(resource) {
+        if (typeof resource === 'string') {
+            const media = this._elements[resource];
+            if (media) {
+                media.inUse = false;
+            }
+        }
+        else {
+            Object.entries(this._elements).forEach(([file, media]) => {
+                if (media.element === resource) {
+                    delete this._elements[file];
+                }
+            });
+        }
+    }
+}

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

@@ -1,4 +1,5 @@
 import { MediaSurfaceState } from '../types/MediaSchema';
+import { MediaPreloader } from './MediaPreloader';
 export declare const DATA_CLIP_ID = "data-clip-id";
 /**
  * The SurfaceManager will receive state updates and:
@@ -6,11 +7,13 @@ export declare const DATA_CLIP_ID = "data-clip-id";
  * - Instantiate a ClipManager attached to each respective element
  */
 export declare class SurfaceManager {
+    private constructAssetUrl;
+    private mediaPreloader;
     private _state;
     setState(newState: MediaSurfaceState): void;
     private _element;
     get element(): HTMLDivElement;
     private resources;
-    constructor(testState?: MediaSurfaceState);
+    constructor(constructAssetUrl: (file: string) => string, initialState?: MediaSurfaceState, mediaPreloader?: MediaPreloader);
     update(): void;
 }

package/dist/state-based/SurfaceManager.js

@@ -1,6 +1,7 @@
 import { ImageManager } from './ImageManager';
 import { VideoManager } from './VideoManager';
 import { AudioManager } from './AudioManager';
+import { MediaPreloader } from './MediaPreloader';
 export const DATA_CLIP_ID = 'data-clip-id';
 /**
  * The SurfaceManager will receive state updates and:
@@ -8,6 +9,8 @@ export const DATA_CLIP_ID = 'data-clip-id';
  * - Instantiate a ClipManager attached to each respective element
  */
 export class SurfaceManager {
+    constructAssetUrl;
+    mediaPreloader;
     _state = {};
     setState(newState) {
         this._state = newState;
@@ -18,11 +21,14 @@ export class SurfaceManager {
         return this._element;
     }
     resources = {};
-    constructor(testState) {
+    constructor(constructAssetUrl, initialState = {}, mediaPreloader = new MediaPreloader(constructAssetUrl)) {
+        this.constructAssetUrl = constructAssetUrl;
+        this.mediaPreloader = mediaPreloader;
         this._element = document.createElement('div');
+        this._element.className = 'surface-manager';
         this._element.style.width = '100%';
         this._element.style.height = '100%';
-        this._state = testState || {};
+        this._state = initialState || {};
         this.update();
     }
     update() {
@@ -62,13 +68,13 @@ export class SurfaceManager {
             if (!resource.manager) {
                 switch (clip.type) {
                     case 'image':
-                        resource.manager = new ImageManager(this._element, resource.element, clip);
+                        resource.manager = new ImageManager(this._element, resource.element, clip, this.constructAssetUrl);
                         break;
                     case 'audio':
-                        resource.manager = new AudioManager(this._element, resource.element, clip);
+                        resource.manager = new AudioManager(this._element, resource.element, clip, this.constructAssetUrl, this.mediaPreloader);
                         break;
                     case 'video':
-                        resource.manager = new VideoManager(this._element, resource.element, clip);
+                        resource.manager = new VideoManager(this._element, resource.element, clip, this.constructAssetUrl, this.mediaPreloader);
                         break;
                 }
             }

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

@@ -1,10 +1,12 @@
 import { VideoState } from '../types/MediaSchema';
 import { ClipManager } from './ClipManager';
+import { MediaPreloader } from './MediaPreloader';
 export declare class VideoManager extends ClipManager<VideoState> {
+    private mediaPreloader;
     private videoElement?;
     private isSeeking;
     private timeToIntercept;
-    constructor(surfaceElement: HTMLElement, clipElement: HTMLElement, state: VideoState);
+    constructor(surfaceElement: HTMLElement, clipElement: HTMLElement, state: VideoState, constructAssetURL: (file: string) => string, mediaPreloader: MediaPreloader);
     private updateVideoElement;
     private get videoDuration();
     /**

package/dist/state-based/VideoManager.js

@@ -29,18 +29,20 @@ function isLooping(state, time, duration) {
     return Math.abs(timeRemaining - timeUntilKeyframe) <= LOOPING_EPSILON_MS;
 }
 export class VideoManager extends ClipManager {
+    mediaPreloader;
     videoElement;
     // We seek to another part of the video and do nothing until we get there
     isSeeking = false;
     // We change playbackRate to intercept the server time of the video and don't change course until we intercept
     timeToIntercept = undefined;
-    constructor(surfaceElement, clipElement, state) {
-        super(surfaceElement, clipElement, state);
+    constructor(surfaceElement, clipElement, state, constructAssetURL, mediaPreloader) {
+        super(surfaceElement, clipElement, state, constructAssetURL);
+        this.mediaPreloader = mediaPreloader;
         this.clipElement = clipElement;
     }
     updateVideoElement() {
-        this.destroy();
-        this.videoElement = document.createElement('video');
+        const element = this.mediaPreloader.getElement(this._state.file, 'video');
+        this.videoElement = element;
         this.clipElement.replaceChildren(this.videoElement);
         this.videoElement.style.position = 'absolute';
         this.videoElement.style.width = '100%';
@@ -86,8 +88,9 @@ export class VideoManager extends ClipManager {
             return;
         const { t, rate, volume } = { ...defaultVideoOptions, ...currentState };
         // this.videoElement.src will be a fully qualified URL
-        if (!this.videoElement.src.endsWith(this._state.file)) {
-            this.videoElement.src = this._state.file;
+        const assetURL = this.constructAssetURL(this._state.file);
+        if (!this.videoElement.src.includes(assetURL)) {
+            this.updateVideoElement();
         }
         if (this.videoElement.style.objectFit !== this._state.fit) {
             this.videoElement.style.objectFit = this._state.fit;
@@ -205,7 +208,7 @@ export class VideoManager extends ClipManager {
     }
     destroy() {
         if (this.videoElement) {
-            this.videoElement.src = '';
+            this.mediaPreloader.releaseElement(this.videoElement);
             this.videoElement.remove();
         }
     }

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.6",
+  "version": "3.0.0-alpha.8",
   "keywords": [],
   "license": "MIT",
   "repository": {
@@ -37,7 +37,7 @@
     "cy:generate": "cypress run --e2e"
   },
   "dependencies": {
-    "@clockworkdog/timesync": "^3.0.0-alpha.6",
+    "@clockworkdog/timesync": "^3.0.0-alpha.8",
     "howler": "clockwork-dog/howler.js#fix-looping-clips",
     "reconnecting-websocket": "^4.4.0",
     "zod": "^4.1.13"