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

package/dist/state-based/VideoManager.js

@@ -1,129 +0,0 @@
-import { defaultVideoOptions } from '../types/MediaSchema';
-import { getStateAtTime } from '../utils/getStateAtTime';
-import { ClipManager } from './ClipManager';
-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.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;
-}
-export class VideoManager extends ClipManager {
-    videoElement;
-    isSeeking = false;
-    constructor(surfaceElement, clipElement, state) {
-        super(surfaceElement, clipElement, state);
-        this.clipElement = clipElement;
-    }
-    updateVideoElement() {
-        this.destroy();
-        this.videoElement = document.createElement('video');
-        this.clipElement.replaceChildren(this.videoElement);
-        this.videoElement.style.position = 'absolute';
-        this.videoElement.style.width = '100%';
-        this.videoElement.style.height = '100%';
-    }
-    /**
-     * Helper function to seek to a specified time.
-     * Works with the update loop to poll until seeked event has fired.
-     */
-    seekTo(ms) {
-        if (!this.videoElement)
-            return;
-        this.delay = SEEKING_POLLING;
-        this.isSeeking = true;
-        this.videoElement.addEventListener('seeked', () => {
-            this.isSeeking = false;
-        }, { once: true, passive: true });
-        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 currentState = getStateAtTime(this._state, Date.now());
-        if (currentState) {
-            if (!this.videoElement || !this.isConnected(this.videoElement)) {
-                this.updateVideoElement();
-            }
-        }
-        else {
-            this.videoElement?.remove();
-            this.videoElement = undefined;
-        }
-        if (!currentState || !this.videoElement)
-            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;
-        }
-        if (this.videoElement.style.objectFit !== this._state.fit) {
-            this.videoElement.style.objectFit = this._state.fit;
-        }
-        const opacityString = String(currentState.opacity);
-        if (this.videoElement.style.opacity !== opacityString) {
-            this.videoElement.style.opacity = opacityString;
-        }
-        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;
-        }
-        // Should the element be playing?
-        if (this.videoElement.paused && rate > 0) {
-            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);
-        this.delay = VIDEO_PLAYBACK_POLLING;
-        switch (true) {
-            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
-                if (this.videoElement.playbackRate !== rate) {
-                    this.videoElement.playbackRate = rate;
-                }
-                break;
-            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);
-                if (this.videoElement.playbackRate !== adjustedPlaybackRate) {
-                    this.videoElement.playbackRate = adjustedPlaybackRate;
-                }
-                break;
-            }
-            default: {
-                // We cannot smoothly recover:
-                //  - We seek just ahead of server time
-                if (this.videoElement.playbackRate !== rate) {
-                    this.videoElement.playbackRate = rate;
-                }
-                this.seekTo(t + rate * SEEK_LOOKAHEAD_MS);
-                break;
-            }
-        }
-    }
-    destroy() {
-        if (this.videoElement) {
-            this.videoElement.src = '';
-            this.videoElement.remove();
-        }
-    }
-}

package/dist/types/AllMediaClipStatesMessage.d.ts

@@ -1,5 +0,0 @@
-export type MediaStatus = 'playing' | 'paused' | 'stopped';
-export default interface AllMediaClipStatesMessage {
-    mediaType: 'audio' | 'video';
-    files: [string, MediaStatus][];
-}

package/dist/types/AllMediaClipStatesMessage.js

@@ -1 +0,0 @@
-export {};

package/dist/types/AudioState.d.ts

@@ -1,39 +0,0 @@
-export type ActiveAudioClipState = {
-    type: 'paused';
-} | {
-    type: 'pause_requested';
-    fade: number | undefined;
-} | {
-    type: 'pausing';
-} | {
-    type: 'playing';
-} | {
-    type: 'play_requested';
-} | {
-    type: 'stopping';
-} | {
-    type: 'stop_requested';
-    fade: number | undefined;
-};
-export interface AudioClip {
-    config: {
-        preload: boolean;
-        ephemeral: boolean;
-    };
-    activeClips: {
-        [soundId: number]: ActiveClip;
-    };
-}
-export interface ActiveClip {
-    state: ActiveAudioClipState;
-    loop: boolean;
-    volume: number;
-    playId: string;
-}
-export interface AudioState {
-    isPlaying: boolean;
-    globalVolume: number;
-    clips: {
-        [path: string]: AudioClip;
-    };
-}

package/dist/types/AudioState.js

@@ -1 +0,0 @@
-export {};

package/dist/types/MediaClipStateMessage.d.ts

@@ -1,7 +0,0 @@
-export type MediaStatus = 'playing' | 'paused' | 'stopped';
-export default interface MediaClipStateMessage {
-    playId: string;
-    mediaType: 'audio' | 'video';
-    file: string;
-    status: MediaStatus;
-}

package/dist/types/MediaClipStateMessage.js

@@ -1 +0,0 @@
-export {};

package/dist/types/VideoState.d.ts

@@ -1,26 +0,0 @@
-import { MediaObjectFit } from '..';
-export declare enum ActiveVideoClipState {
-    Paused = "paused",
-    Playing = "playing"
-}
-export interface VideoClip {
-    config: {
-        preload: 'auto' | 'metadata' | 'none';
-        ephemeral: boolean;
-        fit: MediaObjectFit;
-    };
-}
-export interface ActiveClip {
-    path: string;
-    state: ActiveVideoClipState;
-    loop: boolean;
-    volume: number;
-}
-export interface VideoState {
-    isPlaying: boolean;
-    globalVolume: number;
-    clips: {
-        [path: string]: VideoClip;
-    };
-    activeClip?: ActiveClip;
-}

package/dist/types/VideoState.js

@@ -1,5 +0,0 @@
-export var ActiveVideoClipState;
-(function (ActiveVideoClipState) {
-    ActiveVideoClipState["Paused"] = "paused";
-    ActiveVideoClipState["Playing"] = "playing";
-})(ActiveVideoClipState || (ActiveVideoClipState = {}));