@100mslive/react-sdk 0.0.0-alpha → 0.0.3-alpha.1

package/package.json

@@ -4,7 +4,7 @@
     "main": "dist/index.cjs.js",
     "module": "dist/index.js",
     "types": "dist/index.d.ts",
-    "version": "0.0.0-alpha",
+    "version": "0.0.3-alpha.1",
     "author": "100ms",
     "license": "MIT",
     "files": [
@@ -28,8 +28,9 @@
         "react": "^17.0.1"
     },
     "dependencies": {
-        "@100mslive/hms-video": "^0.1.23",
-        "@100mslive/hms-video-store": "^0.2.71",
+        "@100mslive/hms-video-store": "0.2.86-alpha.8",
+        "react-intersection-observer": "^8.33.1",
         "zustand": "^3.6.2"
-    }
+    },
+    "gitHead": "5089477f959447caee9387f6634eac94ba0e95e2"
 }

package/dist/hooks/HmsRoomProvider.d.ts

@@ -1,32 +0,0 @@
-import React from 'react';
-import { HMSStore, HMSActions, HMSNotification, HMSNotifications } from '@100mslive/hms-video-store';
-import { IHMSReactStore } from './types';
-export interface HMSRoomProviderProps {
-    actions?: HMSActions;
-    store?: IHMSReactStore;
-    notifications?: HMSNotifications;
-}
-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: import("zustand").StateSelector<HMSStore, StateSlice>, equalityFn?: import("zustand").EqualityChecker<StateSlice>) => StateSlice;
-/**
- * `useHMSVanillaStore` is a read only hook which returns the vanilla HMSStore.
- * Usage:
- * ```
- * const hmsStore = useHMSVanillaStore();
- * const dominantSpeaker = hmsStore.getState(selectDominantSpeaker);
- * ```
- *
- * Note: There's no need to use the vanilla hmsStore in React components.
- * 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: () => IHMSReactStore;
-export declare const useHMSActions: () => HMSActions;
-/**
- * `useHMSNotifications` is a read only hook which gives the latest notification(HMSNotification) received.
- */
-export declare const useHMSNotifications: () => HMSNotification | null;

package/dist/hooks/store.d.ts

@@ -1,11 +0,0 @@
-import { EqualityChecker, StateSelector } from 'zustand';
-import React from 'react';
-import { HMSActions, HMSStore, HMSNotifications } from '@100mslive/hms-video-store';
-import { IHMSReactStore } from './types';
-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;
-    store: IHMSReactStore;
-    notifications?: HMSNotifications;
-}
-export declare function makeHMSStoreHook(hmsContext: React.Context<HMSContextProviderProps | null>): <StateSlice>(selector: StateSelector<HMSStore, StateSlice>, equalityFn?: EqualityChecker<StateSlice>) => StateSlice;

package/dist/hooks/types.d.ts

@@ -1,5 +0,0 @@
-import { EqualityChecker, StateSelector } from 'zustand';
-import { HMSStore, HMSStoreWrapper } from '@100mslive/hms-video-store';
-export interface IHMSReactStore extends HMSStoreWrapper {
-    <U>(selector: StateSelector<HMSStore, U>, equalityFn?: EqualityChecker<U>): U;
-}

package/dist/hooks/useAVToggle.d.ts

@@ -1,7 +0,0 @@
-export declare const useAVToggle: () => {
-    isLocalAudioEnabled: boolean;
-    isLocalVideoEnabled: boolean;
-    toggleAudio: () => Promise<void>;
-    toggleVideo: () => Promise<void>;
-    isAllowedToPublish: import("@100mslive/hms-video-store").HMSPublishAllowed;
-};

package/dist/hooks/useDevices.d.ts

@@ -1,12 +0,0 @@
-import { HMSMediaSettings } from '@100mslive/hms-video-store';
-import { ChangeEventHandler } from 'react';
-export declare const useDevices: () => {
-    showVideo: boolean;
-    videoInput: MediaDeviceInfo[];
-    showAudio: boolean;
-    audioInput: MediaDeviceInfo[];
-    audioOutput: MediaDeviceInfo[];
-    isSubscribing: boolean;
-    selectedDevices: HMSMediaSettings;
-    handleInputChange: ChangeEventHandler<any>;
-} | null;

package/dist/hooks/usePreview.d.ts

@@ -1,11 +0,0 @@
-import { HMSRoomState } from '@100mslive/hms-video-store';
-export declare const usePreview: (authToken: string, userName: string) => {
-    localPeer: import("@100mslive/hms-video-store").HMSPeer;
-    roomState: HMSRoomState;
-    audioEnabled: boolean;
-    videoEnabled: boolean | undefined;
-    isAllowedToPublish: import("@100mslive/hms-video-store").HMSPublishAllowed;
-    disableJoin: boolean;
-    actions: import("@100mslive/hms-video-store").HMSActions;
-    setInProgress: import("react").Dispatch<import("react").SetStateAction<boolean>>;
-};

package/dist/hooks/useVideoListLayout.d.ts

