@100mslive/react-sdk 0.0.0-alpha → 0.0.1-alpha

package/CHANGELOG.md

@@ -0,0 +1,5 @@
+## 0.0.1-alpha
+
+-   `useVideoList()` take config as an object instead of params
+
+## 0.0.0-alpha

package/dist/hooks/useVideoListLayout.d.ts

@@ -1,11 +1,26 @@
 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?: {
+interface UseVideoListProps {
+    /**
+    * Max tiles in a  page. Overrides maxRowCount and maxColCount
+    */
+    maxTileCount: number;
+    maxRowCount: number;
+    maxColCount: number;
     width: number;
     height: number;
-} | undefined) => {
+    showScreenFn: (peer: HMSPeer) => boolean;
+    peers: HMSPeer[];
+    overflow?: 'scroll-x' | 'scroll-y' | 'hidden';
+    aspectRatio?: {
+        width: number;
+        height: number;
+    };
+}
+export declare const useVideoList: ({ maxTileCount, maxColCount, maxRowCount, width, height, showScreenFn, peers, overflow, aspectRatio }: UseVideoListProps) => {
     chunkedTracksWithPeer: (TrackWithPeer & {
         width: number;
         height: number;
     })[][];
 };
+export {};

package/dist/index.cjs.js

@@ -1 +1 @@
-"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}};
+"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=(m=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(m);if(!o)throw new Error(h);return(0,o.store)(e,i)});var m;const P=()=>{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=P,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=({maxTileCount:e,maxColCount:o,maxRowCount:a,width:s,height:r,showScreenFn:n,peers:l,overflow:c,aspectRatio: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,P().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:m,lastPageWidth:w,lastPageHeight:E,isLastPageDifferentFromFirstPage:M}=t.useMemo((()=>H({count:g,parentWidth:Math.floor(s),parentHeight:Math.floor(r),maxTileCount:e,maxRowCount:a,maxColCount:o,aspectRatio:d})),[g,s,r,e,a,o,d]);return{chunkedTracksWithPeer:t.useMemo((()=>v({elements:h,tilesInFirstPage:f,onlyOnePage:"hidden"===c,isLastPageDifferentFromFirstPage:M,defaultWidth:p,defaultHeight:m,lastPageWidth:w,lastPageHeight:E})),[h,f,c,M,p,m,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/src/hooks/useVideoListLayout.js

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

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.1-alpha",
     "author": "100ms",
     "license": "MIT",
     "files": [