@100mslive/react-sdk 0.0.5 → 0.0.7-alpha.1

package/README.md

@@ -7,6 +7,10 @@ over the primitive ones.
 If someone is using class based react components, they'll be better off
 with using the core sdk directly.
 
+> If you're already using hooks from hms-video-react, this package will be a drop
+> in replacement. hms-video-react is planned to be deprecated so please move your code
+> to using this package instead.
+
 ### Primitive Hooks
 
 These are hooks wrapper over the sdk things.
@@ -38,3 +42,44 @@ the below things -
 - Prefer IDs to objects for both input arguments and in result object. This
   facilitates writing optimised code on the app layer, as objects are prone to change
   leading to unnecessary re renders on different levels.
+
+
+### TODO Planned Hooks
+
+#### Breakout Rooms
+
+```ts
+function useBreakoutRoles({filter: regexOrArray, filterOut: regexOrArray}) {
+  {
+        allRoles, // all breakout roles options for this user
+        currRole,
+        switchToRole() // takes in a role name
+    }
+}
+```
+
+#### Waiting Room
+
+On the guest side who joins a waiting room - 
+```ts
+// onconfirm if role change is not forced, fn returns true/false
+// onapprovval - use this to play a tone maybe
+function useWaitingRoom({waitingRoomRole, postApprovalRole, onApproval}) {
+    {
+        amIInWaitingRoom,
+        isConfirmationPending, // boolean, true when role change is not forced
+        confirmOrDeny(confirm) // pass in true or false
+    }
+}
+```
+
+On the host side who needs to see who is in waiting room and let them in.
+```ts
+function useWaitingRoomApprover({waitingRoomRole, postApprovalRole, approverRoles: []}) {
+    {
+        peersInWaitingRoom,
+        approvePeer = (peerID, ask) // force role change to postApprovalRole
+    }
+}
+```
+

package/dist/hooks/useDevices.d.ts

@@ -1,15 +1,24 @@
 import { hooksErrHandler } from '../hooks/types';
