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

package/dist/packages/react-sdk/src/hooks/useVideo.js

@@ -0,0 +1,44 @@
+import { selectTrackByID } from '@100mslive/hms-video-store';
+import { useRef, useCallback, useEffect } from 'react';
+import { useInView } from '../../../../node_modules/react-intersection-observer/react-intersection-observer.m.js';
+import { useHMSActions, useHMSStore } from './HmsRoomProvider.js';
+
+const useVideo = trackId => {
+  const actions = useHMSActions();
+  const videoRef = useRef(null);
+  const {
+    ref: inViewRef,
+    inView
+  } = useInView({
+    threshold: 0.5
+  });
+  const setRefs = useCallback(node => {
+    videoRef.current = node;
+    inViewRef(node);
+  }, [inViewRef]);
+  const hmsStoreVideoTrack = useHMSStore(selectTrackByID(trackId));
+  useEffect(() => {
+    (async () => {
+      if (videoRef.current && hmsStoreVideoTrack) {
+        if (inView) {
+          if (hmsStoreVideoTrack.enabled) {
+            console.log('****** ENABLE VIDEO *******'); // attach when in view and enabled
+
+            await actions.attachVideo(hmsStoreVideoTrack.id, videoRef.current);
+          } else {
+            console.log('****** DETACH VIDEO *******'); // detach when in view but not enabled
+
+            await actions.detachVideo(hmsStoreVideoTrack.id, videoRef.current);
+          }
+        } else {
+          // detach when not in view
+          console.log('****** DETACH VIDEO *******');
+          await actions.detachVideo(hmsStoreVideoTrack.id, videoRef.current);
+        }
+      }
+    })();
+  }, [inView, videoRef, hmsStoreVideoTrack == null ? void 0 : hmsStoreVideoTrack.id, hmsStoreVideoTrack == null ? void 0 : hmsStoreVideoTrack.enabled, hmsStoreVideoTrack == null ? void 0 : hmsStoreVideoTrack.deviceID, hmsStoreVideoTrack == null ? void 0 : hmsStoreVideoTrack.plugins]);
+  return setRefs;
+};
+
+export { useVideo };

package/dist/packages/react-sdk/src/hooks/useVideoListLayout.js

@@ -0,0 +1,65 @@
+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/packages/react-sdk/src/hooks/useVideoTile.js

@@ -0,0 +1,36 @@
+import { selectVideoTrackByPeerID, selectIsPeerAudioEnabled, selectIsPeerVideoEnabled, selectPeerAudioByID } from '@100mslive/hms-video-store';
+import { useRef, useEffect } from 'react';
+import { useHMSActions, useHMSStore } from './HmsRoomProvider.js';
+
+const useVideoTile = peer => {
+  const actions = useHMSActions();
+  const videoRef = useRef(null);
+  const videoTrack = useHMSStore(selectVideoTrackByPeerID(peer.id));
+  const isAudioOn = useHMSStore(selectIsPeerAudioEnabled(peer.id));
+  const isVideoOn = useHMSStore(selectIsPeerVideoEnabled(peer.id));
+  const {
+    isLocal,
+    name
+  } = peer;
+  const audioLevel = useHMSStore(selectPeerAudioByID(peer.id)) > 0;
+  useEffect(() => {
+    if (videoRef.current && videoTrack) {
+      if (videoTrack.enabled) {
+        actions.attachVideo(videoTrack.id, videoRef.current);
+      } else {
+        actions.detachVideo(videoTrack.id, videoRef.current);
+      }
+    }
+  }, [videoTrack, actions]);
+  return {
+    videoRef,
+    isAudioOn,
+    isVideoOn,
+    actions,
+    isLocal,
+    name,
+    audioLevel
+  };
+};
+
+export { useVideoTile };

package/dist/packages/react-sdk/src/index.js

@@ -0,0 +1,9 @@
+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 { useVideo } from './hooks/useVideo.js';
+export { useAudioLevel } from './hooks/useAudioLevel.js';

package/dist/packages/react-sdk/src/utils/isBrowser.js

@@ -0,0 +1,2 @@
+const isBrowser = typeof window !== 'undefined';
+export { isBrowser };

