@clockworkdog/cogs-client 0.3.1

package/dist/CogsConnection.js

@@ -0,0 +1,198 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const valueTypes_1 = require("./types/valueTypes");
+const reconnecting_websocket_1 = __importDefault(require("reconnecting-websocket"));
+const urls_1 = require("./helpers/urls");
+class CogsConnection {
+    constructor({ hostname = document.location.hostname, port = urls_1.COGS_SERVER_PORT } = {}, outputPortValues = undefined) {
+        var _a;
+        this.eventTarget = new EventTarget();
+        this.currentConfig = {}; // Received on open connection
+        this.currentInputPortValues = {}; // Received on open connection
+        this.currentOutputPortValues = {}; // Sent on open connection
+        this._showPhase = valueTypes_1.ShowPhase.Setup;
+        this._timerState = null;
+        /**
+         * Cached audio outputs use to look up the device/sink ID when a different device label is requested
+         */
+        this.audioOutputs = undefined;
+        this._selectedAudioOutput = '';
+        this.currentOutputPortValues = { ...outputPortValues };
+        const { useReconnectingWebsocket, path, pathParams } = websocketParametersFromUrl(document.location.href);
+        const socketUrl = `ws://${hostname}:${port}${path}${pathParams ? '?' + pathParams : ''}`;
+        this.websocket = useReconnectingWebsocket ? new reconnecting_websocket_1.default(socketUrl) : new WebSocket(socketUrl);
+        this.websocket.onopen = () => {
+            this.currentConfig = {}; // Received on open connection
+            this.currentInputPortValues = {}; // Received on open connection
+            this.dispatchEvent('open', undefined);
+            this.setOutputPortValues(this.currentOutputPortValues);
+        };
+        this.websocket.onclose = () => {
+            this.dispatchEvent('close', undefined);
+        };
+        this.websocket.onmessage = ({ data }) => {
+            try {
+                const parsed = JSON.parse(data);
+                try {
+                    if (parsed.config) {
+                        this.currentConfig = parsed.config;
+                        this.dispatchEvent('config', this.currentConfig);
+                    }
+                    else if (parsed.updates) {
+                        this.currentInputPortValues = { ...this.currentInputPortValues, ...parsed.updates };
+                        this.dispatchEvent('updates', parsed.updates);
+                    }
+                    else if (parsed.event && parsed.event.key) {
+                        this.dispatchEvent('event', parsed.event);
+                    }
+                    else if (typeof parsed.message === 'object') {
+                        switch (parsed.message.type) {
+                            case 'adjustable_timer_update':
+                                this._timerState = {
+                                    startedAt: Date.now(),
+                                    durationMillis: parsed.message.durationMillis,
+                                    ticking: parsed.message.ticking,
+                                };
+                                break;
+                            case 'show_phase':
+                                this._showPhase = parsed.message.phase;
+                                break;
+                        }
+                        this.dispatchEvent('message', parsed.message);
+                    }
+                }
+                catch (e) {
+                    console.warn('Error handling data', data, e);
+                }
+            }
+            catch (e) {
+                console.error('Unable to parse incoming data from server', data, e);
+            }
+        };
+        // Send a list of audio outputs to COGS and keep it up to date
+        {
+            const refreshAudioOutputs = async () => {
+                // `navigator.mediaDevices` is undefined on COGS AV <= 4.5 because of secure origin permissions
+                if (navigator.mediaDevices) {
+                    const audioOutputs = (await navigator.mediaDevices.enumerateDevices()).filter(({ kind }) => kind === 'audiooutput');
+                    this.sendAudioOutputs(audioOutputs);
+                    this.audioOutputs = audioOutputs;
+                }
+            };
+            this.addEventListener('open', refreshAudioOutputs);
+            (_a = navigator.mediaDevices) === null || _a === void 0 ? void 0 : _a.addEventListener('devicechange', refreshAudioOutputs);
+            refreshAudioOutputs();
+        }
+    }
+    get config() {
+        return { ...this.currentConfig };
+    }
+    get inputPortValues() {
+        return { ...this.currentInputPortValues };
+    }
+    get outputPortValues() {
+        return { ...this.currentOutputPortValues };
+    }
+    get showPhase() {
+        return this._showPhase;
+    }
+    get timerState() {
+        return this._timerState ? { ...this._timerState } : null;
+    }
+    get selectedAudioOutput() {
+        return this._selectedAudioOutput;
+    }
+    get isConnected() {
+        return this.websocket.readyState === WebSocket.OPEN;
+    }
+    close() {
+        this.websocket.close();
+    }
+    sendEvent(eventName, ...[eventValue]) {
+        if (this.isConnected) {
+            this.websocket.send(JSON.stringify({
+                event: {
+                    key: eventName,
+                    value: eventValue,
+                },
+            }));
+        }
+    }
+    setOutputPortValues(values) {
+        this.currentOutputPortValues = { ...this.currentOutputPortValues, ...values };
+        if (this.isConnected) {
+            this.websocket.send(JSON.stringify({ updates: values }));
+        }
+    }
+    getAudioSinkId(audioOutput) {
+        var _a, _b;
+        return audioOutput ? (_b = (_a = this.audioOutputs) === null || _a === void 0 ? void 0 : _a.find(({ label }) => label === audioOutput)) === null || _b === void 0 ? void 0 : _b.deviceId : '';
+    }
+    sendInitialMediaClipStates(allMediaClipStates) {
+        if (this.isConnected) {
+            this.websocket.send(JSON.stringify({ allMediaClipStates }));
+        }
+    }
+    sendMediaClipState(mediaClipState) {
+        if (this.isConnected) {
+            this.websocket.send(JSON.stringify({ mediaClipState }));
+        }
+    }
+    sendAudioOutputs(audioOutputs) {
+        if (this.isConnected) {
+            this.websocket.send(JSON.stringify({ audioOutputs }));
+        }
+    }
+    // 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 }));
+    }
+}
+exports.default = CogsConnection;
+function websocketParametersFromUrl(url) {
+    var _a, _b, _c, _d, _e;
+    const parsedUrl = new URL(url);
+    const pathParams = new URLSearchParams(parsedUrl.searchParams);
+    const localClientId = pathParams.get('local_id');
+    const isSimulator = pathParams.get('simulator') === 'true';
+    const display = (_a = pathParams.get('display')) !== null && _a !== void 0 ? _a : '';
+    const pluginId = parsedUrl.pathname.startsWith('/plugin/') ? parsedUrl.pathname.split('/')[2] : undefined;
+    if (localClientId) {
+        const type = (_b = pathParams.get('t')) !== null && _b !== void 0 ? _b : '';
+        pathParams.delete('local_id');
+        return {
+            path: `/local/${encodeURIComponent(localClientId)}`,
+            pathParams: new URLSearchParams({ t: type }),
+            useReconnectingWebsocket: true,
+        };
+    }
+    else if (isSimulator) {
+        const name = (_c = pathParams.get('name')) !== null && _c !== void 0 ? _c : '';
+        pathParams.delete('simulator');
+        pathParams.delete('name');
+        return { path: `/simulator/${encodeURIComponent(name)}`, pathParams, useReconnectingWebsocket: true };
+    }
+    else if (display) {
+        const displayIdIndex = (_d = pathParams.get('displayIdIndex')) !== null && _d !== void 0 ? _d : '';
+        pathParams.delete('display');
+        pathParams.delete('displayIdIndex');
+        return { path: `/display/${encodeURIComponent(display)}/${encodeURIComponent(displayIdIndex)}` };
+    }
+    else if (pluginId) {
+        return { path: `/plugin/${encodeURIComponent(pluginId)}`, useReconnectingWebsocket: true };
+    }
+    else {
+        const serial = (_e = pathParams.get('serial')) !== null && _e !== void 0 ? _e : '';
+        pathParams.delete('serial');
+        return { path: `/client/${encodeURIComponent(serial)}`, pathParams };
+    }
+}

