@100mslive/react-sdk 0.4.3 → 0.4.5-alpha.0

package/dist/hooks/useScreenShare.d.ts

@@ -0,0 +1,40 @@
+import { hooksErrHandler } from '../hooks/types';
+import { HMSPeerID, HMSTrackID } from '@100mslive/hms-video-store';
+export interface useScreenShareResult {
+    /**
+     * true if the local user is screensharing, false otherwise
+     */
+    amIScreenSharing: boolean;
+    /**
+     * toggle screenshare for the local user, will only be present if the user has the permission to toggle
+     */
+    toggleScreenShare?: () => void;
+    /**
+     * the id of the peer who is currently screensharing, will only be present if there is a screenshare in the room.
+     * In case of multiple screenshares, the behaviour of which one is picked is not defined.
+     */
+    screenSharingPeerId?: HMSPeerID;
+    /**
+     * the name of the peer who is currently screensharing. Will be undefined if no one is sharing the screen.
+     * In case of multiple screenshares, the behavior of which one is picked is not defined.
+     */
+    screenSharingPeerName?: string;
+    /**
+     * screenShare audio track id, will only be present if there is a screenshare with video track
+     */
+    screenShareVideoTrackId?: HMSTrackID;
+    /**
+     * screenShare audio track id, will only be present if there is a screenshare with audio track
+     */
+    screenShareAudioTrackId?: HMSTrackID;
+}
+/**
+ * This hook can be used to implement a screenshare toggle button as well as know about the screenshare in the room.
+ * This works best if your application only needs to show one screenshare in large view at a time with other screenshares
+ * similar to normal user tiles.
+ * For any complicated requirement with multiple screenshares it's best to use the store directly.
+ * For viewing the screenshare this hook is best used in combination with useVideo.
+ * For implementing control bar for local peer, this is used based with useAVToggle.
+ * @param handleError to handle any errors during screenshare toggle
+ */
+export declare const useScreenShare: (handleError?: hooksErrHandler) => useScreenShareResult;

package/dist/hooks/useScreenShare.js

@@ -1,2 +1,2 @@
-import{selectIsLocalScreenShared as e,selectPeerScreenSharing as r,selectScreenSharesByPeerId as o}from"@100mslive/hms-video-store";import{useHMSActions as i,useHMSStore as n}from"../primitives/HmsRoomProvider.js";import{useCallback as a}from"react";import{logErrorHandler as d}from"../utils/commons.js";const l=(l=d)=>{var m,t;const c=i(),s=n(e),v=n(r),S=n(o(null==v?void 0:v.id)),u=a((async(e=!1)=>{try{await c.setScreenShareEnabled(!s,e)}catch(e){l(e,"toggleScreenShare")}}),[c,s,l]);return{amIScreenSharing:s,screenSharingPeerId:null==v?void 0:v.id,screenSharingPeerName:null==v?void 0:v.name,screenShareVideoTrackId:null==(m=null==S?void 0:S.video)?void 0:m.id,screenShareAudioTrackId:null==(t=null==S?void 0:S.audio)?void 0:t.id,toggleScreenShare:u}};export{l as useScreenShare};
+import{__awaiter as e}from"../node_modules/tslib/tslib.es6.js";import{selectIsLocalScreenShared as o,selectPeerScreenSharing as r,selectScreenSharesByPeerId as i}from"@100mslive/hms-video-store";import{useHMSActions as d,useHMSStore as n}from"../primitives/HmsRoomProvider.js";import{useCallback as l}from"react";import{logErrorHandler as m}from"../utils/commons.js";const s=(s=m)=>{var t,a;const v=d(),c=n(o),u=n(r),S=n(i(null==u?void 0:u.id)),h=l(((o=!1)=>e(void 0,void 0,void 0,(function*(){try{yield v.setScreenShareEnabled(!c,o)}catch(e){s(e,"toggleScreenShare")}}))),[v,c,s]);return{amIScreenSharing:c,screenSharingPeerId:null==u?void 0:u.id,screenSharingPeerName:null==u?void 0:u.name,screenShareVideoTrackId:null===(t=null==S?void 0:S.video)||void 0===t?void 0:t.id,screenShareAudioTrackId:null===(a=null==S?void 0:S.audio)||void 0===a?void 0:a.id,toggleScreenShare:h}};export{s as useScreenShare};
 //# sourceMappingURL=useScreenShare.js.map

package/dist/hooks/useScreenShare.js.map

@@ -1 +1 @@
-{"version":3,"file":"useScreenShare.js","sources":["../../src/hooks/useScreenShare.ts"],"sourcesContent":["import { hooksErrHandler } from '../hooks/types';\nimport {\n  HMSPeerID,\n  HMSTrackID,\n  selectIsLocalScreenShared,\n  selectPeerScreenSharing,\n  selectScreenSharesByPeerId,\n} from '@100mslive/hms-video-store';\nimport { useHMSActions, useHMSStore } from '../primitives/HmsRoomProvider';\nimport { useCallback } from 'react';\nimport { logErrorHandler } from '../utils/commons';\n\nexport interface useScreenShareResult {\n  /**\n   * true if the local user is screensharing, false otherwise\n   */\n  amIScreenSharing: boolean;\n  /**\n   * toggle screenshare for the local user, will only be present if the user has the permission to toggle\n   */\n  toggleScreenShare?: () => void;\n  /**\n   * the id of the peer who is currently screensharing, will only be present if there is a screenshare in the room.\n   * In case of multiple screenshares, the behaviour of which one is picked is not defined.\n   */\n  screenSharingPeerId?: HMSPeerID;\n  /**\n   * the name of the peer who is currently screensharing. Will be undefined if no one is sharing the screen.\n   * In case of multiple screenshares, the behavior of which one is picked is not defined.\n   */\n  screenSharingPeerName?: string;\n  /**\n   * screenShare audio track id, will only be present if there is a screenshare with video track\n   */\n  screenShareVideoTrackId?: HMSTrackID;\n  /**\n   * screenShare audio track id, will only be present if there is a screenshare with audio track\n   */\n  screenShareAudioTrackId?: HMSTrackID;\n}\n\n/**\n * This hook can be used to implement a screenshare toggle button as well as know about the screenshare in the room.\n * This works best if your application only needs to show one screenshare in large view at a time with other screenshares\n * similar to normal user tiles.\n * For any complicated requirement with multiple screenshares it's best to use the store directly.\n * For viewing the screenshare this hook is best used in combination with useVideo.\n * For implementing control bar for local peer, this is used based with useAVToggle.\n * @param handleError to handle any errors during screenshare toggle\n */\nexport const useScreenShare = (handleError: hooksErrHandler = logErrorHandler): useScreenShareResult => {\n  const actions = useHMSActions();\n  const amIScreenSharing = useHMSStore(selectIsLocalScreenShared);\n  const screenSharePeer = useHMSStore(selectPeerScreenSharing);\n  const screenShare = useHMSStore(selectScreenSharesByPeerId(screenSharePeer?.id));\n\n  const toggleScreenShare = useCallback(\n    async (audioOnly = false) => {\n      try {\n        await actions.setScreenShareEnabled(!amIScreenSharing, audioOnly);\n      } catch (err) {\n        handleError(err as Error, 'toggleScreenShare');\n      }\n    },\n    [actions, amIScreenSharing, handleError],\n  );\n\n  return {\n    amIScreenSharing,\n    screenSharingPeerId: screenSharePeer?.id,\n    screenSharingPeerName: screenSharePeer?.name,\n    screenShareVideoTrackId: screenShare?.video?.id,\n    screenShareAudioTrackId: screenShare?.audio?.id,\n    toggleScreenShare,\n  };\n};\n"],"names":["useScreenShare","handleError","logErrorHandler","_a","_b","actions","useHMSActions","amIScreenSharing","useHMSStore","selectIsLocalScreenShared","screenSharePeer","selectPeerScreenSharing","screenShare","selectScreenSharesByPeerId","id","toggleScreenShare","useCallback","async","audioOnly","setScreenShareEnabled","err","screenSharingPeerId","screenSharingPeerName","name","screenShareVideoTrackId","video","screenShareAudioTrackId","audio"],"mappings":"gTAkDa,MAAAA,EAAiB,CAACC,EAA+BC,KAlD9D,IAAAC,EAAAC,EAmDE,MAAMC,EAAUC,IACVC,EAAmBC,EAAYC,GAC/BC,EAAkBF,EAAYG,GAC9BC,EAAcJ,EAAYK,EAA4C,MAAjBH,OAAiB,EAAAA,EAAAI,KAEtEC,EAAoBC,GACxBC,MAAOC,GAAY,KACb,UACIb,EAAQc,uBAAuBZ,EAAkBW,EAE7B,CAF6B,MAChDE,GACPnB,EAAYmB,EAAc,oBAAA,IAG9B,CAACf,EAASE,EAAkBN,IAGvB,MAAA,CACLM,mBACAc,oBAAsC,MAAjBX,OAAiB,EAAAA,EAAAI,GACtCQ,sBAAwC,MAAjBZ,OAAiB,EAAAA,EAAAa,KACxCC,wBAAyB,OAAarB,EAAA,MAAAS,OAAA,EAAAA,EAAAa,YAAO,EAAAtB,EAAAW,GAC7CY,wBAAyB,OAAatB,EAAA,MAAAQ,OAAA,EAAAA,EAAAe,YAAO,EAAAvB,EAAAU,GAC7CC,oBAAA"}
+{"version":3,"file":"useScreenShare.js","sources":["../../src/hooks/useScreenShare.ts"],"sourcesContent":[null],"names":["useScreenShare","handleError","logErrorHandler","actions","useHMSActions","amIScreenSharing","useHMSStore","selectIsLocalScreenShared","screenSharePeer","selectPeerScreenSharing","screenShare","selectScreenSharesByPeerId","id","toggleScreenShare","useCallback","audioOnly","__awaiter","setScreenShareEnabled","err","screenSharingPeerId","screenSharingPeerName","name","screenShareVideoTrackId","_a","video","screenShareAudioTrackId","_b","audio"],"mappings":"+WAkDa,MAAAA,EAAiB,CAACC,EAA+BC,aAC5D,MAAMC,EAAUC,IACVC,EAAmBC,EAAYC,GAC/BC,EAAkBF,EAAYG,GAC9BC,EAAcJ,EAAYK,EAA2BH,eAAAA,EAAiBI,KAEtEC,EAAoBC,GACxB,CAAOC,GAAY,IAASC,OAAA,OAAA,OAAA,GAAA,YACtB,UACIb,EAAQc,uBAAuBZ,EAAkBU,EAE7B,CAF6B,MAChDG,GACPjB,EAAYiB,EAAc,oBAAA,CAG9B,KAAA,CAACf,EAASE,EAAkBJ,IAGvB,MAAA,CACLI,mBACAc,oBAAqBX,aAAA,EAAAA,EAAiBI,GACtCQ,sBAAuBZ,aAAA,EAAAA,EAAiBa,KACxCC,wBAA2C,QAAlBC,EAAAb,eAAAA,EAAac,aAAK,IAAAD,OAAA,EAAAA,EAAEX,GAC7Ca,wBAA2C,QAAlBC,EAAAhB,eAAAA,EAAaiB,aAAK,IAAAD,OAAA,EAAAA,EAAEd,GAC7CC,oBAAA"}

