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

package/dist/VideoPlayer.js

@@ -1,385 +0,0 @@
-import { ActiveVideoClipState } from './types/VideoState';
-export default class VideoPlayer {
-    cogsConnection;
-    eventTarget = new EventTarget();
-    globalVolume = 1;
-    videoClipPlayers = {};
-    activeClip;
-    pendingClip;
-    parentElement;
-    sinkId = '';
-    constructor(
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    cogsConnection, parentElement = document.body) {
-        this.cogsConnection = cogsConnection;
-        this.parentElement = parentElement;
-        // Send the current status of each clip to COGS
-        this.addEventListener('videoClipState', ({ detail }) => {
-            cogsConnection.sendMediaClipState(detail);
-        });
-        // Listen for video control messages
-        cogsConnection.addEventListener('message', ({ message }) => {
-            switch (message.type) {
-                case 'media_config_update':
-                    this.setGlobalVolume(message.globalVolume);
-                    if (message.audioOutput !== undefined) {
-                        const sinkId = cogsConnection.getAudioSinkId(message.audioOutput);
-                        this.setAudioSink(sinkId ?? '');
-                    }
-                    this.updateConfig(message.files);
-                    break;
-                case 'video_play':
-                    this.playVideoClip(message.file, {
-                        playId: message.playId,
-                        volume: message.volume,
-                        loop: Boolean(message.loop),
-                        fit: message.fit,
-                    });
-                    break;
-                case 'video_pause':
-                    this.pauseVideoClip();
-                    break;
-                case 'video_stop':
-                    this.stopVideoClip();
-                    break;
-                case 'video_set_volume':
-                    this.setVideoClipVolume({ volume: message.volume });
-                    break;
-                case 'video_set_fit':
-                    this.setVideoClipFit({ fit: message.fit });
-                    break;
-            }
-        });
-        // On connection, send the current playing state of all clips
-        // (Usually empty unless websocket is reconnecting)
-        const sendInitialClipStates = () => {
-            const files = Object.entries(this.videoClipPlayers).map(([file, player]) => {
-                const status = !player.videoElement.paused
-                    ? 'playing'
-                    : player.videoElement.currentTime === 0 || player.videoElement.currentTime === player.videoElement.duration
-                        ? 'paused'
-                        : 'stopped';
-                return [file, status];
-            });
-            cogsConnection.sendInitialMediaClipStates({ mediaType: 'video', files });
-        };
-        cogsConnection.addEventListener('open', sendInitialClipStates);
-        sendInitialClipStates();
-    }
-    setParentElement(parentElement) {
-        this.parentElement = parentElement;
-        Object.values(this.videoClipPlayers).forEach((clipPlayer) => {
-            parentElement.appendChild(clipPlayer.videoElement);
-        });
-    }
-    resetParentElement() {
-        this.setParentElement(document.body);
-    }
-    setGlobalVolume(globalVolume) {
-        Object.values(this.videoClipPlayers).forEach((clipPlayer) => {
-            setVideoElementVolume(clipPlayer.videoElement, clipPlayer.volume * globalVolume);
-        });
-        this.globalVolume = globalVolume;
-        this.notifyStateListeners();
-    }
-    playVideoClip(path, { playId, volume, loop, fit }) {
-        if (!this.videoClipPlayers[path]) {
-            this.videoClipPlayers[path] = this.createClipPlayer(path, { preload: 'none', ephemeral: true, fit });
-        }
-        // Check if there's already a pending clip, which has now been superseded and abort the play operation
-        if (this.pendingClip) {
-            this.updateVideoClipPlayer(this.pendingClip.path, (clipPlayer) => {
-                clipPlayer.videoElement.load(); // Resets the media element
-                return clipPlayer;
-            });
-        }
-        // New pending clip is video being requested
-        if (this.activeClip?.path !== path) {
-            this.pendingClip = { path, playId, actionOncePlaying: 'play' };
-        }
-        // Setup and play the pending clip's player
-        this.updateVideoClipPlayer(path, (clipPlayer) => {
-            clipPlayer.volume = volume;
-            setVideoElementVolume(clipPlayer.videoElement, volume * this.globalVolume);
-            clipPlayer.videoElement.loop = loop;
-            clipPlayer.videoElement.style.objectFit = fit;
-            if (clipPlayer.videoElement.currentTime === clipPlayer.videoElement.duration) {
-                clipPlayer.videoElement.currentTime = 0;
-            }
-            clipPlayer.videoElement.play();
-            // Display right away if there's currently no active clip
-            if (!this.activeClip) {
-                clipPlayer.videoElement.style.display = 'block';
-            }
-            return clipPlayer;
-        });
-    }
-    pauseVideoClip() {
-        // Pending clip should be paused when it loads and becomes active
-        if (this.pendingClip) {
-            this.pendingClip.actionOncePlaying = 'pause';
-        }
-        // Pause the currently active clip
-        if (this.activeClip) {
-            const { playId, path } = this.activeClip;
-            this.updateVideoClipPlayer(path, (clipPlayer) => {
-                clipPlayer.videoElement?.pause();
-                return clipPlayer;
-            });
-            this.notifyClipStateListeners(playId, path, 'paused');
-        }
-    }
-    stopVideoClip() {
-        // Pending clip should be stopped when it loads and becomes active
-        if (this.pendingClip) {
-            this.pendingClip.actionOncePlaying = 'stop';
-        }
-        // Stop the currently active clip
-        if (this.activeClip) {
-            this.handleStoppedClip(this.activeClip.path);
-        }
-    }
-    setVideoClipVolume({ volume }) {
-        // If there is a pending clip, this is latest to have been played so update its volume
-        const clipToUpdate = this.pendingClip ?? this.activeClip ?? undefined;
-        if (!clipToUpdate) {
-            return;
-        }
-        if (!(volume >= 0 && volume <= 1)) {
-            console.warn('Invalid volume', volume);
-            return;
-        }
-        this.updateVideoClipPlayer(clipToUpdate.path, (clipPlayer) => {
-            if (clipPlayer.videoElement) {
-                clipPlayer.volume = volume;
-                setVideoElementVolume(clipPlayer.videoElement, volume * this.globalVolume);
-            }
-            return clipPlayer;
-        });
-    }
-    setVideoClipFit({ fit }) {
-        // If there is a pending clip, this is latest to have been played so update its fit
-        const clipToUpdate = this.pendingClip ?? this.activeClip ?? undefined;
-        if (!clipToUpdate) {
-            return;
-        }
-        this.updateVideoClipPlayer(clipToUpdate.path, (clipPlayer) => {
-            if (clipPlayer.videoElement) {
-                clipPlayer.videoElement.style.objectFit = fit;
-            }
-            return clipPlayer;
-        });
-    }
-    handleStoppedClip(path) {
-        if (!this.activeClip || this.activeClip.path !== path) {
-            return;
-        }
-        const playId = this.activeClip.playId;
-        // Once an ephemeral clip stops, cleanup and remove the player
-        if (this.videoClipPlayers[this.activeClip.path]?.config.ephemeral) {
-            this.unloadClip(path);
-        }
-        this.activeClip = undefined;
-        this.updateVideoClipPlayer(path, (clipPlayer) => {
-            clipPlayer.videoElement.pause();
-            clipPlayer.videoElement.currentTime = 0;
-            clipPlayer.videoElement.style.display = 'none';
-            return clipPlayer;
-        });
-        this.notifyClipStateListeners(playId, path, 'stopped');
-    }
-    updateVideoClipPlayer(path, update) {
-        if (this.videoClipPlayers[path]) {
-            const newPlayer = update(this.videoClipPlayers[path]);
-            if (newPlayer) {
-                this.videoClipPlayers[path] = newPlayer;
-            }
-            else {
-                delete this.videoClipPlayers[path];
-            }
-            this.notifyStateListeners();
-        }
-    }
-    setAudioSink(sinkId) {
-        for (const clipPlayer of Object.values(this.videoClipPlayers)) {
-            setPlayerSinkId(clipPlayer, sinkId);
-        }
-        this.sinkId = sinkId;
-    }
-    updateConfig(newPaths) {
-        const newVideoPaths = Object.fromEntries(Object.entries(newPaths).filter(([, { type }]) => type === 'video' || !type));
-        const previousClipPlayers = this.videoClipPlayers;
-        this.videoClipPlayers = (() => {
-            const clipPlayers = { ...previousClipPlayers };
-            const removedClips = Object.keys(previousClipPlayers).filter((previousPath) => !(previousPath in newVideoPaths));
-            removedClips.forEach((path) => {
-                if (this.activeClip?.path === path && previousClipPlayers[path]?.config.ephemeral === false) {
-                    this.updateVideoClipPlayer(path, (player) => {
-                        player.config = { ...player.config, ephemeral: true };
-                        return player;
-                    });
-                }
-                else {
-                    this.unloadClip(path);
-                    delete clipPlayers[path];
-                }
-            });
-            const addedClips = Object.entries(newVideoPaths).filter(([newFile]) => !previousClipPlayers[newFile]);
-            addedClips.forEach(([path, config]) => {
-                clipPlayers[path] = this.createClipPlayer(path, { ...config, preload: preloadString(config.preload), ephemeral: false, fit: 'contain' });
-            });
-            const updatedClips = Object.entries(previousClipPlayers).filter(([previousPath]) => previousPath in newVideoPaths);
-            updatedClips.forEach(([path, previousClipPlayer]) => {
-                if (previousClipPlayer.config.preload !== newVideoPaths[path].preload) {
-                    this.updateVideoClipPlayer(path, (player) => {
-                        player.config = {
-                            ...player.config,
-                            preload: preloadString(newVideoPaths[path].preload),
-                            ephemeral: false,
-                        };
-                        player.videoElement.preload = player.config.preload;
-                        return player;
-                    });
-                }
-            });
-            return clipPlayers;
-        })();
-        this.notifyStateListeners();
-    }
-    notifyStateListeners() {
-        const VideoState = {
-            globalVolume: this.globalVolume,
-            isPlaying: this.activeClip ? !this.videoClipPlayers[this.activeClip.path].videoElement?.paused : false,
-            clips: { ...this.videoClipPlayers },
-            activeClip: this.activeClip
-                ? {
-                    path: this.activeClip.path,
-                    state: !this.videoClipPlayers[this.activeClip.path].videoElement?.paused ? ActiveVideoClipState.Playing : ActiveVideoClipState.Paused,
-                    loop: this.videoClipPlayers[this.activeClip.path].videoElement?.loop ?? false,
-                    volume: this.videoClipPlayers[this.activeClip.path].videoElement?.muted
-                        ? 0
-                        : (this.videoClipPlayers[this.activeClip.path].videoElement?.volume ?? 0),
-                }
-                : undefined,
-        };
-        this.dispatchEvent('state', VideoState);
-    }
-    notifyClipStateListeners(playId, file, status) {
-        this.dispatchEvent('videoClipState', { playId, mediaType: 'video', file, status });
-    }
-    // Type-safe wrapper around EventTarget
-    addEventListener(type, listener, options) {
-        this.eventTarget.addEventListener(type, listener, options);
-    }
-    removeEventListener(type, listener, options) {
-        this.eventTarget.removeEventListener(type, listener, options);
-    }
-    dispatchEvent(type, detail) {
-        this.eventTarget.dispatchEvent(new CustomEvent(type, { detail }));
-    }
-    createVideoElement(path, config, { volume }) {
-        const videoElement = document.createElement('video');
-        videoElement.playsInline = true; // Required for iOS
-        videoElement.src = this.cogsConnection.getAssetUrl(path);
-        videoElement.autoplay = false;
-        videoElement.loop = false;
-        setVideoElementVolume(videoElement, volume * this.globalVolume);
-        videoElement.preload = config.preload;
-        videoElement.addEventListener('playing', () => {
-            // If the clip is still the pending one when it actually start playing, then ensure it is in the correct state
-            if (this.pendingClip?.path === path) {
-                switch (this.pendingClip.actionOncePlaying) {
-                    case 'play': {
-                        // Continue playing, show the video element, and notify listeners
-                        videoElement.style.display = 'block';
-                        this.notifyClipStateListeners(this.pendingClip.playId, path, 'playing');
-                        break;
-                    }
-                    case 'pause': {
-                        // Pause playback, show the video element, and notify listeners
-                        videoElement.style.display = 'block';
-                        videoElement.pause();
-                        this.notifyClipStateListeners(this.pendingClip.playId, path, 'paused');
-                        break;
-                    }
-                    case 'stop': {
-                        // Pause playback, leave the video element hidden, and notify listeners
-                        videoElement.pause();
-                        this.notifyClipStateListeners(this.pendingClip.playId, path, 'stopped');
-                        break;
-                    }
-                }
-                // If there was a previously active clip, then stop it
-                if (this.activeClip) {
-                    this.handleStoppedClip(this.activeClip.path);
-                }
-                this.activeClip = this.pendingClip;
-                this.pendingClip = undefined;
-            }
-            else if (this.activeClip?.path === path) {
-                // If we were the active clip then just notify listeners that we are now playing
-                this.notifyClipStateListeners(this.activeClip.playId, path, 'playing');
-            }
-            else {
-                // Otherwise it shouldn't be playing, like because another clip became pending before we loaded,
-                // so we pause and don't show or notify listeners
-                videoElement.pause();
-            }
-        });
-        videoElement.addEventListener('ended', () => {
-            // Ignore if there's a pending clip, as once that starts playing the active clip will be stopped
-            // Also ignore if the video is set to loop
-            if (!this.pendingClip && !videoElement.loop) {
-                this.handleStoppedClip(path);
-            }
-        });
-        videoElement.style.position = 'absolute';
-        videoElement.style.top = '0';
-        videoElement.style.left = '0';
-        videoElement.style.width = '100%';
-        videoElement.style.height = '100%';
-        videoElement.style.objectFit = config.fit;
-        videoElement.style.display = 'none';
-        this.parentElement.appendChild(videoElement);
-        return videoElement;
-    }
-    createClipPlayer(path, config) {
-        const volume = 1;
-        const player = {
-            config,
-            videoElement: this.createVideoElement(path, config, { volume }),
-            volume,
-        };
-        setPlayerSinkId(player, this.sinkId);
-        return player;
-    }
-    unloadClip(path) {
-        if (this.activeClip?.path === path) {
-            const playId = this.activeClip.playId;
-            this.activeClip = undefined;
-            this.notifyClipStateListeners(playId, path, 'stopped');
-        }
-        this.videoClipPlayers[path]?.videoElement.remove();
-        this.updateVideoClipPlayer(path, () => null);
-    }
-}
-function preloadString(preload) {
-    return typeof preload === 'string' ? preload : preload ? 'auto' : 'none';
-}
-function setPlayerSinkId(player, sinkId) {
-    if (sinkId === undefined) {
-        return;
-    }
-    if (typeof player.videoElement.setSinkId === 'function') {
-        player.videoElement.setSinkId(sinkId);
-    }
-}
-/**
- * Set video volume
- *
- * This doesn't work on iOS (volume is read-only) so at least mute it if the volume is zero
- */
-function setVideoElementVolume(videoElement, volume) {
-    videoElement.volume = volume;
-    videoElement.muted = volume === 0;
-}

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

