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

package/dist/index.d.ts

@@ -5,6 +5,7 @@ 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 { default as CogsAudioPlayer } from './AudioPlayer';
 export { default as CogsVideoPlayer } from './VideoPlayer';
 export { SurfaceManager } from './state-based/SurfaceManager';

package/dist/index.js

@@ -1,6 +1,7 @@
 export { default as CogsConnection } from './CogsConnection';
 export * from './CogsConnection';
 export * as MediaSchema from './types/MediaSchema';
+export * from './state-based/SurfaceManager';
 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

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

package/dist/state-based/AudioManager.js

@@ -14,8 +14,8 @@ function playbackSmoothing(deltaTime) {
 export class AudioManager extends ClipManager {
     audioElement;
     isSeeking = false;
-    constructor(surfaceElement, clipElement, state) {
-        super(surfaceElement, clipElement, state);
+    constructor(surfaceElement, clipElement, state, constructAssetURL) {
+        super(surfaceElement, clipElement, state, constructAssetURL);
         this.clipElement = clipElement;
     }
     updateAudioElement() {
@@ -53,9 +53,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.audioElement.src = assetURL;
         }
         if (this.audioElement.volume !== volume) {
             this.audioElement.volume = volume;

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);

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/SurfaceManager.d.ts

@@ -6,11 +6,12 @@ export declare const DATA_CLIP_ID = "data-clip-id";
  * - Instantiate a ClipManager attached to each respective element
  */
 export declare class SurfaceManager {
+    private constructAssetUrl;
     private _state;
     setState(newState: MediaSurfaceState): void;
     private _element;
     get element(): HTMLDivElement;
     private resources;
-    constructor(testState?: MediaSurfaceState);
+    constructor(constructAssetUrl: (file: string) => string, testState?: MediaSurfaceState);
     update(): void;
 }

package/dist/state-based/SurfaceManager.js

@@ -8,6 +8,7 @@ export const DATA_CLIP_ID = 'data-clip-id';
  * - Instantiate a ClipManager attached to each respective element
  */
 export class SurfaceManager {
+    constructAssetUrl;
     _state = {};
     setState(newState) {
         this._state = newState;
@@ -18,8 +19,10 @@ export class SurfaceManager {
         return this._element;
     }
     resources = {};
-    constructor(testState) {
+    constructor(constructAssetUrl, testState) {
+        this.constructAssetUrl = constructAssetUrl;
         this._element = document.createElement('div');
+        this._element.className = 'surface-manager';
         this._element.style.width = '100%';
         this._element.style.height = '100%';
         this._state = testState || {};
@@ -62,13 +65,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);
                         break;
                     case 'video':
-                        resource.manager = new VideoManager(this._element, resource.element, clip);
+                        resource.manager = new VideoManager(this._element, resource.element, clip, this.constructAssetUrl);
                         break;
                 }
             }

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

@@ -4,7 +4,7 @@ export declare class VideoManager extends ClipManager<VideoState> {
     private videoElement?;
     private isSeeking;
     private timeToIntercept;
-    constructor(surfaceElement: HTMLElement, clipElement: HTMLElement, state: VideoState);
+    constructor(surfaceElement: HTMLElement, clipElement: HTMLElement, state: VideoState, constructAssetURL: (file: string) => string);
     private updateVideoElement;
     private get videoDuration();
     /**

package/dist/state-based/VideoManager.js

@@ -34,8 +34,8 @@ export class VideoManager extends ClipManager {
     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) {
+        super(surfaceElement, clipElement, state, constructAssetURL);
         this.clipElement = clipElement;
     }
     updateVideoElement() {
@@ -86,8 +86,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.videoElement.src = assetURL;
         }
         if (this.videoElement.style.objectFit !== this._state.fit) {
             this.videoElement.style.objectFit = this._state.fit;

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.7",
   "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.7",
     "howler": "clockwork-dog/howler.js#fix-looping-clips",
     "reconnecting-websocket": "^4.4.0",
     "zod": "^4.1.13"