@clockworkdog/cogs-client 3.0.0-alpha.9 → 3.0.1

package/dist/state-based/SurfaceManager.js

@@ -1,6 +1,5 @@
-import { ImageManager } from './ImageManager';
-import { VideoManager } from './VideoManager';
-import { AudioManager } from './AudioManager';
+import { AudioManager, ImageManager, VideoManager } from './MediaClipManager';
+import { MediaPreloader } from './MediaPreloader';
 export const DATA_CLIP_ID = 'data-clip-id';
 /**
  * The SurfaceManager will receive state updates and:
@@ -8,18 +7,37 @@ export const DATA_CLIP_ID = 'data-clip-id';
  * - Instantiate a ClipManager attached to each respective element
  */
 export class SurfaceManager {
+    constructAssetUrl;
+    getAudioOutput;
+    mediaPreloader;
     _state = {};
     setState(newState) {
         this._state = newState;
         this.update();
     }
+    _volume = 1;
+    get volume() {
+        return this._volume;
+    }
+    set volume(newVolume) {
+        this._volume = newVolume;
+        Object.values(this.resources).forEach(({ manager }) => {
+            if (manager instanceof AudioManager || manager instanceof VideoManager) {
+                manager.volume = newVolume;
+            }
+        });
+    }
     _element;
     get element() {
         return this._element;
     }
     resources = {};
-    constructor(testState) {
+    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';
         this._element.style.width = '100%';
         this._element.style.height = '100%';
         this._state = testState || {};
@@ -62,14 +80,23 @@ 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, this.getAudioOutput, this.mediaPreloader);
+                        resource.manager.loop();
                         break;
-                    case 'audio':
-                        resource.manager = new AudioManager(this._element, resource.element, clip);
+                    case 'audio': {
+                        const audioManager = new AudioManager(this._element, resource.element, clip, this.constructAssetUrl, this.getAudioOutput, this.mediaPreloader);
+                        resource.manager = audioManager;
+                        audioManager.volume = this._volume;
+                        audioManager.loop();
                         break;
-                    case 'video':
-                        resource.manager = new VideoManager(this._element, resource.element, clip);
+                    }
+                    case 'video': {
+                        const videoManager = new VideoManager(this._element, resource.element, clip, this.constructAssetUrl, this.getAudioOutput, this.mediaPreloader);
+                        resource.manager = videoManager;
+                        videoManager.volume = this._volume;
+                        videoManager.loop();
                         break;
+                    }
                 }
             }
             else {

package/dist/types/MediaSchema.d.ts

@@ -24,12 +24,14 @@ declare const AudioMetadata: z.ZodObject<{
     type: z.ZodLiteral<"audio">;
     file: z.ZodString;
     audioOutput: z.ZodString;
+    enablePlaybackRateAdjustment: z.ZodBoolean;
 }, z.core.$strip>;
 export type VideoMetadata = z.infer<typeof VideoMetadata>;
 declare const VideoMetadata: z.ZodObject<{
     type: z.ZodLiteral<"video">;
     file: z.ZodString;
     audioOutput: z.ZodString;
+    enablePlaybackRateAdjustment: z.ZodBoolean;
     fit: z.ZodUnion<readonly [z.ZodLiteral<"contain">, z.ZodLiteral<"cover">, z.ZodLiteral<"none">]>;
 }, z.core.$strip>;
 export type NullKeyframe = z.infer<typeof NullKeyframe>;
@@ -153,6 +155,7 @@ export declare const MediaSurfaceStateSchema: z.ZodRecord<z.ZodString, z.ZodUnio
     type: z.ZodLiteral<"audio">;
     file: z.ZodString;
     audioOutput: z.ZodString;
+    enablePlaybackRateAdjustment: z.ZodBoolean;
 }, z.core.$strip>, z.ZodObject<{
     keyframes: z.ZodTuple<[z.ZodTuple<[z.ZodNumber, z.ZodObject<{
         set: z.ZodOptional<z.ZodObject<{
@@ -179,6 +182,7 @@ export declare const MediaSurfaceStateSchema: z.ZodRecord<z.ZodString, z.ZodUnio
     type: z.ZodLiteral<"video">;
     file: z.ZodString;
     audioOutput: z.ZodString;
+    enablePlaybackRateAdjustment: z.ZodBoolean;
     fit: z.ZodUnion<readonly [z.ZodLiteral<"contain">, z.ZodLiteral<"cover">, z.ZodLiteral<"none">]>;
 }, z.core.$strip>]>>;
 export type ImageOptions = VisualProperties;
@@ -194,6 +198,7 @@ export type AudioState = {
     type: 'audio';
     file: string;
     audioOutput: string;
+    enablePlaybackRateAdjustment: boolean;
     keyframes: [InitialAudioKeyframe, ...Array<AudioKeyframe | NullKeyframe>];
 };
 export type VideoState = {
@@ -201,6 +206,7 @@ export type VideoState = {
     file: string;
     fit: 'cover' | 'contain' | 'none';
     audioOutput: string;
+    enablePlaybackRateAdjustment: boolean;
     keyframes: [InitialVideoKeyframe, ...Array<VideoKeyframe | NullKeyframe>];
 };
 export type MediaClipState = ImageState | AudioState | VideoState;

package/dist/types/MediaSchema.js

@@ -19,11 +19,13 @@ const AudioMetadata = z.object({
     type: z.literal('audio'),
     file: z.string(),
     audioOutput: z.string(),
+    enablePlaybackRateAdjustment: z.boolean(),
 });
 const VideoMetadata = z.object({
     type: z.literal('video'),
     file: z.string(),
     audioOutput: z.string(),
+    enablePlaybackRateAdjustment: z.boolean(),
     fit: z.union([z.literal('contain'), z.literal('cover'), z.literal('none')]),
 });
 const NullKeyframe = z.tuple([z.number(), z.null()]);

package/dist/utils/device.d.ts

@@ -0,0 +1,2 @@
+export declare const IS_IOS: boolean;
+export declare const IS_WEBKIT: boolean;

package/dist/utils/device.js

@@ -0,0 +1,4 @@
+// Check an iOS-only property (See https://developer.mozilla.org/en-US/docs/Web/API/Navigator#non-standard_properties)
+export const IS_IOS = typeof navigator !== 'undefined' && typeof navigator.standalone !== 'undefined';
+// https://evilmartians.com/chronicles/how-to-detect-safari-and-ios-versions-with-ease
+export const IS_WEBKIT = 'GestureEvent' in window;

package/dist/utils/getStateAtTime.d.ts

@@ -1,5 +1,15 @@
-import { MediaClipState, TemporalProperties } from '../types/MediaSchema';
-export declare function getStateAtTime<State extends MediaClipState>(state: State, time: number): State['keyframes'][0][1]['set'] | undefined;
+import { AudioState, ImageState, TemporalProperties, VideoState } from '../types/MediaSchema';
+export type MinimalClipState = {
+    type: 'image';
+    keyframes: ImageState['keyframes'];
+} | {
+    type: 'audio';
+    keyframes: AudioState['keyframes'];
+} | {
+    type: 'video';
+    keyframes: VideoState['keyframes'];
+};
+export declare function getStateAtTime<State extends MinimalClipState>(state: State, time: number): State['keyframes'][0][1]['set'] | undefined;
 /**
  * Goes through all keyframes to lerp between many different properties
  * Note: This has no specific logic regarding types of properties

package/dist/utils/getStateAtTime.js

@@ -1,5 +1,10 @@
-import { defaultAudioOptions, defaultImageOptions, defaultVideoOptions } from '../types/MediaSchema';
+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/dist/utils/modulo.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Correct modulo operator
+ * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Remainder#description
+ */
+export declare function modulo(n: number, divisor: number): number;
+export declare function moduloDiff(n: number, m: number, divisor: number): number;

package/dist/utils/modulo.js

@@ -0,0 +1,17 @@
+/**
+ * Correct modulo operator
+ * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Remainder#description
+ */
+export function modulo(n, divisor) {
+    return ((n % divisor) + divisor) % divisor;
+}
+export function moduloDiff(n, m, divisor) {
+    n = modulo(n, divisor);
+    m = modulo(m, divisor);
+    if (Math.abs(n - m) < divisor / 2) {
+        return n - m;
+    }
+    else {
+        return n < m ? n + divisor - m : n - (m + divisor);
+    }
+}

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.9",
+  "version": "3.0.1",
   "keywords": [],
   "license": "MIT",
   "repository": {
@@ -37,15 +37,13 @@
     "cy:generate": "cypress run --e2e"
   },
   "dependencies": {
-    "@clockworkdog/timesync": "^3.0.0-alpha.9",
-    "howler": "clockwork-dog/howler.js#fix-looping-clips",
+    "@clockworkdog/timesync": "^3.0.1",
     "reconnecting-websocket": "^4.4.0",
     "zod": "^4.1.13"
   },
   "devDependencies": {
     "@cypress/mount-utils": "^4.1.2",
     "@eslint/js": "^9.17.0",
-    "@types/howler": "2.2.12",
     "@types/jsdom": "^27",
     "@types/node": "^22.10.2",
     "cypress": "^14.5.4",
@@ -62,6 +60,5 @@
     "typescript-eslint": "^8.18.1",
     "vite": "^7.1.12",
     "vitest": "^4.0.6"
-  },
-  "stableVersion": "0.0.0"
+  }
 }

package/dist/AudioPlayer.d.ts

@@ -1,49 +0,0 @@
-import CogsConnection from './CogsConnection';
-import { AudioState } from './types/AudioState';
-import MediaClipStateMessage from './types/MediaClipStateMessage';
-type EventTypes = {
-    state: AudioState;
-    audioClipState: MediaClipStateMessage;
-};
-export default class AudioPlayer {
-    private cogsConnection;
-    private eventTarget;
-    private globalVolume;
-    private audioClipPlayers;
-    private sinkId;
-    constructor(cogsConnection: CogsConnection<any>);
-    setGlobalVolume(volume: number): void;
-    playAudioClip(path: string, { playId, volume, fade, loop }: {
-        playId: string;
-        volume: number;
-        fade?: number;
-        loop: boolean;
-    }): void;
-    pauseAudioClip(path: string, { fade }: {
-        fade?: number;
-    }, onlySoundId?: number, allowIfPauseRequested?: boolean): void;
-    stopAudioClip(path: string, { fade }: {
-        fade?: number;
-    }, onlySoundId?: number, allowIfStopRequested?: boolean): void;
-    stopAllAudioClips(options: {
-        fade?: number;
-    }): void;
-    setAudioClipVolume(path: string, { volume, fade }: {
-        volume: number;
-        fade?: number;
-    }): void;
-    private handleStoppedClip;
-    private updateActiveAudioClip;
-    private updateAudioClipPlayer;
-    setAudioSink(sinkId: string): void;
-    private updateConfig;
-    private notifyStateListeners;
-    private notifyClipStateListeners;
-    addEventListener<EventName extends keyof EventTypes>(type: EventName, listener: (ev: CustomEvent<EventTypes[EventName]>) => void, options?: boolean | AddEventListenerOptions): void;
-    removeEventListener<EventName extends keyof EventTypes>(type: EventName, listener: (ev: CustomEvent<EventTypes[EventName]>) => void, options?: boolean | EventListenerOptions): void;
-    private dispatchEvent;
-    private createPlayer;
-    private createClip;
-    private updatedClip;
-}
-export {};