@@ -1,15 +0,0 @@
-import { AudioState } from '../types/MediaSchema';
-import { ClipManager } from './ClipManager';
-export declare class AudioManager extends ClipManager<AudioState> {
-    private audioElement?;
-    private isSeeking;
-    constructor(surfaceElement: HTMLElement, clipElement: HTMLElement, state: AudioState);
-    private updateAudioElement;
-    /**
-     * Helper function to seek to a specified time.
-     * Works with the update loop to poll until seeked event has fired.
-     */
-    private seekTo;
-    protected update(): void;
-    destroy(): void;
-}

package/dist/state-based/AudioManager.js

@@ -1,116 +0,0 @@
-import { defaultAudioOptions } from '../types/MediaSchema';
-import { getStateAtTime } from '../utils/getStateAtTime';
-import { ClipManager } from './ClipManager';
-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
-const MAX_PLAYBACK_RATE_ADJUSTMENT = 0.2;
-// We smoothly ramp playbackRate up and down
-const PLAYBACK_ADJUSTMENT_SMOOTHING = 0.5;
-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 AudioManager extends ClipManager {
-    audioElement;
-    isSeeking = false;
-    constructor(surfaceElement, clipElement, state) {
-        super(surfaceElement, clipElement, state);
-        this.clipElement = clipElement;
-    }
-    updateAudioElement() {
-        this.destroy();
-        this.audioElement = document.createElement('audio');
-        this.clipElement.replaceChildren(this.audioElement);
-    }
-    /**
-     * Helper function to seek to a specified time.
-     * Works with the update loop to poll until seeked event has fired.
-     */
-    seekTo(time) {
-        if (!this.audioElement)
-            return;
-        this.delay = SEEKING_POLLING;
-        this.isSeeking = true;
-        this.audioElement.addEventListener('seeked', () => {
-            this.isSeeking = false;
-        }, { once: true, passive: true });
-        this.audioElement.currentTime = time / 1_000;
-    }
-    update() {
-        // Update loop used to poll until seek finished
-        if (this.isSeeking)
-            return;
-        this.delay = NO_AUDIO_POLLING;
-        // Does the <audio /> element need adding/removing?
-        const currentState = getStateAtTime(this._state, Date.now());
-        if (currentState) {
-            if (!this.audioElement || !this.isConnected(this.audioElement)) {
-                this.updateAudioElement();
-            }
-        }
-        else {
-            this.destroy();
-        }
-        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;
-        }
-        if (this.audioElement.volume !== volume) {
-            this.audioElement.volume = volume;
-        }
-        // Should the element be playing?
-        if (this.audioElement.paused && rate > 0) {
-            this.audioElement.play().catch(() => {
-                // Do nothing - this will be retried in the next loop
-            });
-        }
-        const currentTime = this.audioElement.currentTime * 1000;
-        const deltaTime = currentTime - t;
-        const deltaTimeAbs = Math.abs(deltaTime);
-        this.delay = AUDIO_PLAYBACK_POLLING;
-        switch (true) {
-            case deltaTimeAbs <= TARGET_SYNC_THRESHOLD_MS:
-                // We are on course:
-                //   - The audio is within accepted latency of the server time
-                //   - The playback rate is aligned with the server rate
-                if (this.audioElement.playbackRate !== rate) {
-                    this.audioElement.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 audio 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.audioElement.playbackRate !== adjustedPlaybackRate) {
-                    this.audioElement.playbackRate = adjustedPlaybackRate;
-                }
-                break;
-            }
-            default: {
-                // We cannot smoothly recover:
-                //  - We seek just ahead of server time
-                if (this.audioElement.playbackRate !== rate) {
-                    this.audioElement.playbackRate = rate;
-                }
-                // delay to poll until seeked
-                this.delay = 10;
-                this.seekTo(t + rate * (SEEK_LOOKAHEAD_MS / 1000));
-                break;
-            }
-        }
-    }
-    destroy() {
-        if (this.audioElement) {
-            this.audioElement.src = '';
-            this.audioElement.remove();
-        }
-    }
-}

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