@@ -1,11 +0,0 @@
-import { HMSPeer } from '@100mslive/hms-video-store';
-import { TrackWithPeer } from '../utils/layout';
-export declare const useVideoList: (maxTileCount: number, maxRowCount: number, maxColCount: number, width: number, height: number, showScreenFn: (peer: HMSPeer) => boolean, peers: HMSPeer[], overflow?: "scroll-x" | "scroll-y" | "hidden" | undefined, aspectRatio?: {
-    width: number;
-    height: number;
-} | undefined) => {
-    chunkedTracksWithPeer: (TrackWithPeer & {
-        width: number;
-        height: number;
-    })[][];
-};

package/dist/hooks/useVideoTile.d.ts

@@ -1,13 +0,0 @@
-import { HMSPeer } from '@100mslive/hms-video-store';
-import { IHMSActions } from '@100mslive/hms-video-store/dist/core/IHMSActions';
-interface UseVideoTileType {
-    videoRef: React.RefObject<HTMLVideoElement>;
-    isAudioOn: boolean;
-    isVideoOn: boolean;
-    actions: IHMSActions;
-    isLocal: boolean;
-    name: string;
-    audioLevel: boolean;
-}
-export declare const useVideoTile: (peer: HMSPeer) => UseVideoTileType;
-export {};

package/dist/index.cjs.js

