@stream-io/video-client 1.0.1 → 1.0.2

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+### [1.0.2](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-client-1.0.1...@stream-io/video-client-1.0.2) (2024-05-13)
+
+
+### Bug Fixes
+
+* optimistically toggle device status ([#1342](https://github.com/GetStream/stream-video-js/issues/1342)) ([2e4e470](https://github.com/GetStream/stream-video-js/commit/2e4e470347fce7c7499dd21a931e5dec74bf9618))
+
 ### [1.0.1](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-client-1.0.0...@stream-io/video-client-1.0.1) (2024-05-07)
 
 

package/dist/index.browser.es.js

@@ -10869,18 +10869,27 @@ class InputMediaDeviceManager {
      * Starts stream.
      */
     async enable() {
-        if (this.state.status === 'enabled')
+        if (this.state.optimisticStatus === 'enabled') {
+            await this.statusChangePromise;
             return;
-        this.enablePromise = this.unmuteStream();
-        try {
-            await this.enablePromise;
-            this.state.setStatus('enabled');
-            this.enablePromise = undefined;
-        }
-        catch (error) {
-            this.enablePromise = undefined;
-            throw error;
         }
+        const signal = this.nextAbortableStatusChangeRequest('enabled');
+        const doEnable = async () => {
+            if (signal.aborted)
+                return;
+            try {
+                await this.unmuteStream();
+                this.state.setStatus('enabled');
+            }
+            finally {
+                if (!signal.aborted)
+                    this.resetStatusChangeRequest();
+            }
+        };
+        this.statusChangePromise = this.statusChangePromise
+            ? this.statusChangePromise.then(doEnable)
+            : doEnable();
+        await this.statusChangePromise;
     }
     /**
      * Stops or pauses the stream based on state.disableMode
@@ -10888,19 +10897,28 @@ class InputMediaDeviceManager {
      */
     async disable(forceStop = false) {
         this.state.prevStatus = this.state.status;
-        if (!forceStop && this.state.status === 'disabled')
+        if (!forceStop && this.state.optimisticStatus === 'disabled') {
+            await this.statusChangePromise;
             return;
-        const stopTracks = forceStop || this.state.disableMode === 'stop-tracks';
-        this.disablePromise = this.muteStream(stopTracks);
-        try {
-            await this.disablePromise;
-            this.state.setStatus('disabled');
-            this.disablePromise = undefined;
-        }
-        catch (error) {
-            this.disablePromise = undefined;
-            throw error;
         }
+        const stopTracks = forceStop || this.state.disableMode === 'stop-tracks';
+        const signal = this.nextAbortableStatusChangeRequest('disabled');
+        const doDisable = async () => {
+            if (signal.aborted)
+                return;
+            try {
+                await this.muteStream(stopTracks);
+                this.state.setStatus('disabled');
+            }
+            finally {
+                if (!signal.aborted)
+                    this.resetStatusChangeRequest();
+            }
+        };
+        this.statusChangePromise = this.statusChangePromise
+            ? this.statusChangePromise.then(doDisable)
+            : doDisable();
+        await this.statusChangePromise;
     }
     /**
      * If status was previously enabled, it will re-enable the device.
@@ -10916,7 +10934,7 @@ class InputMediaDeviceManager {
      * else it will disable it.
      */
     async toggle() {
-        if (this.state.status === 'enabled') {
+        if (this.state.optimisticStatus === 'enabled') {
             return this.disable();
         }
         else {
@@ -11103,11 +11121,8 @@ class InputMediaDeviceManager {
             this.state.setMediaStream(stream, await rootStream);
             this.getTracks().forEach((track) => {
                 track.addEventListener('ended', async () => {
-                    if (this.enablePromise) {
-                        await this.enablePromise;
-                    }
-                    if (this.disablePromise) {
-                        await this.disablePromise;
+                    if (this.statusChangePromise) {
+                        await this.statusChangePromise;
                     }
                     if (this.state.status === 'enabled') {
                         this.isTrackStoppedDueToTrackEnd = true;
@@ -11137,11 +11152,8 @@ class InputMediaDeviceManager {
             if (!deviceId) {
                 return;
             }
-            if (this.enablePromise) {
-                await this.enablePromise;
-            }
-            if (this.disablePromise) {
-                await this.disablePromise;
+            if (this.statusChangePromise) {
+                await this.statusChangePromise;
             }
             let isDeviceDisconnected = false;
             let isDeviceReplaced = false;
@@ -11175,6 +11187,16 @@ class InputMediaDeviceManager {
     findDeviceInList(devices, deviceId) {
         return devices.find((d) => d.deviceId === deviceId && d.kind === this.mediaDeviceKind);
     }
+    nextAbortableStatusChangeRequest(status) {
+        this.statusChangeAbortController?.abort();
+        this.statusChangeAbortController = new AbortController();
+        this.state.setPendingStatus(status);
+        return this.statusChangeAbortController.signal;
+    }
+    resetStatusChangeRequest() {
+        this.statusChangePromise = undefined;
+        this.statusChangeAbortController = undefined;
+    }
 }
 
 class InputMediaDeviceManagerState {
@@ -11189,6 +11211,7 @@ class InputMediaDeviceManagerState {
         this.disableMode = disableMode;
         this.permissionName = permissionName;
         this.statusSubject = new BehaviorSubject(undefined);
+        this.optimisticStatusSubject = new BehaviorSubject(undefined);
         this.mediaStreamSubject = new BehaviorSubject(undefined);
         this.selectedDeviceSubject = new BehaviorSubject(undefined);
         this.defaultConstraintsSubject = new BehaviorSubject(undefined);
@@ -11207,6 +11230,12 @@ class InputMediaDeviceManagerState {
          * An Observable that emits the device status
          */
         this.status$ = this.statusSubject.asObservable().pipe(distinctUntilChanged());
+        /**
+         * An Observable the reflects the requested device status. Useful for optimistic UIs
+         */
+        this.optimisticStatus$ = this.optimisticStatusSubject
+            .asObservable()
+            .pipe(distinctUntilChanged());
         /**
          * The default constraints for the device.
          */
@@ -11274,6 +11303,12 @@ class InputMediaDeviceManagerState {
     get status() {
         return this.getCurrentValue(this.status$);
     }
+    /**
+     * The requested device status. Useful for optimistic UIs
+     */
+    get optimisticStatus() {
+        return this.getCurrentValue(this.optimisticStatus$);
+    }
     /**
      * The currently selected device
      */
@@ -11293,6 +11328,13 @@ class InputMediaDeviceManagerState {
     setStatus(status) {
         this.setCurrentValue(this.statusSubject, status);
     }
+    /**
+     * @internal
+     * @param pendingStatus
+     */
+    setPendingStatus(pendingStatus) {
+        this.setCurrentValue(this.optimisticStatusSubject, pendingStatus);
+    }
     /**
      * Updates the `mediaStream` state variable.
      *
@@ -11412,9 +11454,9 @@ class CameraManager extends InputMediaDeviceManager {
     async selectTargetResolution(resolution) {
         this.targetResolution.height = resolution.height;
         this.targetResolution.width = resolution.width;
-        if (this.enablePromise) {
+        if (this.statusChangePromise && this.state.optimisticStatus === 'enabled') {
             try {
-                await this.enablePromise;
+                await this.statusChangePromise;
             }
             catch (error) {
                 // couldn't enable device, target resolution will be applied the next time user attempts to start the device
@@ -13555,12 +13597,7 @@ class Call {
     }
     async initCamera(options) {
         // Wait for any in progress camera operation
-        if (this.camera.enablePromise) {
-            await this.camera.enablePromise;
-        }
-        if (this.camera.disablePromise) {
-            await this.camera.disablePromise;
-        }
+        await this.camera.statusChangePromise;
         if (this.state.localParticipant?.videoStream ||
             !this.permissionsContext.hasPermission('send-video')) {
             return;
@@ -13597,12 +13634,7 @@ class Call {
     }
     async initMic(options) {
         // Wait for any in progress mic operation
-        if (this.microphone.enablePromise) {
-            await this.microphone.enablePromise;
-        }
-        if (this.microphone.disablePromise) {
-            await this.microphone.disablePromise;
-        }
+        await this.microphone.statusChangePromise;
         if (this.state.localParticipant?.audioStream ||
             !this.permissionsContext.hasPermission('send-audio')) {
             return;
@@ -15145,7 +15177,7 @@ class StreamClient {
             });
         };
         this.getUserAgent = () => {
-            const version = "1.0.1" ;
+            const version = "1.0.2" ;
             return (this.userAgent ||
                 `stream-video-javascript-client-${this.node ? 'node' : 'browser'}-${version}`);
         };