@@ -1,22 +0,0 @@
-import { MediaClipState } from '../types/MediaSchema';
-/**
- * Each instance of a ClipManager is responsible for displaying
- * an image/audio/video clip in the correct state.
- */
-export declare abstract class ClipManager<T extends MediaClipState> {
-    private surfaceElement;
-    protected clipElement: HTMLElement;
-    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.
-     */
-    protected delay: number;
-    protected abstract update(): void;
-    abstract destroy(): void;
-    isConnected(element?: HTMLElement): boolean;
-    protected _state: T;
-    setState(newState: T): void;
-    private timeout;
-    private loop;
-}

package/dist/state-based/ClipManager.js

@@ -1,53 +0,0 @@
-const DEFAULT_DELAY = 1_000;
-/**
- * Each instance of a ClipManager is responsible for displaying
- * an image/audio/video clip in the correct state.
- */
-export class ClipManager {
-    surfaceElement;
-    clipElement;
-    constructor(surfaceElement, clipElement, state) {
-        this.surfaceElement = surfaceElement;
-        this.clipElement = clipElement;
-        this._state = state;
-        // Allow the class to be constructed, then call the loop
-        setTimeout(this.loop);
-    }
-    /**
-     * This is the delay to be used in the update loop.
-     * It is intended to be dynamic for each loop.
-     */
-    delay = DEFAULT_DELAY;
-    isConnected(element) {
-        if (!this.surfaceElement) {
-            return false;
-        }
-        if (!this.clipElement) {
-            return false;
-        }
-        if (!this.surfaceElement.contains(this.clipElement)) {
-            return false;
-        }
-        if (element) {
-            if (!this.clipElement.contains(element))
-                return false;
-        }
-        return true;
-    }
-    _state;
-    setState(newState) {
-        this._state = newState;
-        clearTimeout(this.timeout);
-        this.loop();
-    }
-    timeout;
-    loop = async () => {
-        if (this.isConnected()) {
-            this.update();
-            this.timeout = setTimeout(this.loop, this.delay);
-        }
-        else {
-            this.destroy();
-        }
-    };
-}

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

