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

package/dist/node_modules/react-intersection-observer/react-intersection-observer.m.js

@@ -1,244 +0,0 @@
-import * as React from 'react';
-import { useEffect } from 'react';
-var observerMap = new Map();
-var RootIds = new WeakMap();
-var rootId = 0;
-var unsupportedValue = undefined;
-/**
- * Generate a unique ID for the root element
- * @param root
- */
-
-function getRootId(root) {
-  if (!root) return '0';
-  if (RootIds.has(root)) return RootIds.get(root);
-  rootId += 1;
-  RootIds.set(root, rootId.toString());
-  return RootIds.get(root);
-}
-/**
- * Convert the options to a string Id, based on the values.
- * Ensures we can reuse the same observer when observing elements with the same options.
- * @param options
- */
-
-
-function optionsToId(options) {
-  return Object.keys(options).sort().filter(function (key) {
-    return options[key] !== undefined;
-  }).map(function (key) {
-    return key + "_" + (key === 'root' ? getRootId(options.root) : options[key]);
-  }).toString();
-}
-
-function createObserver(options) {
-  // Create a unique ID for this observer instance, based on the root, root margin and threshold.
-  var id = optionsToId(options);
-  var instance = observerMap.get(id);
-
-  if (!instance) {
-    // Create a map of elements this observer is going to observe. Each element has a list of callbacks that should be triggered, once it comes into view.
-    var elements = new Map();
-    var thresholds;
-    var observer = new IntersectionObserver(function (entries) {
-      entries.forEach(function (entry) {
-        var _elements$get; // While it would be nice if you could just look at isIntersecting to determine if the component is inside the viewport, browsers can't agree on how to use it.
-        // -Firefox ignores `threshold` when considering `isIntersecting`, so it will never be false again if `threshold` is > 0
-
-
-        var inView = entry.isIntersecting && thresholds.some(function (threshold) {
-          return entry.intersectionRatio >= threshold;
-        }); // @ts-ignore support IntersectionObserver v2
-
-        if (options.trackVisibility && typeof entry.isVisible === 'undefined') {
-          // The browser doesn't support Intersection Observer v2, falling back to v1 behavior.
-          // @ts-ignore
-          entry.isVisible = inView;
-        }
-
-        (_elements$get = elements.get(entry.target)) == null ? void 0 : _elements$get.forEach(function (callback) {
-          callback(inView, entry);
-        });
-      });
-    }, options); // Ensure we have a valid thresholds array. If not, use the threshold from the options
-
-    thresholds = observer.thresholds || (Array.isArray(options.threshold) ? options.threshold : [options.threshold || 0]);
-    instance = {
-      id: id,
-      observer: observer,
-      elements: elements
-    };
-    observerMap.set(id, instance);
-  }
-
-  return instance;
-}
-/**
- * @param element - DOM Element to observe
- * @param callback - Callback function to trigger when intersection status changes
- * @param options - Intersection Observer options
- * @param fallbackInView - Fallback inView value.
- * @return Function - Cleanup function that should be triggered to unregister the observer
- */
-
-
-function observe(element, callback, options, fallbackInView) {
-  if (options === void 0) {
-    options = {};
-  }
-
-  if (fallbackInView === void 0) {
-    fallbackInView = unsupportedValue;
-  }
-
-  if (typeof window.IntersectionObserver === 'undefined' && fallbackInView !== undefined) {
-    var bounds = element.getBoundingClientRect();
-    callback(fallbackInView, {
-      isIntersecting: fallbackInView,
-      target: element,
-      intersectionRatio: typeof options.threshold === 'number' ? options.threshold : 0,
-      time: 0,
-      boundingClientRect: bounds,
-      intersectionRect: bounds,
-      rootBounds: bounds
-    });
-    return function () {// Nothing to cleanup
-    };
-  } // An observer with the same options can be reused, so lets use this fact
-
-
-  var _createObserver = createObserver(options),
-      id = _createObserver.id,
-      observer = _createObserver.observer,
-      elements = _createObserver.elements; // Register the callback listener for this element
-
-
-  var callbacks = elements.get(element) || [];
-
-  if (!elements.has(element)) {
-    elements.set(element, callbacks);
-  }
-
-  callbacks.push(callback);
-  observer.observe(element);
-  return function unobserve() {
-    // Remove the callback from the callback list
-    callbacks.splice(callbacks.indexOf(callback), 1);
-
-    if (callbacks.length === 0) {
-      // No more callback exists for element, so destroy it
-      elements["delete"](element);
-      observer.unobserve(element);
-    }
-
-    if (elements.size === 0) {
-      // No more elements are being observer by this instance, so destroy it
-      observer.disconnect();
-      observerMap["delete"](id);
-    }
-  };
-}
-/**
- * React Hooks make it easy to monitor the `inView` state of your components. Call
- * the `useInView` hook with the (optional) [options](#options) you need. It will
- * return an array containing a `ref`, the `inView` status and the current
- * [`entry`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry).
- * Assign the `ref` to the DOM element you want to monitor, and the hook will
- * report the status.
- *
- * @example
- * ```jsx
- * import React from 'react';
- * import { useInView } from 'react-intersection-observer';
- *
- * const Component = () => {
- *   const { ref, inView, entry } = useInView({
- *       threshold: 0,
- *   });
- *
- *   return (
- *     <div ref={ref}>
- *       <h2>{`Header inside viewport ${inView}.`}</h2>
- *     </div>
- *   );
- * };
- * ```
- */
-
-
-function useInView(_temp) {
-  var _ref = _temp === void 0 ? {} : _temp,
-      threshold = _ref.threshold,
-      delay = _ref.delay,
-      trackVisibility = _ref.trackVisibility,
-      rootMargin = _ref.rootMargin,
-      root = _ref.root,
-      triggerOnce = _ref.triggerOnce,
-      skip = _ref.skip,
-      initialInView = _ref.initialInView,
-      fallbackInView = _ref.fallbackInView;
-
-  var unobserve = React.useRef();
-
-  var _React$useState = React.useState({
-    inView: !!initialInView
-  }),
-      state = _React$useState[0],
-      setState = _React$useState[1];
-
-  var setRef = React.useCallback(function (node) {
-    if (unobserve.current !== undefined) {
-      unobserve.current();
-      unobserve.current = undefined;
-    } // Skip creating the observer
-
-
-    if (skip) return;
-
-    if (node) {
-      unobserve.current = observe(node, function (inView, entry) {
-        setState({
-          inView: inView,
-          entry: entry
-        });
-
-        if (entry.isIntersecting && triggerOnce && unobserve.current) {
-          // If it should only trigger once, unobserve the element after it's inView
-          unobserve.current();
-          unobserve.current = undefined;
-        }
-      }, {
-        root: root,
-        rootMargin: rootMargin,
-        threshold: threshold,
-        // @ts-ignore
-        trackVisibility: trackVisibility,
-        // @ts-ignore
-        delay: delay
-      }, fallbackInView);
-    }
-  }, // We break the rule here, because we aren't including the actual `threshold` variable
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  [// If the threshold is an array, convert it to a string so it won't change between renders.
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  Array.isArray(threshold) ? threshold.toString() : threshold, root, rootMargin, triggerOnce, skip, trackVisibility, fallbackInView, delay]);
-  /* eslint-disable-next-line */
-
-  useEffect(function () {
-    if (!unobserve.current && state.entry && !triggerOnce && !skip) {
-      // If we don't have a ref, then reset the state (unless the hook is set to only `triggerOnce` or `skip`)
-      // This ensures we correctly reflect the current state - If you aren't observing anything, then nothing is inView
-      setState({
-        inView: !!initialInView
-      });
-    }
-  });
-  var result = [setRef, state.inView, state.entry]; // Support object destructuring, by adding the specific values.
-
-  result.ref = result[0];
-  result.inView = result[1];
-  result.entry = result[2];
-  return result;
-}
-
-export { observe, useInView };

