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

package/dist/index.d.ts

@@ -5,7 +5,6 @@ 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,7 +1,6 @@
 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, constructAssetURL: (file: string) => string);
+    constructor(surfaceElement: HTMLElement, clipElement: HTMLElement, state: AudioState);
     private updateAudioElement;
     /**
      * Helper function to seek to a specified time.

package/dist/state-based/AudioManager.js

@@ -1,7 +1,9 @@
 import { defaultAudioOptions } from '../types/MediaSchema';
 import { getStateAtTime } from '../utils/getStateAtTime';
 import { ClipManager } from './ClipManager';
-const DEFAULT_AUDIO_POLLING = 1_000;
+const NO_AUDIO_POLLING = 1_000;
+const AUDIO_PLAYBACK_POLLING = 100;
+const SEEKING_POLLING = 10;
 const TARGET_SYNC_THRESHOLD_MS = 10; // If we're closer than this we're good enough
 const MAX_SYNC_THRESHOLD_MS = 1_000; // If we're further away than this, we'll seek instead
 const SEEK_LOOKAHEAD_MS = 200; // We won't seek ahead instantly, so lets seek ahead
@@ -14,8 +16,8 @@ function playbackSmoothing(deltaTime) {
 export class AudioManager extends ClipManager {
     audioElement;
     isSeeking = false;
-    constructor(surfaceElement, clipElement, state, constructAssetURL) {
-        super(surfaceElement, clipElement, state, constructAssetURL);
+    constructor(surfaceElement, clipElement, state) {
+        super(surfaceElement, clipElement, state);
         this.clipElement = clipElement;
     }
     updateAudioElement() {
@@ -30,6 +32,8 @@ export class AudioManager extends ClipManager {
     seekTo(time) {
         if (!this.audioElement)
             return;
+        this.delay = SEEKING_POLLING;
+        this.isSeeking = true;
         this.audioElement.addEventListener('seeked', () => {
             this.isSeeking = false;
         }, { once: true, passive: true });
@@ -39,7 +43,7 @@ export class AudioManager extends ClipManager {
         // Update loop used to poll until seek finished
         if (this.isSeeking)
             return;
-        this.delay = DEFAULT_AUDIO_POLLING;
+        this.delay = NO_AUDIO_POLLING;
         // Does the <audio /> element need adding/removing?
         const currentState = getStateAtTime(this._state, Date.now());
         if (currentState) {
@@ -53,10 +57,9 @@ export class AudioManager extends ClipManager {
         if (!currentState || !this.audioElement)
             return;
         const { t, rate, volume } = { ...defaultAudioOptions, ...currentState };
-        // 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;
+        // this.audioElement.src will be a fully qualified URL
+        if (!this.audioElement.src.endsWith(this._state.file)) {
+            this.audioElement.src = this._state.file;
         }
         if (this.audioElement.volume !== volume) {
             this.audioElement.volume = volume;
@@ -70,7 +73,7 @@ export class AudioManager extends ClipManager {
         const currentTime = this.audioElement.currentTime * 1000;
         const deltaTime = currentTime - t;
         const deltaTimeAbs = Math.abs(deltaTime);
-        this.delay = 100;
+        this.delay = AUDIO_PLAYBACK_POLLING;
         switch (true) {
             case deltaTimeAbs <= TARGET_SYNC_THRESHOLD_MS:
                 // We are on course:

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

@@ -6,8 +6,7 @@ import { MediaClipState } from '../types/MediaSchema';
 export declare abstract class ClipManager<T extends MediaClipState> {
     private surfaceElement;
     protected clipElement: HTMLElement;
-    protected constructAssetURL: (file: string) => string;
-    constructor(surfaceElement: HTMLElement, clipElement: HTMLElement, state: T, constructAssetURL: (file: string) => string);
+    constructor(surfaceElement: HTMLElement, clipElement: HTMLElement, state: T);
     /**
      * 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,11 +6,9 @@ const DEFAULT_DELAY = 1_000;
 export class ClipManager {
     surfaceElement;
     clipElement;
-    constructAssetURL;
-    constructor(surfaceElement, clipElement, state, constructAssetURL) {
+    constructor(surfaceElement, clipElement, state) {
         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);
@@ -46,9 +44,7 @@ export class ClipManager {
     loop = async () => {
         if (this.isConnected()) {
             this.update();
-            if (isFinite(this.delay)) {
-                this.timeout = setTimeout(this.loop, this.delay);
-            }
+            this.timeout = setTimeout(this.loop, this.delay);
         }
         else {
             this.destroy();

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, constructAssetURL: (file: string) => string);
+    constructor(surfaceElement: HTMLElement, clipElement: HTMLElement, state: ImageState);
     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, constructAssetURL) {
-        super(surfaceElement, clipElement, state, constructAssetURL);
+    constructor(surfaceElement, clipElement, state) {
+        super(surfaceElement, clipElement, state);
         this.clipElement = clipElement;
     }
     updateImageElement() {
@@ -12,7 +12,7 @@ export class ImageManager extends ClipManager {
         this.clipElement.replaceChildren(this.imageElement);
         this.imageElement.style.position = 'absolute';
         this.imageElement.style.height = '100%';
-        this.imageElement.style.widows = '100%';
+        this.imageElement.style.width = '100%';
     }
     update() {
         const currentState = getStateAtTime(this._state, Date.now());
@@ -28,10 +28,9 @@ export class ImageManager extends ClipManager {
         }
         if (!this.imageElement || !currentState)
             return;
-        // 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;
+        // this.imageElement.src will be a fully qualified URL
+        if (!this.imageElement.src.endsWith(this._state.file)) {
+            this.imageElement.src = this._state.file;
         }
         if (this.imageElement.style.objectFit !== this._state.fit) {
             this.imageElement.style.objectFit = this._state.fit;
@@ -43,9 +42,9 @@ export class ImageManager extends ClipManager {
         if (parseInt(this.imageElement.style.zIndex) !== z) {
             this.imageElement.style.zIndex = String(z);
         }
-        const { opacity } = currentState;
-        if (typeof opacity === 'string' && opacity !== this.imageElement.style.opacity) {
-            this.imageElement.style.opacity = opacity;
+        const opacityString = String(currentState.opacity);
+        if (this.imageElement.style.opacity !== opacityString) {
+            this.imageElement.style.opacity = opacityString;
         }
     }
     destroy() {

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

@@ -6,12 +6,11 @@ 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(constructAssetUrl: (file: string) => string, testState?: MediaSurfaceState);
+    constructor(testState?: MediaSurfaceState);
     update(): void;
 }

package/dist/state-based/SurfaceManager.js

@@ -8,7 +8,6 @@ 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;
@@ -19,10 +18,8 @@ export class SurfaceManager {
         return this._element;
     }
     resources = {};
-    constructor(constructAssetUrl, testState) {
-        this.constructAssetUrl = constructAssetUrl;
+    constructor(testState) {
         this._element = document.createElement('div');
-        this._element.className = 'surface-manager';
         this._element.style.width = '100%';
         this._element.style.height = '100%';
         this._state = testState || {};
@@ -65,13 +62,13 @@ export class SurfaceManager {
             if (!resource.manager) {
                 switch (clip.type) {
                     case 'image':
-                        resource.manager = new ImageManager(this._element, resource.element, clip, this.constructAssetUrl);
+                        resource.manager = new ImageManager(this._element, resource.element, clip);
                         break;
                     case 'audio':
-                        resource.manager = new AudioManager(this._element, resource.element, clip, this.constructAssetUrl);
+                        resource.manager = new AudioManager(this._element, resource.element, clip);
                         break;
                     case 'video':
-                        resource.manager = new VideoManager(this._element, resource.element, clip, this.constructAssetUrl);
+                        resource.manager = new VideoManager(this._element, resource.element, clip);
                         break;
                 }
             }

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

@@ -3,10 +3,8 @@ import { ClipManager } from './ClipManager';
 export declare class VideoManager extends ClipManager<VideoState> {
     private videoElement?;
     private isSeeking;
-    private timeToIntercept;
-    constructor(surfaceElement: HTMLElement, clipElement: HTMLElement, state: VideoState, constructAssetURL: (file: string) => string);
+    constructor(surfaceElement: HTMLElement, clipElement: HTMLElement, state: VideoState);
     private updateVideoElement;
-    private get videoDuration();
     /**
      * Helper function to seek to a specified time.
      * Works with the update loop to poll until seeked event has fired.

package/dist/state-based/VideoManager.js

@@ -1,41 +1,23 @@
 import { defaultVideoOptions } from '../types/MediaSchema';
 import { getStateAtTime } from '../utils/getStateAtTime';
 import { ClipManager } from './ClipManager';
-const DEFAULT_VIDEO_POLLING_MS = 1_000;
+const NO_VIDEO_POLLING = 1_000;
+const VIDEO_PLAYBACK_POLLING = 100;
+const SEEKING_POLLING = 10;
 const TARGET_SYNC_THRESHOLD_MS = 10; // If we're closer than this we're good enough
 const MAX_SYNC_THRESHOLD_MS = 1_000; // If we're further away than this, we'll seek instead
 const SEEK_LOOKAHEAD_MS = 200; // We won't seek ahead instantly, so lets seek ahead
-const MAX_PLAYBACK_RATE_ADJUSTMENT = 0.15; // Don't speed up or slow down the video more than this
-const INTERCEPTION_EARLY_CHECK_IN = 0.7; // When on course for interception of server time, how early to check in beforehand.
+const MAX_PLAYBACK_RATE_ADJUSTMENT = 0.5;
 // We smoothly ramp playbackRate up and down
 const PLAYBACK_ADJUSTMENT_SMOOTHING = 0.3;
 function playbackSmoothing(deltaTime) {
-    return -Math.sign(deltaTime) * Math.pow(Math.abs(deltaTime) / MAX_SYNC_THRESHOLD_MS, PLAYBACK_ADJUSTMENT_SMOOTHING) * MAX_PLAYBACK_RATE_ADJUSTMENT;
-}
-// If we notice that at the end of the current playback, we set t=0 we should loop
-const LOOPING_EPSILON_MS = 5;
-function isLooping(state, time, duration) {
-    const currentState = getStateAtTime(state, time);
-    if (!currentState)
-        return false;
-    const { t, rate } = currentState;
-    if (t === undefined || rate === undefined)
-        return false;
-    const nextTemporalKeyframe = state.keyframes.filter(([t, kf]) => t > time && (kf?.set?.t !== undefined || kf?.set?.rate !== undefined))[0];
-    if (nextTemporalKeyframe?.[1]?.set?.t !== 0)
-        return false;
-    const timeRemaining = (duration - t) / rate;
-    const timeUntilKeyframe = nextTemporalKeyframe[0] - time;
-    return Math.abs(timeRemaining - timeUntilKeyframe) <= LOOPING_EPSILON_MS;
+    return Math.sign(deltaTime) * Math.pow(Math.abs(deltaTime) / MAX_SYNC_THRESHOLD_MS, PLAYBACK_ADJUSTMENT_SMOOTHING) * MAX_PLAYBACK_RATE_ADJUSTMENT;
 }
 export class VideoManager extends ClipManager {
     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, constructAssetURL) {
-        super(surfaceElement, clipElement, state, constructAssetURL);
+    constructor(surfaceElement, clipElement, state) {
+        super(surfaceElement, clipElement, state);
         this.clipElement = clipElement;
     }
     updateVideoElement() {
@@ -46,33 +28,27 @@ export class VideoManager extends ClipManager {
         this.videoElement.style.width = '100%';
         this.videoElement.style.height = '100%';
     }
-    get videoDuration() {
-        if (!this.videoElement)
-            return undefined;
-        if (this.videoElement.readyState < HTMLMediaElement.HAVE_METADATA)
-            return undefined;
-        return this.videoElement.duration * 1000;
-    }
     /**
      * Helper function to seek to a specified time.
      * Works with the update loop to poll until seeked event has fired.
      */