@@ -1 +0,0 @@
-"use strict";function e(){return e=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var i=arguments[t];for(var o in i)Object.prototype.hasOwnProperty.call(i,o)&&(e[o]=i[o])}return e},e.apply(this,arguments)}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react"),i=require("@100mslive/hms-video-store"),o=require("zustand"),a=require("@100mslive/hms-video");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r,n=s(t),l=s(o);function c(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}!function(e){e[e.VERBOSE=0]="VERBOSE",e[e.DEBUG=1]="DEBUG",e[e.INFO=2]="INFO",e[e.WARN=3]="WARN",e[e.ERROR=4]="ERROR",e[e.NONE=5]="NONE"}(r||(r={}));class u{static v(e,...t){this.log(r.VERBOSE,e,...t)}static d(e,...t){this.log(r.DEBUG,e,...t)}static i(e,...t){this.log(r.INFO,e,...t)}static w(e,...t){this.log(r.WARN,e,...t)}static e(e,...t){this.log(r.ERROR,e,...t)}static log(e,t,...i){if(!(this.level.valueOf()>e.valueOf()))switch(e){case r.VERBOSE:console.log("HMSui-components: ",t,...i);break;case r.DEBUG:console.debug("HMSui-components: ",t,...i);break;case r.INFO:console.info("HMSui-components: ",t,...i);break;case r.WARN:console.warn("HMSui-components: ",t,...i);break;case r.ERROR:console.error("HMSui-components: ",t,...i)}}}u.level=r.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 d="undefined"!=typeof window,g=t.createContext(null);let f;const p=(P=g,(e,i=c)=>{e||u.w("fetching full store without passing any selector may have a heavy performance impact on your website.");const o=t.useContext(P);if(!o)throw new Error(h);return(0,o.store)(e,i)});var P;const m=()=>{const e=t.useContext(g);if(!e)throw new Error(h);return e.store},w=()=>{const e=t.useContext(g);if(!e)throw new Error(h);return e.actions},v=({elements:t,tilesInFirstPage:i,onlyOnePage:o,isLastPageDifferentFromFirstPage:a,defaultWidth:s,defaultHeight:r,lastPageWidth:n,lastPageHeight:l})=>{const c=((e,t,i)=>e.reduce(((e,o,a)=>{const s=Math.floor(a/t);return s>0&&i||(e[s]||(e[s]=[]),e[s].push(o)),e}),[]))(t,i,o);return c.map(((t,i)=>t.map((t=>{const o=i===c.length-1;return e({},t,{height:a&&o?l:r,width:a&&o?n:s})}))))};const b=e=>function(e){if(0===e.length)return null;const t={};let i=e[0],o=1;for(let a=0;a<e.length;a++){const s=e[a];null===t[s]?t[s]=1:t[s]++,t[s]>o&&(i=s,o=t[s])}return i}(e.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)}))),E=(e,t,i,o,a)=>{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 s=o&&a&&o/a;if(void 0!==s&&isNaN(s))throw new Error("Aspect ratio must be a number");let r={area:0,cols:0,rows:0,width:0,height:0};if(void 0!==s)for(let o=i;o>0;o+=-1){const a=Math.ceil(i/o);let n,l;e/(o*s)<=t/a?(n=e/o,l=n/s):(l=t/a,n=l*s);const c=n*l;c>r.area&&(r={area:c,width:n,height:l,rows:a,cols:o})}return r};function H({count:e,parentWidth:t,parentHeight:i,maxTileCount:o,maxRowCount:a,maxColCount:s,aspectRatio:r}){let n=0,l=0,c=0,u=0,h=!1,d=0;if(0===e)return{tilesInFirstPage:d,defaultWidth:n,defaultHeight:l,lastPageWidth:c,lastPageHeight:u,isLastPageDifferentFromFirstPage:h};if(o)({tilesInFirstPage:d,defaultWidth:n,defaultHeight:l,lastPageWidth:c,lastPageHeight:u,isLastPageDifferentFromFirstPage:h}=(({parentWidth:e,parentHeight:t,count:i,maxCount:o,aspectRatio:a})=>{let s=0,r=0,n=0,l=0,c=!1,u=0,h=0;const{width:d,height:g}=E(e,t,Math.min(i,o),a.width,a.height);if(s=d,r=g,u=Math.min(i,o),h=i%o,c=h>0&&i>o,c){const{width:i,height:o}=E(e,t,h,a.width,a.height);n=i,l=o}return{tilesInFirstPage:u,defaultWidth:s,defaultHeight:r,lastPageWidth:n,lastPageHeight:l,isLastPageDifferentFromFirstPage:c}})({parentWidth:t,parentHeight:i,count:e,maxCount:o,aspectRatio:r}));else if(a)({tilesInFirstPage:d,defaultWidth:n,defaultHeight:l,lastPageWidth:c,lastPageHeight:u,isLastPageDifferentFromFirstPage:h}=(({parentWidth:e,parentHeight:t,count:i,maxCount:o,aspectRatio:a})=>{let s=0,r=0,n=0,l=0,c=!1,u=0,h=0;const d=Math.min(Math.ceil(Math.sqrt(i*(a.width/a.height)/(e/t))),o),g=t/d,f=g*(a.width/a.height),p=Math.floor(e/f);if(s=f,r=g,u=Math.min(i,d*p),h=i%(d*p),c=h>0&&i>d*p,c){const i=t/Math.min(Math.ceil(Math.sqrt(h*(a.width/a.height)/(e/t))),o);l=i,n=i*(a.width/a.height)}return{tilesInFirstPage:u,defaultWidth:s,defaultHeight:r,lastPageWidth:n,lastPageHeight:l,isLastPageDifferentFromFirstPage:c}})({parentWidth:t,parentHeight:i,count:e,maxCount:a,aspectRatio:r}));else if(s)({tilesInFirstPage:d,defaultWidth:n,defaultHeight:l,lastPageWidth:c,lastPageHeight:u,isLastPageDifferentFromFirstPage:h}=(({parentWidth:e,parentHeight:t,count:i,maxCount:o,aspectRatio:a})=>{let s=0,r=0,n=0,l=0,c=!1,u=0,h=0;const d=Math.min(Math.ceil(Math.sqrt(i*(e/t)/(a.width/a.height))),o),g=e/d,f=g/(a.width/a.height),p=Math.floor(t/f);if(r=f,s=g,u=Math.min(i,p*d),h=i%(p*d),c=h>0&&i>p*d,c){const i=e/Math.min(Math.ceil(Math.sqrt(h*(e/t)/(a.width/a.height))),o);l=i/(a.width/a.height),n=i}return{tilesInFirstPage:u,defaultWidth:s,defaultHeight:r,lastPageWidth:n,lastPageHeight:l,isLastPageDifferentFromFirstPage:c}})({parentWidth:t,parentHeight:i,count:e,maxCount:s,aspectRatio:r}));else{const{width:o,height:a}=E(t,i,e,r.width,r.height);n=o,l=a,d=e}return{tilesInFirstPage:d,defaultWidth:n,defaultHeight:l,lastPageWidth:c,lastPageHeight:u,isLastPageDifferentFromFirstPage:h}}exports.HMSRoomProvider=({children:o,actions:a,store:s,notifications:r})=>{if(!f)if(a&&s)f={actions:a,store:s},r&&(f.notifications=r);else{const t=new i.HMSReactiveStore,o=()=>{throw new Error("modifying store is not allowed")};f={actions:t.getHMSActions(),store:l.default(e({},t.getStore(),{setState:o,destroy:o})),notifications:t.getNotifications()}}return t.useEffect((()=>{d&&(window.onunload=()=>{f.actions.leave()})}),[]),n.default.createElement(g.Provider,{value:f},o)},exports.calculateLayoutSizes=H,exports.chunkElements=v,exports.getModeAspectRatio=b,exports.useAVToggle=()=>{const e=p(i.selectIsLocalAudioEnabled),o=p(i.selectIsLocalVideoEnabled),a=p(i.selectIsAllowedToPublish),s=w(),r=t.useCallback((async()=>{try{await s.setLocalAudioEnabled(!e)}catch(e){console.error("Cannot toggle audio",e)}}),[e]),n=t.useCallback((async()=>{try{await s.setLocalVideoEnabled(!o)}catch(e){console.error("Cannot toggle video",e)}}),[o]);return{isLocalAudioEnabled:e,isLocalVideoEnabled:o,toggleAudio:r,toggleVideo:n,isAllowedToPublish:a}},exports.useDevices=()=>{const e=w(),t=p(i.selectDevices),o=p(i.selectLocalMediaSettings),{video:a,audio:s}=p(i.selectIsAllowedToPublish),r=p(i.selectIsAllowedToSubscribe),n=t.videoInput||[],l=t.audioInput||[],c=t.audioOutput||[];return[a,s,r].some((e=>!!e))?{showVideo:a,videoInput:n,showAudio:s,audioInput:l,audioOutput:c,isSubscribing:r,selectedDevices:o,handleInputChange:t=>{const i=t.currentTarget.value,{name:a}=t.currentTarget;if(i!==o[a])switch(a){case"audioInputDeviceId":e.setAudioSettings({deviceId:i});break;case"videoInputDeviceId":e.setVideoSettings({deviceId:i});break;case"audioOutputDeviceId":e.setAudioOutputDevice(i)}}}:null},exports.useHMSActions=w,exports.useHMSNotifications=()=>{const e=t.useContext(g),[i,o]=t.useState(null);if(!e)throw new Error(h);return t.useEffect((()=>{if(!e.notifications)return;const t=e.notifications.onNotification((e=>o(e)));return t}),[e.notifications]),i},exports.useHMSStore=p,exports.useHMSVanillaStore=m,exports.usePreview=(e,o)=>{const[s,r]=t.useState(!1),n=w(),l=p(i.selectLocalPeer),c=p(i.selectRoomState),u=p(i.selectIsLocalAudioEnabled),h=p(i.selectIsLocalVideoDisplayEnabled),d=p(i.selectIsAllowedToPublish),g=s||c!==i.HMSRoomState.Preview;return t.useEffect((()=>{c===i.HMSRoomState.Disconnected&&n.preview({userName:o,authToken:e}),a.isBrowser&&(window.onunload=()=>n.leave())}),[c,n,e]),{localPeer:l,roomState:c,audioEnabled:u,videoEnabled:h,isAllowedToPublish:d,disableJoin:g,actions:n,setInProgress:r}},exports.useVideoList=(e,o,a,s,r,n,l,c,u)=>{const h=((e,t,i)=>{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}),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})(l,m().getState(i.selectTracksMap),n),d=t.useMemo((()=>{if(u)return u;return{width:b(h)||1,height:1}}),[u,h]),g=h.length,{tilesInFirstPage:f,defaultWidth:p,defaultHeight:P,lastPageWidth:w,lastPageHeight:E,isLastPageDifferentFromFirstPage:M}=t.useMemo((()=>H({count:g,parentWidth:Math.floor(s),parentHeight:Math.floor(r),maxTileCount:e,maxRowCount:o,maxColCount:a,aspectRatio:d})),[g,s,r,e,o,a,d]);return{chunkedTracksWithPeer:t.useMemo((()=>v({elements:h,tilesInFirstPage:f,onlyOnePage:"hidden"===c,isLastPageDifferentFromFirstPage:M,defaultWidth:p,defaultHeight:P,lastPageWidth:w,lastPageHeight:E})),[h,f,c,M,p,P,w,E])}},exports.useVideoTile=e=>{const o=w(),a=t.useRef(null),s=p(i.selectVideoTrackByPeerID(e.id)),r=p(i.selectIsPeerAudioEnabled(e.id)),n=p(i.selectIsPeerVideoEnabled(e.id)),{isLocal:l,name:c}=e,u=p(i.selectPeerAudioByID(e.id))>0;return t.useEffect((()=>{a.current&&s&&(s.enabled?o.attachVideo(s.id,a.current):o.detachVideo(s.id,a.current))}),[s,o]),{videoRef:a,isAudioOn:r,isVideoOn:n,actions:o,isLocal:l,name:c,audioLevel:u}};

