@snapcall/stream-ui 1.25.0 → 1.26.0

package/dist/stream-ui.esm.js

@@ -1135,6 +1135,48 @@ const $120418cdeb6706cf$export$de363e709c412c8a = (fn, wait = 300)=>{
 };
 
 
+const $8042747316a8a88d$export$deda6dde1c58aa97 = async (apiUrl, { file: file, token: token, stepToken: stepToken, sessionId: sessionId, userId: userId, peerId: peerId })=>{
+    if (!file) throw new Error(`Missing file on "${file}"`);
+    const upload = await fetch(`${apiUrl}/public/streams/${token}/events/upload`, {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json"
+        },
+        body: JSON.stringify({
+            filename: file.name,
+            contentLength: file.size
+        })
+    });
+    const { url: url, headers: headers, filename: filename } = await upload.json();
+    const uploadResponse = await fetch(url, {
+        method: "PUT",
+        headers: {
+            ...headers,
+            "Content-Type": file.type,
+            "Content-Length": String(file.size)
+        },
+        body: file
+    });
+    if (!uploadResponse.ok) throw new Error("Upload failed");
+    const type = file.type.split("/")[0];
+    const eventRequest = await fetch(`${apiUrl}/public/streams/${token}/events`, {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json"
+        },
+        body: JSON.stringify({
+            filename: filename,
+            type: type,
+            stepToken: stepToken,
+            session_id: sessionId,
+            user_id: userId,
+            peer_id: peerId
+        })
+    });
+    return eventRequest.json();
+};
+
+
 const $c31e3fb4360572af$var$log = new (0, $0f65a9eaf4a1e910$export$2e2bcd8739ae039)("StreamerClient");
 const $c31e3fb4360572af$export$103bedf43ba882db = {
     WEBRTC_FAILED: "WRTC1",
@@ -1357,10 +1399,7 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
         }
     }
     async init(room = this.roomId, options = this.joinOptions) {
-        const initResult = {
-            flow: undefined,
-            flowV0: undefined
-        };
+        const initResult = {};
         this.roomId = room;
         this.peerId = (0, $3Sbms$v4)();
         this.joinOptions = options;
@@ -1370,7 +1409,7 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
             const urlParams = new URLSearchParams();
             if (options.flowToken) urlParams.append("flowToken", options.flowToken);
             if (options.languageCode) urlParams.append("languageCode", options.languageCode);
-            const { streamer_instance: instanceId, plan: { permissions: permissions, name: name }, flow: flow, flow_v0: flow_v0, recordings: recordings, company_id: company_id, company: company, defaultPublicPage: defaultPublicPage } = await fetch(`${this.config.apiUrl}/streams/${room}/info?${urlParams}`, {
+            const { streamer_instance: instanceId, plan: { permissions: permissions, name: name }, flow: flow, flow_v0: flow_v0, recordings: recordings, video_upload: video_upload, company_id: company_id, company: company, defaultPublicPage: defaultPublicPage } = await fetch(`${this.config.apiUrl}/streams/${room}/info?${urlParams}`, {
                 method: "get",
                 headers: {
                     "Content-Type": "application/json"
@@ -1379,6 +1418,7 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
                 if (response.ok) return response.json();
                 throw new Error("Invalid room ID");
             });
+            initResult.videoUpload = video_upload;
             if (flow_v0) initResult.flowV0 = flow_v0;
             if (flow && flow.steps.length > 0) {
                 options.recorder = true;
@@ -2478,6 +2518,15 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
             stepToken: this.stepToken
         });
     }
+    async uploadEvent(file) {
+        return (0, $8042747316a8a88d$export$deda6dde1c58aa97)(this.config.apiUrl, {
+            token: this.roomId,
+            file: file,
+            peerId: this.peerId,
+            userId: this.agentIdentity?.id,
+            stepToken: this.stepToken
+        });
+    }
     async deleteCapture(assetId) {
         const res = await this.protoo?.request("deleteCapture", {
             assetId: assetId
@@ -11183,6 +11232,7 @@ const $946223bbb2c552ef$export$5a5695b638d078e7 = ()=>{
 };
 
 
+
 const $20431dc869bb21e0$var$fileToDataUrl = (file)=>{
     return new Promise((resolve, reject)=>{
         const reader = new FileReader();
@@ -11191,7 +11241,26 @@ const $20431dc869bb21e0$var$fileToDataUrl = (file)=>{
         reader.readAsDataURL(file);
     });
 };
+const $20431dc869bb21e0$var$generateVideoThumbnail = (file)=>{
+    return new Promise((resolve)=>{
+        const canvas = document.createElement("canvas");
+        const video = document.createElement("video");
+        video.autoplay = true;
+        video.muted = true;
+        video.currentTime = 3;
+        video.src = URL.createObjectURL(file);
+        video.onloadeddata = ()=>{
+            let ctx = canvas.getContext("2d");
+            canvas.width = video.videoWidth;
+            canvas.height = video.videoHeight;
+            ctx?.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
+            video.pause();
+            return resolve(canvas.toDataURL("image/png"));
+        };
+    });
+};
 const $20431dc869bb21e0$export$b3fd96a52c80b3af = ()=>{
+    const { recorderOptions: recorderOptions, videoUpload: videoUpload } = (0, $3Sbms$useContext)((0, $5f30d8bf4f04621e$export$2e2bcd8739ae039));
     const { t: t } = (0, $3Sbms$useTranslation)();
     const { openAssetsModal: openAssetsModal, addAsset: addAsset, setIncomingAsset: setIncomingAsset, isRecording: isRecording } = (0, $75812785bb101fee$export$2174f25d572f9f31)();
     const reportError = (0, $946223bbb2c552ef$export$5a5695b638d078e7)();
@@ -11200,24 +11269,40 @@ const $20431dc869bb21e0$export$b3fd96a52c80b3af = ()=>{
     const onUploadClick = async (event)=>{
         const file = event.target.files?.[0];
         if (file && !isRecording) {
+            const type = file.type.split("/")[0];
             const createdAt = Date.now();
+            const mode = type === "image" ? "photo" : type;
             setIncomingAsset({
-                mode: "photo",
+                mode: mode,
                 createdAt: createdAt
             });
             openAssetsModal();
             try {
-                const dataUrl = await $20431dc869bb21e0$var$fileToDataUrl(file);
-                const { url: url, assetId: assetId } = await (0, $c9e496369b59be7a$export$2f377c2162fd02b2).saveCapture(dataUrl);
+                let url;
+                let thumbnailUrl;
+                let id;
+                if (type === "image") {
+                    const dataUrl = await $20431dc869bb21e0$var$fileToDataUrl(file);
+                    const data = await (0, $c9e496369b59be7a$export$2f377c2162fd02b2).saveCapture(dataUrl);
+                    url = data.url;
+                    id = data.assetId;
+                } else {
+                    const data = await (0, $c9e496369b59be7a$export$2f377c2162fd02b2).uploadEvent(file);
+                    url = data.url;
+                    id = data.id;
+                    if (type === "video") thumbnailUrl = await $20431dc869bb21e0$var$generateVideoThumbnail(file);
+                    if (!url || !id) throw new Error("upload failed");
+                }
                 addAsset({
-                    id: assetId,
-                    mode: "photo",
+                    id: id,
+                    mode: mode,
                     url: url,
-                    thumbnailUrl: url,
+                    thumbnailUrl: thumbnailUrl || url,
                     createdAt: createdAt
                 });
                 openAssetsModal();
             } catch (error) {
+                console.log(error);
                 reportError({
                     code: "UPLD_1",
                     error: error
@@ -11231,13 +11316,13 @@ const $20431dc869bb21e0$export$b3fd96a52c80b3af = ()=>{
             /*#__PURE__*/ (0, $3Sbms$jsx)("input", {
                 ref: fileInputRef,
                 type: "file",
-                accept: ".jpg,.JPG,.png,.PNG,.jpeg,.JPEG",
+                accept: videoUpload ? "image/*,video/*,audio/*" : "image/*",
                 className: "hidden",
                 onChange: onUploadClick
             }),
             /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $3Sbms$Button), {
                 className: (0, $3Sbms$classnames)("bg-gray-25/50 hover:bg-gray-25/60 active:bg-gray-25/70 rounded-full", {
-                    invisible: isRecording
+                    invisible: isRecording || !recorderOptions?.enabledModes.includes("photo") && !videoUpload
                 }),
                 icon: !isMedium,
                 onClick: ()=>fileInputRef.current?.click(),
@@ -14298,6 +14383,7 @@ const $26ed036cbc17809a$var$StreamUI = ({ options: options })=>{
     const [permissions, setPermissions] = (0, $3Sbms$useState)([]);
     const [plan, setPlan] = (0, $3Sbms$useState)(undefined);
     const [flows, setFlows] = (0, $3Sbms$useState)({});
+    const [videoUpload, setVideoUpload] = (0, $3Sbms$useState)(false);
     const [recorderOptions, setRecorderOptions] = (0, $3Sbms$useState)(options.recorder);
     const isFirstRender = (0, $648652ea36cc4fd9$export$5964c316e853650f)();
     const orientation = (containerWidth || window.screen.width) > (containerHeight || window.screen.height) ? "landscape" : "portrait";
@@ -14405,16 +14491,15 @@ const $26ed036cbc17809a$var$StreamUI = ({ options: options })=>{
         });
     };
     const onClientInitialized = (0, $3Sbms$useCallback)(async (event)=>{
-        const { flow: flow, flowV0: flowV0 } = event.detail;
+        const { flow: flow, flowV0: flowV0, videoUpload: videoUpload } = event.detail;
+        setVideoUpload(videoUpload || false);
         const flowStep = flow?.steps[0];
         if (flowStep) {
-            const flowStepMode = flowStep.type === "image" ? "photo" : flowStep.type;
+            const flowStepMode = flowStep.types.map((type)=>type === "image" ? "photo" : type);
             setRecorderOptions({
-                enabledModes: [
-                    flowStepMode
-                ],
+                enabledModes: flowStepMode,
                 enabled: true,
-                defaultMode: flowStepMode,
+                defaultMode: (flowStep.default_type === "image" ? "photo" : flowStep.default_type) || flowStepMode[0],
                 skipOnboarding: false
             });
             await (0, $c9e496369b59be7a$export$2f377c2162fd02b2).setStep(flowStep.token);
@@ -14595,6 +14680,7 @@ const $26ed036cbc17809a$var$StreamUI = ({ options: options })=>{
                 orientation: orientation,
                 flow: flows.flow,
                 flowV0: flows.flowV0,
+                videoUpload: videoUpload,
                 recorderOptions: recorderOptions
             },
             children: /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $3Sbms$ThemeProvider), {

package/dist/stream-ui.js

@@ -1141,6 +1141,48 @@ const $3898fb88b880f5ba$export$de363e709c412c8a = (fn, wait = 300)=>{
 };
 
 
+const $e28f3021384abb82$export$deda6dde1c58aa97 = async (apiUrl, { file: file, token: token, stepToken: stepToken, sessionId: sessionId, userId: userId, peerId: peerId })=>{
+    if (!file) throw new Error(`Missing file on "${file}"`);
+    const upload = await fetch(`${apiUrl}/public/streams/${token}/events/upload`, {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json"
+        },
+        body: JSON.stringify({
+            filename: file.name,
+            contentLength: file.size
+        })
+    });
+    const { url: url, headers: headers, filename: filename } = await upload.json();
+    const uploadResponse = await fetch(url, {
+        method: "PUT",
+        headers: {
+            ...headers,
+            "Content-Type": file.type,
+            "Content-Length": String(file.size)
+        },
+        body: file
+    });
+    if (!uploadResponse.ok) throw new Error("Upload failed");
+    const type = file.type.split("/")[0];
+    const eventRequest = await fetch(`${apiUrl}/public/streams/${token}/events`, {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json"
+        },
+        body: JSON.stringify({
+            filename: filename,
+            type: type,
+            stepToken: stepToken,
+            session_id: sessionId,
+            user_id: userId,
+            peer_id: peerId
+        })
+    });
+    return eventRequest.json();
+};
+
+
 const $1dedebd5ff3002eb$var$log = new (0, $d0c6baf97675ab49$export$2e2bcd8739ae039)("StreamerClient");
 const $1dedebd5ff3002eb$export$103bedf43ba882db = {
     WEBRTC_FAILED: "WRTC1",
@@ -1363,10 +1405,7 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
         }
     }
     async init(room = this.roomId, options = this.joinOptions) {
-        const initResult = {
-            flow: undefined,
-            flowV0: undefined
-        };
+        const initResult = {};
         this.roomId = room;
         this.peerId = (0, $jQDcL$uuid.v4)();
         this.joinOptions = options;
@@ -1376,7 +1415,7 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
             const urlParams = new URLSearchParams();
             if (options.flowToken) urlParams.append("flowToken", options.flowToken);
             if (options.languageCode) urlParams.append("languageCode", options.languageCode);
-            const { streamer_instance: instanceId, plan: { permissions: permissions, name: name }, flow: flow, flow_v0: flow_v0, recordings: recordings, company_id: company_id, company: company, defaultPublicPage: defaultPublicPage } = await fetch(`${this.config.apiUrl}/streams/${room}/info?${urlParams}`, {
+            const { streamer_instance: instanceId, plan: { permissions: permissions, name: name }, flow: flow, flow_v0: flow_v0, recordings: recordings, video_upload: video_upload, company_id: company_id, company: company, defaultPublicPage: defaultPublicPage } = await fetch(`${this.config.apiUrl}/streams/${room}/info?${urlParams}`, {
                 method: "get",
                 headers: {
                     "Content-Type": "application/json"
@@ -1385,6 +1424,7 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
                 if (response.ok) return response.json();
                 throw new Error("Invalid room ID");
             });
+            initResult.videoUpload = video_upload;
             if (flow_v0) initResult.flowV0 = flow_v0;
             if (flow && flow.steps.length > 0) {
                 options.recorder = true;
@@ -2484,6 +2524,15 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
             stepToken: this.stepToken
         });
     }
+    async uploadEvent(file) {
+        return (0, $e28f3021384abb82$export$deda6dde1c58aa97)(this.config.apiUrl, {
+            token: this.roomId,
+            file: file,
+            peerId: this.peerId,
+            userId: this.agentIdentity?.id,
+            stepToken: this.stepToken
+        });
+    }
     async deleteCapture(assetId) {
         const res = await this.protoo?.request("deleteCapture", {
             assetId: assetId
@@ -11189,6 +11238,7 @@ const $8dfcca373a03b9e8$export$5a5695b638d078e7 = ()=>{
 };
 
 
+
 const $ccbd73eb953b0bd0$var$fileToDataUrl = (file)=>{
     return new Promise((resolve, reject)=>{
         const reader = new FileReader();
@@ -11197,7 +11247,26 @@ const $ccbd73eb953b0bd0$var$fileToDataUrl = (file)=>{
         reader.readAsDataURL(file);
     });
 };
+const $ccbd73eb953b0bd0$var$generateVideoThumbnail = (file)=>{
+    return new Promise((resolve)=>{
+        const canvas = document.createElement("canvas");
+        const video = document.createElement("video");
+        video.autoplay = true;
+        video.muted = true;
+        video.currentTime = 3;
+        video.src = URL.createObjectURL(file);
+        video.onloadeddata = ()=>{
+            let ctx = canvas.getContext("2d");
+            canvas.width = video.videoWidth;
+            canvas.height = video.videoHeight;
+            ctx?.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
+            video.pause();
+            return resolve(canvas.toDataURL("image/png"));
+        };
+    });
+};
 const $ccbd73eb953b0bd0$export$b3fd96a52c80b3af = ()=>{
+    const { recorderOptions: recorderOptions, videoUpload: videoUpload } = (0, $jQDcL$react.useContext)((0, $8b39f32976a7698a$export$2e2bcd8739ae039));
     const { t: t } = (0, $jQDcL$reacti18next.useTranslation)();
     const { openAssetsModal: openAssetsModal, addAsset: addAsset, setIncomingAsset: setIncomingAsset, isRecording: isRecording } = (0, $098350f721a0bb52$export$2174f25d572f9f31)();
     const reportError = (0, $8dfcca373a03b9e8$export$5a5695b638d078e7)();
@@ -11206,24 +11275,40 @@ const $ccbd73eb953b0bd0$export$b3fd96a52c80b3af = ()=>{
     const onUploadClick = async (event)=>{
         const file = event.target.files?.[0];
         if (file && !isRecording) {
+            const type = file.type.split("/")[0];
             const createdAt = Date.now();
+            const mode = type === "image" ? "photo" : type;
             setIncomingAsset({
-                mode: "photo",
+                mode: mode,
                 createdAt: createdAt
             });
             openAssetsModal();
             try {
-                const dataUrl = await $ccbd73eb953b0bd0$var$fileToDataUrl(file);
-                const { url: url, assetId: assetId } = await (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).saveCapture(dataUrl);
+                let url;
+                let thumbnailUrl;
+                let id;
+                if (type === "image") {
+                    const dataUrl = await $ccbd73eb953b0bd0$var$fileToDataUrl(file);
+                    const data = await (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).saveCapture(dataUrl);
+                    url = data.url;
+                    id = data.assetId;
+                } else {
+                    const data = await (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).uploadEvent(file);
+                    url = data.url;
+                    id = data.id;
+                    if (type === "video") thumbnailUrl = await $ccbd73eb953b0bd0$var$generateVideoThumbnail(file);
+                    if (!url || !id) throw new Error("upload failed");
+                }
                 addAsset({
-                    id: assetId,
-                    mode: "photo",
+                    id: id,
+                    mode: mode,
                     url: url,
-                    thumbnailUrl: url,
+                    thumbnailUrl: thumbnailUrl || url,
                     createdAt: createdAt
                 });
                 openAssetsModal();
             } catch (error) {
+                console.log(error);
                 reportError({
                     code: "UPLD_1",
                     error: error
@@ -11237,13 +11322,13 @@ const $ccbd73eb953b0bd0$export$b3fd96a52c80b3af = ()=>{
             /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("input", {
                 ref: fileInputRef,
                 type: "file",
-                accept: ".jpg,.JPG,.png,.PNG,.jpeg,.JPEG",
+                accept: videoUpload ? "image/*,video/*,audio/*" : "image/*",
                 className: "hidden",
                 onChange: onUploadClick
             }),
             /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $jQDcL$snapcalldesignsystem.Button), {
                 className: (0, ($parcel$interopDefault($jQDcL$classnames)))("bg-gray-25/50 hover:bg-gray-25/60 active:bg-gray-25/70 rounded-full", {
-                    invisible: isRecording
+                    invisible: isRecording || !recorderOptions?.enabledModes.includes("photo") && !videoUpload
                 }),
                 icon: !isMedium,
                 onClick: ()=>fileInputRef.current?.click(),
@@ -14304,6 +14389,7 @@ const $ee8cb448c2c74888$var$StreamUI = ({ options: options })=>{
     const [permissions, setPermissions] = (0, $jQDcL$react.useState)([]);
     const [plan, setPlan] = (0, $jQDcL$react.useState)(undefined);
     const [flows, setFlows] = (0, $jQDcL$react.useState)({});
+    const [videoUpload, setVideoUpload] = (0, $jQDcL$react.useState)(false);
     const [recorderOptions, setRecorderOptions] = (0, $jQDcL$react.useState)(options.recorder);
     const isFirstRender = (0, $67040444b405b263$export$5964c316e853650f)();
     const orientation = (containerWidth || window.screen.width) > (containerHeight || window.screen.height) ? "landscape" : "portrait";
@@ -14411,16 +14497,15 @@ const $ee8cb448c2c74888$var$StreamUI = ({ options: options })=>{
         });
     };
     const onClientInitialized = (0, $jQDcL$react.useCallback)(async (event)=>{
-        const { flow: flow, flowV0: flowV0 } = event.detail;
+        const { flow: flow, flowV0: flowV0, videoUpload: videoUpload } = event.detail;
+        setVideoUpload(videoUpload || false);
         const flowStep = flow?.steps[0];
         if (flowStep) {
-            const flowStepMode = flowStep.type === "image" ? "photo" : flowStep.type;
+            const flowStepMode = flowStep.types.map((type)=>type === "image" ? "photo" : type);
             setRecorderOptions({
-                enabledModes: [
-                    flowStepMode
-                ],
+                enabledModes: flowStepMode,
                 enabled: true,
-                defaultMode: flowStepMode,
+                defaultMode: (flowStep.default_type === "image" ? "photo" : flowStep.default_type) || flowStepMode[0],
                 skipOnboarding: false
             });
             await (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).setStep(flowStep.token);
@@ -14601,6 +14686,7 @@ const $ee8cb448c2c74888$var$StreamUI = ({ options: options })=>{
                 orientation: orientation,
                 flow: flows.flow,
                 flowV0: flows.flowV0,
+                videoUpload: videoUpload,
                 recorderOptions: recorderOptions
             },
             children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $jQDcL$styledcomponents.ThemeProvider), {

package/dist/types.d.ts

@@ -0,0 +1,695 @@
+import * as mediasoupClient from "mediasoup-client";
+import { types } from "mediasoup-client";
+import * as protooClient from "protoo-client";
+import { Transport } from "mediasoup-client/lib/Transport";
+import { CSSProperties } from "react";
+type VideoResolution = 'qvga' | 'vga' | 'hd';
+type PeerId = string;
+type DeviceType = 'webcam' | 'screen' | 'microphone';
+interface Profile {
+    name?: string;
+    image?: string;
+}
+interface Step {
+    types: Array<'video' | 'audio' | 'screen' | 'image'>;
+    default_type: 'video' | 'audio' | 'screen' | 'image';
+    token: string;
+    title: string;
+    description: string;
+    image_url: string;
+    translation: {
+        title?: string;
+        description?: string;
+        button?: string;
+        languageCode?: string;
+    };
+}
+interface Flow {
+    token: string;
+    name: string;
+    is_default: number;
+    steps: Array<Step>;
+}
+interface FlowV0 {
+    logo_url?: string;
+    image_url?: string;
+    title?: string;
+    text?: string;
+}
+interface InitResult {
+    flow?: Flow;
+    flowV0?: FlowV0;
+    videoUpload?: boolean;
+}
+interface JoinOptions {
+    languageCode?: string;
+    flowToken?: string;
+    recorder?: boolean;
+    apiKey?: string;
+    email?: string;
+    displayName?: string;
+    profile?: Profile;
+    authKey?: string;
+}
+interface PeerState {
+    peerId: string;
+    profile: Profile;
+    deviceState: DevicesState;
+}
+interface CompanyInfo {
+    name?: string;
+    company_name?: string;
+    avatar_url?: string;
+    terminate_enabled?: boolean;
+}
+type WaitingRequests = Array<{
+    id: string;
+    profile?: Profile;
+}>;
+interface GetRoomPeersResult {
+    peers: Array<{
+        id: string;
+        displayName?: string;
+        profile: Profile;
+        muted: boolean;
+        producersIds: string[];
+        producersData: ProducerData[];
+    }>;
+    videoRecordStarted: boolean;
+    videoRecording: {
+        requested: boolean;
+        started: boolean;
+    };
+}
+interface StreamerState extends PeerState {
+    roomId: string;
+    plan?: string;
+    permissions: Permissions;
+    company?: CompanyInfo;
+    companyId: number;
+    waitingRoomAccess: boolean;
+    peers: Array<PeerState>;
+    joinOptions: JoinOptions;
+}
+interface ProducerData {
+    producerId: string;
+    deviceType: DeviceType;
+    paused: boolean;
+}
+interface PeerInfo {
+    id?: PeerId;
+    peerId: PeerId;
+    muted: boolean;
+    profile: Profile;
+    displayName?: string;
+    producersData: Array<ProducerData>;
+}
+type ConsumerId = string;
+type ProducerId = string;
+interface ConsumerData {
+    mediaSoupConsumer: types.Consumer;
+    deviceType?: DeviceType;
+}
+interface DevicesState {
+    microphone: {
+        enabled: boolean;
+        muted: boolean;
+        device?: MediaDeviceInfo | null;
+    };
+    camera: {
+        enabled: boolean;
+        device?: MediaDeviceInfo | null;
+    };
+    screenshare: {
+        enabled: boolean;
+    };
+}
+interface Config {
+    apiUrl: string;
+    streamerServer: string;
+    streamerApi: string;
+    iceServers: RTCIceServer[];
+    streamApiURL: string;
+}
+type Permission = 'share_link' | 'direct_pay' | 'quick_connect' | 'virtual_background' | 'screen_sharing' | 'instant_picture' | 'request_input' | 'recording' | 'record_video_on_demand';
+type Permissions = Array<Permission>;
+declare global {
+    interface Window {
+        webkitAudioContext: Function;
+    }
+    interface MediaTrackConstraintSet {
+        displaySurface?: ConstrainDOMString;
+        logicalSurface?: ConstrainBoolean;
+        zoom?: number;
+        focusMode?: 'none' | 'manual' | 'single-shot' | 'continuous';
+    }
+    interface MediaTrackCapabilities {
+        zoom: {
+            min: number;
+            max: number;
+            step: number;
+        };
+        focusMode?: Array<'none' | 'manual' | 'single-shot' | 'continuous'>;
+    }
+}
+interface MenuItem {
+    id: string;
+    title: string;
+    jsxIcon?: JSX.Element;
+    srcIcon?: string;
+    action: () => void;
+    danger?: boolean;
+    isNew?: boolean;
+}
+interface MenuCategory {
+    id: string;
+    title?: string;
+    items: MenuItem[];
+}
+type DisplayType = 'icon' | 'full';
+interface SettingShortcut {
+    id: string;
+    displayType: DisplayType;
+}
+interface SettingsCategory extends MenuCategory {
+    position?: number;
+    items: SettingsItem[];
+}
+interface SettingsItem extends MenuItem {
+    position?: number;
+}
+interface AudioLevelListener {
+    onAudioLevel?(audioLevel: number, id: string): void;
+    onMuteDetection?(id: string): void;
+    onStartSpeak(): void;
+    onStopSpeak(): void;
+}
+declare class AudioLevel {
+    readonly id: string;
+    constructor(stream: MediaStream, listener?: AudioLevelListener);
+    /**
+     * return the median of the audio levels (60 per second) for the
+     * current second
+     */
+    getAudioLevelMedian(): number;
+    getCurrentAudioLevel(): number;
+    analyse(): void;
+    startAverageAnalysis(): void;
+    stopAverageAnalysis(): number;
+    getFrequencyData(): Uint8Array;
+    clearListeners(): void;
+    release(): void;
+    static isAPIAvailable(): boolean;
+}
+declare class AudioRenderer {
+    constructor({ consumerId }: {
+        consumerId: string;
+    });
+    destroy(): void;
+    setSource(srcObject: MediaStream): void;
+    setSink(sinkId: string): Promise<void>;
+    getSink(): string;
+    play(): Promise<void>;
+}
+interface MediapipeOptions {
+    type: 'blur' | 'background';
+    fillColor?: string;
+    background?: CanvasImageSource;
+    blurLevel?: number;
+}
+interface DeviceRequest {
+    requestId: string;
+    deviceType: DeviceType;
+}
+interface CustomMessage {
+    chunks: Array<{
+        index: number;
+        data: string;
+    }>;
+    totalChunks: number;
+}
+declare global {
+    export namespace SnapCall {
+        export { Permissions, Permission };
+        export type SnapcallEvent<T> = CustomEvent<T>;
+        export type PeersInfoEvent = SnapcallEvent<{
+            videoRecordStarted: boolean;
+            videoRecording?: {
+                requested: boolean;
+                started: boolean;
+            };
+            peerId: string;
+            plan?: string;
+            permissions: Permissions;
+            peers: {
+                peerId: string;
+                muted: boolean;
+                displayName?: string;
+                profile: Profile;
+            }[];
+        }>;
+        export type PeerInfoEvent = SnapcallEvent<{
+            peerId: string;
+            displayName?: string;
+            profile: Profile;
+        }>;
+        export type RequestAccessEvent = SnapcallEvent<{
+            success: string;
+            message?: string;
+        }>;
+        export type RequestAccessRequestEvent = SnapcallEvent<WaitingRequests[number]>;
+        export type RequestAccessCancelEvent = SnapcallEvent<{
+            id: string;
+        }>;
+        export type ProfileUpdateEvent = SnapcallEvent<{
+            peerId: string;
+            profile: Profile;
+        }>;
+        export type RequestDeviceEvent = SnapcallEvent<{
+            peerId: string;
+            deviceType: DeviceType;
+        }>;
+        export type RequestDeviceResultEvent = SnapcallEvent<{
+            result: {
+                peerId: string;
+                result: boolean;
+            };
+        }>;
+        export type BaseEvent = SnapcallEvent<{}>;
+        export type StreamEvent = SnapcallEvent<{
+            peerId: string;
+        }>;
+        export type RequestResultEvent = SnapcallEvent<{
+            success: Boolean;
+        }>;
+        export type AudioDeviceEvent = SnapcallEvent<MediaDeviceInfo>;
+        export type MediaEvent = SnapcallEvent<{
+            peerId: string;
+            mediaId?: string;
+            deviceType: DeviceType;
+            paused: boolean;
+        }>;
+        export type WebcamUpdateEvent = SnapcallEvent<{
+            numberOfAvailableWebcams: number;
+        }>;
+        export type CriticalErrorEvent = SnapcallEvent<{
+            code: string;
+        }>;
+        export type CustomMessageEvent = SnapcallEvent<{
+            peerId: string;
+            event: {
+                type: string;
+            } & Record<string, any>;
+        }>;
+        export type localVideoChangeEvent = SnapcallEvent<{
+            camera: {
+                device: MediaDeviceInfo | null;
+                resolution: VideoResolution;
+            };
+        }>;
+        export type AgentIdentityEvent = SnapcallEvent<{
+            success: boolean;
+            email?: string;
+            name?: string;
+            avatarUrl?: string;
+        }>;
+        export type RecordStoppedEvent = SnapcallEvent<{
+            url: string;
+            assetId: number;
+        }>;
+        export type AudioLevelEvent = SnapcallEvent<{
+            audioLevel: number;
+        }>;
+        export type InitializedEvent = SnapcallEvent<InitResult>;
+    }
+    export interface PublicPage {
+        token: string;
+        logo_url: string;
+        title: string;
+        description: string;
+        data: {
+            links: {
+                id: 'recordVideo' | 'takePicture' | 'scheduleCall' | 'recordScreen';
+                active: boolean;
+                user_ids?: number[];
+                team_ids?: number[];
+                schedule_ids?: string[];
+            }[];
+        };
+    }
+}
+interface StreamerEventMap {
+    audioLevel: SnapCall.AudioLevelEvent['detail'];
+    localStartSpeak?: SnapCall.BaseEvent['detail'];
+    localStopSpeak?: SnapCall.BaseEvent['detail'];
+    leaveRoom: SnapCall.BaseEvent['detail'];
+    terminateRoom: SnapCall.BaseEvent['detail'];
+    invalidRoom: SnapCall.BaseEvent['detail'];
+    accessRequest: SnapCall.RequestAccessRequestEvent['detail'];
+    cancelAccessRequest: SnapCall.RequestAccessCancelEvent['detail'];
+    requestAccessResult: SnapCall.RequestAccessEvent['detail'];
+    localVideoUnavailable: SnapCall.BaseEvent['detail'];
+    localVideoAvailable: SnapCall.BaseEvent['detail'];
+    microphoneEnabled: SnapCall.BaseEvent['detail'];
+    agentIdentity: SnapCall.AgentIdentityEvent['detail'];
+    peerClosed: SnapCall.StreamEvent['detail'];
+    newPeer: SnapCall.PeerInfoEvent['detail'];
+    selfDisplayName: SnapCall.PeerInfoEvent['detail'];
+    selfProfileUpdate: SnapCall.ProfileUpdateEvent['detail'];
+    profileUpdate: SnapCall.ProfileUpdateEvent['detail'];
+    webcamsUpdate: SnapCall.WebcamUpdateEvent['detail'];
+    customMessage: SnapCall.CustomMessageEvent['detail'];
+    mediaStart: SnapCall.MediaEvent['detail'];
+    mediaStop: SnapCall.MediaEvent['detail'];
+    mediaPause: SnapCall.MediaEvent['detail'];
+    mediaResume: SnapCall.MediaEvent['detail'];
+    microphoneMute: SnapCall.BaseEvent['detail'];
+    microphoneUnmute: SnapCall.BaseEvent['detail'];
+    defaultAudioDeviceChange: SnapCall.AudioDeviceEvent['detail'];
+    screenshareEnabled: SnapCall.BaseEvent['detail'];
+    screenshareDisabled: SnapCall.BaseEvent['detail'];
+    localVideoRotate: SnapCall.BaseEvent['detail'];
+    enterRoom: SnapCall.PeersInfoEvent['detail'];
+    displayName: SnapCall.PeerInfoEvent['detail'];
+    peerStartSpeak: SnapCall.StreamEvent['detail'];
+    peerStopSpeak: SnapCall.StreamEvent['detail'];
+    criticalError: SnapCall.CriticalErrorEvent['detail'];
+    requestDevice: SnapCall.RequestDeviceEvent['detail'];
+    requestDeviceResult: SnapCall.RequestDeviceResultEvent['detail'];
+    devicesListChange: SnapCall.BaseEvent['detail'];
+    localVideoChange: SnapCall.localVideoChangeEvent['detail'];
+    recordStopped: SnapCall.RecordStoppedEvent['detail'];
+    videoRecordingStarted: SnapCall.BaseEvent['detail'];
+    videoRecordingStopped: SnapCall.BaseEvent['detail'];
+    videoRecordingRequested: SnapCall.BaseEvent['detail'];
+    initialized: SnapCall.InitializedEvent['detail'];
+}
+declare class SnapcallEvent<T extends keyof StreamerEventMap> extends CustomEvent<StreamerEventMap[T]> {
+    constructor(name: T, data: CustomEventInit & {
+        detail: StreamerEventMap[T];
+    });
+}
+interface StreamerEventTarget extends EventTarget {
+    addEventListener<T extends keyof StreamerEventMap>(type: T, listener: (event: CustomEvent<StreamerEventMap[T]>) => void, options?: boolean | AddEventListenerOptions): void;
+    addEventListener(type: string, callback: EventListenerOrEventListenerObject | null, options?: EventListenerOptions | boolean): void;
+    removeEventListener<T extends keyof StreamerEventMap>(type: T, listener: (event: CustomEvent<StreamerEventMap[T]>) => void): void;
+    removeEventListener(type: string, callback: EventListenerOrEventListenerObject | null): void;
+    dispatchEvent<T extends keyof StreamerEventMap>(ev: SnapcallEvent<T>): boolean;
+}
+declare const StreamerEventTargetType: {
+    new (): StreamerEventTarget;
+    prototype: StreamerEventTarget;
+};
+declare class StreamerClient extends StreamerEventTargetType implements AudioLevelListener {
+    peers: Map<PeerId, PeerInfo>;
+    consumers: Map<ConsumerId, ConsumerData>;
+    webcams: Map<string, MediaDeviceInfo>;
+    webcam: {
+        device: MediaDeviceInfo | null;
+        facingMode?: string;
+        resolution: VideoResolution;
+        framerate?: number;
+    };
+    microphone: {
+        device: MediaDeviceInfo | null;
+        muted: boolean;
+    };
+    webcamTrack: MediaStreamTrack | null;
+    webcamZoom: {
+        available: boolean;
+        min: number;
+        max: number;
+    };
+    audioLevel: AudioLevel | undefined;
+    roomId: string;
+    companyId: number;
+    defaultPublicPage?: {
+        token: string;
+    };
+    peerId: PeerId;
+    clientId: string;
+    profile: Profile;
+    protooTransport?: protooClient.WebSocketTransport;
+    protoo?: protooClient.Peer;
+    micProducer?: mediasoupClient.types.Producer;
+    webcamProducer: mediasoupClient.types.Producer | null;
+    screenshareVideoProducer?: mediasoupClient.types.Producer;
+    screenshareAudioProducer?: mediasoupClient.types.Producer;
+    pendingDeviceRequest: Record<string, DeviceRequest>;
+    joinOptions: JoinOptions;
+    audioInputDefaultDevice?: MediaDeviceInfo;
+    devicesList: Array<MediaDeviceInfo>;
+    customMessages: Map<string, CustomMessage>;
+    audioRenderers: Record<string, AudioRenderer>;
+    constructor();
+    getState(): StreamerState;
+    onAudioLevel: (this: any) => void;
+    onStartSpeak(): void;
+    onStopSpeak(): void;
+    generateToken(bid: string): Promise<string>;
+    init(room?: string, options?: JoinOptions): Promise<InitResult>;
+    setAgentIdentity({ apiKey, email }: {
+        apiKey: string;
+        email?: string;
+    }): Promise<void>;
+    acceptAccessRequest(id: string): Promise<any>;
+    setStep(stepToken: string): Promise<void>;
+    denyAccessRequest(id: string): Promise<any>;
+    requestRoomAccess(): Promise<void>;
+    joinRoom(): Promise<void>;
+    getRoomPeers(): Promise<GetRoomPeersResult>;
+    onEnterRoom(): Promise<void>;
+    joinRecorder(): Promise<void>;
+    switchMicrophone(deviceId?: string): Promise<void>;
+    closeMicrophoneProducer(): Promise<void>;
+    onDeviceChange(): Promise<void>;
+    enableMicrophone({ deviceId }?: {
+        deviceId?: string;
+    }): Promise<void>;
+    muteMicrophone(): void;
+    unMuteMicrophone(): void;
+    toggleMute(): Promise<{
+        muted: boolean;
+    }>;
+    release(): void;
+    endCall(): void;
+    terminateRoom(): void;
+    updateWebcams(): Promise<void>;
+    isVideoZoomAvailable(): boolean;
+    handleGetUserMediaError(deviceType: DeviceType, getUserMediaPromise: Promise<MediaStream>): Promise<MediaStream>;
+    restartIce(transport: Transport): Promise<void>;
+    setVideoBackground(options: MediapipeOptions): void;
+    initVideoBackground(): Promise<void>;
+    stopVideoBackground(): Promise<void>;
+    switchWebcam({ device, resolution, rotate, frameRate, facingMode, }: {
+        device?: MediaDeviceInfo;
+        resolution?: VideoResolution;
+        rotate?: boolean;
+        frameRate?: number;
+        facingMode?: string;
+    }): Promise<void>;
+    enableVideo(config?: {
+        device?: MediaDeviceInfo;
+        facingMode?: string;
+        resolution?: VideoResolution;
+        frameRate?: number;
+    }): Promise<void>;
+    rotateVideo(): Promise<void>;
+    zoomVideo(): Promise<void>;
+    unzoomVideo(): Promise<void>;
+    disableVideo(): Promise<void>;
+    enableScreenshare(options?: {
+        mediaStream?: MediaStream;
+        audioTransportOption: 'mix' | 'none' | 'classic';
+    }): Promise<void>;
+    disableScreenshare(): Promise<void>;
+    onConsumerClose({ consumerId }: {
+        consumerId: ConsumerId;
+    }): void;
+    requestVideo({ mediaId, element }: {
+        mediaId: string;
+        element: HTMLVideoElement;
+    }): void;
+    saveCapture(base64Image: string): Promise<{
+        url: string;
+        assetId: number;
+    }>;
+    uploadEvent(file: any): Promise<{
+        url?: string;
+        id?: number;
+        success: boolean;
+    }>;
+    deleteCapture(assetId: number): Promise<number>;
+    captureVideo(videoElement?: HTMLVideoElement): Promise<string>;
+    requestLocalVideo(element: HTMLVideoElement): {
+        facingMode: string;
+    };
+    requestLocalScreenshare(element: HTMLVideoElement): void;
+    consumePeer({ peerId, producersData, }: {
+        peerId: PeerId;
+        producersData: Array<ProducerData>;
+    }): void;
+    consumeProducer({ peerId, producerId, deviceType, paused, }: {
+        peerId: PeerId;
+        producerId: ProducerId;
+        deviceType: DeviceType;
+        paused: boolean;
+    }): Promise<void>;
+    setDisplayName(displayName: string): Promise<void>;
+    setProfile(profile: Profile): Promise<void>;
+    requestPeerDevice(remotePeerId: string, deviceType: DeviceType): Promise<void>;
+    denyDeviceRequest(deviceType: DeviceType): void;
+    getConsumers(): Map<string, ConsumerData>;
+    getDevicesState(): DevicesState;
+    sendCustomMessageToAll(event: any): Promise<void>;
+    sendCustomMessage(peerId: string, event: any): Promise<void>;
+    listAudioDevices(): Promise<MediaDeviceInfo[]>;
+    listVideoDevices(): Promise<MediaDeviceInfo[]>;
+    isListDevicesSupported(): boolean;
+    getCurrentWebcam(): {
+        device: MediaDeviceInfo | null;
+        resolution: VideoResolution;
+    };
+    getCurrentMicrophoneId(): string | MediaTrackSettings | undefined;
+    getCurrentSpeakerId(): string;
+    setWebcamResolution(resolution: VideoResolution): Promise<void>;
+    createAudioRenderer(consumerId: string): AudioRenderer;
+    deleteAudioRenderer(consumerId: string): void;
+    playAudioRenderer(consumerId: string): Promise<void>;
+    setAudioSink(sinkId: string): Promise<void>;
+    dispatchEvent(event: SnapcallEvent<keyof StreamerEventMap>): boolean;
+    setConfig(config: Partial<Config>): void;
+    getPermissions(): Permissions;
+    startRecord(): Promise<void>;
+    stopRecord(): Promise<void>;
+    getPublicPage(token: string): Promise<PublicPage>;
+    getWaitingRequests(): Promise<WaitingRequests>;
+}
+declare const streamerClient: StreamerClient;
+interface NotificationOptions {
+    icon?: JSX.Element | string;
+    subText?: string;
+    button?: {
+        icon?: JSX.Element | string;
+        text: string;
+        action: () => void;
+        style?: CSSProperties;
+    };
+    status?: {
+        icon?: JSX.Element | string;
+        text?: string;
+        boldText?: string;
+    };
+    width?: string;
+    backgroundColor?: string;
+    messageStyle?: CSSProperties;
+    ellipsis?: boolean;
+}
+type NotificationButton = NonNullable<NotificationOptions['button']>;
+interface CustomNotificationButton extends Omit<NotificationButton, 'action'> {
+    action: ({ close }: {
+        close: () => void;
+    }) => void;
+}
+interface SendNotificationOptions extends Omit<NotificationOptions, 'button'> {
+    button?: CustomNotificationButton;
+    duration?: number;
+}
+declare const sendNotification: (message: string, options?: SendNotificationOptions) => void;
+interface StreamUIMethods {
+    initV2: (options: StreamUIInitOptions) => Promise<void>;
+    init: (options: StreamUIInitOptions) => void;
+    joinRoom: (token: string, options: StreamUIInitOptions) => Promise<void>;
+    setAgentIdentity: typeof streamerClient.setAgentIdentity;
+    enableScreenshare: typeof streamerClient.enableScreenshare;
+    setExtraSettingsOptions: (extraOptions: SettingsCategory[]) => void;
+    sendNotification: typeof sendNotification;
+    startRecord: typeof streamerClient.startRecord;
+    stopRecord: typeof streamerClient.stopRecord;
+    leaveRoom: typeof streamerClient.endCall;
+    terminateRoom: typeof streamerClient.terminateRoom;
+    generateToken: typeof streamerClient.generateToken;
+    addEventListener: typeof streamerClient.addEventListener;
+    removeEventListener: typeof streamerClient.removeEventListener;
+    dispatchEvent: typeof streamerClient.dispatchEvent;
+    getState: typeof streamerClient.getState;
+    setProfile: typeof streamerClient.setProfile;
+    setConfig: typeof streamerClient.setConfig;
+    setLogLevel: (level: number) => void;
+    getPermissions: () => Permissions;
+    streamerClient: StreamerClient;
+}
+interface ControlSettings {
+    available?: boolean;
+    enabled?: boolean;
+}
+interface StreamUIBaseOptions {
+    token?: string;
+    flowToken?: string;
+    authKey?: string;
+    profile?: Profile;
+    apiKey?: string;
+    email?: string;
+    headless?: boolean;
+    greeting?: boolean;
+    recorder?: {
+        enabledModes: Array<'video' | 'screen' | 'photo' | 'audio'>;
+        enabled: boolean;
+        defaultMode?: 'photo' | 'video' | 'audio' | 'screen';
+        skipOnboarding?: boolean;
+    };
+    sharedURL?: string;
+    audioTiles?: boolean;
+    settingsShortcuts?: Array<SettingShortcut>;
+    extraSettingsOptions?: SettingsCategory[];
+    controls?: {
+        microphone?: ControlSettings;
+        camera?: ControlSettings;
+        screenshare?: ControlSettings;
+    };
+    logo?: {
+        text?: string;
+        size?: 'small' | 'medium' | 'large';
+    };
+    showMenuButton?: boolean;
+    GDPRDisclaimer?: {
+        enabled: boolean;
+        text: string;
+        closeText: string;
+    };
+    streamApiURL?: string;
+    apiUrl?: string;
+    tracking?: boolean;
+    language?: string;
+}
+interface StreamUIInitOptions extends StreamUIBaseOptions {
+    element: HTMLElement;
+}
+declare global {
+    interface Window {
+        streamUI: StreamUIMethods;
+        snapcallAPI: {
+            endCall: typeof streamerClient.endCall;
+            terminateRoom: typeof streamerClient.terminateRoom;
+            generateToken: typeof streamerClient.generateToken;
+            setDisplayName: typeof streamerClient.setDisplayName;
+        };
+    }
+    interface MediaSession {
+        setMicrophoneActive?: (active: boolean) => void;
+        setCameraActive?: (active: boolean) => void;
+        setActionHandler(action: MediaSessionAction | 'togglemicrophone' | 'togglecamera' | 'hangup', handler: MediaSessionActionHandler | null): void;
+    }
+    interface WindowEventMap {
+        streamUISetExtraSettingsOptions: CustomEvent;
+    }
+}
+declare global {
+    interface Window {
+        onYouTubeIframeAPIReady: () => void;
+        YT?: {
+            loaded?: boolean;
+        };
+    }
+}
+export const streamUI: StreamUIMethods;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@snapcall/stream-ui",
-  "version": "1.25.0",
+  "version": "1.26.0",
   "description": "",
   "source": "src/index.tsx",
   "main": "dist/stream-ui.js",
@@ -39,9 +39,9 @@
     "dev": "npm run serve",
     "serve": "APP_ENV=local parcel serve --https --host 0.0.0.0 --target html",
     "build": "parcel build",
-    "build:npm": "parcel build --no-source-maps --target main --target module",
+    "build:npm": "parcel build --no-source-maps --target main --target module --target types",
     "build:s3": "parcel build --no-source-maps --target umd --target html",
-    "build:streamerClient": "parcel build --target streamerClient",
+    "build:streamerClient": "parcel build --target streamerClient --target types",
     "typecheck": "tsc --noEmit",
     "lint": "eslint src streamerClient --ext .ts,.tsx",
     "prettier": "prettier --check .",