package/dist/hooks/useVideo.d.ts

@@ -0,0 +1,27 @@
+import { HMSTrackID } from '@100mslive/hms-video-store';
+import React from 'react';
+export interface useVideoInput {
+    /**
+     * TrackId that is to be rendered
+     */
+    trackId?: HMSTrackID;
+    /**
+     * Boolean stating whether to override the internal behaviour.
+     * when attach is false, even if tile is inView or enabled, it won't be rendered
+     */
+    attach?: boolean;
+    /**
+     * Number between 0 and 1 indication when the element is considered inView
+     */
+    threshold?: number;
+}
+export interface useVideoOutput {
+    videoRef: React.RefCallback<HTMLVideoElement>;
+}
+/**
+ * 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.
+ * The hook will take care of attaching and detaching video, and will automatically detach when the video
+ * goes out of view to save on bandwidth.
+ */
+export declare const useVideo: ({ trackId, attach, threshold }: useVideoInput) => useVideoOutput;

package/dist/hooks/useVideo.js

@@ -1,2 +1,2 @@
-import{selectVideoTrackByID as r}from"@100mslive/hms-video-store";import{useRef as e,useCallback as i,useEffect as t}from"react";import{useInView as o}from"react-intersection-observer";import{useHMSActions as d,useHMSStore as c}from"../primitives/HmsRoomProvider.js";import n from"../utils/logger.js";const a=({trackId:a,attach:l,threshold:s=.5})=>{const m=d(),u=e(null),v=c(r(a)),{ref:h,inView:f}=o({threshold:s}),p=i((r=>{r&&(u.current=r,h(r))}),[h]);return t((()=>{(async()=>{u.current&&(null==v?void 0:v.id)&&(f&&v.enabled&&!1!==l?await m.attachVideo(v.id,u.current):await m.detachVideo(v.id,u.current))})()}),[m,f,u,null==v?void 0:v.id,null==v?void 0:v.enabled,null==v?void 0:v.deviceID,null==v?void 0:v.plugins,l]),t((()=>()=>{(async()=>{if(u.current&&v)try{await m.detachVideo(v.id,u.current)}catch(r){n.w("detach video error for track",v.id,r)}})()}),[]),{videoRef:p}};export{a as useVideo};
+import{__awaiter as i}from"../node_modules/tslib/tslib.es6.js";import{selectVideoTrackByID as o}from"@100mslive/hms-video-store";import{useRef as r,useCallback as e,useEffect as t}from"react";import{useInView as d}from"react-intersection-observer";import{useHMSActions as l,useHMSStore as n}from"../primitives/HmsRoomProvider.js";import c from"../utils/logger.js";const s=({trackId:s,attach:v,threshold:m=.5})=>{const u=l(),a=r(null),f=n(o(s)),{ref:h,inView:p}=d({threshold:m}),b=e((i=>{i&&(a.current=i,h(i))}),[h]);return t((()=>{i(void 0,void 0,void 0,(function*(){a.current&&(null==f?void 0:f.id)&&(p&&f.enabled&&!1!==v?yield u.attachVideo(f.id,a.current):yield u.detachVideo(f.id,a.current))}))}),[u,p,a,null==f?void 0:f.id,null==f?void 0:f.enabled,null==f?void 0:f.deviceID,null==f?void 0:f.plugins,v]),t((()=>()=>{i(void 0,void 0,void 0,(function*(){if(a.current&&f)try{yield u.detachVideo(f.id,a.current)}catch(i){c.w("detach video error for track",f.id,i)}}))}),[]),{videoRef:b}};export{s as useVideo};
 //# sourceMappingURL=useVideo.js.map

package/dist/hooks/useVideo.js.map

@@ -1 +1 @@
-{"version":3,"file":"useVideo.js","sources":["../../src/hooks/useVideo.ts"],"sourcesContent":["import { selectVideoTrackByID, HMSTrackID } from '@100mslive/hms-video-store';\nimport React, { useCallback, useEffect, useRef } from 'react';\nimport { useInView } from 'react-intersection-observer';\nimport { useHMSActions, useHMSStore } from '../primitives/HmsRoomProvider';\nimport HMSLogger from '../utils/logger';\n\nexport interface useVideoInput {\n  /**\n   * TrackId that is to be rendered\n   */\n  trackId?: HMSTrackID;\n  /**\n   * Boolean stating whether to override the internal behaviour.\n   * when attach is false, even if tile is inView or enabled, it won't be rendered\n   */\n  attach?: boolean;\n  /**\n   * Number between 0 and 1 indication when the element is considered inView\n   */\n  threshold?: number;\n}\n\nexport interface useVideoOutput {\n  videoRef: React.RefCallback<HTMLVideoElement>;\n}\n/**\n * This hooks can be used to implement a video tile component. Given a track id it will return a ref.\n * The returned ref can be used to set on a video element meant to display the video.\n * The hook will take care of attaching and detaching video, and will automatically detach when the video\n * goes out of view to save on bandwidth.\n */\nexport const useVideo = ({ trackId, attach, threshold = 0.5 }: useVideoInput): useVideoOutput => {\n  const actions = useHMSActions();\n  const videoRef = useRef<HTMLVideoElement | null>(null);\n  const track = useHMSStore(selectVideoTrackByID(trackId));\n\n  const { ref: inViewRef, inView } = useInView({ threshold });\n\n  const setRefs = useCallback(\n    (node: HTMLVideoElement) => {\n      if (node) {\n        videoRef.current = node;\n        inViewRef(node);\n      }\n    },\n    [inViewRef],\n  );\n\n  useEffect(() => {\n    (async () => {\n      if (videoRef.current && track?.id) {\n        if (inView && track.enabled && attach !== false) {\n          // attach when in view and enabled\n          await actions.attachVideo(track.id, videoRef.current);\n        } else {\n          // detach when not in view\n          await actions.detachVideo(track.id, videoRef.current);\n        }\n      }\n    })();\n  }, [actions, inView, videoRef, track?.id, track?.enabled, track?.deviceID, track?.plugins, attach]);\n\n  // detach on unmount\n  useEffect(() => {\n    return () => {\n      (async () => {\n        if (videoRef.current && track) {\n          try {\n            // detach on unmount\n            await actions.detachVideo(track.id, videoRef.current);\n          } catch (err) {\n            HMSLogger.w('detach video error for track', track.id, err);\n          }\n        }\n      })();\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  return { videoRef: setRefs };\n};\n"],"names":["useVideo","trackId","attach","threshold","actions","useHMSActions","videoRef","useRef","track","useHMSStore","selectVideoTrackByID","ref","inViewRef","inView","useInView","setRefs","useCallback","node","current","useEffect","id","enabled","attachVideo","detachVideo","deviceID","plugins","err","HMSLogger","w"],"mappings":"6SA+BO,MAAMA,EAAW,EAAGC,UAASC,SAAQC,YAAY,OACtD,MAAMC,EAAUC,IACVC,EAAWC,EAAgC,MAC3CC,EAAQC,EAAYC,EAAqBT,KAEvCU,IAAKC,EAAWC,OAAAA,GAAWC,EAAU,CAAEX,cAEzCY,EAAUC,GACbC,IACKA,IACFX,EAASY,QAAUD,EACTL,EAAAK,GAAA,GAGd,CAACL,IAkCH,OA/BAO,GAAU,KACP,WACKb,EAASY,UAAW,MAAAV,OAAA,EAAAA,EAAOY,MACzBP,GAAUL,EAAMa,UAAsB,IAAXnB,QAEvBE,EAAQkB,YAAYd,EAAMY,GAAId,EAASY,eAGvCd,EAAQmB,YAAYf,EAAMY,GAAId,EAASY,SAAA,EAPlD,EAOkD,GAIlD,CAACd,EAASS,EAAQP,EAAU,MAAAE,OAAA,EAAAA,EAAOY,GAAI,MAAAZ,OAAA,EAAAA,EAAOa,QAAS,MAAAb,OAAA,EAAAA,EAAOgB,SAAU,MAAAhB,OAAA,EAAAA,EAAOiB,QAASvB,IAG3FiB,GAAU,IACD,KACJ,WACK,GAAAb,EAASY,SAAWV,EAClB,UAEIJ,EAAQmB,YAAYf,EAAMY,GAAId,EAASY,QAES,CAFT,MACtCQ,GACGC,EAAAC,EAAE,+BAAgCpB,EAAMY,GAAIM,EAAA,CAAA,EAN3D,EAM2D,GAM7D,IAEI,CAAEpB,SAAUS,EAAA"}
+{"version":3,"file":"useVideo.js","sources":["../../src/hooks/useVideo.ts"],"sourcesContent":[null],"names":["useVideo","trackId","attach","threshold","actions","useHMSActions","videoRef","useRef","track","useHMSStore","selectVideoTrackByID","ref","inViewRef","inView","useInView","setRefs","useCallback","node","current","useEffect","__awaiter","id","enabled","attachVideo","detachVideo","deviceID","plugins","err","HMSLogger","w"],"mappings":"4WA+BO,MAAMA,EAAW,EAAGC,UAASC,SAAQC,YAAY,OACtD,MAAMC,EAAUC,IACVC,EAAWC,EAAgC,MAC3CC,EAAQC,EAAYC,EAAqBT,KAEvCU,IAAKC,EAAWC,OAAAA,GAAWC,EAAU,CAAEX,cAEzCY,EAAUC,GACbC,IACKA,IACFX,EAASY,QAAUD,EACTL,EAAAK,GAAA,GAGd,CAACL,IAkCH,OA/BAO,GAAU,KACIC,OAAA,OAAA,OAAA,GAAA,YACNd,EAASY,UAAgBV,aAAA,EAALA,EAAOa,MACzBR,GAAUL,EAAMc,UAAsB,IAAXpB,QAEvBE,EAAQmB,YAAYf,EAAMa,GAAIf,EAASY,eAGvCd,EAAQoB,YAAYhB,EAAMa,GAAIf,EAASY,SAAA,GAAA,GAIlD,CAACd,EAASS,EAAQP,EAAUE,aAAK,EAALA,EAAOa,GAAIb,aAAA,EAAAA,EAAOc,QAASd,eAAAA,EAAOiB,SAAUjB,aAAK,EAALA,EAAOkB,QAASxB,IAG3FiB,GAAU,IACD,KACOC,OAAA,OAAA,OAAA,GAAA,YACN,GAAAd,EAASY,SAAWV,EAClB,UAEIJ,EAAQoB,YAAYhB,EAAMa,GAAIf,EAASY,QAES,CAFT,MACtCS,GACGC,EAAAC,EAAE,+BAAgCrB,EAAMa,GAAIM,EAAA,CAAA,GAAA,GAM7D,IAEI,CAAErB,SAAUS,EAAA"}