package/dist/packages/react-sdk/src/utils/layout.js

@@ -0,0 +1,434 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+const chunk = (elements, chunkSize, onlyOnePage) => elements.reduce((resultArray, tile, index) => {
+  const chunkIndex = Math.floor(index / chunkSize);
+
+  if (chunkIndex > 0 && onlyOnePage) {
+    return resultArray;
+  }
+
+  if (!resultArray[chunkIndex]) {
+    resultArray[chunkIndex] = []; // start a new chunk
+  }
+
+  resultArray[chunkIndex].push(tile);
+  return resultArray;
+}, []);
+/**
+ * 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.
+ */
+
+
+const chunkElements = ({
+  elements,
+  tilesInFirstPage,
+  onlyOnePage,
+  isLastPageDifferentFromFirstPage,
+  defaultWidth,
+  defaultHeight,
+  lastPageWidth,
+  lastPageHeight
+}) => {
+  const chunks = chunk(elements, tilesInFirstPage, onlyOnePage);
+  return chunks.map((ch, page) => ch.map(element => {
+    const isLastPage = page === chunks.length - 1;
+    const width = isLastPageDifferentFromFirstPage && isLastPage ? lastPageWidth : defaultWidth;
+    const height = isLastPageDifferentFromFirstPage && isLastPage ? lastPageHeight : defaultHeight;
+    return _extends({}, element, {
+      height,
+      width
+    });
+  }));
+};
+/**
+ * Mathematical mode - the element with the highest occurrence in an array
+ * @param array
+ */
+
+
+function mode(array) {
+  if (array.length === 0) {
+    return null;
+  }
+
+  const modeMap = {};
+  let maxEl = array[0];
+  let maxCount = 1;
+
+  for (let i = 0; i < array.length; i++) {
+    const el = array[i];
+
+    if (modeMap[el] === null) {
+      modeMap[el] = 1;
+    } else {
+      modeMap[el]++;
+    }
+
+    if (modeMap[el] > maxCount) {
+      maxEl = el;
+      maxCount = modeMap[el];
+    }
+  }
+
+  return maxEl;
+}
+/**
+ * get the aspect ration occurring with the highest frequency
+ * @param tracks - video tracks to infer aspect ratios from
+ */
+
+
+const getModeAspectRatio = tracks => mode(tracks.filter(track => {
+  var _track$track, _track$track2;
+
+  return ((_track$track = track.track) == null ? void 0 : _track$track.width) && ((_track$track2 = track.track) == null ? void 0 : _track$track2.height);
+}).map(track => {
+  var _track$track3, _track$track4;
+
+  const width = (_track$track3 = track.track) == null ? void 0 : _track$track3.width;
+  const height = (_track$track4 = track.track) == null ? void 0 : _track$track4.height; // Default to 1 if there are no video tracks
+
+  return (width || 1) / (height || 1);
+}));
+/**
+ * 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.
+ */
+
+
+const largestRect = (containerWidth, containerHeight, numRects, width, height) => {
+  if (containerWidth < 0 || containerHeight < 0) {
+    throw new Error('Container must have a non-negative area');
+  }
+
+  if (numRects < 1 || !Number.isInteger(numRects)) {
+    throw new Error('Number of shapes to place must be a positive integer');
+  }
+
+  const aspectRatio = width && height && width / height;
+
+  if (aspectRatio !== undefined && isNaN(aspectRatio)) {
+    throw new Error('Aspect ratio must be a number');
+  }
+
+  let best = {
+    area: 0,
+    cols: 0,
+    rows: 0,
+    width: 0,
+    height: 0
+  }; // TODO: Don't start with obviously-`ba`d candidates.
+
+  const startCols = numRects;
+  const colDelta = -1; // For each combination of rows + cols that can fit the number of rectangles,
+  // place them and see the area.
+
+  if (aspectRatio !== undefined) {
+    for (let cols = startCols; cols > 0; cols += colDelta) {
+      const rows = Math.ceil(numRects / cols);
+      const hScale = containerWidth / (cols * aspectRatio);
+      const vScale = containerHeight / rows;
+
+      let _width;
+
+      let _height; // Determine which axis is the constraint.
+
+
+      if (hScale <= vScale) {
+        _width = containerWidth / cols;
+        _height = _width / aspectRatio;
+      } else {
+        _height = containerHeight / rows;
+        _width = _height * aspectRatio;
+      }
+
+      const area = _width * _height;
+
+      if (area > best.area) {
+        best = {
+          area,
+          width: _width,
+          height: _height,
+          rows,
+          cols
+        };
+      }
+    }
+  }
+
+  return best;
+};
+
+const getTileSizesWithColConstraint = ({
+  parentWidth,
+  parentHeight,
+  count,
+  maxCount,
+  aspectRatio
+}) => {
+  let defaultWidth = 0;
+  let defaultHeight = 0;
+  let lastPageWidth = 0;
+  let lastPageHeight = 0;
+  let isLastPageDifferentFromFirstPage = false;
+  let tilesInFirstPage = 0;
+  let tilesinLastPage = 0;
+  const cols = Math.min(Math.ceil(Math.sqrt(count * (parentWidth / parentHeight) / (aspectRatio.width / aspectRatio.height))), maxCount);
+  const width = parentWidth / cols;
+  const height = width / (aspectRatio.width / aspectRatio.height);
+  const rows = Math.floor(parentHeight / height);
+  defaultHeight = height;
+  defaultWidth = width;
+  tilesInFirstPage = Math.min(count, rows * cols);
+  tilesinLastPage = count % (rows * cols);
+  isLastPageDifferentFromFirstPage = tilesinLastPage > 0 && count > rows * cols;
+
+  if (isLastPageDifferentFromFirstPage) {
+    const _cols = Math.min(Math.ceil(Math.sqrt(tilesinLastPage * (parentWidth / parentHeight) / (aspectRatio.width / aspectRatio.height))), maxCount);
+
+    const _width2 = parentWidth / _cols;
+
+    const _height2 = _width2 / (aspectRatio.width / aspectRatio.height);
+
+    lastPageHeight = _height2;
+    lastPageWidth = _width2;
+  }
+
+  return {
+    tilesInFirstPage,
+    defaultWidth,
+    defaultHeight,
+    lastPageWidth,
+    lastPageHeight,
+    isLastPageDifferentFromFirstPage
+  };
+};
+
+const getTileSizesWithPageConstraint = ({
+  parentWidth,
+  parentHeight,
+  count,
+  maxCount,
+  aspectRatio
+}) => {
+  let defaultWidth = 0;
+  let defaultHeight = 0;
+  let lastPageWidth = 0;
+  let lastPageHeight = 0;
+  let isLastPageDifferentFromFirstPage = false;
+  let tilesInFirstPage = 0;
+  let tilesinLastPage = 0;
+  const {
+    width: initialWidth,
+    height: initialHeight
+  } = largestRect(parentWidth, parentHeight, Math.min(count, maxCount), aspectRatio.width, aspectRatio.height);
+  defaultWidth = initialWidth;
+  defaultHeight = initialHeight;
+  tilesInFirstPage = Math.min(count, maxCount);
+  tilesinLastPage = count % maxCount;
+  isLastPageDifferentFromFirstPage = tilesinLastPage > 0 && count > maxCount;
+
+  if (isLastPageDifferentFromFirstPage) {
+    const {
+      width: remWidth,
+      height: remHeight
+    } = largestRect(parentWidth, parentHeight, tilesinLastPage, aspectRatio.width, aspectRatio.height);
+    lastPageWidth = remWidth;
+    lastPageHeight = remHeight;
+  }
+
+  return {
+    tilesInFirstPage,
+    defaultWidth,
+    defaultHeight,
+    lastPageWidth,
+    lastPageHeight,
+    isLastPageDifferentFromFirstPage
+  };
+};
+
+const getTileSizesWithRowConstraint = ({
+  parentWidth,
+  parentHeight,
+  count,
+  maxCount,
+  aspectRatio
+}) => {
+  let defaultWidth = 0;
+  let defaultHeight = 0;
+  let lastPageWidth = 0;
+  let lastPageHeight = 0;
+  let isLastPageDifferentFromFirstPage = false;
+  let tilesInFirstPage = 0;
+  let tilesinLastPage = 0;
+  const rows = Math.min(Math.ceil(Math.sqrt(count * (aspectRatio.width / aspectRatio.height) / (parentWidth / parentHeight))), maxCount);
+  const height = parentHeight / rows;
+  const width = height * (aspectRatio.width / aspectRatio.height);
+  const cols = Math.floor(parentWidth / width);
+  defaultWidth = width;
+  defaultHeight = height;
+  tilesInFirstPage = Math.min(count, rows * cols);
+  tilesinLastPage = count % (rows * cols);
+  isLastPageDifferentFromFirstPage = tilesinLastPage > 0 && count > rows * cols;
+
+  if (isLastPageDifferentFromFirstPage) {
+    const _rows = Math.min(Math.ceil(Math.sqrt(tilesinLastPage * (aspectRatio.width / aspectRatio.height) / (parentWidth / parentHeight))), maxCount);
+
+    const _height3 = parentHeight / _rows;
+
+    const _width3 = _height3 * (aspectRatio.width / aspectRatio.height);
+
+    lastPageHeight = _height3;
+    lastPageWidth = _width3;
+  }
+
+  return {
+    tilesInFirstPage,
+    defaultWidth,
+    defaultHeight,
+    lastPageWidth,
+    lastPageHeight,
+    isLastPageDifferentFromFirstPage
+  };
+};
+
+function calculateLayoutSizes({
+  count,
+  parentWidth,
+  parentHeight,
+  maxTileCount,
+  maxRowCount,
+  maxColCount,
+  aspectRatio
+}) {
+  let defaultWidth = 0;
+  let defaultHeight = 0;
+  let lastPageWidth = 0;
+  let lastPageHeight = 0;
+  let isLastPageDifferentFromFirstPage = false;
+  let tilesInFirstPage = 0;
+
+  if (count === 0) {
+    // no tracks to show
+    return {
+      tilesInFirstPage,
+      defaultWidth,
+      defaultHeight,
+      lastPageWidth,
+      lastPageHeight,
+      isLastPageDifferentFromFirstPage
+    };
+  }
+
+  if (maxTileCount) {
+    ({
+      tilesInFirstPage,
+      defaultWidth,
+      defaultHeight,
+      lastPageWidth,
+      lastPageHeight,
+      isLastPageDifferentFromFirstPage
+    } = getTileSizesWithPageConstraint({
+      parentWidth,
+      parentHeight,
+      count,
+      maxCount: maxTileCount,
+      aspectRatio
+    }));
+  } else if (maxRowCount) {
+    ({
+      tilesInFirstPage,
+      defaultWidth,
+      defaultHeight,
+      lastPageWidth,
+      lastPageHeight,
+      isLastPageDifferentFromFirstPage
+    } = getTileSizesWithRowConstraint({
+      parentWidth,
+      parentHeight,
+      count,
+      maxCount: maxRowCount,
+      aspectRatio
+    }));
+  } else if (maxColCount) {
+    ({
+      tilesInFirstPage,
+      defaultWidth,
+      defaultHeight,
+      lastPageWidth,
+      lastPageHeight,
+      isLastPageDifferentFromFirstPage
+    } = getTileSizesWithColConstraint({
+      parentWidth,
+      parentHeight,
+      count,
+      maxCount: maxColCount,
+      aspectRatio
+    }));
+  } else {
+    const {
+      width,
+      height
+    } = largestRect(parentWidth, parentHeight, count, aspectRatio.width, aspectRatio.height);
+    defaultWidth = width;
+    defaultHeight = height;
+    tilesInFirstPage = count;
+  }
+
+  return {
+    tilesInFirstPage,
+    defaultWidth,
+    defaultHeight,
+    lastPageWidth,
+    lastPageHeight,
+    isLastPageDifferentFromFirstPage
+  };
+}
+
+const getVideoTracksFromPeers = (peers, tracks, showScreenFn) => {
+  if (!peers || !tracks || !showScreenFn) {
+    return [];
+  }
+
+  const videoTracks = [];
+
+  for (const peer of peers) {
+    if (peer.videoTrack === undefined && peer.audioTrack && tracks[peer.audioTrack]) {
+      videoTracks.push({
+        peer
+      });
+    } else if (peer.videoTrack && tracks[peer.videoTrack]) {
+      videoTracks.push({
+        track: tracks[peer.videoTrack],
+        peer
+      });
+    }
+
+    if (showScreenFn(peer) && peer.auxiliaryTracks.length > 0) {
+      const screenShareTrackID = peer.auxiliaryTracks.find(trackID => {
+        const track = tracks[trackID];
+        return (track == null ? void 0 : track.type) === 'video' && (track == null ? void 0 : track.source) === 'screen';
+      }); // Don't show tile if screenshare only has audio
+
+      if (screenShareTrackID) {
+        videoTracks.push({
+          track: tracks[screenShareTrackID],
+          peer
+        });
+      }
+    }
+  }
+
+  return videoTracks;
+};
+
+export { calculateLayoutSizes, chunk, chunkElements, getModeAspectRatio, getTileSizesWithColConstraint, getTileSizesWithPageConstraint, getTileSizesWithRowConstraint, getVideoTracksFromPeers, largestRect, mode };