package/dist/node_modules/zustand/esm/shallow.js

@@ -1 +0,0 @@
-function t(t,e){if(Object.is(t,e))return!0;if("object"!=typeof t||null===t||"object"!=typeof e||null===e)return!1;const r=Object.keys(t);if(r.length!==Object.keys(e).length)return!1;for(let n=0;n<r.length;n++)if(!Object.prototype.hasOwnProperty.call(e,r[n])||!Object.is(t[r[n]],e[r[n]]))return!1;return!0}export{t as default};

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

@@ -1,131 +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); }
-
-import React__default, { createContext, useEffect, useContext, useState } from 'react';
-import { HMSReactiveStore } from '@100mslive/hms-video-store';
-import create from 'zustand';
-import { makeHMSStoreHook, hooksErrorMessage } from './store.js';
-import { isBrowser } from '../utils/isBrowser.js';
-/**
- * only one context is being created currently. This would need to be changed if multiple
- * rooms have to be supported, where every room will have its own context, provider, store and actions.
- */
-
-const HMSContext = createContext(null);
-let providerProps;
-
-const HMSRoomProvider = ({
-  children,
-  actions,
-  store,
-  notifications
-}) => {
-  if (!providerProps) {
-    if (actions && store) {
-      providerProps = {
-        actions,
-        store
-      };
-
-      if (notifications) {
-        providerProps.notifications = notifications;
-      }
-    } else {
-      const hmsReactiveStore = new HMSReactiveStore(); // adding a dummy function for setstate and destroy because zustan'd create expects them
-      // to be present but we don't expose them from the store.
-
-      const errFn = () => {
-        throw new Error('modifying store is not allowed');
-      };
-
-      providerProps = {
-        actions: hmsReactiveStore.getHMSActions(),
-        store: create(_extends({}, hmsReactiveStore.getStore(), {
-          setState: errFn,
-          destroy: errFn
-        })),
-        notifications: hmsReactiveStore.getNotifications()
-      };
-    }
-  }
-
-  useEffect(() => {
-    if (isBrowser) {
-      window.onunload = () => {
-        providerProps.actions.leave();
-      };
-    }
-  }, []);
-  return React__default.createElement(HMSContext.Provider, {
-    value: providerProps
-  }, children);
-};
-/**
- * `useHMSStore` is a read only hook which can be passed a selector to read data.
- * The hook can only be used in a component if HMSRoomProvider is present in its ancestors.
- */
-
-
-const useHMSStore = makeHMSStoreHook(HMSContext);
-/**
- * `useHMSVanillaStore` is a read only hook which returns the vanilla HMSStore.
- * Usage:
- * ```
- * const hmsStore = useHMSVanillaStore();
- * const dominantSpeaker = hmsStore.getState(selectDominantSpeaker);
- * ```
- *
- * Note: There's no need to use the vanilla hmsStore in React components.
- * This is used in rare cases where the store needs to be accessed outside a React component.
- * For almost every case, `useHMSStore` would get the job done.
- */
-
-const useHMSVanillaStore = () => {
-  const HMSContextConsumer = useContext(HMSContext);
-
-  if (!HMSContextConsumer) {
-    throw new Error(hooksErrorMessage);
-  }
-
-  return HMSContextConsumer.store;
-};
-/*
- * `useHMSActions` is a write only hook which can be used to dispatch actions.
- */
-
-
-const useHMSActions = () => {
-  const HMSContextConsumer = useContext(HMSContext);
-
-  if (!HMSContextConsumer) {
-    throw new Error(hooksErrorMessage);
-  }
-
-  return HMSContextConsumer.actions;
-};
-/**
- * `useHMSNotifications` is a read only hook which gives the latest notification(HMSNotification) received.
- */
-
-
-const useHMSNotifications = () => {
-  const HMSContextConsumer = useContext(HMSContext);
-  const [notification, setNotification] = useState(null);
-
-  if (!HMSContextConsumer) {
-    throw new Error(hooksErrorMessage);
-  }
-
-  useEffect(() => {
-    if (!HMSContextConsumer.notifications) {
-      return;
-    }
-
-    const unsubscribe = HMSContextConsumer.notifications.onNotification( // eslint-disable-next-line @typescript-eslint/no-shadow
-    notification => setNotification(notification)); // eslint-disable-next-line consistent-return
-
-    return unsubscribe;
-  }, [HMSContextConsumer.notifications]);
-  return notification;
-};
-
-export { HMSRoomProvider, useHMSActions, useHMSNotifications, useHMSStore, useHMSVanillaStore };

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