package/dist/hooks/useVideoList.d.ts

@@ -0,0 +1,68 @@
+import { HMSPeer } from '@100mslive/hms-video-store';
+import React from 'react';
+import { TrackWithPeer } from '../utils/layout';
+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;
+    /**
+     * 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
+     */
+    includeScreenShareForPeer?: (peer: HMSPeer) => boolean;
+    /**
+     * Aspect ratio of VideoTiles, ideally this should be the same as the aspect ratio selected for
+     * capture in the dashboard template.
+     */
+    aspectRatio?: {
+        width: number;
+        height: number;
+    };
+    /**
+     * By default this will be true. Only publishing(audio/video/screen) peers in the passed in peer list
+     * will be filtered. If you wish to show all peers, pass false for this.
+     */
+    filterNonPublishingPeers?: boolean;
+    /**
+     * Height that would be subtracted from the parent's height to give the available height, use case: if your pagination is inside the parent component then offsetY would be the height of pagination
+     */
+    offsetY?: 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>;
+}
+/**
+ * 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, offsetY, }: useVideoListInput) => useVideoResult;

package/dist/hooks/useVideoList.js.map

@@ -1 +1 @@
-{"version":3,"file":"useVideoList.js","sources":["../../src/hooks/useVideoList.ts"],"sourcesContent":["import { HMSPeer, HMSTrack, HMSTrackID, selectTracksMap } from '@100mslive/hms-video-store';\nimport React, { useMemo } from 'react';\nimport {\n  calculateLayoutSizes,\n  chunkElements,\n  getModeAspectRatio,\n  getVideoTracksFromPeers,\n  TrackWithPeer,\n} from '../utils/layout';\nimport { useHMSVanillaStore } from '../primitives/HmsRoomProvider';\nimport { useResizeDetector } from 'react-resize-detector';\n\nexport interface useVideoListInput {\n  /**\n   * peers is the list of all peers you need to display\n   */\n  peers: HMSPeer[];\n  /**\n   * Max tiles in a  page. Overrides maxRowCount and maxColCount\n   */\n  maxTileCount?: number;\n  /**\n   * Max rows in a  page. Only applied if maxTileCount is not present\n   */\n  maxRowCount?: number;\n  /**\n   * Max columns in a  page. Only applied if maxTileCount and maxRowCount are not present\n   */\n  maxColCount?: number;\n  /**\n   * A function which tells whether to show the screenShare for a peer who is screensharing. A peer is passed\n   * and a boolean value is expected.\n   * This can be useful if there are multiple screenShares in the room where you may want to show the main one in the\n   * center view and others in video list along side other tiles. No screenShare is included by default.\n   * e.g. includeScreenShare = (peer) => return peer.id !== mainScreenSharingPeer.id\n   */\n  includeScreenShareForPeer?: (peer: HMSPeer) => boolean;\n  /**\n   * Aspect ratio of VideoTiles, ideally this should be the same as the aspect ratio selected for\n   * capture in the dashboard template.\n   */\n  aspectRatio?: { width: number; height: number };\n  /**\n   * By default this will be true. Only publishing(audio/video/screen) peers in the passed in peer list\n   * will be filtered. If you wish to show all peers, pass false for this.\n   */\n  filterNonPublishingPeers?: boolean;\n  /**\n   * Height that would be subtracted from the parent's height to give the available height, use case: if your pagination is inside the parent component then offsetY would be the height of pagination\n   */\n  offsetY?: number;\n}\n\nexport interface useVideoListTile extends TrackWithPeer {\n  width: number;\n  height: number;\n}\n\nexport interface useVideoResult {\n  /**\n   * This returns a list of all pages with every page containing the list of all tiles on it.\n   */\n  pagesWithTiles: useVideoListTile[][];\n  /**\n   * add the ref to the element going to render the video list, this is used to measure the available\n   * space/dimensions in order to calculate the best fit\n   */\n  ref: React.MutableRefObject<any>;\n}\n\nconst DEFAULTS = {\n  aspectRatio: {\n    width: 1,\n    height: 1,\n  },\n};\n\n/**\n * This hook can be used to build a paginated gallery view of video tiles. You can give the hook\n * a list of all the peers which need to be shown and it tells you how to structure the UI by giving\n * a list of pages with every page having a list of video tiles.\n * Please check the documentation of input and output types for more details.\n */\nexport const useVideoList = ({\n  peers,\n  maxTileCount,\n  maxColCount,\n  maxRowCount,\n  includeScreenShareForPeer = () => false,\n  aspectRatio = DEFAULTS.aspectRatio,\n  filterNonPublishingPeers = true,\n  offsetY = 0,\n}: useVideoListInput): useVideoResult => {\n  const { width = 0, height = 0, ref } = useResizeDetector();\n  const store = useHMSVanillaStore();\n  // using vanilla store as we don't need re-rendering everytime something in a track changes\n  const tracksMap: Record<HMSTrackID, HMSTrack> = store.getState(selectTracksMap);\n  const tracksWithPeer: TrackWithPeer[] = getVideoTracksFromPeers(\n    peers,\n    tracksMap,\n    includeScreenShareForPeer,\n    filterNonPublishingPeers,\n  );\n  const finalAspectRatio = useMemo(() => {\n    if (aspectRatio) {\n      return aspectRatio;\n    }\n    const modeAspectRatio = getModeAspectRatio(tracksWithPeer);\n    // Default to 1 if there are no video tracks\n    return {\n      width: modeAspectRatio || 1,\n      height: 1,\n    };\n  }, [aspectRatio, tracksWithPeer]);\n  const count = tracksWithPeer.length;\n  const {\n    tilesInFirstPage,\n    defaultWidth,\n    defaultHeight,\n    lastPageWidth,\n    lastPageHeight,\n    isLastPageDifferentFromFirstPage,\n  } = useMemo(\n    () =>\n      calculateLayoutSizes({\n        count,\n        parentWidth: Math.floor(width),\n        parentHeight: Math.floor(height) - Math.min(height, offsetY),\n        maxTileCount,\n        maxRowCount,\n        maxColCount,\n        aspectRatio: finalAspectRatio,\n      }),\n    [count, width, height, maxTileCount, maxRowCount, maxColCount, finalAspectRatio, offsetY],\n  );\n  const chunkedTracksWithPeer = useMemo(\n    () =>\n      chunkElements<TrackWithPeer>({\n        elements: tracksWithPeer,\n        tilesInFirstPage,\n        onlyOnePage: false,\n        isLastPageDifferentFromFirstPage,\n        defaultWidth,\n        defaultHeight,\n        lastPageWidth,\n        lastPageHeight,\n      }),\n    [\n      tracksWithPeer,\n      tilesInFirstPage,\n      isLastPageDifferentFromFirstPage,\n      defaultWidth,\n      defaultHeight,\n      lastPageWidth,\n      lastPageHeight,\n    ],\n  );\n  return {\n    pagesWithTiles: chunkedTracksWithPeer,\n    ref,\n  };\n};\n"],"names":["DEFAULTS","width","height","useVideoList","peers","maxTileCount","maxColCount","maxRowCount","includeScreenShareForPeer","aspectRatio","filterNonPublishingPeers","offsetY","ref","useResizeDetector","tracksMap","useHMSVanillaStore","getState","selectTracksMap","tracksWithPeer","getVideoTracksFromPeers","finalAspectRatio","useMemo","getModeAspectRatio","count","length","tilesInFirstPage","defaultWidth","defaultHeight","lastPageWidth","lastPageHeight","isLastPageDifferentFromFirstPage","calculateLayoutSizes","parentWidth","Math","floor","parentHeight","min","pagesWithTiles","chunkElements","elements","onlyOnePage"],"mappings":"+VAsEA,MAAMA,EACS,CACXC,MAAO,EACPC,OAAQ,GAUCC,EAAe,EAC1BC,QACAC,eACAC,cACAC,cACAC,4BAA4B,MAAM,GAClCC,cAAcT,EACdU,4BAA2B,EAC3BC,UAAU,MAEV,MAAMV,MAAEA,EAAQ,EAAGC,OAAAA,EAAS,MAAGU,GAAQC,IAGjCC,EAFQC,IAEwCC,SAASC,GACzDC,EAAkCC,EACtCf,EACAU,EACAN,EACAE,GAEIU,EAAmBC,GAAQ,KAC/B,GAAIZ,EACK,OAAAA,EAIF,MAAA,CACLR,MAHsBqB,EAAmBJ,IAGf,EAC1BhB,OAAQ,EAAA,GAET,CAACO,EAAaS,IACXK,EAAQL,EAAeM,QACvBC,iBACJA,EAAAC,aACAA,EAAAC,cACAA,EAAAC,cACAA,EAAAC,eACAA,EAAAC,iCACAA,GACET,GACF,IACEU,EAAqB,CACnBR,QACAS,YAAaC,KAAKC,MAAMjC,GACxBkC,aAAcF,KAAKC,MAAMhC,GAAU+B,KAAKG,IAAIlC,EAAQS,GACpDN,eACAE,cACAD,cACAG,YAAaW,KAEjB,CAACG,EAAOtB,EAAOC,EAAQG,EAAcE,EAAaD,EAAac,EAAkBT,IAwB5E,MAAA,CACL0B,eAvB4BhB,GAC5B,IACEiB,EAA6B,CAC3BC,SAAUrB,EACVO,mBACAe,aAAa,EACbV,mCACAJ,eACAC,gBACAC,gBACAC,oBAEJ,CACEX,EACAO,EACAK,EACAJ,EACAC,EACAC,EACAC,IAKFjB,MAAA"}
+{"version":3,"file":"useVideoList.js","sources":["../../src/hooks/useVideoList.ts"],"sourcesContent":[null],"names":["DEFAULTS","width","height","useVideoList","peers","maxTileCount","maxColCount","maxRowCount","includeScreenShareForPeer","aspectRatio","filterNonPublishingPeers","offsetY","ref","useResizeDetector","tracksMap","useHMSVanillaStore","getState","selectTracksMap","tracksWithPeer","getVideoTracksFromPeers","finalAspectRatio","useMemo","getModeAspectRatio","count","length","tilesInFirstPage","defaultWidth","defaultHeight","lastPageWidth","lastPageHeight","isLastPageDifferentFromFirstPage","calculateLayoutSizes","parentWidth","Math","floor","parentHeight","min","pagesWithTiles","chunkElements","elements","onlyOnePage"],"mappings":"+VAsEA,MAAMA,EACS,CACXC,MAAO,EACPC,OAAQ,GAUCC,EAAe,EAC1BC,QACAC,eACAC,cACAC,cACAC,4BAA4B,MAAM,GAClCC,cAAcT,EACdU,4BAA2B,EAC3BC,UAAU,MAEV,MAAMV,MAAEA,EAAQ,EAAGC,OAAAA,EAAS,MAAGU,GAAQC,IAGjCC,EAFQC,IAEwCC,SAASC,GACzDC,EAAkCC,EACtCf,EACAU,EACAN,EACAE,GAEIU,EAAmBC,GAAQ,KAC/B,GAAIZ,EACK,OAAAA,EAIF,MAAA,CACLR,MAHsBqB,EAAmBJ,IAGf,EAC1BhB,OAAQ,EAAA,GAET,CAACO,EAAaS,IACXK,EAAQL,EAAeM,QACvBC,iBACJA,eACAC,EACAC,cAAAA,EAAAC,cACAA,iBACAC,EACAC,iCAAAA,GACET,GACF,IACEU,EAAqB,CACnBR,QACAS,YAAaC,KAAKC,MAAMjC,GACxBkC,aAAcF,KAAKC,MAAMhC,GAAU+B,KAAKG,IAAIlC,EAAQS,GACpDN,eACAE,cACAD,cACAG,YAAaW,KAEjB,CAACG,EAAOtB,EAAOC,EAAQG,EAAcE,EAAaD,EAAac,EAAkBT,IAwB5E,MAAA,CACL0B,eAvB4BhB,GAC5B,IACEiB,EAA6B,CAC3BC,SAAUrB,EACVO,mBACAe,aAAa,EACbV,mCACAJ,eACAC,gBACAC,gBACAC,oBAEJ,CACEX,EACAO,EACAK,EACAJ,EACAC,EACAC,EACAC,IAKFjB,MAAA"}

package/dist/index.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("@100mslive/hms-video-store"),i=require("zustand"),r=require("react-intersection-observer"),o=require("react-resize-detector");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n,s,l=a(e),c=a(i);function u(e,t){if(Object.is(e,t))return!0;if("object"!=typeof e||null===e||"object"!=typeof t||null===t)return!1;const i=Object.keys(e);if(i.length!==Object.keys(t).length)return!1;for(let r=0;r<i.length;r++)if(!Object.prototype.hasOwnProperty.call(t,i[r])||!Object.is(e[i[r]],t[i[r]]))return!1;return!0}(s=n||(n={}))[s.VERBOSE=0]="VERBOSE",s[s.DEBUG=1]="DEBUG",s[s.INFO=2]="INFO",s[s.WARN=3]="WARN",s[s.ERROR=4]="ERROR",s[s.NONE=5]="NONE";class d{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,...i){if(!(this.level.valueOf()>e.valueOf()))switch(e){case 0:console.log("HMSui-components: ",t,...i);break;case 1:console.debug("HMSui-components: ",t,...i);break;case 2:console.info("HMSui-components: ",t,...i);break;case 3:console.warn("HMSui-components: ",t,...i);break;case 4:console.error("HMSui-components: ",t,...i)}}}d.level=0;const h="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.";const g="undefined"!=typeof window;var p=Object.defineProperty,f=Object.defineProperties,v=Object.getOwnPropertyDescriptors,m=Object.getOwnPropertySymbols,w=Object.prototype.hasOwnProperty,y=Object.prototype.propertyIsEnumerable,b=(e,t,i)=>t in e?p(e,t,{enumerable:!0,configurable:!0,writable:!0,value:i}):e[t]=i,P=(e,t)=>{for(var i in t||(t={}))w.call(t,i)&&b(e,i,t[i]);if(m)for(var i of m(t))y.call(t,i)&&b(e,i,t[i]);return e},S=(e,t)=>f(e,v(t));const k=e.createContext(null);let I;const x=(E=k,(t,i=u)=>{t||d.w("fetching full store without passing any selector may have a heavy performance impact on your website.");const r=e.useContext(E);if(!r)throw new Error(h);return(0,r.store)(t,i)});var E;const O=function(t){return(i,r=u)=>{i||d.w("fetching full store without passing any selector may have a heavy performance impact on your website.");const o=e.useContext(t);if(!o)throw new Error(h);const a=o.statsStore;return null==a?void 0:a(i,r)}}(k),M=()=>{const t=e.useContext(k);if(!t)throw new Error(h);return t.store},H=()=>{const t=e.useContext(k);if(!t)throw new Error(h);return t.notifications},R=()=>{const t=e.useContext(k);if(!t)throw new Error(h);return t.actions},C=t=>{const i=e.useContext(k),[r,o]=e.useState(null);if(!i)throw new Error(h);return e.useEffect((()=>{if(!i.notifications)return;return i.notifications.onNotification((e=>{o(e)}),t)}),[i.notifications,t]),r},T=(e,t)=>d.e("react-sdk",t,e),D=async(e,t,i)=>{if(t)try{await e.setRemoteTrackEnabled(t.id,!t.enabled)}catch(e){i(e,"remoteToggle")}};var F=Object.defineProperty,N=Object.defineProperties,W=Object.getOwnPropertyDescriptors,A=Object.getOwnPropertySymbols,L=Object.prototype.hasOwnProperty,j=Object.prototype.propertyIsEnumerable,V=(e,t,i)=>t in e?F(e,t,{enumerable:!0,configurable:!0,writable:!0,value:i}):e[t]=i;const B=({elements:e,tilesInFirstPage:t,onlyOnePage:i,isLastPageDifferentFromFirstPage:r,defaultWidth:o,defaultHeight:a,lastPageWidth:n,lastPageHeight:s})=>{const l=((e,t,i)=>e.reduce(((e,r,o)=>{const a=Math.floor(o/t);return a>0&&i||(e[a]||(e[a]=[]),e[a].push(r)),e}),[]))(e,t,i);return l.map(((e,t)=>e.map((e=>{const i=t===l.length-1,c=r&&i?n:o,u=r&&i?s:a;return d=((e,t)=>{for(var i in t||(t={}))L.call(t,i)&&V(e,i,t[i]);if(A)for(var i of A(t))j.call(t,i)&&V(e,i,t[i]);return e})({},e),N(d,W({height:u,width:c}));var d}))))};const q=(e,t,i,r,o)=>{if(e<0||t<0)throw new Error("Container must have a non-negative area");if(i<1||!Number.isInteger(i))throw new Error("Number of shapes to place must be a positive integer");const a=r&&o&&r/o;if(void 0!==a&&isNaN(a))throw new Error("Aspect ratio must be a number");let n={area:0,cols:0,rows:0,width:0,height:0};if(void 0!==a)for(let r=i;r>0;r+=-1){const o=Math.ceil(i/r);let s,l;e/(r*a)<=t/o?(s=e/r,l=s/a):(l=t/o,s=l*a);const c=s*l;c>n.area&&(n={area:c,width:s,height:l,rows:o,cols:r})}return n};function G({count:e,parentWidth:t,parentHeight:i,maxTileCount:r,maxRowCount:o,maxColCount:a,aspectRatio:n}){let s=0,l=0,c=0,u=0,d=!1,h=0;if(0===e)return{tilesInFirstPage:h,defaultWidth:s,defaultHeight:l,lastPageWidth:c,lastPageHeight:u,isLastPageDifferentFromFirstPage:d};if(r)({tilesInFirstPage:h,defaultWidth:s,defaultHeight:l,lastPageWidth:c,lastPageHeight:u,isLastPageDifferentFromFirstPage:d}=(({parentWidth:e,parentHeight:t,count:i,maxCount:r,aspectRatio:o})=>{let a=0,n=0,s=0,l=0,c=!1,u=0,d=0;const{width:h,height:g}=q(e,t,Math.min(i,r),o.width,o.height);if(a=h,n=g,u=Math.min(i,r),d=i%r,c=d>0&&i>r,c){const{width:i,height:r}=q(e,t,d,o.width,o.height);s=i,l=r}return{tilesInFirstPage:u,defaultWidth:a,defaultHeight:n,lastPageWidth:s,lastPageHeight:l,isLastPageDifferentFromFirstPage:c}})({parentWidth:t,parentHeight:i,count:e,maxCount:r,aspectRatio:n}));else if(o)({tilesInFirstPage:h,defaultWidth:s,defaultHeight:l,lastPageWidth:c,lastPageHeight:u,isLastPageDifferentFromFirstPage:d}=(({parentWidth:e,parentHeight:t,count:i,maxCount:r,aspectRatio:o})=>{let a=0,n=0,s=0,l=0,c=!1,u=0,d=0;const h=Math.min(Math.ceil(Math.sqrt(i*(o.width/o.height)/(e/t))),r),g=t/h,p=g*(o.width/o.height),f=Math.floor(e/p);if(a=p,n=g,u=Math.min(i,h*f),d=i%(h*f),c=d>0&&i>h*f,c){const i=t/Math.min(Math.ceil(Math.sqrt(d*(o.width/o.height)/(e/t))),r);l=i,s=i*(o.width/o.height)}return{tilesInFirstPage:u,defaultWidth:a,defaultHeight:n,lastPageWidth:s,lastPageHeight:l,isLastPageDifferentFromFirstPage:c}})({parentWidth:t,parentHeight:i,count:e,maxCount:o,aspectRatio:n}));else if(a)({tilesInFirstPage:h,defaultWidth:s,defaultHeight:l,lastPageWidth:c,lastPageHeight:u,isLastPageDifferentFromFirstPage:d}=(({parentWidth:e,parentHeight:t,count:i,maxCount:r,aspectRatio:o})=>{let a=0,n=0,s=0,l=0,c=!1,u=0,d=0;const h=Math.min(Math.ceil(Math.sqrt(i*(e/t)/(o.width/o.height))),r);let g=e/h,p=g/(o.width/o.height);p>t&&(p=t,g=p/(o.height/o.width));const f=Math.floor(t/p);if(n=p,a=g,u=Math.min(i,f*h),d=i%(f*h),c=d>0&&i>f*h,c){let i=e/Math.min(Math.ceil(Math.sqrt(d*(e/t)/(o.width/o.height))),r),a=i/(o.width/o.height);a>t&&(a=t,i=a/(o.height/o.width)),l=a,s=i}return{tilesInFirstPage:u,defaultWidth:a,defaultHeight:n,lastPageWidth:s,lastPageHeight:l,isLastPageDifferentFromFirstPage:c}})({parentWidth:t,parentHeight:i,count:e,maxCount:a,aspectRatio:n}));else{const{width:r,height:o}=q(t,i,e,n.width,n.height);s=r,l=o,h=e}return{tilesInFirstPage:h,defaultWidth:s,defaultHeight:l,lastPageWidth:c,lastPageHeight:u,isLastPageDifferentFromFirstPage:d}}const J={width:1,height:1};var z;exports.DeviceType=void 0,(z=exports.DeviceType||(exports.DeviceType={})).videoInput="videoInput",z.audioInput="audioInput",z.audioOutput="audioOutput";exports.HMSRoomProvider=({children:i,actions:r,store:o,notifications:a,stats:n,isHMSStatsOn:s=!1,leaveOnUnload:u=!0})=>{if(!I){const e=()=>{throw new Error("modifying store is not allowed")};if(r&&o)I={actions:r,store:c.default(S(P({},o),{setState:e,destroy:e}))},a&&(I.notifications=a),n&&(I.statsStore=c.default({getState:n.getState,subscribe:n.subscribe,setState:e,destroy:e}));else{const i=new t.HMSReactiveStore;if(I={actions:i.getActions(),store:c.default(S(P({},i.getStore()),{setState:e,destroy:e})),notifications:i.getNotifications()},s){const t=i.getStats();I.statsStore=c.default({getState:t.getState,subscribe:t.subscribe,setState:e,destroy:e})}}I.actions.setFrameworkInfo({type:"react-web",version:l.default.version,sdkVersion:"0.4.3"})}return e.useEffect((()=>{g&&u&&(window.addEventListener("beforeunload",(()=>I.actions.leave())),window.addEventListener("onunload",(()=>I.actions.leave())))}),[u]),l.default.createElement(k.Provider,{value:I},i)},exports.throwErrorHandler=e=>{throw e},exports.useAVToggle=(i=T)=>{const r=x(t.selectIsLocalAudioEnabled),o=x(t.selectIsLocalVideoEnabled),a=x(t.selectIsAllowedToPublish),n=R(),s=e.useCallback((async()=>{try{await n.setLocalAudioEnabled(!r)}catch(e){i(e,"toggleAudio")}}),[n,r,i]),l=e.useCallback((async()=>{try{await n.setLocalVideoEnabled(!o)}catch(e){i(e,"toggleVideo")}}),[n,o,i]);return{isLocalAudioEnabled:r,isLocalVideoEnabled:o,toggleAudio:(null==a?void 0:a.audio)?s:void 0,toggleVideo:(null==a?void 0:a.video)?l:void 0}},exports.useAudioLevelStyles=function({trackId:i,getStyle:r,ref:o}){const a=M();e.useEffect((()=>a.subscribe((e=>{if(!o.current)return;const t=r(e);for(const e in t)o.current.style[e]=t[e]}),t.selectTrackAudioByID(i))),[r,o,a,i])},exports.useAutoplayError=()=>{const i=C(t.HMSNotificationTypes.ERROR),[r,o]=e.useState(""),a=R(),n=e.useCallback((async()=>{await a.unblockAudio()}),[a]);return e.useEffect((()=>{3008===(null==i?void 0:i.data.code)&&o(null==i?void 0:i.data.message)}),[i]),{error:r,unblockAudio:n,resetError:()=>o("")}},exports.useCustomEvent=({type:i,json:r=!0,onEvent:o,handleError:a=T})=>{const n=R(),s=H();e.useEffect((()=>{n.ignoreMessageTypes([i])}),[n,i]),e.useEffect((()=>{if(!s)return;return s.onNotification((e=>{const t=e.data;if(t&&t.type===i)try{const e=r?JSON.parse(t.message):t.message;null==o||o(e)}catch(e){a(e,"handleCustomEvent")}}),t.HMSNotificationTypes.NEW_MESSAGE)}),[s,i,r,o,a]);return{sendEvent:e.useCallback((async(e,t)=>{try{const a=((e,t)=>t?JSON.stringify(e||""):e)(e,r);t&&Array.isArray(null==t?void 0:t.roleNames)?await n.sendGroupMessage(a,t.roleNames,i):"string"==typeof(null==t?void 0:t.peerId)?await n.sendDirectMessage(a,t.peerId,i):await n.sendBroadcastMessage(a,i),null==o||o(e)}catch(e){a(e,"sendCustomEvent")}}),[n,a,o,i,r])}},exports.useDevices=(i=T)=>{const r=R(),o=x(t.selectDevices),a=x(t.selectLocalMediaSettings),n=x(t.selectIsAllowedToPublish),s={[exports.DeviceType.audioOutput]:a.audioOutputDeviceId},l={[exports.DeviceType.audioOutput]:o.audioOutput};n.video&&(l[exports.DeviceType.videoInput]=o.videoInput,s[exports.DeviceType.videoInput]=a.videoInputDeviceId),n.audio&&(l[exports.DeviceType.audioInput]=o.audioInput,s[exports.DeviceType.audioInput]=a.audioInputDeviceId);return{allDevices:l,selectedDeviceIDs:s,updateDevice:e.useCallback((async({deviceType:e,deviceId:t})=>{try{switch(e){case exports.DeviceType.audioInput:await r.setAudioSettings({deviceId:t});break;case exports.DeviceType.videoInput:await r.setVideoSettings({deviceId:t});break;case exports.DeviceType.audioOutput:await r.setAudioOutputDevice(t)}}catch(e){i(e,"updateDevices")}}),[i,r])}},exports.useHMSActions=R,exports.useHMSNotifications=C,exports.useHMSStatsStore=O,exports.useHMSStore=x,exports.useHMSVanillaNotifications=H,exports.useHMSVanillaStore=M,exports.useParticipantList=()=>{const i=x(t.selectIsConnectedToRoom),r=x(i?t.selectPeers:t.selectRemotePeers),o=x(t.selectPeerCount),a=e.useMemo((()=>{return(e=r)&&Array.isArray(e)&&0!==e.length?e.reduce(((e,t)=>t.roleName?(e[t.roleName]||(e[t.roleName]=[]),e[t.roleName].push(t),e):e),{}):{};var e}),[r]);return{roles:Object.keys(a),participantsByRoles:a,peerCount:o,isConnected:i}},exports.useParticipants=e=>{var i;const r=x(t.selectIsConnectedToRoom),o=x(t.selectPeerCount),a=x(t.selectAvailableRoleNames);let n=x(r?t.selectPeers:t.selectRemotePeers);const s=Array.from(new Set(n.map((e=>e.roleName)))),l=M();if((null==(i=null==e?void 0:e.metadata)?void 0:i.isHandRaised)&&(n=n.filter((e=>l.getState(t.selectPeerMetadata(e.id)).isHandRaised))),(null==e?void 0:e.role)&&a.includes(e.role)&&(n=n.filter((t=>t.roleName===e.role))),null==e?void 0:e.search){const t=e.search.toLowerCase();n=n.filter((e=>{var i;return(null==(i=e.roleName)?void 0:i.toLowerCase().includes(t))||e.name.toLowerCase().includes(t)}))}return{participants:n,isConnected:r,peerCount:o,rolesWithParticipants:s}},exports.usePreviewJoin=({name:i="",token:r,metadata:o,handleError:a=T,initEndpoint:n,initialSettings:s,captureNetworkQualityInPreview:l})=>{const c=R(),u=x(t.selectRoomState),d=x(t.selectIsConnectedToRoom)||!1,h=u===t.HMSRoomState.Preview,g=e.useMemo((()=>({userName:i,authToken:r,metaData:o,rememberDeviceSelection:!0,settings:s,initEndpoint:n,captureNetworkQualityInPreview:l})),[i,r,o,n,s,l]),p=e.useCallback((async()=>{if(r&&u===t.HMSRoomState.Disconnected){d&&await c.leave();try{await c.preview(g)}catch(e){a(e,"preview")}}}),[c,a,r,u,g,d]);return{enableJoin:h,join:e.useCallback((async()=>{if(r)try{await c.join(g)}catch(e){a(e,"join")}}),[c,g,a,r]),isConnected:d,preview:p}},exports.useRecordingStreaming=()=>{const e=x(t.selectRecordingState),i=x(t.selectRTMPState),r=x(t.selectHLSState),o=e.server.running,a=e.browser.running,n=e.hls.running,s=o||a||n;return{isServerRecordingOn:o,isBrowserRecordingOn:a,isHLSRecordingOn:n,isStreamingOn:r.running||i.running,isHLSRunning:r.running,isRTMPRunning:i.running,isRecordingOn:s}},exports.useRemoteAVToggle=(i,r,o=T)=>{const a=R(),n=x(t.selectAudioTrackByID(i)),s=x(t.selectVideoTrackByID(r)),l=x(t.selectAudioTrackVolume(null==n?void 0:n.id)),c=x(t.selectPermissions),u=(null==s?void 0:s.enabled)?null==c?void 0:c.mute:null==c?void 0:c.unmute,d=(null==n?void 0:n.enabled)?null==c?void 0:c.mute:null==c?void 0:c.unmute,h=e.useCallback((async()=>{await D(a,n,o)}),[a,n,o]),g=e.useCallback((async()=>{await D(a,s,o)}),[a,o,s]),p=e.useCallback((e=>{n&&a.setVolume(e,n.id)}),[a,n]);return{isAudioEnabled:!!(null==n?void 0:n.enabled),isVideoEnabled:!!(null==s?void 0:s.enabled),volume:l,toggleAudio:n&&d?h:void 0,toggleVideo:"regular"===(null==s?void 0:s.source)&&u?g:void 0,setVolume:n?p:void 0}},exports.useScreenShare=(i=T)=>{var r,o;const a=R(),n=x(t.selectIsLocalScreenShared),s=x(t.selectPeerScreenSharing),l=x(t.selectScreenSharesByPeerId(null==s?void 0:s.id)),c=e.useCallback((async(e=!1)=>{try{await a.setScreenShareEnabled(!n,e)}catch(e){i(e,"toggleScreenShare")}}),[a,n,i]);return{amIScreenSharing:n,screenSharingPeerId:null==s?void 0:s.id,screenSharingPeerName:null==s?void 0:s.name,screenShareVideoTrackId:null==(r=null==l?void 0:l.video)?void 0:r.id,screenShareAudioTrackId:null==(o=null==l?void 0:l.audio)?void 0:o.id,toggleScreenShare:c}},exports.useVideo=({trackId:i,attach:o,threshold:a=.5})=>{const n=R(),s=e.useRef(null),l=x(t.selectVideoTrackByID(i)),{ref:c,inView:u}=r.useInView({threshold:a}),h=e.useCallback((e=>{e&&(s.current=e,c(e))}),[c]);return e.useEffect((()=>{(async()=>{s.current&&(null==l?void 0:l.id)&&(u&&l.enabled&&!1!==o?await n.attachVideo(l.id,s.current):await n.detachVideo(l.id,s.current))})()}),[n,u,s,null==l?void 0:l.id,null==l?void 0:l.enabled,null==l?void 0:l.deviceID,null==l?void 0:l.plugins,o]),e.useEffect((()=>()=>{(async()=>{if(s.current&&l)try{await n.detachVideo(l.id,s.current)}catch(e){d.w("detach video error for track",l.id,e)}})()}),[]),{videoRef:h}},exports.useVideoList=({peers:i,maxTileCount:r,maxColCount:a,maxRowCount:n,includeScreenShareForPeer:s=(()=>!1),aspectRatio:l=J,filterNonPublishingPeers:c=!0,offsetY:u=0})=>{const{width:d=0,height:h=0,ref:g}=o.useResizeDetector(),p=((e,t,i,r=!0)=>{if(!e||!t||!i)return[];const o=[];for(const a of e)if(void 0===a.videoTrack&&a.audioTrack&&t[a.audioTrack]?o.push({peer:a}):a.videoTrack&&t[a.videoTrack]?o.push({track:t[a.videoTrack],peer:a}):r||o.push({peer:a}),a.auxiliaryTracks.length>0&&a.auxiliaryTracks.forEach((e=>{const i=t[e];"video"===(null==i?void 0:i.type)&&"regular"===(null==i?void 0:i.source)&&o.push({track:i,peer:a})})),i(a)&&a.auxiliaryTracks.length>0){const e=a.auxiliaryTracks.find((e=>{const i=t[e];return"video"===(null==i?void 0:i.type)&&"screen"===(null==i?void 0:i.source)}));e&&o.push({track:t[e],peer:a})}return o})(i,M().getState(t.selectTracksMap),s,c),f=e.useMemo((()=>{if(l)return l;return{width:function(e){if(0===e.length)return null;const t={};let i=e[0],r=1;for(let o=0;o<e.length;o++){const a=e[o];null===t[a]?t[a]=1:t[a]++,t[a]>r&&(i=a,r=t[a])}return i}(p.filter((e=>{var t,i;return(null==(t=e.track)?void 0:t.width)&&(null==(i=e.track)?void 0:i.height)})).map((e=>{var t,i;return((null==(t=e.track)?void 0:t.width)||1)/((null==(i=e.track)?void 0:i.height)||1)})))||1,height:1}}),[l,p]),v=p.length,{tilesInFirstPage:m,defaultWidth:w,defaultHeight:y,lastPageWidth:b,lastPageHeight:P,isLastPageDifferentFromFirstPage:S}=e.useMemo((()=>G({count:v,parentWidth:Math.floor(d),parentHeight:Math.floor(h)-Math.min(h,u),maxTileCount:r,maxRowCount:n,maxColCount:a,aspectRatio:f})),[v,d,h,r,n,a,f,u]);return{pagesWithTiles:e.useMemo((()=>B({elements:p,tilesInFirstPage:m,onlyOnePage:!1,isLastPageDifferentFromFirstPage:S,defaultWidth:w,defaultHeight:y,lastPageWidth:b,lastPageHeight:P})),[p,m,S,w,y,b,P]),ref:g}},Object.keys(t).forEach((function(e){"default"===e||exports.hasOwnProperty(e)||Object.defineProperty(exports,e,{enumerable:!0,get:function(){return t[e]}})}));
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("@100mslive/hms-video-store"),i=require("zustand"),o=require("react-intersection-observer"),r=require("react-resize-detector");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a,s,l=n(e),c=n(i);function u(e,t){if(Object.is(e,t))return!0;if("object"!=typeof e||null===e||"object"!=typeof t||null===t)return!1;const i=Object.keys(e);if(i.length!==Object.keys(t).length)return!1;for(let o=0;o<i.length;o++)if(!Object.prototype.hasOwnProperty.call(t,i[o])||!Object.is(e[i[o]],t[i[o]]))return!1;return!0}(s=a||(a={}))[s.VERBOSE=0]="VERBOSE",s[s.DEBUG=1]="DEBUG",s[s.INFO=2]="INFO",s[s.WARN=3]="WARN",s[s.ERROR=4]="ERROR",s[s.NONE=5]="NONE";class d{static v(e,...t){this.log(a.VERBOSE,e,...t)}static d(e,...t){this.log(a.DEBUG,e,...t)}static i(e,...t){this.log(a.INFO,e,...t)}static w(e,...t){this.log(a.WARN,e,...t)}static e(e,...t){this.log(a.ERROR,e,...t)}static log(e,t,...i){if(!(this.level.valueOf()>e.valueOf()))switch(e){case a.VERBOSE:console.log("HMSui-components: ",t,...i);break;case a.DEBUG:console.debug("HMSui-components: ",t,...i);break;case a.INFO:console.info("HMSui-components: ",t,...i);break;case a.WARN:console.warn("HMSui-components: ",t,...i);break;case a.ERROR:console.error("HMSui-components: ",t,...i)}}}d.level=a.VERBOSE;const h="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.";const g="undefined"!=typeof window,v=e.createContext(null);let f;const p=(m=v,(t,i=u)=>{t||d.w("fetching full store without passing any selector may have a heavy performance impact on your website.");const o=e.useContext(m);if(!o)throw new Error(h);return(0,o.store)(t,i)});var m;const y=function(t){return(i,o=u)=>{i||d.w("fetching full store without passing any selector may have a heavy performance impact on your website.");const r=e.useContext(t);if(!r)throw new Error(h);const n=r.statsStore;return null==n?void 0:n(i,o)}}(v),w=()=>{const t=e.useContext(v);if(!t)throw new Error(h);return t.store},S=()=>{const t=e.useContext(v);if(!t)throw new Error(h);return t.notifications},P=()=>{const t=e.useContext(v);if(!t)throw new Error(h);return t.actions},b=t=>{const i=e.useContext(v),[o,r]=e.useState(null);if(!i)throw new Error(h);return e.useEffect((()=>{if(!i.notifications)return;return i.notifications.onNotification((e=>{r(e)}),t)}),[i.notifications,t]),o};function E(e,t,i,o){return new(i||(i=Promise))((function(r,n){function a(e){try{l(o.next(e))}catch(e){n(e)}}function s(e){try{l(o.throw(e))}catch(e){n(e)}}function l(e){var t;e.done?r(e.value):(t=e.value,t instanceof i?t:new i((function(e){e(t)}))).then(a,s)}l((o=o.apply(e,t||[])).next())}))}const R=(e,t)=>d.e("react-sdk",t,e),k=(e,t,i)=>E(void 0,void 0,void 0,(function*(){if(t)try{yield e.setRemoteTrackEnabled(t.id,!t.enabled)}catch(e){i(e,"remoteToggle")}})),x=({elements:e,tilesInFirstPage:t,onlyOnePage:i,isLastPageDifferentFromFirstPage:o,defaultWidth:r,defaultHeight:n,lastPageWidth:a,lastPageHeight:s})=>{const l=((e,t,i)=>e.reduce(((e,o,r)=>{const n=Math.floor(r/t);return n>0&&i||(e[n]||(e[n]=[]),e[n].push(o)),e}),[]))(e,t,i);return l.map(((e,t)=>e.map((e=>{const i=t===l.length-1,c=o&&i?a:r,u=o&&i?s:n;return Object.assign(Object.assign({},e),{height:u,width:c})}))))};const I=(e,t,i,o,r)=>{if(e<0||t<0)throw new Error("Container must have a non-negative area");if(i<1||!Number.isInteger(i))throw new Error("Number of shapes to place must be a positive integer");const n=o&&r&&o/r;if(void 0!==n&&isNaN(n))throw new Error("Aspect ratio must be a number");let a={area:0,cols:0,rows:0,width:0,height:0};if(void 0!==n)for(let o=i;o>0;o+=-1){const r=Math.ceil(i/o);let s,l;e/(o*n)<=t/r?(s=e/o,l=s/n):(l=t/r,s=l*n);const c=s*l;c>a.area&&(a={area:c,width:s,height:l,rows:r,cols:o})}return a};function M({count:e,parentWidth:t,parentHeight:i,maxTileCount:o,maxRowCount:r,maxColCount:n,aspectRatio:a}){let s=0,l=0,c=0,u=0,d=!1,h=0;if(0===e)return{tilesInFirstPage:h,defaultWidth:s,defaultHeight:l,lastPageWidth:c,lastPageHeight:u,isLastPageDifferentFromFirstPage:d};if(o)({tilesInFirstPage:h,defaultWidth:s,defaultHeight:l,lastPageWidth:c,lastPageHeight:u,isLastPageDifferentFromFirstPage:d}=(({parentWidth:e,parentHeight:t,count:i,maxCount:o,aspectRatio:r})=>{let n=0,a=0,s=0,l=0,c=!1,u=0,d=0;const{width:h,height:g}=I(e,t,Math.min(i,o),r.width,r.height);if(n=h,a=g,u=Math.min(i,o),d=i%o,c=d>0&&i>o,c){const{width:i,height:o}=I(e,t,d,r.width,r.height);s=i,l=o}return{tilesInFirstPage:u,defaultWidth:n,defaultHeight:a,lastPageWidth:s,lastPageHeight:l,isLastPageDifferentFromFirstPage:c}})({parentWidth:t,parentHeight:i,count:e,maxCount:o,aspectRatio:a}));else if(r)({tilesInFirstPage:h,defaultWidth:s,defaultHeight:l,lastPageWidth:c,lastPageHeight:u,isLastPageDifferentFromFirstPage:d}=(({parentWidth:e,parentHeight:t,count:i,maxCount:o,aspectRatio:r})=>{let n=0,a=0,s=0,l=0,c=!1,u=0,d=0;const h=Math.min(Math.ceil(Math.sqrt(i*(r.width/r.height)/(e/t))),o),g=t/h,v=g*(r.width/r.height),f=Math.floor(e/v);if(n=v,a=g,u=Math.min(i,h*f),d=i%(h*f),c=d>0&&i>h*f,c){const i=t/Math.min(Math.ceil(Math.sqrt(d*(r.width/r.height)/(e/t))),o);l=i,s=i*(r.width/r.height)}return{tilesInFirstPage:u,defaultWidth:n,defaultHeight:a,lastPageWidth:s,lastPageHeight:l,isLastPageDifferentFromFirstPage:c}})({parentWidth:t,parentHeight:i,count:e,maxCount:r,aspectRatio:a}));else if(n)({tilesInFirstPage:h,defaultWidth:s,defaultHeight:l,lastPageWidth:c,lastPageHeight:u,isLastPageDifferentFromFirstPage:d}=(({parentWidth:e,parentHeight:t,count:i,maxCount:o,aspectRatio:r})=>{let n=0,a=0,s=0,l=0,c=!1,u=0,d=0;const h=Math.min(Math.ceil(Math.sqrt(i*(e/t)/(r.width/r.height))),o);let g=e/h,v=g/(r.width/r.height);v>t&&(v=t,g=v/(r.height/r.width));const f=Math.floor(t/v);if(a=v,n=g,u=Math.min(i,f*h),d=i%(f*h),c=d>0&&i>f*h,c){let i=e/Math.min(Math.ceil(Math.sqrt(d*(e/t)/(r.width/r.height))),o),n=i/(r.width/r.height);n>t&&(n=t,i=n/(r.height/r.width)),l=n,s=i}return{tilesInFirstPage:u,defaultWidth:n,defaultHeight:a,lastPageWidth:s,lastPageHeight:l,isLastPageDifferentFromFirstPage:c}})({parentWidth:t,parentHeight:i,count:e,maxCount:n,aspectRatio:a}));else{const{width:o,height:r}=I(t,i,e,a.width,a.height);s=o,l=r,h=e}return{tilesInFirstPage:h,defaultWidth:s,defaultHeight:l,lastPageWidth:c,lastPageHeight:u,isLastPageDifferentFromFirstPage:d}}const H={width:1,height:1};var C;exports.DeviceType=void 0,(C=exports.DeviceType||(exports.DeviceType={})).videoInput="videoInput",C.audioInput="audioInput",C.audioOutput="audioOutput";exports.HMSRoomProvider=({children:i,actions:o,store:r,notifications:n,stats:a,isHMSStatsOn:s=!1,leaveOnUnload:u=!0})=>{if(!f){const e=()=>{throw new Error("modifying store is not allowed")};if(o&&r)f={actions:o,store:c.default(Object.assign(Object.assign({},r),{setState:e,destroy:e}))},n&&(f.notifications=n),a&&(f.statsStore=c.default({getState:a.getState,subscribe:a.subscribe,setState:e,destroy:e}));else{const i=new t.HMSReactiveStore;if(f={actions:i.getActions(),store:c.default(Object.assign(Object.assign({},i.getStore()),{setState:e,destroy:e})),notifications:i.getNotifications()},s){const t=i.getStats();f.statsStore=c.default({getState:t.getState,subscribe:t.subscribe,setState:e,destroy:e})}}f.actions.setFrameworkInfo({type:"react-web",version:l.default.version,sdkVersion:require("../../package.json").version})}return e.useEffect((()=>{g&&u&&(window.addEventListener("beforeunload",(()=>f.actions.leave())),window.addEventListener("onunload",(()=>f.actions.leave())))}),[u]),l.default.createElement(v.Provider,{value:f},i)},exports.throwErrorHandler=e=>{throw e},exports.useAVToggle=(i=R)=>{const o=p(t.selectIsLocalAudioEnabled),r=p(t.selectIsLocalVideoEnabled),n=p(t.selectIsAllowedToPublish),a=P(),s=e.useCallback((()=>E(void 0,void 0,void 0,(function*(){try{yield a.setLocalAudioEnabled(!o)}catch(e){i(e,"toggleAudio")}}))),[a,o,i]),l=e.useCallback((()=>E(void 0,void 0,void 0,(function*(){try{yield a.setLocalVideoEnabled(!r)}catch(e){i(e,"toggleVideo")}}))),[a,r,i]);return{isLocalAudioEnabled:o,isLocalVideoEnabled:r,toggleAudio:(null==n?void 0:n.audio)?s:void 0,toggleVideo:(null==n?void 0:n.video)?l:void 0}},exports.useAudioLevelStyles=function({trackId:i,getStyle:o,ref:r}){const n=w();e.useEffect((()=>n.subscribe((e=>{if(!r.current)return;const t=o(e);for(const e in t)r.current.style[e]=t[e]}),t.selectTrackAudioByID(i))),[o,r,n,i])},exports.useAutoplayError=()=>{const i=b(t.HMSNotificationTypes.ERROR),[o,r]=e.useState(""),n=P(),a=e.useCallback((()=>E(void 0,void 0,void 0,(function*(){yield n.unblockAudio()}))),[n]);return e.useEffect((()=>{3008===(null==i?void 0:i.data.code)&&r(null==i?void 0:i.data.message)}),[i]),{error:o,unblockAudio:a,resetError:()=>r("")}},exports.useCustomEvent=({type:i,json:o=!0,onEvent:r,handleError:n=R})=>{const a=P(),s=S();e.useEffect((()=>{a.ignoreMessageTypes([i])}),[a,i]),e.useEffect((()=>{if(!s)return;return s.onNotification((e=>{const t=e.data;if(t&&t.type===i)try{const e=o?JSON.parse(t.message):t.message;null==r||r(e)}catch(e){n(e,"handleCustomEvent")}}),t.HMSNotificationTypes.NEW_MESSAGE)}),[s,i,o,r,n]);return{sendEvent:e.useCallback(((e,t)=>E(void 0,void 0,void 0,(function*(){try{const n=((e,t)=>t?JSON.stringify(e||""):e)(e,o);t&&Array.isArray(null==t?void 0:t.roleNames)?yield a.sendGroupMessage(n,t.roleNames,i):"string"==typeof(null==t?void 0:t.peerId)?yield a.sendDirectMessage(n,t.peerId,i):yield a.sendBroadcastMessage(n,i),null==r||r(e)}catch(e){n(e,"sendCustomEvent")}}))),[a,n,r,i,o])}},exports.useDevices=(i=R)=>{const o=P(),r=p(t.selectDevices),n=p(t.selectLocalMediaSettings),a=p(t.selectIsAllowedToPublish),s={[exports.DeviceType.audioOutput]:n.audioOutputDeviceId},l={[exports.DeviceType.audioOutput]:r.audioOutput};a.video&&(l[exports.DeviceType.videoInput]=r.videoInput,s[exports.DeviceType.videoInput]=n.videoInputDeviceId),a.audio&&(l[exports.DeviceType.audioInput]=r.audioInput,s[exports.DeviceType.audioInput]=n.audioInputDeviceId);return{allDevices:l,selectedDeviceIDs:s,updateDevice:e.useCallback((({deviceType:e,deviceId:t})=>E(void 0,void 0,void 0,(function*(){try{switch(e){case exports.DeviceType.audioInput:yield o.setAudioSettings({deviceId:t});break;case exports.DeviceType.videoInput:yield o.setVideoSettings({deviceId:t});break;case exports.DeviceType.audioOutput:yield o.setAudioOutputDevice(t)}}catch(e){i(e,"updateDevices")}}))),[i,o])}},exports.useHMSActions=P,exports.useHMSNotifications=b,exports.useHMSStatsStore=y,exports.useHMSStore=p,exports.useHMSVanillaNotifications=S,exports.useHMSVanillaStore=w,exports.useParticipantList=()=>{const i=p(t.selectIsConnectedToRoom),o=p(i?t.selectPeers:t.selectRemotePeers),r=p(t.selectPeerCount),n=e.useMemo((()=>{return(e=o)&&Array.isArray(e)&&0!==e.length?e.reduce(((e,t)=>t.roleName?(e[t.roleName]||(e[t.roleName]=[]),e[t.roleName].push(t),e):e),{}):{};var e}),[o]);return{roles:Object.keys(n),participantsByRoles:n,peerCount:r,isConnected:i}},exports.useParticipants=e=>{var i;const o=p(t.selectIsConnectedToRoom),r=p(t.selectPeerCount),n=p(t.selectAvailableRoleNames);let a=p(o?t.selectPeers:t.selectRemotePeers);const s=Array.from(new Set(a.map((e=>e.roleName)))),l=w();if((null===(i=null==e?void 0:e.metadata)||void 0===i?void 0:i.isHandRaised)&&(a=a.filter((e=>l.getState(t.selectPeerMetadata(e.id)).isHandRaised))),(null==e?void 0:e.role)&&n.includes(e.role)&&(a=a.filter((t=>t.roleName===e.role))),null==e?void 0:e.search){const t=e.search.toLowerCase();a=a.filter((e=>{var i;return(null===(i=e.roleName)||void 0===i?void 0:i.toLowerCase().includes(t))||e.name.toLowerCase().includes(t)}))}return{participants:a,isConnected:o,peerCount:r,rolesWithParticipants:s}},exports.usePreviewJoin=({name:i="",token:o,metadata:r,handleError:n=R,initEndpoint:a,initialSettings:s,captureNetworkQualityInPreview:l})=>{const c=P(),u=p(t.selectRoomState),d=p(t.selectIsConnectedToRoom)||!1,h=u===t.HMSRoomState.Preview,g=e.useMemo((()=>({userName:i,authToken:o,metaData:r,rememberDeviceSelection:!0,settings:s,initEndpoint:a,captureNetworkQualityInPreview:l})),[i,o,r,a,s,l]),v=e.useCallback((()=>E(void 0,void 0,void 0,(function*(){if(o&&u===t.HMSRoomState.Disconnected){d&&(yield c.leave());try{yield c.preview(g)}catch(e){n(e,"preview")}}}))),[c,n,o,u,g,d]);return{enableJoin:h,join:e.useCallback((()=>E(void 0,void 0,void 0,(function*(){if(o)try{yield c.join(g)}catch(e){n(e,"join")}}))),[c,g,n,o]),isConnected:d,preview:v}},exports.useRecordingStreaming=()=>{const e=p(t.selectRecordingState),i=p(t.selectRTMPState),o=p(t.selectHLSState),r=e.server.running,n=e.browser.running,a=e.hls.running,s=r||n||a;return{isServerRecordingOn:r,isBrowserRecordingOn:n,isHLSRecordingOn:a,isStreamingOn:o.running||i.running,isHLSRunning:o.running,isRTMPRunning:i.running,isRecordingOn:s}},exports.useRemoteAVToggle=(i,o,r=R)=>{const n=P(),a=p(t.selectAudioTrackByID(i)),s=p(t.selectVideoTrackByID(o)),l=p(t.selectAudioTrackVolume(null==a?void 0:a.id)),c=p(t.selectPermissions),u=(null==s?void 0:s.enabled)?null==c?void 0:c.mute:null==c?void 0:c.unmute,d=(null==a?void 0:a.enabled)?null==c?void 0:c.mute:null==c?void 0:c.unmute,h=e.useCallback((()=>E(void 0,void 0,void 0,(function*(){yield k(n,a,r)}))),[n,a,r]),g=e.useCallback((()=>E(void 0,void 0,void 0,(function*(){yield k(n,s,r)}))),[n,r,s]),v=e.useCallback((e=>{a&&n.setVolume(e,a.id)}),[n,a]);return{isAudioEnabled:!!(null==a?void 0:a.enabled),isVideoEnabled:!!(null==s?void 0:s.enabled),volume:l,toggleAudio:a&&d?h:void 0,toggleVideo:"regular"===(null==s?void 0:s.source)&&u?g:void 0,setVolume:a?v:void 0}},exports.useScreenShare=(i=R)=>{var o,r;const n=P(),a=p(t.selectIsLocalScreenShared),s=p(t.selectPeerScreenSharing),l=p(t.selectScreenSharesByPeerId(null==s?void 0:s.id)),c=e.useCallback(((e=!1)=>E(void 0,void 0,void 0,(function*(){try{yield n.setScreenShareEnabled(!a,e)}catch(e){i(e,"toggleScreenShare")}}))),[n,a,i]);return{amIScreenSharing:a,screenSharingPeerId:null==s?void 0:s.id,screenSharingPeerName:null==s?void 0:s.name,screenShareVideoTrackId:null===(o=null==l?void 0:l.video)||void 0===o?void 0:o.id,screenShareAudioTrackId:null===(r=null==l?void 0:l.audio)||void 0===r?void 0:r.id,toggleScreenShare:c}},exports.useVideo=({trackId:i,attach:r,threshold:n=.5})=>{const a=P(),s=e.useRef(null),l=p(t.selectVideoTrackByID(i)),{ref:c,inView:u}=o.useInView({threshold:n}),h=e.useCallback((e=>{e&&(s.current=e,c(e))}),[c]);return e.useEffect((()=>{E(void 0,void 0,void 0,(function*(){s.current&&(null==l?void 0:l.id)&&(u&&l.enabled&&!1!==r?yield a.attachVideo(l.id,s.current):yield a.detachVideo(l.id,s.current))}))}),[a,u,s,null==l?void 0:l.id,null==l?void 0:l.enabled,null==l?void 0:l.deviceID,null==l?void 0:l.plugins,r]),e.useEffect((()=>()=>{E(void 0,void 0,void 0,(function*(){if(s.current&&l)try{yield a.detachVideo(l.id,s.current)}catch(e){d.w("detach video error for track",l.id,e)}}))}),[]),{videoRef:h}},exports.useVideoList=({peers:i,maxTileCount:o,maxColCount:n,maxRowCount:a,includeScreenShareForPeer:s=(()=>!1),aspectRatio:l=H,filterNonPublishingPeers:c=!0,offsetY:u=0})=>{const{width:d=0,height:h=0,ref:g}=r.useResizeDetector(),v=((e,t,i,o=!0)=>{if(!e||!t||!i)return[];const r=[];for(const n of e)if(void 0===n.videoTrack&&n.audioTrack&&t[n.audioTrack]?r.push({peer:n}):n.videoTrack&&t[n.videoTrack]?r.push({track:t[n.videoTrack],peer:n}):o||r.push({peer:n}),n.auxiliaryTracks.length>0&&n.auxiliaryTracks.forEach((e=>{const i=t[e];"video"===(null==i?void 0:i.type)&&"regular"===(null==i?void 0:i.source)&&r.push({track:i,peer:n})})),i(n)&&n.auxiliaryTracks.length>0){const e=n.auxiliaryTracks.find((e=>{const i=t[e];return"video"===(null==i?void 0:i.type)&&"screen"===(null==i?void 0:i.source)}));e&&r.push({track:t[e],peer:n})}return r})(i,w().getState(t.selectTracksMap),s,c),f=e.useMemo((()=>{if(l)return l;return{width:function(e){if(0===e.length)return null;const t={};let i=e[0],o=1;for(let r=0;r<e.length;r++){const n=e[r];null===t[n]?t[n]=1:t[n]++,t[n]>o&&(i=n,o=t[n])}return i}(v.filter((e=>{var t,i;return(null===(t=e.track)||void 0===t?void 0:t.width)&&(null===(i=e.track)||void 0===i?void 0:i.height)})).map((e=>{var t,i;return((null===(t=e.track)||void 0===t?void 0:t.width)||1)/((null===(i=e.track)||void 0===i?void 0:i.height)||1)})))||1,height:1}}),[l,v]),p=v.length,{tilesInFirstPage:m,defaultWidth:y,defaultHeight:S,lastPageWidth:P,lastPageHeight:b,isLastPageDifferentFromFirstPage:E}=e.useMemo((()=>M({count:p,parentWidth:Math.floor(d),parentHeight:Math.floor(h)-Math.min(h,u),maxTileCount:o,maxRowCount:a,maxColCount:n,aspectRatio:f})),[p,d,h,o,a,n,f,u]);return{pagesWithTiles:e.useMemo((()=>x({elements:v,tilesInFirstPage:m,onlyOnePage:!1,isLastPageDifferentFromFirstPage:E,defaultWidth:y,defaultHeight:S,lastPageWidth:P,lastPageHeight:b})),[v,m,E,y,S,P,b]),ref:g}},Object.keys(t).forEach((function(e){"default"===e||exports.hasOwnProperty(e)||Object.defineProperty(exports,e,{enumerable:!0,get:function(){return t[e]}})}));
 //# sourceMappingURL=index.cjs.js.map