package/dist/packages/react-sdk/src/utils/logger.js

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

package/dist/src/hooks/useAudioLevel.js

@@ -0,0 +1 @@
+import{useEffect as r}from"react";import{selectTrackAudioByID as o}from"@100mslive/hms-video-store";import{useHMSVanillaStore as t}from"./HmsRoomProvider.js";function e({trackId:e,getStyle:s,ref:c}){const i=t();r((()=>i.subscribe((r=>{if(!c.current)return;const o=s(r);console.log(o,r);for(const r in o)c.current.style[r]=o[r]}),o(e))),[e])}export{e as useAudioLevel};

package/dist/src/hooks/usePreview.js

@@ -1 +1 @@
-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};
+import{isBrowser as e}from"@100mslive/hms-video";import{selectLocalPeer as o,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="preview")=>{const[p,u]=n(!1),w=d(),P=l(o),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}),e&&(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/useVideo.js

@@ -0,0 +1 @@
+import{selectTrackByID as o}from"@100mslive/hms-video-store";import{useRef as e,useCallback as r,useEffect as i}from"react";import{useInView as t}from"react-intersection-observer";import{useHMSActions as n,useHMSStore as l}from"./HmsRoomProvider.js";const d=d=>{const c=n(),s=e(null),{ref:a,inView:m}=t({threshold:.5}),u=r((o=>{s.current=o,a(o)}),[a]),v=l(o(d));return i((()=>{(async()=>{s.current&&v&&(m&&v.enabled?(console.log("****** ENABLE VIDEO *******"),await c.attachVideo(v.id,s.current)):(console.log("****** DETACH VIDEO *******"),await c.detachVideo(v.id,s.current)))})()}),[m,s,null==v?void 0:v.id,null==v?void 0:v.enabled,null==v?void 0:v.deviceID,null==v?void 0:v.plugins]),u};export{d as useVideo};

package/dist/src/hooks/useVideoList.js

@@ -0,0 +1 @@
+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:l,maxRowCount:h,width:m,height:g,showScreenFn:u=(()=>!1),peers:d,overflow:f="scroll-x",aspectRatio:P})=>{const c=s().getState(t),p=o(d,c,u),x=e((()=>{if(P)return P;return{width:a(p)||1,height:1}}),[P,p]),C=p.length,{tilesInFirstPage:F,defaultWidth:w,defaultHeight:H,lastPageWidth:W,lastPageHeight:R,isLastPageDifferentFromFirstPage:v}=e((()=>i({count:C,parentWidth:Math.floor(m),parentHeight:Math.floor(g),maxTileCount:n,maxRowCount:h,maxColCount:l,aspectRatio:x})),[C,m,g,n,h,l,x]);return{chunkedTracksWithPeer:e((()=>r({elements:p,tilesInFirstPage:F,onlyOnePage:"hidden"===f,isLastPageDifferentFromFirstPage:v,defaultWidth:w,defaultHeight:H,lastPageWidth:W,lastPageHeight:R})),[p,F,f,v,w,H,W,R])}};export{n as useVideoList};