package/dist/index.d.ts

@@ -1,7 +0,0 @@
-export { HMSRoomProvider, useHMSStore, useHMSActions, useHMSNotifications, useHMSVanillaStore } from './hooks/HmsRoomProvider';
-export { chunkElements, getModeAspectRatio, calculateLayoutSizes } from './utils/layout';
-export { usePreview } from './hooks/usePreview';
-export { useVideoTile } from './hooks/useVideoTile';
-export { useVideoList } from './hooks/useVideoListLayout';
-export { useAVToggle } from './hooks/useAVToggle';
-export { useDevices } from './hooks/useDevices';

package/dist/node_modules/zustand/esm/shallow.js

@@ -1 +0,0 @@
-function t(t,e){if(Object.is(t,e))return!0;if("object"!=typeof t||null===t||"object"!=typeof e||null===e)return!1;const r=Object.keys(t);if(r.length!==Object.keys(e).length)return!1;for(let n=0;n<r.length;n++)if(!Object.prototype.hasOwnProperty.call(e,r[n])||!Object.is(t[r[n]],e[r[n]]))return!1;return!0}export{t as default};

package/dist/src/hooks/HmsRoomProvider.js

@@ -1 +0,0 @@
-function t(){return t=Object.assign||function(t){for(var o=1;o<arguments.length;o++){var r=arguments[o];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(t[n]=r[n])}return t},t.apply(this,arguments)}import o,{createContext as r,useEffect as n,useContext as i,useState as e}from"react";import{HMSReactiveStore as s}from"@100mslive/hms-video-store";import c from"zustand";import{makeHMSStoreHook as a,hooksErrorMessage as f}from"./store.js";import{isBrowser as l}from"../utils/isBrowser.js";const u=r(null);let m;const w=({children:r,actions:i,store:e,notifications:a})=>{if(!m)if(i&&e)m={actions:i,store:e},a&&(m.notifications=a);else{const o=new s,r=()=>{throw new Error("modifying store is not allowed")};m={actions:o.getHMSActions(),store:c(t({},o.getStore(),{setState:r,destroy:r})),notifications:o.getNotifications()}}return n((()=>{l&&(window.onunload=()=>{m.actions.leave()})}),[]),o.createElement(u.Provider,{value:m},r)},p=a(u),d=()=>{const t=i(u);if(!t)throw new Error(f);return t.store},h=()=>{const t=i(u);if(!t)throw new Error(f);return t.actions},v=()=>{const t=i(u),[o,r]=e(null);if(!t)throw new Error(f);return n((()=>{if(!t.notifications)return;const o=t.notifications.onNotification((t=>r(t)));return o}),[t.notifications]),o};export{w as HMSRoomProvider,h as useHMSActions,v as useHMSNotifications,p as useHMSStore,d as useHMSVanillaStore};

