@snapcall/stream-ui 1.11.4 → 1.12.0

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.
@@ -6,7 +6,7 @@ import $3Sbms$styledcomponents, {keyframes as $3Sbms$keyframes, ThemeProvider as
6
6
  import $3Sbms$react, {useState as $3Sbms$useState, useRef as $3Sbms$useRef, useEffect as $3Sbms$useEffect, useContext as $3Sbms$useContext, useMemo as $3Sbms$useMemo, createContext as $3Sbms$createContext, useReducer as $3Sbms$useReducer, useLayoutEffect as $3Sbms$useLayoutEffect, useCallback as $3Sbms$useCallback, forwardRef as $3Sbms$forwardRef} from "react";
7
7
  import "inobounce";
8
8
  import $3Sbms$i18next from "i18next";
9
- import {initReactI18next as $3Sbms$initReactI18next, useTranslation as $3Sbms$useTranslation} from "react-i18next";
9
+ import {initReactI18next as $3Sbms$initReactI18next, useTranslation as $3Sbms$useTranslation, Trans as $3Sbms$Trans} from "react-i18next";
10
10
  import {parse as $3Sbms$parse, getParser as $3Sbms$getParser} from "bowser";
11
11
  import {v4 as $3Sbms$v4} from "uuid";
12
12
  import {WebSocketTransport as $3Sbms$WebSocketTransport, Peer as $3Sbms$Peer} from "protoo-client";
@@ -18,11 +18,11 @@ import {createPortal as $3Sbms$createPortal} from "react-dom";
18
18
  import {toCanvas as $3Sbms$toCanvas} from "qrcode";
19
19
  import {useOverlayTriggerState as $3Sbms$useOverlayTriggerState, useToggleState as $3Sbms$useToggleState} from "react-stately";
20
20
  import $3Sbms$classnames from "classnames";
21
- import {useToggleButton as $3Sbms$useToggleButton, useFocusRing as $3Sbms$useFocusRing, useButton as $3Sbms$useButton} from "react-aria";
22
- import {useModalOverlay as $3Sbms$useModalOverlay, Overlay as $3Sbms$Overlay} from "@react-aria/overlays";
21
+ import {useToggleButton as $3Sbms$useToggleButton, useFocusRing as $3Sbms$useFocusRing, useModalOverlay as $3Sbms$useModalOverlay, Overlay as $3Sbms$Overlay, useButton as $3Sbms$useButton} from "react-aria";
23
22
  import {useViewportSize as $3Sbms$useViewportSize} from "@react-aria/utils";
24
23
  import {CSSTransition as $3Sbms$CSSTransition} from "react-transition-group";
25
24
  import {useHover as $3Sbms$useHover} from "@react-aria/interactions";
25
+ import {useModalOverlay as $3Sbms$useModalOverlay1, Overlay as $3Sbms$Overlay1} from "@react-aria/overlays";
26
26
  import $3Sbms$reactcontentloader from "react-content-loader";
27
27
 
28
28
  function $parcel$interopDefault(a) {
@@ -467,6 +467,8 @@ const $18fb8799f38eb407$export$84584c2a98eb6753 = {
467
467
  someone: "Someone",
468
468
  camera: "Camera",
469
469
  microphone: "Microphone",
470
+ photo: "Photo",
471
+ video: "Video",
470
472
  screen: "Screen",
471
473
  speaker: "Speaker",
472
474
  user: "User",
@@ -474,7 +476,10 @@ const $18fb8799f38eb407$export$84584c2a98eb6753 = {
474
476
  from: "From",
475
477
  accept: "Accept",
476
478
  decline: "Decline",
477
- you: "You"
479
+ you: "You",
480
+ cancel: "Cancel",
481
+ confirm: "Confirm",
482
+ remove: "Remove"
478
483
  },
479
484
  greeting: {
480
485
  mainTitle: "Welcome to SnapCall",
@@ -484,6 +489,46 @@ const $18fb8799f38eb407$export$84584c2a98eb6753 = {
484
489
  nameSubmit: "Join Conversation",
485
490
  footerTitle: "Powered by SnapCall",
486
491
  footerDescription: "Meet SnapCall, the easiest way to add real-time video to platform, product or service."
492
+ },
493
+ recorder: {
494
+ submissionTitle: "Thank you for your submission!",
495
+ submissionDescription: "Your photo/video has been successfully sent. We will review it and get back to you soon.",
496
+ confirmRemovalTitle: "Confirm removal",
497
+ confirmRemovalDescription: "Are you sure you want to remove this photo/video? This action cannot be undone.",
498
+ elementBeingProcessed: "Please wait a moment while your {{ type }} is being processed...",
499
+ waitVideo: "It may take up to 15 seconds for a video to be ready.",
500
+ elementCaptureSuccess: "{{ type }} successfully captured",
501
+ takeNewElement: "Take new {{ type }}",
502
+ sendElement: "Send {{ type }}",
503
+ sendElements: "Send {{ count }} elements",
504
+ allowAccess: "Allow access",
505
+ okay: "Okay",
506
+ allowCamMicAccess: "Allow access to cam/mic",
507
+ allowScreenShareAccess: "Allow access to screen sharing",
508
+ permissionDeniedTitle: "Something went wrong!",
509
+ permissionDeniedDescription: "Without camera and microphone access, you can't take photos or videos to share with the support team. Please grant access in your browser settings.",
510
+ photoInstructionsTitle: "Ready to take a shot?",
511
+ videoInstructionsTitle: "Ready to record a video?",
512
+ screenShareInstructionsTitle: "Ready to capture your screen?",
513
+ instructions: {
514
+ allowAccessOnPrompt: "When prompted, <1>allow access</1> to camera and microphone.",
515
+ tapPhotoButton: "Tap the <1 /><2> Camera button</2> to take a photo.",
516
+ multiplePhotos: "Don't hesitate to take multiple photos for more detail.",
517
+ reviewAndSendPhotos: "You can review your photo and then <1>send it when you're done.</1>",
518
+ tapVideoButton: "Tap the <1 /><2> Record button</2> to start a recording.",
519
+ videoSpeech: "You can <1>speak during</1> the recording for added detail.",
520
+ tapStopVideoButton: "When you're finished, tap the <1 /><2> Stop button</2>.",
521
+ reviewAndSendVideos: "You can review your video and then <1>send it when you're done</2>.",
522
+ tapScreenShareButton: "Tap on <1> Record my screen</1> to start a recording.",
523
+ tapStopScreenShareButton: "When you're finished, tap on <1>Stop recording</1>.",
524
+ reviewAnsSendScreenShare: "You can review your video and then <1>send it when you're done</1>."
525
+ },
526
+ switchToMobileTitle: "Switch to your mobile",
527
+ switchToMobileDescription: "Enjoy an even more convenient experience by using your phone to take photos and record videos.",
528
+ useDesktopVersion: "Use desktop version",
529
+ scanQRCode: "Scan this QR code with a compatible device.",
530
+ startScreenShareButton: "Record my screen",
531
+ stopScreenShareButton: "Stop recording"
487
532
  }
488
533
  }
489
534
  };
@@ -621,6 +666,8 @@ const $c5472fb74fa04782$export$acb2a88f7d552ebf = {
621
666
  someone: "Quelqu'un",
622
667
  camera: "Cam\xe9ra",
623
668
  microphone: "Micro",
669
+ photo: "Photo",
670
+ video: "Vid\xe9o",
624
671
  screen: "\xc9cran",
625
672
  speaker: "Haut-parleur",
626
673
  user: "Utilisateur",
@@ -628,7 +675,10 @@ const $c5472fb74fa04782$export$acb2a88f7d552ebf = {
628
675
  from: "Depuis",
629
676
  accept: "Accepter",
630
677
  decline: "D\xe9cliner",
631
- you: "Vous"
678
+ you: "Vous",
679
+ cancel: "Annuler",
680
+ confirm: "Confirmer",
681
+ remove: "Enlever"
632
682
  },
633
683
  greeting: {
634
684
  mainTitle: "Bienvenue sur SnapCall",
@@ -638,6 +688,46 @@ const $c5472fb74fa04782$export$acb2a88f7d552ebf = {
638
688
  nameSubmit: "Rejoindre la conversation",
639
689
  footerTitle: "Propuls\xe9 par SnapCall",
640
690
  footerDescription: "D\xe9couvrez SnapCall, ajoutez de la vid\xe9o en temps r\xe9el \xe0 n'importe quelle plateforme, produit ou service."
691
+ },
692
+ recorder: {
693
+ submissionTitle: "Merci pour votre soumission!",
694
+ submissionDescription: "Votre photo/vid\xe9o a \xe9t\xe9 envoy\xe9e avec succ\xe8s. Nous l'examinerons et reviendrons vers vous bient\xf4t.",
695
+ confirmRemovalTitle: "Confirmer la suppression",
696
+ confirmRemovalDescription: "Voulez-vous vraiment supprimer cette photo/vid\xe9o? Cette action ne peut pas \xeatre annul\xe9e.",
697
+ elementBeingProcessed: "Veuillez patienter un moment pendant que votre {{ type }} est en cours de traitement...",
698
+ waitVideo: "Cela peut prendre jusqu'\xe0 15 secondes pour qu'une vid\xe9o soit pr\xeate.",
699
+ elementCaptureSuccess: "{{ type }} captur\xe9e avec succ\xe8s",
700
+ takeNewElement: "Prendre une nouvelle {{ type }}",
701
+ sendElement: "Envoyer une {{ type }}",
702
+ sendElements: "Envoyer {{ count }} \xe9l\xe9ments",
703
+ allowAccess: "Permettre l'acc\xe8s",
704
+ okay: "D'accord",
705
+ allowCamMicAccess: "Autoriser l'acc\xe8s \xe0 la cam\xe9ra/au micro",
706
+ allowScreenShareAccess: "Autoriser l'acc\xe8s au partage d'\xe9cran",
707
+ permissionDeniedTitle: "Quelque chose s'est mal pass\xe9!",
708
+ permissionDeniedDescription: "Sans acc\xe8s \xe0 la cam\xe9ra et au microphone, vous ne pouvez pas prendre de photos ou de vid\xe9os \xe0 partager avec l'\xe9quipe d'assistance. Veuillez accorder l'acc\xe8s dans les param\xe8tres de votre navigateur.",
709
+ photoInstructionsTitle: "Pr\xeat \xe0 prendre une photo?",
710
+ videoInstructionsTitle: "Pr\xeat \xe0 enregistrer une vid\xe9o?",
711
+ screenShareInstructionsTitle: "Pr\xeat \xe0 capturer votre \xe9cran?",
712
+ instructions: {
713
+ allowAccessOnPrompt: "Lorsque vous y \xeates invit\xe9, <1>autorisez l'acc\xe8s</1> \xe0 la cam\xe9ra et au microphone.",
714
+ tapPhotoButton: "Appuyez sur le <1 /><2>bouton Appareil photo</2> pour prendre une photo.",
715
+ multiplePhotos: "N'h\xe9sitez pas \xe0 prendre plusieurs photos pour plus de d\xe9tails.",
716
+ reviewAndSendPhotos: "Vous pouvez revoir votre photo, puis <1>l'envoyer lorsque vous avez termin\xe9.</1>",
717
+ tapVideoButton: "Appuyez sur le <1 /><2>bouton d'enregistrement</2> pour d\xe9marrer un enregistrement.",
718
+ videoSpeech: "Vous pouvez <1>parler pendant</1> l'enregistrement pour plus de d\xe9tails.",
719
+ tapStopVideoButton: "Lorsque vous avez termin\xe9, appuyez sur le <1 /><2>bouton Arr\xeater</2>.",
720
+ reviewAndSendVideos: "Vous pouvez revoir votre vid\xe9o, puis <1>l'envoyer lorsque vous avez termin\xe9</2>.",
721
+ tapScreenShareButton: "Appuyez sur <1>Enregistrer mon \xe9cran</1> pour d\xe9marrer un enregistrement.",
722
+ tapStopScreenShareButton: "Lorsque vous avez termin\xe9, appuyez sur <1>Arr\xeater l'enregistrement</1>.",
723
+ reviewAnsSendScreenShare: "Vous pouvez revoir votre vid\xe9o, puis <1>l'envoyer lorsque vous avez termin\xe9</1>."
724
+ },
725
+ switchToMobileTitle: "Basculez vers votre mobile",
726
+ switchToMobileDescription: "Profitez d'une exp\xe9rience encore plus pratique en utilisant votre t\xe9l\xe9phone pour prendre des photos et enregistrer des vid\xe9os.",
727
+ useDesktopVersion: "Utiliser la version de bureau",
728
+ scanQRCode: "Scannez ce code QR avec un appareil compatible.",
729
+ startScreenShareButton: "Enregistrer mon \xe9cran",
730
+ stopScreenShareButton: "Arr\xeater d'enregistrer"
641
731
  }
642
732
  }
643
733
  };
@@ -779,6 +869,8 @@ const $b7790fb9e48df5c4$export$3486a10f30cf1ee4 = {
779
869
  someone: "Qualcuno",
780
870
  camera: "Telecamera",
781
871
  microphone: "Microfono",
872
+ photo: "Foto",
873
+ video: "Video",
782
874
  screen: "Schermo",
783
875
  speaker: "Altoparlante",
784
876
  user: "Utente",
@@ -786,7 +878,10 @@ const $b7790fb9e48df5c4$export$3486a10f30cf1ee4 = {
786
878
  from: "Da",
787
879
  accept: "Accettare",
788
880
  decline: "Declinare",
789
- you: "Voi"
881
+ you: "Voi",
882
+ cancel: "Annulla",
883
+ confirm: "Confermare",
884
+ remove: "Rimuovere"
790
885
  },
791
886
  greeting: {
792
887
  mainTitle: "Benvenuto a SnapCall",
@@ -796,6 +891,46 @@ const $b7790fb9e48df5c4$export$3486a10f30cf1ee4 = {
796
891
  nameSubmit: "Partecipa alla conversazione",
797
892
  footerTitle: "Offerto da SnapCall",
798
893
  footerDescription: "Incontrare SnapCall, il modo pi\xf9 semplice per aggiungere video in tempo reale a piattaforma, prodotto o servizio."
894
+ },
895
+ recorder: {
896
+ submissionTitle: "Grazie per la vostra presentazione!",
897
+ submissionDescription: "La tua foto/video \xe8 stato inviato con successo. Lo esamineremo e ti ricontatteremo presto.",
898
+ confirmRemovalTitle: "Conferma la rimozione",
899
+ confirmRemovalDescription: "Sei sicuro di voler rimuovere questa foto/video? Questa azione non pu\xf2 essere annullata.",
900
+ elementBeingProcessed: "Attendi un momento mentre la tua {{ type }} \xe8 in fase di elaborazione...",
901
+ waitVideo: "Potrebbero essere necessari fino a 15 secondi prima che un video sia pronto.",
902
+ elementCaptureSuccess: "{{ type }} catturato con successo",
903
+ takeNewElement: "Scatta una nuova {{ type }}",
904
+ sendElement: "Invia una {{ type }}",
905
+ sendElements: "Invia {{ count }} elementi",
906
+ allowAccess: "Consentire l'accesso",
907
+ okay: "Va bene",
908
+ allowCamMicAccess: "Consenti l'accesso a cam/microfono",
909
+ allowScreenShareAccess: "Consenti l'accesso alla condivisione dello schermo",
910
+ permissionDeniedTitle: "Qualcosa \xe8 andato storto!",
911
+ permissionDeniedDescription: "Senza l'accesso alla fotocamera e al microfono, non puoi scattare foto o registrare video da condividere con il team di supporto. Concedi l'accesso nelle impostazioni del tuo browser.",
912
+ photoInstructionsTitle: "Pronto a fare un tentativo?",
913
+ videoInstructionsTitle: "Pronto a registrare un video?",
914
+ screenShareInstructionsTitle: "Pronto a catturare il tuo schermo?",
915
+ instructions: {
916
+ allowAccessOnPrompt: "Quando richiesto, <1>consenti l'accesso</1> alla videocamera e al microfono.",
917
+ tapPhotoButton: "Tocca il <1 /><2> pulsante Fotocamera</2> per scattare una foto.",
918
+ multiplePhotos: "Non esitate a scattare pi\xf9 foto per maggiori dettagli.",
919
+ reviewAndSendPhotos: "Puoi rivedere la tua foto e poi <1>inviarla quando hai finito.</1>",
920
+ tapVideoButton: "Tocca il <1 /><2> pulsante Registra</2> per avviare una registrazione.",
921
+ videoSpeech: "Puoi <1>parlare durante</1> la registrazione per ulteriori dettagli.",
922
+ tapStopVideoButton: "Al termine, tocca il <1 /><2> pulsante Interrompi</2>.",
923
+ reviewAndSendVideos: "Puoi rivedere il tuo video e poi <1>inviarlo quando hai finito</2>.",
924
+ tapScreenShareButton: "Tocca <1> Registra il mio schermo</1> per avviare una registrazione.",
925
+ tapStopScreenShareButton: "Al termine, tocca <1>Interrompi registrazione</1>.",
926
+ reviewAnsSendScreenShare: "Puoi rivedere il tuo video e poi <1>inviarlo quando hai finito</1>."
927
+ },
928
+ switchToMobileTitle: "Passa al tuo cellulare",
929
+ switchToMobileDescription: "Goditi un'esperienza ancora pi\xf9 comoda utilizzando il telefono per scattare foto e registrare video.",
930
+ useDesktopVersion: "Usa la versione desktop",
931
+ scanQRCode: "Scansiona questo codice QR con un dispositivo compatibile.",
932
+ startScreenShareButton: "Registra il mio schermo",
933
+ stopScreenShareButton: "Interrompi la registrazione"
799
934
  }
800
935
  }
801
936
  };
@@ -1048,8 +1183,10 @@ var $82e31ca38889c079$export$2e2bcd8739ae039 = $82e31ca38889c079$var$AudioRender
1048
1183
  const $850842193b726422$export$218be676a714a9df = '<svg width="103" height="36" fill="none" xmlns="http://www.w3.org/2000/svg"><g opacity=".8" fill="#fff"><path d="M10.994 33.06c.903 0 1.658-.734 1.392-1.581a5.249 5.249 0 0 0-1.279-2.124 5.171 5.171 0 0 0-3.673-1.535 5.171 5.171 0 0 0-3.673 1.535c-.595.6-1.03 1.33-1.28 2.124-.265.847.49 1.582 1.393 1.582h7.12ZM10.65 16.2c-.902 0-1.658.735-1.392 1.582.25.794.685 1.524 1.28 2.124a5.171 5.171 0 0 0 3.672 1.535 5.172 5.172 0 0 0 3.674-1.535 5.25 5.25 0 0 0 1.279-2.124c.266-.847-.49-1.582-1.393-1.582h-7.12ZM14.21 31.455c0 .887.75 1.63 1.606 1.35a5.187 5.187 0 0 0 2.067-1.279 5.264 5.264 0 0 0 1.521-3.706c0-1.39-.547-2.723-1.52-3.705a5.187 5.187 0 0 0-2.068-1.278c-.856-.281-1.606.462-1.606 1.349v7.27ZM7.434 17.806c0-.887-.75-1.63-1.607-1.35a5.186 5.186 0 0 0-2.066 1.279 5.264 5.264 0 0 0-1.522 3.706c0 1.39.548 2.723 1.522 3.705a5.186 5.186 0 0 0 2.066 1.278c.857.281 1.607-.462 1.607-1.349v-7.27Z"/><path d="M32.965 31.098c-1.442 0-2.601-.227-3.478-.68-.865-.465-1.517-1.043-1.955-1.734a.416.416 0 0 1-.052-.187c0-.125.057-.227.173-.306l.986-.731a.286.286 0 0 1 .208-.085c.103 0 .201.062.294.187.773 1.224 2.07 1.836 3.893 1.836.796 0 1.471-.142 2.025-.425.565-.284.848-.737.848-1.36 0-.465-.161-.827-.485-1.088-.311-.26-.796-.493-1.453-.697-.6-.181-.975-.289-1.125-.323-.992-.283-1.707-.504-2.146-.663-1.107-.408-1.84-.878-2.198-1.41-.357-.534-.536-1.089-.536-1.667 0-.476.15-.986.45-1.53.311-.555.796-1.025 1.453-1.41.67-.397 1.506-.595 2.51-.595 1.05 0 1.932.13 2.647.39.716.25 1.396.67 2.042 1.258.081.08.121.159.121.238 0 .114-.057.204-.173.272l-1.107.731a.469.469 0 0 1-.225.085c-.104 0-.202-.05-.294-.153-.692-.725-1.644-1.088-2.856-1.088-.692 0-1.228.102-1.609.306-.37.204-.617.431-.744.68-.115.25-.173.47-.173.663 0 .408.162.737.485.986.323.25.801.476 1.436.68.058.023.502.153 1.332.391.52.136 1.056.29 1.61.46 1.21.396 2.019.9 2.422 1.512.416.612.623 1.201.623 1.768 0 .612-.15 1.196-.45 1.75-.288.556-.801 1.02-1.54 1.395-.727.362-1.713.544-2.959.544ZM44.114 21.766c.865 0 1.667.249 2.405.748.739.487 1.108 1.388 1.108 2.702v5.321a.364.364 0 0 1-.104.272c-.058.057-.144.085-.26.085H46.14a.423.423 0 0 1-.277-.085.407.407 0 0 1-.087-.272v-5.032c-.035-.646-.22-1.155-.554-1.53-.323-.373-.744-.56-1.263-.56-.37 0-.738.102-1.107.306-.358.192-.664.492-.918.9-.253.397-.403.896-.45 1.496v4.42a.365.365 0 0 1-.103.272c-.058.057-.145.085-.26.085h-1.125a.423.423 0 0 1-.276-.085.407.407 0 0 1-.087-.272v-8.193c0-.114.029-.199.087-.255a.378.378 0 0 1 .276-.102h1.125c.116 0 .202.034.26.102.069.056.103.141.103.255v.204c0 .079.012.141.035.187a.168.168 0 0 0 .121.05c.092 0 .214-.062.364-.186a4.02 4.02 0 0 1 1.038-.612c.38-.148.738-.221 1.073-.221ZM57.436 28.207c.023.34.081.607.173.8.093.18.289.322.589.424.184.068.277.165.277.29a.396.396 0 0 1-.052.17l-.485.951c-.092.204-.242.278-.45.221-.669-.147-1.13-.47-1.384-.969-.058-.124-.115-.187-.173-.187-.058 0-.121.046-.19.136-.6.714-1.575 1.071-2.925 1.071-.819 0-1.482-.141-1.99-.425-.496-.283-.848-.623-1.056-1.02-.207-.408-.311-.799-.311-1.173 0-.612.19-1.161.571-1.648.392-.488.975-.828 1.748-1.02.53-.125 1.269-.221 2.215-.29.646-.045 1.113-.09 1.401-.135.231-.034.335-.17.312-.408-.058-.51-.23-.918-.52-1.224-.276-.318-.743-.476-1.4-.476-.428 0-.837.09-1.23.272-.38.17-.674.47-.882.9-.104.216-.254.29-.45.222l-1.055-.29c-.185-.056-.277-.152-.277-.288 0-.034.011-.085.034-.153a3.292 3.292 0 0 1 1.367-1.564c.635-.397 1.46-.595 2.475-.595.992 0 1.834.255 2.526.765.693.498 1.062 1.224 1.108 2.176.011.453.017 1.06.017 1.819.012.759.017 1.308.017 1.648Zm-4.326 1.445c.312 0 .652-.073 1.021-.22.38-.148.715-.403 1.004-.766.3-.374.484-.872.554-1.495v-.034c0-.114-.035-.199-.104-.256-.07-.067-.162-.09-.277-.067l-.675.067c-.75.069-1.361.148-1.834.238-.462.08-.86.227-1.194.442a.984.984 0 0 0-.485.884c0 .465.208.782.623.952.416.17.871.255 1.367.255ZM64.486 21.766c1.107 0 1.967.26 2.578.782.611.51 1.027 1.116 1.246 1.819a6.83 6.83 0 0 1 .329 2.073c0 .692-.11 1.389-.329 2.091-.22.692-.635 1.298-1.246 1.82-.611.509-1.47.764-2.578.764-.9 0-1.65-.238-2.25-.714-.08-.08-.161-.119-.242-.119-.116 0-.173.096-.173.29v3.569c0 .113-.035.198-.104.255-.058.068-.144.102-.26.102H60.42a.378.378 0 0 1-.277-.102c-.058-.057-.086-.142-.086-.255V22.344c0-.114.028-.199.086-.255a.378.378 0 0 1 .277-.102h1.038c.116 0 .202.034.26.102.069.056.104.141.104.255 0 .09.011.164.034.22.035.046.075.069.122.069.057 0 .109-.023.155-.068.612-.533 1.396-.8 2.354-.8Zm-.173 7.785c.888 0 1.54-.3 1.955-.9.427-.601.64-1.338.64-2.21 0-.873-.213-1.61-.64-2.21-.415-.601-1.067-.902-1.955-.902-.877 0-1.518.3-1.921.901-.393.59-.589 1.326-.589 2.21 0 .884.197 1.627.589 2.227.403.59 1.044.884 1.92.884ZM76.268 31.097c-1.316 0-2.452-.277-3.41-.833a5.531 5.531 0 0 1-2.163-2.277c-.484-.975-.726-2.08-.726-3.315 0-1.236.242-2.335.727-3.298a5.507 5.507 0 0 1 2.163-2.295c.957-.555 2.094-.833 3.409-.833 1.246 0 2.324.25 3.236.748a5.437 5.437 0 0 1 2.163 2.09c.034.069.052.131.052.188 0 .125-.087.215-.26.272l-1.298.323a.39.39 0 0 1-.12.017c-.151 0-.266-.074-.347-.221-.715-1.156-1.857-1.734-3.426-1.734-.97 0-1.771.221-2.406.663a3.907 3.907 0 0 0-1.401 1.75c-.3.715-.45 1.491-.45 2.33 0 .838.15 1.615.45 2.329.3.713.767 1.291 1.401 1.733.635.442 1.437.663 2.406.663.911 0 1.701-.21 2.37-.628.681-.42 1.165-1.06 1.454-1.921.08-.216.225-.306.433-.272l1.315.17c.196.034.294.124.294.272 0 .022-.012.079-.035.17-.507 1.303-1.246 2.283-2.215 2.94-.957.646-2.163.97-3.616.97ZM91.216 28.207c.023.34.08.607.173.8.092.18.288.322.588.424.185.068.277.165.277.29a.396.396 0 0 1-.052.17l-.484.951c-.093.204-.243.278-.45.221-.67-.147-1.13-.47-1.385-.969-.057-.124-.115-.187-.173-.187-.057 0-.12.046-.19.136-.6.714-1.575 1.071-2.925 1.071-.819 0-1.482-.141-1.99-.425-.496-.283-.848-.623-1.055-1.02-.208-.408-.312-.799-.312-1.173 0-.612.19-1.161.571-1.648.393-.488.975-.828 1.748-1.02.53-.125 1.27-.221 2.215-.29.646-.045 1.113-.09 1.402-.135.23-.034.334-.17.311-.408-.057-.51-.23-.918-.519-1.224-.277-.318-.744-.476-1.401-.476-.427 0-.837.09-1.23.272-.38.17-.674.47-.882.9-.103.216-.254.29-.45.222l-1.055-.29c-.185-.056-.277-.152-.277-.288a.53.53 0 0 1 .034-.153 3.293 3.293 0 0 1 1.368-1.564c.634-.397 1.459-.595 2.474-.595.992 0 1.834.255 2.527.765.692.498 1.06 1.224 1.107 2.176.012.453.017 1.06.017 1.819.012.759.018 1.308.018 1.648Zm-4.326 1.445c.311 0 .651-.073 1.02-.22.381-.148.716-.403 1.004-.766.3-.374.485-.872.554-1.495v-.034c0-.114-.035-.199-.104-.256-.07-.067-.161-.09-.277-.067l-.675.067c-.75.069-1.36.148-1.834.238-.461.08-.86.227-1.194.442a.984.984 0 0 0-.484.884c0 .465.207.782.622.952.416.17.871.255 1.368.255ZM95.687 30.536a.364.364 0 0 1-.104.272c-.058.057-.144.085-.26.085h-1.125a.424.424 0 0 1-.277-.085.407.407 0 0 1-.086-.272V18.79c0-.114.029-.199.086-.255a.378.378 0 0 1 .277-.102h1.125c.116 0 .202.034.26.102.069.056.104.141.104.255v11.746ZM100.033 30.536a.364.364 0 0 1-.104.272c-.057.057-.144.085-.26.085h-1.124a.423.423 0 0 1-.277-.085.407.407 0 0 1-.086-.272V18.79c0-.114.028-.199.086-.255a.378.378 0 0 1 .277-.102h1.125c.115 0 .202.034.26.102.069.056.103.141.103.255v11.746Z" stroke="#fff" stroke-width=".5"/><path d="M43.151 8.686c.296 0 .554-.036.774-.108.22-.076.402-.182.546-.318.148-.14.258-.308.33-.504.072-.2.108-.422.108-.666a1.75 1.75 0 0 0-.108-.63 1.245 1.245 0 0 0-.324-.48 1.41 1.41 0 0 0-.546-.3 2.516 2.516 0 0 0-.78-.108h-1.206v3.114h1.206Zm0-4.362c.58 0 1.082.068 1.506.204.424.136.774.326 1.05.57.276.244.48.536.612.876.136.34.204.712.204 1.116 0 .42-.07.806-.21 1.158-.14.348-.35.648-.63.9s-.632.448-1.056.588c-.42.14-.912.21-1.476.21h-1.206V13h-1.614V4.324h2.82Zm6.819 2.424c.456 0 .87.074 1.242.222a2.692 2.692 0 0 1 1.578 1.626c.144.392.216.83.216 1.314 0 .488-.072.928-.216 1.32-.144.392-.35.726-.618 1.002a2.653 2.653 0 0 1-.96.636 3.333 3.333 0 0 1-1.242.222c-.46 0-.878-.074-1.254-.222a2.712 2.712 0 0 1-.966-.636 2.922 2.922 0 0 1-.618-1.002 3.807 3.807 0 0 1-.216-1.32c0-.484.072-.922.216-1.314.148-.392.354-.724.618-.996.268-.272.59-.482.966-.63a3.397 3.397 0 0 1 1.254-.222Zm0 5.202c.512 0 .89-.172 1.134-.516.248-.344.372-.848.372-1.512s-.124-1.17-.372-1.518c-.244-.348-.622-.522-1.134-.522-.52 0-.906.176-1.158.528-.248.348-.372.852-.372 1.512s.124 1.164.372 1.512c.252.344.638.516 1.158.516Zm12.85-5.106L60.866 13h-1.188c-.136 0-.23-.088-.282-.264L58.29 9.178c-.036-.12-.07-.238-.102-.354a5.729 5.729 0 0 1-.072-.36 6.81 6.81 0 0 1-.084.366c-.028.12-.06.24-.096.36l-1.122 3.546c-.048.176-.154.264-.318.264h-1.14l-1.95-6.156h1.182c.108 0 .2.026.276.078a.363.363 0 0 1 .15.198l.882 3.288c.044.18.082.356.114.528.036.172.066.344.09.516.044-.172.09-.344.138-.516l.162-.528 1.02-3.3a.382.382 0 0 1 .138-.198.429.429 0 0 1 .258-.078h.654c.104 0 .192.026.264.078a.363.363 0 0 1 .15.198l.99 3.3c.052.18.1.358.144.534.048.172.094.344.138.516.052-.34.126-.69.222-1.05l.906-3.288a.405.405 0 0 1 .15-.198.429.429 0 0 1 .258-.078h1.128Zm4.704 2.37c0-.192-.028-.372-.084-.54a1.25 1.25 0 0 0-.24-.45 1.096 1.096 0 0 0-.414-.3 1.358 1.358 0 0 0-.576-.114c-.428 0-.766.122-1.014.366-.244.244-.4.59-.468 1.038h2.796Zm-2.826.894c.024.316.08.59.168.822.088.228.204.418.348.57.144.148.314.26.51.336.2.072.42.108.66.108.24 0 .446-.028.618-.084a2.76 2.76 0 0 0 .456-.186 7.55 7.55 0 0 0 .342-.186.59.59 0 0 1 .288-.084c.124 0 .216.046.276.138l.426.54a2.536 2.536 0 0 1-.552.486 3.281 3.281 0 0 1-1.32.474 4.79 4.79 0 0 1-.666.048 3.33 3.33 0 0 1-1.194-.21 2.726 2.726 0 0 1-.96-.63 2.993 2.993 0 0 1-.642-1.032c-.156-.412-.234-.888-.234-1.428 0-.42.068-.814.204-1.182.136-.372.33-.694.582-.966.256-.276.566-.494.93-.654.368-.16.782-.24 1.242-.24.388 0 .746.062 1.074.186.328.124.61.306.846.546.236.236.42.528.552.876.136.344.204.738.204 1.182 0 .224-.024.376-.072.456-.048.076-.14.114-.276.114h-3.81Zm6.668-2.196c.192-.368.42-.656.684-.864a1.45 1.45 0 0 1 .936-.318c.284 0 .512.062.684.186l-.096 1.11a.294.294 0 0 1-.09.156.239.239 0 0 1-.15.042c-.06 0-.15-.01-.27-.03a2.01 2.01 0 0 0-.342-.03 1.11 1.11 0 0 0-.786.282c-.1.088-.19.196-.27.324a3.44 3.44 0 0 0-.216.438V13h-1.482V6.844h.87c.152 0 .258.028.318.084.06.052.1.148.12.288l.09.696Zm6.87 1.302c0-.192-.029-.372-.085-.54a1.25 1.25 0 0 0-.24-.45 1.096 1.096 0 0 0-.414-.3 1.358 1.358 0 0 0-.576-.114c-.428 0-.766.122-1.014.366-.244.244-.4.59-.468 1.038h2.796Zm-2.827.894c.024.316.08.59.168.822.088.228.204.418.348.57.144.148.314.26.51.336.2.072.42.108.66.108.24 0 .446-.028.618-.084a2.76 2.76 0 0 0 .456-.186 7.55 7.55 0 0 0 .342-.186.59.59 0 0 1 .288-.084c.124 0 .216.046.276.138l.426.54a2.536 2.536 0 0 1-.552.486 3.281 3.281 0 0 1-1.32.474 4.79 4.79 0 0 1-.666.048 3.33 3.33 0 0 1-1.194-.21 2.726 2.726 0 0 1-.96-.63 2.993 2.993 0 0 1-.642-1.032c-.156-.412-.234-.888-.234-1.428 0-.42.068-.814.204-1.182.136-.372.33-.694.582-.966.256-.276.566-.494.93-.654.368-.16.782-.24 1.242-.24.388 0 .746.062 1.074.186.328.124.61.306.846.546.236.236.42.528.552.876.136.344.204.738.204 1.182 0 .224-.024.376-.072.456-.048.076-.14.114-.276.114h-3.81Zm9.134-1.692a1.451 1.451 0 0 0-.552-.432 1.597 1.597 0 0 0-.636-.126c-.224 0-.426.042-.606.126a1.21 1.21 0 0 0-.462.384 1.8 1.8 0 0 0-.294.648c-.068.26-.102.568-.102.924 0 .36.028.666.084.918.06.248.144.452.252.612.108.156.24.27.396.342.156.068.33.102.522.102.308 0 .57-.064.786-.192.216-.128.42-.31.612-.546v-2.76Zm1.482-4.332V13h-.906c-.196 0-.32-.09-.372-.27l-.126-.594a3.09 3.09 0 0 1-.858.69c-.32.176-.694.264-1.122.264-.336 0-.644-.07-.924-.21a2.098 2.098 0 0 1-.726-.606 3.033 3.033 0 0 1-.468-.99 5.072 5.072 0 0 1-.162-1.344c0-.456.062-.88.186-1.272s.302-.732.534-1.02c.232-.288.51-.512.834-.672a2.384 2.384 0 0 1 1.092-.246c.344 0 .638.054.882.162.244.108.462.254.654.438V4.084h1.482Zm5.863 7.32c.168.204.35.348.546.432.2.084.41.126.63.126.228 0 .432-.04.612-.12.184-.084.34-.212.468-.384a1.93 1.93 0 0 0 .294-.666 4.05 4.05 0 0 0 .102-.972c0-.676-.112-1.164-.336-1.464-.224-.304-.546-.456-.966-.456-.284 0-.532.066-.744.198a2.38 2.38 0 0 0-.606.546v2.76Zm0-3.804a3.02 3.02 0 0 1 .822-.618c.304-.156.65-.234 1.038-.234.356 0 .676.07.96.21.288.14.532.342.732.606.204.26.36.576.468.948.108.372.162.79.162 1.254 0 .5-.062.954-.186 1.362a3.132 3.132 0 0 1-.534 1.05 2.4 2.4 0 0 1-.828.672c-.324.16-.684.24-1.08.24a2.103 2.103 0 0 1-.954-.216 1.891 1.891 0 0 1-.366-.246c-.108-.1-.212-.21-.312-.33l-.066.414c-.024.104-.066.178-.126.222a.37.37 0 0 1-.234.066h-.978V4.084h1.482V7.6Zm10.743-.756-3.354 7.848a.538.538 0 0 1-.174.234c-.068.056-.174.084-.318.084H97.68l1.152-2.472-2.49-5.694h1.302c.116 0 .206.028.27.084.068.056.118.12.15.192l1.308 3.192c.044.108.08.216.108.324.032.108.062.218.09.33a32.3 32.3 0 0 1 .108-.33c.036-.112.076-.222.12-.33l1.236-3.186a.437.437 0 0 1 .408-.276h1.188Z"/></g></svg>';
1049
1184
 
1050
1185
 
1051
- const $15ddac3121cc3a5d$var$getWatermarkedCanvas = (canvas)=>new Promise((resolve)=>{
1052
- const dpr = window.devicePixelRatio || 1;
1186
+ const $9ac119af65504970$export$eabbd7447140cfb = `<svg xmlns="http://www.w3.org/2000/svg" width="100" height="103"><path d="M92.527 39.465 22.312 1.87A15.549 15.549 0 0 0 14.777 0c-2.64.02-5.226.703-7.5 1.98a14.086 14.086 0 0 0-5.332 5.032A13.185 13.185 0 0 0 0 13.906v75.188c-.004 2.422.668 4.8 1.945 6.894 1.278 2.094 3.117 3.832 5.332 5.035a15.598 15.598 0 0 0 7.5 1.977 15.6 15.6 0 0 0 7.536-1.867l70.214-37.598c2.262-1.187 4.153-2.933 5.465-5.05A13.198 13.198 0 0 0 100 51.5c0-2.457-.691-4.867-2.008-6.984-1.312-2.118-3.203-3.86-5.465-5.051Zm0 0" style="stroke:none;fill-rule:nonzero;fill:#fff;fill-opacity:1"/></svg>`;
1187
+
1188
+
1189
+ const $15ddac3121cc3a5d$var$getWatermarkedCanvas = (canvas, dpr = 1)=>new Promise((resolve)=>{
1053
1190
  const context = canvas.getContext("2d");
1054
1191
  const svgBlob = new Blob([
1055
1192
  (0, $850842193b726422$export$218be676a714a9df)
@@ -1066,7 +1203,26 @@ const $15ddac3121cc3a5d$var$getWatermarkedCanvas = (canvas)=>new Promise((resolv
1066
1203
  };
1067
1204
  watermarkImage.src = blobUrl;
1068
1205
  });
1069
- const $15ddac3121cc3a5d$export$674c90a250a8b2c5 = async (video)=>{
1206
+ const $15ddac3121cc3a5d$var$addVideoPlayerWatermarkedCanvas = (canvas, dpr = 1)=>new Promise((resolve)=>{
1207
+ const context = canvas.getContext("2d");
1208
+ const svgBlob = new Blob([
1209
+ (0, $9ac119af65504970$export$eabbd7447140cfb)
1210
+ ], {
1211
+ type: "image/svg+xml;charset=utf-8"
1212
+ });
1213
+ const blobUrl = URL.createObjectURL(svgBlob);
1214
+ const watermarkImage = new Image();
1215
+ watermarkImage.onload = ()=>{
1216
+ const x = canvas.width / dpr / 2 - watermarkImage.width / 2;
1217
+ const y = canvas.height / dpr / 2 - watermarkImage.height / 2;
1218
+ context?.drawImage(watermarkImage, x, y);
1219
+ resolve(canvas);
1220
+ };
1221
+ watermarkImage.src = blobUrl;
1222
+ });
1223
+ const $15ddac3121cc3a5d$export$674c90a250a8b2c5 = async (video, options = {
1224
+ addPlayWatermark: false
1225
+ })=>{
1070
1226
  const { videoWidth: videoWidth , videoHeight: videoHeight } = video;
1071
1227
  const orientation = videoWidth > videoHeight ? "landscape" : "portrait";
1072
1228
  const sourceWidth = orientation === "portrait" ? videoWidth : videoHeight;
@@ -1080,10 +1236,13 @@ const $15ddac3121cc3a5d$export$674c90a250a8b2c5 = async (video)=>{
1080
1236
  canvas.height = sourceHeight * dpr;
1081
1237
  ctx?.scale(dpr, dpr);
1082
1238
  ctx?.drawImage(video, sourceX, sourceY, sourceWidth, sourceHeight, 0, 0, canvas.width / dpr, canvas.height / dpr);
1083
- const watermarkedCanvas = await $15ddac3121cc3a5d$var$getWatermarkedCanvas(canvas);
1239
+ const watermarkedCanvas = await $15ddac3121cc3a5d$var$getWatermarkedCanvas(canvas, window.devicePixelRatio);
1240
+ if (options.addPlayWatermark) return (await $15ddac3121cc3a5d$var$addVideoPlayerWatermarkedCanvas(canvas, window.devicePixelRatio)).toDataURL("image/jpeg");
1084
1241
  return watermarkedCanvas.toDataURL("image/jpeg");
1085
1242
  };
1086
- const $15ddac3121cc3a5d$export$4a210166cc9cb64b = async (src)=>{
1243
+ const $15ddac3121cc3a5d$export$4a210166cc9cb64b = async (src, options = {
1244
+ addPlayWatermark: false
1245
+ })=>{
1087
1246
  const video = document.createElement("video");
1088
1247
  const stream = new MediaStream();
1089
1248
  stream.addTrack(src);
@@ -1099,6 +1258,7 @@ const $15ddac3121cc3a5d$export$4a210166cc9cb64b = async (src)=>{
1099
1258
  canvas.width = video.width;
1100
1259
  ctx?.drawImage(video, 0, 0);
1101
1260
  const watermarkedCanvas = await $15ddac3121cc3a5d$var$getWatermarkedCanvas(canvas);
1261
+ if (options.addPlayWatermark) return (await $15ddac3121cc3a5d$var$addVideoPlayerWatermarkedCanvas(canvas)).toDataURL("image/jpeg");
1102
1262
  return watermarkedCanvas.toDataURL("image/jpeg");
1103
1263
  };
1104
1264
 
@@ -1414,6 +1574,49 @@ class $0148b6fd862a22e8$export$2e2bcd8739ae039 {
1414
1574
  }
1415
1575
 
1416
1576
 
1577
+ const $107ba89b5d0109ab$var$audioContextConstructor = window.AudioContext || window.webkitAudioContext;
1578
+ class $107ba89b5d0109ab$export$22ddc20344c01547 {
1579
+ audioSources = {};
1580
+ tracks = {};
1581
+ constructor(){
1582
+ this.audioContext = new $107ba89b5d0109ab$var$audioContextConstructor();
1583
+ this.audioDestination = this.audioContext.createMediaStreamDestination();
1584
+ }
1585
+ getSetting(identifier) {
1586
+ return this.tracks[identifier]?.getSettings();
1587
+ }
1588
+ removeTrack(identifier) {
1589
+ const track = this.tracks[identifier];
1590
+ if (track) {
1591
+ this.audioSources[identifier]?.disconnect();
1592
+ delete this.tracks[identifier];
1593
+ delete this.audioSources[identifier];
1594
+ track.stop();
1595
+ }
1596
+ }
1597
+ addTrack(identifier, track) {
1598
+ if (track.kind === "audio") {
1599
+ this.removeTrack(identifier);
1600
+ const stream = new MediaStream([
1601
+ track
1602
+ ]);
1603
+ const audioSource = this.audioContext.createMediaStreamSource(stream);
1604
+ this.audioSources[identifier] = audioSource;
1605
+ this.tracks[identifier] = track;
1606
+ if (this.audioDestination) audioSource.connect(this.audioDestination);
1607
+ }
1608
+ }
1609
+ getFinalTrack() {
1610
+ return this.audioDestination.stream.getTracks()[0];
1611
+ }
1612
+ removeAll() {
1613
+ Object.keys(this.tracks).forEach((identifier)=>{
1614
+ this.removeTrack(identifier);
1615
+ });
1616
+ }
1617
+ }
1618
+
1619
+
1417
1620
  const $c31e3fb4360572af$var$log = new (0, $0f65a9eaf4a1e910$export$2e2bcd8739ae039)("StreamerClient");
1418
1621
  const $c31e3fb4360572af$export$103bedf43ba882db = {
1419
1622
  WEBRTC_FAILED: "WRTC1",
@@ -1953,6 +2156,7 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
1953
2156
  this.audioLevel?.release();
1954
2157
  this.audioLevel = undefined;
1955
2158
  if (this.micProducer && this.micProducer.track) {
2159
+ this.audioMedia?.removeTrack("mic");
1956
2160
  this.micProducer?.track?.stop();
1957
2161
  $c31e3fb4360572af$var$log.log("switchMicrophone", "stopping previous track");
1958
2162
  }
@@ -1965,7 +2169,9 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
1965
2169
  }));
1966
2170
  this.audioLevel = new (0, $67e45b2e30dcc030$export$ea669869acd8f177)(stream, this);
1967
2171
  // this.audioLevel.analyse();
2172
+ this.audioMedia = this.audioMedia || new (0, $107ba89b5d0109ab$export$22ddc20344c01547)();
1968
2173
  const track = stream.getAudioTracks()[0];
2174
+ this.audioMedia.addTrack("mic", track);
1969
2175
  await this.micProducer?.replaceTrack({
1970
2176
  track: track
1971
2177
  });
@@ -2041,10 +2247,12 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
2041
2247
  const transport = await this.getTransport("audio", "send");
2042
2248
  this.audioLevel = new (0, $67e45b2e30dcc030$export$ea669869acd8f177)(stream, this);
2043
2249
  // this.audioLevel.analyse();
2250
+ this.audioMedia = this.audioMedia || new (0, $107ba89b5d0109ab$export$22ddc20344c01547)();
2044
2251
  const track = stream.getAudioTracks()[0];
2252
+ this.audioMedia.addTrack("mic", track);
2045
2253
  const deviceType = "microphone";
2046
2254
  const micProducer = await transport.produce({
2047
- track: track,
2255
+ track: this.audioMedia.getFinalTrack(),
2048
2256
  codecOptions: {
2049
2257
  opusStereo: true,
2050
2258
  opusDtx: true
@@ -2121,6 +2329,7 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
2121
2329
  this.mediaPipe.clean();
2122
2330
  this.mediaPipe = undefined;
2123
2331
  }
2332
+ this.audioMedia?.removeAll();
2124
2333
  this.webcamTrack?.stop();
2125
2334
  this.webcamTrack = null;
2126
2335
  this.protooTransport.close();
@@ -2469,10 +2678,13 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
2469
2678
  });
2470
2679
  this.dispatchEvent(event);
2471
2680
  }
2472
- async enableScreenshare() {
2681
+ async enableScreenshare(option = {
2682
+ audioTransportOption: "classic"
2683
+ }) {
2473
2684
  if (!this.permissions.find((permission)=>permission === "screen_sharing")) throw new Error("feature not allowed");
2685
+ if (option.audioTransportOption === "mix" && !this.micProducer) throw new Error("microphone not activated and audio mix transport requested");
2474
2686
  const stream = await this.handleGetUserMediaError("screen", navigator.mediaDevices.getDisplayMedia({
2475
- audio: true,
2687
+ audio: option.audioTransportOption !== "none",
2476
2688
  video: {
2477
2689
  displaySurface: "monitor",
2478
2690
  logicalSurface: true,
@@ -2492,13 +2704,23 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
2492
2704
  const audioTransport = await this.getTransport("audio", "send");
2493
2705
  const audioTrack = stream.getAudioTracks()[0];
2494
2706
  if (audioTrack) {
2495
- this.screenshareAudioProducer = await this.streamerMediasoup?.produceAudio(audioTransport, audioTrack, {
2496
- deviceType: deviceType,
2497
- share: true
2498
- });
2499
- this.screenshareVideoProducer?.on("transportclose", ()=>{
2500
- this.screenshareVideoProducer = undefined;
2501
- });
2707
+ if (option.audioTransportOption === "classic") {
2708
+ this.screenshareAudioProducer = await this.streamerMediasoup?.produceAudio(audioTransport, audioTrack, {
2709
+ deviceType: deviceType,
2710
+ share: true
2711
+ });
2712
+ this.screenshareVideoProducer?.on("transportclose", ()=>{
2713
+ this.screenshareVideoProducer = undefined;
2714
+ });
2715
+ } else if (option.audioTransportOption === "mix") {
2716
+ this.audioMedia = this.audioMedia || new (0, $107ba89b5d0109ab$export$22ddc20344c01547)();
2717
+ this.audioMedia.addTrack("screen", audioTrack);
2718
+ const finalTracks = this.audioMedia.getFinalTrack();
2719
+ // currently microphone producer has to be enabled before.
2720
+ if (finalTracks && this.micProducer) this.micProducer.replaceTrack({
2721
+ track: finalTracks
2722
+ });
2723
+ }
2502
2724
  }
2503
2725
  const track = stream.getVideoTracks()[0];
2504
2726
  const videoTransport = await this.getTransport("video", "send");
@@ -2525,6 +2747,7 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
2525
2747
  });
2526
2748
  this.screenshareVideoProducer = undefined;
2527
2749
  }
2750
+ this.audioMedia?.removeTrack("screen");
2528
2751
  if (this.screenshareAudioProducer) {
2529
2752
  this.screenshareAudioProducer.close();
2530
2753
  if (this.protoo.connected) await this.protoo.request("closeProducer", {
@@ -2586,17 +2809,32 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
2586
2809
  assetId: res.assetId
2587
2810
  };
2588
2811
  }
2812
+ async saveThumbnail(base64Image) {
2813
+ const { objectUrl: objectUrl } = await fetch(`${this.config.streamApiURL}/uploadSnapshot`, {
2814
+ method: "POST",
2815
+ body: JSON.stringify({
2816
+ file: base64Image
2817
+ })
2818
+ }).then((rawResponse)=>rawResponse.json());
2819
+ const res = await this.protoo.request("addThumbnail", {
2820
+ url: objectUrl
2821
+ });
2822
+ return {
2823
+ url: objectUrl,
2824
+ assetId: res.assetId
2825
+ };
2826
+ }
2589
2827
  async deleteCapture(assetId) {
2590
2828
  const res = await this.protoo.request("deleteCapture", {
2591
2829
  assetId: assetId
2592
2830
  });
2593
2831
  return res;
2594
2832
  }
2595
- async captureVideo(videoElement) {
2833
+ async captureVideo(videoElement, option) {
2596
2834
  if (this.permissions.find((permission)=>permission === "instant_picture")) {
2597
2835
  let image;
2598
- if (videoElement) image = await (0, $15ddac3121cc3a5d$export$674c90a250a8b2c5)(videoElement);
2599
- else if (this.webcamProducer && this.webcamProducer.track) image = await (0, $15ddac3121cc3a5d$export$4a210166cc9cb64b)(this.webcamProducer.track);
2836
+ if (videoElement) image = await (0, $15ddac3121cc3a5d$export$674c90a250a8b2c5)(videoElement, option);
2837
+ else if (this.webcamProducer && this.webcamProducer.track) image = await (0, $15ddac3121cc3a5d$export$4a210166cc9cb64b)(this.webcamProducer.track, option);
2600
2838
  else throw new Error("no video to capture");
2601
2839
  return image;
2602
2840
  } else throw new Error("feature not allowed");
@@ -2807,7 +3045,7 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
2807
3045
  return this.webcam;
2808
3046
  }
2809
3047
  getCurrentMicrophoneId() {
2810
- return this.micProducer?.track?.getSettings().deviceId;
3048
+ return this.audioMedia?.getSetting("mic") || this.micProducer?.track?.getSettings().deviceId;
2811
3049
  }
2812
3050
  getCurrentSpeakerId() {
2813
3051
  const audioRendererKeys = Object.keys(this.audioRenderers);
@@ -5614,13 +5852,12 @@ const $5939a59dc7c96d41$var$SelfStreamTile = ({ isSomeonePresenting: isSomeonePr
5614
5852
  ]
5615
5853
  }),
5616
5854
  !streaming && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $7ec04c1818c68245$export$f217faec90120a0c), {
5617
- children: /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $7ec04c1818c68245$export$6ddfb572d7b6d164), {
5618
- children: [
5619
- profile.name && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $7ec04c1818c68245$export$a2930b41faa750f4), {
5620
- children: profile.name.slice(0, 1).toUpperCase()
5621
- }),
5622
- !profile.name && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $57da43088f4a416a$export$2e2bcd8739ae039), {})
5623
- ]
5855
+ children: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $7ec04c1818c68245$export$6ddfb572d7b6d164), {
5856
+ children: profile.image ? /*#__PURE__*/ (0, $3Sbms$jsx)((0, $7ec04c1818c68245$export$a7a74ab5cffd1455), {
5857
+ src: profile.image
5858
+ }) : profile.name ? /*#__PURE__*/ (0, $3Sbms$jsx)((0, $7ec04c1818c68245$export$a2930b41faa750f4), {
5859
+ children: profile.name.slice(0, 1).toUpperCase()
5860
+ }) : /*#__PURE__*/ (0, $3Sbms$jsx)((0, $57da43088f4a416a$export$2e2bcd8739ae039), {})
5624
5861
  })
5625
5862
  }),
5626
5863
  !extended && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $6efc75079651494a$export$500c3c5544c37412), {
@@ -10482,6 +10719,8 @@ const $4fb4815baa04b470$export$914ddf2021ea8ee6 = (0, $3Sbms$styledcomponents).d
10482
10719
 
10483
10720
 
10484
10721
 
10722
+
10723
+
10485
10724
 
10486
10725
 
10487
10726
 
@@ -10527,6 +10766,61 @@ const $5a48b7481979330f$export$d2b052e7b4be1756 = /*#__PURE__*/ (0, $3Sbms$forwa
10527
10766
 
10528
10767
 
10529
10768
 
10769
+ const $91e337bf8187124b$export$a703eb468fcf7e69 = (props)=>{
10770
+ const { state: state , children: children } = props;
10771
+ const ref = (0, $3Sbms$useRef)(null);
10772
+ const { modalProps: modalProps , underlayProps: underlayProps } = (0, $3Sbms$useModalOverlay)({
10773
+ isDismissable: true,
10774
+ ...props
10775
+ }, state, ref);
10776
+ const [exited, setExited] = (0, $3Sbms$useState)(!state.isOpen);
10777
+ if (!(state.isOpen || !exited)) return null;
10778
+ return /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$Overlay), {
10779
+ children: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$CSSTransition), {
10780
+ in: state.isOpen,
10781
+ appear: true,
10782
+ onEntered: ()=>setExited(false),
10783
+ onExited: ()=>setExited(true),
10784
+ timeout: {
10785
+ enter: 0,
10786
+ exit: 300
10787
+ },
10788
+ classNames: {
10789
+ enter: "opacity-0",
10790
+ enterDone: "opacity-1 transition ease-in",
10791
+ exit: "opacity-0 transition ease-out"
10792
+ },
10793
+ children: /*#__PURE__*/ (0, $3Sbms$jsx)("div", {
10794
+ className: "fixed z-[100] inset-0 bg-black bg-opacity-90 flex justify-center items-center inter",
10795
+ ...underlayProps,
10796
+ children: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$CSSTransition), {
10797
+ in: state.isOpen,
10798
+ appear: true,
10799
+ nodeRef: ref,
10800
+ timeout: {
10801
+ enter: 0,
10802
+ exit: 300
10803
+ },
10804
+ classNames: {
10805
+ appear: "translate-y-2",
10806
+ appearDone: "translate-y-0 transition ease-in",
10807
+ exit: "translate-y-2 transition ease-out"
10808
+ },
10809
+ children: /*#__PURE__*/ (0, $3Sbms$jsx)("div", {
10810
+ ...modalProps,
10811
+ ref: ref,
10812
+ children: children
10813
+ })
10814
+ })
10815
+ })
10816
+ })
10817
+ });
10818
+ };
10819
+
10820
+
10821
+
10822
+
10823
+
10530
10824
 
