@snapcall/stream-ui 1.28.0 → 1.29.0

package/dist/stream-ui.esm.js

@@ -503,19 +503,17 @@ const $67e45b2e30dcc030$var$audioContextConstructor = window.AudioContext || win
 const $67e45b2e30dcc030$var$AUDIO_MUTE_DETECTION_TIME = 2000;
 const $67e45b2e30dcc030$var$START_SPEAK_DETECTION_TIME = 50;
 const $67e45b2e30dcc030$var$STOP_SPEAK_DETECTION_TIME = 500;
+const $67e45b2e30dcc030$var$AUDIO_DATA_RATE = 60;
 class $67e45b2e30dcc030$export$ea669869acd8f177 {
     constructor(stream, listener){
         this.speakStartEventTime = 0;
         this.speakStopEventTime = 0;
         this.isSpeaking = false;
-        this.audioMedianInterval = -1;
-        this.audioLevelInterval = -1;
-        this.audioLevelAverageInterval = -1;
+        this.audioIntervals = {};
         this.audioLevelAverage = {
             count: 0,
             average: 0
         };
-        this.audioLevels = [];
         this.id = stream.id;
         this.listener = listener;
         this.stream = stream;
@@ -532,15 +530,16 @@ class $67e45b2e30dcc030$export$ea669869acd8f177 {
         this.analyser.minDecibels = -90;
         this.analyser.maxDecibels = -10;
         this.audioStreamSource.connect(this.analyser);
+        this.audioLevels = new Array(Math.round(1000 / $67e45b2e30dcc030$var$AUDIO_DATA_RATE)).fill(0);
     }
     /**
-   * return the median of the audio levels (60 per second) for the
+   * return the average (mean) of the audio levels (AUDIO_DATA_RATE per second) for the
    * current second
-   */ getAudioLevelMedian() {
+   */ getRecentAudioLevelAverage() {
         const { length: length } = this.audioLevels;
         const audioLevelsSum = this.audioLevels.reduce((sum, level)=>sum + level, 0);
-        const audioLevelMedian = audioLevelsSum / length;
-        return audioLevelMedian;
+        const audioLevelAverage = audioLevelsSum / length;
+        return audioLevelAverage;
     }
     getCurrentAudioLevel() {
         const { length: length } = this.audioLevels;
@@ -548,8 +547,8 @@ class $67e45b2e30dcc030$export$ea669869acd8f177 {
         return 0;
     }
     audioMuteDetection() {
-        const audioLevelMedian = this.getAudioLevelMedian();
-        if (audioLevelMedian === 0 && this.audioLevels.length > 0) this.listener?.onMuteDetection?.(this.id);
+        const audioLevelAverage = this.getRecentAudioLevelAverage();
+        if (audioLevelAverage === 0 && this.audioLevels.length > 0) this.listener?.onMuteDetection?.(this.id);
     }
     detectSpeakingChange(audioLevel) {
         const threshold = 5;
@@ -588,24 +587,24 @@ class $67e45b2e30dcc030$export$ea669869acd8f177 {
     }
     loopCalcul() {
         const audioLevel = this.getInstantAudioLevel();
-        this.audioLevels = this.audioLevels.splice(-59);
-        this.detectSpeakingChange(audioLevel);
+        this.audioLevels.shift();
         this.audioLevels.push(audioLevel);
+        this.detectSpeakingChange(audioLevel);
         this.listener?.onAudioLevel?.(audioLevel, this.id);
     }
     analyse() {
-        this.audioLevelInterval = window.setInterval(()=>this.loopCalcul(), 1000 / 60);
-        this.audioMedianInterval = window.setInterval(()=>this.audioMuteDetection(), $67e45b2e30dcc030$var$AUDIO_MUTE_DETECTION_TIME);
+        this.audioIntervals.level = setInterval(()=>this.loopCalcul(), 1000 / $67e45b2e30dcc030$var$AUDIO_DATA_RATE);
+        this.audioIntervals.muteDetection = setInterval(()=>this.audioMuteDetection(), $67e45b2e30dcc030$var$AUDIO_MUTE_DETECTION_TIME);
     }
     startAverageAnalysis() {
         this.audioLevelAverage = {
             count: 0,
             average: 0
         };
-        clearInterval(this.audioLevelAverageInterval);
-        this.audioLevelAverageInterval = window.setInterval(()=>{
+        clearInterval(this.audioIntervals.levelAverage);
+        this.audioIntervals.levelAverage = setInterval(()=>{
             const { count: count, average: average } = this.audioLevelAverage;
-            const nextAverage = (average * count + this.getAudioLevelMedian()) / (count + 1);
+            const nextAverage = (average * count + this.getRecentAudioLevelAverage()) / (count + 1);
             this.audioLevelAverage = {
                 count: count + 1,
                 average: nextAverage
@@ -613,7 +612,8 @@ class $67e45b2e30dcc030$export$ea669869acd8f177 {
         }, 1000);
     }
     stopAverageAnalysis() {
-        clearInterval(this.audioLevelAverageInterval);
+        clearInterval(this.audioIntervals.levelAverage);
+        delete this.audioIntervals.levelAverage;
         return this.audioLevelAverage.average;
     }
     getFrequencyData() {
@@ -621,14 +621,18 @@ class $67e45b2e30dcc030$export$ea669869acd8f177 {
         this.analyser.getByteFrequencyData(FFTDataArray);
         return FFTDataArray;
     }
-    clearListeners() {
-        clearInterval(this.audioLevelInterval);
-        clearInterval(this.audioMedianInterval);
-        this.audioLevels = [];
+    clearIntervals() {
+        clearInterval(this.audioIntervals.level);
+        clearInterval(this.audioIntervals.levelAverage);
+        clearInterval(this.audioIntervals.muteDetection);
+        delete this.audioIntervals.level;
+        delete this.audioIntervals.levelAverage;
+        delete this.audioIntervals.muteDetection;
+        this.audioLevels.fill(0);
     }
     release() {
         this.listener = undefined;
-        this.clearListeners();
+        this.clearIntervals();
         this.stream = undefined;
         try {
             this.audioStreamSource.disconnect(this.analyser);
@@ -982,8 +986,14 @@ class $ab40fd7a219a4259$export$2e2bcd8739ae039 {
         let needToAskVideo = Boolean(constraints.video && (!this.video.stream || !this.video.track || this.video.track.readyState === 'ended'));
         const audioDeviceId = $ab40fd7a219a4259$export$fceddabcb6d8e584(constraints.audio);
         const videoDeviceId = $ab40fd7a219a4259$export$fceddabcb6d8e584(constraints.video);
-        if (audioDeviceId && audioDeviceId !== this.audio.track?.getSettings().deviceId) needToAskAudio = true;
-        if (videoDeviceId && videoDeviceId !== this.video.track?.getSettings().deviceId) needToAskVideo = true;
+        const oldAudioDeviceId = this.audio.track?.getSettings().deviceId;
+        const oldVideoDeviceId = this.video.track?.getSettings().deviceId;
+        /*
+      If deviceId is 'default', we cant differentiate if it's the same device or not. https://issues.chromium.org/issues/40199570#comment23
+      A possible solution would be to compare the label of the track. There is no guarantee that it will be unique or match the deviceId.
+      ex track label: Default - Microphone (USB Audio Device) (046d:0992)
+    */ if (audioDeviceId && (audioDeviceId === 'default' || audioDeviceId !== oldAudioDeviceId)) needToAskAudio = true;
+        if (videoDeviceId && (videoDeviceId === 'default' || videoDeviceId !== oldVideoDeviceId)) needToAskVideo = true;
         if (typeof constraints.video === 'object' && constraints.video.facingMode && constraints.video.facingMode !== this.video.track?.getSettings().facingMode) needToAskVideo = true;
         return {
             needToAskAudio: needToAskAudio,
@@ -1880,7 +1890,7 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
     }
     async getTransport(kind, direction) {
         if (!this.streamerMediasoup || !this.protoo) throw new Error('streamerMediasoup not initialized');
-        let transport = this.mediasoupTransport[`${kind}-${direction}`];
+        let transport = this.mediasoupTransport[direction];
         if (!transport) {
             try {
                 const promise = this.streamerMediasoup.createTransport(this.protoo, direction);
@@ -1889,7 +1899,7 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
                     kind: kind,
                     createPromise: promise
                 };
-                this.mediasoupTransport[`${kind}-${direction}`] = transport;
+                this.mediasoupTransport[direction] = transport;
                 transport.transport = await promise;
                 if (transport.transport) this.listenWebRTCTransportStates(transport);
             } catch (err) {
@@ -2072,6 +2082,7 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
             await this.micProducer?.replaceTrack({
                 track: track
             });
+            if (this.micProducer?.paused) track.enabled = false;
             $c31e3fb4360572af$var$log.log('switchMicrophone', 'switched Microphone');
             const trackSettings = track.getSettings();
             const device = this.devicesList.find((it)=>it.deviceId === trackSettings.deviceId);
@@ -2497,7 +2508,6 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
             this.webcam.facingMode = config.facingMode;
         } else {
             if (config?.device) this.webcam.device = config.device;
-            $c31e3fb4360572af$var$log.warn('enableVideo', 'default deviceId', this.webcam.device?.deviceId);
             optionalParam.deviceId = {
                 ideal: this.webcam.device?.deviceId
             };
@@ -2622,6 +2632,7 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
             audio: false,
             video: true
         });
+        this.webcam.device = null;
         this.webcamProducer = null;
         this.webcamTrack = null;
         if (this.useVideoBackground) {
@@ -3980,6 +3991,7 @@ class $e96d119a19ed0c6c$export$45fabd1ce5e673de {
         this.video.addEventListener('enterpictureinpicture', this.onEnterPictureInPicture.bind(this));
         this.video.addEventListener('leavepictureinpicture', this.onLeavePictureInPicture.bind(this));
         this.tiles = [];
+        this.missingVideoWarnings = {};
     }
     async start() {
         if (this.tiles.length) {
@@ -4010,6 +4022,12 @@ class $e96d119a19ed0c6c$export$45fabd1ce5e673de {
         this.started = false;
         this.video.srcObject = null;
     }
+    warnMissingVideo(tileId) {
+        if (!this.missingVideoWarnings[tileId]) {
+            this.missingVideoWarnings[tileId] = '1';
+            console.warn(`MultiPiP: No video found for peer ${tileId}`);
+        }
+    }
     draw() {
         if (this.ctx && this.started) {
             this.ctx.fillStyle = '#1f1f1f';
@@ -4017,7 +4035,10 @@ class $e96d119a19ed0c6c$export$45fabd1ce5e673de {
             if (this.tiles.length) {
                 this.tiles.forEach((tile, index)=>{
                     const tileVideo = document.body.querySelectorAll(`[data-peer-id='${tile.id}'] video`)[0];
-                    if (!tileVideo) return console.warn(`MultiPiP: No video found for peer ${tile.id}`);
+                    if (!tileVideo) {
+                        this.warnMissingVideo(tile.id);
+                        return;
+                    }
                     const tileRect = this.layout?.tileRects[index];
                     if (!tileRect) return;
                     this.ctx?.save();
@@ -6352,6 +6373,12 @@ const $580bffc02c115932$export$12201ede76c4c5e1 = ()=>{
                 const base64Image = await (0, $c9e496369b59be7a$export$2f377c2162fd02b2).captureVideo(videoElementRef.current);
                 try {
                     const uploaded = await (0, $c9e496369b59be7a$export$2f377c2162fd02b2).saveCapture(base64Image);
+                    await (0, $c9e496369b59be7a$export$2f377c2162fd02b2).createEvents([
+                        {
+                            filename: uploaded.filename,
+                            type: 'image'
+                        }
+                    ]);
                     await (0, $c9e496369b59be7a$export$2f377c2162fd02b2).sendCustomMessageToAll({
                         type: 'snapshot',
                         imageSrc: uploaded.url
@@ -7125,6 +7152,7 @@ const $0707965973625e01$export$f36e83cafa401ab5 = ({ stream: stream, width: widt
         onSnapshot: ()=>snapshot.trigger({
                 videoElementRef: videoElementRef
             }),
+        "data-peer-id": stream.id,
         children: [
             /*#__PURE__*/ (0, $3Sbms$jsx)((0, $7ec04c1818c68245$export$d574f5511ec1d79a), {
                 ref: videoElementRef,
@@ -12113,14 +12141,14 @@ const $64dee502cbd6331e$export$1ea93f9eface5983 = ({ duration: duration = 0, ave
             duotone: true
         })
     });
-    if (averageAudioLevel <= 5) return /*#__PURE__*/ (0, $3Sbms$jsx)($64dee502cbd6331e$var$Notification, {
+    if (averageAudioLevel <= 1) return /*#__PURE__*/ (0, $3Sbms$jsx)($64dee502cbd6331e$var$Notification, {
         title: t('recorder.audioLevelNotification.spokenWordsWarning.title'),
         description: t('recorder.audioLevelNotification.spokenWordsWarning.description'),
         icon: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$AlertTriangleIcon), {
             duotone: true
         })
     });
-    if (averageAudioLevel <= 25) return /*#__PURE__*/ (0, $3Sbms$jsx)($64dee502cbd6331e$var$Notification, {
+    if (averageAudioLevel <= 3) return /*#__PURE__*/ (0, $3Sbms$jsx)($64dee502cbd6331e$var$Notification, {
         title: t('recorder.audioLevelNotification.spokenWordsQuestion.title'),
         description: t('recorder.audioLevelNotification.spokenWordsQuestion.description'),
         icon: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$InfoCircleIcon), {
@@ -12261,7 +12289,7 @@ const $a5dd8f67439dd9eb$var$getStoredAssets = async ()=>{
         const storedAssets = JSON.parse(localStorage.getItem('snapcall_assets') || '[]');
         const assets = await Promise.all(storedAssets.map(async (storedAsset)=>{
             try {
-                let { url: url, thumbnailUrl: thumbnailUrl } = await (0, $c9e496369b59be7a$export$2f377c2162fd02b2).readAsset(storedAsset.filename);
+                let { url: url, thumbnailUrl: thumbnailUrl, error: error } = await (0, $c9e496369b59be7a$export$2f377c2162fd02b2).readAsset(storedAsset.filename);
                 if (url) {
                     if (storedAsset.mode === 'photo') thumbnailUrl = url;
                     return {
@@ -12269,7 +12297,7 @@ const $a5dd8f67439dd9eb$var$getStoredAssets = async ()=>{
                         url: url,
                         thumbnailUrl: thumbnailUrl
                     };
-                }
+                } else if (error) $a5dd8f67439dd9eb$export$df987b50509121ea(storedAsset.filename);
             } catch (error) {
                 $a5dd8f67439dd9eb$export$df987b50509121ea(storedAsset.filename);
             }
@@ -12315,6 +12343,31 @@ const $a5dd8f67439dd9eb$export$931d641a2a152cf = ()=>{
 
 
 
+
+
+const $7c2ec1087f88cbe4$export$f2bc44ad94513462 = ()=>{
+    const { clientInitResult: clientInitResult } = (0, $3Sbms$useContext)((0, $5f30d8bf4f04621e$export$2e2bcd8739ae039));
+    const flowSource = clientInitResult.flow?.steps?.[0].config?.source;
+    const onRecorderEnd = ()=>{
+        if (flowSource === 'smooch') // @ts-ignore
+        window.WebviewSdk?.close?.();
+        else if (flowSource === 'whatsapp') window.location.href = 'https://wa.me';
+    };
+    (0, $3Sbms$useEffect)(()=>{
+        if (flowSource === 'smooch') {
+            const smoochScript = document.createElement('script');
+            smoochScript.src = 'https://cdn.smooch.io/webview-sdk.min.js';
+            if (!document.body.contains(smoochScript)) document.body.appendChild(smoochScript);
+        }
+    }, [
+        flowSource
+    ]);
+    return {
+        onRecorderEnd: onRecorderEnd
+    };
+};
+
+
 const $3ecacdd28d707ec1$var$eventTypes = {
     screen: 'screenshare',
     photo: 'image',
@@ -12324,6 +12377,7 @@ const $3ecacdd28d707ec1$var$eventTypes = {
 const $3ecacdd28d707ec1$export$c01bb29adf88f117 = ({ state: state })=>{
     const { t: t } = (0, $3Sbms$useTranslation)();
     const { assets: assets, incomingAsset: incomingAsset } = (0, $75812785bb101fee$export$2174f25d572f9f31)();
+    const flowSourceAction = (0, $7c2ec1087f88cbe4$export$f2bc44ad94513462)();
     const sendMutation = (0, $3Sbms$useMutation)({
         mutationFn: async ()=>{
             try {
@@ -12348,7 +12402,6 @@ const $3ecacdd28d707ec1$export$c01bb29adf88f117 = ({ state: state })=>{
                     });
                     throw new Error('some media not saved');
                 }
-                (0, $c9e496369b59be7a$export$2f377c2162fd02b2).release();
                 return results;
             } catch (error) {
                 reportError({
@@ -12358,6 +12411,10 @@ const $3ecacdd28d707ec1$export$c01bb29adf88f117 = ({ state: state })=>{
                 console.log(error);
                 throw error;
             }
+        },
+        onSuccess: ()=>{
+            (0, $c9e496369b59be7a$export$2f377c2162fd02b2).release();
+            flowSourceAction.onRecorderEnd();
         }
     });
     const reportError = (0, $946223bbb2c552ef$export$5a5695b638d078e7)();

package/dist/stream-ui.js

@@ -509,19 +509,17 @@ const $6a90fae7e584afd4$var$audioContextConstructor = window.AudioContext || win
 const $6a90fae7e584afd4$var$AUDIO_MUTE_DETECTION_TIME = 2000;
 const $6a90fae7e584afd4$var$START_SPEAK_DETECTION_TIME = 50;
 const $6a90fae7e584afd4$var$STOP_SPEAK_DETECTION_TIME = 500;
+const $6a90fae7e584afd4$var$AUDIO_DATA_RATE = 60;
 class $6a90fae7e584afd4$export$ea669869acd8f177 {
     constructor(stream, listener){
         this.speakStartEventTime = 0;
         this.speakStopEventTime = 0;
         this.isSpeaking = false;
-        this.audioMedianInterval = -1;
-        this.audioLevelInterval = -1;
-        this.audioLevelAverageInterval = -1;
+        this.audioIntervals = {};
         this.audioLevelAverage = {
             count: 0,
             average: 0
         };
-        this.audioLevels = [];
         this.id = stream.id;
         this.listener = listener;
         this.stream = stream;
@@ -538,15 +536,16 @@ class $6a90fae7e584afd4$export$ea669869acd8f177 {
         this.analyser.minDecibels = -90;
         this.analyser.maxDecibels = -10;
         this.audioStreamSource.connect(this.analyser);
+        this.audioLevels = new Array(Math.round(1000 / $6a90fae7e584afd4$var$AUDIO_DATA_RATE)).fill(0);
     }
     /**
-   * return the median of the audio levels (60 per second) for the
+   * return the average (mean) of the audio levels (AUDIO_DATA_RATE per second) for the
    * current second
-   */ getAudioLevelMedian() {
+   */ getRecentAudioLevelAverage() {
         const { length: length } = this.audioLevels;
         const audioLevelsSum = this.audioLevels.reduce((sum, level)=>sum + level, 0);
-        const audioLevelMedian = audioLevelsSum / length;
-        return audioLevelMedian;
+        const audioLevelAverage = audioLevelsSum / length;
+        return audioLevelAverage;
     }
     getCurrentAudioLevel() {
         const { length: length } = this.audioLevels;
@@ -554,8 +553,8 @@ class $6a90fae7e584afd4$export$ea669869acd8f177 {
         return 0;
     }
     audioMuteDetection() {
-        const audioLevelMedian = this.getAudioLevelMedian();
-        if (audioLevelMedian === 0 && this.audioLevels.length > 0) this.listener?.onMuteDetection?.(this.id);
+        const audioLevelAverage = this.getRecentAudioLevelAverage();
+        if (audioLevelAverage === 0 && this.audioLevels.length > 0) this.listener?.onMuteDetection?.(this.id);
     }
     detectSpeakingChange(audioLevel) {
         const threshold = 5;
@@ -594,24 +593,24 @@ class $6a90fae7e584afd4$export$ea669869acd8f177 {
     }
     loopCalcul() {
         const audioLevel = this.getInstantAudioLevel();
-        this.audioLevels = this.audioLevels.splice(-59);
-        this.detectSpeakingChange(audioLevel);
+        this.audioLevels.shift();
         this.audioLevels.push(audioLevel);
+        this.detectSpeakingChange(audioLevel);
         this.listener?.onAudioLevel?.(audioLevel, this.id);
     }
     analyse() {
-        this.audioLevelInterval = window.setInterval(()=>this.loopCalcul(), 1000 / 60);
-        this.audioMedianInterval = window.setInterval(()=>this.audioMuteDetection(), $6a90fae7e584afd4$var$AUDIO_MUTE_DETECTION_TIME);
+        this.audioIntervals.level = setInterval(()=>this.loopCalcul(), 1000 / $6a90fae7e584afd4$var$AUDIO_DATA_RATE);
+        this.audioIntervals.muteDetection = setInterval(()=>this.audioMuteDetection(), $6a90fae7e584afd4$var$AUDIO_MUTE_DETECTION_TIME);
     }
     startAverageAnalysis() {
         this.audioLevelAverage = {
             count: 0,
             average: 0
         };
-        clearInterval(this.audioLevelAverageInterval);
-        this.audioLevelAverageInterval = window.setInterval(()=>{
+        clearInterval(this.audioIntervals.levelAverage);
+        this.audioIntervals.levelAverage = setInterval(()=>{
             const { count: count, average: average } = this.audioLevelAverage;
-            const nextAverage = (average * count + this.getAudioLevelMedian()) / (count + 1);
+            const nextAverage = (average * count + this.getRecentAudioLevelAverage()) / (count + 1);
             this.audioLevelAverage = {
                 count: count + 1,
                 average: nextAverage
@@ -619,7 +618,8 @@ class $6a90fae7e584afd4$export$ea669869acd8f177 {
         }, 1000);
     }
     stopAverageAnalysis() {
-        clearInterval(this.audioLevelAverageInterval);
+        clearInterval(this.audioIntervals.levelAverage);
+        delete this.audioIntervals.levelAverage;
         return this.audioLevelAverage.average;
     }
     getFrequencyData() {
@@ -627,14 +627,18 @@ class $6a90fae7e584afd4$export$ea669869acd8f177 {
         this.analyser.getByteFrequencyData(FFTDataArray);
         return FFTDataArray;
     }
-    clearListeners() {
-        clearInterval(this.audioLevelInterval);
-        clearInterval(this.audioMedianInterval);
-        this.audioLevels = [];
+    clearIntervals() {
+        clearInterval(this.audioIntervals.level);
+        clearInterval(this.audioIntervals.levelAverage);
+        clearInterval(this.audioIntervals.muteDetection);
+        delete this.audioIntervals.level;
+        delete this.audioIntervals.levelAverage;
+        delete this.audioIntervals.muteDetection;
+        this.audioLevels.fill(0);
     }
     release() {
         this.listener = undefined;
-        this.clearListeners();
+        this.clearIntervals();
         this.stream = undefined;
         try {
             this.audioStreamSource.disconnect(this.analyser);
@@ -988,8 +992,14 @@ class $d582bbc5717818b4$export$2e2bcd8739ae039 {
         let needToAskVideo = Boolean(constraints.video && (!this.video.stream || !this.video.track || this.video.track.readyState === 'ended'));
         const audioDeviceId = $d582bbc5717818b4$export$fceddabcb6d8e584(constraints.audio);
         const videoDeviceId = $d582bbc5717818b4$export$fceddabcb6d8e584(constraints.video);
-        if (audioDeviceId && audioDeviceId !== this.audio.track?.getSettings().deviceId) needToAskAudio = true;
-        if (videoDeviceId && videoDeviceId !== this.video.track?.getSettings().deviceId) needToAskVideo = true;
+        const oldAudioDeviceId = this.audio.track?.getSettings().deviceId;
+        const oldVideoDeviceId = this.video.track?.getSettings().deviceId;
+        /*
+      If deviceId is 'default', we cant differentiate if it's the same device or not. https://issues.chromium.org/issues/40199570#comment23
+      A possible solution would be to compare the label of the track. There is no guarantee that it will be unique or match the deviceId.
+      ex track label: Default - Microphone (USB Audio Device) (046d:0992)
+    */ if (audioDeviceId && (audioDeviceId === 'default' || audioDeviceId !== oldAudioDeviceId)) needToAskAudio = true;
+        if (videoDeviceId && (videoDeviceId === 'default' || videoDeviceId !== oldVideoDeviceId)) needToAskVideo = true;
         if (typeof constraints.video === 'object' && constraints.video.facingMode && constraints.video.facingMode !== this.video.track?.getSettings().facingMode) needToAskVideo = true;
         return {
             needToAskAudio: needToAskAudio,
@@ -1886,7 +1896,7 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
     }
     async getTransport(kind, direction) {
         if (!this.streamerMediasoup || !this.protoo) throw new Error('streamerMediasoup not initialized');
-        let transport = this.mediasoupTransport[`${kind}-${direction}`];
+        let transport = this.mediasoupTransport[direction];
         if (!transport) {
             try {
                 const promise = this.streamerMediasoup.createTransport(this.protoo, direction);
@@ -1895,7 +1905,7 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
                     kind: kind,
                     createPromise: promise
                 };
-                this.mediasoupTransport[`${kind}-${direction}`] = transport;
+                this.mediasoupTransport[direction] = transport;
                 transport.transport = await promise;
                 if (transport.transport) this.listenWebRTCTransportStates(transport);
             } catch (err) {
@@ -2078,6 +2088,7 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
             await this.micProducer?.replaceTrack({
                 track: track
             });
+            if (this.micProducer?.paused) track.enabled = false;
             $1dedebd5ff3002eb$var$log.log('switchMicrophone', 'switched Microphone');
             const trackSettings = track.getSettings();
             const device = this.devicesList.find((it)=>it.deviceId === trackSettings.deviceId);
@@ -2503,7 +2514,6 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
             this.webcam.facingMode = config.facingMode;
         } else {
             if (config?.device) this.webcam.device = config.device;
-            $1dedebd5ff3002eb$var$log.warn('enableVideo', 'default deviceId', this.webcam.device?.deviceId);
             optionalParam.deviceId = {
                 ideal: this.webcam.device?.deviceId
             };
@@ -2628,6 +2638,7 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
             audio: false,
             video: true
         });
+        this.webcam.device = null;
         this.webcamProducer = null;
         this.webcamTrack = null;
         if (this.useVideoBackground) {
@@ -3986,6 +3997,7 @@ class $21395e477f83709c$export$45fabd1ce5e673de {
         this.video.addEventListener('enterpictureinpicture', this.onEnterPictureInPicture.bind(this));
         this.video.addEventListener('leavepictureinpicture', this.onLeavePictureInPicture.bind(this));
         this.tiles = [];
+        this.missingVideoWarnings = {};
     }
     async start() {
         if (this.tiles.length) {
@@ -4016,6 +4028,12 @@ class $21395e477f83709c$export$45fabd1ce5e673de {
         this.started = false;
         this.video.srcObject = null;
     }
+    warnMissingVideo(tileId) {
+        if (!this.missingVideoWarnings[tileId]) {
+            this.missingVideoWarnings[tileId] = '1';
+            console.warn(`MultiPiP: No video found for peer ${tileId}`);
+        }
+    }
     draw() {
         if (this.ctx && this.started) {
             this.ctx.fillStyle = '#1f1f1f';
@@ -4023,7 +4041,10 @@ class $21395e477f83709c$export$45fabd1ce5e673de {
             if (this.tiles.length) {
                 this.tiles.forEach((tile, index)=>{
                     const tileVideo = document.body.querySelectorAll(`[data-peer-id='${tile.id}'] video`)[0];
-                    if (!tileVideo) return console.warn(`MultiPiP: No video found for peer ${tile.id}`);
+                    if (!tileVideo) {
+                        this.warnMissingVideo(tile.id);
+                        return;
+                    }
                     const tileRect = this.layout?.tileRects[index];
                     if (!tileRect) return;
                     this.ctx?.save();
@@ -6358,6 +6379,12 @@ const $b7b8f2e5b7552341$export$12201ede76c4c5e1 = ()=>{
                 const base64Image = await (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).captureVideo(videoElementRef.current);
                 try {
                     const uploaded = await (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).saveCapture(base64Image);
+                    await (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).createEvents([
+                        {
+                            filename: uploaded.filename,
+                            type: 'image'
+                        }
+                    ]);
                     await (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).sendCustomMessageToAll({
                         type: 'snapshot',
                         imageSrc: uploaded.url
@@ -7131,6 +7158,7 @@ const $75b49da54f729405$export$f36e83cafa401ab5 = ({ stream: stream, width: widt
         onSnapshot: ()=>snapshot.trigger({
                 videoElementRef: videoElementRef
             }),
+        "data-peer-id": stream.id,
         children: [
             /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $66c45b20958474ec$export$d574f5511ec1d79a), {
                 ref: videoElementRef,
@@ -12119,14 +12147,14 @@ const $c42fbc742adf8306$export$1ea93f9eface5983 = ({ duration: duration = 0, ave
             duotone: true
         })
     });
-    if (averageAudioLevel <= 5) return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($c42fbc742adf8306$var$Notification, {
+    if (averageAudioLevel <= 1) return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($c42fbc742adf8306$var$Notification, {
         title: t('recorder.audioLevelNotification.spokenWordsWarning.title'),
         description: t('recorder.audioLevelNotification.spokenWordsWarning.description'),
         icon: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystemicons.AlertTriangleIcon), {
             duotone: true
         })
     });
-    if (averageAudioLevel <= 25) return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($c42fbc742adf8306$var$Notification, {
+    if (averageAudioLevel <= 3) return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($c42fbc742adf8306$var$Notification, {
         title: t('recorder.audioLevelNotification.spokenWordsQuestion.title'),
         description: t('recorder.audioLevelNotification.spokenWordsQuestion.description'),
         icon: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystemicons.InfoCircleIcon), {
@@ -12267,7 +12295,7 @@ const $8a7a24ac08dbc187$var$getStoredAssets = async ()=>{
         const storedAssets = JSON.parse(localStorage.getItem('snapcall_assets') || '[]');
         const assets = await Promise.all(storedAssets.map(async (storedAsset)=>{
             try {
-                let { url: url, thumbnailUrl: thumbnailUrl } = await (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).readAsset(storedAsset.filename);
+                let { url: url, thumbnailUrl: thumbnailUrl, error: error } = await (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).readAsset(storedAsset.filename);
                 if (url) {
                     if (storedAsset.mode === 'photo') thumbnailUrl = url;
                     return {
@@ -12275,7 +12303,7 @@ const $8a7a24ac08dbc187$var$getStoredAssets = async ()=>{
                         url: url,
                         thumbnailUrl: thumbnailUrl
                     };
-                }
+                } else if (error) $8a7a24ac08dbc187$export$df987b50509121ea(storedAsset.filename);
             } catch (error) {
                 $8a7a24ac08dbc187$export$df987b50509121ea(storedAsset.filename);
             }
@@ -12321,6 +12349,31 @@ const $8a7a24ac08dbc187$export$931d641a2a152cf = ()=>{
 
 
 
+
+
+const $663f53e6b55f0d5a$export$f2bc44ad94513462 = ()=>{
+    const { clientInitResult: clientInitResult } = (0, $jQDcL$react.useContext)((0, $8b39f32976a7698a$export$2e2bcd8739ae039));
+    const flowSource = clientInitResult.flow?.steps?.[0].config?.source;
+    const onRecorderEnd = ()=>{
+        if (flowSource === 'smooch') // @ts-ignore
+        window.WebviewSdk?.close?.();
+        else if (flowSource === 'whatsapp') window.location.href = 'https://wa.me';
+    };
+    (0, $jQDcL$react.useEffect)(()=>{
+        if (flowSource === 'smooch') {
+            const smoochScript = document.createElement('script');
+            smoochScript.src = 'https://cdn.smooch.io/webview-sdk.min.js';
+            if (!document.body.contains(smoochScript)) document.body.appendChild(smoochScript);
+        }
+    }, [
+        flowSource
+    ]);
+    return {
+        onRecorderEnd: onRecorderEnd
+    };
+};
+
+
 const $e399416dd32d3252$var$eventTypes = {
     screen: 'screenshare',
     photo: 'image',
@@ -12330,6 +12383,7 @@ const $e399416dd32d3252$var$eventTypes = {
 const $e399416dd32d3252$export$c01bb29adf88f117 = ({ state: state })=>{
     const { t: t } = (0, $jQDcL$reacti18next.useTranslation)();
     const { assets: assets, incomingAsset: incomingAsset } = (0, $098350f721a0bb52$export$2174f25d572f9f31)();
+    const flowSourceAction = (0, $663f53e6b55f0d5a$export$f2bc44ad94513462)();
     const sendMutation = (0, $jQDcL$tanstackreactquery.useMutation)({
         mutationFn: async ()=>{
             try {
@@ -12354,7 +12408,6 @@ const $e399416dd32d3252$export$c01bb29adf88f117 = ({ state: state })=>{
                     });
                     throw new Error('some media not saved');
                 }
-                (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).release();
                 return results;
             } catch (error) {
                 reportError({
@@ -12364,6 +12417,10 @@ const $e399416dd32d3252$export$c01bb29adf88f117 = ({ state: state })=>{
                 console.log(error);
                 throw error;
             }
+        },
+        onSuccess: ()=>{
+            (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).release();
+            flowSourceAction.onRecorderEnd();
         }
     });
     const reportError = (0, $8dfcca373a03b9e8$export$5a5695b638d078e7)();

package/dist/types.d.ts

@@ -18,6 +18,7 @@ interface Step {
     config?: {
         description: string;
         image_url: string;
+        source?: string;
     };
     translation: {
         title?: string;
@@ -192,16 +193,16 @@ declare class AudioLevel {
     readonly id: string;
     constructor(stream: MediaStream, listener?: AudioLevelListener);
     /**
-     * return the median of the audio levels (60 per second) for the
+     * return the average (mean) of the audio levels (AUDIO_DATA_RATE per second) for the
      * current second
      */
-    getAudioLevelMedian(): number;
+    getRecentAudioLevelAverage(): number;
     getCurrentAudioLevel(): number;
     analyse(): void;
     startAverageAnalysis(): void;
     stopAverageAnalysis(): number;
     getFrequencyData(): Uint8Array;
-    clearListeners(): void;
+    clearIntervals(): void;
     release(): void;
     static isAPIAvailable(): boolean;
 }
@@ -599,6 +600,7 @@ declare class StreamerClient extends StreamerEventTargetType implements AudioLev
     readAsset(file: string): Promise<{
         url: string;
         thumbnailUrl?: string;
+        error?: string;
     }>;
     deleteAsset(file: string): Promise<{
         status: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@snapcall/stream-ui",
-  "version": "1.28.0",
+  "version": "1.29.0",
   "description": "",
   "source": "src/index.tsx",
   "main": "dist/stream-ui.js",