@clockworkdog/cogs-client 1.5.1 → 1.5.3

package/README.md

@@ -20,14 +20,6 @@ Include the script in your HTML page:
 
 ### NPM / Yarn
 
-If you haven't yet created a web project we recommend using Vite with Typescript:
-
-```shell
-yarn create vite my-custom-content --template vanilla-ts
-cd my-custom-content
-yarn
-```
-
 Then add `cogs-client` with NPM or Yarn:
 
 ```shell

package/dist/AudioPlayer.js

@@ -3,6 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const howler_1 = require("howler");
 const urls_1 = require("./helpers/urls");
 const DEBUG = true;
+// Check an iOS-only property (See https://developer.mozilla.org/en-US/docs/Web/API/Navigator#non-standard_properties)
+const IS_IOS = typeof navigator.standalone !== 'undefined';
 class AudioPlayer {
     constructor(cogsConnection) {
         this.eventTarget = new EventTarget();
@@ -131,12 +133,13 @@ class AudioPlayer {
                 // 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') {
+                    var _a;
+                    const clipState = (_a = clipPlayer.activeClips[soundId]) === null || _a === void 0 ? void 0 : _a.state;
+                    if ((clipState === null || clipState === void 0 ? void 0 : 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') {
+                    else if ((clipState === null || clipState === void 0 ? void 0 : clipState.type) === 'stop_requested') {
                         log('Clip started playing but should be stopped', { path, soundId });
                         this.stopAudioClip(path, { fade: clipState.fade }, soundId, true);
                     }
@@ -148,12 +151,13 @@ class AudioPlayer {
                 if (isFadeValid(fade)) {
                     // Start fade when clip starts
                     clipPlayer.player.volume(0, soundId);
+                    clipPlayer.player.mute(false, soundId);
                     clipPlayer.player.once('play', () => {
-                        clipPlayer.player.fade(0, volume, fade * 1000, soundId);
+                        fadeAudioPlayerVolume(clipPlayer.player, volume, fade * 1000, soundId);
                     }, soundId);
                 }
                 else {
-                    clipPlayer.player.volume(volume, soundId);
+                    setAudioPlayerVolume(clipPlayer.player, volume, soundId);
                 }
                 // Track new/updated active clip
                 clipPlayer.activeClips = { ...clipPlayer.activeClips, [soundId]: activeClip };
@@ -181,7 +185,7 @@ class AudioPlayer {
                                 this.updateActiveAudioClip(path, soundId, (clip) => ({ ...clip, state: { type: 'paused' } }));
                                 this.notifyClipStateListeners(clip.playId, path, 'paused');
                             }, soundId);
-                            clipPlayer.player.fade(clipPlayer.player.volume(soundId), 0, fade * 1000, soundId);
+                            fadeAudioPlayerVolume(clipPlayer.player, 0, fade * 1000, soundId);
                             clip.state = { type: 'pausing' };
                         }
                         else {
@@ -221,7 +225,7 @@ class AudioPlayer {
                             // Cleanup any old fade callbacks first
                             // TODO: Remove cast once https://github.com/DefinitelyTyped/DefinitelyTyped/pull/59411 is merged
                             clipPlayer.player.off('fade', soundId);
-                            clipPlayer.player.fade(clipPlayer.player.volume(soundId), 0, fade * 1000, 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.stop(soundId), soundId);
                             clip.state = { type: 'stopping' };
@@ -264,10 +268,10 @@ class AudioPlayer {
                 if (clip.state.type !== 'pausing' && clip.state.type !== 'stopping') {
                     const soundId = parseInt(soundIdStr);
                     if (isFadeValid(fade)) {
-                        clipPlayer.player.fade(clipPlayer.player.volume(soundId), volume, fade * 1000);
+                        fadeAudioPlayerVolume(clipPlayer.player, volume, fade * 1000, soundId);
                     }
                     else {
-                        clipPlayer.player.volume(volume);
+                        setAudioPlayerVolume(clipPlayer.player, volume, soundId);
                     }
                     return [soundIdStr, { ...clip, volume }];
                 }
@@ -401,8 +405,11 @@ function log(...data) {
         console.log(...data);
     }
 }
+/**
+ * @returns `true` if this is this a valid fade duration. Always returns `false` on iOS
+ */
 function isFadeValid(fade) {
-    return typeof fade === 'number' && !isNaN(fade) && fade > 0;
+    return !IS_IOS && typeof fade === 'number' && !isNaN(fade) && fade > 0;
 }
 function setPlayerSinkId(player, sinkId) {
     var _a;
@@ -420,3 +427,21 @@ function setPlayerSinkId(player, sinkId) {
         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) {
+    howl.volume(volume, soundId);
+    howl.mute(volume === 0, soundId);
+}
+/**
+ * Fade to audio volume
+ *
+ * This doesn't work on iOS (volume is read-only) so at least mute it if the volume is zero
+ */
+function fadeAudioPlayerVolume(howl, volume, fade, soundId) {
+    howl.mute(false, soundId);
+    howl.fade(howl.volume(soundId), volume, fade, soundId);
+}

package/dist/VideoPlayer.d.ts

@@ -11,6 +11,7 @@ export default class VideoPlayer {
     private globalVolume;
     private videoClipPlayers;
     private activeClip?;
+    private pendingClip?;
     private parentElement;
     private sinkId;
     constructor(cogsConnection: CogsConnection, parentElement?: HTMLElement);
@@ -28,9 +29,6 @@ export default class VideoPlayer {
     setVideoClipVolume({ volume }: {
         volume: number;
     }): void;
-    setVideoClipLoop({ loop }: {
-        loop: true | undefined;
-    }): void;
     setVideoClipFit({ fit }: {
         fit: MediaObjectFit;
     }): void;

package/dist/VideoPlayer.js

@@ -75,35 +75,50 @@ class VideoPlayer {
     }
     setGlobalVolume(globalVolume) {
         Object.values(this.videoClipPlayers).forEach((clipPlayer) => {
-            clipPlayer.videoElement.volume = clipPlayer.volume * globalVolume;
+            setVideoElementVolume(clipPlayer.videoElement, clipPlayer.volume * globalVolume);
         });
         this.globalVolume = globalVolume;
         this.notifyStateListeners();
     }
     playVideoClip(path, { playId, volume, loop, fit }) {
-        if (this.activeClip) {
-            if (this.activeClip.path !== path) {
-                this.stopVideoClip();
-            }
-        }
+        var _a;
         if (!this.videoClipPlayers[path]) {
             this.videoClipPlayers[path] = this.createClipPlayer(path, { preload: 'none', ephemeral: true, fit });
         }
-        this.activeClip = { path, playId };
+        // 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 (((_a = this.activeClip) === null || _a === void 0 ? void 0 : _a.path) !== path) {
+            this.pendingClip = { path, playId, actionOncePlaying: 'play' };
+        }
+        // Setup and play the pending clip's player
         this.updateVideoClipPlayer(path, (clipPlayer) => {
             clipPlayer.volume = volume;
-            clipPlayer.videoElement.volume = volume * this.globalVolume;
+            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();
-            clipPlayer.videoElement.style.display = 'block';
+            // 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) => {
@@ -115,41 +130,42 @@ class VideoPlayer {
         }
     }
     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 (!this.activeClip) {
+        var _a, _b;
+        // If there is a pending clip, this is latest to have been played so update its volume
+        const clipToUpdate = (_b = (_a = this.pendingClip) !== null && _a !== void 0 ? _a : this.activeClip) !== null && _b !== void 0 ? _b : undefined;
+        if (!clipToUpdate) {
             return;
         }
         if (!(volume >= 0 && volume <= 1)) {
             console.warn('Invalid volume', volume);
             return;
         }
-        this.updateVideoClipPlayer(this.activeClip.path, (clipPlayer) => {
+        this.updateVideoClipPlayer(clipToUpdate.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;
+                clipPlayer.volume = volume;
+                setVideoElementVolume(clipPlayer.videoElement, volume * this.globalVolume);
             }
             return clipPlayer;
         });
     }
     setVideoClipFit({ fit }) {
-        if (!this.activeClip) {
+        var _a, _b;
+        // If there is a pending clip, this is latest to have been played so update its fit
+        const clipToUpdate = (_b = (_a = this.pendingClip) !== null && _a !== void 0 ? _a : this.activeClip) !== null && _b !== void 0 ? _b : undefined;
+        if (!clipToUpdate) {
             return;
         }
-        this.updateVideoClipPlayer(this.activeClip.path, (clipPlayer) => {
+        this.updateVideoClipPlayer(clipToUpdate.path, (clipPlayer) => {
             if (clipPlayer.videoElement) {
                 clipPlayer.videoElement.style.objectFit = fit;
             }
@@ -225,7 +241,7 @@ class VideoPlayer {
                             preload: preloadString(newVideoPaths[path].preload),
                             ephemeral: false,
                         };
-                        player.videoElement.preload = player.config.preload ? 'auto' : 'none';
+                        player.videoElement.preload = player.config.preload;
                         return player;
                     });
                 }
@@ -235,7 +251,7 @@ class VideoPlayer {
         this.notifyStateListeners();
     }
     notifyStateListeners() {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e, _f, _g;
         const VideoState = {
             globalVolume: this.globalVolume,
             isPlaying: this.activeClip ? !((_a = this.videoClipPlayers[this.activeClip.path].videoElement) === null || _a === void 0 ? void 0 : _a.paused) : false,
@@ -245,7 +261,8 @@ class VideoPlayer {
                     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,
+                    volume: ((_e = this.videoClipPlayers[this.activeClip.path].videoElement) === null || _e === void 0 ? void 0 : _e.muted) ? 0
+                        : (_g = (_f = this.videoClipPlayers[this.activeClip.path].videoElement) === null || _f === void 0 ? void 0 : _f.volume) !== null && _g !== void 0 ? _g : 0,
                 }
                 : undefined,
         };
@@ -270,16 +287,54 @@ class VideoPlayer {
         videoElement.src = urls_1.assetUrl(path);
         videoElement.autoplay = false;
         videoElement.loop = false;
-        videoElement.volume = this.globalVolume * volume;
+        setVideoElementVolume(videoElement, volume * this.globalVolume);
         videoElement.preload = config.preload;
         videoElement.addEventListener('playing', () => {
-            var _a;
-            if (((_a = this.activeClip) === null || _a === void 0 ? void 0 : _a.path) === path) {
+            var _a, _b;
+            // If the clip is still the pending one when it actually start playing, then ensure it is in the correct state
+            if (((_a = this.pendingClip) === null || _a === void 0 ? void 0 : _a.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 (((_b = this.activeClip) === null || _b === void 0 ? void 0 : _b.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', () => {
-            if (!videoElement.loop) {
+            // 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);
             }
         });
@@ -316,7 +371,7 @@ class VideoPlayer {
 }
 exports.default = VideoPlayer;
 function preloadString(preload) {
-    return typeof preload === 'string' ? preload : preload ? 'metadata' : 'none';
+    return typeof preload === 'string' ? preload : preload ? 'auto' : 'none';
 }
 function setPlayerSinkId(player, sinkId) {
     if (sinkId === undefined) {
@@ -326,3 +381,12 @@ function setPlayerSinkId(player, sinkId) {
         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;
+}