-    seekTo(time) {
+    seekTo(ms) {
         if (!this.videoElement)
             return;
+        this.delay = SEEKING_POLLING;
+        this.isSeeking = true;
         this.videoElement.addEventListener('seeked', () => {
-            console.debug('seeked');
             this.isSeeking = false;
         }, { once: true, passive: true });
-        this.videoElement.currentTime = time / 1_000;
+        this.videoElement.currentTime = ms / 1_000;
     }
     update() {
         // Update loop used to poll until seek finished
         if (this.isSeeking)
             return;
+        this.delay = NO_VIDEO_POLLING;
         // Does the <video /> element need adding/removing?
-        const now = Date.now();
-        const currentState = getStateAtTime(this._state, now);
+        const currentState = getStateAtTime(this._state, Date.now());
         if (currentState) {
             if (!this.videoElement || !this.isConnected(this.videoElement)) {
                 this.updateVideoElement();
@@ -86,108 +62,51 @@ export class VideoManager extends ClipManager {
             return;
         const { t, rate, volume } = { ...defaultVideoOptions, ...currentState };
         // this.videoElement.src will be a fully qualified URL
-        const assetURL = this.constructAssetURL(this._state.file);
-        if (!this.videoElement.src.includes(assetURL)) {
-            this.videoElement.src = assetURL;
+        if (!this.videoElement.src.endsWith(this._state.file)) {
+            this.videoElement.src = this._state.file;
         }
         if (this.videoElement.style.objectFit !== this._state.fit) {
             this.videoElement.style.objectFit = this._state.fit;
         }
-        if (parseFloat(this.videoElement.style.opacity) !== currentState.opacity) {
-            this.videoElement.style.opacity = String(currentState.opacity ?? defaultVideoOptions.opacity);
+        const opacityString = String(currentState.opacity);
+        if (this.videoElement.style.opacity !== opacityString) {
+            this.videoElement.style.opacity = opacityString;
         }
-        const z = Math.round(currentState.zIndex ?? defaultVideoOptions.zIndex);
-        if (parseInt(this.videoElement.style.zIndex) !== z) {
-            this.videoElement.style.zIndex = String(z);
+        const zIndex = Math.round(currentState.zIndex ?? defaultVideoOptions.zIndex);
+        if (parseInt(this.videoElement.style.zIndex) !== zIndex) {
+            this.videoElement.style.zIndex = String(zIndex);
         }
         if (this.videoElement.volume !== volume) {
             this.videoElement.volume = volume;
         }
-        const duration = this.videoDuration;
-        if (duration !== undefined) {
-            // Is the video looping?
-            if (isLooping(this._state, now, duration)) {
-                if (!this.videoElement.loop) {
-                    console.debug('starting loop');
-                    this.videoElement.loop = true;
-                }
-            }
-            else {
-                if (this.videoElement.loop) {
-                    console.debug('stopping loop');
-                    this.videoElement.loop = false;
-                }
-                // Has the video finished
-                if (t > duration) {
-                    console.debug('ended');
-                    this.delay = Infinity;
-                    return;
-                }
-            }
-        }
-        // Should the video be playing
+        // Should the element be playing?
         if (this.videoElement.paused && rate > 0) {
-            if (duration === undefined || duration > t) {
-                this.videoElement.play().catch(() => {
-                    // Do nothing - this will be retried in the next loop
-                });
-            }
+            this.videoElement.play().catch(() => {
+                // Do nothing - this will be retried in the next loop
+            });
         }
         const currentTime = this.videoElement.currentTime * 1000;
         const deltaTime = currentTime - t;
         const deltaTimeAbs = Math.abs(deltaTime);
-        // Handle current playbackRateAdjustment
-        if (this.timeToIntercept !== undefined) {
-            if (deltaTimeAbs <= TARGET_SYNC_THRESHOLD_MS) {
-                // We've successfully got back on track
-                console.log('intercepted', `${deltaTime.toFixed(0)}ms`);
-                this.timeToIntercept = undefined;
-            }
-            else {
-                const newTimeToIntercept = deltaTime / (rate - this.videoElement.playbackRate);
-                if (newTimeToIntercept < this.timeToIntercept && newTimeToIntercept > 0) {
-                    // We're getting there, let's stay on course
-                    console.debug(`intercepting ${newTimeToIntercept.toFixed(0)}ms`, `${deltaTime.toFixed(0)}ms`);
-                    this.timeToIntercept = newTimeToIntercept;
-                }
-                else {
-                    // We've gone too far
-                    console.debug('missed intercept', deltaTime, this.timeToIntercept, newTimeToIntercept);
-                    this.timeToIntercept = undefined;
-                }
-            }
-        }
+        this.delay = VIDEO_PLAYBACK_POLLING;
         switch (true) {
-            case deltaTimeAbs <= TARGET_SYNC_THRESHOLD_MS: {
+            case deltaTimeAbs <= TARGET_SYNC_THRESHOLD_MS:
                 // We are on course:
                 //   - The video is within accepted latency of the server time
                 //   - The playback rate is aligned with the server rate
-                console.debug(`${rate}x`, deltaTime.toFixed(0));
-                this.timeToIntercept = undefined;
                 if (this.videoElement.playbackRate !== rate) {
                     this.videoElement.playbackRate = rate;
                 }
-                this.delay = DEFAULT_VIDEO_POLLING_MS;
-                break;
-            }
-            case this.timeToIntercept !== undefined:
-                // We are currently on course to intercept
-                //   - We don't want to adjust the playbackRate excessively to pop audio
-                //   - We are on track to get back on time.  So we can wait.
-                this.delay = this.timeToIntercept * INTERCEPTION_EARLY_CHECK_IN;
                 break;
-            case rate > 0 && deltaTimeAbs > TARGET_SYNC_THRESHOLD_MS && deltaTimeAbs <= MAX_SYNC_THRESHOLD_MS && this.timeToIntercept === undefined: {
+            case rate > 0 && deltaTimeAbs > TARGET_SYNC_THRESHOLD_MS && deltaTimeAbs <= MAX_SYNC_THRESHOLD_MS: {
                 // We are close, we can smoothly adjust with playbackRate:
                 //  - The video must be playing
                 //  - We must be close in time to the server time
                 const playbackRateAdjustment = playbackSmoothing(deltaTime);
-                const adjustedPlaybackRate = Math.max(0, rate + playbackRateAdjustment);
-                this.timeToIntercept = deltaTime / (rate - adjustedPlaybackRate);
-                console.debug(`${adjustedPlaybackRate.toFixed(2)}x`, `${deltaTime.toFixed(0)}ms`);
+                const adjustedPlaybackRate = Math.max(0, rate - playbackRateAdjustment);
                 if (this.videoElement.playbackRate !== adjustedPlaybackRate) {
                     this.videoElement.playbackRate = adjustedPlaybackRate;
                 }
-                this.delay = this.timeToIntercept * INTERCEPTION_EARLY_CHECK_IN;
                 break;
             }
             default: {
@@ -196,9 +115,6 @@ export class VideoManager extends ClipManager {
                 if (this.videoElement.playbackRate !== rate) {
                     this.videoElement.playbackRate = rate;
                 }
-                // delay to poll until seeked
-                console.debug('seeking');
-                this.delay = 10;
                 this.seekTo(t + rate * SEEK_LOOKAHEAD_MS);
                 break;
             }

package/dist/types/MediaSchema.d.ts

@@ -7,7 +7,7 @@ declare const TemporalProperties: z.ZodObject<{
 export type VisualProperties = z.infer<typeof VisualProperties>;
 declare const VisualProperties: z.ZodObject<{
     opacity: z.ZodNumber;
-    zIndex: z.ZodNumber;
+    zIndex: z.ZodDefault<z.ZodNumber>;
 }, z.core.$strip>;
 export type AudialProperties = z.infer<typeof AudialProperties>;
 declare const AudialProperties: z.ZodObject<{
@@ -41,7 +41,7 @@ export type InitialImageKeyframe = z.infer<typeof InitialImageKeyframe>;
 declare const InitialImageKeyframe: z.ZodTuple<[z.ZodNumber, z.ZodObject<{
     set: z.ZodOptional<z.ZodObject<{
         opacity: z.ZodOptional<z.ZodNumber>;
-        zIndex: z.ZodOptional<z.ZodNumber>;
+        zIndex: z.ZodOptional<z.ZodDefault<z.ZodNumber>>;
     }, z.core.$strip>>;
 }, z.core.$strip>], null>;
 /**
@@ -51,11 +51,11 @@ export type ImageKeyframe = z.infer<typeof ImageKeyframe>;
 declare const ImageKeyframe: z.ZodTuple<[z.ZodNumber, z.ZodObject<{
     set: z.ZodOptional<z.ZodObject<{
         opacity: z.ZodOptional<z.ZodNumber>;
-        zIndex: z.ZodOptional<z.ZodNumber>;
+        zIndex: z.ZodOptional<z.ZodDefault<z.ZodNumber>>;
     }, z.core.$strip>>;
     lerp: z.ZodOptional<z.ZodObject<{
         opacity: z.ZodOptional<z.ZodNumber>;
-        zIndex: z.ZodOptional<z.ZodNumber>;
+        zIndex: z.ZodOptional<z.ZodDefault<z.ZodNumber>>;
     }, z.core.$strip>>;
 }, z.core.$strip>], null>;
 /**
@@ -90,7 +90,7 @@ export type InitialVideoKeyframe = z.infer<typeof InitialVideoKeyframe>;
 declare const InitialVideoKeyframe: z.ZodTuple<[z.ZodNumber, z.ZodObject<{
     set: z.ZodOptional<z.ZodObject<{
         opacity: z.ZodOptional<z.ZodNumber>;
-        zIndex: z.ZodOptional<z.ZodNumber>;
+        zIndex: z.ZodOptional<z.ZodDefault<z.ZodNumber>>;
         volume: z.ZodOptional<z.ZodNumber>;
         t: z.ZodOptional<z.ZodNumber>;
         rate: z.ZodOptional<z.ZodNumber>;
@@ -103,14 +103,14 @@ export type VideoKeyframe = z.infer<typeof VideoKeyframe>;
 declare const VideoKeyframe: z.ZodTuple<[z.ZodNumber, z.ZodObject<{
     set: z.ZodOptional<z.ZodObject<{
         opacity: z.ZodOptional<z.ZodNumber>;
-        zIndex: z.ZodOptional<z.ZodNumber>;
+        zIndex: z.ZodOptional<z.ZodDefault<z.ZodNumber>>;
         volume: z.ZodOptional<z.ZodNumber>;
         t: z.ZodOptional<z.ZodNumber>;
         rate: z.ZodOptional<z.ZodNumber>;
     }, z.core.$strip>>;
     lerp: z.ZodOptional<z.ZodObject<{
         opacity: z.ZodOptional<z.ZodNumber>;
-        zIndex: z.ZodOptional<z.ZodNumber>;
+        zIndex: z.ZodOptional<z.ZodDefault<z.ZodNumber>>;
         volume: z.ZodOptional<z.ZodNumber>;
     }, z.core.$strip>>;
 }, z.core.$strip>], null>;
@@ -118,16 +118,16 @@ export declare const MediaSurfaceStateSchema: z.ZodRecord<z.ZodString, z.ZodUnio
     keyframes: z.ZodTuple<[z.ZodTuple<[z.ZodNumber, z.ZodObject<{
         set: z.ZodOptional<z.ZodObject<{
             opacity: z.ZodOptional<z.ZodNumber>;
-            zIndex: z.ZodOptional<z.ZodNumber>;
+            zIndex: z.ZodOptional<z.ZodDefault<z.ZodNumber>>;
         }, z.core.$strip>>;
         lerp: z.ZodOptional<z.ZodObject<{
             opacity: z.ZodOptional<z.ZodNumber>;
-            zIndex: z.ZodOptional<z.ZodNumber>;
+            zIndex: z.ZodOptional<z.ZodDefault<z.ZodNumber>>;
         }, z.core.$strip>>;
     }, z.core.$strip>], null>], z.ZodUnion<readonly [z.ZodTuple<[z.ZodNumber, z.ZodObject<{
         set: z.ZodOptional<z.ZodObject<{
             opacity: z.ZodOptional<z.ZodNumber>;
-            zIndex: z.ZodOptional<z.ZodNumber>;
+            zIndex: z.ZodOptional<z.ZodDefault<z.ZodNumber>>;
         }, z.core.$strip>>;
     }, z.core.$strip>], null>, z.ZodTuple<[z.ZodNumber, z.ZodNull], null>]>>;
     type: z.ZodLiteral<"image">;
@@ -157,20 +157,20 @@ export declare const MediaSurfaceStateSchema: z.ZodRecord<z.ZodString, z.ZodUnio
     keyframes: z.ZodTuple<[z.ZodTuple<[z.ZodNumber, z.ZodObject<{
         set: z.ZodOptional<z.ZodObject<{
             opacity: z.ZodOptional<z.ZodNumber>;
-            zIndex: z.ZodOptional<z.ZodNumber>;
+            zIndex: z.ZodOptional<z.ZodDefault<z.ZodNumber>>;
             volume: z.ZodOptional<z.ZodNumber>;
             t: z.ZodOptional<z.ZodNumber>;
             rate: z.ZodOptional<z.ZodNumber>;
         }, z.core.$strip>>;
         lerp: z.ZodOptional<z.ZodObject<{
             opacity: z.ZodOptional<z.ZodNumber>;
-            zIndex: z.ZodOptional<z.ZodNumber>;
+            zIndex: z.ZodOptional<z.ZodDefault<z.ZodNumber>>;
             volume: z.ZodOptional<z.ZodNumber>;
         }, z.core.$strip>>;
     }, z.core.$strip>], null>], z.ZodUnion<readonly [z.ZodTuple<[z.ZodNumber, z.ZodObject<{
         set: z.ZodOptional<z.ZodObject<{
             opacity: z.ZodOptional<z.ZodNumber>;
-            zIndex: z.ZodOptional<z.ZodNumber>;
+            zIndex: z.ZodOptional<z.ZodDefault<z.ZodNumber>>;
             volume: z.ZodOptional<z.ZodNumber>;
             t: z.ZodOptional<z.ZodNumber>;
             rate: z.ZodOptional<z.ZodNumber>;

package/dist/types/MediaSchema.js

@@ -5,7 +5,7 @@ const TemporalProperties = z.object({
 });
 const VisualProperties = z.object({
     opacity: z.number().gte(0).lte(1),
-    zIndex: z.number(),
+    zIndex: z.number().default(0),
 });
 const AudialProperties = z.object({
     volume: z.number().gte(0).lte(1),

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