10531
10825
 
10532
10826
 
@@ -10542,6 +10836,7 @@ const $0590ee3141e14968$export$353f5b6fc5456de1 = /*#__PURE__*/ (0, $3Sbms$forwa
10542
10836
  primary: (0, $3Sbms$classnames)(isActive ? "bg-primaryLight" : "bg-primary", "text-white disabled:bg-secondaryLight"),
10543
10837
  secondary: (0, $3Sbms$classnames)(isActive ? "bg-graySelected" : "bg-transparent", "text-primary border border-secondaryLight disabled:text-secondaryLight disabled:bg-graySelected"),
10544
10838
  basic: (0, $3Sbms$classnames)(isActive ? "bg-graySelected" : "bg-white", "text-primary disabled:text-secondaryLight disabled:bg-graySelected"),
10839
+ tertiary: (0, $3Sbms$classnames)(isActive ? "bg-tertiarySelected" : "bg-tertiary", "text-mainBlue disabled:opacity-50"),
10545
10840
  custom: ""
10546
10841
  };
10547
10842
  const sizeStyle = {
@@ -10569,12 +10864,6 @@ const $0590ee3141e14968$export$353f5b6fc5456de1 = /*#__PURE__*/ (0, $3Sbms$forwa
10569
10864
 
10570
10865
  function $c0bb66c3d546ed81$export$2b77a92f1a5ad772(props) {
10571
10866
  const { children: children , state: state , size: size = "small" , title: title , description: description , primaryAction: primaryAction , secondaryAction: secondaryAction , centered: centered = false } = props;
10572
- const ref = (0, $3Sbms$react).useRef(null);
10573
- const { modalProps: modalProps , underlayProps: underlayProps } = (0, $3Sbms$useModalOverlay)({
10574
- isDismissable: true,
10575
- ...props
10576
- }, state, ref);
10577
- const [exited, setExited] = (0, $3Sbms$useState)(!state.isOpen);
10578
10867
  const viewport = (0, $3Sbms$useViewportSize)();
10579
10868
  const maxHeight = viewport.height - 64;
10580
10869
  const modalSize = {
@@ -10582,96 +10871,60 @@ function $c0bb66c3d546ed81$export$2b77a92f1a5ad772(props) {
10582
10871
  medium: "max-w-[600px]",
10583
10872
  large: "max-w-[800px]"
10584
10873
  };
10585
- // Don't render anything if the modal is not open and we're not animating out.
10586
- if (!(state.isOpen || !exited)) return null;
10587
- return /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$Overlay), {
10588
- children: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$CSSTransition), {
10589
- in: state.isOpen,
10590
- appear: true,
10591
- onEntered: ()=>setExited(false),
10592
- onExited: ()=>setExited(true),
10593
- timeout: {
10594
- enter: 0,
10595
- exit: 300
10596
- },
10597
- classNames: {
10598
- enter: "opacity-0",
10599
- enterDone: "opacity-1 transition ease-in",
10600
- exit: "opacity-0 transition ease-out"
10874
+ return /*#__PURE__*/ (0, $3Sbms$jsx)((0, $91e337bf8187124b$export$a703eb468fcf7e69), {
10875
+ state: state,
10876
+ children: /*#__PURE__*/ (0, $3Sbms$jsx)("div", {
10877
+ className: (0, $3Sbms$classnames)("bg-white rounded-[10px] z-[1] overflow-x-auto focus:outline-none", modalSize[size]),
10878
+ style: {
10879
+ maxHeight: `${maxHeight}px`
10601
10880
  },
10602
- children: /*#__PURE__*/ (0, $3Sbms$jsx)("div", {
10603
- className: "fixed z-[100] inset-0 bg-black bg-opacity-90 flex justify-center items-center inter",
10604
- ...underlayProps,
10605
- children: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$CSSTransition), {
10606
- in: state.isOpen,
10607
- appear: true,
10608
- nodeRef: ref,
10609
- timeout: {
10610
- enter: 0,
10611
- exit: 300
10612
- },
10613
- classNames: {
10614
- appear: "translate-y-2",
10615
- appearDone: "translate-y-0 transition ease-in",
10616
- exit: "translate-y-2 transition ease-out"
10617
- },
10618
- children: /*#__PURE__*/ (0, $3Sbms$jsx)("div", {
10619
- ...modalProps,
10620
- ref: ref,
10621
- className: (0, $3Sbms$classnames)("bg-white rounded-[10px] z-[1] overflow-x-auto focus:outline-none", modalSize[size]),
10622
- style: {
10623
- maxHeight: `${maxHeight}px`
10624
- },
10625
- children: /*#__PURE__*/ (0, $3Sbms$jsxs)("div", {
10626
- className: "flex flex-col gap-5 px-5 py-[25px] max-h-[inherit]",
10627
- children: [
10628
- /*#__PURE__*/ (0, $3Sbms$jsxs)("div", {
10629
- className: "flex flex-col gap-5 overflow-auto",
10630
- children: [
10631
- /*#__PURE__*/ (0, $3Sbms$jsxs)("div", {
10632
- className: (0, $3Sbms$classnames)("flex flex-col gap-[5px]", {
10633
- "text-center": centered
10634
- }),
10635
- children: [
10636
- /*#__PURE__*/ (0, $3Sbms$jsx)("h2", {
10637
- className: "text-xl font-medium",
10638
- children: title
10639
- }),
10640
- description && /*#__PURE__*/ (0, $3Sbms$jsx)("p", {
10641
- className: "text-sm text-secondary",
10642
- children: description
10643
- })
10644
- ]
10645
- }),
10646
- children
10647
- ]
10881
+ children: /*#__PURE__*/ (0, $3Sbms$jsxs)("div", {
10882
+ className: "flex flex-col gap-5 px-5 py-[25px] max-h-[inherit]",
10883
+ children: [
10884
+ /*#__PURE__*/ (0, $3Sbms$jsxs)("div", {
10885
+ className: "flex flex-col gap-5 overflow-auto",
10886
+ children: [
10887
+ /*#__PURE__*/ (0, $3Sbms$jsxs)("div", {
10888
+ className: (0, $3Sbms$classnames)("flex flex-col gap-[5px]", {
10889
+ "text-center": centered
10648
10890
  }),
10649
- (primaryAction || secondaryAction) && /*#__PURE__*/ (0, $3Sbms$jsxs)("div", {
10650
- className: (0, $3Sbms$classnames)("flex justify-end gap-2.5", centered ? "justify-center" : "justify-end"),
10651
- children: [
10652
- typeof secondaryAction === "string" && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $0590ee3141e14968$export$353f5b6fc5456de1), {
10653
- variant: "secondary",
10654
- onPress: state.close,
10655
- fullWidth: centered,
10656
- children: secondaryAction
10657
- }),
10658
- typeof secondaryAction === "function" && secondaryAction({
10659
- close: state.close
10660
- }),
10661
- typeof primaryAction === "string" && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $0590ee3141e14968$export$353f5b6fc5456de1), {
10662
- onPress: state.close,
10663
- fullWidth: centered,
10664
- children: primaryAction
10665
- }),
10666
- typeof primaryAction === "function" && primaryAction({
10667
- close: state.close
10668
- })
10669
- ]
10670
- })
10671
- ]
10672
- })
10891
+ children: [
10892
+ /*#__PURE__*/ (0, $3Sbms$jsx)("h2", {
10893
+ className: "text-xl font-medium",
10894
+ children: title
10895
+ }),
10896
+ description && /*#__PURE__*/ (0, $3Sbms$jsx)("p", {
10897
+ className: "text-sm text-secondary",
10898
+ children: description
10899
+ })
10900
+ ]
10901
+ }),
10902
+ children
10903
+ ]
10904
+ }),
10905
+ (primaryAction || secondaryAction) && /*#__PURE__*/ (0, $3Sbms$jsxs)("div", {
10906
+ className: (0, $3Sbms$classnames)("flex justify-end gap-2.5", centered ? "justify-center" : "justify-end"),
10907
+ children: [
10908
+ typeof secondaryAction === "string" && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $0590ee3141e14968$export$353f5b6fc5456de1), {
10909
+ variant: "secondary",
10910
+ onPress: state.close,
10911
+ fullWidth: centered,
10912
+ children: secondaryAction
10913
+ }),
10914
+ typeof secondaryAction === "function" && secondaryAction({
10915
+ close: state.close
10916
+ }),
10917
+ typeof primaryAction === "string" && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $0590ee3141e14968$export$353f5b6fc5456de1), {
10918
+ onPress: state.close,
10919
+ fullWidth: centered,
10920
+ children: primaryAction
10921
+ }),
10922
+ typeof primaryAction === "function" && primaryAction({
10923
+ close: state.close
10924
+ })
10925
+ ]
10673
10926
  })
10674
- })
10927
+ ]
10675
10928
  })
10676
10929
  })
10677
10930
  });
@@ -10767,32 +11020,39 @@ const $96999d2514f71e51$var$InstructionRow = ({ children: children , index: inde
10767
11020
  ]
10768
11021
  });