package/dist/src/hooks/store.js

@@ -1 +0,0 @@
-import{useContext as o}from"react";import e from"../../node_modules/zustand/esm/shallow.js";import t from"../utils/logger.js";const 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 s(s){return(i,n=e)=>{i||t.w("fetching full store without passing any selector may have a heavy performance impact on your website.");const a=o(s);if(!a)throw new Error(r);return(0,a.store)(i,n)}}export{r as hooksErrorMessage,s as makeHMSStoreHook};

package/dist/src/hooks/useAVToggle.js

@@ -1 +0,0 @@
-import{selectIsLocalAudioEnabled as o,selectIsLocalVideoEnabled as e,selectIsAllowedToPublish as t}from"@100mslive/hms-video-store";import{useCallback as r}from"react";import{useHMSStore as a,useHMSActions as i}from"./HmsRoomProvider.js";const l=()=>{const l=a(o),s=a(e),c=a(t),d=i(),n=r((async()=>{try{await d.setLocalAudioEnabled(!l)}catch(o){console.error("Cannot toggle audio",o)}}),[l]),m=r((async()=>{try{await d.setLocalVideoEnabled(!s)}catch(o){console.error("Cannot toggle video",o)}}),[s]);return{isLocalAudioEnabled:l,isLocalVideoEnabled:s,toggleAudio:n,toggleVideo:m,isAllowedToPublish:c}};export{l as useAVToggle};

package/dist/src/hooks/useDevices.js

@@ -1 +0,0 @@
-import{selectDevices as e,selectLocalMediaSettings as t,selectIsAllowedToPublish as i,selectIsAllowedToSubscribe as o}from"@100mslive/hms-video-store";import{useHMSActions as u,useHMSStore as d}from"./HmsRoomProvider.js";const s=()=>{const s=u(),n=d(e),r=d(t),{video:a,audio:c}=d(i),v=d(o),p=n.videoInput||[],I=n.audioInput||[],m=n.audioOutput||[];return[a,c,v].some((e=>!!e))?{showVideo:a,videoInput:p,showAudio:c,audioInput:I,audioOutput:m,isSubscribing:v,selectedDevices:r,handleInputChange:e=>{const t=e.currentTarget.value,{name:i}=e.currentTarget;if(t!==r[i])switch(i){case"audioInputDeviceId":s.setAudioSettings({deviceId:t});break;case"videoInputDeviceId":s.setVideoSettings({deviceId:t});break;case"audioOutputDeviceId":s.setAudioOutputDevice(t)}}}:null};export{s as useDevices};

package/dist/src/hooks/usePreview.js

@@ -1 +0,0 @@
-import{isBrowser as o}from"@100mslive/hms-video";import{selectLocalPeer as e,selectRoomState as r,selectIsLocalAudioEnabled as i,selectIsLocalVideoDisplayEnabled as s,selectIsAllowedToPublish as m,HMSRoomState as t}from"@100mslive/hms-video-store";import{useState as n,useEffect as a}from"react";import{useHMSActions as d,useHMSStore as l}from"./HmsRoomProvider.js";const v=(v,c)=>{const[p,u]=n(!1),w=d(),P=l(e),b=l(r),f=l(i),h=l(s),E=l(m),T=p||b!==t.Preview;return a((()=>{b===t.Disconnected&&w.preview({userName:c,authToken:v}),o&&(window.onunload=()=>w.leave())}),[b,w,v]),{localPeer:P,roomState:b,audioEnabled:f,videoEnabled:h,isAllowedToPublish:E,disableJoin:T,actions:w,setInProgress:u}};export{v as usePreview};

package/dist/src/hooks/useVideoListLayout.js

@@ -1 +0,0 @@
-import{selectTracksMap as t}from"@100mslive/hms-video-store";import{useMemo as e}from"react";import{getVideoTracksFromPeers as i,getModeAspectRatio as a,calculateLayoutSizes as r,chunkElements as o}from"../utils/layout.js";import{useHMSVanillaStore as s}from"./HmsRoomProvider.js";const n=(n,h,l,g,m,d,f,u,P)=>{const p=s().getState(t),c=i(f,p,d),F=e((()=>{if(P)return P;return{width:a(c)||1,height:1}}),[P,c]),H=c.length,{tilesInFirstPage:W,defaultWidth:x,defaultHeight:C,lastPageWidth:v,lastPageHeight:R,isLastPageDifferentFromFirstPage:j}=e((()=>r({count:H,parentWidth:Math.floor(g),parentHeight:Math.floor(m),maxTileCount:n,maxRowCount:h,maxColCount:l,aspectRatio:F})),[H,g,m,n,h,l,F]);return{chunkedTracksWithPeer:e((()=>o({elements:c,tilesInFirstPage:W,onlyOnePage:"hidden"===u,isLastPageDifferentFromFirstPage:j,defaultWidth:x,defaultHeight:C,lastPageWidth:v,lastPageHeight:R})),[c,W,u,j,x,C,v,R])}};export{n as useVideoList};