@@ -1,25 +0,0 @@
-import { useContext } from 'react';
-import shallow from '../../../../node_modules/zustand/esm/shallow.js';
-import HMSLogger from '../utils/logger.js';
-const hooksErrorMessage = '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 makeHMSStoreHook(hmsContext) {
-  const useHMSStore = (selector, equalityFn = shallow) => {
-    if (!selector) {
-      HMSLogger.w('fetching full store without passing any selector may have a heavy performance impact on your website.');
-    }
-
-    const HMSContextConsumer = useContext(hmsContext);
-
-    if (!HMSContextConsumer) {
-      throw new Error(hooksErrorMessage);
-    }
-
-    const useStore = HMSContextConsumer.store;
-    return useStore(selector, equalityFn);
-  };
-
-  return useHMSStore;
-}
-
-export { hooksErrorMessage, makeHMSStoreHook };

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

@@ -1,35 +0,0 @@
-import { selectIsLocalAudioEnabled, selectIsLocalVideoEnabled, selectIsAllowedToPublish } from '@100mslive/hms-video-store';
-import { useCallback } from 'react';
-import { useHMSStore, useHMSActions } from './HmsRoomProvider.js';
-
-const useAVToggle = () => {
-  const isLocalAudioEnabled = useHMSStore(selectIsLocalAudioEnabled);
-  const isLocalVideoEnabled = useHMSStore(selectIsLocalVideoEnabled);
-  const isAllowedToPublish = useHMSStore(selectIsAllowedToPublish);
-  const hmsActions = useHMSActions();
-  const toggleAudio = useCallback(async () => {
-    try {
-      await hmsActions.setLocalAudioEnabled(!isLocalAudioEnabled);
-    } catch (err) {
-      console.error('Cannot toggle audio', err);
-    }
-  }, [isLocalAudioEnabled]); //eslint-disable-line
-
-  const toggleVideo = useCallback(async () => {
-    try {
-      await hmsActions.setLocalVideoEnabled(!isLocalVideoEnabled);
-    } catch (err) {
-      console.error('Cannot toggle video', err);
-    }
-  }, [isLocalVideoEnabled]); //eslint-disable-line
-
-  return {
-    isLocalAudioEnabled,
-    isLocalVideoEnabled,
-    toggleAudio,
-    toggleVideo,
-    isAllowedToPublish
-  };
-};
-
-export { useAVToggle };

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