@100mslive/roomkit-react 0.2.6-alpha.2 → 0.2.6-alpha.3

package/src/Prebuilt/plugins/VirtualBackground/VirtualBackground.jsx

@@ -1,112 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { HMSVirtualBackgroundTypes } from '@100mslive/hms-virtual-background';
-import {
-  selectIsLocalVideoEnabled,
-  selectIsLocalVideoPluginPresent,
-  selectLocalPeerRole,
-  selectLocalVideoTrackID,
-  useHMSActions,
-  useHMSStore,
-} from '@100mslive/react-sdk';
-import { VirtualBackgroundIcon } from '@100mslive/react-icons';
-import { ActionTile } from '../../components/MoreSettings/ActionTile';
-import { Loading } from '../../../Loading';
-import { Tooltip } from '../../../Tooltip';
-import IconButton from '../../IconButton';
-import { getRandomVirtualBackground } from './vbutils';
-
-export const VirtualBackground = ({
-  asActionTile = false,
-  onVBClick = () => {
-    return;
-  },
-}) => {
-  const pluginRef = useRef(null);
-  const hmsActions = useHMSActions();
-  const role = useHMSStore(selectLocalPeerRole);
-  const isVideoOn = useHMSStore(selectIsLocalVideoEnabled);
-  const [isVBLoading, setIsVBLoading] = useState(false);
-  const [isVBSupported, setIsVBSupported] = useState(false);
-  const [isVBOn, setIsVBOn] = useState(false);
-  const localPeerVideoTrackID = useHMSStore(selectLocalVideoTrackID);
-  const isVBPresent = useHMSStore(selectIsLocalVideoPluginPresent('HMSVB'));
-
-  async function createPlugin() {
-    if (!pluginRef.current) {
-      const { HMSVBPlugin } = await import('@100mslive/hms-virtual-background');
-      pluginRef.current = new HMSVBPlugin(HMSVirtualBackgroundTypes.NONE, HMSVirtualBackgroundTypes.NONE);
-    }
-  }
-  useEffect(() => {
-    if (!localPeerVideoTrackID) {
-      return;
-    }
-    createPlugin().then(() => {
-      //check support of plugin
-      const pluginSupport = hmsActions.validateVideoPluginSupport(pluginRef.current);
-      setIsVBSupported(pluginSupport.isSupported);
-    });
-  }, [hmsActions, localPeerVideoTrackID]);
-
-  async function addPlugin() {
-    setIsVBLoading(true);
-    try {
-      await createPlugin();
-      window.HMS.virtualBackground = pluginRef.current;
-      const { background, backgroundType } = getRandomVirtualBackground();
-      await pluginRef.current.setBackground(background, backgroundType);
-      await hmsActions.addPluginToVideoTrack(pluginRef.current, Math.floor(role.publishParams.video.frameRate / 2));
-    } catch (err) {
-      console.error('add virtual background plugin failed', err);
-    }
-    setIsVBLoading(false);
-  }
-
-  async function removePlugin() {
-    if (pluginRef.current) {
-      await hmsActions.removePluginFromVideoTrack(pluginRef.current);
-      pluginRef.current = null;
-    }
-  }
-
-  if (!isVBSupported || !isVideoOn) {
-    return null;
-  }
-  if (asActionTile) {
-    return (
-      <ActionTile.Root
-        data-testid="virtual_bg_btn"
-        active={isVBPresent}
-        disabled={isVBLoading}
-        onClick={() => {
-          setIsVBOn(!isVBOn);
-          !isVBPresent ? addPlugin() : removePlugin();
-          onVBClick();
-        }}
-      >
-        <VirtualBackgroundIcon />
-        <ActionTile.Title>Virtual Background</ActionTile.Title>
-      </ActionTile.Root>
-    );
-  }
-
-  return (
-    <Tooltip
-      boxCss={{ zIndex: '100' }}
-      title={isVBLoading ? 'Adding virtual background' : `Turn ${!isVBPresent ? 'on' : 'off'} virtual background`}
-    >
-      <IconButton
-        active={!isVBPresent}
-        disabled={isVBLoading}
-        onClick={() => {
-          !isVBPresent ? addPlugin() : removePlugin();
-        }}
-        data-testid="virtual_bg_btn"
-      >
-        {isVBLoading ? <Loading /> : <VirtualBackgroundIcon />}
-      </IconButton>
-    </Tooltip>
-  );
-};
-
-export default VirtualBackground;

package/src/Prebuilt/plugins/VirtualBackground/vbutils.js

@@ -1,66 +0,0 @@
-/* eslint-disable no-case-declarations */
-import { HMSVirtualBackgroundTypes } from '@100mslive/hms-virtual-background';
-export function getRandomVirtualBackground() {
-  const backgroundList = [
-    {
-      background: HMSVirtualBackgroundTypes.BLUR,
-      backgroundType: HMSVirtualBackgroundTypes.BLUR,
-    },
-  ];
-
-  const images = [
-    'https://www.100ms.live/images/vb-1.jpeg',
-    'https://www.100ms.live/images/vb-2.jpg',
-    'https://www.100ms.live/images/vb-3.png',
-    'https://d2qi07yyjujoxr.cloudfront.net/webapp/vb/hms1.png',
-    'https://d2qi07yyjujoxr.cloudfront.net/webapp/vb/hms2.png',
-    'https://d2qi07yyjujoxr.cloudfront.net/webapp/vb/hms3.png',
-    'https://d2qi07yyjujoxr.cloudfront.net/webapp/vb/hms4.png',
-  ].map(url => ({
-    background: url,
-    backgroundType: HMSVirtualBackgroundTypes.IMAGE,
-  }));
-
-  backgroundList.push(...images);
-
-  /* 
-   //TODO: update with a better quality gif.
-  const gifList = [
-    {
-      background: "https://www.100ms.live/images/vb-1.gif",
-      backgroundType: HMSVirtualBackgroundTypes.GIF,
-    },
-  ];
-  backgroundList.push(...gifList); 
-  */
-
-  const videoList = [
-    'https://www.100ms.live/images/video-1.mp4',
-    'https://www.100ms.live/images/video-2.mp4',
-    'https://www.100ms.live/images/video-5.mp4',
-    'https://www.100ms.live/images/video-7.mp4',
-    'https://www.100ms.live/images/video-8.mp4',
-  ].map(url => ({
-    background: url,
-    backgroundType: HMSVirtualBackgroundTypes.VIDEO,
-  }));
-  backgroundList.push(...videoList);
-
-  const randomIdx = Math.floor(Math.random() * backgroundList.length);
-  const virtualBackground = backgroundList[randomIdx];
-  switch (virtualBackground.backgroundType) {
-    case HMSVirtualBackgroundTypes.IMAGE:
-      const img = document.createElement('img');
-      img.alt = 'VB';
-      img.src = backgroundList[randomIdx].background;
-      virtualBackground.background = img;
-      return virtualBackground;
-    case HMSVirtualBackgroundTypes.VIDEO:
-      const videoEl = document.createElement('video');
-      videoEl.src = backgroundList[randomIdx].background;
-      virtualBackground.background = videoEl;
-      return virtualBackground;
-    default:
-      return virtualBackground;
-  }
-}