@clockworkdog/cogs-client 3.0.0-alpha.15 → 3.0.0-alpha.17

package/dist/index.d.ts

@@ -1,15 +1,10 @@
 export { default as CogsConnection } from './CogsConnection';
 export * from './CogsConnection';
 export type { default as CogsClientMessage, MediaClientConfig } from './types/CogsClientMessage';
-export type { default as MediaClipStateMessage } from './types/MediaClipStateMessage';
 export type { default as ShowPhase } from './types/ShowPhase';
-export type { default as MediaObjectFit } from './types/MediaObjectFit';
 export * as MediaSchema from './types/MediaSchema';
-export { default as CogsAudioPlayer } from './AudioPlayer';
-export { default as CogsVideoPlayer } from './VideoPlayer';
 export { SurfaceManager } from './state-based/SurfaceManager';
 export { MediaPreloader } from './state-based/MediaPreloader';
-export * from './types/AudioState';
 export { assetUrl, preloadUrl } from './utils/urls';
 export { getStateAtTime } from './utils/getStateAtTime';
 export * from './types/CogsPluginManifest';

package/dist/index.js

@@ -1,11 +1,8 @@
 export { default as CogsConnection } from './CogsConnection';
 export * from './CogsConnection';
 export * as MediaSchema from './types/MediaSchema';
-export { default as CogsAudioPlayer } from './AudioPlayer';
-export { default as CogsVideoPlayer } from './VideoPlayer';
 export { SurfaceManager } from './state-based/SurfaceManager';
 export { MediaPreloader } from './state-based/MediaPreloader';
-export * from './types/AudioState';
 export { assetUrl, preloadUrl } from './utils/urls';
 export { getStateAtTime } from './utils/getStateAtTime';
 export * from './types/CogsPluginManifest';

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