10769
11022
  const $96999d2514f71e51$export$788cb893d96254c8 = ({ state: state , type: type })=>{
11023
+ const { t: t } = (0, $3Sbms$useTranslation)();
10770
11024
  const [permissionsState, setPermissionsState] = (0, $3Sbms$useState)("idle");
11025
+ (0, $3Sbms$useEffect)(()=>{
11026
+ const { deviceState: deviceState } = (0, $c9e496369b59be7a$export$2f377c2162fd02b2).getState();
11027
+ if (deviceState.screenshare.enabled && type === "screen") return setPermissionsState("granted");
11028
+ if (deviceState.camera.enabled && type !== "screen") return setPermissionsState("granted");
11029
+ setPermissionsState("idle");
11030
+ }, [
11031
+ type
11032
+ ]);
11033
+ const { deviceState: deviceState } = (0, $c9e496369b59be7a$export$2f377c2162fd02b2).getState();
10771
11034
  const [isRoomReady, setRoomReady] = (0, $3Sbms$useState)(false);
10772
11035
  const { orientation: orientation } = (0, $3Sbms$useContext)((0, $5f30d8bf4f04621e$export$2e2bcd8739ae039));
10773
11036
  const device = orientation === "landscape" ? "desktop" : "mobile";
10774
11037
  const videoLength = permissionsState === "granted" ? "short" : "full";
10775
- const videoType = type === "picture" ? "photo" : "video";
10776
- const onDeviceEnabled = ()=>setPermissionsState("granted");
11038
+ const videoType = type === "photo" ? "photo" : "video";
10777
11039
  const onEnterRoom = ()=>setRoomReady(true);
10778
11040
  const onLeaveRoom = ()=>setRoomReady(false);
10779
11041
  const ref = (0, $3Sbms$useRef)(null);
10780
11042
  const title = (0, $3Sbms$useMemo)(()=>{
10781
- if (permissionsState === "refused") return "Something went wrong!";
10782
- if (type === "picture") return "Ready to take a shot?";
10783
- return "Ready to record a video?";
11043
+ if (permissionsState === "refused") return t("recorder.permissionDeniedTitle");
11044
+ if (type === "photo") return t("recorder.photoInstructionsTitle");
11045
+ else if (type === "video") return t("recorder.videoInstructionsTitle");
11046
+ else return t("recorder.screenShareInstructionsTitle");
10784
11047
  }, [
10785
11048
  permissionsState,
10786
- type
11049
+ type,
11050
+ t
10787
11051
  ]);
10788
11052
  (0, $3Sbms$useEffect)(()=>{
10789
- (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("localVideoAvailable", onDeviceEnabled);
10790
- (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("microphoneEnabled", onDeviceEnabled);
10791
11053
  (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("enterRoom", onEnterRoom);
10792
11054
  (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("leaveRoom", onLeaveRoom);
10793
11055
  return ()=>{
10794
- (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("localVideoAvailable", onDeviceEnabled);
10795
- (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("microphoneEnabled", onDeviceEnabled);
10796
11056
  (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("enterRoom", onEnterRoom);
10797
11057
  (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("leaveRoom", onLeaveRoom);
10798
11058
  };
@@ -10807,36 +11067,50 @@ const $96999d2514f71e51$export$788cb893d96254c8 = ({ state: state , type: type
10807
11067
  children: permissionsState === "refused" ? /*#__PURE__*/ (0, $3Sbms$jsx)((0, $0590ee3141e14968$export$353f5b6fc5456de1), {
10808
11068
  fullWidth: true,
10809
11069
  onPress: ()=>window.location.reload(),
10810
- children: "Allow access"
11070
+ children: t("recorder.allowAccess")
10811
11071
  }) : /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$Fragment), {
10812
11072
  children: permissionsState === "granted" ? /*#__PURE__*/ (0, $3Sbms$jsx)((0, $0590ee3141e14968$export$353f5b6fc5456de1), {
10813
11073
  fullWidth: true,
10814
11074
  onPress: state.close,
10815
- children: "Okay"
11075
+ children: t("recorder.okay")
10816
11076
  }) : /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $0590ee3141e14968$export$353f5b6fc5456de1), {
10817
11077
  fullWidth: true,
10818
11078
  isDisabled: permissionsState === "requesting" || isRoomReady === false,
10819
11079
  onPress: async ()=>{
10820
11080
  setPermissionsState("requesting");
10821
11081
  try {
10822
- const mediaResult = await navigator.mediaDevices.getUserMedia({
10823
- audio: true,
10824
- video: true
10825
- });
10826
- mediaResult.getTracks().forEach((track)=>track.stop());
10827
- await (0, $c9e496369b59be7a$export$2f377c2162fd02b2).enableMicrophone();
10828
- await (0, $c9e496369b59be7a$export$2f377c2162fd02b2).enableVideo({
10829
- resolution: "vga",
10830
- frameRate: 20,
10831
- facingMode: "environment"
10832
- });
10833
- } catch {
11082
+ if (!deviceState.microphone.enabled) {
11083
+ const mediaResult = await navigator.mediaDevices.getUserMedia({
11084
+ audio: true,
11085
+ video: type !== "screen"
11086
+ });
11087
+ mediaResult.getTracks().forEach((track)=>track.stop());
11088
+ }
11089
+ if (!deviceState.microphone.enabled) await (0, $c9e496369b59be7a$export$2f377c2162fd02b2).enableMicrophone();
11090
+ if (!deviceState.camera.enabled && type !== "screen") {
11091
+ await (0, $c9e496369b59be7a$export$2f377c2162fd02b2).disableScreenshare();
11092
+ await (0, $c9e496369b59be7a$export$2f377c2162fd02b2).enableVideo({
11093
+ resolution: "vga",
11094
+ frameRate: 20,
11095
+ facingMode: "environment"
11096
+ });
11097
+ }
11098
+ if (!deviceState.screenshare.enabled && type === "screen") {
11099
+ await (0, $c9e496369b59be7a$export$2f377c2162fd02b2).disableVideo();
11100
+ await (0, $c9e496369b59be7a$export$2f377c2162fd02b2).enableScreenshare({
11101
+ audioTransportOption: "mix"
11102
+ });
11103
+ }
11104
+ setPermissionsState("granted");
11105
+ state.close();
11106
+ } catch (error) {
11107
+ console.log("error", error);
10834
11108
  setPermissionsState("refused");
10835
11109
  }
10836
11110
  },
10837
11111
  children: [
10838
11112
  /*#__PURE__*/ (0, $3Sbms$jsx)((0, $910dd7d7d872a463$export$2e2bcd8739ae039), {}),
10839
- "Allow access to cam/mic"
11113
+ type !== "screen" ? t("recorder.allowCamMicAccess") : t("recorder.allowScreenShareAccess")
10840
11114
  ]
10841
11115
  })
10842
11116
  })
@@ -10848,51 +11122,61 @@ const $96999d2514f71e51$export$788cb893d96254c8 = ({ state: state , type: type
10848
11122
  className: "flex flex-col gap-[10px]",
10849
11123
  ref: ref,
10850
11124
  children: permissionsState === "refused" ? /*#__PURE__*/ (0, $3Sbms$jsx)($96999d2514f71e51$var$Text, {
10851
- children: "Without camera and microphone access, you can't take photos or videos to share with the support team. Please grant access in your browser settings."
11125
+ children: t("recorder.permissionDeniedDescription")
10852
11126
  }) : /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $3Sbms$Fragment), {
10853
11127
  children: [
10854
11128
  permissionsState !== "granted" && /*#__PURE__*/ (0, $3Sbms$jsx)($96999d2514f71e51$var$InstructionRow, {
10855
11129
  index: 1,
10856
- children: /*#__PURE__*/ (0, $3Sbms$jsxs)($96999d2514f71e51$var$Text, {
10857
- children: [
10858
- "When prompted, ",
10859
- /*#__PURE__*/ (0, $3Sbms$jsx)($96999d2514f71e51$var$Bold, {
10860
- children: "allow access"
10861
- }),
10862
- " to camera and microphone."
10863
- ]
11130
+ children: /*#__PURE__*/ (0, $3Sbms$jsx)($96999d2514f71e51$var$Text, {
11131
+ children: /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $3Sbms$Trans), {
11132
+ i18nKey: "recorder.instructions.allowAccessOnPrompt",
11133
+ children: [
11134
+ "When prompted, ",
11135
+ /*#__PURE__*/ (0, $3Sbms$jsx)($96999d2514f71e51$var$Bold, {
11136
+ children: "allow access"
11137
+ }),
11138
+ " to camera and microphone."
11139
+ ]
11140
+ })
10864
11141
  })
10865
11142
  }),
10866
- type === "picture" && /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $3Sbms$Fragment), {
11143
+ type === "photo" && /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $3Sbms$Fragment), {
10867
11144
  children: [
10868
11145
  /*#__PURE__*/ (0, $3Sbms$jsx)($96999d2514f71e51$var$InstructionRow, {
10869
11146
  index: 1 + permissionsInstructionIndex,
10870
- children: /*#__PURE__*/ (0, $3Sbms$jsxs)($96999d2514f71e51$var$Text, {
10871
- children: [
10872
- "Tap the ",
10873
- /*#__PURE__*/ (0, $3Sbms$jsx)((0, $444e1dd9fa8f6883$export$dce36e07153365d), {}),
10874
- /*#__PURE__*/ (0, $3Sbms$jsx)($96999d2514f71e51$var$Bold, {
10875
- children: " Camera button"
10876
- }),
10877
- " to take a photo."
10878
- ]
11147
+ children: /*#__PURE__*/ (0, $3Sbms$jsx)($96999d2514f71e51$var$Text, {
11148
+ children: /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $3Sbms$Trans), {
11149
+ i18nKey: "recorder.instructions.tapPhotoButton",
11150
+ com: true,
11151
+ children: [
11152
+ "Tap the ",
11153
+ /*#__PURE__*/ (0, $3Sbms$jsx)((0, $444e1dd9fa8f6883$export$dce36e07153365d), {}),
11154
+ /*#__PURE__*/ (0, $3Sbms$jsx)($96999d2514f71e51$var$Bold, {
11155
+ children: " Camera button"
11156
+ }),
11157
+ " to take a photo."
11158
+ ]
11159
+ })
10879
11160
  })
10880
11161
  }),
10881
11162
  /*#__PURE__*/ (0, $3Sbms$jsx)($96999d2514f71e51$var$InstructionRow, {
10882
11163
  index: 2 + permissionsInstructionIndex,
10883
11164
  children: /*#__PURE__*/ (0, $3Sbms$jsx)($96999d2514f71e51$var$Text, {
10884
- children: "Don't hesitate to take multiple photos for more detail."
11165
+ children: t("recorder.instructions.multiplePhotos")
10885
11166
  })
10886
11167
  }),
10887
11168
  /*#__PURE__*/ (0, $3Sbms$jsx)($96999d2514f71e51$var$InstructionRow, {
10888
11169
  index: 3 + permissionsInstructionIndex,
10889
- children: /*#__PURE__*/ (0, $3Sbms$jsxs)($96999d2514f71e51$var$Text, {
10890
- children: [
10891
- "You can review your photo and then ",
10892
- /*#__PURE__*/ (0, $3Sbms$jsx)($96999d2514f71e51$var$Bold, {
10893
- children: "send it when you're done."
10894
- })
10895
- ]
11170
+ children: /*#__PURE__*/ (0, $3Sbms$jsx)($96999d2514f71e51$var$Text, {
11171
+ children: /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $3Sbms$Trans), {
11172
+ i18nKey: "recorder.instructions.reviewAndSendPhotos",
11173
+ children: [
11174
+ "You can review your photo and then ",
11175
+ /*#__PURE__*/ (0, $3Sbms$jsx)($96999d2514f71e51$var$Bold, {
11176
+ children: "send it when you're done."
11177
+ })
11178
+ ]
11179
+ })
10896
11180
  })
10897
11181
  })
10898
11182
  ]
@@ -10901,52 +11185,128 @@ const $96999d2514f71e51$export$788cb893d96254c8 = ({ state: state , type: type
10901
11185
  children: [
10902
11186
  /*#__PURE__*/ (0, $3Sbms$jsx)($96999d2514f71e51$var$InstructionRow, {
10903
11187
  index: 1 + permissionsInstructionIndex,
10904
- children: /*#__PURE__*/ (0, $3Sbms$jsxs)($96999d2514f71e51$var$Text, {
10905
- children: [
10906
- "Tap the ",
10907
- /*#__PURE__*/ (0, $3Sbms$jsx)((0, $444e1dd9fa8f6883$export$f9da3144ae2525a3), {}),
10908
- /*#__PURE__*/ (0, $3Sbms$jsx)($96999d2514f71e51$var$Bold, {
10909
- children: " Record button"
10910
- }),
10911
- " to start a recording."
10912
- ]
11188
+ children: /*#__PURE__*/ (0, $3Sbms$jsx)($96999d2514f71e51$var$Text, {
11189
+ children: /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $3Sbms$Trans), {
11190
+ i18nKey: "recorder.instructions.tapVideoButton",
11191
+ children: [
11192
+ "Tap the ",
11193
+ /*#__PURE__*/ (0, $3Sbms$jsx)((0, $444e1dd9fa8f6883$export$f9da3144ae2525a3), {}),
11194
+ /*#__PURE__*/ (0, $3Sbms$jsx)($96999d2514f71e51$var$Bold, {
11195
+ children: " Record button"
11196
+ }),
11197
+ " to start a recording."
11198
+ ]
11199
+ })
10913
11200
  })
10914
11201
  }),
10915
11202
  /*#__PURE__*/ (0, $3Sbms$jsx)($96999d2514f71e51$var$InstructionRow, {
10916
11203
  index: 2 + permissionsInstructionIndex,
10917
- children: /*#__PURE__*/ (0, $3Sbms$jsxs)($96999d2514f71e51$var$Text, {
10918
- children: [
10919
- "You can ",
10920
- /*#__PURE__*/ (0, $3Sbms$jsx)($96999d2514f71e51$var$Bold, {
10921
- children: "speak during"
10922
- }),
10923
- " the recording for added detail."
10924
- ]
11204
+ children: /*#__PURE__*/ (0, $3Sbms$jsx)($96999d2514f71e51$var$Text, {
11205
+ children: /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $3Sbms$Trans), {
11206
+ i18nKey: "recorder.instructions.videoSpeech",
11207
+ children: [
11208
+ "You can ",
11209
+ /*#__PURE__*/ (0, $3Sbms$jsx)($96999d2514f71e51$var$Bold, {
11210
+ children: "speak during"
11211
+ }),
11212
+ " the recording for added detail."
11213
+ ]
11214
+ })
10925
11215
  })
10926
11216
  }),
10927
11217
  /*#__PURE__*/ (0, $3Sbms$jsx)($96999d2514f71e51$var$InstructionRow, {
10928
11218
  index: 3 + permissionsInstructionIndex,
10929
- children: /*#__PURE__*/ (0, $3Sbms$jsxs)($96999d2514f71e51$var$Text, {
10930
- children: [
10931
- "When you're finished, tap the ",
10932
- /*#__PURE__*/ (0, $3Sbms$jsx)((0, $444e1dd9fa8f6883$export$c6a849fd9d9d93a2), {}),
10933
- /*#__PURE__*/ (0, $3Sbms$jsx)($96999d2514f71e51$var$Bold, {
10934
- children: " Stop button"
10935
- }),
10936
- "."
10937
- ]
11219
+ children: /*#__PURE__*/ (0, $3Sbms$jsx)($96999d2514f71e51$var$Text, {
11220
+ children: /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $3Sbms$Trans), {
11221
+ i18nKey: "recorder.instructions.tapStopVideoButton",
11222
+ children: [
11223
+ "When you're finished, tap the ",
11224
+ /*#__PURE__*/ (0, $3Sbms$jsx)((0, $444e1dd9fa8f6883$export$c6a849fd9d9d93a2), {}),
11225
+ /*#__PURE__*/ (0, $3Sbms$jsx)($96999d2514f71e51$var$Bold, {
11226
+ children: " Stop button"
11227
+ }),
11228
+ "."
11229
+ ]
11230
+ })
10938
11231
  })
10939
11232
  }),
10940
11233
  /*#__PURE__*/ (0, $3Sbms$jsx)($96999d2514f71e51$var$InstructionRow, {
10941
11234
  index: 4 + permissionsInstructionIndex,
10942
- children: /*#__PURE__*/ (0, $3Sbms$jsxs)($96999d2514f71e51$var$Text, {
10943
- children: [
10944
- "You can review your video and then ",
10945
- /*#__PURE__*/ (0, $3Sbms$jsx)($96999d2514f71e51$var$Bold, {
10946
- children: "send it when you're done"
10947
- }),
10948
- "."
10949
- ]
11235
+ children: /*#__PURE__*/ (0, $3Sbms$jsx)($96999d2514f71e51$var$Text, {
11236
+ children: /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $3Sbms$Trans), {
11237
+ i18nKey: "recorder.instructions.reviewAndSendVideos",
11238
+ children: [
11239
+ "You can review your video and then ",
11240
+ /*#__PURE__*/ (0, $3Sbms$jsx)($96999d2514f71e51$var$Bold, {
11241
+ children: "send it when you're done"
11242
+ }),
11243
+ "."
11244
+ ]
11245
+ })
11246
+ })
11247
+ })
11248
+ ]
11249
+ }),
11250
+ type === "screen" && /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $3Sbms$Fragment), {
11251
+ children: [
11252
+ /*#__PURE__*/ (0, $3Sbms$jsx)($96999d2514f71e51$var$InstructionRow, {
11253
+ index: 1 + permissionsInstructionIndex,
11254
+ children: /*#__PURE__*/ (0, $3Sbms$jsx)($96999d2514f71e51$var$Text, {
11255
+ children: /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $3Sbms$Trans), {
11256
+ i18nKey: "recorder.instructions.tapScreenShareButton",
11257
+ children: [
11258
+ "Tap on",
11259
+ /*#__PURE__*/ (0, $3Sbms$jsx)($96999d2514f71e51$var$Bold, {
11260
+ children: " Record my screen"
11261
+ }),
11262
+ " to start a recording."
11263
+ ]
11264
+ })
11265
+ })
11266
+ }),
11267
+ /*#__PURE__*/ (0, $3Sbms$jsx)($96999d2514f71e51$var$InstructionRow, {
11268
+ index: 2 + permissionsInstructionIndex,
11269
+ children: /*#__PURE__*/ (0, $3Sbms$jsx)($96999d2514f71e51$var$Text, {
11270
+ children: /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $3Sbms$Trans), {
11271
+ i18nKey: "recorder.instructions.videoSpeech",
11272
+ children: [
11273
+ "You can ",
11274
+ /*#__PURE__*/ (0, $3Sbms$jsx)($96999d2514f71e51$var$Bold, {
11275
+ children: "speak during"
11276
+ }),
11277
+ " the recording for added detail."
11278
+ ]
11279
+ })
11280
+ })
11281
+ }),
11282
+ /*#__PURE__*/ (0, $3Sbms$jsx)($96999d2514f71e51$var$InstructionRow, {
11283
+ index: 3 + permissionsInstructionIndex,
11284
+ children: /*#__PURE__*/ (0, $3Sbms$jsx)($96999d2514f71e51$var$Text, {
11285
+ children: /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $3Sbms$Trans), {
11286
+ i18nKey: "recorder.instructions.tapStopScreenShareButton",
11287
+ children: [
11288
+ "When you're finished, tap on ",
11289
+ /*#__PURE__*/ (0, $3Sbms$jsx)($96999d2514f71e51$var$Bold, {
11290
+ children: "Stop recording"
11291
+ }),
11292
+ "."
11293
+ ]
11294
+ })
11295
+ })
11296
+ }),
11297
+ /*#__PURE__*/ (0, $3Sbms$jsx)($96999d2514f71e51$var$InstructionRow, {
11298
+ index: 4 + permissionsInstructionIndex,
11299
+ children: /*#__PURE__*/ (0, $3Sbms$jsx)($96999d2514f71e51$var$Text, {
11300
+ children: /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $3Sbms$Trans), {
11301
+ i18nKey: "recorder.instructions.reviewAnsSendScreenShare",
11302
+ children: [
11303
+ "You can review your video and then ",
11304
+ /*#__PURE__*/ (0, $3Sbms$jsx)($96999d2514f71e51$var$Bold, {
11305
+ children: "send it when you're done"
11306
+ }),
11307
+ "."
11308
+ ]
11309
+ })
10950
11310
  })
10951
11311
  })
10952
11312
  ]
@@ -10978,7 +11338,9 @@ const $96999d2514f71e51$export$788cb893d96254c8 = ({ state: state , type: type
10978
11338
 
10979
11339
 
10980
11340
 
11341
+
10981
11342
  const $1c8fc500105e5c78$export$f9d8408fefd786da = ({ state: state , setReady: setReady })=>{
11343
+ const { t: t } = (0, $3Sbms$useTranslation)();
10982
11344
  const QRCodeRef = (0, $3Sbms$useRef)(null);
10983
11345
  const { options: options } = (0, $3Sbms$useContext)((0, $5f30d8bf4f04621e$export$2e2bcd8739ae039));
10984
11346
  const [QRCodeContainerRef, { width: QRCodeContainerWidth }] = (0, $af23c74942bdcae7$export$e295b0c537d32d7d)();
@@ -10995,8 +11357,8 @@ const $1c8fc500105e5c78$export$f9d8408fefd786da = ({ state: state , setReady: se
10995
11357
  ]);
10996
11358
  return /*#__PURE__*/ (0, $3Sbms$jsx)((0, $c0bb66c3d546ed81$export$2b77a92f1a5ad772), {
10997
11359
  centered: true,
10998
- title: "Switch to your mobile",
10999
- description: "Enjoy an even more convenient experience by using your phone to take photos and record videos.",
11360
+ title: t("recorder.switchToMobileTitle"),
11361
+ description: t("recorder.switchToMobileDescription"),
11000
11362
  isDismissable: false,
11001
11363
  state: state,
11002
11364
  primaryAction: ()=>/*#__PURE__*/ (0, $3Sbms$jsx)((0, $0590ee3141e14968$export$353f5b6fc5456de1), {
@@ -11005,7 +11367,7 @@ const $1c8fc500105e5c78$export$f9d8408fefd786da = ({ state: state , setReady: se
11005
11367
  setReady(true);
11006
11368
  state.close();
11007
11369
  },
11008
- children: "Use desktop version"
11370
+ children: t("recorder.useDesktopVersion")
11009
11371
  }),
11010
11372
  children: /*#__PURE__*/ (0, $3Sbms$jsxs)("div", {
11011
11373
  className: "flex flex-col gap-[20px]",
@@ -11025,7 +11387,7 @@ const $1c8fc500105e5c78$export$f9d8408fefd786da = ({ state: state , setReady: se
11025
11387
  }),
11026
11388
  /*#__PURE__*/ (0, $3Sbms$jsx)("p", {
11027
11389
  className: "flex items-center justify-center text-xs text-primaryLight text-center",
11028
- children: "Scan this QR code with a compatible device."
11390
+ children: t("recorder.scanQRCode")
11029
11391
  })
11030
11392
  ]
11031
11393
  })
@@ -11036,29 +11398,21 @@ const $1c8fc500105e5c78$export$f9d8408fefd786da = ({ state: state , setReady: se
11036
11398
  function $d48329960b5b412c$export$fc3bf4634b488af8({ mode: mode }) {
11037
11399
  const { orientation: orientation } = (0, $3Sbms$useContext)((0, $5f30d8bf4f04621e$export$2e2bcd8739ae039));
11038
11400
  const desktop = orientation === "landscape";
11039
- const [ready, setReady] = (0, $3Sbms$useState)(!desktop);
11401
+ const [ready, setReady] = (0, $3Sbms$useState)(mode === "screen" || !desktop);
11402
+ const [isInstructionsModalOpen, setIsInstructionsModalOpen] = (0, $3Sbms$useState)(ready);
11403
+ const modalState = (0, $3Sbms$useOverlayTriggerState)({
11404
+ isOpen: isInstructionsModalOpen && ready,
11405
+ onOpenChange: setIsInstructionsModalOpen
11406
+ });
11040
11407
  (0, $3Sbms$useEffect)(()=>{
11041
- if (ready) {
11042
- setIsPhotoInstructionsModalOpen(mode === "photo" && ready);
11043
- setIsVideoInstructionsModalOpen(mode === "video" && ready);
11044
- }
11408
+ setIsInstructionsModalOpen(true);
11045
11409
  }, [
11046
11410
  ready,
11047
11411
  mode
11048
11412
  ]);
11049
- const [isPhotoInstructionsModalOpen, setIsPhotoInstructionsModalOpen] = (0, $3Sbms$useState)(mode === "photo" && ready);
11050
- const [isVideoInstructionsModalOpen, setIsVideoInstructionsModalOpen] = (0, $3Sbms$useState)(mode === "video" && ready);
11051
- const photoInstructionsModalState = (0, $3Sbms$useOverlayTriggerState)({
11052
- isOpen: isPhotoInstructionsModalOpen,
11053
- onOpenChange: setIsPhotoInstructionsModalOpen
11054
- });
11055
- const videoInstructionsModalState = (0, $3Sbms$useOverlayTriggerState)({
11056
- isOpen: isVideoInstructionsModalOpen,
11057
- onOpenChange: setIsVideoInstructionsModalOpen
11058
- });
11059
11413
  return {
11060
- photoInstructionsModalState: photoInstructionsModalState,
11061
- videoInstructionsModalState: videoInstructionsModalState,
11414
+ mode: mode,
11415
+ modalState: modalState,
11062
11416
  ready: ready,
11063
11417
  setReady: setReady
11064
11418
  };
@@ -11072,12 +11426,8 @@ const $d48329960b5b412c$export$bee10e8ab511933f = ({ state: state })=>{
11072
11426
  return /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $3Sbms$Fragment), {
11073
11427
  children: [
11074
11428
  /*#__PURE__*/ (0, $3Sbms$jsx)((0, $96999d2514f71e51$export$788cb893d96254c8), {
11075
- state: state.photoInstructionsModalState,
11076
- type: "picture"
11077
- }),
11078
- /*#__PURE__*/ (0, $3Sbms$jsx)((0, $96999d2514f71e51$export$788cb893d96254c8), {
11079
- state: state.videoInstructionsModalState,
11080
- type: "video"
11429
+ state: state.modalState,
11430
+ type: state.mode
11081
11431
  }),
11082
11432
  /*#__PURE__*/ (0, $3Sbms$jsx)((0, $1c8fc500105e5c78$export$f9d8408fefd786da), {
11083
11433
  state: switchToMobileModalState,
@@ -11088,22 +11438,54 @@ const $d48329960b5b412c$export$bee10e8ab511933f = ({ state: state })=>{
11088
11438
  };
11089
11439
 
11090
11440
 
11091
- function $a94f21ef9007b90a$export$bd7b6af6aa16550c({ photo: photo = true }) {
11092
- const [isPhoto, setPhoto] = (0, $3Sbms$useState)(photo);
11441
+
11442
+
11443
+
11444
+ const $39932392769664d0$export$4e594bceac139abd = (props)=>{
11445
+ const { t: t } = (0, $3Sbms$useTranslation)();
11446
+ return /*#__PURE__*/ (0, $3Sbms$jsx)("div", {
11447
+ className: (0, $3Sbms$classnames)("flex rounded-full h-[40px] p-[10px] border-2 border-white text-white justify-center items-center align-middle", "font-semibold", "cursor-pointer", {
11448
+ "bg-[#f12828]": !props.state.streaming
11449
+ }),
11450
+ onClick: ()=>props.onCapturePress(),
11451
+ children: /*#__PURE__*/ (0, $3Sbms$jsx)("div", {
11452
+ children: props.state.streaming ? t("recorder.stopScreenShareButton") : t("recorder.startScreenShareButton")
11453
+ })
11454
+ });
11455
+ };
11456
+ const $39932392769664d0$export$f9da3144ae2525a3 = (props)=>{
11457
+ return /*#__PURE__*/ (0, $3Sbms$jsx)("div", {
11458
+ className: (0, $3Sbms$classnames)("bg-white rounded-full w-[72px] h-[72px] p-[3px]"),
11459
+ onClick: ()=>props.onCapturePress(),
11460
+ children: /*#__PURE__*/ (0, $3Sbms$jsx)("div", {
11461
+ className: "bg-primary rounded-full w-full h-full p-[3px] flex items-center justify-center cursor-pointer",
11462
+ children: /*#__PURE__*/ (0, $3Sbms$jsx)("div", {
11463
+ className: (0, $3Sbms$classnames)("w-full h-full transition-[transform,border-radius] duration-300", props.state.mode === "photo" ? "bg-white" : "bg-[#f12828]", props.state.streaming ? "rounded-[5px] scale-[0.4]" : "rounded-[60px]")
11464
+ })
11465
+ })
11466
+ });
11467
+ };
11468
+
11469
+
11470
+ function $a94f21ef9007b90a$export$bd7b6af6aa16550c({ state: state = "photo" }) {
11471
+ const [currentMode, setMode] = (0, $3Sbms$useState)(state);
11093
11472
  const [streaming, setStreaming] = (0, $3Sbms$useState)(false);
11094
11473
  return {
11095
- photo: isPhoto,
11096
- setPhoto: setPhoto,
11474
+ mode: currentMode,
11475
+ setMode: (mode)=>{
11476
+ setMode(mode);
11477
+ },
11097
11478
  streaming: streaming,
11098
11479
  setStreaming: setStreaming
11099
11480
  };
11100
11481
  }
11101
11482
  const $a94f21ef9007b90a$export$11a6fe490bbc4873 = (props)=>{
11483
+ const { t: t } = (0, $3Sbms$useTranslation)();
11102
11484
  const setupModalsState = (0, $d48329960b5b412c$export$fc3bf4634b488af8)({
11103
- mode: props.state.photo ? "photo" : "video"
11485
+ mode: props.state.mode
11104
11486
  });
11105
11487
  return /*#__PURE__*/ (0, $3Sbms$jsxs)("div", {
11106
- className: "flex flex-col bg-primary h-[150px] w-full max-w-[400px] rounded-[15px] p-2.5 gap-2.5",
11488
+ className: "flex flex-col bg-primary h-[150px] w-full max-w-[500px] rounded-[15px] p-2.5 gap-2.5",
11107
11489
  children: [
11108
11490
  /*#__PURE__*/ (0, $3Sbms$jsx)((0, $d48329960b5b412c$export$bee10e8ab511933f), {
11109
11491
  state: setupModalsState
@@ -11124,25 +11506,39 @@ const $a94f21ef9007b90a$export$11a6fe490bbc4873 = (props)=>{
11124
11506
  /*#__PURE__*/ (0, $3Sbms$jsxs)("div", {
11125
11507
  className: "flex flex-row justify-end flex-auto items-center gap-[10px] ",
11126
11508
  children: [
11127
- /*#__PURE__*/ (0, $3Sbms$jsx)((0, $5a48b7481979330f$export$d2b052e7b4be1756), {
11128
- onPress: ()=>{
11129
- if (!props.state.streaming) {
11130
- props.state.setPhoto(true);
11131
- setupModalsState.photoInstructionsModalState.open();
11132
- }
11133
- },
11134
- isSelected: props.state.photo,
11135
- children: "Photo"
11509
+ props.state.mode !== "screen" && /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $3Sbms$Fragment), {
11510
+ children: [
11511
+ /*#__PURE__*/ (0, $3Sbms$jsx)((0, $5a48b7481979330f$export$d2b052e7b4be1756), {
11512
+ onPress: ()=>{
11513
+ if (!props.state.streaming) {
11514
+ props.state.setMode("photo");
11515
+ setupModalsState.modalState.open();
11516
+ }
11517
+ },
11518
+ isSelected: props.state.mode === "photo",
11519
+ children: t("misc.photo")
11520
+ }),
11521
+ /*#__PURE__*/ (0, $3Sbms$jsx)((0, $5a48b7481979330f$export$d2b052e7b4be1756), {
11522
+ onPress: ()=>{
11523
+ if (!props.state.streaming) {
11524
+ props.state.setMode("video");
11525
+ setupModalsState.modalState.open();
11526
+ }
11527
+ },
11528
+ isSelected: props.state.mode === "video",
11529
+ children: t("misc.video")
11530
+ })
11531
+ ]
11136
11532
  }),
11137
- /*#__PURE__*/ (0, $3Sbms$jsx)((0, $5a48b7481979330f$export$d2b052e7b4be1756), {
11533
+ props.state.mode === "screen" && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $5a48b7481979330f$export$d2b052e7b4be1756), {
11138
11534
  onPress: ()=>{
11139
11535
  if (!props.state.streaming) {
11140
- props.state.setPhoto(false);
11141
- setupModalsState.videoInstructionsModalState.open();
11536
+ props.state.setMode("screen");
11537
+ setupModalsState.modalState.open();
11142
11538
  }
11143
11539
  },
11144
- isSelected: !props.state.photo,
11145
- children: "Video"
11540
+ isSelected: props.state.mode === "screen",
11541
+ children: t("misc.screen")
11146
11542
  })
11147
11543
  ]
11148
11544
  })
@@ -11155,20 +11551,18 @@ const $a94f21ef9007b90a$export$11a6fe490bbc4873 = (props)=>{
11155
11551
  className: "w-[60px] h-[60px]",
11156
11552
  children: props.thumbnail
11157
11553
  }),
11158
- /*#__PURE__*/ (0, $3Sbms$jsx)("div", {
11159
- className: "bg-white rounded-full w-[72px] h-[72px] p-[3px]",
11160
- onClick: ()=>props.onCapturePress(),
11161
- children: /*#__PURE__*/ (0, $3Sbms$jsx)("div", {
11162
- className: "bg-primary rounded-full w-full h-full p-[3px] flex items-center justify-center cursor-pointer",
11163
- children: /*#__PURE__*/ (0, $3Sbms$jsx)("div", {
11164
- className: (0, $3Sbms$classnames)("w-full h-full transition-[transform,border-radius] duration-300", props.state.photo ? "bg-white" : "bg-[#f12828]", props.state.streaming ? "rounded-[5px] scale-[0.4]" : "rounded-[60px]")
11165
- })
11166
- })
11554
+ props.state.mode === "screen" && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $39932392769664d0$export$4e594bceac139abd), {
11555
+ ...props
11556
+ }),
11557
+ props.state.mode !== "screen" && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $39932392769664d0$export$f9da3144ae2525a3), {
11558
+ ...props
11167
11559
  }),
11168
11560
  /*#__PURE__*/ (0, $3Sbms$jsx)("div", {
11169
11561
  onClick: props.onSwitch,
11170
- className: "bg-[#565656] rounded-full w-[56px] h-[56px] flex items-center justify-center cursor-pointer",
11171
- children: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $58d405d56c1abe95$export$aefffb14595958fe), {})
11562
+ className: (0, $3Sbms$classnames)("rounded-full w-[56px] h-[56px] flex items-center justify-center", {
11563
+ "bg-[#565656] cursor-pointer": props.state.mode !== "screen"
11564
+ }),
11565
+ children: props.state.mode !== "screen" && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $58d405d56c1abe95$export$aefffb14595958fe), {})
11172
11566
  })
11173
11567
  ]
11174
11568
  })
@@ -11188,18 +11582,19 @@ const $a94f21ef9007b90a$export$11a6fe490bbc4873 = (props)=>{
11188
11582
 
11189
11583
 
11190
11584
 
11585
+
11191
11586
  function $38cdd553fb158eaa$export$4589ed81930b555c(props) {
11192
11587
  const { children: children , state: state } = props;
11193
11588
  const ref = (0, $3Sbms$react).useRef(null);
11194
11589
  const { orientation: orientation } = (0, $3Sbms$useContext)((0, $5f30d8bf4f04621e$export$2e2bcd8739ae039));
11195
- const { modalProps: modalProps , underlayProps: underlayProps } = (0, $3Sbms$useModalOverlay)(props, state, ref);
11590
+ const { modalProps: modalProps , underlayProps: underlayProps } = (0, $3Sbms$useModalOverlay1)(props, state, ref);
11196
11591
  const [exited, setExited] = (0, $3Sbms$useState)(!state.isOpen);
11197
11592
  const viewport = (0, $3Sbms$useViewportSize)();
11198
11593
  const maxHeight = viewport.height - 64;
11199
11594
  const desktop = orientation === "landscape";
11200
11595
  // Don't render anything if the modal is not open and we're not animating out.
11201
11596
  if (!(state.isOpen || !exited)) return null;
11202
- return /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$Overlay), {
11597
+ return /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$Overlay1), {
11203
11598
  children: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$CSSTransition), {
11204
11599
  in: state.isOpen,
11205
11600
  appear: true,
@@ -11255,6 +11650,8 @@ function $38cdd553fb158eaa$export$4589ed81930b555c(props) {
11255
11650
 
11256
11651
 
11257
11652
 
11653
+
11654
+
11258
11655
  const $4425c0dfad3f82bb$export$480db61f4dcd7727 = ()=>/*#__PURE__*/ (0, $3Sbms$jsx)("svg", {
11259
11656
  width: "12",
11260
11657
  height: "15",
@@ -11311,26 +11708,61 @@ const $a879d6bc7f43b0c5$export$28e1ba20e0688eb7 = ()=>/*#__PURE__*/ (0, $3Sbms$j
11311
11708
  });
11312
11709
 
11313
11710
 
11314
- const $77fb06ba253d6f7c$var$dateFormat = new Intl.DateTimeFormat("default", {
11315
- dateStyle: "short"
11316
- });
11317
- const $77fb06ba253d6f7c$var$timeFormat = new Intl.DateTimeFormat("default", {
11318
- hour: "numeric",
11319
- minute: "2-digit"
11320
- });
11321
- function $77fb06ba253d6f7c$var$formatDate(date) {
11322
- const ampm = date.getHours() % 12 >= 12 ? "PM" : "AM";
11323
- return `${$77fb06ba253d6f7c$var$dateFormat.format(date)} at ${$77fb06ba253d6f7c$var$timeFormat.format(date)} ${ampm}`;
11324
- }
11711
+
11712
+
11713
+
11714
+ const $a4b1c68ef470f35c$export$f56b3b5841ad32ae = ({ asset: asset , state: state })=>{
11715
+ return /*#__PURE__*/ (0, $3Sbms$jsx)((0, $91e337bf8187124b$export$a703eb468fcf7e69), {
11716
+ state: state,
11717
+ children: /*#__PURE__*/ (0, $3Sbms$jsxs)("div", {
11718
+ className: "flex flex-col items-center w-screen h-screen p-[15px] gap-[10px]",
11719
+ children: [
11720
+ /*#__PURE__*/ (0, $3Sbms$jsx)("div", {
11721
+ className: "flex items-center max-w-[400px] w-full h-full",
11722
+ children: /*#__PURE__*/ (0, $3Sbms$jsxs)("div", {
11723
+ className: "min-w-full rounded-[10px] overflow-hidden",
11724
+ children: [
11725
+ asset.type === "picture" && /*#__PURE__*/ (0, $3Sbms$jsx)("img", {
11726
+ src: asset.objectUrl,
11727
+ alt: `Asset-${asset.assetId}`,
11728
+ className: "object-fill"
11729
+ }),
11730
+ asset.type === "video" && /*#__PURE__*/ (0, $3Sbms$jsx)("video", {
11731
+ src: asset.objectUrl,
11732
+ playsInline: true,
11733
+ autoPlay: true,
11734
+ controls: true
11735
+ })
11736
+ ]
11737
+ })
11738
+ }),
11739
+ /*#__PURE__*/ (0, $3Sbms$jsx)("div", {
11740
+ className: "max-w-[135px] w-1/3",
11741
+ children: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $0590ee3141e14968$export$353f5b6fc5456de1), {
11742
+ onPress: state.close,
11743
+ variant: "tertiary",
11744
+ size: "large",
11745
+ fullWidth: true,
11746
+ children: "Close"
11747
+ })
11748
+ })
11749
+ ]
11750
+ })
11751
+ });
11752
+ };
11753
+
11754
+
11325
11755
  const $77fb06ba253d6f7c$export$c9169049516d8bcf = ({ asset: asset , index: index , removeAsset: removeAsset })=>{
11756
+ const { t: t } = (0, $3Sbms$useTranslation)();
11326
11757
  const confirmRemovalModalState = (0, $3Sbms$useOverlayTriggerState)({});
11758
+ const previewAssetModalProps = (0, $3Sbms$useOverlayTriggerState)({});
11327
11759
  return /*#__PURE__*/ (0, $3Sbms$jsxs)("div", {
11328
11760
  className: "flex flex-row justify-between items-center",
11329
11761
  children: [
11330
11762
  /*#__PURE__*/ (0, $3Sbms$jsx)((0, $c0bb66c3d546ed81$export$2b77a92f1a5ad772), {
11331
- title: "Confirm removal",
11763
+ title: t("recorder.confirmRemovalTitle"),
11332
11764
  state: confirmRemovalModalState,
11333
- description: "Are you sure you want to remove this photo/video? This action cannot be undone.",
11765
+ description: t("recorder.confirmRemovalDescription"),
11334
11766
  primaryAction: ({ close: close })=>/*#__PURE__*/ (0, $3Sbms$jsxs)((0, $0590ee3141e14968$export$353f5b6fc5456de1), {
11335
11767
  onPress: async ()=>{
11336
11768
  await removeAsset(asset);
@@ -11338,29 +11770,34 @@ const $77fb06ba253d6f7c$export$c9169049516d8bcf = ({ asset: asset , index: index
11338
11770
  },
11339
11771
  children: [
11340
11772
  /*#__PURE__*/ (0, $3Sbms$jsx)((0, $a879d6bc7f43b0c5$export$28e1ba20e0688eb7), {}),
11341
- "Confirm"
11773
+ t("misc.confirm")
11342
11774
  ]
11343
11775
  }),
11344
- secondaryAction: "Cancel"
11776
+ secondaryAction: t("misc.cancel")
11345
11777
  }),
11346
11778
  /*#__PURE__*/ (0, $3Sbms$jsxs)("div", {
11347
11779
  className: "flex flex-row gap-[10px] items-center",
11348
11780
  children: [
11349
- /*#__PURE__*/ (0, $3Sbms$jsx)((0, $c7542aa0d9bb5f39$export$1cd1efc78cb52ca5), {
11781
+ /*#__PURE__*/ (0, $3Sbms$jsx)((0, $a4b1c68ef470f35c$export$f56b3b5841ad32ae), {
11782
+ state: previewAssetModalProps,
11350
11783
  asset: asset
11351
11784
  }),
11785
+ /*#__PURE__*/ (0, $3Sbms$jsx)((0, $c7542aa0d9bb5f39$export$1cd1efc78cb52ca5), {
11786
+ asset: asset,
11787
+ onClick: previewAssetModalProps.open
11788
+ }),
11352
11789
  /*#__PURE__*/ (0, $3Sbms$jsxs)("span", {
11353
11790
  className: "text-sm",
11354
11791
  style: {
11355
11792
  hyphens: "manual"
11356
11793
  },
11357
11794
  children: [
11358
- asset.type === "picture" ? "Photo" : "Video",
11795
+ asset.type === "picture" ? t("misc.photo") : t("misc.video"),
11359
11796
  " ",
11360
11797
  index + 1,
11361
11798
  " \xb7",
11362
11799
  " ",
11363
- $77fb06ba253d6f7c$var$formatDate(new Date(asset.timestamp))
11800
+ (0, $92672d57809ea9d3$export$3ae94a2503e890a1)(new Date(asset.timestamp))
11364
11801
  ]
11365
11802
  })
11366
11803
  ]
@@ -11368,7 +11805,7 @@ const $77fb06ba253d6f7c$export$c9169049516d8bcf = ({ asset: asset , index: index
11368
11805
  /*#__PURE__*/ (0, $3Sbms$jsx)("span", {
11369
11806
  className: "text-xs font-bold underline cursor-pointer ml-[10px]",
11370
11807
  onClick: confirmRemovalModalState.open,
11371
- children: "Remove"
11808
+ children: t("misc.remove")
11372
11809
  })
11373
11810
  ]
11374
11811
  }, asset.assetId);
@@ -11451,6 +11888,7 @@ const $7436fc0a14c16764$export$4fa52f68b1c78fbf = ()=>/*#__PURE__*/ (0, $3Sbms$j
11451
11888
 
11452
11889
 
11453
11890
  const $d4d374dc7955cc18$export$5c334f209b1aa661 = ({ assets: assets , state: state , onSendAssets: onSendAssets , removeAsset: removeAsset , loading: loading })=>{
11891
+ const { t: t } = (0, $3Sbms$useTranslation)();
11454
11892
  const ref = (0, $3Sbms$useRef)(null);
11455
11893
  const [assetKind, setAssetKind] = (0, $3Sbms$useState)(assets[assets.length - 1]?.type === "picture" ? "photo" : "video");
11456
11894
  const { orientation: orientation } = (0, $3Sbms$useContext)((0, $5f30d8bf4f04621e$export$2e2bcd8739ae039));
@@ -11478,7 +11916,7 @@ const $d4d374dc7955cc18$export$5c334f209b1aa661 = ({ assets: assets , state: sta
11478
11916
  children: /*#__PURE__*/ (0, $3Sbms$jsx)("div", {
11479
11917
  className: (0, $3Sbms$classnames)("fixed justify-center w-screen h-screen top-0 left-0 bg-black z-[1]", state.isOpen ? "flex" : "hidden"),
11480
11918
  children: loading && /*#__PURE__*/ (0, $3Sbms$jsxs)("div", {
11481
- className: (0, $3Sbms$classnames)("flex mt-[50px] h-fit opacity-1", desktop ? "flex-row items-center w-[400px]" : "flex-col items-center text-center w-[320px]"),
11919
+ className: (0, $3Sbms$classnames)("flex mt-[50px] h-fit opacity-1", desktop ? "flex-row items-center w-[450px]" : "flex-col items-center text-center w-[320px]"),
11482
11920
  children: [
11483
11921
  /*#__PURE__*/ (0, $3Sbms$jsx)("div", {
11484
11922
  className: "w-[24px] h-[24px] m-[10px]",
@@ -11487,10 +11925,10 @@ const $d4d374dc7955cc18$export$5c334f209b1aa661 = ({ assets: assets , state: sta
11487
11925
  /*#__PURE__*/ (0, $3Sbms$jsxs)("span", {
11488
11926
  className: "text-sm text-white",
11489
11927
  children: [
11490
- "Please wait a moment while your ",
11491
- loading,
11492
- " is being processed...",
11493
- loading === "video" ? " It may take up to 15 seconds for a video to be ready." : ""
11928
+ t("recorder.elementBeingProcessed", {
11929
+ type: loading === "picture" ? t("misc.photo").toLocaleLowerCase() : t("misc.video").toLocaleLowerCase()
11930
+ }),
11931
+ loading === "video" && t("recorder.waitVideo")
11494
11932
  ]
11495
11933
  })
11496
11934
  ]
@@ -11509,12 +11947,11 @@ const $d4d374dc7955cc18$export$5c334f209b1aa661 = ({ assets: assets , state: sta
11509
11947
  /*#__PURE__*/ (0, $3Sbms$jsxs)("div", {
11510
11948
  className: "flex flex-row justify-between p-[12px]",
11511
11949
  children: [
11512
- /*#__PURE__*/ (0, $3Sbms$jsxs)("h1", {
11950
+ /*#__PURE__*/ (0, $3Sbms$jsx)("h1", {
11513
11951
  className: "text-lg first-letter:capitalize",
11514
- children: [
11515
- assetKind,
11516
- " successfully captured"
11517
- ]
11952
+ children: t("recorder.elementCaptureSuccess", {
11953
+ type: t(`misc.${assetKind}`)
11954
+ })
11518
11955
  }),
11519
11956
  /*#__PURE__*/ (0, $3Sbms$jsx)("div", {
11520
11957
  className: "flex justify-center items-center rounded-full bg-[#f3f3f3] h-[30px] w-[30px] cursor-pointer",
@@ -11533,23 +11970,23 @@ const $d4d374dc7955cc18$export$5c334f209b1aa661 = ({ assets: assets , state: sta
11533
11970
  index: index,
11534
11971
  removeAsset: removeAsset
11535
11972
  }, asset.assetId)),
11536
- /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $0590ee3141e14968$export$353f5b6fc5456de1), {
11973
+ /*#__PURE__*/ (0, $3Sbms$jsx)((0, $0590ee3141e14968$export$353f5b6fc5456de1), {
11537
11974
  variant: "secondary",
11538
11975
  onPress: state.close,
11539
- children: [
11540
- "Take new ",
11541
- assetKind
11542
- ]
11976
+ children: t("recorder.takeNewElement", {
11977
+ type: t(`misc.${assetKind}`).toLocaleLowerCase()
11978
+ })
11543
11979
  }),
11544
- /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $0590ee3141e14968$export$353f5b6fc5456de1), {
11980
+ /*#__PURE__*/ (0, $3Sbms$jsx)((0, $0590ee3141e14968$export$353f5b6fc5456de1), {
11545
11981
  onPress: ()=>{
11546
11982
  onSendAssets();
11547
11983
  state.close();
11548
11984
  },
11549
- children: [
11550
- "Send ",
11551
- assets.length > 1 ? `${assets.length} elements` : assetKind
11552
- ]
11985
+ children: assets.length > 1 ? t("recorder.sendElements", {
11986
+ count: assets.length
11987
+ }) : t("recorder.sendElement", {
11988
+ type: t(`misc.${assetKind}`).toLocaleLowerCase()
11989
+ })
11553
11990
  })
11554
11991
  ]
11555
11992
  })
@@ -11597,7 +12034,18 @@ const $92672d57809ea9d3$var$timerText = (delta)=>{
11597
12034
  ].map((n)=>`${n < 10 ? "0" : ""}${n}`);
11598
12035
  return d.join(":");
11599
12036
  };
12037
+ const $92672d57809ea9d3$var$dateFormat = new Intl.DateTimeFormat("default", {
12038
+ dateStyle: "short"
12039
+ });
12040
+ const $92672d57809ea9d3$var$timeFormat = new Intl.DateTimeFormat("default", {
12041
+ hour: "numeric",
12042
+ minute: "2-digit"
12043
+ });
12044
+ function $92672d57809ea9d3$export$3ae94a2503e890a1(date) {
12045
+ return `${$92672d57809ea9d3$var$dateFormat.format(date)} at ${$92672d57809ea9d3$var$timeFormat.format(date)}`;
12046
+ }
11600
12047
  const $92672d57809ea9d3$export$336a011955157f9a = ()=>{
12048
+ const { t: t } = (0, $3Sbms$useTranslation)();
11601
12049
  const { options: options } = (0, $3Sbms$useContext)((0, $5f30d8bf4f04621e$export$2e2bcd8739ae039));
11602
12050
  const [startRecordTime, setStartRecordTime] = (0, $3Sbms$useState)(undefined);
11603
12051
  const [timer, setTimer] = (0, $3Sbms$useState)(0);
@@ -11614,7 +12062,7 @@ const $92672d57809ea9d3$export$336a011955157f9a = ()=>{
11614
12062
  const sendAssetsModalState = (0, $3Sbms$useOverlayTriggerState)({});
11615
12063
  const [flashAnimation, setFlashAnimation] = (0, $3Sbms$useState)(false);
11616
12064
  const menuBarState = (0, $a94f21ef9007b90a$export$bd7b6af6aa16550c)({
11617
- photo: options?.recorder?.defaultState !== "video"
12065
+ state: options?.recorder?.defaultState || "photo"
11618
12066
  });
11619
12067
  const exitStreaming = (0, $3Sbms$useCallback)(()=>{
11620
12068
  menuBarState.setStreaming(false);
@@ -11629,6 +12077,10 @@ const $92672d57809ea9d3$export$336a011955157f9a = ()=>{
11629
12077
  const { facingMode: newFacingMode } = (0, $c9e496369b59be7a$export$2f377c2162fd02b2).requestLocalVideo(videoElementRef?.current);
11630
12078
  setFacingMode(newFacingMode);
11631
12079
  };
12080
+ const onScreenshareEnabled = (event)=>{
12081
+ if (!videoElementRef.current) return;
12082
+ (0, $c9e496369b59be7a$export$2f377c2162fd02b2).requestLocalScreenshare(videoElementRef.current);
12083
+ };
11632
12084
  const onStopRecord = (0, $3Sbms$useCallback)((event)=>{
11633
12085
  const { url: url , assetId: assetId } = event.detail;
11634
12086
  exitStreaming();
@@ -11662,6 +12114,15 @@ const $92672d57809ea9d3$export$336a011955157f9a = ()=>{
11662
12114
  }
11663
12115
  ]);
11664
12116
  };
12117
+ const captureThumbnail = async (videoElement)=>{
12118
+ let image = await (0, $c9e496369b59be7a$export$2f377c2162fd02b2).captureVideo(undefined, {
12119
+ addPlayWatermark: true
12120
+ }).catch(console.error);
12121
+ if (!image) image = await (0, $c9e496369b59be7a$export$2f377c2162fd02b2).captureVideo(videoElement, {
12122
+ addPlayWatermark: true
12123
+ });
12124
+ await (0, $c9e496369b59be7a$export$2f377c2162fd02b2).saveThumbnail(image);
12125
+ };
11665
12126
  const removeAsset = (0, $3Sbms$useCallback)(async (asset)=>{
11666
12127
  if (!asset.assetId) return;
11667
12128
  (0, $c9e496369b59be7a$export$2f377c2162fd02b2).deleteCapture(asset.assetId);
@@ -11683,10 +12144,12 @@ const $92672d57809ea9d3$export$336a011955157f9a = ()=>{
11683
12144
  ]);
11684
12145
  (0, $3Sbms$useEffect)(()=>{
11685
12146
  (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("localVideoAvailable", onLocalVideoChange);
12147
+ (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("screenshareEnabled", onScreenshareEnabled);
11686
12148
  (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("localVideoChange", onLocalVideoChange);
11687
12149
  (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("recordStopped", onStopRecord);
11688
12150
  return ()=>{
11689
12151
  (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("localVideoChange", onLocalVideoChange);
12152
+ (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("screenshareEnabled", onScreenshareEnabled);
11690
12153
  (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("localVideoAvailable", onLocalVideoChange);
11691
12154
  (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("recordStopped", onStopRecord);
11692
12155
  };
@@ -11694,23 +12157,27 @@ const $92672d57809ea9d3$export$336a011955157f9a = ()=>{
11694
12157
  onStopRecord
11695
12158
  ]);
11696
12159
  return /*#__PURE__*/ (0, $3Sbms$jsxs)("div", {
11697
- className: "bg-[#000] w-full h-full justify-center flex flex-col antialiased inter",
12160
+ className: (0, $3Sbms$classnames)("bg-[#000] w-full h-full justify-center flex flex-col antialiased inter", {
12161
+ "bg-[url('https://cdn.snapcall.io/img/assist/gradient-bg.jpg')] bg-cover": menuBarState.mode === "screen"
12162
+ }),
11698
12163
  children: [
11699
- !menuBarState.photo && /*#__PURE__*/ (0, $3Sbms$jsx)("div", {
12164
+ (menuBarState.mode === "video" || menuBarState.mode === "screen" && menuBarState.streaming) && /*#__PURE__*/ (0, $3Sbms$jsx)("div", {
11700
12165
  className: "text-base text-white text-center font-medium pt-2.5",
11701
12166
  children: $92672d57809ea9d3$var$timerText(timer)
11702
12167
  }),
11703
12168
  /*#__PURE__*/ (0, $3Sbms$jsx)("div", {
11704
- className: "flex-1 min-h-0 p-2.5",
12169
+ className: "flex-1 min-h-0 p-2.5 ",
11705
12170
  children: /*#__PURE__*/ (0, $3Sbms$jsxs)("div", {
11706
- className: "relative w-full h-full rounded-[10px]",
12171
+ className: "relative w-full h-full rounded-[10px] ",
11707
12172
  children: [
11708
12173
  countdownVisible && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $db82628e5503d51b$export$53819c0e58f98d49), {
11709
12174
  initialValue: 3,
11710
12175
  onFinish: ()=>{
11711
12176
  setCountdownVisible(false);
11712
12177
  setStartRecordTime(Date.now());
11713
- (0, $c9e496369b59be7a$export$2f377c2162fd02b2).startRecord();
12178
+ (0, $c9e496369b59be7a$export$2f377c2162fd02b2).startRecord().then(()=>{
12179
+ if (videoElementRef.current) captureThumbnail(videoElementRef.current);
12180
+ });
11714
12181
  }
11715
12182
  }),
11716
12183
  flashAnimation && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $6efc75079651494a$export$2b501aee548bae06), {
@@ -11719,7 +12186,20 @@ const $92672d57809ea9d3$export$336a011955157f9a = ()=>{
11719
12186
  assetsPopupState.open();
11720
12187
  }
11721
12188
  }),
11722
- /*#__PURE__*/ (0, $3Sbms$jsx)("video", {
12189
+ menuBarState.mode === "screen" && /*#__PURE__*/ (0, $3Sbms$jsx)("div", {
12190
+ className: "object-fit h-full",
12191
+ children: /*#__PURE__*/ (0, $3Sbms$jsx)("video", {
12192
+ autoPlay: true,
12193
+ muted: true,
12194
+ playsInline: true,
12195
+ ref: videoElementRef,
12196
+ className: (0, $3Sbms$classnames)("w-full h-full rounded-[inherit]", {
12197
+ "scale-x-[-1]": facingMode === "user" && menuBarState.mode !== "screen",
12198
+ "max-w-[screen]": menuBarState.mode === "screen"
12199
+ })
12200
+ })
12201
+ }),
12202
+ menuBarState.mode !== "screen" && /*#__PURE__*/ (0, $3Sbms$jsx)("video", {
11723
12203
  autoPlay: true,
11724
12204
  muted: true,
11725
12205
  playsInline: true,
@@ -11732,7 +12212,7 @@ const $92672d57809ea9d3$export$336a011955157f9a = ()=>{
11732
12212
  })
11733
12213
  }),
11734
12214
  /*#__PURE__*/ (0, $3Sbms$jsx)("div", {
11735
- className: "flex justify-center px-2.5 pb-2.5",
12215
+ className: "flex justify-center px-2.5 pb-2.5 z-10",
11736
12216
  children: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $a94f21ef9007b90a$export$11a6fe490bbc4873), {
11737
12217
  state: menuBarState,
11738
12218
  thumbnail: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $c7542aa0d9bb5f39$export$1cd1efc78cb52ca5), {
@@ -11743,17 +12223,16 @@ const $92672d57809ea9d3$export$336a011955157f9a = ()=>{
11743
12223
  (0, $c9e496369b59be7a$export$2f377c2162fd02b2).rotateVideo();
11744
12224
  },
11745
12225
  onCapturePress: ()=>{
11746
- if (menuBarState.photo && videoElementRef.current) {
12226
+ if (menuBarState.mode === "photo" && videoElementRef.current) {
11747
12227
  onPhotoCapture(videoElementRef.current);
11748
12228
  setFlashAnimation(true);
11749
- (0, $c9e496369b59be7a$export$2f377c2162fd02b2).captureVideo(videoElementRef.current);
11750
12229
  }
11751
- if (!menuBarState.photo && !menuBarState.streaming) {
12230
+ if (menuBarState.mode !== "photo" && !menuBarState.streaming) {
11752
12231
  menuBarState.setStreaming(true);
11753
12232
  setTimer(0);
11754
12233
  setCountdownVisible(true);
11755
12234
  }
11756
- if (!menuBarState.photo && menuBarState.streaming) {
12235
+ if (menuBarState.mode !== "photo" && menuBarState.streaming) {
11757
12236
  exitStreaming();
11758
12237
  if (startRecordTime) {
11759
12238
  (0, $c9e496369b59be7a$export$2f377c2162fd02b2).stopRecord();
@@ -11774,14 +12253,41 @@ const $92672d57809ea9d3$export$336a011955157f9a = ()=>{
11774
12253
  removeAsset: removeAsset,
11775
12254
  loading: assetLoading
11776
12255
  }),
11777
- /*#__PURE__*/ (0, $3Sbms$jsx)((0, $c0bb66c3d546ed81$export$2b77a92f1a5ad772), {
11778
- title: "Thank you for your submission!",
12256
+ /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $c0bb66c3d546ed81$export$2b77a92f1a5ad772), {
12257
+ title: t("recorder.submissionTitle"),
11779
12258
  state: sendAssetsModalState,
11780
12259
  isDismissable: false,
11781
- children: /*#__PURE__*/ (0, $3Sbms$jsx)("span", {
11782
- className: "text-base text-primaryLight",
11783
- children: "Your photo/video has been successfully sent. We will review it and get back to you soon."
11784
- })
12260
+ children: [
12261
+ /*#__PURE__*/ (0, $3Sbms$jsx)("span", {
12262
+ className: "text-base text-primaryLight",
12263
+ children: t("recorder.submissionDescription")
12264
+ }),
12265
+ /*#__PURE__*/ (0, $3Sbms$jsx)("div", {
12266
+ className: "flex flex-col gap-[20px] border-t border-secondaryVLight pt-[20px]",
12267
+ children: assets.map((asset, index)=>/*#__PURE__*/ (0, $3Sbms$jsxs)("div", {
12268
+ className: "flex flex-row items-center gap-[10px]",
12269
+ children: [
12270
+ /*#__PURE__*/ (0, $3Sbms$jsx)((0, $c7542aa0d9bb5f39$export$1cd1efc78cb52ca5), {
12271
+ asset: asset
12272
+ }),
12273
+ /*#__PURE__*/ (0, $3Sbms$jsxs)("span", {
12274
+ className: "text-sm",
12275
+ style: {
12276
+ hyphens: "manual"
12277
+ },
12278
+ children: [
12279
+ asset.type === "picture" ? "Photo" : "Video",
12280
+ " ",
12281
+ index + 1,
12282
+ " \xb7",
12283
+ " ",
12284
+ $92672d57809ea9d3$export$3ae94a2503e890a1(new Date(asset.timestamp))
12285
+ ]
12286
+ })
12287
+ ]
12288
+ }))
12289
+ })
12290
+ ]
11785
12291
  })
11786
12292
  ]
11787
12293
  });
@@ -11873,7 +12379,7 @@ const $26ed036cbc17809a$var$StreamUI = ({ options: options })=>{
11873
12379
  const [profile, setProfile] = (0, $3Sbms$useState)({});
11874
12380
  const [muted, setMuted] = (0, $3Sbms$useState)(true);
11875
12381
  const [streaming, setStreaming] = (0, $3Sbms$useState)(false);
11876
- const [isLoading, setLoading] = (0, $3Sbms$useState)(!options.recorder);
12382
+ const [isLoading, setLoading] = (0, $3Sbms$useState)(!options.recorder?.enabled);
11877
12383
  const [screensharing, setScreensharing] = (0, $3Sbms$useState)(false);
11878
12384
  const [isAgent, setIsAgent] = (0, $3Sbms$useState)(false);
11879
12385
  const [userInteractionTriggered, setUserInteractionTriggered] = (0, $3Sbms$useState)(false);
@@ -12530,7 +13036,7 @@ var $f8d57e3d223f5089$export$2e2bcd8739ae039 = $f8d57e3d223f5089$var$GreetingVie
12530
13036
 
12531
13037
 
12532
13038
  var $1e2747ca72d0ab49$exports = {};
12533
- $1e2747ca72d0ab49$exports = "*, :before, :after, ::backdrop {\n --tw-border-spacing-x: 0;\n --tw-border-spacing-y: 0;\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-rotate: 0;\n --tw-skew-x: 0;\n --tw-skew-y: 0;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n --tw-pan-x: ;\n --tw-pan-y: ;\n --tw-pinch-zoom: ;\n --tw-scroll-snap-strictness: proximity;\n --tw-ordinal: ;\n --tw-slashed-zero: ;\n --tw-numeric-figure: ;\n --tw-numeric-spacing: ;\n --tw-numeric-fraction: ;\n --tw-ring-inset: ;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-color: #3b82f680;\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-ring-shadow: 0 0 #0000;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n --tw-blur: ;\n --tw-brightness: ;\n --tw-contrast: ;\n --tw-grayscale: ;\n --tw-hue-rotate: ;\n --tw-invert: ;\n --tw-saturate: ;\n --tw-sepia: ;\n --tw-drop-shadow: ;\n --tw-backdrop-blur: ;\n --tw-backdrop-brightness: ;\n --tw-backdrop-contrast: ;\n --tw-backdrop-grayscale: ;\n --tw-backdrop-hue-rotate: ;\n --tw-backdrop-invert: ;\n --tw-backdrop-opacity: ;\n --tw-backdrop-saturate: ;\n --tw-backdrop-sepia: ;\n}\n\n.visible {\n visibility: visible;\n}\n\n.fixed {\n position: fixed;\n}\n\n.absolute {\n position: absolute;\n}\n\n.relative {\n position: relative;\n}\n\n.inset-0 {\n inset: 0;\n}\n\n.left-0 {\n left: 0;\n}\n\n.top-0 {\n top: 0;\n}\n\n.z-50 {\n z-index: 50;\n}\n\n.z-\\[100\\] {\n z-index: 100;\n}\n\n.z-\\[1\\] {\n z-index: 1;\n}\n\n.m-\\[10px\\] {\n margin: 10px;\n}\n\n.mx-\\[20px\\] {\n margin-left: 20px;\n margin-right: 20px;\n}\n\n.ml-\\[10px\\] {\n margin-left: 10px;\n}\n\n.mt-\\[10px\\] {\n margin-top: 10px;\n}\n\n.mt-\\[50px\\] {\n margin-top: 50px;\n}\n\n.block {\n display: block;\n}\n\n.inline {\n display: inline;\n}\n\n.flex {\n display: flex;\n}\n\n.table {\n display: table;\n}\n\n.hidden {\n display: none;\n}\n\n.h-full {\n height: 100%;\n}\n\n.h-\\[150px\\] {\n height: 150px;\n}\n\n.h-\\[60px\\] {\n height: 60px;\n}\n\n.h-\\[72px\\] {\n height: 72px;\n}\n\n.h-\\[56px\\] {\n height: 56px;\n}\n\n.h-\\[40px\\] {\n height: 40px;\n}\n\n.h-\\[235px\\] {\n height: 235px;\n}\n\n.h-\\[93px\\] {\n height: 93px;\n}\n\n.h-screen {\n height: 100vh;\n}\n\n.h-fit {\n height: -moz-fit-content;\n height: fit-content;\n}\n\n.h-\\[24px\\] {\n height: 24px;\n}\n\n.h-\\[30px\\] {\n height: 30px;\n}\n\n.h-1\\/3 {\n height: 33.3333%;\n}\n\n.max-h-\\[inherit\\] {\n max-height: inherit;\n}\n\n.max-h-\\[70px\\] {\n max-height: 70px;\n}\n\n.min-h-0 {\n min-height: 0;\n}\n\n.min-h-\\[100\\%\\] {\n min-height: 100%;\n}\n\n.w-full {\n width: 100%;\n}\n\n.w-\\[60px\\] {\n width: 60px;\n}\n\n.w-\\[72px\\] {\n width: 72px;\n}\n\n.w-\\[56px\\] {\n width: 56px;\n}\n\n.w-\\[76px\\] {\n width: 76px;\n}\n\n.w-screen {\n width: 100vw;\n}\n\n.w-\\[360px\\] {\n width: 360px;\n}\n\n.w-\\[400px\\] {\n width: 400px;\n}\n\n.w-\\[320px\\] {\n width: 320px;\n}\n\n.w-\\[24px\\] {\n width: 24px;\n}\n\n.w-\\[30px\\] {\n width: 30px;\n}\n\n.w-1\\/3 {\n width: 33.3333%;\n}\n\n.min-w-\\[100\\%\\] {\n min-width: 100%;\n}\n\n.min-w-\\[24px\\] {\n min-width: 24px;\n}\n\n.max-w-\\[400px\\] {\n max-width: 400px;\n}\n\n.max-w-\\[600px\\] {\n max-width: 600px;\n}\n\n.max-w-\\[800px\\] {\n max-width: 800px;\n}\n\n.max-w-\\[70px\\] {\n max-width: 70px;\n}\n\n.flex-1 {\n flex: 1;\n}\n\n.flex-auto {\n flex: auto;\n}\n\n.flex-grow {\n flex-grow: 1;\n}\n\n.translate-y-2 {\n --tw-translate-y: .5rem;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.translate-y-0 {\n --tw-translate-y: 0px;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.translate-y-\\[200\\%\\] {\n --tw-translate-y: 200%;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.translate-y-full {\n --tw-translate-y: 100%;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.scale-\\[0\\.4\\] {\n --tw-scale-x: .4;\n --tw-scale-y: .4;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.scale-x-\\[-1\\] {\n --tw-scale-x: -1;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.transform {\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.cursor-not-allowed {\n cursor: not-allowed;\n}\n\n.cursor-pointer {\n cursor: pointer;\n}\n\n.resize {\n resize: both;\n}\n\n.flex-row {\n flex-direction: row;\n}\n\n.flex-col {\n flex-direction: column;\n}\n\n.flex-wrap {\n flex-wrap: wrap;\n}\n\n.items-end {\n align-items: flex-end;\n}\n\n.items-center {\n align-items: center;\n}\n\n.justify-end {\n justify-content: flex-end;\n}\n\n.justify-center {\n justify-content: center;\n}\n\n.justify-between {\n justify-content: space-between;\n}\n\n.gap-\\[5px\\] {\n gap: 5px;\n}\n\n.gap-2\\.5 {\n gap: .625rem;\n}\n\n.gap-2 {\n gap: .5rem;\n}\n\n.gap-\\[10px\\] {\n gap: 10px;\n}\n\n.gap-5 {\n gap: 1.25rem;\n}\n\n.gap-\\[20px\\] {\n gap: 20px;\n}\n\n.overflow-auto {\n overflow: auto;\n}\n\n.overflow-hidden {\n overflow: hidden;\n}\n\n.overflow-x-auto {\n overflow-x: auto;\n}\n\n.rounded-lg {\n border-radius: .5rem;\n}\n\n.rounded-md {\n border-radius: .375rem;\n}\n\n.rounded-\\[15px\\] {\n border-radius: 15px;\n}\n\n.rounded-full {\n border-radius: 9999px;\n}\n\n.rounded-\\[5px\\] {\n border-radius: 5px;\n}\n\n.rounded-\\[60px\\] {\n border-radius: 60px;\n}\n\n.rounded-\\[10px\\] {\n border-radius: 10px;\n}\n\n.rounded-\\[inherit\\] {\n border-radius: inherit;\n}\n\n.rounded-\\[8px\\] {\n border-radius: 8px;\n}\n\n.rounded-\\[50\\%\\] {\n border-radius: 50%;\n}\n\n.rounded-t-\\[15px\\] {\n border-top-left-radius: 15px;\n border-top-right-radius: 15px;\n}\n\n.border {\n border-width: 1px;\n}\n\n.border-secondaryLight {\n --tw-border-opacity: 1;\n border-color: rgb(179 179 179 / var(--tw-border-opacity));\n}\n\n.border-primaryLight {\n --tw-border-opacity: 1;\n border-color: rgb(86 86 86 / var(--tw-border-opacity));\n}\n\n.bg-primaryLight {\n --tw-bg-opacity: 1;\n background-color: rgb(86 86 86 / var(--tw-bg-opacity));\n}\n\n.bg-primary {\n --tw-bg-opacity: 1;\n background-color: rgb(29 28 32 / var(--tw-bg-opacity));\n}\n\n.bg-graySelected {\n --tw-bg-opacity: 1;\n background-color: rgb(245 245 245 / var(--tw-bg-opacity));\n}\n\n.bg-transparent {\n background-color: #0000;\n}\n\n.bg-white {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity));\n}\n\n.bg-black\\/\\[\\.6\\] {\n background-color: #0009;\n}\n\n.bg-\\[\\#f12828\\] {\n --tw-bg-opacity: 1;\n background-color: rgb(241 40 40 / var(--tw-bg-opacity));\n}\n\n.bg-\\[\\#565656\\] {\n --tw-bg-opacity: 1;\n background-color: rgb(86 86 86 / var(--tw-bg-opacity));\n}\n\n.bg-black, .bg-\\[\\#000\\] {\n --tw-bg-opacity: 1;\n background-color: rgb(0 0 0 / var(--tw-bg-opacity));\n}\n\n.bg-\\[\\#FFFFFF\\] {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity));\n}\n\n.bg-underlay {\n background-color: #00000040;\n}\n\n.bg-\\[\\#f3f3f3\\] {\n --tw-bg-opacity: 1;\n background-color: rgb(243 243 243 / var(--tw-bg-opacity));\n}\n\n.bg-secondaryVLight {\n --tw-bg-opacity: 1;\n background-color: rgb(235 235 235 / var(--tw-bg-opacity));\n}\n\n.bg-opacity-90 {\n --tw-bg-opacity: .9;\n}\n\n.object-cover {\n object-fit: cover;\n}\n\n.p-2\\.5 {\n padding: .625rem;\n}\n\n.p-2 {\n padding: .5rem;\n}\n\n.p-\\[3px\\] {\n padding: 3px;\n}\n\n.p-\\[12px\\] {\n padding: 12px;\n}\n\n.py-3 {\n padding-top: .75rem;\n padding-bottom: .75rem;\n}\n\n.px-4 {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n\n.py-\\[9px\\] {\n padding-top: 9px;\n padding-bottom: 9px;\n}\n\n.px-3\\.5 {\n padding-left: .875rem;\n padding-right: .875rem;\n}\n\n.px-3 {\n padding-left: .75rem;\n padding-right: .75rem;\n}\n\n.py-2 {\n padding-top: .5rem;\n padding-bottom: .5rem;\n}\n\n.py-1\\.5 {\n padding-top: .375rem;\n padding-bottom: .375rem;\n}\n\n.px-2\\.5 {\n padding-left: .625rem;\n padding-right: .625rem;\n}\n\n.py-1 {\n padding-top: .25rem;\n padding-bottom: .25rem;\n}\n\n.px-2 {\n padding-left: .5rem;\n padding-right: .5rem;\n}\n\n.px-\\[10px\\] {\n padding-left: 10px;\n padding-right: 10px;\n}\n\n.px-5 {\n padding-left: 1.25rem;\n padding-right: 1.25rem;\n}\n\n.py-\\[25px\\] {\n padding-top: 25px;\n padding-bottom: 25px;\n}\n\n.px-\\[20px\\] {\n padding-left: 20px;\n padding-right: 20px;\n}\n\n.pt-2\\.5 {\n padding-top: .625rem;\n}\n\n.pt-2 {\n padding-top: .5rem;\n}\n\n.pb-2\\.5 {\n padding-bottom: .625rem;\n}\n\n.pb-2 {\n padding-bottom: .5rem;\n}\n\n.pb-\\[25px\\] {\n padding-bottom: 25px;\n}\n\n.text-center {\n text-align: center;\n}\n\n.text-base {\n letter-spacing: -.02em;\n font-size: 16px;\n line-height: 19px;\n}\n\n.text-sm {\n letter-spacing: -.02em;\n font-size: 14px;\n line-height: 17px;\n}\n\n.text-xs {\n letter-spacing: -.02em;\n font-size: 12px;\n line-height: 14px;\n}\n\n.text-\\[112px\\] {\n font-size: 112px;\n}\n\n.text-xl {\n letter-spacing: -.02em;\n font-size: 20px;\n line-height: 24px;\n}\n\n.text-lg {\n letter-spacing: -.02em;\n font-size: 18px;\n line-height: 22px;\n}\n\n.font-medium {\n font-weight: 500;\n}\n\n.font-bold {\n font-weight: 700;\n}\n\n.font-normal {\n font-weight: 400;\n}\n\n.leading-\\[20px\\] {\n line-height: 20px;\n}\n\n.text-white {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity));\n}\n\n.text-primary {\n --tw-text-opacity: 1;\n color: rgb(29 28 32 / var(--tw-text-opacity));\n}\n\n.text-white\\/80 {\n color: #fffc;\n}\n\n.text-secondary {\n --tw-text-opacity: 1;\n color: rgb(134 134 134 / var(--tw-text-opacity));\n}\n\n.text-primaryLight {\n --tw-text-opacity: 1;\n color: rgb(86 86 86 / var(--tw-text-opacity));\n}\n\n.text-black {\n --tw-text-opacity: 1;\n color: rgb(0 0 0 / var(--tw-text-opacity));\n}\n\n.underline {\n text-decoration-line: underline;\n}\n\n.antialiased {\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.opacity-0 {\n opacity: 0;\n}\n\n.opacity-50 {\n opacity: .5;\n}\n\n.opacity-\\[0\\.4\\] {\n opacity: .4;\n}\n\n.opacity-90 {\n opacity: .9;\n}\n\n.outline {\n outline-style: solid;\n}\n\n.ring-\\[3px\\] {\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n\n.ring-cta {\n --tw-ring-opacity: 1;\n --tw-ring-color: rgb(38 138 250 / var(--tw-ring-opacity));\n}\n\n.blur {\n --tw-blur: blur(8px);\n filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n\n.filter {\n filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n\n.transition {\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter, backdrop-filter;\n transition-duration: .15s;\n transition-timing-function: cubic-bezier(.4, 0, .2, 1);\n}\n\n.transition-colors {\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n transition-duration: .15s;\n transition-timing-function: cubic-bezier(.4, 0, .2, 1);\n}\n\n.transition-\\[transform\\,border-radius\\] {\n transition-property: transform, border-radius;\n transition-duration: .15s;\n transition-timing-function: cubic-bezier(.4, 0, .2, 1);\n}\n\n.duration-300 {\n transition-duration: .3s;\n}\n\n.ease-in-out {\n transition-timing-function: cubic-bezier(.4, 0, .2, 1);\n}\n\n.ease-in {\n transition-timing-function: cubic-bezier(.4, 0, 1, 1);\n}\n\n.ease-out {\n transition-timing-function: cubic-bezier(0, 0, .2, 1);\n}\n\n.inter {\n font-family: Inter, sans-serif;\n}\n\n@supports (font-variation-settings: normal) {\n .inter {\n font-family: Inter var, sans-serif;\n }\n}\n\n.first-letter\\:capitalize:first-letter {\n text-transform: capitalize;\n}\n\n.focus\\:outline-none:focus {\n outline-offset: 2px;\n outline: 2px solid #0000;\n}\n\n.disabled\\:bg-secondaryLight:disabled {\n --tw-bg-opacity: 1;\n background-color: rgb(179 179 179 / var(--tw-bg-opacity));\n}\n\n.disabled\\:bg-graySelected:disabled {\n --tw-bg-opacity: 1;\n background-color: rgb(245 245 245 / var(--tw-bg-opacity));\n}\n\n.disabled\\:text-secondaryLight:disabled {\n --tw-text-opacity: 1;\n color: rgb(179 179 179 / var(--tw-text-opacity));\n}\n\n";
13039
+ $1e2747ca72d0ab49$exports = "*, :before, :after, ::backdrop {\n --tw-border-spacing-x: 0;\n --tw-border-spacing-y: 0;\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-rotate: 0;\n --tw-skew-x: 0;\n --tw-skew-y: 0;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n --tw-pan-x: ;\n --tw-pan-y: ;\n --tw-pinch-zoom: ;\n --tw-scroll-snap-strictness: proximity;\n --tw-ordinal: ;\n --tw-slashed-zero: ;\n --tw-numeric-figure: ;\n --tw-numeric-spacing: ;\n --tw-numeric-fraction: ;\n --tw-ring-inset: ;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-color: #3b82f680;\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-ring-shadow: 0 0 #0000;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n --tw-blur: ;\n --tw-brightness: ;\n --tw-contrast: ;\n --tw-grayscale: ;\n --tw-hue-rotate: ;\n --tw-invert: ;\n --tw-saturate: ;\n --tw-sepia: ;\n --tw-drop-shadow: ;\n --tw-backdrop-blur: ;\n --tw-backdrop-brightness: ;\n --tw-backdrop-contrast: ;\n --tw-backdrop-grayscale: ;\n --tw-backdrop-hue-rotate: ;\n --tw-backdrop-invert: ;\n --tw-backdrop-opacity: ;\n --tw-backdrop-saturate: ;\n --tw-backdrop-sepia: ;\n}\n\n.visible {\n visibility: visible;\n}\n\n.fixed {\n position: fixed;\n}\n\n.absolute {\n position: absolute;\n}\n\n.relative {\n position: relative;\n}\n\n.inset-0 {\n inset: 0;\n}\n\n.left-0 {\n left: 0;\n}\n\n.top-0 {\n top: 0;\n}\n\n.z-\\[100\\] {\n z-index: 100;\n}\n\n.z-50 {\n z-index: 50;\n}\n\n.z-\\[1\\] {\n z-index: 1;\n}\n\n.z-10 {\n z-index: 10;\n}\n\n.m-\\[10px\\] {\n margin: 10px;\n}\n\n.mx-\\[20px\\] {\n margin-left: 20px;\n margin-right: 20px;\n}\n\n.ml-\\[10px\\] {\n margin-left: 10px;\n}\n\n.mt-\\[10px\\] {\n margin-top: 10px;\n}\n\n.mt-\\[50px\\] {\n margin-top: 50px;\n}\n\n.block {\n display: block;\n}\n\n.inline {\n display: inline;\n}\n\n.flex {\n display: flex;\n}\n\n.table {\n display: table;\n}\n\n.hidden {\n display: none;\n}\n\n.h-screen {\n height: 100vh;\n}\n\n.h-full {\n height: 100%;\n}\n\n.h-\\[150px\\] {\n height: 150px;\n}\n\n.h-\\[60px\\] {\n height: 60px;\n}\n\n.h-\\[56px\\] {\n height: 56px;\n}\n\n.h-\\[40px\\] {\n height: 40px;\n}\n\n.h-\\[72px\\] {\n height: 72px;\n}\n\n.h-\\[235px\\] {\n height: 235px;\n}\n\n.h-\\[93px\\] {\n height: 93px;\n}\n\n.h-fit {\n height: -moz-fit-content;\n height: fit-content;\n}\n\n.h-\\[24px\\] {\n height: 24px;\n}\n\n.h-\\[30px\\] {\n height: 30px;\n}\n\n.h-1\\/3 {\n height: 33.3333%;\n}\n\n.max-h-\\[inherit\\] {\n max-height: inherit;\n}\n\n.max-h-\\[70px\\] {\n max-height: 70px;\n}\n\n.min-h-0 {\n min-height: 0;\n}\n\n.min-h-\\[100\\%\\] {\n min-height: 100%;\n}\n\n.w-screen {\n width: 100vw;\n}\n\n.w-full {\n width: 100%;\n}\n\n.w-1\\/3 {\n width: 33.3333%;\n}\n\n.w-\\[60px\\] {\n width: 60px;\n}\n\n.w-\\[56px\\] {\n width: 56px;\n}\n\n.w-\\[72px\\] {\n width: 72px;\n}\n\n.w-\\[76px\\] {\n width: 76px;\n}\n\n.w-\\[360px\\] {\n width: 360px;\n}\n\n.w-\\[450px\\] {\n width: 450px;\n}\n\n.w-\\[320px\\] {\n width: 320px;\n}\n\n.w-\\[24px\\] {\n width: 24px;\n}\n\n.w-\\[30px\\] {\n width: 30px;\n}\n\n.min-w-full, .min-w-\\[100\\%\\] {\n min-width: 100%;\n}\n\n.min-w-\\[24px\\] {\n min-width: 24px;\n}\n\n.max-w-\\[400px\\] {\n max-width: 400px;\n}\n\n.max-w-\\[135px\\] {\n max-width: 135px;\n}\n\n.max-w-\\[500px\\] {\n max-width: 500px;\n}\n\n.max-w-\\[600px\\] {\n max-width: 600px;\n}\n\n.max-w-\\[800px\\] {\n max-width: 800px;\n}\n\n.max-w-\\[screen\\] {\n max-width: screen;\n}\n\n.max-w-\\[70px\\] {\n max-width: 70px;\n}\n\n.flex-1 {\n flex: 1;\n}\n\n.flex-auto {\n flex: auto;\n}\n\n.flex-grow {\n flex-grow: 1;\n}\n\n.translate-y-2 {\n --tw-translate-y: .5rem;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.translate-y-0 {\n --tw-translate-y: 0px;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.translate-y-\\[200\\%\\] {\n --tw-translate-y: 200%;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.translate-y-full {\n --tw-translate-y: 100%;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.scale-\\[0\\.4\\] {\n --tw-scale-x: .4;\n --tw-scale-y: .4;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.scale-x-\\[-1\\] {\n --tw-scale-x: -1;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.transform {\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.cursor-not-allowed {\n cursor: not-allowed;\n}\n\n.cursor-pointer {\n cursor: pointer;\n}\n\n.resize {\n resize: both;\n}\n\n.flex-row {\n flex-direction: row;\n}\n\n.flex-col {\n flex-direction: column;\n}\n\n.flex-wrap {\n flex-wrap: wrap;\n}\n\n.items-end {\n align-items: flex-end;\n}\n\n.items-center {\n align-items: center;\n}\n\n.justify-end {\n justify-content: flex-end;\n}\n\n.justify-center {\n justify-content: center;\n}\n\n.justify-between {\n justify-content: space-between;\n}\n\n.gap-\\[10px\\] {\n gap: 10px;\n}\n\n.gap-\\[5px\\] {\n gap: 5px;\n}\n\n.gap-2\\.5 {\n gap: .625rem;\n}\n\n.gap-2 {\n gap: .5rem;\n}\n\n.gap-5 {\n gap: 1.25rem;\n}\n\n.gap-\\[20px\\] {\n gap: 20px;\n}\n\n.overflow-auto {\n overflow: auto;\n}\n\n.overflow-hidden {\n overflow: hidden;\n}\n\n.overflow-x-auto {\n overflow-x: auto;\n}\n\n.rounded-\\[10px\\] {\n border-radius: 10px;\n}\n\n.rounded-lg {\n border-radius: .5rem;\n}\n\n.rounded-md {\n border-radius: .375rem;\n}\n\n.rounded-\\[15px\\] {\n border-radius: 15px;\n}\n\n.rounded-full {\n border-radius: 9999px;\n}\n\n.rounded-\\[5px\\] {\n border-radius: 5px;\n}\n\n.rounded-\\[60px\\] {\n border-radius: 60px;\n}\n\n.rounded-\\[inherit\\] {\n border-radius: inherit;\n}\n\n.rounded-\\[8px\\] {\n border-radius: 8px;\n}\n\n.rounded-\\[50\\%\\] {\n border-radius: 50%;\n}\n\n.rounded-t-\\[15px\\] {\n border-top-left-radius: 15px;\n border-top-right-radius: 15px;\n}\n\n.border {\n border-width: 1px;\n}\n\n.border-2 {\n border-width: 2px;\n}\n\n.border-t {\n border-top-width: 1px;\n}\n\n.border-secondaryLight {\n --tw-border-opacity: 1;\n border-color: rgb(179 179 179 / var(--tw-border-opacity));\n}\n\n.border-white {\n --tw-border-opacity: 1;\n border-color: rgb(255 255 255 / var(--tw-border-opacity));\n}\n\n.border-secondaryVLight {\n --tw-border-opacity: 1;\n border-color: rgb(235 235 235 / var(--tw-border-opacity));\n}\n\n.border-primaryLight {\n --tw-border-opacity: 1;\n border-color: rgb(86 86 86 / var(--tw-border-opacity));\n}\n\n.bg-black {\n --tw-bg-opacity: 1;\n background-color: rgb(0 0 0 / var(--tw-bg-opacity));\n}\n\n.bg-primaryLight {\n --tw-bg-opacity: 1;\n background-color: rgb(86 86 86 / var(--tw-bg-opacity));\n}\n\n.bg-primary {\n --tw-bg-opacity: 1;\n background-color: rgb(29 28 32 / var(--tw-bg-opacity));\n}\n\n.bg-graySelected {\n --tw-bg-opacity: 1;\n background-color: rgb(245 245 245 / var(--tw-bg-opacity));\n}\n\n.bg-transparent {\n background-color: #0000;\n}\n\n.bg-white {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity));\n}\n\n.bg-tertiarySelected {\n --tw-bg-opacity: 1;\n background-color: rgb(216 216 216 / var(--tw-bg-opacity));\n}\n\n.bg-tertiary {\n --tw-bg-opacity: 1;\n background-color: rgb(245 245 245 / var(--tw-bg-opacity));\n}\n\n.bg-black\\/\\[\\.6\\] {\n background-color: #0009;\n}\n\n.bg-\\[\\#565656\\] {\n --tw-bg-opacity: 1;\n background-color: rgb(86 86 86 / var(--tw-bg-opacity));\n}\n\n.bg-\\[\\#f12828\\] {\n --tw-bg-opacity: 1;\n background-color: rgb(241 40 40 / var(--tw-bg-opacity));\n}\n\n.bg-\\[\\#000\\] {\n --tw-bg-opacity: 1;\n background-color: rgb(0 0 0 / var(--tw-bg-opacity));\n}\n\n.bg-\\[\\#FFFFFF\\] {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity));\n}\n\n.bg-underlay {\n background-color: #00000040;\n}\n\n.bg-\\[\\#f3f3f3\\] {\n --tw-bg-opacity: 1;\n background-color: rgb(243 243 243 / var(--tw-bg-opacity));\n}\n\n.bg-secondaryVLight {\n --tw-bg-opacity: 1;\n background-color: rgb(235 235 235 / var(--tw-bg-opacity));\n}\n\n.bg-opacity-90 {\n --tw-bg-opacity: .9;\n}\n\n.bg-\\[url\\(\\'https\\:\\/\\/cdn\\.snapcall\\.io\\/img\\/assist\\/gradient-bg\\.jpg\\'\\)\\] {\n background-image: url(\"https://cdn.snapcall.io/img/assist/gradient-bg.jpg\");\n}\n\n.bg-cover {\n background-size: cover;\n}\n\n.object-cover {\n object-fit: cover;\n}\n\n.object-fill {\n object-fit: fill;\n}\n\n.p-\\[15px\\] {\n padding: 15px;\n}\n\n.p-2\\.5 {\n padding: .625rem;\n}\n\n.p-2 {\n padding: .5rem;\n}\n\n.p-\\[10px\\] {\n padding: 10px;\n}\n\n.p-\\[3px\\] {\n padding: 3px;\n}\n\n.p-\\[12px\\] {\n padding: 12px;\n}\n\n.py-3 {\n padding-top: .75rem;\n padding-bottom: .75rem;\n}\n\n.px-4 {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n\n.py-\\[9px\\] {\n padding-top: 9px;\n padding-bottom: 9px;\n}\n\n.px-3\\.5 {\n padding-left: .875rem;\n padding-right: .875rem;\n}\n\n.px-3 {\n padding-left: .75rem;\n padding-right: .75rem;\n}\n\n.py-2 {\n padding-top: .5rem;\n padding-bottom: .5rem;\n}\n\n.py-1\\.5 {\n padding-top: .375rem;\n padding-bottom: .375rem;\n}\n\n.px-2\\.5 {\n padding-left: .625rem;\n padding-right: .625rem;\n}\n\n.py-1 {\n padding-top: .25rem;\n padding-bottom: .25rem;\n}\n\n.px-2 {\n padding-left: .5rem;\n padding-right: .5rem;\n}\n\n.px-\\[10px\\] {\n padding-left: 10px;\n padding-right: 10px;\n}\n\n.px-5 {\n padding-left: 1.25rem;\n padding-right: 1.25rem;\n}\n\n.py-\\[25px\\] {\n padding-top: 25px;\n padding-bottom: 25px;\n}\n\n.px-\\[20px\\] {\n padding-left: 20px;\n padding-right: 20px;\n}\n\n.pt-2\\.5 {\n padding-top: .625rem;\n}\n\n.pt-2 {\n padding-top: .5rem;\n}\n\n.pb-2\\.5 {\n padding-bottom: .625rem;\n}\n\n.pb-2 {\n padding-bottom: .5rem;\n}\n\n.pt-\\[20px\\] {\n padding-top: 20px;\n}\n\n.pb-\\[25px\\] {\n padding-bottom: 25px;\n}\n\n.text-center {\n text-align: center;\n}\n\n.align-middle {\n vertical-align: middle;\n}\n\n.text-base {\n letter-spacing: -.02em;\n font-size: 16px;\n line-height: 19px;\n}\n\n.text-sm {\n letter-spacing: -.02em;\n font-size: 14px;\n line-height: 17px;\n}\n\n.text-xs {\n letter-spacing: -.02em;\n font-size: 12px;\n line-height: 14px;\n}\n\n.text-\\[112px\\] {\n font-size: 112px;\n}\n\n.text-xl {\n letter-spacing: -.02em;\n font-size: 20px;\n line-height: 24px;\n}\n\n.text-lg {\n letter-spacing: -.02em;\n font-size: 18px;\n line-height: 22px;\n}\n\n.font-medium {\n font-weight: 500;\n}\n\n.font-semibold {\n font-weight: 600;\n}\n\n.font-bold {\n font-weight: 700;\n}\n\n.font-normal {\n font-weight: 400;\n}\n\n.leading-\\[20px\\] {\n line-height: 20px;\n}\n\n.text-white {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity));\n}\n\n.text-primary {\n --tw-text-opacity: 1;\n color: rgb(29 28 32 / var(--tw-text-opacity));\n}\n\n.text-mainBlue {\n --tw-text-opacity: 1;\n color: rgb(0 106 255 / var(--tw-text-opacity));\n}\n\n.text-white\\/80 {\n color: #fffc;\n}\n\n.text-secondary {\n --tw-text-opacity: 1;\n color: rgb(134 134 134 / var(--tw-text-opacity));\n}\n\n.text-primaryLight {\n --tw-text-opacity: 1;\n color: rgb(86 86 86 / var(--tw-text-opacity));\n}\n\n.text-black {\n --tw-text-opacity: 1;\n color: rgb(0 0 0 / var(--tw-text-opacity));\n}\n\n.underline {\n text-decoration-line: underline;\n}\n\n.antialiased {\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.opacity-0 {\n opacity: 0;\n}\n\n.opacity-50 {\n opacity: .5;\n}\n\n.opacity-\\[0\\.4\\] {\n opacity: .4;\n}\n\n.opacity-90 {\n opacity: .9;\n}\n\n.outline {\n outline-style: solid;\n}\n\n.ring-\\[3px\\] {\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n\n.ring-cta {\n --tw-ring-opacity: 1;\n --tw-ring-color: rgb(38 138 250 / var(--tw-ring-opacity));\n}\n\n.blur {\n --tw-blur: blur(8px);\n filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n\n.filter {\n filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n\n.transition {\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter, backdrop-filter;\n transition-duration: .15s;\n transition-timing-function: cubic-bezier(.4, 0, .2, 1);\n}\n\n.transition-colors {\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n transition-duration: .15s;\n transition-timing-function: cubic-bezier(.4, 0, .2, 1);\n}\n\n.transition-\\[transform\\,border-radius\\] {\n transition-property: transform, border-radius;\n transition-duration: .15s;\n transition-timing-function: cubic-bezier(.4, 0, .2, 1);\n}\n\n.duration-300 {\n transition-duration: .3s;\n}\n\n.ease-in {\n transition-timing-function: cubic-bezier(.4, 0, 1, 1);\n}\n\n.ease-out {\n transition-timing-function: cubic-bezier(0, 0, .2, 1);\n}\n\n.ease-in-out {\n transition-timing-function: cubic-bezier(.4, 0, .2, 1);\n}\n\n.inter {\n font-family: Inter, sans-serif;\n}\n\n@supports (font-variation-settings: normal) {\n .inter {\n font-family: Inter var, sans-serif;\n }\n}\n\n.first-letter\\:capitalize:first-letter {\n text-transform: capitalize;\n}\n\n.focus\\:outline-none:focus {\n outline-offset: 2px;\n outline: 2px solid #0000;\n}\n\n.disabled\\:bg-secondaryLight:disabled {\n --tw-bg-opacity: 1;\n background-color: rgb(179 179 179 / var(--tw-bg-opacity));\n}\n\n.disabled\\:bg-graySelected:disabled {\n --tw-bg-opacity: 1;\n background-color: rgb(245 245 245 / var(--tw-bg-opacity));\n}\n\n.disabled\\:text-secondaryLight:disabled {\n --tw-text-opacity: 1;\n color: rgb(179 179 179 / var(--tw-text-opacity));\n}\n\n.disabled\\:opacity-50:disabled {\n opacity: .5;\n}\n\n";
12534
13040
 
12535
13041
 
12536
13042
  var $e02c50a47b475960$exports = {};
@@ -12578,7 +13084,7 @@ const $24075a5d702d64b3$export$3f94917203ab7078 = {
12578
13084
  let styleElement = null;
12579
13085
  styleElement = /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $3Sbms$Fragment), {
12580
13086
  children: [
12581
- options.recorder && /*#__PURE__*/ (0, $3Sbms$jsx)("style", {
13087
+ options.recorder?.enabled && /*#__PURE__*/ (0, $3Sbms$jsx)("style", {
12582
13088
  children: (0, (/*@__PURE__*/$parcel$interopDefault($e02c50a47b475960$exports)))
12583
13089
  }),
12584
13090
  /*#__PURE__*/ (0, $3Sbms$jsx)("style", {