@snapcall/stream-ui 1.9.0 → 1.10.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/stream-ui.esm.js +391 -100
- package/dist/stream-ui.js +391 -100
- package/dist/stream-ui.umd.js +337 -250
- package/dist/types.d.ts +29 -19
- package/package.json +7 -7
package/dist/stream-ui.esm.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import {jsx as $3Sbms$jsx, jsxs as $3Sbms$jsxs, Fragment as $3Sbms$Fragment} from "react/jsx-runtime";
|
|
2
|
-
import {
|
|
2
|
+
import {createRoot as $3Sbms$createRoot} from "react-dom/client";
|
|
3
3
|
import $3Sbms$hotjarbrowser from "@hotjar/browser";
|
|
4
4
|
import $3Sbms$reacthottoast, {toast as $3Sbms$toast, Toaster as $3Sbms$Toaster, ToastBar as $3Sbms$ToastBar} from "react-hot-toast";
|
|
5
5
|
import $3Sbms$styledcomponents, {keyframes as $3Sbms$keyframes, ThemeProvider as $3Sbms$ThemeProvider, css as $3Sbms$css, ThemeContext as $3Sbms$ThemeContext, createGlobalStyle as $3Sbms$createGlobalStyle} from "styled-components";
|
|
@@ -14,6 +14,7 @@ import {captureException as $3Sbms$captureException, addBreadcrumb as $3Sbms$add
|
|
|
14
14
|
import {Producer as $3Sbms$Producer} from "mediasoup-client/lib/Producer";
|
|
15
15
|
import {Device as $3Sbms$Device} from "mediasoup-client";
|
|
16
16
|
import {SelfieSegmentation as $3Sbms$SelfieSegmentation} from "@mediapipe/selfie_segmentation";
|
|
17
|
+
import {createPortal as $3Sbms$createPortal} from "react-dom";
|
|
17
18
|
import {toCanvas as $3Sbms$toCanvas} from "qrcode";
|
|
18
19
|
|
|
19
20
|
|
|
@@ -325,6 +326,9 @@ const $a3e657fb86ae23f3$export$604ba5624273df44 = ()=>{
|
|
|
325
326
|
const $18fb8799f38eb407$export$84584c2a98eb6753 = {
|
|
326
327
|
name: "English",
|
|
327
328
|
translation: {
|
|
329
|
+
header: {
|
|
330
|
+
free: "Free version"
|
|
331
|
+
},
|
|
328
332
|
notifications: {
|
|
329
333
|
screensharingError: "An error occured when trying to toggle screensharing",
|
|
330
334
|
microphoneError: "An error occured when trying to toggle the microphone",
|
|
@@ -356,6 +360,14 @@ const $18fb8799f38eb407$export$84584c2a98eb6753 = {
|
|
|
356
360
|
pictureInPicture: "Picture-in-Picture",
|
|
357
361
|
screenSharing: "Screen sharing"
|
|
358
362
|
},
|
|
363
|
+
blockedFeature: {
|
|
364
|
+
titleConnected: "Upgrade to Pro",
|
|
365
|
+
titleGuest: "Feature not available",
|
|
366
|
+
descriptionConnected: "On a free plan, you can't use this feature. Upgrade your plan to enjoy all in-call features.",
|
|
367
|
+
descriptionGuest: "You are participating in a call created with a free version of SnapCall. This feature is only available with a Pro version.",
|
|
368
|
+
dismissGuest: "Okay",
|
|
369
|
+
dismissConnected: "Upgrade to Pro"
|
|
370
|
+
},
|
|
359
371
|
copyLink: {
|
|
360
372
|
title: "Copy link",
|
|
361
373
|
description: "Copy link into clipboard",
|
|
@@ -465,6 +477,9 @@ const $18fb8799f38eb407$export$84584c2a98eb6753 = {
|
|
|
465
477
|
const $c5472fb74fa04782$export$acb2a88f7d552ebf = {
|
|
466
478
|
name: "Fran\xe7ais",
|
|
467
479
|
translation: {
|
|
480
|
+
header: {
|
|
481
|
+
free: "Version gratuite"
|
|
482
|
+
},
|
|
468
483
|
notifications: {
|
|
469
484
|
screensharingError: "Une erreur est survenue pendant l'activation du partage d'\xe9cran",
|
|
470
485
|
microphoneError: "Une erreur est survenue pendant l'activation du micro",
|
|
@@ -496,6 +511,14 @@ const $c5472fb74fa04782$export$acb2a88f7d552ebf = {
|
|
|
496
511
|
pictureInPicture: "Picture-in-Picture",
|
|
497
512
|
screenSharing: "Partage d'\xe9cran"
|
|
498
513
|
},
|
|
514
|
+
blockedFeature: {
|
|
515
|
+
titleConnected: "Souscrire au plan Pro",
|
|
516
|
+
titleGuest: "Fonctionnalit\xe9 non disponible",
|
|
517
|
+
descriptionConnected: "Vous n'avez pas acc\xe8s \xe0 cette fonctionnalit\xe9. Souscrivez au plan Pro pour d\xe9bloquer toutes les fonctionnalit\xe9s de SnapCall.",
|
|
518
|
+
descriptionGuest: "Vous participez \xe0 un appel cr\xe9\xe9 avec la version gratuite de SnapCall. Cette fonctionnalit\xe9 n'est disponible qu'avec une version Pro.",
|
|
519
|
+
dismissGuest: "D'accord",
|
|
520
|
+
dismissConnected: "Souscrire \xe0 Pro"
|
|
521
|
+
},
|
|
499
522
|
copyLink: {
|
|
500
523
|
title: "Copier le lien",
|
|
501
524
|
description: "Copier le lien dans le presse-papiers",
|
|
@@ -605,6 +628,9 @@ const $c5472fb74fa04782$export$acb2a88f7d552ebf = {
|
|
|
605
628
|
const $b7790fb9e48df5c4$export$3486a10f30cf1ee4 = {
|
|
606
629
|
name: "Italiano",
|
|
607
630
|
translation: {
|
|
631
|
+
header: {
|
|
632
|
+
free: "Versione gratuita"
|
|
633
|
+
},
|
|
608
634
|
notifications: {
|
|
609
635
|
screensharingError: "Si \xe8 verificato un errore durante l'attivazione della condivisione dello schermo",
|
|
610
636
|
microphoneError: "Si \xe8 verificato un errore durante l'attivazione del microfono",
|
|
@@ -636,6 +662,14 @@ const $b7790fb9e48df5c4$export$3486a10f30cf1ee4 = {
|
|
|
636
662
|
pictureInPicture: "Immagine nell'immagine",
|
|
637
663
|
screenSharing: "Condivisione dello schermo"
|
|
638
664
|
},
|
|
665
|
+
blockedFeature: {
|
|
666
|
+
titleConnected: "L'aggiornamento a Pro",
|
|
667
|
+
titleGuest: "Funzione non disponibile",
|
|
668
|
+
descriptionConnected: "Su un piano gratuito, non puoi utilizzare questa funzione. Aggiorna il tuo piano per usufruire di tutte le funzionalit\xe0 in chiamata.",
|
|
669
|
+
descriptionGuest: "Stai partecipando a una chiamata creata con una versione gratuita di SnapCall. Questa funzione \xe8 disponibile solo con una versione Pro.",
|
|
670
|
+
dismissGuest: "Okay",
|
|
671
|
+
dismissConnected: "L'aggiornamento a Pro"
|
|
672
|
+
},
|
|
639
673
|
copyLink: {
|
|
640
674
|
title: "Copia il link",
|
|
641
675
|
description: "Copia il link negli appunti",
|
|
@@ -771,6 +805,8 @@ var $384d985bb9605c35$export$2e2bcd8739ae039 = (0, $3Sbms$i18next);
|
|
|
771
805
|
|
|
772
806
|
|
|
773
807
|
|
|
808
|
+
|
|
809
|
+
|
|
774
810
|
const $0f65a9eaf4a1e910$var$LogLevel = {
|
|
775
811
|
error: 1,
|
|
776
812
|
warn: 2,
|
|
@@ -1405,6 +1441,8 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
|
|
|
1405
1441
|
pendingDeviceRequest = {};
|
|
1406
1442
|
joinOptions = {};
|
|
1407
1443
|
devicesList = [];
|
|
1444
|
+
plan = undefined;
|
|
1445
|
+
permissions = [];
|
|
1408
1446
|
constructor(){
|
|
1409
1447
|
super();
|
|
1410
1448
|
navigator.mediaDevices.addEventListener("devicechange", ()=>this.onDeviceChange());
|
|
@@ -1459,10 +1497,8 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
|
|
|
1459
1497
|
}
|
|
1460
1498
|
};
|
|
1461
1499
|
peer.producersData.forEach((producer)=>{
|
|
1462
|
-
if (producer.deviceType === "microphone")
|
|
1463
|
-
|
|
1464
|
-
deviceState.microphone.muted = producer.paused;
|
|
1465
|
-
} else if (producer.deviceType === "screen") deviceState.screenshare.enabled = true;
|
|
1500
|
+
if (producer.deviceType === "microphone") deviceState.microphone.enabled = true;
|
|
1501
|
+
else if (producer.deviceType === "screen") deviceState.screenshare.enabled = true;
|
|
1466
1502
|
else if (producer.deviceType === "webcam") deviceState.camera.enabled = true;
|
|
1467
1503
|
});
|
|
1468
1504
|
peers.push({
|
|
@@ -1528,7 +1564,7 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
|
|
|
1528
1564
|
if (!this.peerId) this.peerId = (0, $3Sbms$v4)();
|
|
1529
1565
|
let url;
|
|
1530
1566
|
try {
|
|
1531
|
-
const { instanceId:
|
|
1567
|
+
const { streamer_instance: instanceId , plan: { permissions: permissions , name: name } , } = await fetch(`${this.config.apiUrl}/streams/${room}/info`, {
|
|
1532
1568
|
method: "get",
|
|
1533
1569
|
headers: {
|
|
1534
1570
|
"Content-Type": "application/json"
|
|
@@ -1537,6 +1573,8 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
|
|
|
1537
1573
|
if (response.ok) return response.json();
|
|
1538
1574
|
throw new Error("Invalid room ID");
|
|
1539
1575
|
});
|
|
1576
|
+
this.permissions = permissions;
|
|
1577
|
+
this.plan = name;
|
|
1540
1578
|
url = `${this.config.streamerServer}/${instanceId}/?roomId=${room}&peerId=${this.peerId}`;
|
|
1541
1579
|
} catch (roomError) {
|
|
1542
1580
|
const event = new $c31e3fb4360572af$var$SnapcallEvent("invalidRoom", {
|
|
@@ -1569,18 +1607,20 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
|
|
|
1569
1607
|
if (notification.method === "error") {
|
|
1570
1608
|
if (notification.data?.reason === "reached user limit") this.onCriticalError($c31e3fb4360572af$export$818d60b2e626da0c.USER_LIMIT);
|
|
1571
1609
|
} else if (notification.method === "newPeer") {
|
|
1572
|
-
const { id: id , profile: profile } = notification.data;
|
|
1610
|
+
const { id: id , profile: profile , muted: muted } = notification.data;
|
|
1573
1611
|
this.peers.set(id, {
|
|
1574
1612
|
id: id,
|
|
1575
1613
|
peerId: id,
|
|
1576
1614
|
profile: profile,
|
|
1615
|
+
muted: muted,
|
|
1577
1616
|
producersData: []
|
|
1578
1617
|
});
|
|
1579
1618
|
const event = new $c31e3fb4360572af$var$SnapcallEvent("newPeer", {
|
|
1580
1619
|
detail: {
|
|
1581
1620
|
peerId: id,
|
|
1582
1621
|
displayName: profile.name,
|
|
1583
|
-
profile: profile
|
|
1622
|
+
profile: profile,
|
|
1623
|
+
muted: muted
|
|
1584
1624
|
}
|
|
1585
1625
|
});
|
|
1586
1626
|
this.dispatchEvent(event);
|
|
@@ -1659,6 +1699,26 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
|
|
|
1659
1699
|
}
|
|
1660
1700
|
});
|
|
1661
1701
|
this.dispatchEvent(event);
|
|
1702
|
+
} else if (notification.method === "mute") {
|
|
1703
|
+
const { peerId: peerId , device: device } = notification.data;
|
|
1704
|
+
const event = new $c31e3fb4360572af$var$SnapcallEvent("mediaPause", {
|
|
1705
|
+
detail: {
|
|
1706
|
+
peerId: peerId,
|
|
1707
|
+
deviceType: device,
|
|
1708
|
+
paused: true
|
|
1709
|
+
}
|
|
1710
|
+
});
|
|
1711
|
+
this.dispatchEvent(event);
|
|
1712
|
+
} else if (notification.method === "unmute") {
|
|
1713
|
+
const { peerId: peerId , device: device } = notification.data;
|
|
1714
|
+
const event = new $c31e3fb4360572af$var$SnapcallEvent("mediaResume", {
|
|
1715
|
+
detail: {
|
|
1716
|
+
peerId: peerId,
|
|
1717
|
+
deviceType: device,
|
|
1718
|
+
paused: false
|
|
1719
|
+
}
|
|
1720
|
+
});
|
|
1721
|
+
this.dispatchEvent(event);
|
|
1662
1722
|
} else if (notification.method === "requestDeviceResult") {
|
|
1663
1723
|
const event = new $c31e3fb4360572af$var$SnapcallEvent(notification.method, {
|
|
1664
1724
|
detail: notification.data
|
|
@@ -1806,7 +1866,9 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
|
|
|
1806
1866
|
peerId: peer.id || peer.peerId
|
|
1807
1867
|
};
|
|
1808
1868
|
}),
|
|
1809
|
-
callId: callId
|
|
1869
|
+
callId: callId,
|
|
1870
|
+
plan: this.plan,
|
|
1871
|
+
permissions: this.permissions
|
|
1810
1872
|
}
|
|
1811
1873
|
}));
|
|
1812
1874
|
$c31e3fb4360572af$var$log.log("joinRoom", "peers", peers);
|
|
@@ -1944,28 +2006,30 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
|
|
|
1944
2006
|
this.dispatchEvent(event);
|
|
1945
2007
|
}
|
|
1946
2008
|
}
|
|
1947
|
-
|
|
2009
|
+
muteMicrophone() {
|
|
1948
2010
|
if (this.micProducer) {
|
|
1949
2011
|
this.onStopSpeak();
|
|
1950
|
-
this.micProducer
|
|
1951
|
-
await this.protoo.request("pauseProducer", {
|
|
1952
|
-
producerId: this.micProducer?.id
|
|
1953
|
-
});
|
|
2012
|
+
this.micProducer.pause();
|
|
1954
2013
|
this.muted = true;
|
|
2014
|
+
const device = "microphone";
|
|
2015
|
+
this.protoo.notify("mute", {
|
|
2016
|
+
device: device
|
|
2017
|
+
});
|
|
1955
2018
|
const event = new $c31e3fb4360572af$var$SnapcallEvent("microphoneMute", {
|
|
1956
2019
|
detail: {}
|
|
1957
2020
|
});
|
|
1958
2021
|
this.dispatchEvent(event);
|
|
1959
2022
|
}
|
|
1960
2023
|
}
|
|
1961
|
-
|
|
2024
|
+
unMuteMicrophone() {
|
|
1962
2025
|
if (this.micProducer) {
|
|
1963
2026
|
this.micProducer.resume();
|
|
1964
2027
|
this.resolvePendingDeviceRequest("microphone", true);
|
|
1965
|
-
await this.protoo.request("resumeProducer", {
|
|
1966
|
-
producerId: this.micProducer.id
|
|
1967
|
-
});
|
|
1968
2028
|
this.muted = false;
|
|
2029
|
+
const device = "microphone";
|
|
2030
|
+
this.protoo.notify("unmute", {
|
|
2031
|
+
device: device
|
|
2032
|
+
});
|
|
1969
2033
|
const event = new $c31e3fb4360572af$var$SnapcallEvent("microphoneUnmute", {
|
|
1970
2034
|
detail: {}
|
|
1971
2035
|
});
|
|
@@ -2126,6 +2190,7 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
|
|
|
2126
2190
|
this.mediaPipeOption = options;
|
|
2127
2191
|
}
|
|
2128
2192
|
async initVideoBackground() {
|
|
2193
|
+
if (!this.permissions.find((permission)=>permission === "virtual_background")) throw new Error("feature not allowed");
|
|
2129
2194
|
if (this.useVideoBackground === true) return;
|
|
2130
2195
|
this.useVideoBackground = true;
|
|
2131
2196
|
if (!this.webcamProducer || this.webcamProducer.closed) return;
|
|
@@ -2165,6 +2230,11 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
|
|
|
2165
2230
|
},
|
|
2166
2231
|
qualityIndex: 2
|
|
2167
2232
|
};
|
|
2233
|
+
await this.webcamProducer?.replaceTrack?.({
|
|
2234
|
+
track: null
|
|
2235
|
+
}).catch((err)=>{
|
|
2236
|
+
$c31e3fb4360572af$var$log.error("switchCamera", "clean track failed", err);
|
|
2237
|
+
});
|
|
2168
2238
|
const mediaStream = await this.handleGetUserMediaError("webcam", navigator.mediaDevices.getUserMedia({
|
|
2169
2239
|
video: {
|
|
2170
2240
|
deviceId: {
|
|
@@ -2302,6 +2372,7 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
|
|
|
2302
2372
|
this.dispatchEvent(event);
|
|
2303
2373
|
}
|
|
2304
2374
|
async enableScreenshare() {
|
|
2375
|
+
if (!this.permissions.find((permission)=>permission === "screen_sharing")) throw new Error("feature not allowed");
|
|
2305
2376
|
const stream = await this.handleGetUserMediaError("screen", navigator.mediaDevices.getDisplayMedia({
|
|
2306
2377
|
audio: false,
|
|
2307
2378
|
video: {
|
|
@@ -2394,11 +2465,13 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
|
|
|
2394
2465
|
} else $c31e3fb4360572af$var$log.error("requestVideo", `Video consumer ${consumer} not found`);
|
|
2395
2466
|
}
|
|
2396
2467
|
async captureVideo(videoElement) {
|
|
2397
|
-
|
|
2398
|
-
|
|
2399
|
-
|
|
2400
|
-
|
|
2401
|
-
|
|
2468
|
+
if (this.permissions.find((permission)=>permission === "instant_picture")) {
|
|
2469
|
+
let image;
|
|
2470
|
+
if (videoElement) image = await (0, $15ddac3121cc3a5d$export$674c90a250a8b2c5)(videoElement);
|
|
2471
|
+
else if (this.webcamProducer && this.webcamProducer.track) image = await (0, $15ddac3121cc3a5d$export$4a210166cc9cb64b)(this.webcamProducer.track);
|
|
2472
|
+
else throw new Error("no video to capture");
|
|
2473
|
+
return image;
|
|
2474
|
+
} else throw new Error("feature not allowed");
|
|
2402
2475
|
}
|
|
2403
2476
|
requestLocalVideo(element) {
|
|
2404
2477
|
$c31e3fb4360572af$var$log.info("requestLocalVideo");
|
|
@@ -2464,6 +2537,7 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
|
|
|
2464
2537
|
deviceType: deviceType
|
|
2465
2538
|
});
|
|
2466
2539
|
this.scaleVideoEncodingsParameter();
|
|
2540
|
+
const paused = peer ? peer.muted : false;
|
|
2467
2541
|
const event = new $c31e3fb4360572af$var$SnapcallEvent("mediaStart", {
|
|
2468
2542
|
detail: {
|
|
2469
2543
|
peerId: peerId,
|
|
@@ -2516,6 +2590,7 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
|
|
|
2516
2590
|
this.dispatchEvent(event);
|
|
2517
2591
|
}
|
|
2518
2592
|
async requestPeerDevice(remotePeerId, deviceType) {
|
|
2593
|
+
if (!this.permissions.find((permission)=>permission === "request_input")) throw new Error("feature not allowed");
|
|
2519
2594
|
return this.protoo.request("requestPeerDevice", {
|
|
2520
2595
|
remotePeerId: remotePeerId,
|
|
2521
2596
|
deviceType: deviceType
|
|
@@ -2684,6 +2759,9 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
|
|
|
2684
2759
|
...config
|
|
2685
2760
|
};
|
|
2686
2761
|
}
|
|
2762
|
+
getPermissions() {
|
|
2763
|
+
return this.permissions;
|
|
2764
|
+
}
|
|
2687
2765
|
}
|
|
2688
2766
|
|
|
2689
2767
|
|
|
@@ -3027,8 +3105,9 @@ const $2da9626742e3560b$export$d5424e4dfe4be076 = ({ color: color })=>/*#__PURE
|
|
|
3027
3105
|
|
|
3028
3106
|
const $e1413aacdaa5a03e$export$71b2224f1ce5e08e = (ref, action)=>{
|
|
3029
3107
|
(0, $3Sbms$useEffect)(()=>{
|
|
3108
|
+
const effectTimestamp = performance.now();
|
|
3030
3109
|
const onWindowClick = (event)=>{
|
|
3031
|
-
if (!ref?.current?.contains(event.target)) action();
|
|
3110
|
+
if (!ref?.current?.contains(event.target) && event.timeStamp > effectTimestamp) action();
|
|
3032
3111
|
};
|
|
3033
3112
|
if (ref?.current) {
|
|
3034
3113
|
window.addEventListener("click", onWindowClick);
|
|
@@ -3117,7 +3196,9 @@ const $59d1053cd71d481a$var$Menu = ({ categories: categories })=>{
|
|
|
3117
3196
|
children: category.title
|
|
3118
3197
|
}),
|
|
3119
3198
|
category.items.map((item)=>/*#__PURE__*/ (0, $3Sbms$jsxs)((0, $4ee077ee5e6fe3e7$export$44020656de05f2b4), {
|
|
3120
|
-
onClick:
|
|
3199
|
+
onClick: ()=>{
|
|
3200
|
+
item.action();
|
|
3201
|
+
},
|
|
3121
3202
|
danger: item.danger,
|
|
3122
3203
|
children: [
|
|
3123
3204
|
item.jsxIcon && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $4ee077ee5e6fe3e7$export$5912a8d3f489e1c1), {
|
|
@@ -3163,7 +3244,7 @@ const $ab29487ffcc05855$export$4dc2e6a0e59ffa13 = (0, $3Sbms$styledcomponents).s
|
|
|
3163
3244
|
font-size: 16px;
|
|
3164
3245
|
font-weight: 300;
|
|
3165
3246
|
line-height: 16px;
|
|
3166
|
-
color:
|
|
3247
|
+
color: rgba(255, 255, 255, 0.5);
|
|
3167
3248
|
margin-left: 5px;
|
|
3168
3249
|
position: relative;
|
|
3169
3250
|
bottom: 1px;
|
|
@@ -3538,7 +3619,7 @@ const $f235befa4cdc42d6$var$multiPiP = new (0, $e96d119a19ed0c6c$export$45fabd1c
|
|
|
3538
3619
|
const $f235befa4cdc42d6$var$browser = $3Sbms$parse(window.navigator.userAgent);
|
|
3539
3620
|
const $f235befa4cdc42d6$var$Header = ()=>{
|
|
3540
3621
|
const { t: t } = (0, $3Sbms$useTranslation)();
|
|
3541
|
-
const { setIsQuickConnectPopupVisible: setIsQuickConnectPopupVisible , setIsSettingsMenuVisible: setIsSettingsMenuVisible , setIsVirtualBackgroundPopupVisible: setIsVirtualBackgroundPopupVisible , options: options , muted: muted , streaming: streaming , } = (0, $3Sbms$useContext)((0, $5f30d8bf4f04621e$export$2e2bcd8739ae039));
|
|
3622
|
+
const { setIsQuickConnectPopupVisible: setIsQuickConnectPopupVisible , setIsSettingsMenuVisible: setIsSettingsMenuVisible , setIsVirtualBackgroundPopupVisible: setIsVirtualBackgroundPopupVisible , options: options , muted: muted , streaming: streaming , permissions: permissions , plan: plan , setBlockedFeaturePopupOpen: setBlockedFeaturePopupOpen , } = (0, $3Sbms$useContext)((0, $5f30d8bf4f04621e$export$2e2bcd8739ae039));
|
|
3542
3623
|
const { streams: streams } = (0, $cce9fd41d8a55a18$export$b5633a7cfbe42d9f)();
|
|
3543
3624
|
const [extraOptions, setExtraOptions] = (0, $3Sbms$useState)(options.extraSettingsOptions || []);
|
|
3544
3625
|
const onSetExtraSettingsOptions = (event)=>{
|
|
@@ -3586,14 +3667,17 @@ const $f235befa4cdc42d6$var$Header = ()=>{
|
|
|
3586
3667
|
(0, $c9e496369b59be7a$export$2f377c2162fd02b2).endCall();
|
|
3587
3668
|
};
|
|
3588
3669
|
const onScanQuickConnectClick = ()=>{
|
|
3589
|
-
|
|
3590
|
-
|
|
3670
|
+
if (permissions.find((permission)=>permission === "quick_connect")) {
|
|
3671
|
+
setIsQuickConnectPopupVisible(true);
|
|
3672
|
+
(0, $3Sbms$hotjarbrowser).event("quickConnectClick");
|
|
3673
|
+
} else setBlockedFeaturePopupOpen(true);
|
|
3591
3674
|
};
|
|
3592
3675
|
const onSettingsMenuClick = ()=>{
|
|
3593
3676
|
setIsSettingsMenuVisible(true);
|
|
3594
3677
|
};
|
|
3595
3678
|
const onVirtualBackgroundClick = ()=>{
|
|
3596
|
-
setIsVirtualBackgroundPopupVisible(true);
|
|
3679
|
+
if (permissions.find((permission)=>permission === "virtual_background")) setIsVirtualBackgroundPopupVisible(true);
|
|
3680
|
+
else setBlockedFeaturePopupOpen(true);
|
|
3597
3681
|
};
|
|
3598
3682
|
const computedCategories = [
|
|
3599
3683
|
{
|
|
@@ -3650,13 +3734,15 @@ const $f235befa4cdc42d6$var$Header = ()=>{
|
|
|
3650
3734
|
});
|
|
3651
3735
|
return computedCategories;
|
|
3652
3736
|
}, [
|
|
3737
|
+
t,
|
|
3738
|
+
options.sharedURL,
|
|
3653
3739
|
muted,
|
|
3654
3740
|
streaming,
|
|
3655
|
-
|
|
3741
|
+
permissions,
|
|
3656
3742
|
setIsQuickConnectPopupVisible,
|
|
3743
|
+
setBlockedFeaturePopupOpen,
|
|
3657
3744
|
setIsSettingsMenuVisible,
|
|
3658
|
-
setIsVirtualBackgroundPopupVisible,
|
|
3659
|
-
t,
|
|
3745
|
+
setIsVirtualBackgroundPopupVisible,
|
|
3660
3746
|
]);
|
|
3661
3747
|
return /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $ab29487ffcc05855$export$1e86fd0e1db89578), {
|
|
3662
3748
|
children: [
|
|
@@ -3666,7 +3752,10 @@ const $f235befa4cdc42d6$var$Header = ()=>{
|
|
|
3666
3752
|
size: options.logo?.size
|
|
3667
3753
|
}),
|
|
3668
3754
|
options.logo?.text && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $ab29487ffcc05855$export$4dc2e6a0e59ffa13), {
|
|
3669
|
-
children: options.logo
|
|
3755
|
+
children: options.logo?.text
|
|
3756
|
+
}),
|
|
3757
|
+
plan === "individual" && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $ab29487ffcc05855$export$4dc2e6a0e59ffa13), {
|
|
3758
|
+
children: `${options.logo?.text ? " \xb7 " : ""}${t("header.free")}`
|
|
3670
3759
|
})
|
|
3671
3760
|
]
|
|
3672
3761
|
}),
|
|
@@ -4502,7 +4591,7 @@ const $a53a1c6f62ad0fcc$var$StreamTile = ({ stream: stream , width: width = 0 ,
|
|
|
4502
4591
|
const [requestingDevice, setRequestingDevice] = (0, $3Sbms$useState)(null);
|
|
4503
4592
|
const [flashAnimation, setFlashAnimation] = (0, $3Sbms$useState)(false);
|
|
4504
4593
|
const requestingDeviceTimeoutRef = (0, $3Sbms$useRef)(null);
|
|
4505
|
-
const { selfPeerId: selfPeerId } = (0, $3Sbms$useContext)((0, $5f30d8bf4f04621e$export$2e2bcd8739ae039));
|
|
4594
|
+
const { selfPeerId: selfPeerId , permissions: permissions , setBlockedFeaturePopupOpen: setBlockedFeaturePopupOpen } = (0, $3Sbms$useContext)((0, $5f30d8bf4f04621e$export$2e2bcd8739ae039));
|
|
4506
4595
|
const { highlightedTile: highlightedTile } = (0, $cce9fd41d8a55a18$export$b5633a7cfbe42d9f)();
|
|
4507
4596
|
const isSharingScreen = highlightedTile?.type === "screenshare" && highlightedTile.peerId === selfPeerId;
|
|
4508
4597
|
const microphoneActive = stream.microphone && !stream.muted;
|
|
@@ -4514,16 +4603,22 @@ const $a53a1c6f62ad0fcc$var$StreamTile = ({ stream: stream , width: width = 0 ,
|
|
|
4514
4603
|
const onMouseEnter = ()=>setHover(true);
|
|
4515
4604
|
const onMouseLeave = ()=>setHover(false);
|
|
4516
4605
|
const requestMicrophone = ()=>{
|
|
4517
|
-
(
|
|
4518
|
-
|
|
4606
|
+
if (permissions.find((permission)=>permission === "request_input")) {
|
|
4607
|
+
(0, $c9e496369b59be7a$export$2f377c2162fd02b2).requestPeerDevice(stream.id, "microphone");
|
|
4608
|
+
setRequestingDevice("microphone");
|
|
4609
|
+
} else setBlockedFeaturePopupOpen(true);
|
|
4519
4610
|
};
|
|
4520
4611
|
const requestWebcam = ()=>{
|
|
4521
|
-
(
|
|
4522
|
-
|
|
4612
|
+
if (permissions.find((permission)=>permission === "request_input")) {
|
|
4613
|
+
(0, $c9e496369b59be7a$export$2f377c2162fd02b2).requestPeerDevice(stream.id, "webcam");
|
|
4614
|
+
setRequestingDevice("webcam");
|
|
4615
|
+
} else setBlockedFeaturePopupOpen(true);
|
|
4523
4616
|
};
|
|
4524
4617
|
const requestScreen = ()=>{
|
|
4525
|
-
(
|
|
4526
|
-
|
|
4618
|
+
if (permissions.find((permission)=>permission === "request_input")) {
|
|
4619
|
+
(0, $c9e496369b59be7a$export$2f377c2162fd02b2).requestPeerDevice(stream.id, "screen");
|
|
4620
|
+
setRequestingDevice("screen");
|
|
4621
|
+
} else setBlockedFeaturePopupOpen(true);
|
|
4527
4622
|
};
|
|
4528
4623
|
(0, $3Sbms$useEffect)(()=>{
|
|
4529
4624
|
if (!videoElementRef.current) throw new Error("videoElementRef not available");
|
|
@@ -5161,7 +5256,7 @@ const $5939a59dc7c96d41$var$SelfStreamTile = ({ isSomeonePresenting: isSomeonePr
|
|
|
5161
5256
|
const videoElementRef = (0, $3Sbms$useRef)(null);
|
|
5162
5257
|
const videoMediaProviderRef = (0, $3Sbms$useRef)(null);
|
|
5163
5258
|
const SelfTileRef = (0, $3Sbms$useRef)(null);
|
|
5164
|
-
const { videosContainerRef: videosContainerRef , remoteTilesContainerRef: remoteTilesContainerRef , profile: profile , muted: muted , streaming: streaming , orientation: orientation , options: options , } = (0, $3Sbms$useContext)((0, $5f30d8bf4f04621e$export$2e2bcd8739ae039));
|
|
5259
|
+
const { videosContainerRef: videosContainerRef , remoteTilesContainerRef: remoteTilesContainerRef , profile: profile , muted: muted , streaming: streaming , orientation: orientation , options: options , permissions: permissions , setBlockedFeaturePopupOpen: setBlockedFeaturePopupOpen , } = (0, $3Sbms$useContext)((0, $5f30d8bf4f04621e$export$2e2bcd8739ae039));
|
|
5165
5260
|
const { streams: streams } = (0, $cce9fd41d8a55a18$export$b5633a7cfbe42d9f)();
|
|
5166
5261
|
const [containerWidth, containerHeight] = (0, $af23c74942bdcae7$export$2b86bedf890eab8)(videosContainerRef.current);
|
|
5167
5262
|
const cursor = streaming && !extended ? "pointer" : "default";
|
|
@@ -5205,42 +5300,44 @@ const $5939a59dc7c96d41$var$SelfStreamTile = ({ isSomeonePresenting: isSomeonePr
|
|
|
5205
5300
|
}
|
|
5206
5301
|
};
|
|
5207
5302
|
const onSnapshotClick = async ()=>{
|
|
5208
|
-
if (
|
|
5209
|
-
if (!
|
|
5210
|
-
|
|
5211
|
-
|
|
5212
|
-
|
|
5213
|
-
|
|
5214
|
-
|
|
5215
|
-
|
|
5216
|
-
|
|
5217
|
-
|
|
5218
|
-
|
|
5219
|
-
|
|
5220
|
-
|
|
5221
|
-
|
|
5222
|
-
|
|
5223
|
-
|
|
5224
|
-
|
|
5225
|
-
|
|
5226
|
-
|
|
5227
|
-
|
|
5228
|
-
|
|
5303
|
+
if (permissions.find((permission)=>permission === "instant_picture")) {
|
|
5304
|
+
if (!snapshotAnimation && !snapshotImage) {
|
|
5305
|
+
if (!videoElementRef.current) throw new Error("Video element is not available");
|
|
5306
|
+
setSnapshotAnimation(true);
|
|
5307
|
+
const base64Image = await (0, $c9e496369b59be7a$export$2f377c2162fd02b2).captureVideo(videoElementRef.current);
|
|
5308
|
+
setSnapshotImage(base64Image);
|
|
5309
|
+
try {
|
|
5310
|
+
const { objectUrl: objectUrl } = await fetch(`${options.streamApiURL}/uploadSnapshot`, {
|
|
5311
|
+
method: "POST",
|
|
5312
|
+
body: JSON.stringify({
|
|
5313
|
+
file: base64Image
|
|
5314
|
+
})
|
|
5315
|
+
}).then((rawResponse)=>rawResponse.json());
|
|
5316
|
+
await (0, $c9e496369b59be7a$export$2f377c2162fd02b2).sendCustomMessageToAll({
|
|
5317
|
+
type: "snapshot",
|
|
5318
|
+
imageSrc: objectUrl
|
|
5319
|
+
});
|
|
5320
|
+
let notificationMessage = t("snapshot.sentToUsers");
|
|
5321
|
+
if (streams.length === 1) {
|
|
5322
|
+
const userName = streams[0].profile.name || t("misc.user");
|
|
5323
|
+
notificationMessage = t("snapshot.sentToUser", {
|
|
5324
|
+
user: userName
|
|
5325
|
+
});
|
|
5326
|
+
}
|
|
5327
|
+
(0, $a5146f9062d7bf28$export$3a57e165650c636f)(notificationMessage, {
|
|
5328
|
+
icon: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $6efc75079651494a$export$26fe7ec9351ff761), {
|
|
5329
|
+
src: base64Image
|
|
5330
|
+
}),
|
|
5331
|
+
duration: 2500
|
|
5332
|
+
});
|
|
5333
|
+
} catch (sendMessageError) {
|
|
5334
|
+
(0, $3Sbms$reacthottoast)(t("snapshot.error"), {
|
|
5335
|
+
className: "error"
|
|
5229
5336
|
});
|
|
5337
|
+
console.error(sendMessageError);
|
|
5230
5338
|
}
|
|
5231
|
-
(0, $a5146f9062d7bf28$export$3a57e165650c636f)(notificationMessage, {
|
|
5232
|
-
icon: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $6efc75079651494a$export$26fe7ec9351ff761), {
|
|
5233
|
-
src: base64Image
|
|
5234
|
-
}),
|
|
5235
|
-
duration: 2500
|
|
5236
|
-
});
|
|
5237
|
-
} catch (sendMessageError) {
|
|
5238
|
-
(0, $3Sbms$reacthottoast)(t("snapshot.error"), {
|
|
5239
|
-
className: "error"
|
|
5240
|
-
});
|
|
5241
|
-
console.error(sendMessageError);
|
|
5242
5339
|
}
|
|
5243
|
-
}
|
|
5340
|
+
} else setBlockedFeaturePopupOpen(true);
|
|
5244
5341
|
};
|
|
5245
5342
|
const onDeviceRequest = (event)=>{
|
|
5246
5343
|
const { peerId: peerId , deviceType: deviceType } = event.detail;
|
|
@@ -6451,7 +6548,8 @@ const $cdab47bb8796991e$var$Video = ()=>{
|
|
|
6451
6548
|
const { peers: peers } = event.detail;
|
|
6452
6549
|
const roomStreams = peers.map((peer)=>({
|
|
6453
6550
|
id: peer.peerId,
|
|
6454
|
-
profile: peer.profile
|
|
6551
|
+
profile: peer.profile,
|
|
6552
|
+
muted: peer.muted
|
|
6455
6553
|
}));
|
|
6456
6554
|
dispatch({
|
|
6457
6555
|
type: (0, $2884da8a64948e35$export$96a9662a3eda31f6).SET_STREAMS,
|
|
@@ -6780,7 +6878,7 @@ const $db92fac48417791a$var$HighlightButton = ()=>{
|
|
|
6780
6878
|
const { t: t } = (0, $3Sbms$useTranslation)();
|
|
6781
6879
|
const highlightMenuRef = (0, $3Sbms$useRef)(null);
|
|
6782
6880
|
const [isHighlightMenuOpen, setIsHighlightMenuOpen] = (0, $3Sbms$useState)(false);
|
|
6783
|
-
const { setIsYoutubePopupVisible: setIsYoutubePopupVisible , setIsLinksharePopupVisible: setIsLinksharePopupVisible , selfPeerId: selfPeerId } = (0, $3Sbms$useContext)((0, $5f30d8bf4f04621e$export$2e2bcd8739ae039));
|
|
6881
|
+
const { setIsYoutubePopupVisible: setIsYoutubePopupVisible , setIsLinksharePopupVisible: setIsLinksharePopupVisible , selfPeerId: selfPeerId , permissions: permissions , setBlockedFeaturePopupOpen: setBlockedFeaturePopupOpen , } = (0, $3Sbms$useContext)((0, $5f30d8bf4f04621e$export$2e2bcd8739ae039));
|
|
6784
6882
|
const { highlightedTile: highlightedTile , dispatch: dispatch } = (0, $cce9fd41d8a55a18$export$b5633a7cfbe42d9f)();
|
|
6785
6883
|
const isPresenting = Boolean(highlightedTile?.isGlobal && highlightedTile?.peerId === selfPeerId);
|
|
6786
6884
|
(0, $e1413aacdaa5a03e$export$71b2224f1ce5e08e)(highlightMenuRef, ()=>setIsHighlightMenuOpen(false));
|
|
@@ -6791,18 +6889,20 @@ const $db92fac48417791a$var$HighlightButton = ()=>{
|
|
|
6791
6889
|
else setIsHighlightMenuOpen((previousValue)=>!previousValue);
|
|
6792
6890
|
};
|
|
6793
6891
|
const onScreenshareClick = async ()=>{
|
|
6794
|
-
|
|
6795
|
-
|
|
6796
|
-
|
|
6797
|
-
|
|
6798
|
-
|
|
6799
|
-
|
|
6800
|
-
|
|
6801
|
-
|
|
6802
|
-
|
|
6803
|
-
|
|
6804
|
-
|
|
6805
|
-
|
|
6892
|
+
if (permissions.find((permission)=>permission === "screen_sharing")) {
|
|
6893
|
+
setIsHighlightMenuOpen(false);
|
|
6894
|
+
try {
|
|
6895
|
+
(0, $3Sbms$hotjarbrowser).event("screenshareClick");
|
|
6896
|
+
await (0, $c9e496369b59be7a$export$2f377c2162fd02b2).enableScreenshare();
|
|
6897
|
+
(0, $3Sbms$hotjarbrowser).event("enableScreenshare");
|
|
6898
|
+
} catch (screenshareError) {
|
|
6899
|
+
console.warn(screenshareError);
|
|
6900
|
+
(0, $3Sbms$hotjarbrowser).event("screenshareCancel");
|
|
6901
|
+
(0, $3Sbms$reacthottoast)(t("notifications.screensharingError"), {
|
|
6902
|
+
className: "error"
|
|
6903
|
+
});
|
|
6904
|
+
}
|
|
6905
|
+
} else setBlockedFeaturePopupOpen(true);
|
|
6806
6906
|
};
|
|
6807
6907
|
const onYoutubeClick = ()=>{
|
|
6808
6908
|
setIsHighlightMenuOpen(false);
|
|
@@ -6810,9 +6910,11 @@ const $db92fac48417791a$var$HighlightButton = ()=>{
|
|
|
6810
6910
|
(0, $3Sbms$hotjarbrowser).event("youtubeClick");
|
|
6811
6911
|
};
|
|
6812
6912
|
const onLinkshareClick = ()=>{
|
|
6813
|
-
|
|
6814
|
-
|
|
6815
|
-
|
|
6913
|
+
if (permissions.find((permission)=>permission === "share_link")) {
|
|
6914
|
+
setIsHighlightMenuOpen(false);
|
|
6915
|
+
setIsLinksharePopupVisible(true);
|
|
6916
|
+
(0, $3Sbms$hotjarbrowser).event("linkshareClick");
|
|
6917
|
+
} else setBlockedFeaturePopupOpen(true);
|
|
6816
6918
|
};
|
|
6817
6919
|
const menuCategories = [
|
|
6818
6920
|
{
|
|
@@ -7385,6 +7487,16 @@ const $910dd7d7d872a463$var$Checkmark = ()=>/*#__PURE__*/ (0, $3Sbms$jsx)("svg",
|
|
|
7385
7487
|
fill: "#fff"
|
|
7386
7488
|
})
|
|
7387
7489
|
});
|
|
7490
|
+
const $910dd7d7d872a463$export$f8e32eb727ccae99 = ()=>/*#__PURE__*/ (0, $3Sbms$jsx)("svg", {
|
|
7491
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
7492
|
+
width: "17",
|
|
7493
|
+
height: "18",
|
|
7494
|
+
fill: "none",
|
|
7495
|
+
children: /*#__PURE__*/ (0, $3Sbms$jsx)("path", {
|
|
7496
|
+
fill: "#fff",
|
|
7497
|
+
d: "M10.767 6.325 7.192 9.908 5.817 8.533a.833.833 0 1 0-1.175 1.175L6.6 11.675a.831.831 0 0 0 .592.241.833.833 0 0 0 .583-.241l4.166-4.167a.833.833 0 1 0-1.175-1.183ZM8.5.667a8.333 8.333 0 1 0 0 16.666A8.333 8.333 0 0 0 8.5.667Zm0 15a6.667 6.667 0 1 1 0-13.334 6.667 6.667 0 0 1 0 13.333Z"
|
|
7498
|
+
})
|
|
7499
|
+
});
|
|
7388
7500
|
var $910dd7d7d872a463$export$2e2bcd8739ae039 = $910dd7d7d872a463$var$Checkmark;
|
|
7389
7501
|
|
|
7390
7502
|
|
|
@@ -9110,6 +9222,170 @@ var $d493afe60dcea711$export$2e2bcd8739ae039 = $d493afe60dcea711$var$VirtualBack
|
|
|
9110
9222
|
|
|
9111
9223
|
|
|
9112
9224
|
|
|
9225
|
+
|
|
9226
|
+
|
|
9227
|
+
const $3a1d149ac4596979$var$modalHeight = (desktop)=>desktop ? "225px" : "237px";
|
|
9228
|
+
const $3a1d149ac4596979$export$6e1d6efa4a5a1be4 = (0, $3Sbms$styledcomponents).div`
|
|
9229
|
+
position: absolute;
|
|
9230
|
+
width: 100%;
|
|
9231
|
+
bottom: ${(props)=>props.open ? 0 : `-${$3a1d149ac4596979$var$modalHeight(props.desktop)}`};
|
|
9232
|
+
transition: all 0.4s;
|
|
9233
|
+
|
|
9234
|
+
${(props)=>{
|
|
9235
|
+
if (props.desktop) return (0, $3Sbms$css)`
|
|
9236
|
+
bottom: ${props.open ? 0 : `calc(-${$3a1d149ac4596979$var$modalHeight(props.desktop)} - (100vh / 2))`};
|
|
9237
|
+
height: 100%;
|
|
9238
|
+
display: flex;
|
|
9239
|
+
justify-content: center;
|
|
9240
|
+
align-items: center;
|
|
9241
|
+
`;
|
|
9242
|
+
}}
|
|
9243
|
+
`;
|
|
9244
|
+
const $3a1d149ac4596979$export$ed7a64955cfa5a69 = (0, $3Sbms$styledcomponents).div`
|
|
9245
|
+
display: flex;
|
|
9246
|
+
flex-direction: column;
|
|
9247
|
+
width: ${(props)=>props.desktop ? "375px" : "100%"};
|
|
9248
|
+
height: ${({ desktop: desktop })=>$3a1d149ac4596979$var$modalHeight(desktop)};
|
|
9249
|
+
max-height: 100vh;
|
|
9250
|
+
background-color: ${(props)=>props.theme.popupBackgroundPrimaryColor};
|
|
9251
|
+
color: ${(props)=>props.theme.popupTitleColor};
|
|
9252
|
+
border-radius: ${(props)=>props.desktop ? "20px" : "20px 20px 0 0"};
|
|
9253
|
+
box-sizing: border-box;
|
|
9254
|
+
`;
|
|
9255
|
+
const $3a1d149ac4596979$export$6334857f32bd1136 = (0, $3Sbms$styledcomponents).div`
|
|
9256
|
+
display: flex;
|
|
9257
|
+
justify-content: space-between;
|
|
9258
|
+
align-items: center;
|
|
9259
|
+
border-bottom: 2px solid #f7f7f7;
|
|
9260
|
+
`;
|
|
9261
|
+
const $3a1d149ac4596979$export$a27d59de3a7a8b8e = (0, $3Sbms$styledcomponents).div`
|
|
9262
|
+
display: flex;
|
|
9263
|
+
align-items: center;
|
|
9264
|
+
margin: 16px auto 16px 16px;
|
|
9265
|
+
`;
|
|
9266
|
+
const $3a1d149ac4596979$export$47ef2d2839b7d95a = (0, $3Sbms$styledcomponents).div`
|
|
9267
|
+
font-family: 'Lato';
|
|
9268
|
+
font-style: normal;
|
|
9269
|
+
font-weight: 600;
|
|
9270
|
+
font-size: 18px;
|
|
9271
|
+
line-height: 22px;
|
|
9272
|
+
letter-spacing: -0.02em;
|
|
9273
|
+
`;
|
|
9274
|
+
const $3a1d149ac4596979$export$219c8e53e235e8b7 = (0, $3Sbms$styledcomponents).button`
|
|
9275
|
+
display: flex;
|
|
9276
|
+
justify-content: center;
|
|
9277
|
+
align-items: center;
|
|
9278
|
+
border: none;
|
|
9279
|
+
background-color: ${(props)=>props.theme.popupBackgroundSecondaryColor};
|
|
9280
|
+
border-radius: 50%;
|
|
9281
|
+
height: 30px;
|
|
9282
|
+
width: 30px;
|
|
9283
|
+
padding: 0;
|
|
9284
|
+
margin: 16px 16px 16px auto;
|
|
9285
|
+
|
|
9286
|
+
svg {
|
|
9287
|
+
height: 15px;
|
|
9288
|
+
width: 15px;
|
|
9289
|
+
|
|
9290
|
+
path {
|
|
9291
|
+
fill: #000;
|
|
9292
|
+
}
|
|
9293
|
+
}
|
|
9294
|
+
`;
|
|
9295
|
+
const $3a1d149ac4596979$export$5197cd1b80f9682b = (0, $3Sbms$styledcomponents).div`
|
|
9296
|
+
display: flex;
|
|
9297
|
+
align-items: center;
|
|
9298
|
+
justify-content: center;
|
|
9299
|
+
font-size: 12px;
|
|
9300
|
+
color: #2d2d2d;
|
|
9301
|
+
margin: 16px 32px auto 32px;
|
|
9302
|
+
font-family: 'Lato';
|
|
9303
|
+
font-style: normal;
|
|
9304
|
+
font-weight: 400;
|
|
9305
|
+
font-size: 16px;
|
|
9306
|
+
line-height: 19px;
|
|
9307
|
+
text-align: left;
|
|
9308
|
+
letter-spacing: -0.02em;
|
|
9309
|
+
`;
|
|
9310
|
+
const $3a1d149ac4596979$export$5f79cadb3a637092 = (0, $3Sbms$styledcomponents).button`
|
|
9311
|
+
background-color: ${({ theme: theme })=>theme.primaryColor};
|
|
9312
|
+
padding: 8px 18px;
|
|
9313
|
+
height: 46px;
|
|
9314
|
+
max-width: 100%;
|
|
9315
|
+
border-radius: 15px;
|
|
9316
|
+
margin: 20px 32px 20px 32px;
|
|
9317
|
+
border: none;
|
|
9318
|
+
color: #fff;
|
|
9319
|
+
font-size: 16px;
|
|
9320
|
+
font-weight: 700;
|
|
9321
|
+
line-height: 18px;
|
|
9322
|
+
|
|
9323
|
+
span {
|
|
9324
|
+
display: flex;
|
|
9325
|
+
flex-direction: row;
|
|
9326
|
+
gap: 5px;
|
|
9327
|
+
alig-items: center;
|
|
9328
|
+
justify-content: center;
|
|
9329
|
+
}
|
|
9330
|
+
`;
|
|
9331
|
+
|
|
9332
|
+
|
|
9333
|
+
|
|
9334
|
+
|
|
9335
|
+
|
|
9336
|
+
|
|
9337
|
+
|
|
9338
|
+
const $7d1b559f928daf1f$var$BlockedFeaturePopup = ()=>{
|
|
9339
|
+
const { t: t } = (0, $3Sbms$useTranslation)();
|
|
9340
|
+
const { isBlockedFeaturePopupOpen: isBlockedFeaturePopupOpen , setBlockedFeaturePopupOpen: setBlockedFeaturePopupOpen , orientation: orientation , isAgent: isAgent } = (0, $3Sbms$useContext)((0, $5f30d8bf4f04621e$export$2e2bcd8739ae039));
|
|
9341
|
+
const popupRef = (0, $3Sbms$useRef)(null);
|
|
9342
|
+
const desktop = orientation === "landscape";
|
|
9343
|
+
(0, $e1413aacdaa5a03e$export$71b2224f1ce5e08e)(popupRef, ()=>{
|
|
9344
|
+
if (isBlockedFeaturePopupOpen) setBlockedFeaturePopupOpen(false);
|
|
9345
|
+
});
|
|
9346
|
+
return /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3a1d149ac4596979$export$6e1d6efa4a5a1be4), {
|
|
9347
|
+
open: isBlockedFeaturePopupOpen,
|
|
9348
|
+
desktop: desktop,
|
|
9349
|
+
children: /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $3a1d149ac4596979$export$ed7a64955cfa5a69), {
|
|
9350
|
+
ref: popupRef,
|
|
9351
|
+
desktop: desktop,
|
|
9352
|
+
children: [
|
|
9353
|
+
/*#__PURE__*/ (0, $3Sbms$jsxs)((0, $3a1d149ac4596979$export$6334857f32bd1136), {
|
|
9354
|
+
children: [
|
|
9355
|
+
/*#__PURE__*/ (0, $3Sbms$jsx)((0, $3a1d149ac4596979$export$a27d59de3a7a8b8e), {
|
|
9356
|
+
children: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3a1d149ac4596979$export$47ef2d2839b7d95a), {
|
|
9357
|
+
children: isAgent && t("blockedFeature.titleConnected") || t("blockedFeature.titleGuest")
|
|
9358
|
+
})
|
|
9359
|
+
}),
|
|
9360
|
+
/*#__PURE__*/ (0, $3Sbms$jsx)((0, $3a1d149ac4596979$export$219c8e53e235e8b7), {
|
|
9361
|
+
onClick: ()=>setBlockedFeaturePopupOpen(false),
|
|
9362
|
+
children: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $57ab7b9a012d9acd$export$2e2bcd8739ae039), {})
|
|
9363
|
+
})
|
|
9364
|
+
]
|
|
9365
|
+
}),
|
|
9366
|
+
/*#__PURE__*/ (0, $3Sbms$jsx)((0, $3a1d149ac4596979$export$5197cd1b80f9682b), {
|
|
9367
|
+
children: isAgent && t("blockedFeature.descriptionConnected") || t("blockedFeature.descriptionGuest")
|
|
9368
|
+
}),
|
|
9369
|
+
/*#__PURE__*/ (0, $3Sbms$jsx)((0, $3a1d149ac4596979$export$5f79cadb3a637092), {
|
|
9370
|
+
onClick: ()=>{
|
|
9371
|
+
setBlockedFeaturePopupOpen(false);
|
|
9372
|
+
if (isAgent) window.open(`${"https://app.snapcall.io"}/settings/workspace/plans-invoices`, "_blank");
|
|
9373
|
+
},
|
|
9374
|
+
children: /*#__PURE__*/ (0, $3Sbms$jsxs)("span", {
|
|
9375
|
+
children: [
|
|
9376
|
+
isAgent && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $910dd7d7d872a463$export$f8e32eb727ccae99), {}),
|
|
9377
|
+
isAgent && t("blockedFeature.dismissConnected") || t("blockedFeature.dismissGuest")
|
|
9378
|
+
]
|
|
9379
|
+
})
|
|
9380
|
+
})
|
|
9381
|
+
]
|
|
9382
|
+
})
|
|
9383
|
+
});
|
|
9384
|
+
};
|
|
9385
|
+
var $7d1b559f928daf1f$export$2e2bcd8739ae039 = $7d1b559f928daf1f$var$BlockedFeaturePopup;
|
|
9386
|
+
|
|
9387
|
+
|
|
9388
|
+
|
|
9113
9389
|
const $e1c48a389d8ac959$export$8376625f8bb18347 = (0, $3Sbms$styledcomponents).div`
|
|
9114
9390
|
position: absolute;
|
|
9115
9391
|
width: 100%;
|
|
@@ -9122,8 +9398,8 @@ const $e1c48a389d8ac959$export$8376625f8bb18347 = (0, $3Sbms$styledcomponents).d
|
|
|
9122
9398
|
|
|
9123
9399
|
|
|
9124
9400
|
const $01986a58bfba8001$var$Settings = ()=>{
|
|
9125
|
-
const { isQuickConnectPopupVisible: isQuickConnectPopupVisible , isSettingsMenuVisible: isSettingsMenuVisible , isYoutubePopupVisible: isYoutubePopupVisible , isLinksharePopupVisible: isLinksharePopupVisible , isVirtualBackgroundPopupVisible: isVirtualBackgroundPopupVisible , } = (0, $3Sbms$useContext)((0, $5f30d8bf4f04621e$export$2e2bcd8739ae039));
|
|
9126
|
-
const open = isQuickConnectPopupVisible || isSettingsMenuVisible || isYoutubePopupVisible || isLinksharePopupVisible || isVirtualBackgroundPopupVisible;
|
|
9401
|
+
const { isQuickConnectPopupVisible: isQuickConnectPopupVisible , isSettingsMenuVisible: isSettingsMenuVisible , isYoutubePopupVisible: isYoutubePopupVisible , isLinksharePopupVisible: isLinksharePopupVisible , isVirtualBackgroundPopupVisible: isVirtualBackgroundPopupVisible , isBlockedFeaturePopupOpen: isBlockedFeaturePopupOpen , } = (0, $3Sbms$useContext)((0, $5f30d8bf4f04621e$export$2e2bcd8739ae039));
|
|
9402
|
+
const open = isQuickConnectPopupVisible || isSettingsMenuVisible || isYoutubePopupVisible || isBlockedFeaturePopupOpen || isLinksharePopupVisible || isVirtualBackgroundPopupVisible;
|
|
9127
9403
|
return /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $e1c48a389d8ac959$export$8376625f8bb18347), {
|
|
9128
9404
|
open: open,
|
|
9129
9405
|
children: [
|
|
@@ -9131,7 +9407,8 @@ const $01986a58bfba8001$var$Settings = ()=>{
|
|
|
9131
9407
|
/*#__PURE__*/ (0, $3Sbms$jsx)((0, $c11e4c21ca692a16$export$2e2bcd8739ae039), {}),
|
|
9132
9408
|
/*#__PURE__*/ (0, $3Sbms$jsx)((0, $49372cd9190da903$export$2e2bcd8739ae039), {}),
|
|
9133
9409
|
/*#__PURE__*/ (0, $3Sbms$jsx)((0, $98933bbc579a3e66$export$2e2bcd8739ae039), {}),
|
|
9134
|
-
/*#__PURE__*/ (0, $3Sbms$jsx)((0, $d493afe60dcea711$export$2e2bcd8739ae039), {})
|
|
9410
|
+
/*#__PURE__*/ (0, $3Sbms$jsx)((0, $d493afe60dcea711$export$2e2bcd8739ae039), {}),
|
|
9411
|
+
/*#__PURE__*/ (0, $3Sbms$jsx)((0, $7d1b559f928daf1f$export$2e2bcd8739ae039), {})
|
|
9135
9412
|
]
|
|
9136
9413
|
});
|
|
9137
9414
|
};
|
|
@@ -10025,6 +10302,9 @@ const $26ed036cbc17809a$var$StreamUI = ({ options: options })=>{
|
|
|
10025
10302
|
const [userInteractionTriggered, setUserInteractionTriggered] = (0, $3Sbms$useState)(false);
|
|
10026
10303
|
const [containerWidth, containerHeight] = (0, $af23c74942bdcae7$export$2b86bedf890eab8)(streamUIContainerRef.current);
|
|
10027
10304
|
const [isBlockedDevicesPopupOpen, setBlockedDevicesPopupOpen] = (0, $3Sbms$useState)(false);
|
|
10305
|
+
const [isBlockedFeaturePopupOpen, setBlockedFeaturePopupOpen] = (0, $3Sbms$useState)(false);
|
|
10306
|
+
const [permissions, setPermissions] = (0, $3Sbms$useState)([]);
|
|
10307
|
+
const [plan, setPlan] = (0, $3Sbms$useState)(undefined);
|
|
10028
10308
|
const orientation = (containerWidth || window.screen.width) > (containerHeight || window.screen.height) ? "landscape" : "portrait";
|
|
10029
10309
|
const styledTheme = theme === "dark" ? (0, $52580db2e49cdd90$export$3e936a8db52a10a0) : (0, $52580db2e49cdd90$export$f30cb9bc4f736419);
|
|
10030
10310
|
const onWebcamUpdate = (event)=>{
|
|
@@ -10153,6 +10433,9 @@ const $26ed036cbc17809a$var$StreamUI = ({ options: options })=>{
|
|
|
10153
10433
|
(0, $3Sbms$useEffect)(()=>{
|
|
10154
10434
|
const onEnterRoom = async (event)=>{
|
|
10155
10435
|
const peerId = event.detail.peerId;
|
|
10436
|
+
setPlan(event.detail.plan);
|
|
10437
|
+
setPermissions(event.detail.permissions);
|
|
10438
|
+
console.log(event.detail.permissions);
|
|
10156
10439
|
setSelfPeerId(peerId);
|
|
10157
10440
|
try {
|
|
10158
10441
|
await (0, $15a01b611391c1e7$export$494039379563c94d)(options);
|
|
@@ -10171,6 +10454,8 @@ const $26ed036cbc17809a$var$StreamUI = ({ options: options })=>{
|
|
|
10171
10454
|
]);
|
|
10172
10455
|
return /*#__PURE__*/ (0, $3Sbms$jsx)((0, $5f30d8bf4f04621e$export$2e2bcd8739ae039).Provider, {
|
|
10173
10456
|
value: {
|
|
10457
|
+
plan: plan,
|
|
10458
|
+
permissions: permissions,
|
|
10174
10459
|
selfPeerId: selfPeerId,
|
|
10175
10460
|
streamUIContainerRef: streamUIContainerRef,
|
|
10176
10461
|
videosContainerRef: videosContainerRef,
|
|
@@ -10187,6 +10472,8 @@ const $26ed036cbc17809a$var$StreamUI = ({ options: options })=>{
|
|
|
10187
10472
|
setIsLinksharePopupVisible: setIsLinksharePopupVisible,
|
|
10188
10473
|
isVirtualBackgroundPopupVisible: isVirtualBackgroundPopupVisible,
|
|
10189
10474
|
setIsVirtualBackgroundPopupVisible: setIsVirtualBackgroundPopupVisible,
|
|
10475
|
+
isBlockedFeaturePopupOpen: isBlockedFeaturePopupOpen,
|
|
10476
|
+
setBlockedFeaturePopupOpen: setBlockedFeaturePopupOpen,
|
|
10190
10477
|
theme: theme,
|
|
10191
10478
|
setTheme: setTheme,
|
|
10192
10479
|
language: language,
|
|
@@ -10692,15 +10979,17 @@ const $24075a5d702d64b3$export$3f94917203ab7078 = {
|
|
|
10692
10979
|
init: ({ element: element , ...options })=>{
|
|
10693
10980
|
if (element?.nodeType !== window.Node.ELEMENT_NODE) throw new Error('The "element" property must be a valid element!');
|
|
10694
10981
|
const mergedOptions = (0, $365e765f9890497b$export$6969335ea1e4e77c)($24075a5d702d64b3$var$defaultOptions, options);
|
|
10695
|
-
|
|
10982
|
+
const rootElement = (0, $3Sbms$createRoot)(element);
|
|
10983
|
+
rootElement.render(/*#__PURE__*/ (0, $3Sbms$jsx)((0, $26ed036cbc17809a$export$2e2bcd8739ae039), {
|
|
10696
10984
|
options: mergedOptions
|
|
10697
|
-
})
|
|
10985
|
+
}));
|
|
10698
10986
|
if (mergedOptions.tracking) (0, $3Sbms$hotjarbrowser).init(3111933, 6);
|
|
10699
10987
|
},
|
|
10700
10988
|
initGreeting: (element, onGreetingDone)=>{
|
|
10701
|
-
|
|
10989
|
+
const rootElement = (0, $3Sbms$createRoot)(element);
|
|
10990
|
+
rootElement.render(/*#__PURE__*/ (0, $3Sbms$jsx)((0, $f8d57e3d223f5089$export$2e2bcd8739ae039), {
|
|
10702
10991
|
onGreetingDone: onGreetingDone
|
|
10703
|
-
})
|
|
10992
|
+
}));
|
|
10704
10993
|
},
|
|
10705
10994
|
setExtraSettingsOptions: (extraOptions)=>{
|
|
10706
10995
|
const event = new CustomEvent("streamUISetExtraSettingsOptions", {
|
|
@@ -10716,11 +11005,13 @@ const $24075a5d702d64b3$export$3f94917203ab7078 = {
|
|
|
10716
11005
|
terminateRoom: (0, $c9e496369b59be7a$export$2f377c2162fd02b2).terminateRoom.bind((0, $c9e496369b59be7a$export$2f377c2162fd02b2)),
|
|
10717
11006
|
generateToken: (0, $c9e496369b59be7a$export$2f377c2162fd02b2).generateToken.bind((0, $c9e496369b59be7a$export$2f377c2162fd02b2)),
|
|
10718
11007
|
addEventListener: (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener.bind((0, $c9e496369b59be7a$export$2f377c2162fd02b2)),
|
|
11008
|
+
removeEventListener: (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener.bind((0, $c9e496369b59be7a$export$2f377c2162fd02b2)),
|
|
10719
11009
|
dispatchEvent: (0, $c9e496369b59be7a$export$2f377c2162fd02b2).dispatchEvent.bind((0, $c9e496369b59be7a$export$2f377c2162fd02b2)),
|
|
10720
11010
|
getState: (0, $c9e496369b59be7a$export$2f377c2162fd02b2).getState.bind((0, $c9e496369b59be7a$export$2f377c2162fd02b2)),
|
|
10721
11011
|
setProfile: (0, $c9e496369b59be7a$export$2f377c2162fd02b2).setProfile.bind((0, $c9e496369b59be7a$export$2f377c2162fd02b2)),
|
|
10722
11012
|
/* Should not be documented */ setConfig: (0, $c9e496369b59be7a$export$2f377c2162fd02b2).setConfig.bind((0, $c9e496369b59be7a$export$2f377c2162fd02b2)),
|
|
10723
|
-
setLogLevel: (level)=>(0, $0f65a9eaf4a1e910$export$2e2bcd8739ae039).setLogLevel(level)
|
|
11013
|
+
setLogLevel: (level)=>(0, $0f65a9eaf4a1e910$export$2e2bcd8739ae039).setLogLevel(level),
|
|
11014
|
+
getPermissions: ()=>(0, $c9e496369b59be7a$export$2f377c2162fd02b2).getPermissions()
|
|
10724
11015
|
};
|
|
10725
11016
|
window.streamUI = $24075a5d702d64b3$export$3f94917203ab7078;
|
|
10726
11017
|
// Backward compatibility
|