@snapcall/stream-ui 1.28.1 → 1.29.1

package/dist/stream-ui.esm.js

@@ -5,6 +5,7 @@ import {QueryClient as $3Sbms$QueryClient, QueryClientProvider as $3Sbms$QueryCl
 import $3Sbms$reacthottoast, {toast as $3Sbms$toast, Toaster as $3Sbms$Toaster1, ToastBar as $3Sbms$ToastBar} from "react-hot-toast";
 import $3Sbms$styledcomponents, {keyframes as $3Sbms$keyframes, ThemeProvider as $3Sbms$ThemeProvider, ThemeContext as $3Sbms$ThemeContext, css as $3Sbms$css, createGlobalStyle as $3Sbms$createGlobalStyle} from "styled-components";
 import {useState as $3Sbms$useState, useRef as $3Sbms$useRef, useCallback as $3Sbms$useCallback, useEffect as $3Sbms$useEffect, useContext as $3Sbms$useContext, useMemo as $3Sbms$useMemo, createContext as $3Sbms$createContext, useReducer as $3Sbms$useReducer, useLayoutEffect as $3Sbms$useLayoutEffect, cloneElement as $3Sbms$cloneElement, forwardRef as $3Sbms$forwardRef} from "react";
+import $3Sbms$classnames from "classnames";
 import {TooltipProvider as $3Sbms$TooltipProvider, Toaster as $3Sbms$Toaster, Select as $3Sbms$Select, SelectTrigger as $3Sbms$SelectTrigger, SelectValue as $3Sbms$SelectValue, SelectContent as $3Sbms$SelectContent, SelectGroup as $3Sbms$SelectGroup, SelectItem as $3Sbms$SelectItem, useToast as $3Sbms$useToast, Dialog as $3Sbms$Dialog, DialogContent as $3Sbms$DialogContent, DialogHeader as $3Sbms$DialogHeader, DialogTitle as $3Sbms$DialogTitle, Tabs as $3Sbms$Tabs, TabsList as $3Sbms$TabsList, TabsTrigger as $3Sbms$TabsTrigger, TabsContent as $3Sbms$TabsContent, Input as $3Sbms$Input, Button as $3Sbms$Button, CreatableSelect as $3Sbms$CreatableSelect, Textarea as $3Sbms$Textarea, ToastAction as $3Sbms$ToastAction, Avatar as $3Sbms$Avatar, Tooltip as $3Sbms$Tooltip, TooltipContent as $3Sbms$TooltipContent, TooltipTrigger as $3Sbms$TooltipTrigger, AlertDialog as $3Sbms$AlertDialog, AlertDialogContent as $3Sbms$AlertDialogContent, AlertDialogFooter as $3Sbms$AlertDialogFooter, AlertDialogCancel as $3Sbms$AlertDialogCancel, AlertDialogAction as $3Sbms$AlertDialogAction, RawToast as $3Sbms$RawToast, ToastContent as $3Sbms$ToastContent, Sheet as $3Sbms$Sheet, DialogTrigger as $3Sbms$DialogTrigger, SheetTrigger as $3Sbms$SheetTrigger, SheetHeader as $3Sbms$SheetHeader, SheetClose as $3Sbms$SheetClose, SheetContent as $3Sbms$SheetContent, SheetTitle as $3Sbms$SheetTitle, DialogDescription as $3Sbms$DialogDescription, SheetDescription as $3Sbms$SheetDescription, DialogFooter as $3Sbms$DialogFooter, AlertDialogHeader as $3Sbms$AlertDialogHeader, AlertDialogTitle as $3Sbms$AlertDialogTitle, AlertDialogDescription as $3Sbms$AlertDialogDescription} from "@snapcall/design-system";
 import "inobounce";
 import {useTranslation as $3Sbms$useTranslation, initReactI18next as $3Sbms$initReactI18next, Trans as $3Sbms$Trans} from "react-i18next";
@@ -22,7 +23,6 @@ import {Buffer as $3Sbms$Buffer} from "buffer";
 import {Form as $3Sbms$Form, FormField as $3Sbms$FormField, FormItem as $3Sbms$FormItem, FormLabel as $3Sbms$FormLabel, FormControl as $3Sbms$FormControl, FormMessage as $3Sbms$FormMessage} from "@snapcall/design-system/form";
 import {useForm as $3Sbms$useForm} from "react-hook-form";
 import {createPortal as $3Sbms$createPortal} from "react-dom";
-import $3Sbms$classnames from "classnames";
 import {toCanvas as $3Sbms$toCanvas, toDataURL as $3Sbms$toDataURL} from "qrcode";
 
 
@@ -344,6 +344,7 @@ const $35b37252690084e8$export$1cbfb36c1655a9a = (root, element)=>{
 
 
 
+
 const $a3e657fb86ae23f3$export$604ba5624273df44 = ()=>{
     try {
         const storedTheme = localStorage.getItem('stream_ui_language');
@@ -503,19 +504,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 +531,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 +548,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 +588,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 +613,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 +622,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 +987,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,
@@ -1315,7 +1326,7 @@ const $120418cdeb6706cf$export$de363e709c412c8a = (fn, wait = 300)=>{
 
 
 
-const $07e4bc01ab825269$export$6ad2c48011488f7 = async (apiUrl, { file: file, token: token })=>{
+const $07e4bc01ab825269$export$6ad2c48011488f7 = async (apiUrl, { file: file, token: token, type: type })=>{
     if (!file) throw new Error(`Missing file on "${file}"`);
     const upload = await fetch(`${apiUrl}/public/streams/${token}/events/upload`, {
         method: 'POST',
@@ -1324,7 +1335,8 @@ const $07e4bc01ab825269$export$6ad2c48011488f7 = async (apiUrl, { file: file, to
         },
         body: JSON.stringify({
             filename: file.name,
-            contentLength: file.size
+            contentLength: file.size,
+            type: type
         })
     });
     const { url: url, headers: headers, filename: filename } = await upload.json();
@@ -2072,6 +2084,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);
@@ -2621,6 +2634,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) {
@@ -2755,9 +2769,10 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
             base64Image: base64Image
         });
     }
-    async uploadAsset(file) {
+    async uploadAsset(file, type) {
         return (0, $07e4bc01ab825269$export$6ad2c48011488f7)(this.config.apiUrl, {
             token: this.roomId,
+            type: type,
             file: file
         });
     }
@@ -10937,14 +10952,6 @@ const $946223bbb2c552ef$export$5a5695b638d078e7 = ()=>{
 
 
 
-const $20431dc869bb21e0$var$fileToDataUrl = (file)=>{
-    return new Promise((resolve, reject)=>{
-        const reader = new FileReader();
-        reader.addEventListener('load', ()=>resolve(reader.result));
-        reader.addEventListener('error', ()=>reject(reader.error));
-        reader.readAsDataURL(file);
-    });
-};
 const $20431dc869bb21e0$var$generateVideoThumbnail = (file)=>{
     return new Promise((resolve)=>{
         const canvas = document.createElement('canvas');
@@ -10984,21 +10991,12 @@ const $20431dc869bb21e0$export$b3fd96a52c80b3af = ()=>{
             });
             openAssetsModal();
             try {
-                let url;
                 let thumbnailUrl;
-                let filename;
-                if (type === 'image') {
-                    const dataUrl = await $20431dc869bb21e0$var$fileToDataUrl(file);
-                    const data = await (0, $c9e496369b59be7a$export$2f377c2162fd02b2).saveCapture(dataUrl);
-                    url = data.url;
-                    filename = data.filename;
-                } else {
-                    const data = await (0, $c9e496369b59be7a$export$2f377c2162fd02b2).uploadAsset(file);
-                    url = data.url;
-                    filename = data.filename;
-                    if (type === 'video') thumbnailUrl = await $20431dc869bb21e0$var$generateVideoThumbnail(file);
-                    if (!url || !filename) throw new Error('upload failed');
-                }
+                const data = await (0, $c9e496369b59be7a$export$2f377c2162fd02b2).uploadAsset(file, type);
+                const url = data.url;
+                const filename = data.filename;
+                if (type === 'video') thumbnailUrl = await $20431dc869bb21e0$var$generateVideoThumbnail(file);
+                if (!url || !filename) throw new Error('upload failed');
                 addAsset({
                     filename: filename,
                     mode: mode,
@@ -12129,14 +12127,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), {
@@ -12277,7 +12275,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 {
@@ -12285,7 +12283,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);
             }
@@ -12331,6 +12329,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',
@@ -12340,6 +12363,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 {
@@ -12364,7 +12388,6 @@ const $3ecacdd28d707ec1$export$c01bb29adf88f117 = ({ state: state })=>{
                     });
                     throw new Error('some media not saved');
                 }
-                (0, $c9e496369b59be7a$export$2f377c2162fd02b2).release();
                 return results;
             } catch (error) {
                 reportError({
@@ -12374,6 +12397,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)();
@@ -14600,7 +14627,7 @@ const $26ed036cbc17809a$var$StreamUI = ({ options: baseOptions })=>{
                 /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$TooltipProvider), {
                     children: /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $4fb4815baa04b470$export$914ddf2021ea8ee6), {
                         ref: streamUIContainerRef,
-                        className: "dark-theme bg-white",
+                        className: (0, $3Sbms$classnames)('bg-white', streamState === 'greeting' ? 'light-theme' : 'dark-theme'),
                         children: [
                             /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3a42b2ef7646d035$export$2e2bcd8739ae039), {}),
                             /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$Toaster), {

package/dist/stream-ui.js

@@ -5,6 +5,7 @@ var $jQDcL$tanstackreactquery = require("@tanstack/react-query");
 var $jQDcL$reacthottoast = require("react-hot-toast");
 var $jQDcL$styledcomponents = require("styled-components");
 var $jQDcL$react = require("react");
+var $jQDcL$classnames = require("classnames");
 var $jQDcL$snapcalldesignsystem = require("@snapcall/design-system");
 require("inobounce");
 var $jQDcL$reacti18next = require("react-i18next");
@@ -22,7 +23,6 @@ var $jQDcL$buffer = require("buffer");
 var $jQDcL$snapcalldesignsystemform = require("@snapcall/design-system/form");
 var $jQDcL$reacthookform = require("react-hook-form");
 var $jQDcL$reactdom = require("react-dom");
-var $jQDcL$classnames = require("classnames");
 var $jQDcL$qrcode = require("qrcode");
 
 
@@ -350,6 +350,7 @@ const $57b7750d9786bf6f$export$1cbfb36c1655a9a = (root, element)=>{
 
 
 
+
 const $393bda1b33846dfc$export$604ba5624273df44 = ()=>{
     try {
         const storedTheme = localStorage.getItem('stream_ui_language');
@@ -509,19 +510,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 +537,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 +554,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 +594,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 +619,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 +628,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 +993,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,
@@ -1321,7 +1332,7 @@ const $3898fb88b880f5ba$export$de363e709c412c8a = (fn, wait = 300)=>{
 
 
 
-const $987c962fd22b0c93$export$6ad2c48011488f7 = async (apiUrl, { file: file, token: token })=>{
+const $987c962fd22b0c93$export$6ad2c48011488f7 = async (apiUrl, { file: file, token: token, type: type })=>{
     if (!file) throw new Error(`Missing file on "${file}"`);
     const upload = await fetch(`${apiUrl}/public/streams/${token}/events/upload`, {
         method: 'POST',
@@ -1330,7 +1341,8 @@ const $987c962fd22b0c93$export$6ad2c48011488f7 = async (apiUrl, { file: file, to
         },
         body: JSON.stringify({
             filename: file.name,
-            contentLength: file.size
+            contentLength: file.size,
+            type: type
         })
     });
     const { url: url, headers: headers, filename: filename } = await upload.json();
@@ -2078,6 +2090,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);
@@ -2627,6 +2640,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) {
@@ -2761,9 +2775,10 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
             base64Image: base64Image
         });
     }
-    async uploadAsset(file) {
+    async uploadAsset(file, type) {
         return (0, $987c962fd22b0c93$export$6ad2c48011488f7)(this.config.apiUrl, {
             token: this.roomId,
+            type: type,
             file: file
         });
     }
@@ -10943,14 +10958,6 @@ const $8dfcca373a03b9e8$export$5a5695b638d078e7 = ()=>{
 
 
 
-const $ccbd73eb953b0bd0$var$fileToDataUrl = (file)=>{
-    return new Promise((resolve, reject)=>{
-        const reader = new FileReader();
-        reader.addEventListener('load', ()=>resolve(reader.result));
-        reader.addEventListener('error', ()=>reject(reader.error));
-        reader.readAsDataURL(file);
-    });
-};
 const $ccbd73eb953b0bd0$var$generateVideoThumbnail = (file)=>{
     return new Promise((resolve)=>{
         const canvas = document.createElement('canvas');
@@ -10990,21 +10997,12 @@ const $ccbd73eb953b0bd0$export$b3fd96a52c80b3af = ()=>{
             });
             openAssetsModal();
             try {
-                let url;
                 let thumbnailUrl;
-                let filename;
-                if (type === 'image') {
-                    const dataUrl = await $ccbd73eb953b0bd0$var$fileToDataUrl(file);
-                    const data = await (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).saveCapture(dataUrl);
-                    url = data.url;
-                    filename = data.filename;
-                } else {
-                    const data = await (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).uploadAsset(file);
-                    url = data.url;
-                    filename = data.filename;
-                    if (type === 'video') thumbnailUrl = await $ccbd73eb953b0bd0$var$generateVideoThumbnail(file);
-                    if (!url || !filename) throw new Error('upload failed');
-                }
+                const data = await (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).uploadAsset(file, type);
+                const url = data.url;
+                const filename = data.filename;
+                if (type === 'video') thumbnailUrl = await $ccbd73eb953b0bd0$var$generateVideoThumbnail(file);
+                if (!url || !filename) throw new Error('upload failed');
                 addAsset({
                     filename: filename,
                     mode: mode,
@@ -12135,14 +12133,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), {
@@ -12283,7 +12281,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 {
@@ -12291,7 +12289,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);
             }
@@ -12337,6 +12335,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',
@@ -12346,6 +12369,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 {
@@ -12370,7 +12394,6 @@ const $e399416dd32d3252$export$c01bb29adf88f117 = ({ state: state })=>{
                     });
                     throw new Error('some media not saved');
                 }
-                (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).release();
                 return results;
             } catch (error) {
                 reportError({
@@ -12380,6 +12403,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)();
@@ -14606,7 +14633,7 @@ const $ee8cb448c2c74888$var$StreamUI = ({ options: baseOptions })=>{
                 /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.TooltipProvider), {
                     children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $e3bb2c5d0e5b45b5$export$914ddf2021ea8ee6), {
                         ref: streamUIContainerRef,
-                        className: "dark-theme bg-white",
+                        className: (0, ($parcel$interopDefault($jQDcL$classnames)))('bg-white', streamState === 'greeting' ? 'light-theme' : 'dark-theme'),
                         children: [
                             /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $e66cc5db58913155$export$2e2bcd8739ae039), {}),
                             /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.Toaster), {

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;
 }
@@ -540,7 +541,7 @@ declare class StreamerClient extends StreamerEventTargetType implements AudioLev
         url: string;
         filename: string;
     }>;
-    uploadAsset(file: any): Promise<{
+    uploadAsset(file: any, type: 'image' | 'video' | 'audio'): Promise<{
         url?: string;
         filename: string;
     }>;
@@ -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.1",
+  "version": "1.29.1",
   "description": "",
   "source": "src/index.tsx",
   "main": "dist/stream-ui.js",