-declare enum DeviceType {
+export declare enum DeviceType {
     videoInput = "videoInput",
     audioInput = "audioInput",
     audioOutput = "audioOutput"
 }
-declare type DeviceTypeInfo<T> = {
+export declare type DeviceTypeAndInfo<T> = {
     [key in DeviceType]?: T;
 };
 export interface useDevicesResult {
-    allDevices: DeviceTypeInfo<MediaDeviceInfo[]>;
-    selectedDeviceIDs: DeviceTypeInfo<string>;
+    /**
+     * list of all devices by type
+     */
+    allDevices: DeviceTypeAndInfo<MediaDeviceInfo[]>;
+    /**
+     * selected device ids for all types
+     */
+    selectedDeviceIDs: DeviceTypeAndInfo<string>;
+    /**
+     * function to call to update device
+     */
     updateDevice: ({ deviceType, deviceId }: {
         deviceType: DeviceType;
         deviceId: string;
@@ -19,7 +28,7 @@ export interface useDevicesResult {
  * This hook can be used to implement a UI component which allows the user to manually change their
  * audio/video device. It returns the list of all devices as well as the currently selected one. The input
  * devices will be returned based on what the user is allowed to publish, so a audio only user won't get
- * the videInput field.
+ * the audioInput field. This can be used to show the UI dropdowns properly.
  *
  * Note:
  * - Browsers give access to the list of devices only if the user has given permission to access them
@@ -29,4 +38,3 @@ export interface useDevicesResult {
  * @param handleError error handler for any errors during device change
  */
 export declare const useDevices: (handleError?: hooksErrHandler) => useDevicesResult;
-export {};

package/dist/hooks/useParticipantList.d.ts

@@ -0,0 +1,13 @@
+import { HMSPeer, HMSRoleName } from '@100mslive/hms-video-store';
+export interface useParticipantListResult {
+    roles: HMSRoleName[];
+    participantsByRoles: Record<string, HMSPeer[]>;
+    peerCount: number;
+    isConnected: boolean;
+}
+export declare const useParticipantList: () => {
+    roles: string[];
+    participantsByRoles: Record<string, HMSPeer[]>;
+    peerCount: number;
+    isConnected: boolean | undefined;
+};

package/dist/hooks/{usePreview.d.ts → usePreviewJoin.d.ts}

@@ -1,4 +1,5 @@
-import { hooksErrHandler } from '../hooks/types';
+import { HMSConfigInitialSettings } from '@100mslive/hms-video-store';
+import { hooksErrHandler } from './types';
 export interface usePreviewInput {
     /**
      * name of user who is joining, this is only required if join is called
@@ -16,6 +17,11 @@ export interface usePreviewInput {
      * function to handle errors happening during preview
      */
     handleError?: hooksErrHandler;
+    initEndpoint?: string;
+    /**
+     * initial settings for audio/video and device to be used.
+     */
+    initialSettings?: HMSConfigInitialSettings;
 }
 export interface usePreviewResult {
     /**
@@ -31,6 +37,10 @@ export interface usePreviewResult {
      * to decide to show between preview form and conferencing component/video tiles.
      */
     isConnected: boolean;
+    /**
+     * call this function to join the room
+     */
+    preview: () => void;
 }
 /**
  * This hook can be used to build a preview UI component, this lets you call preview everytime the passed in
@@ -38,4 +48,4 @@ export interface usePreviewResult {
  * muting/unmuting and useAudioLevelStyles for showing mic audio level to the user.
  * Any device change or mute/unmute will be carried across to join.
  */
-export declare const usePreview: ({ name, token, metadata, handleError, }: usePreviewInput) => usePreviewResult;
+export declare const usePreviewJoin: ({ name, token, metadata, handleError, initEndpoint, initialSettings, }: usePreviewInput) => usePreviewResult;

package/dist/hooks/useRecordingStreaming.d.ts

@@ -0,0 +1,10 @@
+export interface useRecordingStreamingResult {
+    isServerRecordingOn: boolean;
+    isBrowserRecordingOn: boolean;
+    isHLSRecordingOn: boolean;
+    isStreamingOn: boolean;
+    isHLSRunning: boolean;
+    isRTMPRunning: boolean;
+    isRecordingOn: boolean;
+}
+export declare const useRecordingStreaming: () => useRecordingStreamingResult;

package/dist/hooks/useRemoteAVToggle.d.ts

@@ -0,0 +1,36 @@
+import { HMSTrackID } from '@100mslive/hms-video-store';
+import { hooksErrHandler } from './types';
+export interface useRemoteAVToggleResult {
+    /**
+     * true if unmuted and vice versa
+     */
+    isAudioEnabled: boolean;
+    isVideoEnabled: boolean;
+    /**
+     * current volume of the audio track
+     */
+    volume?: number;
+    /**
+     * use this function to toggle audio state, the function will only be present if the user
+     * has permission to mute/unmute remote audio
+     */
+    toggleAudio?: () => void;
+    /**
+     * use this function to toggle video state, the function will only be present if the user
+     * has permission to mute/unmute remote video
+     */
+    toggleVideo?: () => void;
+    /**
+     * use this function to set the volume of peer's audio track for the local user, the function will
+     * only be present if the remote peer has an audio track to change volume for
+     */
+    setVolume?: (volume: number) => void;
+}
+/**
+ * This hook can be used to implement remote mute/unmute + audio volume changer on tile level.
+ * @param peerId of the peer whose tracks need to be managed
+ * @param audioTrackId of the peer whose tracks need to be managed
+ * @param videoTrackId of the peer whose tracks need to be managed
+ * @param handleError to handle any error during toggle of audio/video
+ */
+export declare const useRemoteAVToggle: (audioTrackId: HMSTrackID, videoTrackId: HMSTrackID, handleError?: hooksErrHandler) => useRemoteAVToggleResult;

package/dist/hooks/useVideo.d.ts

@@ -1,4 +1,5 @@
 import { HMSTrackID } from '@100mslive/hms-video-store';
+import React from 'react';
 /**
  * This hooks can be used to implement a video tile component. Given a track id it will return a ref.
  * The returned ref can be used to set on a video element meant to display the video.
@@ -6,4 +7,4 @@ import { HMSTrackID } from '@100mslive/hms-video-store';
  * goes out of view to save on bandwidth.
  * @param trackId {HMSTrackID}
  */
-export declare const useVideo: (trackId: HMSTrackID) => (node: any) => void;
+export declare const useVideo: (trackId: HMSTrackID) => React.RefCallback<HTMLVideoElement>;

package/dist/hooks/useVideoList.d.ts

@@ -1,20 +1,34 @@
 import { HMSPeer } from '@100mslive/hms-video-store';
+import React from 'react';
 import { TrackWithPeer } from '../utils/layout';
-interface UseVideoListProps {
+export interface useVideoListInput {
+    /**
+     * peers is the list of all peers you need to display
+     */
+    peers: HMSPeer[];
     /**
      * Max tiles in a  page. Overrides maxRowCount and maxColCount
      */
     maxTileCount?: number;
+    /**
+     * Max rows in a  page. Only applied if maxTileCount is not present
+     */
     maxRowCount?: number;
+    /**
+     * Max columns in a  page. Only applied if maxTileCount and maxRowCount are not present
+     */
     maxColCount?: number;
     /**
-     * Given a screensharing peer the function should return true if their screenshare should be included for the video tile, and false otherwise. This can be useful if there are multiple screenshares in the room where you may want to show one in the center view and others in video list along side other tiles.
+     * A function which tells whether to show the screenShare for a peer who is screensharing. A peer is passed
+     * and a boolean value is expected.
+     * This can be useful if there are multiple screenShares in the room where you may want to show the main one in the
+     * center view and others in video list along side other tiles. No screenShare is included by default.
+     * e.g. includeScreenShare = (peer) => return peer.id !== mainScreenSharingPeer.id
      */
-    showScreenFn?: (peer: HMSPeer) => boolean;
-    peers: HMSPeer[];
-    overflow?: 'scroll-x' | 'scroll-y' | 'hidden';
+    includeScreenShareForPeer?: (peer: HMSPeer) => boolean;
     /**
-     * Aspect ratio of VideoTiles
+     * Aspect ratio of VideoTiles, ideally this should be the same as the aspect ratio selected for
+     * capture in the dashboard template.
      */
     aspectRatio?: {
         width: number;
@@ -22,15 +36,29 @@ interface UseVideoListProps {
     };
     /**
      * By default this will be true. Only publishing(audio/video/screen) peers in the passed in peer list
-     * will be filtered by default. If you wish to show all peers, pass false for this.
+     * will be filtered. If you wish to show all peers, pass false for this.
      */
     filterNonPublishingPeers?: boolean;
 }
-export declare const useVideoList: ({ maxTileCount, maxColCount, maxRowCount, showScreenFn, peers, overflow, aspectRatio, filterNonPublishingPeers, }: UseVideoListProps) => {
-    pagesWithTiles: (TrackWithPeer & {
-        width: number;
-        height: number;
-    })[][];
+export interface useVideoListTile extends TrackWithPeer {
+    width: number;
+    height: number;
+}
+export interface useVideoResult {
+    /**
+     * This returns a list of all pages with every page containing the list of all tiles on it.
+     */
+    pagesWithTiles: useVideoListTile[][];
+    /**
+     * add the ref to the element going to render the video list, this is used to measure the available
+     * space/dimensions in order to calculate the best fit
+     */
     ref: React.MutableRefObject<any>;
-};
-export {};
+}
+/**
+ * This hook can be used to build a paginated gallery view of video tiles. You can give the hook
+ * a list of all the peers which need to be shown and it tells you how to structure the UI by giving
+ * a list of pages with every page having a list of video tiles.
+ * Please check the documentation of input and output types for more details.
+ */
+export declare const useVideoList: ({ peers, maxTileCount, maxColCount, maxRowCount, includeScreenShareForPeer, aspectRatio, filterNonPublishingPeers, }: useVideoListInput) => useVideoResult;

package/dist/index.cjs.js

@@ -1 +1 @@
-var De=Object.create;var z=Object.defineProperty,Ae=Object.defineProperties,Ve=Object.getOwnPropertyDescriptor,Ce=Object.getOwnPropertyDescriptors,Oe=Object.getOwnPropertyNames,Z=Object.getOwnPropertySymbols,Ne=Object.getPrototypeOf,_=Object.prototype.hasOwnProperty,We=Object.prototype.propertyIsEnumerable;var $=(r,e,t)=>e in r?z(r,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):r[e]=t,L=(r,e)=>{for(var t in e||(e={}))_.call(e,t)&&$(r,t,e[t]);if(Z)for(var t of Z(e))We.call(e,t)&&$(r,t,e[t]);return r},B=(r,e)=>Ae(r,Ce(e)),ee=r=>z(r,"__esModule",{value:!0});var Fe=(r,e)=>{ee(r);for(var t in e)z(r,t,{get:e[t],enumerable:!0})},H=(r,e,t)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of Oe(e))!_.call(r,o)&&o!=="default"&&z(r,o,{get:()=>e[o],enumerable:!(t=Ve(e,o))||t.enumerable});return r},m=r=>H(ee(z(r!=null?De(Ne(r)):{},"default",r&&r.__esModule&&"default"in r?{get:()=>r.default,enumerable:!0}:{value:r,enumerable:!0})),r);var v=(r,e,t)=>new Promise((o,s)=>{var i=a=>{try{c(t.next(a))}catch(l){s(l)}},n=a=>{try{c(t.throw(a))}catch(l){s(l)}},c=a=>a.done?o(a.value):Promise.resolve(a.value).then(i,n);c((t=t.apply(r,e)).next())});Fe(exports,{HMSRoomProvider:()=>ie,throwErrorHandler:()=>ce,useAVToggle:()=>ue,useAudio:()=>ve,useAudioLevelStyles:()=>Re,useDevices:()=>me,useHMSActions:()=>M,useHMSNotifications:()=>ae,useHMSStatsStore:()=>ne,useHMSStore:()=>f,useHMSVanillaStore:()=>A,usePreview:()=>le,useScreenShare:()=>ge,useVideo:()=>fe,useVideoList:()=>Ee});var b=m(require("react")),se=m(require("@100mslive/hms-video-store")),q=m(require("zustand"));var U=m(require("react")),j=m(require("zustand/shallow"));var w;(function(n){n[n.VERBOSE=0]="VERBOSE",n[n.DEBUG=1]="DEBUG",n[n.INFO=2]="INFO",n[n.WARN=3]="WARN",n[n.ERROR=4]="ERROR",n[n.NONE=5]="NONE"})(w||(w={}));var P=class{static v(e,...t){this.log(0,e,...t)}static d(e,...t){this.log(1,e,...t)}static i(e,...t){this.log(2,e,...t)}static w(e,...t){this.log(3,e,...t)}static e(e,...t){this.log(4,e,...t)}static log(e,t,...o){if(!(this.level.valueOf()>e.valueOf()))switch(e){case 0:{console.log("HMSui-components: ",t,...o);break}case 1:{console.debug("HMSui-components: ",t,...o);break}case 2:{console.info("HMSui-components: ",t,...o);break}case 3:{console.warn("HMSui-components: ",t,...o);break}case 4:{console.error("HMSui-components: ",t,...o);break}}}};P.level=0;var R="It seems like you forgot to add your component within a top level HMSRoomProvider, please refer to 100ms react docs(https://docs.100ms.live/javascript/v2/features/integration#react-hooks) to check on the required steps for using this hook.";function te(r){return(t,o=j.default)=>{t||P.w("fetching full store without passing any selector may have a heavy performance impact on your website.");let s=(0,U.useContext)(r);if(!s)throw new Error(R);return s.store(t,o)}}function oe(r){return(t,o=j.default)=>{t||P.w("fetching full store without passing any selector may have a heavy performance impact on your website.");let s=(0,U.useContext)(r);if(!s)throw new Error(R);let i=s.statsStore;return i==null?void 0:i(t,o)}}var re=typeof window!="undefined";var D=(0,b.createContext)(null),T,ie=({children:r,actions:e,store:t,notifications:o,stats:s,isHMSStatsOn:i=!1})=>{if(!T){let n=()=>{throw new Error("modifying store is not allowed")};if(e&&t)T={actions:e,store:(0,q.default)(B(L({},t),{setState:n,destroy:n}))},o&&(T.notifications=o),s&&(T.statsStore=(0,q.default)({getState:s.getState,subscribe:s.subscribe,setState:n,destroy:n}));else{let c=new se.HMSReactiveStore;if(T={actions:c.getActions(),store:(0,q.default)(B(L({},c.getStore()),{setState:n,destroy:n})),notifications:c.getNotifications()},i){let a=c.getStats();T.statsStore=(0,q.default)({getState:a.getState,subscribe:a.subscribe,setState:n,destroy:n})}}}return(0,b.useEffect)(()=>{re&&(window.addEventListener("beforeunload",()=>T.actions.leave()),window.addEventListener("onunload",()=>T.actions.leave()))},[]),b.default.createElement(D.Provider,{value:T},r)},f=te(D),ne=oe(D),A=()=>{let r=(0,b.useContext)(D);if(!r)throw new Error(R);return r.store},M=()=>{let r=(0,b.useContext)(D);if(!r)throw new Error(R);return r.actions},ae=()=>{let r=(0,b.useContext)(D),[e,t]=(0,b.useState)(null);if(!r)throw new Error(R);return(0,b.useEffect)(()=>r.notifications?r.notifications.onNotification(s=>t(s)):void 0,[r.notifications]),e};var E=m(require("@100mslive/hms-video-store")),C=m(require("react"));var ze="react-sdk",V=(r,e)=>P.e(ze,e,r),ce=r=>{throw r};var le=({name:r="",token:e,metadata:t,handleError:o=V})=>{let s=M(),i=f(E.selectRoomState),n=f(E.selectIsConnectedToRoom)||!1,c=i===E.HMSRoomState.Preview,a=(0,C.useMemo)(()=>({userName:r,authToken:e,metaData:t,rememberDeviceSelection:!0}),[r,e,t]);(0,C.useEffect)(()=>{(()=>v(void 0,null,function*(){if(!!e){i!==E.HMSRoomState.Disconnected&&(yield s.leave());try{yield s.preview(a)}catch(u){o(u,"preview")}}}))()},[s,e]);let l=(0,C.useCallback)(()=>v(void 0,null,function*(){if(!!e)try{yield s.join(a)}catch(u){o(u,"join")}}),[s,e]);return{enableJoin:c,join:l,isConnected:n}};var O=m(require("@100mslive/hms-video-store")),J=m(require("react"));var ue=(r=V)=>{let e=f(O.selectIsLocalAudioEnabled),t=f(O.selectIsLocalVideoEnabled),o=f(O.selectIsAllowedToPublish),s=M(),i=(0,J.useCallback)(()=>v(void 0,null,function*(){try{yield s.setLocalAudioEnabled(!e)}catch(c){r(c,"toggleAudio")}}),[e,s]),n=(0,J.useCallback)(()=>v(void 0,null,function*(){try{yield s.setLocalVideoEnabled(!t)}catch(c){r(c,"toggleVideo")}}),[t,s]);return{isLocalAudioEnabled:e,isLocalVideoEnabled:t,toggleAudio:(o==null?void 0:o.audio)?i:void 0,toggleVideo:(o==null?void 0:o.video)?n:void 0}};var N=m(require("@100mslive/hms-video-store")),de=m(require("react"));var k;(function(o){o.videoInput="videoInput",o.audioInput="audioInput",o.audioOutput="audioOutput"})(k||(k={}));var me=(r=V)=>{let e=M(),t=f(N.selectDevices),o=f(N.selectLocalMediaSettings),s=f(N.selectIsAllowedToPublish),i={[k.audioInput]:o.audioInputDeviceId,[k.audioOutput]:o.audioOutputDeviceId,[k.videoInput]:o.videoInputDeviceId};s.video||(delete t[k.videoInput],delete i[k.videoInput]),s.audio||(delete t[k.audioInput],delete i[k.audioInput]);let n=(0,de.useCallback)(l=>v(void 0,[l],function*({deviceType:c,deviceId:a}){try{switch(c){case k.audioInput:yield e.setAudioSettings({deviceId:a});break;case k.videoInput:yield e.setVideoSettings({deviceId:a});break;case k.audioOutput:yield e.setAudioOutputDevice(a);break}}catch(u){r(u,"updateDevices")}}),[e]);return{allDevices:t,selectedDeviceIDs:i,updateDevice:n}};var he=m(require("@100mslive/hms-video-store")),I=m(require("react")),Se=m(require("react-intersection-observer"));var fe=r=>{let e=M(),t=(0,I.useRef)(null),o=f((0,he.selectTrackByID)(r)),{ref:s,inView:i}=(0,Se.useInView)({threshold:.5}),n=(0,I.useCallback)(c=>{t.current=c,s(c)},[s]);return(0,I.useEffect)(()=>{(()=>v(void 0,null,function*(){t.current&&o&&(i?o.enabled?yield e.attachVideo(o.id,t.current):yield e.detachVideo(o.id,t.current):yield e.detachVideo(o.id,t.current))}))()},[i,t,o==null?void 0:o.id,o==null?void 0:o.enabled,o==null?void 0:o.deviceID,o==null?void 0:o.plugins]),(0,I.useEffect)(()=>()=>{(()=>v(void 0,null,function*(){if(t.current&&o)try{yield e.detachVideo(o.id,t.current)}catch(c){P.w("detach video error for track",o.id,c)}}))()},[]),n};var W=m(require("@100mslive/hms-video-store"));var pe=m(require("react")),Le=r=>console.log("Error: ",r),ge=(r=Le)=>{var n,c;let e=M(),t=f(W.selectIsLocalScreenShared),o=f(W.selectPeerScreenSharing),s=f((0,W.selectScreenSharesByPeerId)(o==null?void 0:o.id)),i=(0,pe.useCallback)(()=>v(void 0,null,function*(){try{yield e.setScreenShareEnabled(!t)}catch(a){r(a)}}),[e]);return{amIScreenSharing:t,screenSharingPeerId:o==null?void 0:o.id,screenShareVideoTrackId:(n=s==null?void 0:s.video)==null?void 0:n.id,screenShareAudioTrackId:(c=s==null?void 0:s.audio)==null?void 0:c.id,toggleScreenShare:i}};var He=m(require("@100mslive/hms-video-store"));var Me=m(require("react")),ve=r=>{let e=M(),t=f((0,He.selectAudioTrackVolume)(r)),o=(0,Me.useCallback)(s=>{e.setVolume(s,r)},[e]);return{volume:t,setVolume:o}};var Te=m(require("@100mslive/hms-video-store")),G=m(require("react"));var Be=(r,e,t)=>r.reduce((o,s,i)=>{let n=Math.floor(i/e);return n>0&&t||(o[n]||(o[n]=[]),o[n].push(s)),o},[]),we=({elements:r,tilesInFirstPage:e,onlyOnePage:t,isLastPageDifferentFromFirstPage:o,defaultWidth:s,defaultHeight:i,lastPageWidth:n,lastPageHeight:c})=>{let a=Be(r,e,t);return a.map((l,u)=>l.map(S=>{let d=u===a.length-1,h=o&&d?n:s,p=o&&d?c:i;return B(L({},S),{height:p,width:h})}))};function qe(r){if(r.length===0)return null;let e={},t=r[0],o=1;for(let s=0;s<r.length;s++){let i=r[s];e[i]===null?e[i]=1:e[i]++,e[i]>o&&(t=i,o=e[i])}return t}var be=r=>qe(r.filter(e=>{var t,o;return((t=e.track)==null?void 0:t.width)&&((o=e.track)==null?void 0:o.height)}).map(e=>{var s,i;let t=(s=e.track)==null?void 0:s.width,o=(i=e.track)==null?void 0:i.height;return(t||1)/(o||1)})),K=(r,e,t,o,s)=>{if(r<0||e<0)throw new Error("Container must have a non-negative area");if(t<1||!Number.isInteger(t))throw new Error("Number of shapes to place must be a positive integer");let i=o&&s&&o/s;if(i!==void 0&&isNaN(i))throw new Error("Aspect ratio must be a number");let n={area:0,cols:0,rows:0,width:0,height:0},c=t,a=-1;if(i!==void 0)for(let l=c;l>0;l+=a){let u=Math.ceil(t/l),S=r/(l*i),d=e/u,h,p;S<=d?(h=r/l,p=h/i):(p=e/u,h=p*i);let g=h*p;g>n.area&&(n={area:g,width:h,height:p,rows:u,cols:l})}return n},Ge=({parentWidth:r,parentHeight:e,count:t,maxCount:o,aspectRatio:s})=>{let i=0,n=0,c=0,a=0,l=!1,u=0,S=0,d=Math.min(Math.ceil(Math.sqrt(t*(r/e)/(s.width/s.height))),o),h=r/d,p=h/(s.width/s.height),g=Math.floor(e/p);if(n=p,i=h,u=Math.min(t,g*d),S=t%(g*d),l=S>0&&t>g*d,l){let y=Math.min(Math.ceil(Math.sqrt(S*(r/e)/(s.width/s.height))),o),x=r/y;a=x/(s.width/s.height),c=x}return{tilesInFirstPage:u,defaultWidth:i,defaultHeight:n,lastPageWidth:c,lastPageHeight:a,isLastPageDifferentFromFirstPage:l}},Ue=({parentWidth:r,parentHeight:e,count:t,maxCount:o,aspectRatio:s})=>{let i=0,n=0,c=0,a=0,l=!1,u=0,S=0,{width:d,height:h}=K(r,e,Math.min(t,o),s.width,s.height);if(i=d,n=h,u=Math.min(t,o),S=t%o,l=S>0&&t>o,l){let{width:p,height:g}=K(r,e,S,s.width,s.height);c=p,a=g}return{tilesInFirstPage:u,defaultWidth:i,defaultHeight:n,lastPageWidth:c,lastPageHeight:a,isLastPageDifferentFromFirstPage:l}},je=({parentWidth:r,parentHeight:e,count:t,maxCount:o,aspectRatio:s})=>{let i=0,n=0,c=0,a=0,l=!1,u=0,S=0,d=Math.min(Math.ceil(Math.sqrt(t*(s.width/s.height)/(r/e))),o),h=e/d,p=h*(s.width/s.height),g=Math.floor(r/p);if(i=p,n=h,u=Math.min(t,d*g),S=t%(d*g),l=S>0&&t>d*g,l){let y=Math.min(Math.ceil(Math.sqrt(S*(s.width/s.height)/(r/e))),o),x=e/y,F=x*(s.width/s.height);a=x,c=F}return{tilesInFirstPage:u,defaultWidth:i,defaultHeight:n,lastPageWidth:c,lastPageHeight:a,isLastPageDifferentFromFirstPage:l}};function ke({count:r,parentWidth:e,parentHeight:t,maxTileCount:o,maxRowCount:s,maxColCount:i,aspectRatio:n}){let c=0,a=0,l=0,u=0,S=!1,d=0;if(r===0)return{tilesInFirstPage:d,defaultWidth:c,defaultHeight:a,lastPageWidth:l,lastPageHeight:u,isLastPageDifferentFromFirstPage:S};if(o)({tilesInFirstPage:d,defaultWidth:c,defaultHeight:a,lastPageWidth:l,lastPageHeight:u,isLastPageDifferentFromFirstPage:S}=Ue({parentWidth:e,parentHeight:t,count:r,maxCount:o,aspectRatio:n}));else if(s)({tilesInFirstPage:d,defaultWidth:c,defaultHeight:a,lastPageWidth:l,lastPageHeight:u,isLastPageDifferentFromFirstPage:S}=je({parentWidth:e,parentHeight:t,count:r,maxCount:s,aspectRatio:n}));else if(i)({tilesInFirstPage:d,defaultWidth:c,defaultHeight:a,lastPageWidth:l,lastPageHeight:u,isLastPageDifferentFromFirstPage:S}=Ge({parentWidth:e,parentHeight:t,count:r,maxCount:i,aspectRatio:n}));else{let{width:h,height:p}=K(e,t,r,n.width,n.height);c=h,a=p,d=r}return{tilesInFirstPage:d,defaultWidth:c,defaultHeight:a,lastPageWidth:l,lastPageHeight:u,isLastPageDifferentFromFirstPage:S}}var Pe=(r,e,t,o=!0)=>{if(!r||!e||!t)return[];let s=[];for(let i of r)if(i.videoTrack===void 0&&i.audioTrack&&e[i.audioTrack])s.push({peer:i});else if(i.videoTrack&&e[i.videoTrack])s.push({track:e[i.videoTrack],peer:i});else if(t(i)&&i.auxiliaryTracks.length>0){let n=i.auxiliaryTracks.find(c=>{let a=e[c];return(a==null?void 0:a.type)==="video"&&(a==null?void 0:a.source)==="screen"});n&&s.push({track:e[n],peer:i})}else o||s.push({peer:i});return s};var xe=m(require("react-resize-detector")),Je={aspectRatio:{width:1,height:1}},Ee=({maxTileCount:r,maxColCount:e,maxRowCount:t,showScreenFn:o=()=>!1,peers:s,overflow:i="scroll-x",aspectRatio:n=Je.aspectRatio,filterNonPublishingPeers:c=!0})=>{let{width:a=0,height:l=0,ref:u}=(0,xe.useResizeDetector)(),d=A().getState(Te.selectTracksMap),h=Pe(s,d,o,c),p=(0,G.useMemo)(()=>n||{width:be(h)||1,height:1},[n,h]),g=h.length,{tilesInFirstPage:y,defaultWidth:x,defaultHeight:F,lastPageWidth:Q,lastPageHeight:X,isLastPageDifferentFromFirstPage:Y}=(0,G.useMemo)(()=>ke({count:g,parentWidth:Math.floor(a),parentHeight:Math.floor(l),maxTileCount:r,maxRowCount:t,maxColCount:e,aspectRatio:p}),[g,a,l,r,t,e,p]);return{pagesWithTiles:(0,G.useMemo)(()=>we({elements:h,tilesInFirstPage:y,onlyOnePage:i==="hidden",isLastPageDifferentFromFirstPage:Y,defaultWidth:x,defaultHeight:F,lastPageWidth:Q,lastPageHeight:X}),[h,y,i,Y,x,F,Q,X]),ref:u}};var Ie=m(require("react")),ye=m(require("@100mslive/hms-video-store"));function Re({trackId:r,getStyle:e,ref:t}){let o=A();(0,Ie.useEffect)(()=>o.subscribe(s=>{if(!t.current)return;let i=e(s);for(let n in i)t.current.style[n]=i[n]},(0,ye.selectTrackAudioByID)(r)),[r])}H(exports,m(require("@100mslive/hms-video-store")));
+var Ne=Object.create;var z=Object.defineProperty,We=Object.defineProperties,Fe=Object.getOwnPropertyDescriptor,Be=Object.getOwnPropertyDescriptors,ze=Object.getOwnPropertyNames,ee=Object.getOwnPropertySymbols,qe=Object.getPrototypeOf,te=Object.prototype.hasOwnProperty,Ge=Object.prototype.propertyIsEnumerable;var oe=(r,e,t)=>e in r?z(r,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):r[e]=t,q=(r,e)=>{for(var t in e||(e={}))te.call(e,t)&&oe(r,t,e[t]);if(ee)for(var t of ee(e))Ge.call(e,t)&&oe(r,t,e[t]);return r},G=(r,e)=>We(r,Be(e)),re=r=>z(r,"__esModule",{value:!0});var je=(r,e)=>{re(r);for(var t in e)z(r,t,{get:e[t],enumerable:!0})},p=(r,e,t)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of ze(e))!te.call(r,o)&&o!=="default"&&z(r,o,{get:()=>e[o],enumerable:!(t=Fe(e,o))||t.enumerable});return r},f=r=>p(re(z(r!=null?Ne(qe(r)):{},"default",r&&r.__esModule&&"default"in r?{get:()=>r.default,enumerable:!0}:{value:r,enumerable:!0})),r);var H=(r,e,t)=>new Promise((o,i)=>{var s=l=>{try{a(t.next(l))}catch(c){i(c)}},n=l=>{try{a(t.throw(l))}catch(c){i(c)}},a=l=>l.done?o(l.value):Promise.resolve(l.value).then(s,n);a((t=t.apply(r,e)).next())});je(exports,{DeviceType:()=>w,HMSRoomProvider:()=>ce,throwErrorHandler:()=>me,useAVToggle:()=>Se,useAudioLevelStyles:()=>Ee,useDevices:()=>Ae,useHMSActions:()=>v,useHMSNotifications:()=>ue,useHMSStatsStore:()=>le,useHMSStore:()=>m,useHMSVanillaStore:()=>L,useParticipantList:()=>Oe,usePreviewJoin:()=>de,useRecordingStreaming:()=>Le,useRemoteAVToggle:()=>ve,useScreenShare:()=>He,useVideo:()=>ge,useVideoList:()=>xe});var P=f(require("react")),ae=f(require("@100mslive/hms-video-store")),j=f(require("zustand"));var Q=f(require("react")),X=f(require("zustand/shallow"));var b;(function(n){n[n.VERBOSE=0]="VERBOSE",n[n.DEBUG=1]="DEBUG",n[n.INFO=2]="INFO",n[n.WARN=3]="WARN",n[n.ERROR=4]="ERROR",n[n.NONE=5]="NONE"})(b||(b={}));var k=class{static v(e,...t){this.log(0,e,...t)}static d(e,...t){this.log(1,e,...t)}static i(e,...t){this.log(2,e,...t)}static w(e,...t){this.log(3,e,...t)}static e(e,...t){this.log(4,e,...t)}static log(e,t,...o){if(!(this.level.valueOf()>e.valueOf()))switch(e){case 0:{console.log("HMSui-components: ",t,...o);break}case 1:{console.debug("HMSui-components: ",t,...o);break}case 2:{console.info("HMSui-components: ",t,...o);break}case 3:{console.warn("HMSui-components: ",t,...o);break}case 4:{console.error("HMSui-components: ",t,...o);break}}}};k.level=0;var C="It seems like you forgot to add your component within a top level HMSRoomProvider, please refer to 100ms react docs(https://docs.100ms.live/javascript/v2/features/integration#react-hooks) to check on the required steps for using this hook.";function ie(r){return(t,o=X.default)=>{t||k.w("fetching full store without passing any selector may have a heavy performance impact on your website.");let i=(0,Q.useContext)(r);if(!i)throw new Error(C);return i.store(t,o)}}function se(r){return(t,o=X.default)=>{t||k.w("fetching full store without passing any selector may have a heavy performance impact on your website.");let i=(0,Q.useContext)(r);if(!i)throw new Error(C);let s=i.statsStore;return s==null?void 0:s(t,o)}}var ne=typeof window!="undefined";var O=(0,P.createContext)(null),x,ce=({children:r,actions:e,store:t,notifications:o,stats:i,isHMSStatsOn:s=!1})=>{if(!x){let n=()=>{throw new Error("modifying store is not allowed")};if(e&&t)x={actions:e,store:(0,j.default)(G(q({},t),{setState:n,destroy:n}))},o&&(x.notifications=o),i&&(x.statsStore=(0,j.default)({getState:i.getState,subscribe:i.subscribe,setState:n,destroy:n}));else{let a=new ae.HMSReactiveStore;if(x={actions:a.getActions(),store:(0,j.default)(G(q({},a.getStore()),{setState:n,destroy:n})),notifications:a.getNotifications()},s){let l=a.getStats();x.statsStore=(0,j.default)({getState:l.getState,subscribe:l.subscribe,setState:n,destroy:n})}}}return(0,P.useEffect)(()=>{ne&&(window.addEventListener("beforeunload",()=>x.actions.leave()),window.addEventListener("onunload",()=>x.actions.leave()))},[]),P.default.createElement(O.Provider,{value:x},r)},m=ie(O),le=se(O),L=()=>{let r=(0,P.useContext)(O);if(!r)throw new Error(C);return r.store},v=()=>{let r=(0,P.useContext)(O);if(!r)throw new Error(C);return r.actions},ue=()=>{let r=(0,P.useContext)(O),[e,t]=(0,P.useState)(null);if(!r)throw new Error(C);return(0,P.useEffect)(()=>r.notifications?r.notifications.onNotification(i=>t(i)):void 0,[r.notifications]),e};var E=f(require("@100mslive/hms-video-store")),U=f(require("react"));var Ue="react-sdk",y=(r,e)=>k.e(Ue,e,r),me=r=>{throw r};var de=({name:r="",token:e,metadata:t,handleError:o=y,initEndpoint:i,initialSettings:s})=>{let n=v(),a=m(E.selectRoomState),l=m(E.selectIsConnectedToRoom)||!1,c=a===E.HMSRoomState.Preview,S=(0,U.useMemo)(()=>({userName:r,authToken:e,metaData:t,rememberDeviceSelection:!0,settings:s,initEndpoint:i}),[r,e,t,i,s]),d=(0,U.useCallback)(()=>{(()=>H(void 0,null,function*(){if(!!e){a!==E.HMSRoomState.Disconnected&&(yield n.leave());try{yield n.preview(S)}catch(h){o(h,"preview")}}}))()},[n,o,e,a,S]),u=(0,U.useCallback)(()=>{if(!!e)try{n.join(S)}catch(h){o(h,"join")}},[n,S,o,e]);return{enableJoin:c,join:u,isConnected:l,preview:d}};var N=f(require("@100mslive/hms-video-store")),Y=f(require("react"));var Se=(r=y)=>{let e=m(N.selectIsLocalAudioEnabled),t=m(N.selectIsLocalVideoEnabled),o=m(N.selectIsAllowedToPublish),i=v(),s=(0,Y.useCallback)(()=>H(void 0,null,function*(){try{yield i.setLocalAudioEnabled(!e)}catch(a){r(a,"toggleAudio")}}),[i,e,r]),n=(0,Y.useCallback)(()=>H(void 0,null,function*(){try{yield i.setLocalVideoEnabled(!t)}catch(a){r(a,"toggleVideo")}}),[i,t,r]);return{isLocalAudioEnabled:e,isLocalVideoEnabled:t,toggleAudio:(o==null?void 0:o.audio)?s:void 0,toggleVideo:(o==null?void 0:o.video)?n:void 0}};var he=f(require("@100mslive/hms-video-store")),V=f(require("react")),fe=f(require("react-intersection-observer"));var ge=r=>{let e=v(),t=(0,V.useRef)(null),o=m((0,he.selectTrackByID)(r)),{ref:i,inView:s}=(0,fe.useInView)({threshold:.5}),n=(0,V.useCallback)(a=>{t.current=a,i(a)},[i]);return(0,V.useEffect)(()=>{(()=>H(void 0,null,function*(){t.current&&(o==null?void 0:o.id)&&(s?o.enabled?yield e.attachVideo(o.id,t.current):yield e.detachVideo(o.id,t.current):yield e.detachVideo(o.id,t.current))}))()},[e,s,t,o==null?void 0:o.id,o==null?void 0:o.enabled,o==null?void 0:o.deviceID,o==null?void 0:o.plugins]),(0,V.useEffect)(()=>()=>{(()=>H(void 0,null,function*(){if(t.current&&o)try{yield e.detachVideo(o.id,t.current)}catch(a){k.w("detach video error for track",o.id,a)}}))()},[]),n};var W=f(require("@100mslive/hms-video-store"));var pe=f(require("react")),Je=r=>console.log("Error: ",r),He=(r=Je)=>{var n,a;let e=v(),t=m(W.selectIsLocalScreenShared),o=m(W.selectPeerScreenSharing),i=m((0,W.selectScreenSharesByPeerId)(o==null?void 0:o.id)),s=(0,pe.useCallback)(()=>H(void 0,null,function*(){try{yield e.setScreenShareEnabled(!t)}catch(l){r(l)}}),[e,t,r]);return{amIScreenSharing:t,screenSharingPeerId:o==null?void 0:o.id,screenShareVideoTrackId:(n=i==null?void 0:i.video)==null?void 0:n.id,screenShareAudioTrackId:(a=i==null?void 0:i.audio)==null?void 0:a.id,toggleScreenShare:s}};var A=f(require("@100mslive/hms-video-store"));var J=f(require("react"));var Me=(r,e,t)=>H(void 0,null,function*(){if(e)try{yield r.setRemoteTrackEnabled(e.id,!e.enabled)}catch(o){t(o,"remoteToggle")}}),ve=(r,e,t=y)=>{let o=v(),i=m((0,A.selectTrackByID)(r)),s=m((0,A.selectTrackByID)(e)),n=m((0,A.selectAudioTrackVolume)(i==null?void 0:i.id)),a=m(A.selectPermissions),l=(s==null?void 0:s.enabled)?a==null?void 0:a.mute:a==null?void 0:a.unmute,c=(i==null?void 0:i.enabled)?a==null?void 0:a.mute:a==null?void 0:a.unmute,S=(0,J.useCallback)(()=>H(void 0,null,function*(){yield Me(o,i,t)}),[o,i,t]),d=(0,J.useCallback)(()=>H(void 0,null,function*(){yield Me(o,s,t)}),[o,t,s]),u=(0,J.useCallback)(h=>{i&&o.setVolume(h,i.id)},[o,i]);return{isAudioEnabled:!!(i==null?void 0:i.enabled),isVideoEnabled:!!(s==null?void 0:s.enabled),volume:n,toggleAudio:i&&c?S:void 0,toggleVideo:(s==null?void 0:s.source)==="regular"&&l?d:void 0,setVolume:i?u:void 0}};var Re=f(require("@100mslive/hms-video-store")),K=f(require("react"));var Ke=(r,e,t)=>r.reduce((o,i,s)=>{let n=Math.floor(s/e);return n>0&&t||(o[n]||(o[n]=[]),o[n].push(i)),o},[]),be=({elements:r,tilesInFirstPage:e,onlyOnePage:t,isLastPageDifferentFromFirstPage:o,defaultWidth:i,defaultHeight:s,lastPageWidth:n,lastPageHeight:a})=>{let l=Ke(r,e,t);return l.map((c,S)=>c.map(d=>{let u=S===l.length-1,h=o&&u?n:i,g=o&&u?a:s;return G(q({},d),{height:g,width:h})}))};function Qe(r){if(r.length===0)return null;let e={},t=r[0],o=1;for(let i=0;i<r.length;i++){let s=r[i];e[s]===null?e[s]=1:e[s]++,e[s]>o&&(t=s,o=e[s])}return t}var Pe=r=>Qe(r.filter(e=>{var t,o;return((t=e.track)==null?void 0:t.width)&&((o=e.track)==null?void 0:o.height)}).map(e=>{var i,s;let t=(i=e.track)==null?void 0:i.width,o=(s=e.track)==null?void 0:s.height;return(t||1)/(o||1)})),Z=(r,e,t,o,i)=>{if(r<0||e<0)throw new Error("Container must have a non-negative area");if(t<1||!Number.isInteger(t))throw new Error("Number of shapes to place must be a positive integer");let s=o&&i&&o/i;if(s!==void 0&&isNaN(s))throw new Error("Aspect ratio must be a number");let n={area:0,cols:0,rows:0,width:0,height:0},a=t,l=-1;if(s!==void 0)for(let c=a;c>0;c+=l){let S=Math.ceil(t/c),d=r/(c*s),u=e/S,h,g;d<=u?(h=r/c,g=h/s):(g=e/S,h=g*s);let M=h*g;M>n.area&&(n={area:M,width:h,height:g,rows:S,cols:c})}return n},Xe=({parentWidth:r,parentHeight:e,count:t,maxCount:o,aspectRatio:i})=>{let s=0,n=0,a=0,l=0,c=!1,S=0,d=0,u=Math.min(Math.ceil(Math.sqrt(t*(r/e)/(i.width/i.height))),o),h=r/u,g=h/(i.width/i.height);g>e&&(g=e,h=g/(i.height/i.width));let M=Math.floor(e/g);if(n=g,s=h,S=Math.min(t,M*u),d=t%(M*u),c=d>0&&t>M*u,c){let D=Math.min(Math.ceil(Math.sqrt(d*(r/e)/(i.width/i.height))),o),R=r/D,T=R/(i.width/i.height);T>e&&(T=e,R=T/(i.height/i.width)),l=T,a=R}return{tilesInFirstPage:S,defaultWidth:s,defaultHeight:n,lastPageWidth:a,lastPageHeight:l,isLastPageDifferentFromFirstPage:c}},Ye=({parentWidth:r,parentHeight:e,count:t,maxCount:o,aspectRatio:i})=>{let s=0,n=0,a=0,l=0,c=!1,S=0,d=0,{width:u,height:h}=Z(r,e,Math.min(t,o),i.width,i.height);if(s=u,n=h,S=Math.min(t,o),d=t%o,c=d>0&&t>o,c){let{width:g,height:M}=Z(r,e,d,i.width,i.height);a=g,l=M}return{tilesInFirstPage:S,defaultWidth:s,defaultHeight:n,lastPageWidth:a,lastPageHeight:l,isLastPageDifferentFromFirstPage:c}},Ze=({parentWidth:r,parentHeight:e,count:t,maxCount:o,aspectRatio:i})=>{let s=0,n=0,a=0,l=0,c=!1,S=0,d=0,u=Math.min(Math.ceil(Math.sqrt(t*(i.width/i.height)/(r/e))),o),h=e/u,g=h*(i.width/i.height),M=Math.floor(r/g);if(s=g,n=h,S=Math.min(t,u*M),d=t%(u*M),c=d>0&&t>u*M,c){let D=Math.min(Math.ceil(Math.sqrt(d*(i.width/i.height)/(r/e))),o),R=e/D,T=R*(i.width/i.height);l=R,a=T}return{tilesInFirstPage:S,defaultWidth:s,defaultHeight:n,lastPageWidth:a,lastPageHeight:l,isLastPageDifferentFromFirstPage:c}};function we({count:r,parentWidth:e,parentHeight:t,maxTileCount:o,maxRowCount:i,maxColCount:s,aspectRatio:n}){let a=0,l=0,c=0,S=0,d=!1,u=0;if(r===0)return{tilesInFirstPage:u,defaultWidth:a,defaultHeight:l,lastPageWidth:c,lastPageHeight:S,isLastPageDifferentFromFirstPage:d};if(o)({tilesInFirstPage:u,defaultWidth:a,defaultHeight:l,lastPageWidth:c,lastPageHeight:S,isLastPageDifferentFromFirstPage:d}=Ye({parentWidth:e,parentHeight:t,count:r,maxCount:o,aspectRatio:n}));else if(i)({tilesInFirstPage:u,defaultWidth:a,defaultHeight:l,lastPageWidth:c,lastPageHeight:S,isLastPageDifferentFromFirstPage:d}=Ze({parentWidth:e,parentHeight:t,count:r,maxCount:i,aspectRatio:n}));else if(s)({tilesInFirstPage:u,defaultWidth:a,defaultHeight:l,lastPageWidth:c,lastPageHeight:S,isLastPageDifferentFromFirstPage:d}=Xe({parentWidth:e,parentHeight:t,count:r,maxCount:s,aspectRatio:n}));else{let{width:h,height:g}=Z(e,t,r,n.width,n.height);a=h,l=g,u=r}return{tilesInFirstPage:u,defaultWidth:a,defaultHeight:l,lastPageWidth:c,lastPageHeight:S,isLastPageDifferentFromFirstPage:d}}var ke=(r,e,t,o=!0)=>{if(!r||!e||!t)return[];let i=[];for(let s of r)if(s.videoTrack===void 0&&s.audioTrack&&e[s.audioTrack]?i.push({peer:s}):s.videoTrack&&e[s.videoTrack]?i.push({track:e[s.videoTrack],peer:s}):o||i.push({peer:s}),t(s)&&s.auxiliaryTracks.length>0){let a=s.auxiliaryTracks.find(l=>{let c=e[l];return(c==null?void 0:c.type)==="video"&&(c==null?void 0:c.source)==="screen"});a&&i.push({track:e[a],peer:s})}return i};var Te=f(require("react-resize-detector")),_e={aspectRatio:{width:1,height:1}},xe=({peers:r,maxTileCount:e,maxColCount:t,maxRowCount:o,includeScreenShareForPeer:i=()=>!1,aspectRatio:s=_e.aspectRatio,filterNonPublishingPeers:n=!0})=>{let{width:a=0,height:l=0,ref:c}=(0,Te.useResizeDetector)(),d=L().getState(Re.selectTracksMap),u=ke(r,d,i,n),h=(0,K.useMemo)(()=>s||{width:Pe(u)||1,height:1},[s,u]),g=u.length,{tilesInFirstPage:M,defaultWidth:D,defaultHeight:R,lastPageWidth:T,lastPageHeight:_,isLastPageDifferentFromFirstPage:$}=(0,K.useMemo)(()=>we({count:g,parentWidth:Math.floor(a),parentHeight:Math.floor(l),maxTileCount:e,maxRowCount:o,maxColCount:t,aspectRatio:h}),[g,a,l,e,o,t,h]);return{pagesWithTiles:(0,K.useMemo)(()=>be({elements:u,tilesInFirstPage:M,onlyOnePage:!1,isLastPageDifferentFromFirstPage:$,defaultWidth:D,defaultHeight:R,lastPageWidth:T,lastPageHeight:_}),[u,M,$,D,R,T,_]),ref:c}};var ye=f(require("react")),Ie=f(require("@100mslive/hms-video-store"));function Ee({trackId:r,getStyle:e,ref:t}){let o=L();(0,ye.useEffect)(()=>o.subscribe(i=>{if(!t.current)return;let s=e(i);for(let n in s)t.current.style[n]=s[n]},(0,Ie.selectTrackAudioByID)(r)),[e,t,o,r])}var F=f(require("@100mslive/hms-video-store")),Ve=f(require("react"));var w;(function(o){o.videoInput="videoInput",o.audioInput="audioInput",o.audioOutput="audioOutput"})(w||(w={}));var Ae=(r=y)=>{let e=v(),t=m(F.selectDevices),o=m(F.selectLocalMediaSettings),i=m(F.selectIsAllowedToPublish),s={[w.audioOutput]:o.audioOutputDeviceId},n={[w.audioOutput]:t.audioOutput};i.video&&(n[w.videoInput]=t.videoInput,s[w.videoInput]=o.videoInputDeviceId),i.audio&&(n[w.audioInput]=t.audioInput,s[w.audioInput]=o.audioInputDeviceId);let a=(0,Ve.useCallback)(S=>H(void 0,[S],function*({deviceType:l,deviceId:c}){try{switch(l){case w.audioInput:yield e.setAudioSettings({deviceId:c});break;case w.videoInput:yield e.setVideoSettings({deviceId:c});break;case w.audioOutput:e.setAudioOutputDevice(c);break}}catch(d){r(d,"updateDevices")}}),[r,e]);return{allDevices:n,selectedDeviceIDs:s,updateDevice:a}};var Ce=f(require("react")),I=f(require("@100mslive/hms-video-store"));var De=r=>!r||!Array.isArray(r)||r.length===0?{}:r.reduce((e,t)=>(t.roleName&&(e[t.roleName]||(e[t.roleName]=[]),e[t.roleName].push(t)),e),{});var Oe=()=>{let r=m(I.selectIsConnectedToRoom),e=m(r?I.selectPeers:I.selectRemotePeers),t=m(I.selectPeerCount),o=(0,Ce.useMemo)(()=>De(e),[e]);return{roles:Object.keys(o),participantsByRoles:o,peerCount:t,isConnected:r}};var B=f(require("@100mslive/hms-video-store"));var Le=()=>{let r=m(B.selectRecordingState),e=m(B.selectRTMPState),t=m(B.selectHLSState),o=r.server.running,i=r.browser.running,s=r.hls.running,n=t.running||e.running,a=o||i||s;return{isServerRecordingOn:o,isBrowserRecordingOn:i,isHLSRecordingOn:s,isStreamingOn:n,isHLSRunning:t.running,isRTMPRunning:e.running,isRecordingOn:a}};p(exports,f(require("@100mslive/hms-video-store")));

package/dist/index.d.ts

@@ -1,16 +1,22 @@
 export { HMSRoomProvider, useHMSStore, useHMSActions, useHMSNotifications, useHMSVanillaStore, useHMSStatsStore, } from './primitives/HmsRoomProvider';
-export { usePreview } from './hooks/usePreview';
+export { usePreviewJoin } from './hooks/usePreviewJoin';
 export { useAVToggle } from './hooks/useAVToggle';
-export { useDevices } from './hooks/useDevices';
 export { useVideo } from './hooks/useVideo';
 export { useScreenShare } from './hooks/useScreenShare';
-export { useAudio } from './hooks/useAudio';
+export { useRemoteAVToggle } from './hooks/useRemoteAVToggle';
 export { useVideoList } from './hooks/useVideoList';
 export { useAudioLevelStyles } from './hooks/useAudioLevelStyles';
-export * from '@100mslive/hms-video-store';
+export { useDevices, DeviceType } from './hooks/useDevices';
+export { useParticipantList } from './hooks/useParticipantList';
+export { useRecordingStreaming } from './hooks/useRecordingStreaming';
 export type { hooksErrHandler } from './hooks/types';
-export type { usePreviewInput, usePreviewResult } from './hooks/usePreview';
+export type { usePreviewInput, usePreviewResult } from './hooks/usePreviewJoin';
+export type { useVideoListInput, useVideoResult, useVideoListTile } from './hooks/useVideoList';
 export type { useAVToggleResult } from './hooks/useAVToggle';
 export type { useDevicesResult } from './hooks/useDevices';
 export type { useScreenShareResult } from './hooks/useScreenShare';
+export type { useRemoteAVToggleResult } from './hooks/useRemoteAVToggle';
+export type { useRecordingStreamingResult } from './hooks/useRecordingStreaming';
+export type { useParticipantListResult } from './hooks/useParticipantList';
 export { throwErrorHandler } from './utils/commons';
+export * from '@100mslive/hms-video-store';

package/dist/index.js

@@ -1 +1 @@
-var ee=Object.defineProperty,te=Object.defineProperties;var oe=Object.getOwnPropertyDescriptors;var z=Object.getOwnPropertySymbols;var re=Object.prototype.hasOwnProperty,se=Object.prototype.propertyIsEnumerable;var L=(r,t,e)=>t in r?ee(r,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):r[t]=e,y=(r,t)=>{for(var e in t||(t={}))re.call(t,e)&&L(r,e,t[e]);if(z)for(var e of z(t))se.call(t,e)&&L(r,e,t[e]);return r},R=(r,t)=>te(r,oe(t));var g=(r,t,e)=>new Promise((o,s)=>{var i=a=>{try{c(e.next(a))}catch(l){s(l)}},n=a=>{try{c(e.throw(a))}catch(l){s(l)}},c=a=>a.done?o(a.value):Promise.resolve(a.value).then(i,n);c((e=e.apply(r,t)).next())});import ie,{createContext as ne,useContext as V,useEffect as J,useState as ae}from"react";import{HMSReactiveStore as ce}from"@100mslive/hms-video-store";import A from"zustand";import{useContext as B}from"react";import q from"zustand/shallow";var H;(function(n){n[n.VERBOSE=0]="VERBOSE",n[n.DEBUG=1]="DEBUG",n[n.INFO=2]="INFO",n[n.WARN=3]="WARN",n[n.ERROR=4]="ERROR",n[n.NONE=5]="NONE"})(H||(H={}));var w=class{static v(t,...e){this.log(0,t,...e)}static d(t,...e){this.log(1,t,...e)}static i(t,...e){this.log(2,t,...e)}static w(t,...e){this.log(3,t,...e)}static e(t,...e){this.log(4,t,...e)}static log(t,e,...o){if(!(this.level.valueOf()>t.valueOf()))switch(t){case 0:{console.log("HMSui-components: ",e,...o);break}case 1:{console.debug("HMSui-components: ",e,...o);break}case 2:{console.info("HMSui-components: ",e,...o);break}case 3:{console.warn("HMSui-components: ",e,...o);break}case 4:{console.error("HMSui-components: ",e,...o);break}}}};w.level=0;var T="It seems like you forgot to add your component within a top level HMSRoomProvider, please refer to 100ms react docs(https://docs.100ms.live/javascript/v2/features/integration#react-hooks) to check on the required steps for using this hook.";function G(r){return(e,o=q)=>{e||w.w("fetching full store without passing any selector may have a heavy performance impact on your website.");let s=B(r);if(!s)throw new Error(T);return s.store(e,o)}}function U(r){return(e,o=q)=>{e||w.w("fetching full store without passing any selector may have a heavy performance impact on your website.");let s=B(r);if(!s)throw new Error(T);let i=s.statsStore;return i==null?void 0:i(e,o)}}var j=typeof window!="undefined";var x=ne(null),b,le=({children:r,actions:t,store:e,notifications:o,stats:s,isHMSStatsOn:i=!1})=>{if(!b){let n=()=>{throw new Error("modifying store is not allowed")};if(t&&e)b={actions:t,store:A(R(y({},e),{setState:n,destroy:n}))},o&&(b.notifications=o),s&&(b.statsStore=A({getState:s.getState,subscribe:s.subscribe,setState:n,destroy:n}));else{let c=new ce;if(b={actions:c.getActions(),store:A(R(y({},c.getStore()),{setState:n,destroy:n})),notifications:c.getNotifications()},i){let a=c.getStats();b.statsStore=A({getState:a.getState,subscribe:a.subscribe,setState:n,destroy:n})}}}return J(()=>{j&&(window.addEventListener("beforeunload",()=>b.actions.leave()),window.addEventListener("onunload",()=>b.actions.leave()))},[]),ie.createElement(x.Provider,{value:b},r)},f=G(x),ue=U(x),D=()=>{let r=V(x);if(!r)throw new Error(T);return r.store},M=()=>{let r=V(x);if(!r)throw new Error(T);return r.actions},de=()=>{let r=V(x),[t,e]=ae(null);if(!r)throw new Error(T);return J(()=>r.notifications?r.notifications.onNotification(s=>e(s)):void 0,[r.notifications]),t};import{HMSRoomState as K,selectIsConnectedToRoom as Se,selectRoomState as fe}from"@100mslive/hms-video-store";import{useCallback as pe,useEffect as ge,useMemo as He}from"react";var me="react-sdk",E=(r,t)=>w.e(me,t,r),he=r=>{throw r};var Me=({name:r="",token:t,metadata:e,handleError:o=E})=>{let s=M(),i=f(fe),n=f(Se)||!1,c=i===K.Preview,a=He(()=>({userName:r,authToken:t,metaData:e,rememberDeviceSelection:!0}),[r,t,e]);ge(()=>{(()=>g(void 0,null,function*(){if(!!t){i!==K.Disconnected&&(yield s.leave());try{yield s.preview(a)}catch(u){o(u,"preview")}}}))()},[s,t]);let l=pe(()=>g(void 0,null,function*(){if(!!t)try{yield s.join(a)}catch(u){o(u,"join")}}),[s,t]);return{enableJoin:c,join:l,isConnected:n}};import{selectIsAllowedToPublish as ve,selectIsLocalAudioEnabled as we,selectIsLocalVideoEnabled as be}from"@100mslive/hms-video-store";import{useCallback as Q}from"react";var ke=(r=E)=>{let t=f(we),e=f(be),o=f(ve),s=M(),i=Q(()=>g(void 0,null,function*(){try{yield s.setLocalAudioEnabled(!t)}catch(c){r(c,"toggleAudio")}}),[t,s]),n=Q(()=>g(void 0,null,function*(){try{yield s.setLocalVideoEnabled(!e)}catch(c){r(c,"toggleVideo")}}),[e,s]);return{isLocalAudioEnabled:t,isLocalVideoEnabled:e,toggleAudio:(o==null?void 0:o.audio)?i:void 0,toggleVideo:(o==null?void 0:o.video)?n:void 0}};import{selectDevices as Pe,selectIsAllowedToPublish as Te,selectLocalMediaSettings as xe}from"@100mslive/hms-video-store";import{useCallback as Ee}from"react";var v;(function(o){o.videoInput="videoInput",o.audioInput="audioInput",o.audioOutput="audioOutput"})(v||(v={}));var Ie=(r=E)=>{let t=M(),e=f(Pe),o=f(xe),s=f(Te),i={[v.audioInput]:o.audioInputDeviceId,[v.audioOutput]:o.audioOutputDeviceId,[v.videoInput]:o.videoInputDeviceId};s.video||(delete e[v.videoInput],delete i[v.videoInput]),s.audio||(delete e[v.audioInput],delete i[v.audioInput]);let n=Ee(l=>g(void 0,[l],function*({deviceType:c,deviceId:a}){try{switch(c){case v.audioInput:yield t.setAudioSettings({deviceId:a});break;case v.videoInput:yield t.setVideoSettings({deviceId:a});break;case v.audioOutput:yield t.setAudioOutputDevice(a);break}}catch(u){r(u,"updateDevices")}}),[t]);return{allDevices:e,selectedDeviceIDs:i,updateDevice:n}};import{selectTrackByID as ye}from"@100mslive/hms-video-store";import{useCallback as Re,useEffect as X,useRef as De}from"react";import{useInView as Ae}from"react-intersection-observer";var Ve=r=>{let t=M(),e=De(null),o=f(ye(r)),{ref:s,inView:i}=Ae({threshold:.5}),n=Re(c=>{e.current=c,s(c)},[s]);return X(()=>{(()=>g(void 0,null,function*(){e.current&&o&&(i?o.enabled?yield t.attachVideo(o.id,e.current):yield t.detachVideo(o.id,e.current):yield t.detachVideo(o.id,e.current))}))()},[i,e,o==null?void 0:o.id,o==null?void 0:o.enabled,o==null?void 0:o.deviceID,o==null?void 0:o.plugins]),X(()=>()=>{(()=>g(void 0,null,function*(){if(e.current&&o)try{yield t.detachVideo(o.id,e.current)}catch(c){w.w("detach video error for track",o.id,c)}}))()},[]),n};import{selectIsLocalScreenShared as Ce,selectPeerScreenSharing as Oe,selectScreenSharesByPeerId as Ne}from"@100mslive/hms-video-store";import{useCallback as We}from"react";var Fe=r=>console.log("Error: ",r),ze=(r=Fe)=>{var n,c;let t=M(),e=f(Ce),o=f(Oe),s=f(Ne(o==null?void 0:o.id)),i=We(()=>g(void 0,null,function*(){try{yield t.setScreenShareEnabled(!e)}catch(a){r(a)}}),[t]);return{amIScreenSharing:e,screenSharingPeerId:o==null?void 0:o.id,screenShareVideoTrackId:(n=s==null?void 0:s.video)==null?void 0:n.id,screenShareAudioTrackId:(c=s==null?void 0:s.audio)==null?void 0:c.id,toggleScreenShare:i}};import{selectAudioTrackVolume as Le}from"@100mslive/hms-video-store";import{useCallback as Be}from"react";var qe=r=>{let t=M(),e=f(Le(r)),o=Be(s=>{t.setVolume(s,r)},[t]);return{volume:e,setVolume:o}};import{selectTracksMap as Qe}from"@100mslive/hms-video-store";import{useMemo as O}from"react";var Ge=(r,t,e)=>r.reduce((o,s,i)=>{let n=Math.floor(i/t);return n>0&&e||(o[n]||(o[n]=[]),o[n].push(s)),o},[]),Y=({elements:r,tilesInFirstPage:t,onlyOnePage:e,isLastPageDifferentFromFirstPage:o,defaultWidth:s,defaultHeight:i,lastPageWidth:n,lastPageHeight:c})=>{let a=Ge(r,t,e);return a.map((l,u)=>l.map(h=>{let d=u===a.length-1,m=o&&d?n:s,S=o&&d?c:i;return R(y({},h),{height:S,width:m})}))};function Ue(r){if(r.length===0)return null;let t={},e=r[0],o=1;for(let s=0;s<r.length;s++){let i=r[s];t[i]===null?t[i]=1:t[i]++,t[i]>o&&(e=i,o=t[i])}return e}var Z=r=>Ue(r.filter(t=>{var e,o;return((e=t.track)==null?void 0:e.width)&&((o=t.track)==null?void 0:o.height)}).map(t=>{var s,i;let e=(s=t.track)==null?void 0:s.width,o=(i=t.track)==null?void 0:i.height;return(e||1)/(o||1)})),C=(r,t,e,o,s)=>{if(r<0||t<0)throw new Error("Container must have a non-negative area");if(e<1||!Number.isInteger(e))throw new Error("Number of shapes to place must be a positive integer");let i=o&&s&&o/s;if(i!==void 0&&isNaN(i))throw new Error("Aspect ratio must be a number");let n={area:0,cols:0,rows:0,width:0,height:0},c=e,a=-1;if(i!==void 0)for(let l=c;l>0;l+=a){let u=Math.ceil(e/l),h=r/(l*i),d=t/u,m,S;h<=d?(m=r/l,S=m/i):(S=t/u,m=S*i);let p=m*S;p>n.area&&(n={area:p,width:m,height:S,rows:u,cols:l})}return n},je=({parentWidth:r,parentHeight:t,count:e,maxCount:o,aspectRatio:s})=>{let i=0,n=0,c=0,a=0,l=!1,u=0,h=0,d=Math.min(Math.ceil(Math.sqrt(e*(r/t)/(s.width/s.height))),o),m=r/d,S=m/(s.width/s.height),p=Math.floor(t/S);if(n=S,i=m,u=Math.min(e,p*d),h=e%(p*d),l=h>0&&e>p*d,l){let P=Math.min(Math.ceil(Math.sqrt(h*(r/t)/(s.width/s.height))),o),k=r/P;a=k/(s.width/s.height),c=k}return{tilesInFirstPage:u,defaultWidth:i,defaultHeight:n,lastPageWidth:c,lastPageHeight:a,isLastPageDifferentFromFirstPage:l}},Je=({parentWidth:r,parentHeight:t,count:e,maxCount:o,aspectRatio:s})=>{let i=0,n=0,c=0,a=0,l=!1,u=0,h=0,{width:d,height:m}=C(r,t,Math.min(e,o),s.width,s.height);if(i=d,n=m,u=Math.min(e,o),h=e%o,l=h>0&&e>o,l){let{width:S,height:p}=C(r,t,h,s.width,s.height);c=S,a=p}return{tilesInFirstPage:u,defaultWidth:i,defaultHeight:n,lastPageWidth:c,lastPageHeight:a,isLastPageDifferentFromFirstPage:l}},Ke=({parentWidth:r,parentHeight:t,count:e,maxCount:o,aspectRatio:s})=>{let i=0,n=0,c=0,a=0,l=!1,u=0,h=0,d=Math.min(Math.ceil(Math.sqrt(e*(s.width/s.height)/(r/t))),o),m=t/d,S=m*(s.width/s.height),p=Math.floor(r/S);if(i=S,n=m,u=Math.min(e,d*p),h=e%(d*p),l=h>0&&e>d*p,l){let P=Math.min(Math.ceil(Math.sqrt(h*(s.width/s.height)/(r/t))),o),k=t/P,I=k*(s.width/s.height);a=k,c=I}return{tilesInFirstPage:u,defaultWidth:i,defaultHeight:n,lastPageWidth:c,lastPageHeight:a,isLastPageDifferentFromFirstPage:l}};function _({count:r,parentWidth:t,parentHeight:e,maxTileCount:o,maxRowCount:s,maxColCount:i,aspectRatio:n}){let c=0,a=0,l=0,u=0,h=!1,d=0;if(r===0)return{tilesInFirstPage:d,defaultWidth:c,defaultHeight:a,lastPageWidth:l,lastPageHeight:u,isLastPageDifferentFromFirstPage:h};if(o)({tilesInFirstPage:d,defaultWidth:c,defaultHeight:a,lastPageWidth:l,lastPageHeight:u,isLastPageDifferentFromFirstPage:h}=Je({parentWidth:t,parentHeight:e,count:r,maxCount:o,aspectRatio:n}));else if(s)({tilesInFirstPage:d,defaultWidth:c,defaultHeight:a,lastPageWidth:l,lastPageHeight:u,isLastPageDifferentFromFirstPage:h}=Ke({parentWidth:t,parentHeight:e,count:r,maxCount:s,aspectRatio:n}));else if(i)({tilesInFirstPage:d,defaultWidth:c,defaultHeight:a,lastPageWidth:l,lastPageHeight:u,isLastPageDifferentFromFirstPage:h}=je({parentWidth:t,parentHeight:e,count:r,maxCount:i,aspectRatio:n}));else{let{width:m,height:S}=C(t,e,r,n.width,n.height);c=m,a=S,d=r}return{tilesInFirstPage:d,defaultWidth:c,defaultHeight:a,lastPageWidth:l,lastPageHeight:u,isLastPageDifferentFromFirstPage:h}}var $=(r,t,e,o=!0)=>{if(!r||!t||!e)return[];let s=[];for(let i of r)if(i.videoTrack===void 0&&i.audioTrack&&t[i.audioTrack])s.push({peer:i});else if(i.videoTrack&&t[i.videoTrack])s.push({track:t[i.videoTrack],peer:i});else if(e(i)&&i.auxiliaryTracks.length>0){let n=i.auxiliaryTracks.find(c=>{let a=t[c];return(a==null?void 0:a.type)==="video"&&(a==null?void 0:a.source)==="screen"});n&&s.push({track:t[n],peer:i})}else o||s.push({peer:i});return s};import{useResizeDetector as Xe}from"react-resize-detector";var Ye={aspectRatio:{width:1,height:1}},Ze=({maxTileCount:r,maxColCount:t,maxRowCount:e,showScreenFn:o=()=>!1,peers:s,overflow:i="scroll-x",aspectRatio:n=Ye.aspectRatio,filterNonPublishingPeers:c=!0})=>{let{width:a=0,height:l=0,ref:u}=Xe(),d=D().getState(Qe),m=$(s,d,o,c),S=O(()=>n||{width:Z(m)||1,height:1},[n,m]),p=m.length,{tilesInFirstPage:P,defaultWidth:k,defaultHeight:I,lastPageWidth:N,lastPageHeight:W,isLastPageDifferentFromFirstPage:F}=O(()=>_({count:p,parentWidth:Math.floor(a),parentHeight:Math.floor(l),maxTileCount:r,maxRowCount:e,maxColCount:t,aspectRatio:S}),[p,a,l,r,e,t,S]);return{pagesWithTiles:O(()=>Y({elements:m,tilesInFirstPage:P,onlyOnePage:i==="hidden",isLastPageDifferentFromFirstPage:F,defaultWidth:k,defaultHeight:I,lastPageWidth:N,lastPageHeight:W}),[m,P,i,F,k,I,N,W]),ref:u}};import{useEffect as _e}from"react";import{selectTrackAudioByID as $e}from"@100mslive/hms-video-store";function et({trackId:r,getStyle:t,ref:e}){let o=D();_e(()=>o.subscribe(s=>{if(!e.current)return;let i=t(s);for(let n in i)e.current.style[n]=i[n]},$e(r)),[r])}export*from"@100mslive/hms-video-store";export{le as HMSRoomProvider,he as throwErrorHandler,ke as useAVToggle,qe as useAudio,et as useAudioLevelStyles,Ie as useDevices,M as useHMSActions,de as useHMSNotifications,ue as useHMSStatsStore,f as useHMSStore,D as useHMSVanillaStore,Me as usePreview,ze as useScreenShare,Ve as useVideo,Ze as useVideoList};
+var ie=Object.defineProperty,se=Object.defineProperties;var ne=Object.getOwnPropertyDescriptors;var F=Object.getOwnPropertySymbols;var ae=Object.prototype.hasOwnProperty,ce=Object.prototype.propertyIsEnumerable;var B=(i,e,t)=>e in i?ie(i,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):i[e]=t,I=(i,e)=>{for(var t in e||(e={}))ae.call(e,t)&&B(i,t,e[t]);if(F)for(var t of F(e))ce.call(e,t)&&B(i,t,e[t]);return i},E=(i,e)=>se(i,ne(e));var g=(i,e,t)=>new Promise((o,r)=>{var s=l=>{try{a(t.next(l))}catch(c){r(c)}},n=l=>{try{a(t.throw(l))}catch(c){r(c)}},a=l=>l.done?o(l.value):Promise.resolve(l.value).then(s,n);a((t=t.apply(i,e)).next())});import le,{createContext as ue,useContext as D,useEffect as J,useState as me}from"react";import{HMSReactiveStore as de}from"@100mslive/hms-video-store";import A from"zustand";import{useContext as z}from"react";import q from"zustand/shallow";var H;(function(n){n[n.VERBOSE=0]="VERBOSE",n[n.DEBUG=1]="DEBUG",n[n.INFO=2]="INFO",n[n.WARN=3]="WARN",n[n.ERROR=4]="ERROR",n[n.NONE=5]="NONE"})(H||(H={}));var b=class{static v(e,...t){this.log(0,e,...t)}static d(e,...t){this.log(1,e,...t)}static i(e,...t){this.log(2,e,...t)}static w(e,...t){this.log(3,e,...t)}static e(e,...t){this.log(4,e,...t)}static log(e,t,...o){if(!(this.level.valueOf()>e.valueOf()))switch(e){case 0:{console.log("HMSui-components: ",t,...o);break}case 1:{console.debug("HMSui-components: ",t,...o);break}case 2:{console.info("HMSui-components: ",t,...o);break}case 3:{console.warn("HMSui-components: ",t,...o);break}case 4:{console.error("HMSui-components: ",t,...o);break}}}};b.level=0;var x="It seems like you forgot to add your component within a top level HMSRoomProvider, please refer to 100ms react docs(https://docs.100ms.live/javascript/v2/features/integration#react-hooks) to check on the required steps for using this hook.";function G(i){return(t,o=q)=>{t||b.w("fetching full store without passing any selector may have a heavy performance impact on your website.");let r=z(i);if(!r)throw new Error(x);return r.store(t,o)}}function j(i){return(t,o=q)=>{t||b.w("fetching full store without passing any selector may have a heavy performance impact on your website.");let r=z(i);if(!r)throw new Error(x);let s=r.statsStore;return s==null?void 0:s(t,o)}}var U=typeof window!="undefined";var y=ue(null),k,Se=({children:i,actions:e,store:t,notifications:o,stats:r,isHMSStatsOn:s=!1})=>{if(!k){let n=()=>{throw new Error("modifying store is not allowed")};if(e&&t)k={actions:e,store:A(E(I({},t),{setState:n,destroy:n}))},o&&(k.notifications=o),r&&(k.statsStore=A({getState:r.getState,subscribe:r.subscribe,setState:n,destroy:n}));else{let a=new de;if(k={actions:a.getActions(),store:A(E(I({},a.getStore()),{setState:n,destroy:n})),notifications:a.getNotifications()},s){let l=a.getStats();k.statsStore=A({getState:l.getState,subscribe:l.subscribe,setState:n,destroy:n})}}}return J(()=>{U&&(window.addEventListener("beforeunload",()=>k.actions.leave()),window.addEventListener("onunload",()=>k.actions.leave()))},[]),le.createElement(y.Provider,{value:k},i)},m=G(y),he=j(y),V=()=>{let i=D(y);if(!i)throw new Error(x);return i.store},M=()=>{let i=D(y);if(!i)throw new Error(x);return i.actions},fe=()=>{let i=D(y),[e,t]=me(null);if(!i)throw new Error(x);return J(()=>i.notifications?i.notifications.onNotification(r=>t(r)):void 0,[i.notifications]),e};import{HMSRoomState as K,selectIsConnectedToRoom as He,selectRoomState as Me}from"@100mslive/hms-video-store";import{useCallback as Q,useMemo as ve}from"react";var ge="react-sdk",R=(i,e)=>b.e(ge,e,i),pe=i=>{throw i};var be=({name:i="",token:e,metadata:t,handleError:o=R,initEndpoint:r,initialSettings:s})=>{let n=M(),a=m(Me),l=m(He)||!1,c=a===K.Preview,S=ve(()=>({userName:i,authToken:e,metaData:t,rememberDeviceSelection:!0,settings:s,initEndpoint:r}),[i,e,t,r,s]),d=Q(()=>{(()=>g(void 0,null,function*(){if(!!e){a!==K.Disconnected&&(yield n.leave());try{yield n.preview(S)}catch(h){o(h,"preview")}}}))()},[n,o,e,a,S]),u=Q(()=>{if(!!e)try{n.join(S)}catch(h){o(h,"join")}},[n,S,o,e]);return{enableJoin:c,join:u,isConnected:l,preview:d}};import{selectIsAllowedToPublish as Pe,selectIsLocalAudioEnabled as we,selectIsLocalVideoEnabled as ke}from"@100mslive/hms-video-store";import{useCallback as X}from"react";var Re=(i=R)=>{let e=m(we),t=m(ke),o=m(Pe),r=M(),s=X(()=>g(void 0,null,function*(){try{yield r.setLocalAudioEnabled(!e)}catch(a){i(a,"toggleAudio")}}),[r,e,i]),n=X(()=>g(void 0,null,function*(){try{yield r.setLocalVideoEnabled(!t)}catch(a){i(a,"toggleVideo")}}),[r,t,i]);return{isLocalAudioEnabled:e,isLocalVideoEnabled:t,toggleAudio:(o==null?void 0:o.audio)?s:void 0,toggleVideo:(o==null?void 0:o.video)?n:void 0}};import{selectTrackByID as Te}from"@100mslive/hms-video-store";import{useCallback as xe,useEffect as Y,useRef as ye}from"react";import{useInView as Ie}from"react-intersection-observer";var Ee=i=>{let e=M(),t=ye(null),o=m(Te(i)),{ref:r,inView:s}=Ie({threshold:.5}),n=xe(a=>{t.current=a,r(a)},[r]);return Y(()=>{(()=>g(void 0,null,function*(){t.current&&(o==null?void 0:o.id)&&(s?o.enabled?yield e.attachVideo(o.id,t.current):yield e.detachVideo(o.id,t.current):yield e.detachVideo(o.id,t.current))}))()},[e,s,t,o==null?void 0:o.id,o==null?void 0:o.enabled,o==null?void 0:o.deviceID,o==null?void 0:o.plugins]),Y(()=>()=>{(()=>g(void 0,null,function*(){if(t.current&&o)try{yield e.detachVideo(o.id,t.current)}catch(a){b.w("detach video error for track",o.id,a)}}))()},[]),n};import{selectIsLocalScreenShared as Ve,selectPeerScreenSharing as Ae,selectScreenSharesByPeerId as De}from"@100mslive/hms-video-store";import{useCallback as Ce}from"react";var Oe=i=>console.log("Error: ",i),Le=(i=Oe)=>{var n,a;let e=M(),t=m(Ve),o=m(Ae),r=m(De(o==null?void 0:o.id)),s=Ce(()=>g(void 0,null,function*(){try{yield e.setScreenShareEnabled(!t)}catch(l){i(l)}}),[e,t,i]);return{amIScreenSharing:t,screenSharingPeerId:o==null?void 0:o.id,screenShareVideoTrackId:(n=r==null?void 0:r.video)==null?void 0:n.id,screenShareAudioTrackId:(a=r==null?void 0:r.audio)==null?void 0:a.id,toggleScreenShare:s}};import{selectAudioTrackVolume as Ne,selectPermissions as We,selectTrackByID as Z}from"@100mslive/hms-video-store";import{useCallback as C}from"react";var _=(i,e,t)=>g(void 0,null,function*(){if(e)try{yield i.setRemoteTrackEnabled(e.id,!e.enabled)}catch(o){t(o,"remoteToggle")}}),Fe=(i,e,t=R)=>{let o=M(),r=m(Z(i)),s=m(Z(e)),n=m(Ne(r==null?void 0:r.id)),a=m(We),l=(s==null?void 0:s.enabled)?a==null?void 0:a.mute:a==null?void 0:a.unmute,c=(r==null?void 0:r.enabled)?a==null?void 0:a.mute:a==null?void 0:a.unmute,S=C(()=>g(void 0,null,function*(){yield _(o,r,t)}),[o,r,t]),d=C(()=>g(void 0,null,function*(){yield _(o,s,t)}),[o,t,s]),u=C(h=>{r&&o.setVolume(h,r.id)},[o,r]);return{isAudioEnabled:!!(r==null?void 0:r.enabled),isVideoEnabled:!!(s==null?void 0:s.enabled),volume:n,toggleAudio:r&&c?S:void 0,toggleVideo:(s==null?void 0:s.source)==="regular"&&l?d:void 0,setVolume:r?u:void 0}};import{selectTracksMap as Ue}from"@100mslive/hms-video-store";import{useMemo as L}from"react";var Be=(i,e,t)=>i.reduce((o,r,s)=>{let n=Math.floor(s/e);return n>0&&t||(o[n]||(o[n]=[]),o[n].push(r)),o},[]),$=({elements:i,tilesInFirstPage:e,onlyOnePage:t,isLastPageDifferentFromFirstPage:o,defaultWidth:r,defaultHeight:s,lastPageWidth:n,lastPageHeight:a})=>{let l=Be(i,e,t);return l.map((c,S)=>c.map(d=>{let u=S===l.length-1,h=o&&u?n:r,f=o&&u?a:s;return E(I({},d),{height:f,width:h})}))};function ze(i){if(i.length===0)return null;let e={},t=i[0],o=1;for(let r=0;r<i.length;r++){let s=i[r];e[s]===null?e[s]=1:e[s]++,e[s]>o&&(t=s,o=e[s])}return t}var ee=i=>ze(i.filter(e=>{var t,o;return((t=e.track)==null?void 0:t.width)&&((o=e.track)==null?void 0:o.height)}).map(e=>{var r,s;let t=(r=e.track)==null?void 0:r.width,o=(s=e.track)==null?void 0:s.height;return(t||1)/(o||1)})),O=(i,e,t,o,r)=>{if(i<0||e<0)throw new Error("Container must have a non-negative area");if(t<1||!Number.isInteger(t))throw new Error("Number of shapes to place must be a positive integer");let s=o&&r&&o/r;if(s!==void 0&&isNaN(s))throw new Error("Aspect ratio must be a number");let n={area:0,cols:0,rows:0,width:0,height:0},a=t,l=-1;if(s!==void 0)for(let c=a;c>0;c+=l){let S=Math.ceil(t/c),d=i/(c*s),u=e/S,h,f;d<=u?(h=i/c,f=h/s):(f=e/S,h=f*s);let p=h*f;p>n.area&&(n={area:p,width:h,height:f,rows:S,cols:c})}return n},qe=({parentWidth:i,parentHeight:e,count:t,maxCount:o,aspectRatio:r})=>{let s=0,n=0,a=0,l=0,c=!1,S=0,d=0,u=Math.min(Math.ceil(Math.sqrt(t*(i/e)/(r.width/r.height))),o),h=i/u,f=h/(r.width/r.height);f>e&&(f=e,h=f/(r.height/r.width));let p=Math.floor(e/f);if(n=f,s=h,S=Math.min(t,p*u),d=t%(p*u),c=d>0&&t>p*u,c){let T=Math.min(Math.ceil(Math.sqrt(d*(i/e)/(r.width/r.height))),o),P=i/T,w=P/(r.width/r.height);w>e&&(w=e,P=w/(r.height/r.width)),l=w,a=P}return{tilesInFirstPage:S,defaultWidth:s,defaultHeight:n,lastPageWidth:a,lastPageHeight:l,isLastPageDifferentFromFirstPage:c}},Ge=({parentWidth:i,parentHeight:e,count:t,maxCount:o,aspectRatio:r})=>{let s=0,n=0,a=0,l=0,c=!1,S=0,d=0,{width:u,height:h}=O(i,e,Math.min(t,o),r.width,r.height);if(s=u,n=h,S=Math.min(t,o),d=t%o,c=d>0&&t>o,c){let{width:f,height:p}=O(i,e,d,r.width,r.height);a=f,l=p}return{tilesInFirstPage:S,defaultWidth:s,defaultHeight:n,lastPageWidth:a,lastPageHeight:l,isLastPageDifferentFromFirstPage:c}},je=({parentWidth:i,parentHeight:e,count:t,maxCount:o,aspectRatio:r})=>{let s=0,n=0,a=0,l=0,c=!1,S=0,d=0,u=Math.min(Math.ceil(Math.sqrt(t*(r.width/r.height)/(i/e))),o),h=e/u,f=h*(r.width/r.height),p=Math.floor(i/f);if(s=f,n=h,S=Math.min(t,u*p),d=t%(u*p),c=d>0&&t>u*p,c){let T=Math.min(Math.ceil(Math.sqrt(d*(r.width/r.height)/(i/e))),o),P=e/T,w=P*(r.width/r.height);l=P,a=w}return{tilesInFirstPage:S,defaultWidth:s,defaultHeight:n,lastPageWidth:a,lastPageHeight:l,isLastPageDifferentFromFirstPage:c}};function te({count:i,parentWidth:e,parentHeight:t,maxTileCount:o,maxRowCount:r,maxColCount:s,aspectRatio:n}){let a=0,l=0,c=0,S=0,d=!1,u=0;if(i===0)return{tilesInFirstPage:u,defaultWidth:a,defaultHeight:l,lastPageWidth:c,lastPageHeight:S,isLastPageDifferentFromFirstPage:d};if(o)({tilesInFirstPage:u,defaultWidth:a,defaultHeight:l,lastPageWidth:c,lastPageHeight:S,isLastPageDifferentFromFirstPage:d}=Ge({parentWidth:e,parentHeight:t,count:i,maxCount:o,aspectRatio:n}));else if(r)({tilesInFirstPage:u,defaultWidth:a,defaultHeight:l,lastPageWidth:c,lastPageHeight:S,isLastPageDifferentFromFirstPage:d}=je({parentWidth:e,parentHeight:t,count:i,maxCount:r,aspectRatio:n}));else if(s)({tilesInFirstPage:u,defaultWidth:a,defaultHeight:l,lastPageWidth:c,lastPageHeight:S,isLastPageDifferentFromFirstPage:d}=qe({parentWidth:e,parentHeight:t,count:i,maxCount:s,aspectRatio:n}));else{let{width:h,height:f}=O(e,t,i,n.width,n.height);a=h,l=f,u=i}return{tilesInFirstPage:u,defaultWidth:a,defaultHeight:l,lastPageWidth:c,lastPageHeight:S,isLastPageDifferentFromFirstPage:d}}var oe=(i,e,t,o=!0)=>{if(!i||!e||!t)return[];let r=[];for(let s of i)if(s.videoTrack===void 0&&s.audioTrack&&e[s.audioTrack]?r.push({peer:s}):s.videoTrack&&e[s.videoTrack]?r.push({track:e[s.videoTrack],peer:s}):o||r.push({peer:s}),t(s)&&s.auxiliaryTracks.length>0){let a=s.auxiliaryTracks.find(l=>{let c=e[l];return(c==null?void 0:c.type)==="video"&&(c==null?void 0:c.source)==="screen"});a&&r.push({track:e[a],peer:s})}return r};import{useResizeDetector as Je}from"react-resize-detector";var Ke={aspectRatio:{width:1,height:1}},Qe=({peers:i,maxTileCount:e,maxColCount:t,maxRowCount:o,includeScreenShareForPeer:r=()=>!1,aspectRatio:s=Ke.aspectRatio,filterNonPublishingPeers:n=!0})=>{let{width:a=0,height:l=0,ref:c}=Je(),d=V().getState(Ue),u=oe(i,d,r,n),h=L(()=>s||{width:ee(u)||1,height:1},[s,u]),f=u.length,{tilesInFirstPage:p,defaultWidth:T,defaultHeight:P,lastPageWidth:w,lastPageHeight:N,isLastPageDifferentFromFirstPage:W}=L(()=>te({count:f,parentWidth:Math.floor(a),parentHeight:Math.floor(l),maxTileCount:e,maxRowCount:o,maxColCount:t,aspectRatio:h}),[f,a,l,e,o,t,h]);return{pagesWithTiles:L(()=>$({elements:u,tilesInFirstPage:p,onlyOnePage:!1,isLastPageDifferentFromFirstPage:W,defaultWidth:T,defaultHeight:P,lastPageWidth:w,lastPageHeight:N}),[u,p,W,T,P,w,N]),ref:c}};import{useEffect as Xe}from"react";import{selectTrackAudioByID as Ye}from"@100mslive/hms-video-store";function Ze({trackId:i,getStyle:e,ref:t}){let o=V();Xe(()=>o.subscribe(r=>{if(!t.current)return;let s=e(r);for(let n in s)t.current.style[n]=s[n]},Ye(i)),[e,t,o,i])}import{selectDevices as _e,selectIsAllowedToPublish as $e,selectLocalMediaSettings as et}from"@100mslive/hms-video-store";import{useCallback as tt}from"react";var v;(function(o){o.videoInput="videoInput",o.audioInput="audioInput",o.audioOutput="audioOutput"})(v||(v={}));var ot=(i=R)=>{let e=M(),t=m(_e),o=m(et),r=m($e),s={[v.audioOutput]:o.audioOutputDeviceId},n={[v.audioOutput]:t.audioOutput};r.video&&(n[v.videoInput]=t.videoInput,s[v.videoInput]=o.videoInputDeviceId),r.audio&&(n[v.audioInput]=t.audioInput,s[v.audioInput]=o.audioInputDeviceId);let a=tt(S=>g(void 0,[S],function*({deviceType:l,deviceId:c}){try{switch(l){case v.audioInput:yield e.setAudioSettings({deviceId:c});break;case v.videoInput:yield e.setVideoSettings({deviceId:c});break;case v.audioOutput:e.setAudioOutputDevice(c);break}}catch(d){i(d,"updateDevices")}}),[i,e]);return{allDevices:n,selectedDeviceIDs:s,updateDevice:a}};import{useMemo as rt}from"react";import{selectIsConnectedToRoom as it,selectPeerCount as st,selectPeers as nt,selectRemotePeers as at}from"@100mslive/hms-video-store";var re=i=>!i||!Array.isArray(i)||i.length===0?{}:i.reduce((e,t)=>(t.roleName&&(e[t.roleName]||(e[t.roleName]=[]),e[t.roleName].push(t)),e),{});var ct=()=>{let i=m(it),e=m(i?nt:at),t=m(st),o=rt(()=>re(e),[e]);return{roles:Object.keys(o),participantsByRoles:o,peerCount:t,isConnected:i}};import{selectHLSState as lt,selectRecordingState as ut,selectRTMPState as mt}from"@100mslive/hms-video-store";var dt=()=>{let i=m(ut),e=m(mt),t=m(lt),o=i.server.running,r=i.browser.running,s=i.hls.running,n=t.running||e.running,a=o||r||s;return{isServerRecordingOn:o,isBrowserRecordingOn:r,isHLSRecordingOn:s,isStreamingOn:n,isHLSRunning:t.running,isRTMPRunning:e.running,isRecordingOn:a}};export*from"@100mslive/hms-video-store";export{v as DeviceType,Se as HMSRoomProvider,pe as throwErrorHandler,Re as useAVToggle,Ze as useAudioLevelStyles,ot as useDevices,M as useHMSActions,fe as useHMSNotifications,he as useHMSStatsStore,m as useHMSStore,V as useHMSVanillaStore,ct as useParticipantList,be as usePreviewJoin,dt as useRecordingStreaming,Fe as useRemoteAVToggle,Le as useScreenShare,Ee as useVideo,Qe as useVideoList};

package/dist/primitives/HmsRoomProvider.d.ts

@@ -1,9 +1,5 @@
 import React from 'react';
-import { HMSStore, HMSActions, HMSNotification, HMSNotifications, HMSStatsStore, IStoreReadOnly, HMSStats, HMSStoreWrapper } from '@100mslive/hms-video-store';
-import { EqualityChecker, StateSelector } from 'zustand';
-export interface IHMSReactStore<S extends HMSStore | HMSStatsStore> extends IStoreReadOnly<S> {
-    <U>(selector: StateSelector<S, U>, equalityFn?: EqualityChecker<U>): U;
-}
+import { HMSStore, HMSActions, HMSNotification, HMSNotifications, HMSStatsStore, HMSStats, HMSStoreWrapper } from '@100mslive/hms-video-store';
 export interface HMSRoomProviderProps {
     actions?: HMSActions;
     store?: HMSStoreWrapper;
@@ -25,8 +21,8 @@ export declare const HMSRoomProvider: React.FC<HMSRoomProviderProps>;
  * `useHMSStore` is a read only hook which can be passed a selector to read data.
  * The hook can only be used in a component if HMSRoomProvider is present in its ancestors.
  */
-export declare const useHMSStore: <StateSlice>(selector: StateSelector<HMSStore, StateSlice>, equalityFn?: EqualityChecker<StateSlice>) => StateSlice;
-export declare const useHMSStatsStore: <StateSlice>(selector: StateSelector<HMSStatsStore, StateSlice>, equalityFn?: EqualityChecker<StateSlice>) => StateSlice | undefined;
+export declare const useHMSStore: <StateSlice>(selector: import("zustand").StateSelector<HMSStore, StateSlice>, equalityFn?: import("zustand").EqualityChecker<StateSlice>) => StateSlice;
+export declare const useHMSStatsStore: <StateSlice>(selector: import("zustand").StateSelector<HMSStatsStore, StateSlice>, equalityFn?: import("zustand").EqualityChecker<StateSlice>) => StateSlice | undefined;
 /**
  * `useHMSVanillaStore` is a read only hook which returns the vanilla HMSStore.
  * Usage:
@@ -39,7 +35,7 @@ export declare const useHMSStatsStore: <StateSlice>(selector: StateSelector<HMSS
  * This is used in rare cases where the store needs to be accessed outside a React component.
  * For almost every case, `useHMSStore` would get the job done.
  */
-export declare const useHMSVanillaStore: () => import("./types").IHMSReactStore<HMSStore>;
+export declare const useHMSVanillaStore: () => import("./store").IHMSReactStore<HMSStore>;
 export declare const useHMSActions: () => HMSActions;
 /**
  * `useHMSNotifications` is a read only hook which gives the latest notification(HMSNotification) received.

package/dist/primitives/store.d.ts

@@ -1,7 +1,9 @@
 import { EqualityChecker, StateSelector } from 'zustand';
 import React from 'react';
-import { HMSActions, HMSStore, HMSNotifications, HMSStatsStore } from '@100mslive/hms-video-store';
-import { IHMSReactStore } from './types';
+import { HMSActions, HMSStore, HMSNotifications, HMSStatsStore, IStoreReadOnly } from '@100mslive/hms-video-store';
+export interface IHMSReactStore<S extends HMSStore | HMSStatsStore> extends IStoreReadOnly<S> {
+    <U>(selector: StateSelector<S, U>, equalityFn?: EqualityChecker<U>): U;
+}
 export declare const hooksErrorMessage = "It seems like you forgot to add your component within a top level HMSRoomProvider, please refer to 100ms react docs(https://docs.100ms.live/javascript/v2/features/integration#react-hooks) to check on the required steps for using this hook.";
 export interface HMSContextProviderProps {
     actions: HMSActions;

package/dist/utils/groupBy.d.ts

@@ -1,2 +1,15 @@
 import { HMSPeer } from '@100mslive/hms-video-store';
-export declare const groupBy: (peers: HMSPeer[]) => [string, HMSPeer[]][];
+/**
+ * Give array like [
+ * { name: 'peer1', id: 1, roleName: 'role1' },
+ * { name: 'peer2', id: 2, roleName: 'role2' }
+ *]
+ * the output will be
+ * {
+ * 'role1': [{'name': 'peer1', id: 1, roleName: 'role1'}],
+ * 'role2': [{ name: 'peer2', id: 2, roleName: 'role2' }]
+ * }
+ * @param {HMSPeer[]} peers
+ * @returns
+ */
+export declare const groupByRoles: (peers: HMSPeer[]) => Record<string, HMSPeer[]>;

package/dist/utils/layout.d.ts

@@ -105,5 +105,12 @@ export declare function calculateLayoutSizes({ count, parentWidth, parentHeight,
     lastPageHeight: number;
     isLastPageDifferentFromFirstPage: boolean;
 };
-export declare const getVideoTracksFromPeers: (peers: HMSPeer[], tracks: Record<HMSTrackID, HMSTrack>, showScreenFn: (peer: HMSPeer) => boolean, filterNonPublishingPeers?: boolean) => TrackWithPeer[];
+/**
+ * given list of peers and all tracks in the room, get a list of tile objects to show in the UI
+ * @param peers
+ * @param tracks
+ * @param includeScreenShareForPeer - fn will be called to check whether to include screenShare for the peer in returned tiles
+ * @param filterNonPublishingPeers - by default a peer with no tracks won't be counted towards final tiles
+ */
+export declare const getVideoTracksFromPeers: (peers: HMSPeer[], tracks: Record<HMSTrackID, HMSTrack>, includeScreenShareForPeer: (peer: HMSPeer) => boolean, filterNonPublishingPeers?: boolean) => TrackWithPeer[];
 export {};

package/package.json

@@ -4,7 +4,7 @@
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
   "typings": "dist/index.d.ts",
-  "version": "0.0.5",
+  "version": "0.0.7-alpha.1",
   "author": "100ms",
   "license": "MIT",
   "files": [
@@ -32,10 +32,10 @@
     "react": "^17.0.1"
   },
   "dependencies": {
-    "@100mslive/hms-video-store": "0.2.88",
+    "@100mslive/hms-video-store": "0.2.90-alpha.1",
     "react-intersection-observer": "^8.33.1",
     "react-resize-detector": "^7.0.0",
     "zustand": "^3.6.2"
   },
-  "gitHead": "886bb0d20bcc003b92297b489f3954fadc3b5539"
+  "gitHead": "bbffdb7ed958ffc689ca31418fdae1ab8f50e1e3"
 }

package/dist/hooks/useAudio.d.ts

@@ -1,9 +0,0 @@
-import { HMSTrackID } from '@100mslive/hms-video-store';
-/**
- * This hook can be used to implement an audio level changer on tile level.
- * @param trackId of the track whose volume is needed
- */
-export declare const useAudio: (trackId: HMSTrackID) => {
-    volume: number | undefined;
-    setVolume: (volume: number) => void;
-};