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

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

@@ -1,24 +0,0 @@
-import { useEffect } from 'react';
-import { selectTrackAudioByID } from '@100mslive/hms-video-store';
-import { useHMSVanillaStore } from './HmsRoomProvider.js';
-
-function useAudioLevel({
-  trackId,
-  getStyle,
-  ref
-}) {
-  const store = useHMSVanillaStore();
-  useEffect(() => store.subscribe(level => {
-    if (!ref.current) {
-      return;
-    }
-
-    const styles = getStyle(level);
-
-    for (const key in styles) {
-      ref.current.style[key] = styles[key];
-    }
-  }, selectTrackAudioByID(trackId)), [trackId]);
-}
-
-export { useAudioLevel };

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

@@ -1,62 +0,0 @@
-import { selectDevices, selectLocalMediaSettings, selectIsAllowedToPublish, selectIsAllowedToSubscribe } from '@100mslive/hms-video-store';
-import { useHMSActions, useHMSStore } from './HmsRoomProvider.js';
-
-const useDevices = () => {
-  const hmsActions = useHMSActions();
-  const devices = useHMSStore(selectDevices);
-  const selectedDevices = useHMSStore(selectLocalMediaSettings);
-  const {
-    video: showVideo,
-    audio: showAudio
-  } = useHMSStore(selectIsAllowedToPublish);
-  const isSubscribing = useHMSStore(selectIsAllowedToSubscribe); // eslint-disable-next-line @typescript-eslint/no-explicit-any
-
-  const handleInputChange = event => {
-    const selectedDevice = event.currentTarget.value;
-    const {
-      name
-    } = event.currentTarget;
-
-    if (selectedDevice !== selectedDevices[name]) {
-      switch (name) {
-        case 'audioInputDeviceId':
-          hmsActions.setAudioSettings({
-            deviceId: selectedDevice
-          });
-          break;
-
-        case 'videoInputDeviceId':
-          hmsActions.setVideoSettings({
-            deviceId: selectedDevice
-          });
-          break;
-
-        case 'audioOutputDeviceId':
-          hmsActions.setAudioOutputDevice(selectedDevice);
-          break;
-      }
-    }
-  };
-
-  const videoInput = devices.videoInput || [];
-  const audioInput = devices.audioInput || [];
-  const audioOutput = devices.audioOutput || [];
-  const showSettings = [showVideo, showAudio, isSubscribing].some(val => !!val);
-
-  if (!showSettings) {
-    return null;
-  }
-
-  return {
-    showVideo,
-    videoInput,
-    showAudio,
-    audioInput,
-    audioOutput,
-    isSubscribing,
-    selectedDevices,
-    handleInputChange
-  };
-};
-
-export { useDevices };

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

@@ -1,40 +0,0 @@
-import { isBrowser } from '@100mslive/hms-video';
-import { selectLocalPeer, selectRoomState, selectIsLocalAudioEnabled, selectIsLocalVideoDisplayEnabled, selectIsAllowedToPublish, HMSRoomState } from '@100mslive/hms-video-store';
-import { useState, useEffect } from 'react';
-import { useHMSActions, useHMSStore } from './HmsRoomProvider.js';
-
-const usePreview = (authToken, userName) => {
-  const [inProgress, setInProgress] = useState(false);
-  const actions = useHMSActions();
-  const localPeer = useHMSStore(selectLocalPeer);
-  const roomState = useHMSStore(selectRoomState);
-  const audioEnabled = useHMSStore(selectIsLocalAudioEnabled);
-  const videoEnabled = useHMSStore(selectIsLocalVideoDisplayEnabled);
-  const isAllowedToPublish = useHMSStore(selectIsAllowedToPublish);
-  const disableJoin = inProgress || roomState !== HMSRoomState.Preview;
-  useEffect(() => {
-    // Call preview only when roomState is in disconnected state
-    if (roomState === HMSRoomState.Disconnected) {
-      actions.preview({
-        userName,
-        authToken
-      });
-    }
-
-    if (isBrowser) {
-      window.onunload = () => actions.leave();
-    }
-  }, [roomState, actions, authToken]);
-  return {
-    localPeer,
-    roomState,
-    audioEnabled,
-    videoEnabled,
-    isAllowedToPublish,
-    disableJoin,
-    actions,
-    setInProgress
-  };
-};
-
-export { usePreview };

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

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

@@ -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/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 };