@stream-io/video-client 0.3.24 → 0.3.26

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+### [0.3.26](https://github.com/GetStream/stream-video-js/compare/client0.3.25...client0.3.26) (2023-09-27)
+
+
+### Features
+
+* **Call Preview:** Support for call thumbnails ([#1099](https://github.com/GetStream/stream-video-js/issues/1099)) ([9274f76](https://github.com/GetStream/stream-video-js/commit/9274f760ed264ee0ee6ac97c6fe679288e067fd8))
+
+### [0.3.25](https://github.com/GetStream/stream-video-js/compare/client0.3.24...client0.3.25) (2023-09-27)
+
+
+### Features
+
+* **react-sdk:** LivestreamLayout ([#1103](https://github.com/GetStream/stream-video-js/issues/1103)) ([6636699](https://github.com/GetStream/stream-video-js/commit/6636699701dfd5eb5886c50781dd5f16a8470da5))
+
 ### [0.3.24](https://github.com/GetStream/stream-video-js/compare/client0.3.23...client0.3.24) (2023-09-26)
 
 

package/dist/index.browser.es.js

@@ -34,6 +34,26 @@ const CreateDeviceRequestPushProviderEnum = {
     HUAWEI: 'huawei',
     XIAOMI: 'xiaomi',
 };
+/**
+ * @export
+ */
+const LayoutSettingsNameEnum = {
+    SPOTLIGHT: 'spotlight',
+    GRID: 'grid',
+    SINGLE_PARTICIPANT: 'single-participant',
+    MOBILE: 'mobile',
+    CUSTOM: 'custom',
+};
+/**
+ * @export
+ */
+const LayoutSettingsRequestNameEnum = {
+    SPOTLIGHT: 'spotlight',
+    GRID: 'grid',
+    SINGLE_PARTICIPANT: 'single-participant',
+    MOBILE: 'mobile',
+    CUSTOM: 'custom',
+};
 /**
  * All possibility of string to use
  * @export
@@ -64,25 +84,6 @@ const OwnCapability = {
     UPDATE_CALL_PERMISSIONS: 'update-call-permissions',
     UPDATE_CALL_SETTINGS: 'update-call-settings',
 };
-/**
- * @export
- */
-const RecordSettingsModeEnum = {
-    AVAILABLE: 'available',
-    DISABLED: 'disabled',
-    AUTO_ON: 'auto-on',
-};
-/**
- * @export
- */
-const RecordSettingsQualityEnum = {
-    AUDIO_ONLY: 'audio-only',
-    _360P: '360p',
-    _480P: '480p',
-    _720P: '720p',
-    _1080P: '1080p',
-    _1440P: '1440p',
-};
 /**
  * @export
  */
@@ -95,7 +96,6 @@ const RecordSettingsRequestModeEnum = {
  * @export
  */
 const RecordSettingsRequestQualityEnum = {
-    AUDIO_ONLY: 'audio-only',
     _360P: '360p',
     _480P: '480p',
     _720P: '720p',
@@ -7889,6 +7889,18 @@ const ifInvisibleBy = conditional((a, b) => {
     return ((_a = a.viewportVisibilityState) === null || _a === void 0 ? void 0 : _a.videoTrack) === VisibilityState.INVISIBLE ||
         ((_b = b.viewportVisibilityState) === null || _b === void 0 ? void 0 : _b.videoTrack) === VisibilityState.INVISIBLE;
 });
+/**
+ * A comparator that applies the decorated comparator when a participant is
+ * either invisible or its visibility state isn't known.
+ * For visible participants, it ensures stable sorting.
+ */
+const ifInvisibleOrUnknownBy = conditional((a, b) => {
+    var _a, _b, _c, _d;
+    return ((_a = a.viewportVisibilityState) === null || _a === void 0 ? void 0 : _a.videoTrack) === VisibilityState.INVISIBLE ||
+        ((_b = a.viewportVisibilityState) === null || _b === void 0 ? void 0 : _b.videoTrack) === VisibilityState.UNKNOWN ||
+        ((_c = b.viewportVisibilityState) === null || _c === void 0 ? void 0 : _c.videoTrack) === VisibilityState.INVISIBLE ||
+        ((_d = b.viewportVisibilityState) === null || _d === void 0 ? void 0 : _d.videoTrack) === VisibilityState.UNKNOWN;
+});
 /**
  * The default sorting preset.
  */
@@ -7897,6 +7909,11 @@ const defaultSortPreset = combineComparators(pinned, screenSharing, ifInvisibleB
  * The sorting preset for speaker layout.
  */
 const speakerLayoutSortPreset = combineComparators(pinned, screenSharing, dominantSpeaker, ifInvisibleBy(speaking), ifInvisibleBy(reactionType('raised-hand')), ifInvisibleBy(publishingVideo), ifInvisibleBy(publishingAudio));
+/**
+ * The sorting preset for layouts that don't render all participants but
+ * instead, render them in pages.
+ */
+const paginatedLayoutSortPreset = combineComparators(pinned, screenSharing, dominantSpeaker, ifInvisibleOrUnknownBy(speaking), ifInvisibleOrUnknownBy(reactionType('raised-hand')), ifInvisibleOrUnknownBy(publishingVideo), ifInvisibleOrUnknownBy(publishingAudio));
 /**
  * The sorting preset for livestreams and audio rooms.
  */
@@ -7974,6 +7991,7 @@ class CallState {
         this.settingsSubject = new BehaviorSubject(undefined);
         this.transcribingSubject = new BehaviorSubject(false);
         this.endedBySubject = new BehaviorSubject(undefined);
+        this.thumbnailsSubject = new BehaviorSubject(undefined);
         this.membersSubject = new BehaviorSubject([]);
         this.ownCapabilitiesSubject = new BehaviorSubject([]);
         this.callingStateSubject = new BehaviorSubject(CallingState.UNKNOWN);
@@ -8234,6 +8252,7 @@ class CallState {
             this.setCurrentValue(this.sessionSubject, call.session);
             this.setCurrentValue(this.settingsSubject, call.settings);
             this.setCurrentValue(this.transcribingSubject, call.transcribing);
+            this.setCurrentValue(this.thumbnailsSubject, call.thumbnails);
         };
         this.updateFromMemberRemoved = (event) => {
             this.setCurrentValue(this.membersSubject, (members) => members.filter((m) => event.members.indexOf(m.user_id) === -1));
@@ -8244,10 +8263,10 @@ class CallState {
                 ...event.members,
             ]);
         };
-        this.updateFromBroadcastStopped = () => {
+        this.updateFromHLSBroadcastStopped = () => {
             this.setCurrentValue(this.egressSubject, (egress) => (Object.assign(Object.assign({}, egress), { broadcasting: false })));
         };
-        this.updateFromBroadcastStarted = (event) => {
+        this.updateFromHLSBroadcastStarted = (event) => {
             this.setCurrentValue(this.egressSubject, (egress) => (Object.assign(Object.assign({}, egress), { broadcasting: true, hls: Object.assign(Object.assign({}, egress.hls), { playlist_url: event.hls_playlist_url }) })));
         };
         this.updateFromSessionParticipantLeft = (event) => {
@@ -8345,6 +8364,7 @@ class CallState {
         this.settings$ = this.settingsSubject.asObservable();
         this.transcribing$ = this.transcribingSubject.asObservable();
         this.endedBy$ = this.endedBySubject.asObservable();
+        this.thumbnails$ = this.thumbnailsSubject.asObservable();
         this.eventHandlers = {
             // these events are not updating the call state:
             'call.permission_request': undefined,
@@ -8358,7 +8378,10 @@ class CallState {
             // events that update call state:
             'call.accepted': (e) => this.updateFromCallResponse(e.call),
             'call.created': (e) => this.updateFromCallResponse(e.call),
-            'call.notification': (e) => this.updateFromCallResponse(e.call),
+            'call.notification': (e) => {
+                this.updateFromCallResponse(e.call);
+                this.setMembers(e.members);
+            },
             'call.rejected': (e) => this.updateFromCallResponse(e.call),
             'call.ring': (e) => this.updateFromCallResponse(e.call),
             'call.live_started': (e) => this.updateFromCallResponse(e.call),
@@ -8371,8 +8394,8 @@ class CallState {
             },
             'call.recording_started': () => this.setCurrentValue(this.recordingSubject, true),
             'call.recording_stopped': () => this.setCurrentValue(this.recordingSubject, false),
-            'call.broadcasting_started': this.updateFromBroadcastStarted,
-            'call.broadcasting_stopped': this.updateFromBroadcastStopped,
+            'call.hls_broadcasting_started': this.updateFromHLSBroadcastStarted,
+            'call.hls_broadcasting_stopped': this.updateFromHLSBroadcastStopped,
             'call.session_participant_joined': this.updateFromSessionParticipantJoined,
             'call.session_participant_left': this.updateFromSessionParticipantLeft,
             'call.blocked_user': this.blockUser,
@@ -8556,6 +8579,12 @@ class CallState {
     get endedBy() {
         return this.getCurrentValue(this.endedBy$);
     }
+    /**
+     * Will provide the thumbnails of this call, if enabled in the call settings.
+     */
+    get thumbnails() {
+        return this.getCurrentValue(this.thumbnails$);
+    }
 }
 
 /**
@@ -11829,6 +11858,32 @@ class Call {
                 unbind();
             };
         };
+        /**
+         * Binds a DOM <img> element to this call's thumbnail (if enabled in settings).
+         *
+         * @param imageElement the image element to bind to.
+         * @param opts options for the binding.
+         */
+        this.bindCallThumbnailElement = (imageElement, opts = {}) => {
+            const handleError = () => {
+                imageElement.src =
+                    opts.fallbackImageSource ||
+                        'https://getstream.io/random_svg/?name=x&id=x';
+            };
+            const unsubscribe = createSubscription(this.state.thumbnails$, (thumbnails) => {
+                if (!thumbnails)
+                    return;
+                imageElement.addEventListener('error', handleError);
+                const thumbnailUrl = new URL(thumbnails.image_url);
+                thumbnailUrl.searchParams.set('w', String(imageElement.clientWidth));
+                thumbnailUrl.searchParams.set('h', String(imageElement.clientHeight));
+                imageElement.src = thumbnailUrl.toString();
+            });
+            return () => {
+                unsubscribe();
+                imageElement.removeEventListener('error', handleError);
+            };
+        };
         this.type = type;
         this.id = id;
         this.cid = `${type}:${id}`;
@@ -13163,7 +13218,7 @@ class WSConnectionFallback {
     }
 }
 
-const version = '0.3.24';
+const version = '0.3.26';
 
 const logger = getLogger(['location']);
 const HINT_URL = `https://hint.stream-io-video.com/`;
@@ -14143,5 +14198,5 @@ class StreamVideoServerClient extends StreamVideoClient {
     }
 }
 
-export { AudioSettingsDefaultDeviceEnum, AudioSettingsRequestDefaultDeviceEnum, browsers as Browsers, Call, CallState, CallType, CallTypes, CallingState, CameraManager, CameraManagerState, CreateDeviceRequestPushProviderEnum, DebounceType, DynascaleManager, ErrorFromResponse, InputMediaDeviceManager, InputMediaDeviceManagerState, MicrophoneManager, MicrophoneManagerState, OwnCapability, RecordSettingsModeEnum, RecordSettingsQualityEnum, RecordSettingsRequestModeEnum, RecordSettingsRequestQualityEnum, rxUtils as RxUtils, events as SfuEvents, models as SfuModels, SpeakerManager, SpeakerState, StreamSfuClient, StreamVideoClient, StreamVideoReadOnlyStateStore, StreamVideoServerClient, StreamVideoWriteableStateStore, TranscriptionSettingsModeEnum, TranscriptionSettingsRequestModeEnum, VideoSettingsCameraFacingEnum, VideoSettingsRequestCameraFacingEnum, ViewportTracker, VisibilityState, checkIfAudioOutputChangeSupported, combineComparators, conditional, createSoundDetector, defaultSortPreset, descending, disposeOfMediaStream, dominantSpeaker, getAudioDevices, getAudioOutputDevices, getAudioStream, getClientDetails, getDeviceInfo, getLogger, getOSInfo, getScreenShareStream, getSdkInfo, getVideoDevices, getVideoStream, isStreamVideoLocalParticipant, livestreamOrAudioRoomSortPreset, logLevels, logToConsole, name, noopComparator, pinned, publishingAudio, publishingVideo, reactionType, role, screenSharing, setDeviceInfo, setLogLevel, setLogger, setOSInfo, setSdkInfo, speakerLayoutSortPreset, speaking, watchForAddedDefaultAudioDevice, watchForAddedDefaultAudioOutputDevice, watchForAddedDefaultVideoDevice, watchForDisconnectedAudioDevice, watchForDisconnectedAudioOutputDevice, watchForDisconnectedVideoDevice };
+export { AudioSettingsDefaultDeviceEnum, AudioSettingsRequestDefaultDeviceEnum, browsers as Browsers, Call, CallState, CallType, CallTypes, CallingState, CameraManager, CameraManagerState, CreateDeviceRequestPushProviderEnum, DebounceType, DynascaleManager, ErrorFromResponse, InputMediaDeviceManager, InputMediaDeviceManagerState, LayoutSettingsNameEnum, LayoutSettingsRequestNameEnum, MicrophoneManager, MicrophoneManagerState, OwnCapability, RecordSettingsRequestModeEnum, RecordSettingsRequestQualityEnum, rxUtils as RxUtils, events as SfuEvents, models as SfuModels, SpeakerManager, SpeakerState, StreamSfuClient, StreamVideoClient, StreamVideoReadOnlyStateStore, StreamVideoServerClient, StreamVideoWriteableStateStore, TranscriptionSettingsModeEnum, TranscriptionSettingsRequestModeEnum, VideoSettingsCameraFacingEnum, VideoSettingsRequestCameraFacingEnum, ViewportTracker, VisibilityState, checkIfAudioOutputChangeSupported, combineComparators, conditional, createSoundDetector, defaultSortPreset, descending, disposeOfMediaStream, dominantSpeaker, getAudioDevices, getAudioOutputDevices, getAudioStream, getClientDetails, getDeviceInfo, getLogger, getOSInfo, getScreenShareStream, getSdkInfo, getVideoDevices, getVideoStream, isStreamVideoLocalParticipant, livestreamOrAudioRoomSortPreset, logLevels, logToConsole, name, noopComparator, paginatedLayoutSortPreset, pinned, publishingAudio, publishingVideo, reactionType, role, screenSharing, setDeviceInfo, setLogLevel, setLogger, setOSInfo, setSdkInfo, speakerLayoutSortPreset, speaking, watchForAddedDefaultAudioDevice, watchForAddedDefaultAudioOutputDevice, watchForAddedDefaultVideoDevice, watchForDisconnectedAudioDevice, watchForDisconnectedAudioOutputDevice, watchForDisconnectedVideoDevice };
 //# sourceMappingURL=index.browser.es.js.map