@@ -37,14 +37,13 @@ export declare function assertVisualProperties(mediaElement: HTMLMediaElement |
  */
 export declare function assertAudialProperties(mediaElement: HTMLMediaElement, properties: AudialProperties, sinkId: string, surfaceVolume: number): void;
 interface TemporalSyncState {
-    state: 'idle' | 'seeking' | 'intercepting';
+    state: 'idle' | 'seeking' | 'intercepting' | 'seeking-ahead' | 'seeked-ahead';
 }
 /**
  * Makes sure the media is at the correct time and speed.
- * - If we fall slightly behind, we will lightly adjust the speed to catch up.
- * - If we are too far away to smoothly realign, we will seek to the correct time.
+ * - Algorithms and constants defined above
  */
-export declare function assertTemporalProperties(mediaElement: HTMLMediaElement, properties: TemporalProperties, keyframes: VideoState['keyframes'], syncState: TemporalSyncState, disablePlaybackRateAdjustment?: boolean): TemporalSyncState;
+export declare function assertTemporalProperties(mediaElement: HTMLMediaElement, properties: TemporalProperties, keyframes: VideoState['keyframes'], syncState: TemporalSyncState, enablePlaybackRateAdjustment: boolean): TemporalSyncState;
 export declare class ImageManager extends MediaClipManager<ImageState> {
     private imageElement;
     protected update(): void;

package/dist/state-based/MediaClipManager.js

@@ -1,4 +1,6 @@
 import { getStateAtTime } from '../utils/getStateAtTime';
+import { IS_IOS, IS_WEBKIT } from '../utils/device';
+import { modulo, moduloDiff } from '../utils/modulo';
 const getPath = (url) => {
     try {
         const { pathname } = new URL(url, window.location.href);
@@ -52,7 +54,7 @@ export class MediaClipManager {
         clearTimeout(this.timeout);
         if (this.isConnected()) {
             this.update();
-            this.timeout = setTimeout(this.loop, INNER_TARGET_SYNC_THRESHOLD_MS);
+            this.timeout = setTimeout(this.loop, SYNC_INNER_TARGET_THRESHOLD_MS);
         }
         else {
             this.destroy();
@@ -90,6 +92,10 @@ export function assertElement(mediaElement, parentElement, clip, constructAssetU
             if (!element) {
                 element = preloader.getElement(clip.file, clip.type);
             }
+            // Required for iOS
+            if (element instanceof HTMLVideoElement && !element.playsInline) {
+                element.playsInline = true;
+            }
             break;
         }
     }
@@ -124,121 +130,209 @@ export function assertVisualProperties(mediaElement, properties, objectFit) {
  */
 export function assertAudialProperties(mediaElement, properties, sinkId, surfaceVolume) {
     const clipVolume = properties.volume * surfaceVolume;
-    if (mediaElement.volume !== clipVolume) {
-        mediaElement.volume = clipVolume;
+    if (IS_IOS) {
+        // For iOS devices HTMLMediaElement.volume is readonly
+        // The best we can do is mute if the volume should be 0
+        if (clipVolume === 0 && !mediaElement.muted) {
+            mediaElement.muted = true;
+        }
+        else if (clipVolume > 0 && mediaElement.muted) {
+            mediaElement.muted = false;
+        }
     }
-    if (mediaElement.sinkId !== sinkId) {
-        try {
-            mediaElement.setSinkId(sinkId).catch(() => {
-                /* Do nothing, will be tried in next loop */
-            });
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    else {
+        if (mediaElement.muted) {
+            mediaElement.muted = false;
         }
-        catch (_) {
-            /* Do nothing, will be tried in next loop */
+        if (mediaElement.volume !== clipVolume) {
+            mediaElement.volume = clipVolume;
+        }
+        if (mediaElement.sinkId !== sinkId) {
+            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
-const OUTER_TARGET_SYNC_NO_PLAYBACK_RATE_ADJUSTMENT_THRESHOLD_MS = 500; // When outside of this range we attempt to sync playback (when playback rate adjustment not allowed)
-const INNER_TARGET_SYNC_THRESHOLD_MS = 5; // When attempting to sync playback, we aim for this accuracy
-const MAX_SYNC_THRESHOLD_MS = 1_000; // If we are further than this, we will seek instead
-const SEEK_LOOKAHEAD_MS = 5; // If it takes time to seek, we should seek ahead a little
+/*
+ * When playbackRate adjustment is disabled (no-sync) we will attempt to seek-ahead, then wait to play.
+ *  - This is a recovery situation, so we only do it when 2s out of sync. (outer threshold)
+ *  - We seek 1s into the future to allow a lot of buffering time (lookahead)
+ *  - We press play 0.1s early (inner threshold)
+ */
+const NO_SYNC_SEEK_AHEAD_OUTER_THRESHOLD_MS = 2_000;
+const NO_SYNC_SEEK_LOOKAHEAD_MS = 1_000;
+const NO_SYNC_SEEK_AHEAD_INNER_THRESHOLD_MS = 100;
+/**
+ * When playbackRate adjustment is enabled (sync) we will attempt to speed ramp to get closer to the correct time.
+ *  - Whenever we are out of sync by an amount we think we can improve (outer threshold)
+ *  - We adjust the playbackRate until we are close enough (inner threshold)
+ *  - If we're too far away that it would take too long to sync (max threshold), then we seek instead.
+ *  - If we seek ahead we may as well attempt to add a little time for buffering (lookahead)
+ */
+const SYNC_OUTER_TARGET_THRESHOLD_MS = 50;
+const SYNC_INNER_TARGET_THRESHOLD_MS = 5;
+const SYNC_MAX_THRESHOLD_MS = 1_000;
+const SYNC_SEEK_LOOKAHEAD_MS = 10;
+// If the media is scheduled to go back to the start close in time to the end of the video, we'll use the loop attribute.
 const LOOPING_EPSILON_MS = 5;
 const PLAYBACK_ADJUSTMENT_SMOOTHING = 0.3;
 const MAX_PLAYBACK_RATE_ADJUSTMENT = 0.1;
 function playbackSmoothing(deltaTime) {
-    return Math.sign(deltaTime) * Math.pow(Math.abs(deltaTime) / MAX_SYNC_THRESHOLD_MS, PLAYBACK_ADJUSTMENT_SMOOTHING) * MAX_PLAYBACK_RATE_ADJUSTMENT;
+    return Math.sign(deltaTime) * Math.pow(Math.abs(deltaTime) / SYNC_MAX_THRESHOLD_MS, PLAYBACK_ADJUSTMENT_SMOOTHING) * MAX_PLAYBACK_RATE_ADJUSTMENT;
 }
-/**
- * Makes sure the media is at the correct time and speed.
- * - If we fall slightly behind, we will lightly adjust the speed to catch up.
- * - If we are too far away to smoothly realign, we will seek to the correct time.
- */
-export function assertTemporalProperties(mediaElement, properties, keyframes, syncState, disablePlaybackRateAdjustment) {
-    if (mediaElement.paused && properties.rate > 0) {
+function assertPlaybackRate(mediaElement, playbackRate) {
+    if (mediaElement.playbackRate !== playbackRate) {
+        mediaElement.playbackRate = playbackRate;
+    }
+    // It's more responsive on chromium to set playbackRate to 0 instead of pausing.
+    // It also makes it more responsive to start again.
+    // On iOS it doesn't make a difference, so we may as well.
+    if (mediaElement.paused) {
         mediaElement.play().catch(() => {
-            /* Do nothing, will be tried in next loop */
+            /* do nothing*/
         });
     }
+}
+/**
+ * Makes sure the media is at the correct time and speed.
+ * - Algorithms and constants defined above
+ */
+export function assertTemporalProperties(mediaElement, properties, keyframes, syncState, enablePlaybackRateAdjustment) {
+    // On Webkit (using the simulator on safari and COGS mobile app on iOS) changes to currentTime and playbackRate are much less responsive.
+    // We make sure we only do lower frequency updates, and don't change playbackRate.
+    const playbackRateSync = enablePlaybackRateAdjustment && !IS_WEBKIT;
     // At the end of the media, is it set back to the start?
     // Sounds like looping to me!
+    let isLooping = false;
     if (mediaElement.duration) {
         const nextTemporalKeyframe = keyframes.filter(([t, kf]) => t > properties.t && (kf?.set?.t !== undefined || kf?.set?.rate !== undefined))[0];
         if (nextTemporalKeyframe?.[1]?.set?.t === 0) {
             const timeRemaining = (mediaElement.duration - properties.t) / properties.rate;
             const timeUntilKeyframe = nextTemporalKeyframe[0] - properties.t;
-            const isLooping = Math.abs(timeRemaining - timeUntilKeyframe) <= LOOPING_EPSILON_MS;
+            isLooping = Math.abs(timeRemaining - timeUntilKeyframe) <= LOOPING_EPSILON_MS;
             if (mediaElement.loop !== isLooping) {
                 mediaElement.loop = isLooping;
             }
         }
     }
     const currentTime = mediaElement.currentTime * 1000;
-    const deltaTime = currentTime - properties.t;
+    const deltaTime = isLooping && mediaElement.duration !== undefined
+        ? moduloDiff(currentTime, properties.t, mediaElement.duration * 1000)
+        : currentTime - properties.t;
     const deltaTimeAbs = Math.abs(deltaTime);
     switch (true) {
-        case syncState.state === 'idle' && properties.rate > 0 && deltaTimeAbs <= OUTER_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
-            if (mediaElement.playbackRate !== properties.rate) {
-                mediaElement.playbackRate = properties.rate;
+        /**
+         * Seek ahead behavior
+         * When playbackRate adjustment is not enabled we will seek ahead and try to prepare to play.
+         * We'll make sure everything is buffered and ready, then wait until we're on time.
+         * We'll try to press play once and leave it to continue.
+         */
+        case !playbackRateSync && syncState.state === 'idle' && properties.rate > 0 && deltaTimeAbs > NO_SYNC_SEEK_AHEAD_OUTER_THRESHOLD_MS: {
+            const target = (properties.t + properties.rate * NO_SYNC_SEEK_LOOKAHEAD_MS) / 1000;
+            if (mediaElement.duration !== undefined && target > mediaElement.duration && !isLooping) {
+                // We're not looping, and this is past the end of the video
+                return { state: 'idle' };
             }
+            assertPlaybackRate(mediaElement, 0);
+            mediaElement.currentTime = isLooping ? modulo(target, mediaElement.duration * 1000) : target;
+            return { state: 'seeking-ahead' };
+        }
+        case syncState.state === 'seeking-ahead' && mediaElement.seeking === true:
+            return { state: 'seeking-ahead' };
+        case syncState.state === 'seeking-ahead' && mediaElement.seeking === false: {
+            assertPlaybackRate(mediaElement, 0);
+            return { state: 'seeked-ahead' };
+        }
+        case syncState.state === 'seeked-ahead' && deltaTime < -NO_SYNC_SEEK_AHEAD_INNER_THRESHOLD_MS: {
+            assertPlaybackRate(mediaElement, properties.rate);
+            console.warn('Failed to seek ahead in time');
             return { state: 'idle' };
-        case syncState.state === 'idle' &&
-            properties.rate > 0 &&
-            disablePlaybackRateAdjustment === true &&
-            deltaTimeAbs <= OUTER_TARGET_SYNC_NO_PLAYBACK_RATE_ADJUSTMENT_THRESHOLD_MS:
-            // If we aren't able to adjust playback rate, we are more forgiving
-            // in our "synced" check to avoid the clip being seeked forward
-            // in normal playback where we expect to be a little out of sync
-            // due to network and startup latency
-            if (mediaElement.playbackRate !== properties.rate) {
-                mediaElement.playbackRate = properties.rate;
-            }
+        }
+        case syncState.state === 'seeked-ahead' && deltaTimeAbs <= NO_SYNC_SEEK_AHEAD_INNER_THRESHOLD_MS: {
+            assertPlaybackRate(mediaElement, properties.rate);
+            return { state: 'idle' };
+        }
+        case syncState.state === 'seeked-ahead' && deltaTimeAbs > NO_SYNC_SEEK_AHEAD_OUTER_THRESHOLD_MS * 1.5: {
+            // This is an escape mechanism for this behavior.  This may happen if the state changes after we've seeked ahead.
+            console.warn('Failed to seek ahead');
             return { state: 'idle' };
-        case syncState.state === 'idle' &&
-            disablePlaybackRateAdjustment !== true && // Never adjust playback rate if disabled for this clip
+        }
+        case syncState.state === 'seeked-ahead':
+            return { state: 'seeked-ahead' };
+        /**
+         * Time synchronization behavior
+         * When playbackRate adjustment is enabled we will address small deviations in time by ramping speed up and down.
+         * We address larger deviations with a seek, hoping to land close enough so we can finely adjust with playbackRate.
+         */
+        // Start intercept
+        case playbackRateSync &&
+            syncState.state === 'idle' &&
             properties.rate > 0 &&
-            deltaTimeAbs > OUTER_TARGET_SYNC_THRESHOLD_MS &&
-            deltaTimeAbs <= MAX_SYNC_THRESHOLD_MS:
+            deltaTimeAbs > SYNC_OUTER_TARGET_THRESHOLD_MS &&
+            deltaTimeAbs <= SYNC_MAX_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, properties.rate - playbackRateAdjustment);
-                if (mediaElement.playbackRate !== adjustedPlaybackRate) {
-                    mediaElement.playbackRate = adjustedPlaybackRate;
-                }
+                assertPlaybackRate(mediaElement, adjustedPlaybackRate);
                 return { state: 'intercepting' };
             }
-        case syncState.state === 'intercepting' && properties.rate > 0 && deltaTimeAbs <= INNER_TARGET_SYNC_THRESHOLD_MS: {
-            // We have intercepted, we can now play normally
-            if (mediaElement.playbackRate !== properties.rate) {
-                mediaElement.playbackRate = properties.rate;
-            }
+        // Perfectly intercepted
+        case syncState.state === 'intercepting' && deltaTimeAbs <= SYNC_INNER_TARGET_THRESHOLD_MS: {
+            assertPlaybackRate(mediaElement, properties.rate);
             return { state: 'idle' };
         }
+        // Intercept went too far
         case syncState.state === 'intercepting' && Math.sign(deltaTime) === Math.sign(mediaElement.playbackRate - properties.rate): {
-            // We have missed our interception.  Go back to idle to try again.
+            assertPlaybackRate(mediaElement, properties.rate);
             return { state: 'idle' };
         }
-        case syncState.state === 'intercepting':
+        // We're still on course
+        case syncState.state === 'intercepting' && deltaTimeAbs < SYNC_MAX_THRESHOLD_MS * 2:
             return { state: 'intercepting' };
-        case syncState.state === 'seeking': {
+        // We're way off track
+        case syncState.state === 'intercepting':
+            assertPlaybackRate(mediaElement, properties.rate);
+            return { state: 'idle' };
+        /**
+         * Time synchronization behavior
+         * When playbackRate adjustment is enabled we will address small deviations in time by ramping speed up and down.
+         * We address larger deviations with a seek, hoping to land close enough so we can finely adjust with playbackRate.
+         */
+        case playbackRateSync && syncState.state === 'idle' && deltaTimeAbs > SYNC_MAX_THRESHOLD_MS: {
+            const seekTarget = (properties.t + properties.rate * SYNC_SEEK_LOOKAHEAD_MS) / 1000;
+            mediaElement.currentTime = isLooping ? modulo(seekTarget, mediaElement.duration * 1000) : seekTarget;
+            assertPlaybackRate(mediaElement, properties.rate);
             return { state: 'seeking' };
         }
-        default: {
-            // We cannot smoothly recover:
-            //  - We seek just ahead of server time
-            if (mediaElement.playbackRate !== properties.rate) {
-                mediaElement.playbackRate = properties.rate;
-            }
-            mediaElement.currentTime = (properties.t + properties.rate * SEEK_LOOKAHEAD_MS) / 1000;
+        case syncState.state === 'seeking' && mediaElement.seeking: {
             return { state: 'seeking' };
         }
+        case syncState.state === 'seeking' && !mediaElement.seeking: {
+            return { state: 'idle' };
+        }
+        /**
+         * Idle behavior
+         */
+        case syncState.state === 'idle':
+            assertPlaybackRate(mediaElement, properties.rate);
+            if (properties.rate === 0 && deltaTimeAbs > SYNC_OUTER_TARGET_THRESHOLD_MS) {
+                mediaElement.currentTime = properties.t / 1000;
+            }
+            return { state: 'idle' };
+        /**
+         * If none of the above conditions are met, we should exit the behavior.
+         * For example: we are intercepting but the media has now been paused
+         */
+        default: {
+            return { state: 'idle' };
+        }
     }
 }
 export class ImageManager extends MediaClipManager {
@@ -279,12 +373,7 @@ export class AudioManager extends MediaClipManager {
             return;
         const sinkId = this.getAudioOutput(this._state.audioOutput);
         assertAudialProperties(this.audioElement, currentState, sinkId, this.volume);
-        const nextSyncState = assertTemporalProperties(this.audioElement, currentState, this._state.keyframes, this.syncState, this._state.disablePlaybackRateAdjustment);
-        if (this.syncState.state !== 'seeking' && nextSyncState.state === 'seeking') {
-            this.audioElement.addEventListener('seeked', () => {
-                this.syncState = { state: 'idle' };
-            }, { passive: true, once: true });
-        }
+        const nextSyncState = assertTemporalProperties(this.audioElement, currentState, this._state.keyframes, this.syncState, this._state.enablePlaybackRateAdjustment);
         this.syncState = nextSyncState;
     }
     destroy() {
@@ -315,12 +404,7 @@ export class VideoManager extends MediaClipManager {
         const sinkId = this.getAudioOutput(this._state.audioOutput);
         assertVisualProperties(this.videoElement, currentState, this._state.fit);
         assertAudialProperties(this.videoElement, currentState, sinkId, this.volume);
-        const nextSyncState = assertTemporalProperties(this.videoElement, currentState, this._state.keyframes, this.syncState, this._state.disablePlaybackRateAdjustment);
-        if (this.syncState.state !== 'seeking' && nextSyncState.state === 'seeking') {
-            this.videoElement.addEventListener('seeked', () => {
-                this.syncState = { state: 'idle' };
-            }, { passive: true, once: true });
-        }
+        const nextSyncState = assertTemporalProperties(this.videoElement, currentState, this._state.keyframes, this.syncState, this._state.enablePlaybackRateAdjustment);
         this.syncState = nextSyncState;
     }
     destroy() {

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

@@ -9,6 +9,6 @@ export declare class MediaPreloader {
     };
     setState(newState: MediaClientConfig['files']): void;
     private update;
-    getElement(file: string, type: 'audio' | 'video'): HTMLAudioElement;
+    getElement(file: string, type: 'audio' | 'video'): HTMLMediaElement;
     releaseElement(resource: string | HTMLElement): void;
 }

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,7 +198,7 @@ export type AudioState = {
     type: 'audio';
     file: string;
     audioOutput: string;
-    disablePlaybackRateAdjustment?: boolean;
+    enablePlaybackRateAdjustment: boolean;
     keyframes: [InitialAudioKeyframe, ...Array<AudioKeyframe | NullKeyframe>];
 };
 export type VideoState = {
@@ -202,7 +206,7 @@ export type VideoState = {
     file: string;
     fit: 'cover' | 'contain' | 'none';
     audioOutput: string;
-    disablePlaybackRateAdjustment?: boolean;
+    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,4 +1,4 @@
-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);

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

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 {};