@clockworkdog/cogs-client 3.0.0-alpha.2 → 3.0.0-alpha.4

package/dist/AudioPlayer.d.ts

@@ -0,0 +1,49 @@
+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 {};

package/dist/AudioPlayer.js

@@ -0,0 +1,473 @@
+// eslint-disable-next-line @typescript-eslint/triple-slash-reference
+/// <reference path="./types/howler.d.ts" />
+import { Howl, Howler } from 'howler/dist/howler.core.min.js';
+const DEBUG = false;
+// Check an iOS-only property (See https://developer.mozilla.org/en-US/docs/Web/API/Navigator#non-standard_properties)
+const IS_IOS = typeof navigator !== 'undefined' && typeof navigator.standalone !== 'undefined';
+export default class AudioPlayer {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    constructor(cogsConnection) {
+        this.cogsConnection = cogsConnection;
+        this.eventTarget = new EventTarget();
+        this.globalVolume = 1;
+        this.audioClipPlayers = {};
+        this.sinkId = '';
+        // Send the current status of each clip to COGS
+        this.addEventListener('audioClipState', ({ detail }) => {
+            cogsConnection.sendMediaClipState(detail);
+        });
+        // Listen for audio control messages
+        cogsConnection.addEventListener('message', ({ message }) => {
+            switch (message.type) {
+                case 'media_config_update':
+                    if (this.globalVolume !== message.globalVolume) {
+                        this.setGlobalVolume(message.globalVolume);
+                    }
+                    if (message.audioOutput !== undefined) {
+                        const sinkId = cogsConnection.getAudioSinkId(message.audioOutput);
+                        this.setAudioSink(sinkId ?? '');
+                    }
+                    this.updateConfig(message.files);
+                    break;
+                case 'audio_play':
+                    this.playAudioClip(message.file, {
+                        playId: message.playId,
+                        volume: message.volume,
+                        loop: Boolean(message.loop),
+                        fade: message.fade,
+                    });
+                    break;
+                case 'audio_pause':
+                    this.pauseAudioClip(message.file, { fade: message.fade });
+                    break;
+                case 'audio_stop':
+                    if (message.file) {
+                        this.stopAudioClip(message.file, { fade: message.fade });
+                    }
+                    else {
+                        this.stopAllAudioClips({ fade: message.fade });
+                    }
+                    break;
+                case 'audio_set_clip_volume':
+                    this.setAudioClipVolume(message.file, { volume: message.volume, fade: message.fade });
+                    break;
+            }
+        });
+        // On connection, send the current playing state of all clips
+        // (Usually empty unless websocket is reconnecting)
+        const sendInitialClipStates = () => {
+            const files = Object.entries(this.audioClipPlayers).map(([file, player]) => {
+                const activeClips = Object.values(player.activeClips);
+                const status = activeClips.some(({ state }) => state.type === 'playing' ||
+                    state.type === 'pausing' ||
+                    state.type === 'stopping' ||
+                    state.type === 'play_requested' ||
+                    state.type === 'pause_requested' ||
+                    state.type === 'stop_requested')
+                    ? 'playing'
+                    : activeClips.some(({ state }) => state.type === 'paused')
+                        ? 'paused'
+                        : 'stopped';
+                return [file, status];
+            });
+            cogsConnection.sendInitialMediaClipStates({ mediaType: 'audio', files });
+        };
+        cogsConnection.addEventListener('open', sendInitialClipStates);
+        sendInitialClipStates();
+    }
+    setGlobalVolume(volume) {
+        this.globalVolume = volume;
+        Howler.volume(volume);
+        this.notifyStateListeners();
+    }
+    playAudioClip(path, { playId, volume, fade, loop }) {
+        log('Playing clip', { path });
+        if (!(path in this.audioClipPlayers)) {
+            log('Creating ephemeral clip', { path });
+            this.audioClipPlayers[path] = this.createClip(path, { preload: false, ephemeral: true });
+        }
+        this.updateAudioClipPlayer(path, (clipPlayer) => {
+            // Paused clips need to be played again
+            const pausedSoundIds = Object.entries(clipPlayer.activeClips)
+                .filter(([, { state }]) => state.type === 'paused')
+                .map(([id]) => parseInt(id));
+            const pausingSoundIds = Object.entries(clipPlayer.activeClips)
+                .filter(([, { state }]) => state.type === 'pausing')
+                .map(([id]) => parseInt(id));
+            pausedSoundIds.forEach((soundId) => {
+                log('Resuming paused clip', soundId);
+                clipPlayer.player.play(soundId);
+            });
+            // Clips with pause requested no longer need to pause, they can continue playing now
+            const pauseRequestedSoundIds = Object.entries(clipPlayer.activeClips)
+                .filter(([, { state }]) => state.type === 'pause_requested')
+                .map(([id]) => parseInt(id));
+            // If no currently paused/pausing/pause_requested clips, play a new clip
+            const newSoundIds = pausedSoundIds.length > 0 || pausingSoundIds.length > 0 || pauseRequestedSoundIds.length > 0 ? [] : [clipPlayer.player.play()];
+            // Pausing clips are technically currently playing as far as Howler is concerned
+            pausingSoundIds.forEach((soundId) => {
+                log('Stopping fade and resuming pausing clip', soundId);
+                // Stop the fade callback
+                clipPlayer.player.off('fade', undefined, soundId);
+                // Set loop property
+                clipPlayer.player.loop(loop, soundId);
+                // Update state to 'playing'
+                this.updateActiveAudioClip(path, soundId, (clip) => ({ ...clip, state: { type: 'playing' } }));
+                // Set volume, or start a new fade
+                if (isFadeValid(fade)) {
+                    // Start fade when clip starts
+                    fadeAudioPlayerVolume(clipPlayer.player, volume, fade * 1000, soundId);
+                }
+                else {
+                    setAudioPlayerVolume(clipPlayer.player, volume, soundId);
+                }
+            });
+            // paused and pause_requested clips treated the same, they should have their properties
+            // updated with the latest play action's properties
+            [...pausedSoundIds, ...pauseRequestedSoundIds, ...newSoundIds].forEach((soundId) => {
+                clipPlayer.player.loop(loop, soundId);
+                // Cleanup any old callbacks first
+                clipPlayer.player.off('play', undefined, soundId);
+                clipPlayer.player.off('pause', undefined, soundId);
+                clipPlayer.player.off('fade', undefined, soundId);
+                clipPlayer.player.off('end', undefined, soundId);
+                clipPlayer.player.off('stop', undefined, soundId);
+                // Non-preloaded clips don't yet have an HTML audio node
+                // so we need to set the audio output when it's playing
+                clipPlayer.player.once('play', () => {
+                    setPlayerSinkId(clipPlayer.player, this.sinkId);
+                });
+                clipPlayer.player.once('stop', () => this.handleStoppedClip(path, playId, soundId), soundId);
+                // Looping clips fire the 'end' callback on every loop
+                clipPlayer.player.on('end', () => {
+                    if (!clipPlayer.activeClips[soundId]?.loop) {
+                        this.handleStoppedClip(path, playId, soundId);
+                    }
+                }, soundId);
+                const activeClip = {
+                    playId,
+                    state: { type: 'play_requested' },
+                    loop,
+                    volume,
+                };
+                log('CLIP -> play_requested', soundId);
+                // Once clip starts, check if it should actually be paused or stopped
+                // If not, then update state to 'playing'
+                clipPlayer.player.once('play', () => {
+                    const clipState = clipPlayer.activeClips[soundId]?.state;
+                    if (clipState?.type === 'pause_requested') {
+                        log('Clip started playing but should be paused', { path, soundId });
+                        this.pauseAudioClip(path, { fade: clipState.fade }, soundId, true);
+                    }
+                    else if (clipState?.type === 'stop_requested') {
+                        log('Clip started playing but should be stopped', { path, soundId });
+                        this.stopAudioClip(path, { fade: clipState.fade }, soundId, true);
+                    }
+                    else {
+                        log('CLIP -> playing', soundId);
+                        this.updateActiveAudioClip(path, soundId, (clip) => ({ ...clip, state: { type: 'playing' } }));
+                    }
+                }, soundId);
+                // To fade or to no fade?
+                if (isFadeValid(fade)) {
+                    // Start fade when clip starts
+                    clipPlayer.player.volume(0, soundId);
+                    clipPlayer.player.mute(false, soundId);
+                    clipPlayer.player.once('play', () => {
+                        fadeAudioPlayerVolume(clipPlayer.player, volume, fade * 1000, soundId);
+                    }, soundId);
+                }
+                else {
+                    setAudioPlayerVolume(clipPlayer.player, volume, soundId);
+                }
+                // Track new/updated active clip
+                clipPlayer.activeClips = { ...clipPlayer.activeClips, [soundId]: activeClip };
+            });
+            return clipPlayer;
+        });
+        this.notifyClipStateListeners(playId, path, 'playing');
+    }
+    pauseAudioClip(path, { fade }, onlySoundId, allowIfPauseRequested) {
+        // No active clips to pause
+        if (Object.keys(this.audioClipPlayers[path]?.activeClips ?? {}).length === 0) {
+            return;
+        }
+        this.updateAudioClipPlayer(path, (clipPlayer) => {
+            clipPlayer.activeClips = Object.fromEntries(Object.entries(clipPlayer.activeClips).map(([soundIdStr, clip]) => {
+                const soundId = parseInt(soundIdStr);
+                // If onlySoundId specified, only update that clip
+                if (onlySoundId === undefined || onlySoundId === soundId) {
+                    if ((allowIfPauseRequested && clip.state.type === 'pause_requested') || clip.state.type === 'playing' || clip.state.type === 'pausing') {
+                        if (isFadeValid(fade)) {
+                            // Fade then pause
+                            clipPlayer.player.once('fade', (soundId) => {
+                                clipPlayer.player.pause(soundId);
+                                log('CLIP -> paused (after fade)', soundId);
+                                this.updateActiveAudioClip(path, soundId, (clip) => ({ ...clip, state: { type: 'paused' } }));
+                                this.notifyClipStateListeners(clip.playId, path, 'paused');
+                            }, soundId);
+                            fadeAudioPlayerVolume(clipPlayer.player, 0, fade * 1000, soundId);
+                            log('CLIP -> pausing', soundId);
+                            clip.state = { type: 'pausing' };
+                        }
+                        else {
+                            // Pause now
+                            clipPlayer.player.pause(soundId);
+                            log('CLIP -> paused', soundId);
+                            clip.state = { type: 'paused' };
+                            this.notifyClipStateListeners(clip.playId, path, 'paused');
+                        }
+                    }
+                    // Clip hasn't started playing yet, or has already had pause_requested (but fade may have changed so update here)
+                    else if (clip.state.type === 'play_requested' || clip.state.type === 'pause_requested') {
+                        log('CLIP -> pause_requested', soundId);
+                        clip.state = { type: 'pause_requested', fade };
+                    }
+                }
+                return [soundIdStr, clip];
+            }));
+            return clipPlayer;
+        });
+    }
+    stopAudioClip(path, { fade }, onlySoundId, allowIfStopRequested) {
+        log('Stop audio clip', { activeClips: this.audioClipPlayers[path]?.activeClips });
+        // No active clips to stop
+        if (Object.keys(this.audioClipPlayers[path]?.activeClips ?? {}).length === 0) {
+            return;
+        }
+        this.updateAudioClipPlayer(path, (clipPlayer) => {
+            clipPlayer.activeClips = Object.fromEntries(Object.entries(clipPlayer.activeClips).map(([soundIdStr, clip]) => {
+                const soundId = parseInt(soundIdStr);
+                // If onlySoundId specified, only update that clip
+                if (onlySoundId === undefined || onlySoundId === soundId) {
+                    if ((allowIfStopRequested && clip.state.type === 'stop_requested') ||
+                        clip.state.type === 'playing' ||
+                        clip.state.type === 'pausing' ||
+                        clip.state.type === 'paused' ||
+                        clip.state.type === 'stopping') {
+                        if (isFadeValid(fade) && clip.state.type !== 'paused') {
+                            // Cleanup any old fade callbacks first
+                            // TODO: Remove cast once https://github.com/DefinitelyTyped/DefinitelyTyped/pull/59411 is merged
+                            clipPlayer.player.off('fade', soundId);
+                            fadeAudioPlayerVolume(clipPlayer.player, 0, fade * 1000, soundId);
+                            // Set callback after starting new fade, otherwise it will fire straight away as the previous fade is cancelled
+                            clipPlayer.player.once('fade', (soundId) => {
+                                clipPlayer.player.loop(false, soundId);
+                                clipPlayer.player.stop(soundId);
+                            }, soundId);
+                            log('CLIP -> stopping', soundId);
+                            clip.state = { type: 'stopping' };
+                        }
+                        else {
+                            log('Stop clip', soundId);
+                            clipPlayer.player.loop(false, soundId);
+                            clipPlayer.player.stop(soundId);
+                        }
+                    }
+                    // Clip hasn't started playing yet, or has already had stop_requested (but fade may have changed so update here)
+                    // or has pause_requested, but stop takes precedence
+                    else if (clip.state.type === 'play_requested' || clip.state.type === 'pause_requested' || clip.state.type === 'stop_requested') {
+                        log("Trying to stop clip which hasn't started playing yet", { path, soundId });
+                        log('CLIP -> stop_requested', soundId);
+                        clip.state = { type: 'stop_requested', fade };
+                    }
+                }
+                return [soundIdStr, clip];
+            }));
+            return clipPlayer;
+        });
+    }
+    stopAllAudioClips(options) {
+        log('Stopping all clips');
+        Object.keys(this.audioClipPlayers).forEach((path) => {
+            this.stopAudioClip(path, options);
+        });
+    }
+    setAudioClipVolume(path, { volume, fade }) {
+        if (!(volume >= 0 && volume <= 1)) {
+            console.warn('Invalid volume', volume);
+            return;
+        }
+        // No active clips to set volume for
+        if (Object.keys(this.audioClipPlayers[path]?.activeClips ?? {}).length === 0) {
+            return;
+        }
+        this.updateAudioClipPlayer(path, (clipPlayer) => {
+            clipPlayer.activeClips = Object.fromEntries(Object.entries(clipPlayer.activeClips).map(([soundIdStr, clip]) => {
+                // Ignored for pausing/stopping instances
+                if (clip.state.type !== 'pausing' && clip.state.type !== 'stopping') {
+                    const soundId = parseInt(soundIdStr);
+                    if (isFadeValid(fade)) {
+                        fadeAudioPlayerVolume(clipPlayer.player, volume, fade * 1000, soundId);
+                    }
+                    else {
+                        setAudioPlayerVolume(clipPlayer.player, volume, soundId);
+                    }
+                    return [soundIdStr, { ...clip, volume }];
+                }
+                else {
+                    return [soundIdStr, clip];
+                }
+            }));
+            return clipPlayer;
+        });
+    }
+    handleStoppedClip(path, playId, soundId) {
+        this.updateAudioClipPlayer(path, (clipPlayer) => {
+            delete clipPlayer.activeClips[soundId];
+            return clipPlayer;
+        });
+        this.notifyClipStateListeners(playId, path, 'stopped');
+    }
+    updateActiveAudioClip(path, soundId, update) {
+        this.updateAudioClipPlayer(path, (clipPlayer) => soundId in clipPlayer.activeClips
+            ? { ...clipPlayer, activeClips: { ...clipPlayer.activeClips, [soundId]: update(clipPlayer.activeClips[soundId]) } }
+            : clipPlayer);
+    }
+    updateAudioClipPlayer(path, update) {
+        if (path in this.audioClipPlayers) {
+            this.audioClipPlayers = { ...this.audioClipPlayers, [path]: update(this.audioClipPlayers[path]) };
+        }
+        // Once last instance of an ephemeral clip is removed, cleanup and remove the player
+        const clipPlayer = this.audioClipPlayers[path];
+        if (clipPlayer && Object.keys(clipPlayer.activeClips ?? {}).length === 0 && clipPlayer.config.ephemeral) {
+            clipPlayer.player.unload();
+            delete this.audioClipPlayers[path];
+        }
+        this.notifyStateListeners();
+    }
+    setAudioSink(sinkId) {
+        log(`Setting sink ID for all clips:`, sinkId);
+        for (const clipPlayer of Object.values(this.audioClipPlayers)) {
+            setPlayerSinkId(clipPlayer.player, sinkId);
+        }
+        this.sinkId = sinkId;
+    }
+    updateConfig(newFiles) {
+        const newAudioFiles = Object.fromEntries(Object.entries(newFiles).filter((file) => {
+            const type = file[1].type;
+            // COGS 4.6 did not send a `type` but only reported audio files
+            // so we assume audio if no `type` is given
+            return type === 'audio' || !type;
+        }));
+        const previousClipPlayers = this.audioClipPlayers;
+        this.audioClipPlayers = (() => {
+            const clipPlayers = { ...previousClipPlayers };
+            const removedClips = Object.keys(previousClipPlayers).filter((previousFile) => !(previousFile in newAudioFiles) && !previousClipPlayers[previousFile].config.ephemeral);
+            removedClips.forEach((file) => {
+                const player = previousClipPlayers[file].player;
+                player.unload();
+                delete clipPlayers[file];
+            });
+            const addedClips = Object.entries(newAudioFiles).filter(([newfile]) => !previousClipPlayers[newfile]);
+            addedClips.forEach(([path, config]) => {
+                clipPlayers[path] = this.createClip(path, { ...config, ephemeral: false });
+            });
+            const updatedClips = Object.keys(previousClipPlayers).filter((previousFile) => previousFile in newAudioFiles);
+            updatedClips.forEach((path) => {
+                clipPlayers[path] = this.updatedClip(path, clipPlayers[path], { ...newAudioFiles[path], ephemeral: false });
+            });
+            return clipPlayers;
+        })();
+        this.notifyStateListeners();
+    }
+    notifyStateListeners() {
+        const clips = Object.entries(this.audioClipPlayers).reduce((clips, [path, clipPlayer]) => {
+            clips[path] = {
+                config: { preload: clipPlayer.config.preload, ephemeral: clipPlayer.config.ephemeral },
+                activeClips: clipPlayer.activeClips,
+            };
+            return clips;
+        }, {});
+        const isPlaying = Object.values(this.audioClipPlayers).some(({ activeClips }) => Object.values(activeClips).some((clip) => clip.state.type === 'playing' || clip.state.type === 'pausing' || clip.state.type === 'stopping'));
+        const audioState = {
+            globalVolume: this.globalVolume,
+            isPlaying,
+            clips,
+        };
+        this.dispatchEvent('state', audioState);
+    }
+    notifyClipStateListeners(playId, file, status) {
+        this.dispatchEvent('audioClipState', { mediaType: 'audio', playId, 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 }));
+    }
+    createPlayer(path, config) {
+        const player = new Howl({
+            src: this.cogsConnection.getAssetUrl(path),
+            autoplay: false,
+            loop: false,
+            volume: 1,
+            html5: true,
+            preload: config.preload,
+        });
+        setPlayerSinkId(player, this.sinkId);
+        return player;
+    }
+    createClip(file, config) {
+        return {
+            config,
+            player: this.createPlayer(file, config),
+            activeClips: {},
+        };
+    }
+    updatedClip(clipPath, previousClip, newConfig) {
+        const clip = { ...previousClip, config: newConfig };
+        if (previousClip.config.preload !== newConfig.preload) {
+            clip.player.unload();
+            clip.player = this.createPlayer(clipPath, newConfig);
+        }
+        return clip;
+    }
+}
+function log(...data) {
+    if (DEBUG) {
+        console.log(...data);
+    }
+}
+/**
+ * @returns `true` if this is this a valid fade duration. Always returns `false` on iOS
+ */
+function isFadeValid(fade) {
+    return !IS_IOS && typeof fade === 'number' && !isNaN(fade) && fade > 0;
+}
+function setPlayerSinkId(player, sinkId) {
+    if (sinkId === undefined) {
+        return;
+    }
+    if (player._html5) {
+        player._sounds?.forEach((sound) => {
+            sound._node?.setSinkId?.(sinkId);
+        });
+    }
+    else {
+        // TODO: handle web audio
+        console.warn('Cannot set sink ID: web audio not supported', player);
+    }
+}
+/**
+ * Set audio volume
+ *
+ * This doesn't work on iOS (volume is read-only) so at least mute it if the volume is zero
+ */
+function setAudioPlayerVolume(howl, volume, soundId) {
+    log('Setting volume', volume, soundId);
+    howl.volume(volume, soundId);
+    howl.mute(volume === 0, soundId);
+}
+/**
+ * Fade to audio volume
+ *
+ * Note: This doesn't work on iOS (volume is read-only)
+ */
+function fadeAudioPlayerVolume(howl, volume, fade, soundId) {
+    howl.fade(howl.volume(soundId), volume, fade, soundId);
+}