@@ -1,9 +0,0 @@
-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);
-    private updateImageElement;
-    protected update(): void;
-    destroy(): void;
-}

package/dist/state-based/ImageManager.js

@@ -1,53 +0,0 @@
-import { defaultImageOptions } from '../types/MediaSchema';
-import { getStateAtTime } from '../utils/getStateAtTime';
-import { ClipManager } from './ClipManager';
-export class ImageManager extends ClipManager {
-    imageElement;
-    constructor(surfaceElement, clipElement, state) {
-        super(surfaceElement, clipElement, state);
-        this.clipElement = clipElement;
-    }
-    updateImageElement() {
-        this.imageElement = document.createElement('img');
-        this.clipElement.replaceChildren(this.imageElement);
-        this.imageElement.style.position = 'absolute';
-        this.imageElement.style.height = '100%';
-        this.imageElement.style.width = '100%';
-    }
-    update() {
-        const currentState = getStateAtTime(this._state, Date.now());
-        // Does the <img /> element need adding/removing?
-        if (currentState) {
-            if (!this.imageElement || !this.isConnected(this.imageElement)) {
-                this.updateImageElement();
-            }
-        }
-        else {
-            this.imageElement?.remove();
-            this.imageElement = undefined;
-        }
-        if (!this.imageElement || !currentState)
-            return;
-        // 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;
-        }
-        if (parseFloat(this.imageElement.style.opacity) !== currentState.opacity) {
-            this.imageElement.style.opacity = String(currentState.opacity ?? defaultImageOptions.opacity);
-        }
-        const z = Math.round(currentState.zIndex ?? defaultImageOptions.zIndex);
-        if (parseInt(this.imageElement.style.zIndex) !== z) {
-            this.imageElement.style.zIndex = String(z);
-        }
-        const opacityString = String(currentState.opacity);
-        if (this.imageElement.style.opacity !== opacityString) {
-            this.imageElement.style.opacity = opacityString;
-        }
-    }
-    destroy() {
-        this.imageElement?.remove();
-    }
-}

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

@@ -1,15 +0,0 @@
-import { VideoState } from '../types/MediaSchema';
-import { ClipManager } from './ClipManager';
-export declare class VideoManager extends ClipManager<VideoState> {
-    private videoElement?;
-    private isSeeking;
-    constructor(surfaceElement: HTMLElement, clipElement: HTMLElement, state: VideoState);
-    private updateVideoElement;
-    /**
-     * Helper function to seek to a specified time.
-     * Works with the update loop to poll until seeked event has fired.
-     */
-    private seekTo;
-    protected update(): void;
-    destroy(): void;
-}