package/dist/src/hooks/useVideoTile.js

@@ -1 +0,0 @@
-import{selectVideoTrackByPeerID as i,selectIsPeerAudioEnabled as o,selectIsPeerVideoEnabled as e,selectPeerAudioByID as r}from"@100mslive/hms-video-store";import{useRef as d,useEffect as t}from"react";import{useHMSActions as n,useHMSStore as m}from"./HmsRoomProvider.js";const s=s=>{const a=n(),c=d(null),l=m(i(s.id)),u=m(o(s.id)),v=m(e(s.id)),{isLocal:f,name:p}=s,h=m(r(s.id))>0;return t((()=>{c.current&&l&&(l.enabled?a.attachVideo(l.id,c.current):a.detachVideo(l.id,c.current))}),[l,a]),{videoRef:c,isAudioOn:u,isVideoOn:v,actions:a,isLocal:f,name:p,audioLevel:h}};export{s as useVideoTile};

package/dist/src/index.js

@@ -1 +0,0 @@
-export{HMSRoomProvider,useHMSActions,useHMSNotifications,useHMSStore,useHMSVanillaStore}from"./hooks/HmsRoomProvider.js";export{calculateLayoutSizes,chunkElements,getModeAspectRatio}from"./utils/layout.js";export{usePreview}from"./hooks/usePreview.js";export{useVideoTile}from"./hooks/useVideoTile.js";export{useVideoList}from"./hooks/useVideoListLayout.js";export{useAVToggle}from"./hooks/useAVToggle.js";export{useDevices}from"./hooks/useDevices.js";

package/dist/src/utils/isBrowser.js

@@ -1 +0,0 @@
-const e="undefined"!=typeof window;export{e as isBrowser};

package/dist/src/utils/layout.js

