@100mslive/react-sdk 0.0.2-alpha → 0.0.3-alpha.3

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

@@ -1,36 +0,0 @@
-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

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

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

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

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

@@ -1,434 +0,0 @@
-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

@@ -1,74 +0,0 @@
-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/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/useAudioLevel.js

@@ -1 +0,0 @@
-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/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 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

@@ -1 +0,0 @@
-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

@@ -1 +0,0 @@
-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};

package/dist/src/hooks/useVideoListLayout.js

@@ -1,65 +0,0 @@
-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/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/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/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};