package/dist/VideoPlayer.d.ts

@@ -0,0 +1,49 @@
+import { MediaObjectFit } from '.';
+import CogsConnection from './CogsConnection';
+import MediaClipStateMessage from './types/MediaClipStateMessage';
+import { VideoState } from './types/VideoState';
+type EventTypes = {
+    state: VideoState;
+    videoClipState: MediaClipStateMessage;
+};
+export default class VideoPlayer {
+    private cogsConnection;
+    private eventTarget;
+    private globalVolume;
+    private videoClipPlayers;
+    private activeClip?;
+    private pendingClip?;
+    private parentElement;
+    private sinkId;
+    constructor(cogsConnection: CogsConnection<any>, parentElement?: HTMLElement);
+    setParentElement(parentElement: HTMLElement): void;
+    resetParentElement(): void;
+    setGlobalVolume(globalVolume: number): void;
+    playVideoClip(path: string, { playId, volume, loop, fit }: {
+        playId: string;
+        volume: number;
+        loop: boolean;
+        fit: MediaObjectFit;
+    }): void;
+    pauseVideoClip(): void;
+    stopVideoClip(): void;
+    setVideoClipVolume({ volume }: {
+        volume: number;
+    }): void;
+    setVideoClipFit({ fit }: {
+        fit: MediaObjectFit;
+    }): void;
+    private handleStoppedClip;
+    private updateVideoClipPlayer;
+    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 createVideoElement;
+    private createClipPlayer;
+    private unloadClip;
+}
+export {};