@snapcall/stream-ui 1.33.0 → 1.33.1

package/README.md

@@ -1,6 +1,7 @@
 # SnapCall Stream UI
 
 The Stream UI is a library that will help you to quickly integrate [SnapCall](https://www.snapcall.io/) on your application.
+It allows you to join a call or record media.
 
 ## Installation
 
@@ -18,28 +19,25 @@ We also distrubute a UMD build of the package, which can be used directly in the
 
 ## Basic usage
 
+Depending on your Stream token you will join a call or start a media recording session.
+
 ```js
 import { streamUI } from '@snapcall/stream-ui';
 
 const container = document.getElementById('container');
 const roomToken = '123';
 
-streamUI.init({ element: container });
-streamUI.joinRoom(roomToken);
+streamUI.initV2({ element: container, token: roomToken });
 ```
 
 ## Methods
 
-### `init(options: InitOptions): void`
+### `initV2(options: InitOptions): void`
 
-Initializes the UI, this function must be called **before** you join a room.
+Initializes the UI and start the session.
 
 See [InitOptions](#initoptions) for more details.
 
-### `joinRoom(token: string): Promise<void>`
-
-Joins a room.
-
 ### `leaveRoom(): void`
 
 Leaves a room.
@@ -48,10 +46,6 @@ Leaves a room.
 
 Terminates the room, all participants will be disconnected and the room won't be usable anymore.
 
-### `generateToken(buttonId: string): Promise<string>`
-
-Generate a room token with a SnapCall button ID.
-
 ### `sendNotification(message: string, options: NotificationOptions): void`
 
 Send a notification (tooltip), see [NotificationOptions](#notificationoptions) for the options.
@@ -65,7 +59,6 @@ Send a notification (tooltip), see [NotificationOptions](#notificationoptions) f
   element: HTMLElement;
   sharedURL?: string;
   audioTiles?: boolean;
-  settingsShortcuts?: { id: string, displayType: 'icon' | 'full' }[];
   controls?: {
     microphone?: ControlSettings;
     camera?: ControlSettings;
@@ -93,17 +86,9 @@ The URL used for features such as "Open new tab" or "Quick Connect".
 
 Enable audio-only tiles.
 
-#### `settingsShortcuts`
-
-##### Default value: `[]`
-
-Specified options are added as a small shortcut next to the menu button.
-Type are `full` or `icon`.
-Possible id values are: `openNewTab`, `copyLink`, `quickConnect`, `settings` and `pip`.
-
 #### `controls`
 
-Allows to manage the available and enabled devices
+Allows to manage the available and enabled devices for call.
 
 ```ts
 type Device = 'microphone' | 'camera' | 'screenshare';

package/dist/stream-ui.esm.js

@@ -7,7 +7,7 @@ import {useState as $3Sbms$useState, useRef as $3Sbms$useRef, useCallback as $3S
 import $3Sbms$classnames from "classnames";
 import "inobounce";
 import {useTranslation as $3Sbms$useTranslation, initReactI18next as $3Sbms$initReactI18next, Trans as $3Sbms$Trans} from "react-i18next";
-import {Recording3Icon as $3Sbms$Recording3Icon, InfoCircleIcon as $3Sbms$InfoCircleIcon, Speedometer4Icon as $3Sbms$Speedometer4Icon, Copy7Icon as $3Sbms$Copy7Icon, QrCode1Icon as $3Sbms$QrCode1Icon, UserPlus1Icon as $3Sbms$UserPlus1Icon, Settings1Icon as $3Sbms$Settings1Icon, PhoneCall1Icon as $3Sbms$PhoneCall1Icon, VideoRecorderIcon as $3Sbms$VideoRecorderIcon, Recording2Icon as $3Sbms$Recording2Icon, Monitor2Icon as $3Sbms$Monitor2Icon, Camera2Icon as $3Sbms$Camera2Icon, Copy5Icon as $3Sbms$Copy5Icon, CheckIcon as $3Sbms$CheckIcon, XCircleIcon as $3Sbms$XCircleIcon, Send3Icon as $3Sbms$Send3Icon, AlertTriangleIcon as $3Sbms$AlertTriangleIcon, CopyIcon as $3Sbms$CopyIcon, Link1Icon as $3Sbms$Link1Icon, VolumeMaxIcon as $3Sbms$VolumeMaxIcon, Settings3Icon as $3Sbms$Settings3Icon, UserSquareIcon as $3Sbms$UserSquareIcon, XCloseIcon as $3Sbms$XCloseIcon, ArrowLeftIcon as $3Sbms$ArrowLeftIcon, HelpCircleIcon as $3Sbms$HelpCircleIcon, SpinnerIcon as $3Sbms$SpinnerIcon, User1Icon as $3Sbms$User1Icon, Microphone1Icon as $3Sbms$Microphone1Icon, MicrophoneOff1Icon as $3Sbms$MicrophoneOff1Icon, VideoRecorderOffIcon as $3Sbms$VideoRecorderOffIcon, CameraPlusIcon as $3Sbms$CameraPlusIcon, Minimize1Icon as $3Sbms$Minimize1Icon, Maximize1Icon as $3Sbms$Maximize1Icon, CheckCircleIcon as $3Sbms$CheckCircleIcon, Download1Icon as $3Sbms$Download1Icon, RefreshCcw2Icon as $3Sbms$RefreshCcw2Icon, YoutubeIcon as $3Sbms$YoutubeIcon, Upload3Icon as $3Sbms$Upload3Icon, LogIn2Icon as $3Sbms$LogIn2Icon, FlipBackwardIcon as $3Sbms$FlipBackwardIcon, ArrowUpRightIcon as $3Sbms$ArrowUpRightIcon, PlusCircleIcon as $3Sbms$PlusCircleIcon, Star1Icon as $3Sbms$Star1Icon, ImageXIcon as $3Sbms$ImageXIcon, Upload1Icon as $3Sbms$Upload1Icon, Trash3Icon as $3Sbms$Trash3Icon, TrashIcon as $3Sbms$TrashIcon, Image1Icon as $3Sbms$Image1Icon, RefreshCw3Icon as $3Sbms$RefreshCw3Icon, Camera1Icon as $3Sbms$Camera1Icon, PlayIcon as $3Sbms$PlayIcon, QrCodeIcon as $3Sbms$QrCodeIcon, WifiOffIcon as $3Sbms$WifiOffIcon, Hourglass3Icon as $3Sbms$Hourglass3Icon, MicrophoneOffIcon as $3Sbms$MicrophoneOffIcon, MarkerPin4Icon as $3Sbms$MarkerPin4Icon, SlashCircle1Icon as $3Sbms$SlashCircle1Icon, CalendarIcon as $3Sbms$CalendarIcon, AlertCircleIcon as $3Sbms$AlertCircleIcon, Lock1Icon as $3Sbms$Lock1Icon, Lock3Icon as $3Sbms$Lock3Icon, VoicemailIcon as $3Sbms$VoicemailIcon} from "@snapcall/design-system/icons";
+import {Recording3Icon as $3Sbms$Recording3Icon, InfoCircleIcon as $3Sbms$InfoCircleIcon, Speedometer4Icon as $3Sbms$Speedometer4Icon, Copy7Icon as $3Sbms$Copy7Icon, LinkExternal1Icon as $3Sbms$LinkExternal1Icon, QrCode1Icon as $3Sbms$QrCode1Icon, UserPlus1Icon as $3Sbms$UserPlus1Icon, Settings1Icon as $3Sbms$Settings1Icon, PhoneCall1Icon as $3Sbms$PhoneCall1Icon, VideoRecorderIcon as $3Sbms$VideoRecorderIcon, Recording2Icon as $3Sbms$Recording2Icon, Monitor2Icon as $3Sbms$Monitor2Icon, Camera2Icon as $3Sbms$Camera2Icon, Copy5Icon as $3Sbms$Copy5Icon, CheckIcon as $3Sbms$CheckIcon, XCircleIcon as $3Sbms$XCircleIcon, Send3Icon as $3Sbms$Send3Icon, AlertTriangleIcon as $3Sbms$AlertTriangleIcon, CopyIcon as $3Sbms$CopyIcon, Link1Icon as $3Sbms$Link1Icon, VolumeMaxIcon as $3Sbms$VolumeMaxIcon, Settings3Icon as $3Sbms$Settings3Icon, UserSquareIcon as $3Sbms$UserSquareIcon, XCloseIcon as $3Sbms$XCloseIcon, ArrowLeftIcon as $3Sbms$ArrowLeftIcon, HelpCircleIcon as $3Sbms$HelpCircleIcon, SpinnerIcon as $3Sbms$SpinnerIcon, User1Icon as $3Sbms$User1Icon, Microphone1Icon as $3Sbms$Microphone1Icon, MicrophoneOff1Icon as $3Sbms$MicrophoneOff1Icon, VideoRecorderOffIcon as $3Sbms$VideoRecorderOffIcon, CameraPlusIcon as $3Sbms$CameraPlusIcon, Minimize1Icon as $3Sbms$Minimize1Icon, Maximize1Icon as $3Sbms$Maximize1Icon, CheckCircleIcon as $3Sbms$CheckCircleIcon, Download1Icon as $3Sbms$Download1Icon, RefreshCcw2Icon as $3Sbms$RefreshCcw2Icon, YoutubeIcon as $3Sbms$YoutubeIcon, Upload3Icon as $3Sbms$Upload3Icon, LogIn2Icon as $3Sbms$LogIn2Icon, FlipBackwardIcon as $3Sbms$FlipBackwardIcon, ArrowUpRightIcon as $3Sbms$ArrowUpRightIcon, PlusCircleIcon as $3Sbms$PlusCircleIcon, Star1Icon as $3Sbms$Star1Icon, ImageXIcon as $3Sbms$ImageXIcon, Upload1Icon as $3Sbms$Upload1Icon, Trash3Icon as $3Sbms$Trash3Icon, TrashIcon as $3Sbms$TrashIcon, Image1Icon as $3Sbms$Image1Icon, RefreshCw3Icon as $3Sbms$RefreshCw3Icon, Camera1Icon as $3Sbms$Camera1Icon, PlayIcon as $3Sbms$PlayIcon, QrCodeIcon as $3Sbms$QrCodeIcon, WifiOffIcon as $3Sbms$WifiOffIcon, Hourglass3Icon as $3Sbms$Hourglass3Icon, MicrophoneOffIcon as $3Sbms$MicrophoneOffIcon, MarkerPin4Icon as $3Sbms$MarkerPin4Icon, SlashCircle1Icon as $3Sbms$SlashCircle1Icon, CalendarIcon as $3Sbms$CalendarIcon, AlertCircleIcon as $3Sbms$AlertCircleIcon, Lock1Icon as $3Sbms$Lock1Icon, Lock3Icon as $3Sbms$Lock3Icon, VoicemailIcon as $3Sbms$VoicemailIcon} from "@snapcall/design-system/icons";
 import $3Sbms$i18next from "i18next";
 import {Form as $3Sbms$Form, FormField as $3Sbms$FormField, FormItem as $3Sbms$FormItem, FormLabel as $3Sbms$FormLabel, FormControl as $3Sbms$FormControl, FormMessage as $3Sbms$FormMessage} from "@snapcall/design-system/form";
 import {useForm as $3Sbms$useForm} from "react-hook-form";
@@ -5416,6 +5416,7 @@ const $1299919e02395903$export$c197ce1a352372f = ({ state: state })=>{
 };
 
 
+
 const $f235befa4cdc42d6$var$multiPiP = new (0, $e96d119a19ed0c6c$export$45fabd1ce5e673de)();
 const $f235befa4cdc42d6$var$browser = $3Sbms$parse(window.navigator.userAgent);
 const $f235befa4cdc42d6$var$Header = ()=>{
@@ -5425,7 +5426,8 @@ const $f235befa4cdc42d6$var$Header = ()=>{
     const inviteModalState = (0, $3Sbms$useDialogState)({});
     const quickConnectDialogState = (0, $3Sbms$useDialogState)({});
     const settingsDialogState = (0, $3Sbms$useDialogState)({});
-    const showPiP = document.pictureInPictureEnabled && $f235befa4cdc42d6$var$browser.platform.type === 'desktop';
+    const isInIframe = window.location !== window.parent.location;
+    const showPiP = document.pictureInPictureEnabled && $f235befa4cdc42d6$var$browser.platform.type === 'desktop' && !isInIframe;
     const isMedium = window.matchMedia('(min-width: 768px)').matches;
     const tilesWithCamera = (0, $3Sbms$useMemo)(()=>{
         return streams.filter((stream)=>stream.webcam).map((stream)=>({
@@ -5485,6 +5487,29 @@ const $f235befa4cdc42d6$var$Header = ()=>{
                                     })
                                 ]
                             }),
+                            isInIframe && /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $3Sbms$Tooltip), {
+                                children: [
+                                    /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$TooltipTrigger), {
+                                        asChild: true,
+                                        children: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$Button), {
+                                            variant: "roundedFill",
+                                            size: "sm",
+                                            onClick: ()=>{
+                                                window.open(options.sharedURL, '_blank', 'noopener,noreferrer');
+                                                (0, $c9e496369b59be7a$export$2f377c2162fd02b2).endCall();
+                                            },
+                                            icon: true,
+                                            children: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$LinkExternal1Icon), {
+                                                size: 16
+                                            })
+                                        })
+                                    }),
+                                    /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$TooltipContent), {
+                                        sideOffset: 10,
+                                        children: t('menu.openNewTab')
+                                    })
+                                ]
+                            }),
                             /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $3Sbms$Tooltip), {
                                 children: [
                                     /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$TooltipTrigger), {
@@ -9663,7 +9688,7 @@ const $2231be1261227854$export$ca9d588768f0d0da = ({ children: children })=>{
             });
             const state = (0, $c9e496369b59be7a$export$2f377c2162fd02b2).getDevicesState();
             if (hasVideo && !state.camera.enabled) await (0, $c9e496369b59be7a$export$2f377c2162fd02b2).enableVideo({
-                resolution: 'vga',
+                resolution: 'hd',
                 frameRate: 20,
                 facingMode: 'environment'
             });

package/dist/stream-ui.js

@@ -5422,6 +5422,7 @@ const $e9d4b4657e98cb84$export$c197ce1a352372f = ({ state: state })=>{
 };
 
 
+
 const $e1930b467e7d8845$var$multiPiP = new (0, $21395e477f83709c$export$45fabd1ce5e673de)();
 const $e1930b467e7d8845$var$browser = $jQDcL$bowser.parse(window.navigator.userAgent);
 const $e1930b467e7d8845$var$Header = ()=>{
@@ -5431,7 +5432,8 @@ const $e1930b467e7d8845$var$Header = ()=>{
     const inviteModalState = (0, $jQDcL$snapcalldesignsystem.useDialogState)({});
     const quickConnectDialogState = (0, $jQDcL$snapcalldesignsystem.useDialogState)({});
     const settingsDialogState = (0, $jQDcL$snapcalldesignsystem.useDialogState)({});
-    const showPiP = document.pictureInPictureEnabled && $e1930b467e7d8845$var$browser.platform.type === 'desktop';
+    const isInIframe = window.location !== window.parent.location;
+    const showPiP = document.pictureInPictureEnabled && $e1930b467e7d8845$var$browser.platform.type === 'desktop' && !isInIframe;
     const isMedium = window.matchMedia('(min-width: 768px)').matches;
     const tilesWithCamera = (0, $jQDcL$react.useMemo)(()=>{
         return streams.filter((stream)=>stream.webcam).map((stream)=>({
@@ -5491,6 +5493,29 @@ const $e1930b467e7d8845$var$Header = ()=>{
                                     })
                                 ]
                             }),
+                            isInIframe && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $jQDcL$snapcalldesignsystem.Tooltip), {
+                                children: [
+                                    /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.TooltipTrigger), {
+                                        asChild: true,
+                                        children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.Button), {
+                                            variant: "roundedFill",
+                                            size: "sm",
+                                            onClick: ()=>{
+                                                window.open(options.sharedURL, '_blank', 'noopener,noreferrer');
+                                                (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).endCall();
+                                            },
+                                            icon: true,
+                                            children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystemicons.LinkExternal1Icon), {
+                                                size: 16
+                                            })
+                                        })
+                                    }),
+                                    /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.TooltipContent), {
+                                        sideOffset: 10,
+                                        children: t('menu.openNewTab')
+                                    })
+                                ]
+                            }),
                             /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $jQDcL$snapcalldesignsystem.Tooltip), {
                                 children: [
                                     /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.TooltipTrigger), {
@@ -9669,7 +9694,7 @@ const $a33432a0233f49a9$export$ca9d588768f0d0da = ({ children: children })=>{
             });
             const state = (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).getDevicesState();
             if (hasVideo && !state.camera.enabled) await (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).enableVideo({
-                resolution: 'vga',
+                resolution: 'hd',
                 frameRate: 20,
                 facingMode: 'environment'
             });

package/package.json

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