@clockworkdog/cogs-client 1.2.0-rc.1 → 1.3.1

package/dist/AudioPlayer.d.ts

@@ -9,6 +9,7 @@ export default class AudioPlayer {
     private eventTarget;
     private globalVolume;
     private audioClipPlayers;
+    private sinkId;
     constructor(cogsConnection: CogsConnection);
     setGlobalVolume(volume: number): void;
     playAudioClip(path: string, { playId, volume, fade, loop }: {
@@ -33,6 +34,7 @@ export default class AudioPlayer {
     private handleStoppedClip;
     private updateActiveAudioClip;
     private updateAudioClipPlayer;
+    setAudioSink(sinkId: string): void;
     private updateConfig;
     private notifyStateListeners;
     private notifyClipStateListeners;

package/dist/AudioPlayer.js

@@ -8,6 +8,7 @@ class AudioPlayer {
         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);
@@ -20,6 +21,10 @@ class AudioPlayer {
                     if (this.globalVolume !== message.globalVolume) {
                         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 'audio_play':
@@ -104,6 +109,11 @@ class AudioPlayer {
                 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', () => {
@@ -293,6 +303,13 @@ class AudioPlayer {
         }
         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;
@@ -356,8 +373,10 @@ class AudioPlayer {
             autoplay: false,
             loop: false,
             volume: 1,
-            html5: !config.preload,
+            html5: true,
+            preload: config.preload,
         });
+        setPlayerSinkId(player, this.sinkId);
         return player;
     }
     createClip(file, config) {
@@ -385,3 +404,17 @@ function log(...data) {
 function isFadeValid(fade) {
     return 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);
+    }
+}

package/dist/CogsConnection.d.ts

@@ -56,6 +56,12 @@ export default class CogsConnection<CustomTypes extends {
     get showPhase(): ShowPhase;
     private _timerState;
     get timerState(): TimerState | null;
+    /**
+     * Cached audio outputs use to look up the device/sink ID when a different device label is requested
+     */
+    private audioOutputs;
+    private _selectedAudioOutput;
+    get selectedAudioOutput(): string;
     constructor({ hostname, port }?: {
         hostname?: string;
         port?: number;
@@ -64,8 +70,10 @@ export default class CogsConnection<CustomTypes extends {
     close(): void;
     sendEvent<EventName extends keyof CustomTypes['outputEvents']>(eventName: EventName, ...[eventValue]: CustomTypes['outputEvents'][EventName] extends null ? [] : [CustomTypes['outputEvents'][EventName]]): void;
     setOutputPortValues(values: Partial<CustomTypes['outputPorts']>): void;
+    getAudioSinkId(audioOutput: string): string | undefined;
     sendInitialMediaClipStates(allMediaClipStates: AllMediaClipStatesMessage): void;
     sendMediaClipState(mediaClipState: MediaClipStateMessage): void;
+    sendAudioOutputs(audioOutputs: MediaDeviceInfo[]): void;
     addEventListener<EventName extends keyof ConnectionEventListeners<CustomTypes>, EventValue extends ConnectionEventListeners<CustomTypes>[EventName]>(type: EventName, listener: (ev: CustomEvent<EventValue>) => void, options?: boolean | AddEventListenerOptions): void;
     removeEventListener<EventName extends keyof ConnectionEventListeners<CustomTypes>, EventValue extends ConnectionEventListeners<CustomTypes>[EventName]>(type: EventName, listener: (ev: CustomEvent<EventValue>) => void, options?: boolean | EventListenerOptions): void;
     private dispatchEvent;

package/dist/CogsConnection.js

@@ -8,12 +8,18 @@ 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 : ''}`;
@@ -37,7 +43,7 @@ class CogsConnection {
                     }
                     else if (parsed.updates) {
                         this.currentInputPortValues = { ...this.currentInputPortValues, ...parsed.updates };
-                        this.dispatchEvent('updates', this.currentInputPortValues);
+                        this.dispatchEvent('updates', parsed.updates);
                     }
                     else if (parsed.event && parsed.event.key) {
                         this.dispatchEvent('event', parsed.event);
@@ -66,6 +72,20 @@ class CogsConnection {
                 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 };
@@ -82,6 +102,9 @@ class CogsConnection {
     get timerState() {
         return this._timerState ? { ...this._timerState } : null;
     }
+    get selectedAudioOutput() {
+        return this._selectedAudioOutput;
+    }
     get isConnected() {
         return this.websocket.readyState === WebSocket.OPEN;
     }
@@ -104,6 +127,10 @@ class CogsConnection {
             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 }));
@@ -114,6 +141,11 @@ class CogsConnection {
             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);

package/dist/VideoPlayer.d.ts

@@ -12,6 +12,7 @@ export default class VideoPlayer {
     private videoClipPlayers;
     private activeClip?;
     private parentElement;
+    private sinkId;
     constructor(cogsConnection: CogsConnection, parentElement?: HTMLElement);
     setParentElement(parentElement: HTMLElement): void;
     resetParentElement(): void;
@@ -35,6 +36,7 @@ export default class VideoPlayer {
     }): void;
     private handleStoppedClip;
     private updateVideoClipPlayer;
+    setAudioSink(sinkId: string): void;
     private updateConfig;
     private notifyStateListeners;
     private notifyClipStateListeners;

package/dist/VideoPlayer.js

@@ -8,6 +8,7 @@ class VideoPlayer {
         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 }) => {
@@ -19,6 +20,10 @@ class VideoPlayer {
             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':
@@ -182,6 +187,12 @@ class VideoPlayer {
             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;
@@ -283,11 +294,13 @@ class VideoPlayer {
     }
     createClipPlayer(path, config) {
         const volume = 1;
-        return {
+        const player = {
             config,
             videoElement: this.createVideoElement(path, config, { volume }),
             volume,
         };
+        setPlayerSinkId(player, this.sinkId);
+        return player;
     }
     unloadClip(path) {
         var _a, _b;
@@ -304,3 +317,9 @@ 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);
+}