@@ -1 +0,0 @@
-function t(){return t=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var i=arguments[e];for(var a in i)Object.prototype.hasOwnProperty.call(i,a)&&(t[a]=i[a])}return t},t.apply(this,arguments)}const e=(t,e,i)=>t.reduce(((t,a,r)=>{const h=Math.floor(r/e);return h>0&&i||(t[h]||(t[h]=[]),t[h].push(a)),t}),[]),i=({elements:i,tilesInFirstPage:a,onlyOnePage:r,isLastPageDifferentFromFirstPage:h,defaultWidth:n,defaultHeight:s,lastPageWidth:o,lastPageHeight:g})=>{const l=e(i,a,r);return l.map(((e,i)=>e.map((e=>{const a=i===l.length-1;return t({},e,{height:h&&a?g:s,width:h&&a?o:n})}))))};function a(t){if(0===t.length)return null;const e={};let i=t[0],a=1;for(let r=0;r<t.length;r++){const h=t[r];null===e[h]?e[h]=1:e[h]++,e[h]>a&&(i=h,a=e[h])}return i}const r=t=>a(t.filter((t=>{var e,i;return(null==(e=t.track)?void 0:e.width)&&(null==(i=t.track)?void 0:i.height)})).map((t=>{var e,i;return((null==(e=t.track)?void 0:e.width)||1)/((null==(i=t.track)?void 0:i.height)||1)}))),h=(t,e,i,a,r)=>{if(t<0||e<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 h=a&&r&&a/r;if(void 0!==h&&isNaN(h))throw new Error("Aspect ratio must be a number");let n={area:0,cols:0,rows:0,width:0,height:0};if(void 0!==h)for(let a=i;a>0;a+=-1){const r=Math.ceil(i/a);let s,o;t/(a*h)<=e/r?(s=t/a,o=s/h):(o=e/r,s=o*h);const g=s*o;g>n.area&&(n={area:g,width:s,height:o,rows:r,cols:a})}return n},n=({parentWidth:t,parentHeight:e,count:i,maxCount:a,aspectRatio:r})=>{let h=0,n=0,s=0,o=0,g=!1,l=0,d=0;const u=Math.min(Math.ceil(Math.sqrt(i*(t/e)/(r.width/r.height))),a),c=t/u,f=c/(r.width/r.height),P=Math.floor(e/f);if(n=f,h=c,l=Math.min(i,P*u),d=i%(P*u),g=d>0&&i>P*u,g){const i=t/Math.min(Math.ceil(Math.sqrt(d*(t/e)/(r.width/r.height))),a);o=i/(r.width/r.height),s=i}return{tilesInFirstPage:l,defaultWidth:h,defaultHeight:n,lastPageWidth:s,lastPageHeight:o,isLastPageDifferentFromFirstPage:g}},s=({parentWidth:t,parentHeight:e,count:i,maxCount:a,aspectRatio:r})=>{let n=0,s=0,o=0,g=0,l=!1,d=0,u=0;const{width:c,height:f}=h(t,e,Math.min(i,a),r.width,r.height);if(n=c,s=f,d=Math.min(i,a),u=i%a,l=u>0&&i>a,l){const{width:i,height:a}=h(t,e,u,r.width,r.height);o=i,g=a}return{tilesInFirstPage:d,defaultWidth:n,defaultHeight:s,lastPageWidth:o,lastPageHeight:g,isLastPageDifferentFromFirstPage:l}},o=({parentWidth:t,parentHeight:e,count:i,maxCount:a,aspectRatio:r})=>{let h=0,n=0,s=0,o=0,g=!1,l=0,d=0;const u=Math.min(Math.ceil(Math.sqrt(i*(r.width/r.height)/(t/e))),a),c=e/u,f=c*(r.width/r.height),P=Math.floor(t/f);if(h=f,n=c,l=Math.min(i,u*P),d=i%(u*P),g=d>0&&i>u*P,g){const i=e/Math.min(Math.ceil(Math.sqrt(d*(r.width/r.height)/(t/e))),a);o=i,s=i*(r.width/r.height)}return{tilesInFirstPage:l,defaultWidth:h,defaultHeight:n,lastPageWidth:s,lastPageHeight:o,isLastPageDifferentFromFirstPage:g}};function g({count:t,parentWidth:e,parentHeight:i,maxTileCount:a,maxRowCount:r,maxColCount:g,aspectRatio:l}){let d=0,u=0,c=0,f=0,P=!1,p=0;if(0===t)return{tilesInFirstPage:p,defaultWidth:d,defaultHeight:u,lastPageWidth:c,lastPageHeight:f,isLastPageDifferentFromFirstPage:P};if(a)({tilesInFirstPage:p,defaultWidth:d,defaultHeight:u,lastPageWidth:c,lastPageHeight:f,isLastPageDifferentFromFirstPage:P}=s({parentWidth:e,parentHeight:i,count:t,maxCount:a,aspectRatio:l}));else if(r)({tilesInFirstPage:p,defaultWidth:d,defaultHeight:u,lastPageWidth:c,lastPageHeight:f,isLastPageDifferentFromFirstPage:P}=o({parentWidth:e,parentHeight:i,count:t,maxCount:r,aspectRatio:l}));else if(g)({tilesInFirstPage:p,defaultWidth:d,defaultHeight:u,lastPageWidth:c,lastPageHeight:f,isLastPageDifferentFromFirstPage:P}=n({parentWidth:e,parentHeight:i,count:t,maxCount:g,aspectRatio:l}));else{const{width:a,height:r}=h(e,i,t,l.width,l.height);d=a,u=r,p=t}return{tilesInFirstPage:p,defaultWidth:d,defaultHeight:u,lastPageWidth:c,lastPageHeight:f,isLastPageDifferentFromFirstPage:P}}const l=(t,e,i)=>{if(!t||!e||!i)return[];const a=[];for(const r of t)if(void 0===r.videoTrack&&r.audioTrack&&e[r.audioTrack]?a.push({peer:r}):r.videoTrack&&e[r.videoTrack]&&a.push({track:e[r.videoTrack],peer:r}),i(r)&&r.auxiliaryTracks.length>0){const t=r.auxiliaryTracks.find((t=>{const i=e[t];return"video"===(null==i?void 0:i.type)&&"screen"===(null==i?void 0:i.source)}));t&&a.push({track:e[t],peer:r})}return a};export{g as calculateLayoutSizes,e as chunk,i as chunkElements,r as getModeAspectRatio,n as getTileSizesWithColConstraint,s as getTileSizesWithPageConstraint,o as getTileSizesWithRowConstraint,l as getVideoTracksFromPeers,h as largestRect,a as mode};

package/dist/src/utils/logger.js

@@ -1 +0,0 @@
-var o;!function(o){o[o.VERBOSE=0]="VERBOSE",o[o.DEBUG=1]="DEBUG",o[o.INFO=2]="INFO",o[o.WARN=3]="WARN",o[o.ERROR=4]="ERROR",o[o.NONE=5]="NONE"}(o||(o={}));class s{static v(s,...e){this.log(o.VERBOSE,s,...e)}static d(s,...e){this.log(o.DEBUG,s,...e)}static i(s,...e){this.log(o.INFO,s,...e)}static w(s,...e){this.log(o.WARN,s,...e)}static e(s,...e){this.log(o.ERROR,s,...e)}static log(s,e,...t){if(!(this.level.valueOf()>s.valueOf()))switch(s){case o.VERBOSE:console.log("HMSui-components: ",e,...t);break;case o.DEBUG:console.debug("HMSui-components: ",e,...t);break;case o.INFO:console.info("HMSui-components: ",e,...t);break;case o.WARN:console.warn("HMSui-components: ",e,...t);break;case o.ERROR:console.error("HMSui-components: ",e,...t)}}}s.level=o.VERBOSE;export{o as HMSLogLevel,s as default};

package/dist/utils/groupBy.d.ts

@@ -1,2 +0,0 @@
-import { HMSPeer } from '@100mslive/hms-video-store';
-export declare const groupBy: (peers: HMSPeer[]) => [string, HMSPeer[]][];

package/dist/utils/isBrowser.d.ts

@@ -1 +0,0 @@
-export declare const isBrowser: boolean;

package/dist/utils/layout.d.ts

@@ -1,109 +0,0 @@
-import { HMSPeer, HMSTrack, HMSTrackID } from '@100mslive/hms-video-store';
-export declare const chunk: <T>(elements: T[], chunkSize: number, onlyOnePage: boolean) => T[][];
-interface ChunkElements<T> {
-    elements: T[];
-    tilesInFirstPage: number;
-    onlyOnePage: boolean;
-    isLastPageDifferentFromFirstPage: boolean;
-    defaultWidth: number;
-    defaultHeight: number;
-    lastPageWidth: number;
-    lastPageHeight: number;
-}
-/**
- * Given a list of tracks/elements and some constraints, group the tracks in separate pages.
- * @return 2D list for every page which has the original element and height and width
- * for its tile.
- */
-export declare const chunkElements: <T>({ elements, tilesInFirstPage, onlyOnePage, isLastPageDifferentFromFirstPage, defaultWidth, defaultHeight, lastPageWidth, lastPageHeight, }: ChunkElements<T>) => (T & {
-    width: number;
-    height: number;
-})[][];
-/**
- * Mathematical mode - the element with the highest occurrence in an array
- * @param array
- */
-export declare function mode(array: number[]): number | null;
-export declare type TrackWithPeer = {
-    track?: HMSTrack;
-    peer: HMSPeer;
-};
-/**
- * get the aspect ration occurring with the highest frequency
- * @param tracks - video tracks to infer aspect ratios from
- */
-export declare const getModeAspectRatio: (tracks: TrackWithPeer[]) => number | null;
-interface GetTileSizesInList {
-    count: number;
-    parentWidth: number;
-    parentHeight: number;
-    maxTileCount?: number;
-    maxRowCount?: number;
-    maxColCount?: number;
-    aspectRatio: {
-        width: number;
-        height: number;
-    };
-}
-interface GetTileSizes {
-    parentWidth: number;
-    parentHeight: number;
-    count: number;
-    maxCount: number;
-    aspectRatio: {
-        width: number;
-        height: number;
-    };
-}
-/**
- * Finds the largest rectangle area when trying to place N rectangle into a containing
- * rectangle without rotation.
- *
- * @param {Number}  containerWidth      The width of the container.
- * @param {Number}  containerHeight     The height of the container.
- * @param {Number}  numRects            How many rectangles must fit within.
- * @param {Number}  width               The unscaled width of the rectangles to be placed.
- * @param {Number}  height              The unscaled height of the rectangles to be placed.
- * @return {Object}                     The area and number of rows and columns that fit.
- */
-export declare const largestRect: (containerWidth: number, containerHeight: number, numRects: number, width: number | undefined, height: number | undefined) => {
-    area: number;
-    cols: number;
-    rows: number;
-    width: number;
-    height: number;
-};
-export declare const getTileSizesWithColConstraint: ({ parentWidth, parentHeight, count, maxCount, aspectRatio, }: GetTileSizes) => {
-    tilesInFirstPage: number;
-    defaultWidth: number;
-    defaultHeight: number;
-    lastPageWidth: number;
-    lastPageHeight: number;
-    isLastPageDifferentFromFirstPage: boolean;
-};
-export declare const getTileSizesWithPageConstraint: ({ parentWidth, parentHeight, count, maxCount, aspectRatio, }: GetTileSizes) => {
-    tilesInFirstPage: number;
-    defaultWidth: number;
-    defaultHeight: number;
-    lastPageWidth: number;
-    lastPageHeight: number;
-    isLastPageDifferentFromFirstPage: boolean;
-};
-export declare const getTileSizesWithRowConstraint: ({ parentWidth, parentHeight, count, maxCount, aspectRatio, }: GetTileSizes) => {
-    tilesInFirstPage: number;
-    defaultWidth: number;
-    defaultHeight: number;
-    lastPageWidth: number;
-    lastPageHeight: number;
-    isLastPageDifferentFromFirstPage: boolean;
-};
-export declare function calculateLayoutSizes({ count, parentWidth, parentHeight, maxTileCount, maxRowCount, maxColCount, aspectRatio, }: GetTileSizesInList): {
-    tilesInFirstPage: number;
-    defaultWidth: number;
-    defaultHeight: number;
-    lastPageWidth: number;
-    lastPageHeight: number;
-    isLastPageDifferentFromFirstPage: boolean;
-};
-export declare const getVideoTracksFromPeers: (peers: HMSPeer[], tracks: Record<HMSTrackID, HMSTrack>, showScreenFn: (peer: HMSPeer) => boolean) => TrackWithPeer[];
-export {};

package/dist/utils/logger.d.ts

@@ -1,17 +0,0 @@
-export declare enum HMSLogLevel {
-    VERBOSE = 0,
-    DEBUG = 1,
-    INFO = 2,
-    WARN = 3,
-    ERROR = 4,
-    NONE = 5
-}
-export default class HMSLogger {
-    static level: HMSLogLevel;
-    static v(tag: string, ...data: any[]): void;
-    static d(tag: string, ...data: any[]): void;
-    static i(tag: string, ...data: any[]): void;
-    static w(tag: string, ...data: any[]): void;
-    static e(tag: string, ...data: any[]): void;
-    private static log;
-}