@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.
package/dist/stream-ui.js CHANGED
@@ -19,10 +19,10 @@ var $jQDcL$qrcode = require("qrcode");
19
19
  var $jQDcL$reactstately = require("react-stately");
20
20
  var $jQDcL$classnames = require("classnames");
21
21
  var $jQDcL$reactaria = require("react-aria");
22
- var $jQDcL$reactariaoverlays = require("@react-aria/overlays");
23
22
  var $jQDcL$reactariautils = require("@react-aria/utils");
24
23
  var $jQDcL$reacttransitiongroup = require("react-transition-group");
25
24
  var $jQDcL$reactariainteractions = require("@react-aria/interactions");
25
+ var $jQDcL$reactariaoverlays = require("@react-aria/overlays");
26
26
  var $jQDcL$reactcontentloader = require("react-content-loader");
27
27
 
28
28
  function $parcel$interopDefault(a) {
@@ -472,6 +472,8 @@ const $91fcbf58e59aae79$export$84584c2a98eb6753 = {
472
472
  someone: "Someone",
473
473
  camera: "Camera",
474
474
  microphone: "Microphone",
475
+ photo: "Photo",
476
+ video: "Video",
475
477
  screen: "Screen",
476
478
  speaker: "Speaker",
477
479
  user: "User",
@@ -479,7 +481,10 @@ const $91fcbf58e59aae79$export$84584c2a98eb6753 = {
479
481
  from: "From",
480
482
  accept: "Accept",
481
483
  decline: "Decline",
482
- you: "You"
484
+ you: "You",
485
+ cancel: "Cancel",
486
+ confirm: "Confirm",
487
+ remove: "Remove"
483
488
  },
484
489
  greeting: {
485
490
  mainTitle: "Welcome to SnapCall",
@@ -489,6 +494,46 @@ const $91fcbf58e59aae79$export$84584c2a98eb6753 = {
489
494
  nameSubmit: "Join Conversation",
490
495
  footerTitle: "Powered by SnapCall",
491
496
  footerDescription: "Meet SnapCall, the easiest way to add real-time video to platform, product or service."
497
+ },
498
+ recorder: {
499
+ submissionTitle: "Thank you for your submission!",
500
+ submissionDescription: "Your photo/video has been successfully sent. We will review it and get back to you soon.",
501
+ confirmRemovalTitle: "Confirm removal",
502
+ confirmRemovalDescription: "Are you sure you want to remove this photo/video? This action cannot be undone.",
503
+ elementBeingProcessed: "Please wait a moment while your {{ type }} is being processed...",
504
+ waitVideo: "It may take up to 15 seconds for a video to be ready.",
505
+ elementCaptureSuccess: "{{ type }} successfully captured",
506
+ takeNewElement: "Take new {{ type }}",
507
+ sendElement: "Send {{ type }}",
508
+ sendElements: "Send {{ count }} elements",
509
+ allowAccess: "Allow access",
510
+ okay: "Okay",
511
+ allowCamMicAccess: "Allow access to cam/mic",
512
+ allowScreenShareAccess: "Allow access to screen sharing",
513
+ permissionDeniedTitle: "Something went wrong!",
514
+ 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.",
515
+ photoInstructionsTitle: "Ready to take a shot?",
516
+ videoInstructionsTitle: "Ready to record a video?",
517
+ screenShareInstructionsTitle: "Ready to capture your screen?",
518
+ instructions: {
519
+ allowAccessOnPrompt: "When prompted, <1>allow access</1> to camera and microphone.",
520
+ tapPhotoButton: "Tap the <1 /><2> Camera button</2> to take a photo.",
521
+ multiplePhotos: "Don't hesitate to take multiple photos for more detail.",
522
+ reviewAndSendPhotos: "You can review your photo and then <1>send it when you're done.</1>",
523
+ tapVideoButton: "Tap the <1 /><2> Record button</2> to start a recording.",
524
+ videoSpeech: "You can <1>speak during</1> the recording for added detail.",
525
+ tapStopVideoButton: "When you're finished, tap the <1 /><2> Stop button</2>.",
526
+ reviewAndSendVideos: "You can review your video and then <1>send it when you're done</2>.",
527
+ tapScreenShareButton: "Tap on <1> Record my screen</1> to start a recording.",
528
+ tapStopScreenShareButton: "When you're finished, tap on <1>Stop recording</1>.",
529
+ reviewAnsSendScreenShare: "You can review your video and then <1>send it when you're done</1>."
530
+ },
531
+ switchToMobileTitle: "Switch to your mobile",
532
+ switchToMobileDescription: "Enjoy an even more convenient experience by using your phone to take photos and record videos.",
533
+ useDesktopVersion: "Use desktop version",
534
+ scanQRCode: "Scan this QR code with a compatible device.",
535
+ startScreenShareButton: "Record my screen",
536
+ stopScreenShareButton: "Stop recording"
492
537
  }
493
538
  }
494
539
  };
@@ -626,6 +671,8 @@ const $e52ca91c2b296e41$export$acb2a88f7d552ebf = {
626
671
  someone: "Quelqu'un",
627
672
  camera: "Cam\xe9ra",
628
673
  microphone: "Micro",
674
+ photo: "Photo",
675
+ video: "Vid\xe9o",
629
676
  screen: "\xc9cran",
630
677
  speaker: "Haut-parleur",
631
678
  user: "Utilisateur",
@@ -633,7 +680,10 @@ const $e52ca91c2b296e41$export$acb2a88f7d552ebf = {
633
680
  from: "Depuis",
634
681
  accept: "Accepter",
635
682
  decline: "D\xe9cliner",
636
- you: "Vous"
683
+ you: "Vous",
684
+ cancel: "Annuler",
685
+ confirm: "Confirmer",
686
+ remove: "Enlever"
637
687
  },
638
688
  greeting: {
639
689
  mainTitle: "Bienvenue sur SnapCall",
@@ -643,6 +693,46 @@ const $e52ca91c2b296e41$export$acb2a88f7d552ebf = {
643
693
  nameSubmit: "Rejoindre la conversation",
644
694
  footerTitle: "Propuls\xe9 par SnapCall",
645
695
  footerDescription: "D\xe9couvrez SnapCall, ajoutez de la vid\xe9o en temps r\xe9el \xe0 n'importe quelle plateforme, produit ou service."
696
+ },
697
+ recorder: {
698
+ submissionTitle: "Merci pour votre soumission!",
699
+ submissionDescription: "Votre photo/vid\xe9o a \xe9t\xe9 envoy\xe9e avec succ\xe8s. Nous l'examinerons et reviendrons vers vous bient\xf4t.",
700
+ confirmRemovalTitle: "Confirmer la suppression",
701
+ confirmRemovalDescription: "Voulez-vous vraiment supprimer cette photo/vid\xe9o? Cette action ne peut pas \xeatre annul\xe9e.",
702
+ elementBeingProcessed: "Veuillez patienter un moment pendant que votre {{ type }} est en cours de traitement...",
703
+ waitVideo: "Cela peut prendre jusqu'\xe0 15 secondes pour qu'une vid\xe9o soit pr\xeate.",
704
+ elementCaptureSuccess: "{{ type }} captur\xe9e avec succ\xe8s",
705
+ takeNewElement: "Prendre une nouvelle {{ type }}",
706
+ sendElement: "Envoyer une {{ type }}",
707
+ sendElements: "Envoyer {{ count }} \xe9l\xe9ments",
708
+ allowAccess: "Permettre l'acc\xe8s",
709
+ okay: "D'accord",
710
+ allowCamMicAccess: "Autoriser l'acc\xe8s \xe0 la cam\xe9ra/au micro",
711
+ allowScreenShareAccess: "Autoriser l'acc\xe8s au partage d'\xe9cran",
712
+ permissionDeniedTitle: "Quelque chose s'est mal pass\xe9!",
713
+ 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.",
714
+ photoInstructionsTitle: "Pr\xeat \xe0 prendre une photo?",
715
+ videoInstructionsTitle: "Pr\xeat \xe0 enregistrer une vid\xe9o?",
716
+ screenShareInstructionsTitle: "Pr\xeat \xe0 capturer votre \xe9cran?",
717
+ instructions: {
718
+ allowAccessOnPrompt: "Lorsque vous y \xeates invit\xe9, <1>autorisez l'acc\xe8s</1> \xe0 la cam\xe9ra et au microphone.",
719
+ tapPhotoButton: "Appuyez sur le <1 /><2>bouton Appareil photo</2> pour prendre une photo.",
720
+ multiplePhotos: "N'h\xe9sitez pas \xe0 prendre plusieurs photos pour plus de d\xe9tails.",
721
+ reviewAndSendPhotos: "Vous pouvez revoir votre photo, puis <1>l'envoyer lorsque vous avez termin\xe9.</1>",
722
+ tapVideoButton: "Appuyez sur le <1 /><2>bouton d'enregistrement</2> pour d\xe9marrer un enregistrement.",
723
+ videoSpeech: "Vous pouvez <1>parler pendant</1> l'enregistrement pour plus de d\xe9tails.",
724
+ tapStopVideoButton: "Lorsque vous avez termin\xe9, appuyez sur le <1 /><2>bouton Arr\xeater</2>.",
725
+ reviewAndSendVideos: "Vous pouvez revoir votre vid\xe9o, puis <1>l'envoyer lorsque vous avez termin\xe9</2>.",
726
+ tapScreenShareButton: "Appuyez sur <1>Enregistrer mon \xe9cran</1> pour d\xe9marrer un enregistrement.",
727
+ tapStopScreenShareButton: "Lorsque vous avez termin\xe9, appuyez sur <1>Arr\xeater l'enregistrement</1>.",
728
+ reviewAnsSendScreenShare: "Vous pouvez revoir votre vid\xe9o, puis <1>l'envoyer lorsque vous avez termin\xe9</1>."
729
+ },
730
+ switchToMobileTitle: "Basculez vers votre mobile",
731
+ switchToMobileDescription: "Profitez d'une exp\xe9rience encore plus pratique en utilisant votre t\xe9l\xe9phone pour prendre des photos et enregistrer des vid\xe9os.",
732
+ useDesktopVersion: "Utiliser la version de bureau",
733
+ scanQRCode: "Scannez ce code QR avec un appareil compatible.",
734
+ startScreenShareButton: "Enregistrer mon \xe9cran",
735
+ stopScreenShareButton: "Arr\xeater d'enregistrer"
646
736
  }
647
737
  }
648
738
  };
@@ -784,6 +874,8 @@ const $e0ae3d23c2381da3$export$3486a10f30cf1ee4 = {
784
874
  someone: "Qualcuno",
785
875
  camera: "Telecamera",
786
876
  microphone: "Microfono",
877
+ photo: "Foto",
878
+ video: "Video",
787
879
  screen: "Schermo",
788
880
  speaker: "Altoparlante",
789
881
  user: "Utente",
@@ -791,7 +883,10 @@ const $e0ae3d23c2381da3$export$3486a10f30cf1ee4 = {
791
883
  from: "Da",
792
884
  accept: "Accettare",
793
885
  decline: "Declinare",
794
- you: "Voi"
886
+ you: "Voi",
887
+ cancel: "Annulla",
888
+ confirm: "Confermare",
889
+ remove: "Rimuovere"
795
890
  },
796
891
  greeting: {
797
892
  mainTitle: "Benvenuto a SnapCall",
@@ -801,6 +896,46 @@ const $e0ae3d23c2381da3$export$3486a10f30cf1ee4 = {
801
896
  nameSubmit: "Partecipa alla conversazione",
802
897
  footerTitle: "Offerto da SnapCall",
803
898
  footerDescription: "Incontrare SnapCall, il modo pi\xf9 semplice per aggiungere video in tempo reale a piattaforma, prodotto o servizio."
899
+ },
900
+ recorder: {
901
+ submissionTitle: "Grazie per la vostra presentazione!",
902
+ submissionDescription: "La tua foto/video \xe8 stato inviato con successo. Lo esamineremo e ti ricontatteremo presto.",
903
+ confirmRemovalTitle: "Conferma la rimozione",
904
+ confirmRemovalDescription: "Sei sicuro di voler rimuovere questa foto/video? Questa azione non pu\xf2 essere annullata.",
905
+ elementBeingProcessed: "Attendi un momento mentre la tua {{ type }} \xe8 in fase di elaborazione...",
906
+ waitVideo: "Potrebbero essere necessari fino a 15 secondi prima che un video sia pronto.",
907
+ elementCaptureSuccess: "{{ type }} catturato con successo",
908
+ takeNewElement: "Scatta una nuova {{ type }}",
909
+ sendElement: "Invia una {{ type }}",
910
+ sendElements: "Invia {{ count }} elementi",
911
+ allowAccess: "Consentire l'accesso",
912
+ okay: "Va bene",
913
+ allowCamMicAccess: "Consenti l'accesso a cam/microfono",
914
+ allowScreenShareAccess: "Consenti l'accesso alla condivisione dello schermo",
915
+ permissionDeniedTitle: "Qualcosa \xe8 andato storto!",
916
+ 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.",
917
+ photoInstructionsTitle: "Pronto a fare un tentativo?",
918
+ videoInstructionsTitle: "Pronto a registrare un video?",
919
+ screenShareInstructionsTitle: "Pronto a catturare il tuo schermo?",
920
+ instructions: {
921
+ allowAccessOnPrompt: "Quando richiesto, <1>consenti l'accesso</1> alla videocamera e al microfono.",
922
+ tapPhotoButton: "Tocca il <1 /><2> pulsante Fotocamera</2> per scattare una foto.",
923
+ multiplePhotos: "Non esitate a scattare pi\xf9 foto per maggiori dettagli.",
924
+ reviewAndSendPhotos: "Puoi rivedere la tua foto e poi <1>inviarla quando hai finito.</1>",
925
+ tapVideoButton: "Tocca il <1 /><2> pulsante Registra</2> per avviare una registrazione.",
926
+ videoSpeech: "Puoi <1>parlare durante</1> la registrazione per ulteriori dettagli.",
927
+ tapStopVideoButton: "Al termine, tocca il <1 /><2> pulsante Interrompi</2>.",
928
+ reviewAndSendVideos: "Puoi rivedere il tuo video e poi <1>inviarlo quando hai finito</2>.",
929
+ tapScreenShareButton: "Tocca <1> Registra il mio schermo</1> per avviare una registrazione.",
930
+ tapStopScreenShareButton: "Al termine, tocca <1>Interrompi registrazione</1>.",
931
+ reviewAnsSendScreenShare: "Puoi rivedere il tuo video e poi <1>inviarlo quando hai finito</1>."
932
+ },
933
+ switchToMobileTitle: "Passa al tuo cellulare",
934
+ switchToMobileDescription: "Goditi un'esperienza ancora pi\xf9 comoda utilizzando il telefono per scattare foto e registrare video.",
935
+ useDesktopVersion: "Usa la versione desktop",
936
+ scanQRCode: "Scansiona questo codice QR con un dispositivo compatibile.",
937
+ startScreenShareButton: "Registra il mio schermo",
938
+ stopScreenShareButton: "Interrompi la registrazione"
804
939
  }
805
940
  }
806
941
  };
@@ -1053,8 +1188,10 @@ var $1bfa11322d1d6377$export$2e2bcd8739ae039 = $1bfa11322d1d6377$var$AudioRender
1053
1188
  const $67e3b71ab2fb8185$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>';
1054
1189
 
1055
1190
 
1056
- const $3575c8a563f2a1da$var$getWatermarkedCanvas = (canvas)=>new Promise((resolve)=>{
1057
- const dpr = window.devicePixelRatio || 1;
1191
+ const $83954b4ec0d03b4b$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>`;
1192
+
1193
+
1194
+ const $3575c8a563f2a1da$var$getWatermarkedCanvas = (canvas, dpr = 1)=>new Promise((resolve)=>{
1058
1195
  const context = canvas.getContext("2d");
1059
1196
  const svgBlob = new Blob([
1060
1197
  (0, $67e3b71ab2fb8185$export$218be676a714a9df)
@@ -1071,7 +1208,26 @@ const $3575c8a563f2a1da$var$getWatermarkedCanvas = (canvas)=>new Promise((resolv
1071
1208
  };
1072
1209
  watermarkImage.src = blobUrl;
1073
1210
  });
1074
- const $3575c8a563f2a1da$export$674c90a250a8b2c5 = async (video)=>{
1211
+ const $3575c8a563f2a1da$var$addVideoPlayerWatermarkedCanvas = (canvas, dpr = 1)=>new Promise((resolve)=>{
1212
+ const context = canvas.getContext("2d");
1213
+ const svgBlob = new Blob([
1214
+ (0, $83954b4ec0d03b4b$export$eabbd7447140cfb)
1215
+ ], {
1216
+ type: "image/svg+xml;charset=utf-8"
1217
+ });
1218
+ const blobUrl = URL.createObjectURL(svgBlob);
1219
+ const watermarkImage = new Image();
1220
+ watermarkImage.onload = ()=>{
1221
+ const x = canvas.width / dpr / 2 - watermarkImage.width / 2;
1222
+ const y = canvas.height / dpr / 2 - watermarkImage.height / 2;
1223
+ context?.drawImage(watermarkImage, x, y);
1224
+ resolve(canvas);
1225
+ };
1226
+ watermarkImage.src = blobUrl;
1227
+ });
1228
+ const $3575c8a563f2a1da$export$674c90a250a8b2c5 = async (video, options = {
1229
+ addPlayWatermark: false
1230
+ })=>{
1075
1231
  const { videoWidth: videoWidth , videoHeight: videoHeight } = video;
1076
1232
  const orientation = videoWidth > videoHeight ? "landscape" : "portrait";
1077
1233
  const sourceWidth = orientation === "portrait" ? videoWidth : videoHeight;
@@ -1085,10 +1241,13 @@ const $3575c8a563f2a1da$export$674c90a250a8b2c5 = async (video)=>{
1085
1241
  canvas.height = sourceHeight * dpr;
1086
1242
  ctx?.scale(dpr, dpr);
1087
1243
  ctx?.drawImage(video, sourceX, sourceY, sourceWidth, sourceHeight, 0, 0, canvas.width / dpr, canvas.height / dpr);
1088
- const watermarkedCanvas = await $3575c8a563f2a1da$var$getWatermarkedCanvas(canvas);
1244
+ const watermarkedCanvas = await $3575c8a563f2a1da$var$getWatermarkedCanvas(canvas, window.devicePixelRatio);
1245
+ if (options.addPlayWatermark) return (await $3575c8a563f2a1da$var$addVideoPlayerWatermarkedCanvas(canvas, window.devicePixelRatio)).toDataURL("image/jpeg");
1089
1246
  return watermarkedCanvas.toDataURL("image/jpeg");
1090
1247
  };
1091
- const $3575c8a563f2a1da$export$4a210166cc9cb64b = async (src)=>{
1248
+ const $3575c8a563f2a1da$export$4a210166cc9cb64b = async (src, options = {
1249
+ addPlayWatermark: false
1250
+ })=>{
1092
1251
  const video = document.createElement("video");
1093
1252
  const stream = new MediaStream();
1094
1253
  stream.addTrack(src);
@@ -1104,6 +1263,7 @@ const $3575c8a563f2a1da$export$4a210166cc9cb64b = async (src)=>{
1104
1263
  canvas.width = video.width;
1105
1264
  ctx?.drawImage(video, 0, 0);
1106
1265
  const watermarkedCanvas = await $3575c8a563f2a1da$var$getWatermarkedCanvas(canvas);
1266
+ if (options.addPlayWatermark) return (await $3575c8a563f2a1da$var$addVideoPlayerWatermarkedCanvas(canvas)).toDataURL("image/jpeg");
1107
1267
  return watermarkedCanvas.toDataURL("image/jpeg");
1108
1268
  };
1109
1269
 
@@ -1419,6 +1579,49 @@ class $cb913ea078a876a6$export$2e2bcd8739ae039 {
1419
1579
  }
1420
1580
 
1421
1581
 
1582
+ const $93041e14f6aa3f24$var$audioContextConstructor = window.AudioContext || window.webkitAudioContext;
1583
+ class $93041e14f6aa3f24$export$22ddc20344c01547 {
1584
+ audioSources = {};
1585
+ tracks = {};
1586
+ constructor(){
1587
+ this.audioContext = new $93041e14f6aa3f24$var$audioContextConstructor();
1588
+ this.audioDestination = this.audioContext.createMediaStreamDestination();
1589
+ }
1590
+ getSetting(identifier) {
1591
+ return this.tracks[identifier]?.getSettings();
1592
+ }
1593
+ removeTrack(identifier) {
1594
+ const track = this.tracks[identifier];
1595
+ if (track) {
1596
+ this.audioSources[identifier]?.disconnect();
1597
+ delete this.tracks[identifier];
1598
+ delete this.audioSources[identifier];
1599
+ track.stop();
1600
+ }
1601
+ }
1602
+ addTrack(identifier, track) {
1603
+ if (track.kind === "audio") {
1604
+ this.removeTrack(identifier);
1605
+ const stream = new MediaStream([
1606
+ track
1607
+ ]);
1608
+ const audioSource = this.audioContext.createMediaStreamSource(stream);
1609
+ this.audioSources[identifier] = audioSource;
1610
+ this.tracks[identifier] = track;
1611
+ if (this.audioDestination) audioSource.connect(this.audioDestination);
1612
+ }
1613
+ }
1614
+ getFinalTrack() {
1615
+ return this.audioDestination.stream.getTracks()[0];
1616
+ }
1617
+ removeAll() {
1618
+ Object.keys(this.tracks).forEach((identifier)=>{
1619
+ this.removeTrack(identifier);
1620
+ });
1621
+ }
1622
+ }
1623
+
1624
+
1422
1625
  const $1dedebd5ff3002eb$var$log = new (0, $d0c6baf97675ab49$export$2e2bcd8739ae039)("StreamerClient");
1423
1626
  const $1dedebd5ff3002eb$export$103bedf43ba882db = {
1424
1627
  WEBRTC_FAILED: "WRTC1",
@@ -1958,6 +2161,7 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
1958
2161
  this.audioLevel?.release();
1959
2162
  this.audioLevel = undefined;
1960
2163
  if (this.micProducer && this.micProducer.track) {
2164
+ this.audioMedia?.removeTrack("mic");
1961
2165
  this.micProducer?.track?.stop();
1962
2166
  $1dedebd5ff3002eb$var$log.log("switchMicrophone", "stopping previous track");
1963
2167
  }
@@ -1970,7 +2174,9 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
1970
2174
  }));
1971
2175
  this.audioLevel = new (0, $6a90fae7e584afd4$export$ea669869acd8f177)(stream, this);
1972
2176
  // this.audioLevel.analyse();
2177
+ this.audioMedia = this.audioMedia || new (0, $93041e14f6aa3f24$export$22ddc20344c01547)();
1973
2178
  const track = stream.getAudioTracks()[0];
2179
+ this.audioMedia.addTrack("mic", track);
1974
2180
  await this.micProducer?.replaceTrack({
1975
2181
  track: track
1976
2182
  });
@@ -2046,10 +2252,12 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
2046
2252
  const transport = await this.getTransport("audio", "send");
2047
2253
  this.audioLevel = new (0, $6a90fae7e584afd4$export$ea669869acd8f177)(stream, this);
2048
2254
  // this.audioLevel.analyse();
2255
+ this.audioMedia = this.audioMedia || new (0, $93041e14f6aa3f24$export$22ddc20344c01547)();
2049
2256
  const track = stream.getAudioTracks()[0];
2257
+ this.audioMedia.addTrack("mic", track);
2050
2258
  const deviceType = "microphone";
2051
2259
  const micProducer = await transport.produce({
2052
- track: track,
2260
+ track: this.audioMedia.getFinalTrack(),
2053
2261
  codecOptions: {
2054
2262
  opusStereo: true,
2055
2263
  opusDtx: true
@@ -2126,6 +2334,7 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
2126
2334
  this.mediaPipe.clean();
2127
2335
  this.mediaPipe = undefined;
2128
2336
  }
2337
+ this.audioMedia?.removeAll();
2129
2338
  this.webcamTrack?.stop();
2130
2339
  this.webcamTrack = null;
2131
2340
  this.protooTransport.close();
@@ -2474,10 +2683,13 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
2474
2683
  });
2475
2684
  this.dispatchEvent(event);
2476
2685
  }
2477
- async enableScreenshare() {
2686
+ async enableScreenshare(option = {
2687
+ audioTransportOption: "classic"
2688
+ }) {
2478
2689
  if (!this.permissions.find((permission)=>permission === "screen_sharing")) throw new Error("feature not allowed");
2690
+ if (option.audioTransportOption === "mix" && !this.micProducer) throw new Error("microphone not activated and audio mix transport requested");
2479
2691
  const stream = await this.handleGetUserMediaError("screen", navigator.mediaDevices.getDisplayMedia({
2480
- audio: true,
2692
+ audio: option.audioTransportOption !== "none",
2481
2693
  video: {
2482
2694
  displaySurface: "monitor",
2483
2695
  logicalSurface: true,
@@ -2497,13 +2709,23 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
2497
2709
  const audioTransport = await this.getTransport("audio", "send");
2498
2710
  const audioTrack = stream.getAudioTracks()[0];
2499
2711
  if (audioTrack) {
2500
- this.screenshareAudioProducer = await this.streamerMediasoup?.produceAudio(audioTransport, audioTrack, {
2501
- deviceType: deviceType,
2502
- share: true
2503
- });
2504
- this.screenshareVideoProducer?.on("transportclose", ()=>{
2505
- this.screenshareVideoProducer = undefined;
2506
- });
2712
+ if (option.audioTransportOption === "classic") {
2713
+ this.screenshareAudioProducer = await this.streamerMediasoup?.produceAudio(audioTransport, audioTrack, {
2714
+ deviceType: deviceType,
2715
+ share: true
2716
+ });
2717
+ this.screenshareVideoProducer?.on("transportclose", ()=>{
2718
+ this.screenshareVideoProducer = undefined;
2719
+ });
2720
+ } else if (option.audioTransportOption === "mix") {
2721
+ this.audioMedia = this.audioMedia || new (0, $93041e14f6aa3f24$export$22ddc20344c01547)();
2722
+ this.audioMedia.addTrack("screen", audioTrack);
2723
+ const finalTracks = this.audioMedia.getFinalTrack();
2724
+ // currently microphone producer has to be enabled before.
2725
+ if (finalTracks && this.micProducer) this.micProducer.replaceTrack({
2726
+ track: finalTracks
2727
+ });
2728
+ }
2507
2729
  }
2508
2730
  const track = stream.getVideoTracks()[0];
2509
2731
  const videoTransport = await this.getTransport("video", "send");
@@ -2530,6 +2752,7 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
2530
2752
  });
2531
2753
  this.screenshareVideoProducer = undefined;
2532
2754
  }
2755
+ this.audioMedia?.removeTrack("screen");
2533
2756
  if (this.screenshareAudioProducer) {
2534
2757
  this.screenshareAudioProducer.close();
2535
2758
  if (this.protoo.connected) await this.protoo.request("closeProducer", {
@@ -2591,17 +2814,32 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
2591
2814
  assetId: res.assetId
2592
2815
  };
2593
2816
  }
2817
+ async saveThumbnail(base64Image) {
2818
+ const { objectUrl: objectUrl } = await fetch(`${this.config.streamApiURL}/uploadSnapshot`, {
2819
+ method: "POST",
2820
+ body: JSON.stringify({
2821
+ file: base64Image
2822
+ })
2823
+ }).then((rawResponse)=>rawResponse.json());
2824
+ const res = await this.protoo.request("addThumbnail", {
2825
+ url: objectUrl
2826
+ });
2827
+ return {
2828
+ url: objectUrl,
2829
+ assetId: res.assetId
2830
+ };
2831
+ }
2594
2832
  async deleteCapture(assetId) {
2595
2833
  const res = await this.protoo.request("deleteCapture", {
2596
2834
  assetId: assetId
2597
2835
  });
2598
2836
  return res;
2599
2837
  }
2600
- async captureVideo(videoElement) {
2838
+ async captureVideo(videoElement, option) {
2601
2839
  if (this.permissions.find((permission)=>permission === "instant_picture")) {
2602
2840
  let image;
2603
- if (videoElement) image = await (0, $3575c8a563f2a1da$export$674c90a250a8b2c5)(videoElement);
2604
- else if (this.webcamProducer && this.webcamProducer.track) image = await (0, $3575c8a563f2a1da$export$4a210166cc9cb64b)(this.webcamProducer.track);
2841
+ if (videoElement) image = await (0, $3575c8a563f2a1da$export$674c90a250a8b2c5)(videoElement, option);
2842
+ else if (this.webcamProducer && this.webcamProducer.track) image = await (0, $3575c8a563f2a1da$export$4a210166cc9cb64b)(this.webcamProducer.track, option);
2605
2843
  else throw new Error("no video to capture");
2606
2844
  return image;
2607
2845
  } else throw new Error("feature not allowed");
@@ -2812,7 +3050,7 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
2812
3050
  return this.webcam;
2813
3051
  }
2814
3052
  getCurrentMicrophoneId() {
2815
- return this.micProducer?.track?.getSettings().deviceId;
3053
+ return this.audioMedia?.getSetting("mic") || this.micProducer?.track?.getSettings().deviceId;
2816
3054
  }
2817
3055
  getCurrentSpeakerId() {
2818
3056
  const audioRendererKeys = Object.keys(this.audioRenderers);
@@ -5619,13 +5857,12 @@ const $8393b5c887e16c8c$var$SelfStreamTile = ({ isSomeonePresenting: isSomeonePr
5619
5857
  ]
5620
5858
  }),
5621
5859
  !streaming && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $66c45b20958474ec$export$f217faec90120a0c), {
5622
- children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $66c45b20958474ec$export$6ddfb572d7b6d164), {
5623
- children: [
5624
- profile.name && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $66c45b20958474ec$export$a2930b41faa750f4), {
5625
- children: profile.name.slice(0, 1).toUpperCase()
5626
- }),
5627
- !profile.name && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $0319693440f03062$export$2e2bcd8739ae039), {})
5628
- ]
5860
+ children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $66c45b20958474ec$export$6ddfb572d7b6d164), {
5861
+ children: profile.image ? /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $66c45b20958474ec$export$a7a74ab5cffd1455), {
5862
+ src: profile.image
5863
+ }) : profile.name ? /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $66c45b20958474ec$export$a2930b41faa750f4), {
5864
+ children: profile.name.slice(0, 1).toUpperCase()
5865
+ }) : /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $0319693440f03062$export$2e2bcd8739ae039), {})
5629
5866
  })
5630
5867
  }),
5631
5868
  !extended && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $2c45d365ee8aa1ab$export$500c3c5544c37412), {
@@ -10487,6 +10724,8 @@ const $e3bb2c5d0e5b45b5$export$914ddf2021ea8ee6 = (0, ($parcel$interopDefault($j
10487
10724
 
10488
10725
 
10489
10726
 
10727
+
10728
+
10490
10729
 
10491
10730
 
10492
10731
 
@@ -10532,6 +10771,61 @@ const $6e29654b44f114e1$export$d2b052e7b4be1756 = /*#__PURE__*/ (0, $jQDcL$react
10532
10771
 
10533
10772
 
10534
10773
 
10774
+ const $6fa093aef38ba660$export$a703eb468fcf7e69 = (props)=>{
10775
+ const { state: state , children: children } = props;
10776
+ const ref = (0, $jQDcL$react.useRef)(null);
10777
+ const { modalProps: modalProps , underlayProps: underlayProps } = (0, $jQDcL$reactaria.useModalOverlay)({
10778
+ isDismissable: true,
10779
+ ...props
10780
+ }, state, ref);
10781
+ const [exited, setExited] = (0, $jQDcL$react.useState)(!state.isOpen);
10782
+ if (!(state.isOpen || !exited)) return null;
10783
+ return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$reactaria.Overlay), {
10784
+ children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$reacttransitiongroup.CSSTransition), {
10785
+ in: state.isOpen,
10786
+ appear: true,
10787
+ onEntered: ()=>setExited(false),
10788
+ onExited: ()=>setExited(true),
10789
+ timeout: {
10790
+ enter: 0,
10791
+ exit: 300
10792
+ },
10793
+ classNames: {
10794
+ enter: "opacity-0",
10795
+ enterDone: "opacity-1 transition ease-in",
10796
+ exit: "opacity-0 transition ease-out"
10797
+ },
10798
+ children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("div", {
10799
+ className: "fixed z-[100] inset-0 bg-black bg-opacity-90 flex justify-center items-center inter",
10800
+ ...underlayProps,
10801
+ children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$reacttransitiongroup.CSSTransition), {
10802
+ in: state.isOpen,
10803
+ appear: true,
10804
+ nodeRef: ref,
10805
+ timeout: {
10806
+ enter: 0,
10807
+ exit: 300
10808
+ },
10809
+ classNames: {
10810
+ appear: "translate-y-2",
10811
+ appearDone: "translate-y-0 transition ease-in",
10812
+ exit: "translate-y-2 transition ease-out"
10813
+ },
10814
+ children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("div", {
10815
+ ...modalProps,
10816
+ ref: ref,
10817
+ children: children
10818
+ })
10819
+ })
10820
+ })
10821
+ })
10822
+ });
10823
+ };
10824
+
10825
+
10826
+
10827
+
10828
+
10535
10829
 
10536
10830
 
10537
10831
 
@@ -10547,6 +10841,7 @@ const $f98f91fb267f52c8$export$353f5b6fc5456de1 = /*#__PURE__*/ (0, $jQDcL$react
10547
10841
  primary: (0, ($parcel$interopDefault($jQDcL$classnames)))(isActive ? "bg-primaryLight" : "bg-primary", "text-white disabled:bg-secondaryLight"),
10548
10842
  secondary: (0, ($parcel$interopDefault($jQDcL$classnames)))(isActive ? "bg-graySelected" : "bg-transparent", "text-primary border border-secondaryLight disabled:text-secondaryLight disabled:bg-graySelected"),
10549
10843
  basic: (0, ($parcel$interopDefault($jQDcL$classnames)))(isActive ? "bg-graySelected" : "bg-white", "text-primary disabled:text-secondaryLight disabled:bg-graySelected"),
10844
+ tertiary: (0, ($parcel$interopDefault($jQDcL$classnames)))(isActive ? "bg-tertiarySelected" : "bg-tertiary", "text-mainBlue disabled:opacity-50"),
10550
10845
  custom: ""
10551
10846
  };
10552
10847
  const sizeStyle = {
@@ -10574,12 +10869,6 @@ const $f98f91fb267f52c8$export$353f5b6fc5456de1 = /*#__PURE__*/ (0, $jQDcL$react
10574
10869
 
10575
10870
  function $48c2553f62767e40$export$2b77a92f1a5ad772(props) {
10576
10871
  const { children: children , state: state , size: size = "small" , title: title , description: description , primaryAction: primaryAction , secondaryAction: secondaryAction , centered: centered = false } = props;
10577
- const ref = (0, ($parcel$interopDefault($jQDcL$react))).useRef(null);
10578
- const { modalProps: modalProps , underlayProps: underlayProps } = (0, $jQDcL$reactariaoverlays.useModalOverlay)({
10579
- isDismissable: true,
10580
- ...props
10581
- }, state, ref);
10582
- const [exited, setExited] = (0, $jQDcL$react.useState)(!state.isOpen);
10583
10872
  const viewport = (0, $jQDcL$reactariautils.useViewportSize)();
10584
10873
  const maxHeight = viewport.height - 64;
10585
10874
  const modalSize = {
@@ -10587,96 +10876,60 @@ function $48c2553f62767e40$export$2b77a92f1a5ad772(props) {
10587
10876
  medium: "max-w-[600px]",
10588
10877
  large: "max-w-[800px]"
10589
10878
  };
10590
- // Don't render anything if the modal is not open and we're not animating out.
10591
- if (!(state.isOpen || !exited)) return null;
10592
- return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$reactariaoverlays.Overlay), {
10593
- children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$reacttransitiongroup.CSSTransition), {
10594
- in: state.isOpen,
10595
- appear: true,
10596
- onEntered: ()=>setExited(false),
10597
- onExited: ()=>setExited(true),
10598
- timeout: {
10599
- enter: 0,
10600
- exit: 300
10601
- },
10602
- classNames: {
10603
- enter: "opacity-0",
10604
- enterDone: "opacity-1 transition ease-in",
10605
- exit: "opacity-0 transition ease-out"
10879
+ return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $6fa093aef38ba660$export$a703eb468fcf7e69), {
10880
+ state: state,
10881
+ children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("div", {
10882
+ className: (0, ($parcel$interopDefault($jQDcL$classnames)))("bg-white rounded-[10px] z-[1] overflow-x-auto focus:outline-none", modalSize[size]),
10883
+ style: {
10884
+ maxHeight: `${maxHeight}px`
10606
10885
  },
10607
- children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("div", {
10608
- className: "fixed z-[100] inset-0 bg-black bg-opacity-90 flex justify-center items-center inter",
10609
- ...underlayProps,
10610
- children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$reacttransitiongroup.CSSTransition), {
10611
- in: state.isOpen,
10612
- appear: true,
10613
- nodeRef: ref,
10614
- timeout: {
10615
- enter: 0,
10616
- exit: 300
10617
- },
10618
- classNames: {
10619
- appear: "translate-y-2",
10620
- appearDone: "translate-y-0 transition ease-in",
10621
- exit: "translate-y-2 transition ease-out"
10622
- },
10623
- children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("div", {
10624
- ...modalProps,
10625
- ref: ref,
10626
- className: (0, ($parcel$interopDefault($jQDcL$classnames)))("bg-white rounded-[10px] z-[1] overflow-x-auto focus:outline-none", modalSize[size]),
10627
- style: {
10628
- maxHeight: `${maxHeight}px`
10629
- },
10630
- children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("div", {
10631
- className: "flex flex-col gap-5 px-5 py-[25px] max-h-[inherit]",
10632
- children: [
10633
- /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("div", {
10634
- className: "flex flex-col gap-5 overflow-auto",
10635
- children: [
10636
- /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("div", {
10637
- className: (0, ($parcel$interopDefault($jQDcL$classnames)))("flex flex-col gap-[5px]", {
10638
- "text-center": centered
10639
- }),
10640
- children: [
10641
- /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("h2", {
10642
- className: "text-xl font-medium",
10643
- children: title
10644
- }),
10645
- description && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("p", {
10646
- className: "text-sm text-secondary",
10647
- children: description
10648
- })
10649
- ]
10650
- }),
10651
- children
10652
- ]
10886
+ children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("div", {
10887
+ className: "flex flex-col gap-5 px-5 py-[25px] max-h-[inherit]",
10888
+ children: [
10889
+ /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("div", {
10890
+ className: "flex flex-col gap-5 overflow-auto",
10891
+ children: [
10892
+ /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("div", {
10893
+ className: (0, ($parcel$interopDefault($jQDcL$classnames)))("flex flex-col gap-[5px]", {
10894
+ "text-center": centered
10653
10895
  }),
10654
- (primaryAction || secondaryAction) && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("div", {
10655
- className: (0, ($parcel$interopDefault($jQDcL$classnames)))("flex justify-end gap-2.5", centered ? "justify-center" : "justify-end"),
10656
- children: [
10657
- typeof secondaryAction === "string" && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $f98f91fb267f52c8$export$353f5b6fc5456de1), {
10658
- variant: "secondary",
10659
- onPress: state.close,
10660
- fullWidth: centered,
10661
- children: secondaryAction
10662
- }),
10663
- typeof secondaryAction === "function" && secondaryAction({
10664
- close: state.close
10665
- }),
10666
- typeof primaryAction === "string" && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $f98f91fb267f52c8$export$353f5b6fc5456de1), {
10667
- onPress: state.close,
10668
- fullWidth: centered,
10669
- children: primaryAction
10670
- }),
10671
- typeof primaryAction === "function" && primaryAction({
10672
- close: state.close
10673
- })
10674
- ]
10675
- })
10676
- ]
10677
- })
10896
+ children: [
10897
+ /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("h2", {
10898
+ className: "text-xl font-medium",
10899
+ children: title
10900
+ }),
10901
+ description && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("p", {
10902
+ className: "text-sm text-secondary",
10903
+ children: description
10904
+ })
10905
+ ]
10906
+ }),
10907
+ children
10908
+ ]
10909
+ }),
10910
+ (primaryAction || secondaryAction) && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("div", {
10911
+ className: (0, ($parcel$interopDefault($jQDcL$classnames)))("flex justify-end gap-2.5", centered ? "justify-center" : "justify-end"),
10912
+ children: [
10913
+ typeof secondaryAction === "string" && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $f98f91fb267f52c8$export$353f5b6fc5456de1), {
10914
+ variant: "secondary",
10915
+ onPress: state.close,
10916
+ fullWidth: centered,
10917
+ children: secondaryAction
10918
+ }),
10919
+ typeof secondaryAction === "function" && secondaryAction({
10920
+ close: state.close
10921
+ }),
10922
+ typeof primaryAction === "string" && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $f98f91fb267f52c8$export$353f5b6fc5456de1), {
10923
+ onPress: state.close,
10924
+ fullWidth: centered,
10925
+ children: primaryAction
10926
+ }),
10927
+ typeof primaryAction === "function" && primaryAction({
10928
+ close: state.close
10929
+ })
10930
+ ]
10678
10931
  })
10679
- })
10932
+ ]
10680
10933
  })
10681
10934
  })
10682
10935
  });
@@ -10772,32 +11025,39 @@ const $b46da51ab7ae33e7$var$InstructionRow = ({ children: children , index: inde
10772
11025
  ]
10773
11026
  });
10774
11027
  const $b46da51ab7ae33e7$export$788cb893d96254c8 = ({ state: state , type: type })=>{
11028
+ const { t: t } = (0, $jQDcL$reacti18next.useTranslation)();
10775
11029
  const [permissionsState, setPermissionsState] = (0, $jQDcL$react.useState)("idle");
11030
+ (0, $jQDcL$react.useEffect)(()=>{
11031
+ const { deviceState: deviceState } = (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).getState();
11032
+ if (deviceState.screenshare.enabled && type === "screen") return setPermissionsState("granted");
11033
+ if (deviceState.camera.enabled && type !== "screen") return setPermissionsState("granted");
11034
+ setPermissionsState("idle");
11035
+ }, [
11036
+ type
11037
+ ]);
11038
+ const { deviceState: deviceState } = (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).getState();
10776
11039
  const [isRoomReady, setRoomReady] = (0, $jQDcL$react.useState)(false);
10777
11040
  const { orientation: orientation } = (0, $jQDcL$react.useContext)((0, $8b39f32976a7698a$export$2e2bcd8739ae039));
10778
11041
  const device = orientation === "landscape" ? "desktop" : "mobile";
10779
11042
  const videoLength = permissionsState === "granted" ? "short" : "full";
10780
- const videoType = type === "picture" ? "photo" : "video";
10781
- const onDeviceEnabled = ()=>setPermissionsState("granted");
11043
+ const videoType = type === "photo" ? "photo" : "video";
10782
11044
  const onEnterRoom = ()=>setRoomReady(true);
10783
11045
  const onLeaveRoom = ()=>setRoomReady(false);
10784
11046
  const ref = (0, $jQDcL$react.useRef)(null);
10785
11047
  const title = (0, $jQDcL$react.useMemo)(()=>{
10786
- if (permissionsState === "refused") return "Something went wrong!";
10787
- if (type === "picture") return "Ready to take a shot?";
10788
- return "Ready to record a video?";
11048
+ if (permissionsState === "refused") return t("recorder.permissionDeniedTitle");
11049
+ if (type === "photo") return t("recorder.photoInstructionsTitle");
11050
+ else if (type === "video") return t("recorder.videoInstructionsTitle");
11051
+ else return t("recorder.screenShareInstructionsTitle");
10789
11052
  }, [
10790
11053
  permissionsState,
10791
- type
11054
+ type,
11055
+ t
10792
11056
  ]);
10793
11057
  (0, $jQDcL$react.useEffect)(()=>{
10794
- (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).addEventListener("localVideoAvailable", onDeviceEnabled);
10795
- (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).addEventListener("microphoneEnabled", onDeviceEnabled);
10796
11058
  (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).addEventListener("enterRoom", onEnterRoom);
10797
11059
  (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).addEventListener("leaveRoom", onLeaveRoom);
10798
11060
  return ()=>{
10799
- (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).removeEventListener("localVideoAvailable", onDeviceEnabled);
10800
- (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).removeEventListener("microphoneEnabled", onDeviceEnabled);
10801
11061
  (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).removeEventListener("enterRoom", onEnterRoom);
10802
11062
  (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).removeEventListener("leaveRoom", onLeaveRoom);
10803
11063
  };
@@ -10812,36 +11072,50 @@ const $b46da51ab7ae33e7$export$788cb893d96254c8 = ({ state: state , type: type
10812
11072
  children: permissionsState === "refused" ? /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $f98f91fb267f52c8$export$353f5b6fc5456de1), {
10813
11073
  fullWidth: true,
10814
11074
  onPress: ()=>window.location.reload(),
10815
- children: "Allow access"
11075
+ children: t("recorder.allowAccess")
10816
11076
  }) : /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$reactjsxruntime.Fragment), {
10817
11077
  children: permissionsState === "granted" ? /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $f98f91fb267f52c8$export$353f5b6fc5456de1), {
10818
11078
  fullWidth: true,
10819
11079
  onPress: state.close,
10820
- children: "Okay"
11080
+ children: t("recorder.okay")
10821
11081
  }) : /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $f98f91fb267f52c8$export$353f5b6fc5456de1), {
10822
11082
  fullWidth: true,
10823
11083
  isDisabled: permissionsState === "requesting" || isRoomReady === false,
10824
11084
  onPress: async ()=>{
10825
11085
  setPermissionsState("requesting");
10826
11086
  try {
10827
- const mediaResult = await navigator.mediaDevices.getUserMedia({
10828
- audio: true,
10829
- video: true
10830
- });
10831
- mediaResult.getTracks().forEach((track)=>track.stop());
10832
- await (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).enableMicrophone();
10833
- await (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).enableVideo({
10834
- resolution: "vga",
10835
- frameRate: 20,
10836
- facingMode: "environment"
10837
- });
10838
- } catch {
11087
+ if (!deviceState.microphone.enabled) {
11088
+ const mediaResult = await navigator.mediaDevices.getUserMedia({
11089
+ audio: true,
11090
+ video: type !== "screen"
11091
+ });
11092
+ mediaResult.getTracks().forEach((track)=>track.stop());
11093
+ }
11094
+ if (!deviceState.microphone.enabled) await (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).enableMicrophone();
11095
+ if (!deviceState.camera.enabled && type !== "screen") {
11096
+ await (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).disableScreenshare();
11097
+ await (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).enableVideo({
11098
+ resolution: "vga",
11099
+ frameRate: 20,
11100
+ facingMode: "environment"
11101
+ });
11102
+ }
11103
+ if (!deviceState.screenshare.enabled && type === "screen") {
11104
+ await (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).disableVideo();
11105
+ await (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).enableScreenshare({
11106
+ audioTransportOption: "mix"
11107
+ });
11108
+ }
11109
+ setPermissionsState("granted");
11110
+ state.close();
11111
+ } catch (error) {
11112
+ console.log("error", error);
10839
11113
  setPermissionsState("refused");
10840
11114
  }
10841
11115
  },
10842
11116
  children: [
10843
11117
  /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $41e530447f5fd995$export$2e2bcd8739ae039), {}),
10844
- "Allow access to cam/mic"
11118
+ type !== "screen" ? t("recorder.allowCamMicAccess") : t("recorder.allowScreenShareAccess")
10845
11119
  ]
10846
11120
  })
10847
11121
  })
@@ -10853,51 +11127,61 @@ const $b46da51ab7ae33e7$export$788cb893d96254c8 = ({ state: state , type: type
10853
11127
  className: "flex flex-col gap-[10px]",
10854
11128
  ref: ref,
10855
11129
  children: permissionsState === "refused" ? /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($b46da51ab7ae33e7$var$Text, {
10856
- 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."
11130
+ children: t("recorder.permissionDeniedDescription")
10857
11131
  }) : /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $jQDcL$reactjsxruntime.Fragment), {
10858
11132
  children: [
10859
11133
  permissionsState !== "granted" && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($b46da51ab7ae33e7$var$InstructionRow, {
10860
11134
  index: 1,
10861
- children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)($b46da51ab7ae33e7$var$Text, {
10862
- children: [
10863
- "When prompted, ",
10864
- /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($b46da51ab7ae33e7$var$Bold, {
10865
- children: "allow access"
10866
- }),
10867
- " to camera and microphone."
10868
- ]
11135
+ children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($b46da51ab7ae33e7$var$Text, {
11136
+ children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $jQDcL$reacti18next.Trans), {
11137
+ i18nKey: "recorder.instructions.allowAccessOnPrompt",
11138
+ children: [
11139
+ "When prompted, ",
11140
+ /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($b46da51ab7ae33e7$var$Bold, {
11141
+ children: "allow access"
11142
+ }),
11143
+ " to camera and microphone."
11144
+ ]
11145
+ })
10869
11146
  })
10870
11147
  }),
10871
- type === "picture" && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $jQDcL$reactjsxruntime.Fragment), {
11148
+ type === "photo" && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $jQDcL$reactjsxruntime.Fragment), {
10872
11149
  children: [
10873
11150
  /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($b46da51ab7ae33e7$var$InstructionRow, {
10874
11151
  index: 1 + permissionsInstructionIndex,
10875
- children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)($b46da51ab7ae33e7$var$Text, {
10876
- children: [
10877
- "Tap the ",
10878
- /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $bec7bca3a7448591$export$dce36e07153365d), {}),
10879
- /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($b46da51ab7ae33e7$var$Bold, {
10880
- children: " Camera button"
10881
- }),
10882
- " to take a photo."
10883
- ]
11152
+ children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($b46da51ab7ae33e7$var$Text, {
11153
+ children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $jQDcL$reacti18next.Trans), {
11154
+ i18nKey: "recorder.instructions.tapPhotoButton",
11155
+ com: true,
11156
+ children: [
11157
+ "Tap the ",
11158
+ /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $bec7bca3a7448591$export$dce36e07153365d), {}),
11159
+ /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($b46da51ab7ae33e7$var$Bold, {
11160
+ children: " Camera button"
11161
+ }),
11162
+ " to take a photo."
11163
+ ]
11164
+ })
10884
11165
  })
10885
11166
  }),
10886
11167
  /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($b46da51ab7ae33e7$var$InstructionRow, {
10887
11168
  index: 2 + permissionsInstructionIndex,
10888
11169
  children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($b46da51ab7ae33e7$var$Text, {
10889
- children: "Don't hesitate to take multiple photos for more detail."
11170
+ children: t("recorder.instructions.multiplePhotos")
10890
11171
  })
10891
11172
  }),
10892
11173
  /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($b46da51ab7ae33e7$var$InstructionRow, {
10893
11174
  index: 3 + permissionsInstructionIndex,
10894
- children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)($b46da51ab7ae33e7$var$Text, {
10895
- children: [
10896
- "You can review your photo and then ",
10897
- /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($b46da51ab7ae33e7$var$Bold, {
10898
- children: "send it when you're done."
10899
- })
10900
- ]
11175
+ children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($b46da51ab7ae33e7$var$Text, {
11176
+ children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $jQDcL$reacti18next.Trans), {
11177
+ i18nKey: "recorder.instructions.reviewAndSendPhotos",
11178
+ children: [
11179
+ "You can review your photo and then ",
11180
+ /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($b46da51ab7ae33e7$var$Bold, {
11181
+ children: "send it when you're done."
11182
+ })
11183
+ ]
11184
+ })
10901
11185
  })
10902
11186
  })
10903
11187
  ]
@@ -10906,52 +11190,128 @@ const $b46da51ab7ae33e7$export$788cb893d96254c8 = ({ state: state , type: type
10906
11190
  children: [
10907
11191
  /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($b46da51ab7ae33e7$var$InstructionRow, {
10908
11192
  index: 1 + permissionsInstructionIndex,
10909
- children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)($b46da51ab7ae33e7$var$Text, {
10910
- children: [
10911
- "Tap the ",
10912
- /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $bec7bca3a7448591$export$f9da3144ae2525a3), {}),
10913
- /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($b46da51ab7ae33e7$var$Bold, {
10914
- children: " Record button"
10915
- }),
10916
- " to start a recording."
10917
- ]
11193
+ children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($b46da51ab7ae33e7$var$Text, {
11194
+ children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $jQDcL$reacti18next.Trans), {
11195
+ i18nKey: "recorder.instructions.tapVideoButton",
11196
+ children: [
11197
+ "Tap the ",
11198
+ /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $bec7bca3a7448591$export$f9da3144ae2525a3), {}),
11199
+ /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($b46da51ab7ae33e7$var$Bold, {
11200
+ children: " Record button"
11201
+ }),
11202
+ " to start a recording."
11203
+ ]
11204
+ })
11205
+ })
11206
+ }),
11207
+ /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($b46da51ab7ae33e7$var$InstructionRow, {
11208
+ index: 2 + permissionsInstructionIndex,
11209
+ children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($b46da51ab7ae33e7$var$Text, {
11210
+ children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $jQDcL$reacti18next.Trans), {
11211
+ i18nKey: "recorder.instructions.videoSpeech",
11212
+ children: [
11213
+ "You can ",
11214
+ /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($b46da51ab7ae33e7$var$Bold, {
11215
+ children: "speak during"
11216
+ }),
11217
+ " the recording for added detail."
11218
+ ]
11219
+ })
11220
+ })
11221
+ }),
11222
+ /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($b46da51ab7ae33e7$var$InstructionRow, {
11223
+ index: 3 + permissionsInstructionIndex,
11224
+ children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($b46da51ab7ae33e7$var$Text, {
11225
+ children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $jQDcL$reacti18next.Trans), {
11226
+ i18nKey: "recorder.instructions.tapStopVideoButton",
11227
+ children: [
11228
+ "When you're finished, tap the ",
11229
+ /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $bec7bca3a7448591$export$c6a849fd9d9d93a2), {}),
11230
+ /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($b46da51ab7ae33e7$var$Bold, {
11231
+ children: " Stop button"
11232
+ }),
11233
+ "."
11234
+ ]
11235
+ })
11236
+ })
11237
+ }),
11238
+ /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($b46da51ab7ae33e7$var$InstructionRow, {
11239
+ index: 4 + permissionsInstructionIndex,
11240
+ children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($b46da51ab7ae33e7$var$Text, {
11241
+ children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $jQDcL$reacti18next.Trans), {
11242
+ i18nKey: "recorder.instructions.reviewAndSendVideos",
11243
+ children: [
11244
+ "You can review your video and then ",
11245
+ /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($b46da51ab7ae33e7$var$Bold, {
11246
+ children: "send it when you're done"
11247
+ }),
11248
+ "."
11249
+ ]
11250
+ })
11251
+ })
11252
+ })
11253
+ ]
11254
+ }),
11255
+ type === "screen" && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $jQDcL$reactjsxruntime.Fragment), {
11256
+ children: [
11257
+ /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($b46da51ab7ae33e7$var$InstructionRow, {
11258
+ index: 1 + permissionsInstructionIndex,
11259
+ children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($b46da51ab7ae33e7$var$Text, {
11260
+ children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $jQDcL$reacti18next.Trans), {
11261
+ i18nKey: "recorder.instructions.tapScreenShareButton",
11262
+ children: [
11263
+ "Tap on",
11264
+ /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($b46da51ab7ae33e7$var$Bold, {
11265
+ children: " Record my screen"
11266
+ }),
11267
+ " to start a recording."
11268
+ ]
11269
+ })
10918
11270
  })
10919
11271
  }),
10920
11272
  /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($b46da51ab7ae33e7$var$InstructionRow, {
10921
11273
  index: 2 + permissionsInstructionIndex,
10922
- children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)($b46da51ab7ae33e7$var$Text, {
10923
- children: [
10924
- "You can ",
10925
- /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($b46da51ab7ae33e7$var$Bold, {
10926
- children: "speak during"
10927
- }),
10928
- " the recording for added detail."
10929
- ]
11274
+ children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($b46da51ab7ae33e7$var$Text, {
11275
+ children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $jQDcL$reacti18next.Trans), {
11276
+ i18nKey: "recorder.instructions.videoSpeech",
11277
+ children: [
11278
+ "You can ",
11279
+ /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($b46da51ab7ae33e7$var$Bold, {
11280
+ children: "speak during"
11281
+ }),
11282
+ " the recording for added detail."
11283
+ ]
11284
+ })
10930
11285
  })
10931
11286
  }),
10932
11287
  /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($b46da51ab7ae33e7$var$InstructionRow, {
10933
11288
  index: 3 + permissionsInstructionIndex,
10934
- children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)($b46da51ab7ae33e7$var$Text, {
10935
- children: [
10936
- "When you're finished, tap the ",
10937
- /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $bec7bca3a7448591$export$c6a849fd9d9d93a2), {}),
10938
- /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($b46da51ab7ae33e7$var$Bold, {
10939
- children: " Stop button"
10940
- }),
10941
- "."
10942
- ]
11289
+ children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($b46da51ab7ae33e7$var$Text, {
11290
+ children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $jQDcL$reacti18next.Trans), {
11291
+ i18nKey: "recorder.instructions.tapStopScreenShareButton",
11292
+ children: [
11293
+ "When you're finished, tap on ",
11294
+ /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($b46da51ab7ae33e7$var$Bold, {
11295
+ children: "Stop recording"
11296
+ }),
11297
+ "."
11298
+ ]
11299
+ })
10943
11300
  })
10944
11301
  }),
10945
11302
  /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($b46da51ab7ae33e7$var$InstructionRow, {
10946
11303
  index: 4 + permissionsInstructionIndex,
10947
- children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)($b46da51ab7ae33e7$var$Text, {
10948
- children: [
10949
- "You can review your video and then ",
10950
- /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($b46da51ab7ae33e7$var$Bold, {
10951
- children: "send it when you're done"
10952
- }),
10953
- "."
10954
- ]
11304
+ children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($b46da51ab7ae33e7$var$Text, {
11305
+ children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $jQDcL$reacti18next.Trans), {
11306
+ i18nKey: "recorder.instructions.reviewAnsSendScreenShare",
11307
+ children: [
11308
+ "You can review your video and then ",
11309
+ /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($b46da51ab7ae33e7$var$Bold, {
11310
+ children: "send it when you're done"
11311
+ }),
11312
+ "."
11313
+ ]
11314
+ })
10955
11315
  })
10956
11316
  })
10957
11317
  ]
@@ -10983,7 +11343,9 @@ const $b46da51ab7ae33e7$export$788cb893d96254c8 = ({ state: state , type: type
10983
11343
 
10984
11344
 
10985
11345
 
11346
+
10986
11347
  const $4dac51e936eb334f$export$f9d8408fefd786da = ({ state: state , setReady: setReady })=>{
11348
+ const { t: t } = (0, $jQDcL$reacti18next.useTranslation)();
10987
11349
  const QRCodeRef = (0, $jQDcL$react.useRef)(null);
10988
11350
  const { options: options } = (0, $jQDcL$react.useContext)((0, $8b39f32976a7698a$export$2e2bcd8739ae039));
10989
11351
  const [QRCodeContainerRef, { width: QRCodeContainerWidth }] = (0, $56e1e7a85d8bf4bb$export$e295b0c537d32d7d)();
@@ -11000,8 +11362,8 @@ const $4dac51e936eb334f$export$f9d8408fefd786da = ({ state: state , setReady: se
11000
11362
  ]);
11001
11363
  return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $48c2553f62767e40$export$2b77a92f1a5ad772), {
11002
11364
  centered: true,
11003
- title: "Switch to your mobile",
11004
- description: "Enjoy an even more convenient experience by using your phone to take photos and record videos.",
11365
+ title: t("recorder.switchToMobileTitle"),
11366
+ description: t("recorder.switchToMobileDescription"),
11005
11367
  isDismissable: false,
11006
11368
  state: state,
11007
11369
  primaryAction: ()=>/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $f98f91fb267f52c8$export$353f5b6fc5456de1), {
@@ -11010,7 +11372,7 @@ const $4dac51e936eb334f$export$f9d8408fefd786da = ({ state: state , setReady: se
11010
11372
  setReady(true);
11011
11373
  state.close();
11012
11374
  },
11013
- children: "Use desktop version"
11375
+ children: t("recorder.useDesktopVersion")
11014
11376
  }),
11015
11377
  children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("div", {
11016
11378
  className: "flex flex-col gap-[20px]",
@@ -11030,7 +11392,7 @@ const $4dac51e936eb334f$export$f9d8408fefd786da = ({ state: state , setReady: se
11030
11392
  }),
11031
11393
  /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("p", {
11032
11394
  className: "flex items-center justify-center text-xs text-primaryLight text-center",
11033
- children: "Scan this QR code with a compatible device."
11395
+ children: t("recorder.scanQRCode")
11034
11396
  })
11035
11397
  ]
11036
11398
  })
@@ -11041,29 +11403,21 @@ const $4dac51e936eb334f$export$f9d8408fefd786da = ({ state: state , setReady: se
11041
11403
  function $d7eacc710221ffb1$export$fc3bf4634b488af8({ mode: mode }) {
11042
11404
  const { orientation: orientation } = (0, $jQDcL$react.useContext)((0, $8b39f32976a7698a$export$2e2bcd8739ae039));
11043
11405
  const desktop = orientation === "landscape";
11044
- const [ready, setReady] = (0, $jQDcL$react.useState)(!desktop);
11406
+ const [ready, setReady] = (0, $jQDcL$react.useState)(mode === "screen" || !desktop);
11407
+ const [isInstructionsModalOpen, setIsInstructionsModalOpen] = (0, $jQDcL$react.useState)(ready);
11408
+ const modalState = (0, $jQDcL$reactstately.useOverlayTriggerState)({
11409
+ isOpen: isInstructionsModalOpen && ready,
11410
+ onOpenChange: setIsInstructionsModalOpen
11411
+ });
11045
11412
  (0, $jQDcL$react.useEffect)(()=>{
11046
- if (ready) {
11047
- setIsPhotoInstructionsModalOpen(mode === "photo" && ready);
11048
- setIsVideoInstructionsModalOpen(mode === "video" && ready);
11049
- }
11413
+ setIsInstructionsModalOpen(true);
11050
11414
  }, [
11051
11415
  ready,
11052
11416
  mode
11053
11417
  ]);
11054
- const [isPhotoInstructionsModalOpen, setIsPhotoInstructionsModalOpen] = (0, $jQDcL$react.useState)(mode === "photo" && ready);
11055
- const [isVideoInstructionsModalOpen, setIsVideoInstructionsModalOpen] = (0, $jQDcL$react.useState)(mode === "video" && ready);
11056
- const photoInstructionsModalState = (0, $jQDcL$reactstately.useOverlayTriggerState)({
11057
- isOpen: isPhotoInstructionsModalOpen,
11058
- onOpenChange: setIsPhotoInstructionsModalOpen
11059
- });
11060
- const videoInstructionsModalState = (0, $jQDcL$reactstately.useOverlayTriggerState)({
11061
- isOpen: isVideoInstructionsModalOpen,
11062
- onOpenChange: setIsVideoInstructionsModalOpen
11063
- });
11064
11418
  return {
11065
- photoInstructionsModalState: photoInstructionsModalState,
11066
- videoInstructionsModalState: videoInstructionsModalState,
11419
+ mode: mode,
11420
+ modalState: modalState,
11067
11421
  ready: ready,
11068
11422
  setReady: setReady
11069
11423
  };
@@ -11077,12 +11431,8 @@ const $d7eacc710221ffb1$export$bee10e8ab511933f = ({ state: state })=>{
11077
11431
  return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $jQDcL$reactjsxruntime.Fragment), {
11078
11432
  children: [
11079
11433
  /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $b46da51ab7ae33e7$export$788cb893d96254c8), {
11080
- state: state.photoInstructionsModalState,
11081
- type: "picture"
11082
- }),
11083
- /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $b46da51ab7ae33e7$export$788cb893d96254c8), {
11084
- state: state.videoInstructionsModalState,
11085
- type: "video"
11434
+ state: state.modalState,
11435
+ type: state.mode
11086
11436
  }),
11087
11437
  /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $4dac51e936eb334f$export$f9d8408fefd786da), {
11088
11438
  state: switchToMobileModalState,
@@ -11093,22 +11443,54 @@ const $d7eacc710221ffb1$export$bee10e8ab511933f = ({ state: state })=>{
11093
11443
  };
11094
11444
 
11095
11445
 
11096
- function $6f223c293b335d40$export$bd7b6af6aa16550c({ photo: photo = true }) {
11097
- const [isPhoto, setPhoto] = (0, $jQDcL$react.useState)(photo);
11446
+
11447
+
11448
+
11449
+ const $a55fb1fbe863b99c$export$4e594bceac139abd = (props)=>{
11450
+ const { t: t } = (0, $jQDcL$reacti18next.useTranslation)();
11451
+ return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("div", {
11452
+ className: (0, ($parcel$interopDefault($jQDcL$classnames)))("flex rounded-full h-[40px] p-[10px] border-2 border-white text-white justify-center items-center align-middle", "font-semibold", "cursor-pointer", {
11453
+ "bg-[#f12828]": !props.state.streaming
11454
+ }),
11455
+ onClick: ()=>props.onCapturePress(),
11456
+ children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("div", {
11457
+ children: props.state.streaming ? t("recorder.stopScreenShareButton") : t("recorder.startScreenShareButton")
11458
+ })
11459
+ });
11460
+ };
11461
+ const $a55fb1fbe863b99c$export$f9da3144ae2525a3 = (props)=>{
11462
+ return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("div", {
11463
+ className: (0, ($parcel$interopDefault($jQDcL$classnames)))("bg-white rounded-full w-[72px] h-[72px] p-[3px]"),
11464
+ onClick: ()=>props.onCapturePress(),
11465
+ children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("div", {
11466
+ className: "bg-primary rounded-full w-full h-full p-[3px] flex items-center justify-center cursor-pointer",
11467
+ children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("div", {
11468
+ className: (0, ($parcel$interopDefault($jQDcL$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]")
11469
+ })
11470
+ })
11471
+ });
11472
+ };
11473
+
11474
+
11475
+ function $6f223c293b335d40$export$bd7b6af6aa16550c({ state: state = "photo" }) {
11476
+ const [currentMode, setMode] = (0, $jQDcL$react.useState)(state);
11098
11477
  const [streaming, setStreaming] = (0, $jQDcL$react.useState)(false);
11099
11478
  return {
11100
- photo: isPhoto,
11101
- setPhoto: setPhoto,
11479
+ mode: currentMode,
11480
+ setMode: (mode)=>{
11481
+ setMode(mode);
11482
+ },
11102
11483
  streaming: streaming,
11103
11484
  setStreaming: setStreaming
11104
11485
  };
11105
11486
  }
11106
11487
  const $6f223c293b335d40$export$11a6fe490bbc4873 = (props)=>{
11488
+ const { t: t } = (0, $jQDcL$reacti18next.useTranslation)();
11107
11489
  const setupModalsState = (0, $d7eacc710221ffb1$export$fc3bf4634b488af8)({
11108
- mode: props.state.photo ? "photo" : "video"
11490
+ mode: props.state.mode
11109
11491
  });
11110
11492
  return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("div", {
11111
- className: "flex flex-col bg-primary h-[150px] w-full max-w-[400px] rounded-[15px] p-2.5 gap-2.5",
11493
+ className: "flex flex-col bg-primary h-[150px] w-full max-w-[500px] rounded-[15px] p-2.5 gap-2.5",
11112
11494
  children: [
11113
11495
  /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $d7eacc710221ffb1$export$bee10e8ab511933f), {
11114
11496
  state: setupModalsState
@@ -11129,25 +11511,39 @@ const $6f223c293b335d40$export$11a6fe490bbc4873 = (props)=>{
11129
11511
  /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("div", {
11130
11512
  className: "flex flex-row justify-end flex-auto items-center gap-[10px] ",
11131
11513
  children: [
11132
- /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $6e29654b44f114e1$export$d2b052e7b4be1756), {
11133
- onPress: ()=>{
11134
- if (!props.state.streaming) {
11135
- props.state.setPhoto(true);
11136
- setupModalsState.photoInstructionsModalState.open();
11137
- }
11138
- },
11139
- isSelected: props.state.photo,
11140
- children: "Photo"
11514
+ props.state.mode !== "screen" && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $jQDcL$reactjsxruntime.Fragment), {
11515
+ children: [
11516
+ /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $6e29654b44f114e1$export$d2b052e7b4be1756), {
11517
+ onPress: ()=>{
11518
+ if (!props.state.streaming) {
11519
+ props.state.setMode("photo");
11520
+ setupModalsState.modalState.open();
11521
+ }
11522
+ },
11523
+ isSelected: props.state.mode === "photo",
11524
+ children: t("misc.photo")
11525
+ }),
11526
+ /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $6e29654b44f114e1$export$d2b052e7b4be1756), {
11527
+ onPress: ()=>{
11528
+ if (!props.state.streaming) {
11529
+ props.state.setMode("video");
11530
+ setupModalsState.modalState.open();
11531
+ }
11532
+ },
11533
+ isSelected: props.state.mode === "video",
11534
+ children: t("misc.video")
11535
+ })
11536
+ ]
11141
11537
  }),
11142
- /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $6e29654b44f114e1$export$d2b052e7b4be1756), {
11538
+ props.state.mode === "screen" && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $6e29654b44f114e1$export$d2b052e7b4be1756), {
11143
11539
  onPress: ()=>{
11144
11540
  if (!props.state.streaming) {
11145
- props.state.setPhoto(false);
11146
- setupModalsState.videoInstructionsModalState.open();
11541
+ props.state.setMode("screen");
11542
+ setupModalsState.modalState.open();
11147
11543
  }
11148
11544
  },
11149
- isSelected: !props.state.photo,
11150
- children: "Video"
11545
+ isSelected: props.state.mode === "screen",
11546
+ children: t("misc.screen")
11151
11547
  })
11152
11548
  ]
11153
11549
  })
@@ -11160,20 +11556,18 @@ const $6f223c293b335d40$export$11a6fe490bbc4873 = (props)=>{
11160
11556
  className: "w-[60px] h-[60px]",
11161
11557
  children: props.thumbnail
11162
11558
  }),
11163
- /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("div", {
11164
- className: "bg-white rounded-full w-[72px] h-[72px] p-[3px]",
11165
- onClick: ()=>props.onCapturePress(),
11166
- children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("div", {
11167
- className: "bg-primary rounded-full w-full h-full p-[3px] flex items-center justify-center cursor-pointer",
11168
- children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("div", {
11169
- className: (0, ($parcel$interopDefault($jQDcL$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]")
11170
- })
11171
- })
11559
+ props.state.mode === "screen" && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $a55fb1fbe863b99c$export$4e594bceac139abd), {
11560
+ ...props
11561
+ }),
11562
+ props.state.mode !== "screen" && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $a55fb1fbe863b99c$export$f9da3144ae2525a3), {
11563
+ ...props
11172
11564
  }),
11173
11565
  /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("div", {
11174
11566
  onClick: props.onSwitch,
11175
- className: "bg-[#565656] rounded-full w-[56px] h-[56px] flex items-center justify-center cursor-pointer",
11176
- children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $ec8eb252693ca260$export$aefffb14595958fe), {})
11567
+ className: (0, ($parcel$interopDefault($jQDcL$classnames)))("rounded-full w-[56px] h-[56px] flex items-center justify-center", {
11568
+ "bg-[#565656] cursor-pointer": props.state.mode !== "screen"
11569
+ }),
11570
+ children: props.state.mode !== "screen" && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $ec8eb252693ca260$export$aefffb14595958fe), {})
11177
11571
  })
11178
11572
  ]
11179
11573
  })
@@ -11193,6 +11587,7 @@ const $6f223c293b335d40$export$11a6fe490bbc4873 = (props)=>{
11193
11587
 
11194
11588
 
11195
11589
 
11590
+
11196
11591
  function $14fb55a0ce44e022$export$4589ed81930b555c(props) {
11197
11592
  const { children: children , state: state } = props;
11198
11593
  const ref = (0, ($parcel$interopDefault($jQDcL$react))).useRef(null);
@@ -11260,6 +11655,8 @@ function $14fb55a0ce44e022$export$4589ed81930b555c(props) {
11260
11655
 
11261
11656
 
11262
11657
 
11658
+
11659
+
11263
11660
  const $f4dfc8739f142557$export$480db61f4dcd7727 = ()=>/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("svg", {
11264
11661
  width: "12",
11265
11662
  height: "15",
@@ -11316,26 +11713,61 @@ const $b0f41bfff6a6128d$export$28e1ba20e0688eb7 = ()=>/*#__PURE__*/ (0, $jQDcL$r
11316
11713
  });
11317
11714
 
11318
11715
 
11319
- const $1571ff3dce984dbd$var$dateFormat = new Intl.DateTimeFormat("default", {
11320
- dateStyle: "short"
11321
- });
11322
- const $1571ff3dce984dbd$var$timeFormat = new Intl.DateTimeFormat("default", {
11323
- hour: "numeric",
11324
- minute: "2-digit"
11325
- });
11326
- function $1571ff3dce984dbd$var$formatDate(date) {
11327
- const ampm = date.getHours() % 12 >= 12 ? "PM" : "AM";
11328
- return `${$1571ff3dce984dbd$var$dateFormat.format(date)} at ${$1571ff3dce984dbd$var$timeFormat.format(date)} ${ampm}`;
11329
- }
11716
+
11717
+
11718
+
11719
+ const $af5bf6f1b1afdb63$export$f56b3b5841ad32ae = ({ asset: asset , state: state })=>{
11720
+ return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $6fa093aef38ba660$export$a703eb468fcf7e69), {
11721
+ state: state,
11722
+ children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("div", {
11723
+ className: "flex flex-col items-center w-screen h-screen p-[15px] gap-[10px]",
11724
+ children: [
11725
+ /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("div", {
11726
+ className: "flex items-center max-w-[400px] w-full h-full",
11727
+ children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("div", {
11728
+ className: "min-w-full rounded-[10px] overflow-hidden",
11729
+ children: [
11730
+ asset.type === "picture" && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("img", {
11731
+ src: asset.objectUrl,
11732
+ alt: `Asset-${asset.assetId}`,
11733
+ className: "object-fill"
11734
+ }),
11735
+ asset.type === "video" && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("video", {
11736
+ src: asset.objectUrl,
11737
+ playsInline: true,
11738
+ autoPlay: true,
11739
+ controls: true
11740
+ })
11741
+ ]
11742
+ })
11743
+ }),
11744
+ /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("div", {
11745
+ className: "max-w-[135px] w-1/3",
11746
+ children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $f98f91fb267f52c8$export$353f5b6fc5456de1), {
11747
+ onPress: state.close,
11748
+ variant: "tertiary",
11749
+ size: "large",
11750
+ fullWidth: true,
11751
+ children: "Close"
11752
+ })
11753
+ })
11754
+ ]
11755
+ })
11756
+ });
11757
+ };
11758
+
11759
+
11330
11760
  const $1571ff3dce984dbd$export$c9169049516d8bcf = ({ asset: asset , index: index , removeAsset: removeAsset })=>{
11761
+ const { t: t } = (0, $jQDcL$reacti18next.useTranslation)();
11331
11762
  const confirmRemovalModalState = (0, $jQDcL$reactstately.useOverlayTriggerState)({});
11763
+ const previewAssetModalProps = (0, $jQDcL$reactstately.useOverlayTriggerState)({});
11332
11764
  return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("div", {
11333
11765
  className: "flex flex-row justify-between items-center",
11334
11766
  children: [
11335
11767
  /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $48c2553f62767e40$export$2b77a92f1a5ad772), {
11336
- title: "Confirm removal",
11768
+ title: t("recorder.confirmRemovalTitle"),
11337
11769
  state: confirmRemovalModalState,
11338
- description: "Are you sure you want to remove this photo/video? This action cannot be undone.",
11770
+ description: t("recorder.confirmRemovalDescription"),
11339
11771
  primaryAction: ({ close: close })=>/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $f98f91fb267f52c8$export$353f5b6fc5456de1), {
11340
11772
  onPress: async ()=>{
11341
11773
  await removeAsset(asset);
@@ -11343,29 +11775,34 @@ const $1571ff3dce984dbd$export$c9169049516d8bcf = ({ asset: asset , index: index
11343
11775
  },
11344
11776
  children: [
11345
11777
  /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $b0f41bfff6a6128d$export$28e1ba20e0688eb7), {}),
11346
- "Confirm"
11778
+ t("misc.confirm")
11347
11779
  ]
11348
11780
  }),
11349
- secondaryAction: "Cancel"
11781
+ secondaryAction: t("misc.cancel")
11350
11782
  }),
11351
11783
  /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("div", {
11352
11784
  className: "flex flex-row gap-[10px] items-center",
11353
11785
  children: [
11354
- /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $dc46069ab394f8fc$export$1cd1efc78cb52ca5), {
11786
+ /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $af5bf6f1b1afdb63$export$f56b3b5841ad32ae), {
11787
+ state: previewAssetModalProps,
11355
11788
  asset: asset
11356
11789
  }),
11790
+ /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $dc46069ab394f8fc$export$1cd1efc78cb52ca5), {
11791
+ asset: asset,
11792
+ onClick: previewAssetModalProps.open
11793
+ }),
11357
11794
  /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("span", {
11358
11795
  className: "text-sm",
11359
11796
  style: {
11360
11797
  hyphens: "manual"
11361
11798
  },
11362
11799
  children: [
11363
- asset.type === "picture" ? "Photo" : "Video",
11800
+ asset.type === "picture" ? t("misc.photo") : t("misc.video"),
11364
11801
  " ",
11365
11802
  index + 1,
11366
11803
  " \xb7",
11367
11804
  " ",
11368
- $1571ff3dce984dbd$var$formatDate(new Date(asset.timestamp))
11805
+ (0, $7925c01e7577d264$export$3ae94a2503e890a1)(new Date(asset.timestamp))
11369
11806
  ]
11370
11807
  })
11371
11808
  ]
@@ -11373,7 +11810,7 @@ const $1571ff3dce984dbd$export$c9169049516d8bcf = ({ asset: asset , index: index
11373
11810
  /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("span", {
11374
11811
  className: "text-xs font-bold underline cursor-pointer ml-[10px]",
11375
11812
  onClick: confirmRemovalModalState.open,
11376
- children: "Remove"
11813
+ children: t("misc.remove")
11377
11814
  })
11378
11815
  ]
11379
11816
  }, asset.assetId);
@@ -11456,6 +11893,7 @@ const $aaab1e39040d455b$export$4fa52f68b1c78fbf = ()=>/*#__PURE__*/ (0, $jQDcL$r
11456
11893
 
11457
11894
 
11458
11895
  const $0bca8bbbf74ddff9$export$5c334f209b1aa661 = ({ assets: assets , state: state , onSendAssets: onSendAssets , removeAsset: removeAsset , loading: loading })=>{
11896
+ const { t: t } = (0, $jQDcL$reacti18next.useTranslation)();
11459
11897
  const ref = (0, $jQDcL$react.useRef)(null);
11460
11898
  const [assetKind, setAssetKind] = (0, $jQDcL$react.useState)(assets[assets.length - 1]?.type === "picture" ? "photo" : "video");
11461
11899
  const { orientation: orientation } = (0, $jQDcL$react.useContext)((0, $8b39f32976a7698a$export$2e2bcd8739ae039));
@@ -11483,7 +11921,7 @@ const $0bca8bbbf74ddff9$export$5c334f209b1aa661 = ({ assets: assets , state: sta
11483
11921
  children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("div", {
11484
11922
  className: (0, ($parcel$interopDefault($jQDcL$classnames)))("fixed justify-center w-screen h-screen top-0 left-0 bg-black z-[1]", state.isOpen ? "flex" : "hidden"),
11485
11923
  children: loading && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("div", {
11486
- className: (0, ($parcel$interopDefault($jQDcL$classnames)))("flex mt-[50px] h-fit opacity-1", desktop ? "flex-row items-center w-[400px]" : "flex-col items-center text-center w-[320px]"),
11924
+ className: (0, ($parcel$interopDefault($jQDcL$classnames)))("flex mt-[50px] h-fit opacity-1", desktop ? "flex-row items-center w-[450px]" : "flex-col items-center text-center w-[320px]"),
11487
11925
  children: [
11488
11926
  /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("div", {
11489
11927
  className: "w-[24px] h-[24px] m-[10px]",
@@ -11492,10 +11930,10 @@ const $0bca8bbbf74ddff9$export$5c334f209b1aa661 = ({ assets: assets , state: sta
11492
11930
  /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("span", {
11493
11931
  className: "text-sm text-white",
11494
11932
  children: [
11495
- "Please wait a moment while your ",
11496
- loading,
11497
- " is being processed...",
11498
- loading === "video" ? " It may take up to 15 seconds for a video to be ready." : ""
11933
+ t("recorder.elementBeingProcessed", {
11934
+ type: loading === "picture" ? t("misc.photo").toLocaleLowerCase() : t("misc.video").toLocaleLowerCase()
11935
+ }),
11936
+ loading === "video" && t("recorder.waitVideo")
11499
11937
  ]
11500
11938
  })
11501
11939
  ]
@@ -11514,12 +11952,11 @@ const $0bca8bbbf74ddff9$export$5c334f209b1aa661 = ({ assets: assets , state: sta
11514
11952
  /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("div", {
11515
11953
  className: "flex flex-row justify-between p-[12px]",
11516
11954
  children: [
11517
- /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("h1", {
11955
+ /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("h1", {
11518
11956
  className: "text-lg first-letter:capitalize",
11519
- children: [
11520
- assetKind,
11521
- " successfully captured"
11522
- ]
11957
+ children: t("recorder.elementCaptureSuccess", {
11958
+ type: t(`misc.${assetKind}`)
11959
+ })
11523
11960
  }),
11524
11961
  /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("div", {
11525
11962
  className: "flex justify-center items-center rounded-full bg-[#f3f3f3] h-[30px] w-[30px] cursor-pointer",
@@ -11538,23 +11975,23 @@ const $0bca8bbbf74ddff9$export$5c334f209b1aa661 = ({ assets: assets , state: sta
11538
11975
  index: index,
11539
11976
  removeAsset: removeAsset
11540
11977
  }, asset.assetId)),
11541
- /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $f98f91fb267f52c8$export$353f5b6fc5456de1), {
11978
+ /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $f98f91fb267f52c8$export$353f5b6fc5456de1), {
11542
11979
  variant: "secondary",
11543
11980
  onPress: state.close,
11544
- children: [
11545
- "Take new ",
11546
- assetKind
11547
- ]
11981
+ children: t("recorder.takeNewElement", {
11982
+ type: t(`misc.${assetKind}`).toLocaleLowerCase()
11983
+ })
11548
11984
  }),
11549
- /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $f98f91fb267f52c8$export$353f5b6fc5456de1), {
11985
+ /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $f98f91fb267f52c8$export$353f5b6fc5456de1), {
11550
11986
  onPress: ()=>{
11551
11987
  onSendAssets();
11552
11988
  state.close();
11553
11989
  },
11554
- children: [
11555
- "Send ",
11556
- assets.length > 1 ? `${assets.length} elements` : assetKind
11557
- ]
11990
+ children: assets.length > 1 ? t("recorder.sendElements", {
11991
+ count: assets.length
11992
+ }) : t("recorder.sendElement", {
11993
+ type: t(`misc.${assetKind}`).toLocaleLowerCase()
11994
+ })
11558
11995
  })
11559
11996
  ]
11560
11997
  })
@@ -11602,7 +12039,18 @@ const $7925c01e7577d264$var$timerText = (delta)=>{
11602
12039
  ].map((n)=>`${n < 10 ? "0" : ""}${n}`);
11603
12040
  return d.join(":");
11604
12041
  };
12042
+ const $7925c01e7577d264$var$dateFormat = new Intl.DateTimeFormat("default", {
12043
+ dateStyle: "short"
12044
+ });
12045
+ const $7925c01e7577d264$var$timeFormat = new Intl.DateTimeFormat("default", {
12046
+ hour: "numeric",
12047
+ minute: "2-digit"
12048
+ });
12049
+ function $7925c01e7577d264$export$3ae94a2503e890a1(date) {
12050
+ return `${$7925c01e7577d264$var$dateFormat.format(date)} at ${$7925c01e7577d264$var$timeFormat.format(date)}`;
12051
+ }
11605
12052
  const $7925c01e7577d264$export$336a011955157f9a = ()=>{
12053
+ const { t: t } = (0, $jQDcL$reacti18next.useTranslation)();
11606
12054
  const { options: options } = (0, $jQDcL$react.useContext)((0, $8b39f32976a7698a$export$2e2bcd8739ae039));
11607
12055
  const [startRecordTime, setStartRecordTime] = (0, $jQDcL$react.useState)(undefined);
11608
12056
  const [timer, setTimer] = (0, $jQDcL$react.useState)(0);
@@ -11619,7 +12067,7 @@ const $7925c01e7577d264$export$336a011955157f9a = ()=>{
11619
12067
  const sendAssetsModalState = (0, $jQDcL$reactstately.useOverlayTriggerState)({});
11620
12068
  const [flashAnimation, setFlashAnimation] = (0, $jQDcL$react.useState)(false);
11621
12069
  const menuBarState = (0, $6f223c293b335d40$export$bd7b6af6aa16550c)({
11622
- photo: options?.recorder?.defaultState !== "video"
12070
+ state: options?.recorder?.defaultState || "photo"
11623
12071
  });
11624
12072
  const exitStreaming = (0, $jQDcL$react.useCallback)(()=>{
11625
12073
  menuBarState.setStreaming(false);
@@ -11634,6 +12082,10 @@ const $7925c01e7577d264$export$336a011955157f9a = ()=>{
11634
12082
  const { facingMode: newFacingMode } = (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).requestLocalVideo(videoElementRef?.current);
11635
12083
  setFacingMode(newFacingMode);
11636
12084
  };
12085
+ const onScreenshareEnabled = (event)=>{
12086
+ if (!videoElementRef.current) return;
12087
+ (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).requestLocalScreenshare(videoElementRef.current);
12088
+ };
11637
12089
  const onStopRecord = (0, $jQDcL$react.useCallback)((event)=>{
11638
12090
  const { url: url , assetId: assetId } = event.detail;
11639
12091
  exitStreaming();
@@ -11667,6 +12119,15 @@ const $7925c01e7577d264$export$336a011955157f9a = ()=>{
11667
12119
  }
11668
12120
  ]);
11669
12121
  };
12122
+ const captureThumbnail = async (videoElement)=>{
12123
+ let image = await (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).captureVideo(undefined, {
12124
+ addPlayWatermark: true
12125
+ }).catch(console.error);
12126
+ if (!image) image = await (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).captureVideo(videoElement, {
12127
+ addPlayWatermark: true
12128
+ });
12129
+ await (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).saveThumbnail(image);
12130
+ };
11670
12131
  const removeAsset = (0, $jQDcL$react.useCallback)(async (asset)=>{
11671
12132
  if (!asset.assetId) return;
11672
12133
  (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).deleteCapture(asset.assetId);
@@ -11688,10 +12149,12 @@ const $7925c01e7577d264$export$336a011955157f9a = ()=>{
11688
12149
  ]);
11689
12150
  (0, $jQDcL$react.useEffect)(()=>{
11690
12151
  (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).addEventListener("localVideoAvailable", onLocalVideoChange);
12152
+ (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).addEventListener("screenshareEnabled", onScreenshareEnabled);
11691
12153
  (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).addEventListener("localVideoChange", onLocalVideoChange);
11692
12154
  (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).addEventListener("recordStopped", onStopRecord);
11693
12155
  return ()=>{
11694
12156
  (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).removeEventListener("localVideoChange", onLocalVideoChange);
12157
+ (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).removeEventListener("screenshareEnabled", onScreenshareEnabled);
11695
12158
  (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).removeEventListener("localVideoAvailable", onLocalVideoChange);
11696
12159
  (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).removeEventListener("recordStopped", onStopRecord);
11697
12160
  };
@@ -11699,23 +12162,27 @@ const $7925c01e7577d264$export$336a011955157f9a = ()=>{
11699
12162
  onStopRecord
11700
12163
  ]);
11701
12164
  return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("div", {
11702
- className: "bg-[#000] w-full h-full justify-center flex flex-col antialiased inter",
12165
+ className: (0, ($parcel$interopDefault($jQDcL$classnames)))("bg-[#000] w-full h-full justify-center flex flex-col antialiased inter", {
12166
+ "bg-[url('https://cdn.snapcall.io/img/assist/gradient-bg.jpg')] bg-cover": menuBarState.mode === "screen"
12167
+ }),
11703
12168
  children: [
11704
- !menuBarState.photo && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("div", {
12169
+ (menuBarState.mode === "video" || menuBarState.mode === "screen" && menuBarState.streaming) && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("div", {
11705
12170
  className: "text-base text-white text-center font-medium pt-2.5",
11706
12171
  children: $7925c01e7577d264$var$timerText(timer)
11707
12172
  }),
11708
12173
  /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("div", {
11709
- className: "flex-1 min-h-0 p-2.5",
12174
+ className: "flex-1 min-h-0 p-2.5 ",
11710
12175
  children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("div", {
11711
- className: "relative w-full h-full rounded-[10px]",
12176
+ className: "relative w-full h-full rounded-[10px] ",
11712
12177
  children: [
11713
12178
  countdownVisible && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $47dee8347993fb81$export$53819c0e58f98d49), {
11714
12179
  initialValue: 3,
11715
12180
  onFinish: ()=>{
11716
12181
  setCountdownVisible(false);
11717
12182
  setStartRecordTime(Date.now());
11718
- (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).startRecord();
12183
+ (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).startRecord().then(()=>{
12184
+ if (videoElementRef.current) captureThumbnail(videoElementRef.current);
12185
+ });
11719
12186
  }
11720
12187
  }),
11721
12188
  flashAnimation && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $2c45d365ee8aa1ab$export$2b501aee548bae06), {
@@ -11724,7 +12191,20 @@ const $7925c01e7577d264$export$336a011955157f9a = ()=>{
11724
12191
  assetsPopupState.open();
11725
12192
  }
11726
12193
  }),
11727
- /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("video", {
12194
+ menuBarState.mode === "screen" && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("div", {
12195
+ className: "object-fit h-full",
12196
+ children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("video", {
12197
+ autoPlay: true,
12198
+ muted: true,
12199
+ playsInline: true,
12200
+ ref: videoElementRef,
12201
+ className: (0, ($parcel$interopDefault($jQDcL$classnames)))("w-full h-full rounded-[inherit]", {
12202
+ "scale-x-[-1]": facingMode === "user" && menuBarState.mode !== "screen",
12203
+ "max-w-[screen]": menuBarState.mode === "screen"
12204
+ })
12205
+ })
12206
+ }),
12207
+ menuBarState.mode !== "screen" && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("video", {
11728
12208
  autoPlay: true,
11729
12209
  muted: true,
11730
12210
  playsInline: true,
@@ -11737,7 +12217,7 @@ const $7925c01e7577d264$export$336a011955157f9a = ()=>{
11737
12217
  })
11738
12218
  }),
11739
12219
  /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("div", {
11740
- className: "flex justify-center px-2.5 pb-2.5",
12220
+ className: "flex justify-center px-2.5 pb-2.5 z-10",
11741
12221
  children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $6f223c293b335d40$export$11a6fe490bbc4873), {
11742
12222
  state: menuBarState,
11743
12223
  thumbnail: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $dc46069ab394f8fc$export$1cd1efc78cb52ca5), {
@@ -11748,17 +12228,16 @@ const $7925c01e7577d264$export$336a011955157f9a = ()=>{
11748
12228
  (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).rotateVideo();
11749
12229
  },
11750
12230
  onCapturePress: ()=>{
11751
- if (menuBarState.photo && videoElementRef.current) {
12231
+ if (menuBarState.mode === "photo" && videoElementRef.current) {
11752
12232
  onPhotoCapture(videoElementRef.current);
11753
12233
  setFlashAnimation(true);
11754
- (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).captureVideo(videoElementRef.current);
11755
12234
  }
11756
- if (!menuBarState.photo && !menuBarState.streaming) {
12235
+ if (menuBarState.mode !== "photo" && !menuBarState.streaming) {
11757
12236
  menuBarState.setStreaming(true);
11758
12237
  setTimer(0);
11759
12238
  setCountdownVisible(true);
11760
12239
  }
11761
- if (!menuBarState.photo && menuBarState.streaming) {
12240
+ if (menuBarState.mode !== "photo" && menuBarState.streaming) {
11762
12241
  exitStreaming();
11763
12242
  if (startRecordTime) {
11764
12243
  (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).stopRecord();
@@ -11779,14 +12258,41 @@ const $7925c01e7577d264$export$336a011955157f9a = ()=>{
11779
12258
  removeAsset: removeAsset,
11780
12259
  loading: assetLoading
11781
12260
  }),
11782
- /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $48c2553f62767e40$export$2b77a92f1a5ad772), {
11783
- title: "Thank you for your submission!",
12261
+ /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $48c2553f62767e40$export$2b77a92f1a5ad772), {
12262
+ title: t("recorder.submissionTitle"),
11784
12263
  state: sendAssetsModalState,
11785
12264
  isDismissable: false,
11786
- children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("span", {
11787
- className: "text-base text-primaryLight",
11788
- children: "Your photo/video has been successfully sent. We will review it and get back to you soon."
11789
- })
12265
+ children: [
12266
+ /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("span", {
12267
+ className: "text-base text-primaryLight",
12268
+ children: t("recorder.submissionDescription")
12269
+ }),
12270
+ /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("div", {
12271
+ className: "flex flex-col gap-[20px] border-t border-secondaryVLight pt-[20px]",
12272
+ children: assets.map((asset, index)=>/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("div", {
12273
+ className: "flex flex-row items-center gap-[10px]",
12274
+ children: [
12275
+ /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $dc46069ab394f8fc$export$1cd1efc78cb52ca5), {
12276
+ asset: asset
12277
+ }),
12278
+ /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("span", {
12279
+ className: "text-sm",
12280
+ style: {
12281
+ hyphens: "manual"
12282
+ },
12283
+ children: [
12284
+ asset.type === "picture" ? "Photo" : "Video",
12285
+ " ",
12286
+ index + 1,
12287
+ " \xb7",
12288
+ " ",
12289
+ $7925c01e7577d264$export$3ae94a2503e890a1(new Date(asset.timestamp))
12290
+ ]
12291
+ })
12292
+ ]
12293
+ }))
12294
+ })
12295
+ ]
11790
12296
  })
11791
12297
  ]
11792
12298
  });
@@ -11878,7 +12384,7 @@ const $ee8cb448c2c74888$var$StreamUI = ({ options: options })=>{
11878
12384
  const [profile, setProfile] = (0, $jQDcL$react.useState)({});
11879
12385
  const [muted, setMuted] = (0, $jQDcL$react.useState)(true);
11880
12386
  const [streaming, setStreaming] = (0, $jQDcL$react.useState)(false);
11881
- const [isLoading, setLoading] = (0, $jQDcL$react.useState)(!options.recorder);
12387
+ const [isLoading, setLoading] = (0, $jQDcL$react.useState)(!options.recorder?.enabled);
11882
12388
  const [screensharing, setScreensharing] = (0, $jQDcL$react.useState)(false);
11883
12389
  const [isAgent, setIsAgent] = (0, $jQDcL$react.useState)(false);
11884
12390
  const [userInteractionTriggered, setUserInteractionTriggered] = (0, $jQDcL$react.useState)(false);
@@ -12535,7 +13041,7 @@ var $3305ca02e86dabd1$export$2e2bcd8739ae039 = $3305ca02e86dabd1$var$GreetingVie
12535
13041
 
12536
13042
 
12537
13043
  var $54541b0286afc2de$exports = {};
12538
- $54541b0286afc2de$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";
13044
+ $54541b0286afc2de$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";
12539
13045
 
12540
13046
 
12541
13047
  var $9833f4335ab609cd$exports = {};
@@ -12583,7 +13089,7 @@ const $e68207026aca356b$export$3f94917203ab7078 = {
12583
13089
  let styleElement = null;
12584
13090
  styleElement = /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $jQDcL$reactjsxruntime.Fragment), {
12585
13091
  children: [
12586
- options.recorder && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("style", {
13092
+ options.recorder?.enabled && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("style", {
12587
13093
  children: (0, (/*@__PURE__*/$parcel$interopDefault($9833f4335ab609cd$exports)))
12588
13094
  }),
12589
13095
  /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("style", {