package/dist/VideoPlayer.d.ts

@@ -0,0 +1,50 @@
+import CogsConnection from './CogsConnection';
+import { VideoState } from './types/VideoState';
+import MediaClipStateMessage from './types/MediaClipStateMessage';
+import { MediaObjectFit } from '.';
+declare type EventTypes = {
+    state: VideoState;
+    videoClipState: MediaClipStateMessage;
+};
+export default class VideoPlayer {
+    private eventTarget;
+    private globalVolume;
+    private videoClipPlayers;
+    private activeClip?;
+    private parentElement;
+    private sinkId;
+    constructor(cogsConnection: CogsConnection, 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;
+    setVideoClipLoop({ loop }: {
+        loop: true | undefined;
+    }): 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 {};

package/dist/VideoPlayer.js

@@ -0,0 +1,325 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const urls_1 = require("./helpers/urls");
+const VideoState_1 = require("./types/VideoState");
+const DEFAULT_PARENT_ELEMENT = document.body;
+class VideoPlayer {
+    constructor(cogsConnection, parentElement = DEFAULT_PARENT_ELEMENT) {
+        this.eventTarget = new EventTarget();
+        this.globalVolume = 1;
+        this.videoClipPlayers = {};
+        this.sinkId = '';
+        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', (event) => {
+            const message = event.detail;
+            switch (message.type) {
+                case 'media_config_update':
+                    this.setGlobalVolume(message.globalVolume);
+                    if (message.audioOutput !== undefined) {
+                        const sinkId = cogsConnection.getAudioSinkId(message.audioOutput);
+                        this.setAudioSink(sinkId !== null && sinkId !== void 0 ? 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(DEFAULT_PARENT_ELEMENT);
+    }
+    setGlobalVolume(globalVolume) {
+        Object.values(this.videoClipPlayers).forEach((clipPlayer) => {
+            clipPlayer.videoElement.volume = clipPlayer.volume * globalVolume;
+        });
+        this.globalVolume = globalVolume;
+        this.notifyStateListeners();
+    }
+    playVideoClip(path, { playId, volume, loop, fit }) {
+        if (this.activeClip) {
+            if (this.activeClip.path !== path) {
+                this.stopVideoClip();
+            }
+        }
+        if (!this.videoClipPlayers[path]) {
+            this.videoClipPlayers[path] = this.createClipPlayer(path, { preload: 'none', ephemeral: true, fit });
+        }
+        this.activeClip = { path, playId };
+        this.updateVideoClipPlayer(path, (clipPlayer) => {
+            clipPlayer.volume = volume;
+            clipPlayer.videoElement.volume = 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();
+            clipPlayer.videoElement.style.display = 'block';
+            return clipPlayer;
+        });
+    }
+    pauseVideoClip() {
+        if (this.activeClip) {
+            const { playId, path } = this.activeClip;
+            this.updateVideoClipPlayer(path, (clipPlayer) => {
+                var _a;
+                (_a = clipPlayer.videoElement) === null || _a === void 0 ? void 0 : _a.pause();
+                return clipPlayer;
+            });
+            this.notifyClipStateListeners(playId, path, 'paused');
+        }
+    }
+    stopVideoClip() {
+        if (this.activeClip) {
+            this.handleStoppedClip(this.activeClip.path);
+        }
+    }
+    setVideoClipVolume({ volume }) {
+        if (!this.activeClip) {
+            return;
+        }
+        if (!(volume >= 0 && volume <= 1)) {
+            console.warn('Invalid volume', volume);
+            return;
+        }
+        this.updateVideoClipPlayer(this.activeClip.path, (clipPlayer) => {
+            if (clipPlayer.videoElement) {
+                clipPlayer.videoElement.volume = volume * this.globalVolume;
+            }
+            return clipPlayer;
+        });
+    }
+    setVideoClipLoop({ loop }) {
+        if (!this.activeClip) {
+            return;
+        }
+        this.updateVideoClipPlayer(this.activeClip.path, (clipPlayer) => {
+            if (clipPlayer.videoElement) {
+                clipPlayer.videoElement.loop = loop || false;
+            }
+            return clipPlayer;
+        });
+    }
+    setVideoClipFit({ fit }) {
+        if (!this.activeClip) {
+            return;
+        }
+        this.updateVideoClipPlayer(this.activeClip.path, (clipPlayer) => {
+            if (clipPlayer.videoElement) {
+                clipPlayer.videoElement.style.objectFit = fit;
+            }
+            return clipPlayer;
+        });
+    }
+    handleStoppedClip(path) {
+        var _a;
+        if (!this.activeClip || this.activeClip.path !== path) {
+            return;
+        }
+        const playId = this.activeClip.playId;
+        // Once an ephemeral clip stops, cleanup and remove the player
+        if ((_a = this.videoClipPlayers[this.activeClip.path]) === null || _a === void 0 ? void 0 : _a.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) => {
+                var _a, _b;
+                if (((_a = this.activeClip) === null || _a === void 0 ? void 0 : _a.path) === path && ((_b = previousClipPlayers[path]) === null || _b === void 0 ? void 0 : _b.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 ? 'auto' : 'none';
+                        return player;
+                    });
+                }
+            });
+            return clipPlayers;
+        })();
+        this.notifyStateListeners();
+    }
+    notifyStateListeners() {
+        var _a, _b, _c, _d, _e, _f;
+        const VideoState = {
+            globalVolume: this.globalVolume,
+            isPlaying: this.activeClip ? !((_a = this.videoClipPlayers[this.activeClip.path].videoElement) === null || _a === void 0 ? void 0 : _a.paused) : false,
+            clips: { ...this.videoClipPlayers },
+            activeClip: this.activeClip
+                ? {
+                    path: this.activeClip.path,
+                    state: !((_b = this.videoClipPlayers[this.activeClip.path].videoElement) === null || _b === void 0 ? void 0 : _b.paused) ? VideoState_1.ActiveVideoClipState.Playing : VideoState_1.ActiveVideoClipState.Paused,
+                    loop: (_d = (_c = this.videoClipPlayers[this.activeClip.path].videoElement) === null || _c === void 0 ? void 0 : _c.loop) !== null && _d !== void 0 ? _d : false,
+                    volume: (_f = (_e = this.videoClipPlayers[this.activeClip.path].videoElement) === null || _e === void 0 ? void 0 : _e.volume) !== null && _f !== void 0 ? _f : 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.src = urls_1.assetUrl(path);
+        videoElement.autoplay = false;
+        videoElement.loop = false;
+        videoElement.volume = this.globalVolume * volume;
+        videoElement.preload = config.preload;
+        videoElement.addEventListener('playing', () => {
+            var _a;
+            if (((_a = this.activeClip) === null || _a === void 0 ? void 0 : _a.path) === path) {
+                this.notifyClipStateListeners(this.activeClip.playId, path, 'playing');
+            }
+        });
+        videoElement.addEventListener('ended', () => {
+            if (!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) {
+        var _a, _b;
+        if (((_a = this.activeClip) === null || _a === void 0 ? void 0 : _a.path) === path) {
+            const playId = this.activeClip.playId;
+            this.activeClip = undefined;
+            this.notifyClipStateListeners(playId, path, 'stopped');
+        }
+        (_b = this.videoClipPlayers[path]) === null || _b === void 0 ? void 0 : _b.videoElement.remove();
+        this.updateVideoClipPlayer(path, () => null);
+    }
+}
+exports.default = VideoPlayer;
+function preloadString(preload) {
+    return typeof preload === 'string' ? preload : preload ? 'metadata' : 'none';
+}
+function setPlayerSinkId(player, sinkId) {
+    if (sinkId === undefined) {
+        return;
+    }
+    player.videoElement.setSinkId(sinkId);
+}