@snapcall/stream-ui 1.25.1 → 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

@@ -11,7 +11,8 @@ interface Profile {
     image?: string;
 }
 interface Step {
-    type: 'video' | 'audio' | 'screen' | 'image';
+    types: Array<'video' | 'audio' | 'screen' | 'image'>;
+    default_type: 'video' | 'audio' | 'screen' | 'image';
     token: string;
     title: string;
     description: string;
@@ -38,6 +39,7 @@ interface FlowV0 {
 interface InitResult {
     flow?: Flow;
     flowV0?: FlowV0;
+    videoUpload?: boolean;
 }
 interface JoinOptions {
     languageCode?: string;
@@ -512,6 +514,11 @@ declare class StreamerClient extends StreamerEventTargetType implements AudioLev
         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): {

package/package.json

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