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

package/dist/src/hooks/useVideoListLayout.js

@@ -1 +1,65 @@
-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};
+import { selectTracksMap } from '@100mslive/hms-video-store';
+import { useMemo } from 'react';
+import { getVideoTracksFromPeers, getModeAspectRatio, calculateLayoutSizes, chunkElements } from '../utils/layout.js';
+import { useHMSVanillaStore } from './HmsRoomProvider.js';
+
+const useVideoList = ({
+  maxTileCount,
+  maxColCount,
+  maxRowCount,
+  width,
+  height,
+  showScreenFn,
+  peers,
+  overflow,
+  aspectRatio
+}) => {
+  const store = useHMSVanillaStore();
+  const tracksMap = store.getState(selectTracksMap);
+  const tracksWithPeer = getVideoTracksFromPeers(peers, tracksMap, showScreenFn);
+  const finalAspectRatio = useMemo(() => {
+    if (aspectRatio) {
+      return aspectRatio;
+    }
+
+    const modeAspectRatio = getModeAspectRatio(tracksWithPeer); // Default to 1 if there are no video tracks
+
+    return {
+      width: modeAspectRatio || 1,
+      height: 1
+    };
+  }, [aspectRatio, tracksWithPeer]);
+  const count = tracksWithPeer.length;
+  const {
+    tilesInFirstPage,
+    defaultWidth,
+    defaultHeight,
+    lastPageWidth,
+    lastPageHeight,
+    isLastPageDifferentFromFirstPage
+  } = useMemo(() => // Flooring since there's a bug in react-slick where it converts widdh into a number
+  calculateLayoutSizes({
+    count,
+    parentWidth: Math.floor(width),
+    parentHeight: Math.floor(height),
+    maxTileCount,
+    maxRowCount,
+    maxColCount,
+    aspectRatio: finalAspectRatio
+  }), [count, width, height, maxTileCount, maxRowCount, maxColCount, finalAspectRatio]);
+  const chunkedTracksWithPeer = useMemo(() => chunkElements({
+    elements: tracksWithPeer,
+    tilesInFirstPage,
+    onlyOnePage: overflow === 'hidden',
+    isLastPageDifferentFromFirstPage,
+    defaultWidth,
+    defaultHeight,
+    lastPageWidth,
+    lastPageHeight
+  }), [tracksWithPeer, tilesInFirstPage, overflow, isLastPageDifferentFromFirstPage, defaultWidth, defaultHeight, lastPageWidth, lastPageHeight]);
+  return {
+    chunkedTracksWithPeer
+  };
+};
+
+export { useVideoList };

package/dist/src/index.js

@@ -1 +1 @@
-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";
+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/useVideoList.js";export{useAVToggle}from"./hooks/useAVToggle.js";export{useDevices}from"./hooks/useDevices.js";export{useVideo}from"./hooks/useVideo.js";export{useAudioLevel}from"./hooks/useAudioLevel.js";

package/package.json

@@ -4,7 +4,7 @@
     "main": "dist/index.cjs.js",
     "module": "dist/index.js",
     "types": "dist/index.d.ts",
-    "version": "0.0.1-alpha",
+    "version": "0.0.2-alpha",
     "author": "100ms",
     "license": "MIT",
     "files": [
@@ -30,6 +30,7 @@
     "dependencies": {
         "@100mslive/hms-video": "^0.1.23",
         "@100mslive/hms-video-store": "^0.2.71",
+        "react-intersection-observer": "^8.33.1",
         "zustand": "^3.6.2"
     }
 }

package/CHANGELOG.md

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