@100mslive/roomkit-react 0.4.3-alpha.2 → 0.4.3-alpha.4

package/src/Prebuilt/components/Header/common.jsx

@@ -1,196 +0,0 @@
-import React from 'react';
-import {
-  DeviceType,
-  getAudioDeviceCategory,
-  HMSAudioDeviceCategory,
-  selectIsLocalVideoEnabled,
-  selectLocalVideoTrackID,
-  selectVideoTrackByID,
-  useDevices,
-  useHMSActions,
-  useHMSStore,
-} from '@100mslive/react-sdk';
-import {
-  BluetoothIcon,
-  CameraFlipIcon,
-  CheckIcon,
-  CrossIcon,
-  HeadphonesIcon,
-  SpeakerIcon,
-  TelePhoneIcon,
-} from '@100mslive/react-icons';
-import { HorizontalDivider } from '../../../Divider';
-import { Label } from '../../../Label';
-import { Box, Flex } from '../../../Layout';
-import { Sheet } from '../../../Sheet';
-import { Text } from '../../../Text';
-import IconButton from '../../IconButton';
-import { ToastManager } from '../Toast/ToastManager';
-
-export const CamaraFlipActions = () => {
-  const actions = useHMSActions();
-  const { allDevices } = useDevices();
-  const { videoInput } = allDevices;
-  const isVideoOn = useHMSStore(selectIsLocalVideoEnabled);
-
-  const videoTrackId = useHMSStore(selectLocalVideoTrackID);
-  const localVideoTrack = useHMSStore(selectVideoTrackByID(videoTrackId));
-  if (!videoInput || !videoInput?.length || !localVideoTrack?.facingMode) {
-    return null;
-  }
-  return (
-    <Box>
-      <IconButton
-        disabled={!isVideoOn}
-        onClick={async () => {
-          try {
-            await actions.switchCamera();
-          } catch (e) {
-            ToastManager.addToast({
-              title: `Error while flipping camera ${e.message || ''}`,
-              variant: 'error',
-            });
-          }
-        }}
-      >
-        <CameraFlipIcon />
-      </IconButton>
-    </Box>
-  );
-};
-
-// It will handle and show audio input devices in Mweb while audio output devices in desktop
-export const AudioActions = () => {
-  const { allDevices, selectedDeviceIDs, updateDevice } = useDevices();
-
-  // don't show speaker selector where the API is not supported, and use
-  // a generic word("Audio") for Mic. In some cases(Chrome Android for example) this changes both mic and speaker keeping them in sync.
-  const shouldShowAudioOutput = 'setSinkId' in HTMLMediaElement.prototype;
-  const { audioInput, audioOutput } = allDevices;
-  let availableAudioDevices = audioInput;
-  let selectedAudio = selectedDeviceIDs.audioInput;
-  if (shouldShowAudioOutput) {
-    availableAudioDevices = audioOutput;
-    selectedAudio = selectedDeviceIDs.audioOutput;
-  }
-  const hmsActions = useHMSActions();
-  const audioFiltered = availableAudioDevices?.find(item => !!item.label);
-  const currentSelection = availableAudioDevices?.find(item => item.deviceId === selectedAudio);
-
-  if (!audioFiltered) {
-    return null;
-  }
-  const deviceCategory = getAudioDeviceCategory(currentSelection?.label);
-  let AudioIcon = <SpeakerIcon />;
-  if (deviceCategory === HMSAudioDeviceCategory.BLUETOOTH) {
-    AudioIcon = <BluetoothIcon />;
-  } else if (deviceCategory === HMSAudioDeviceCategory.WIRED) {
-    AudioIcon = <HeadphonesIcon />;
-  } else if (deviceCategory === HMSAudioDeviceCategory.EARPIECE) {
-    AudioIcon = <TelePhoneIcon />;
-  }
-  return (
-    <AudioSelectionSheet
-      audioDevices={availableAudioDevices}
-      audioSelected={selectedAudio}
-      onChange={async deviceId => {
-        try {
-          await updateDevice({
-            deviceId,
-            deviceType: shouldShowAudioOutput ? DeviceType.audioOutput : DeviceType.audioInput,
-          });
-        } catch (e) {
-          ToastManager.addToast({
-            title: `Error while changing audio device ${e.message || ''}`,
-            variant: 'error',
-          });
-        }
-      }}
-    >
-      <Box
-        onClick={async () => {
-          // refresh device as `devicechange` listener won't work in mobile device
-          await hmsActions.refreshDevices();
-        }}
-      >
-        <IconButton>{AudioIcon}</IconButton>
-      </Box>
-    </AudioSelectionSheet>
-  );
-};
-
-const AudioSelectionSheet = ({ audioDevices, audioSelected, onChange, children }) => {
-  return (
-    <Sheet.Root>
-      <Sheet.Trigger asChild>{children}</Sheet.Trigger>
-      <Sheet.Content>
-        <Sheet.Title css={{ py: '$10', px: '$8', alignItems: 'center' }}>
-          <Flex direction="row" justify="between" css={{ w: '100%' }}>
-            <Text variant="h6" css={{ display: 'flex' }}>
-              Audio
-            </Text>
-            <Sheet.Close>
-              <IconButton as="div" data-testid="dialog_cross_icon">
-                <CrossIcon />
-              </IconButton>
-            </Sheet.Close>
-          </Flex>
-        </Sheet.Title>
-        <HorizontalDivider />
-        <Flex
-          direction="column"
-          css={{
-            px: '$8',
-            maxHeight: '80vh',
-            overflowY: 'auto',
-          }}
-        >
-          {audioDevices.map(audioDevice => {
-            return (
-              <SelectWithLabel
-                key={audioDevice.deviceId}
-                label={audioDevice.label}
-                id={audioDevice.deviceId}
-                checked={audioDevice.deviceId === audioSelected}
-                onChange={() => onChange(audioDevice.deviceId)}
-              />
-            );
-          })}
-        </Flex>
-      </Sheet.Content>
-    </Sheet.Root>
-  );
-};
-
-const SelectWithLabel = ({ label, icon = <></>, checked, id, onChange }) => {
-  return (
-    <Flex
-      align="center"
-      css={{
-        my: '$2',
-        py: '$8',
-        w: '100%',
-        borderBottom: '1px solid $border_default',
-      }}
-      onClick={onChange}
-    >
-      <Label
-        htmlFor={id}
-        css={{
-          fontSize: '$md',
-          fontWeight: '$semiBold',
-          color: '$on_surface_high',
-          cursor: 'pointer',
-          display: 'flex',
-          alignItems: 'center',
-          gap: '$8',
-          flex: '1 1 0',
-        }}
-      >
-        {icon}
-        {label}
-      </Label>
-      {checked && <CheckIcon width={24} height={24} />}
-    </Flex>
-  );
-};

package/src/Prebuilt/components/Header/index.tsx

@@ -1 +0,0 @@
-export { Header } from './Header';

package/src/Prebuilt/components/HlsStatsOverlay.jsx

@@ -1,89 +0,0 @@
-import React, { memo } from 'react';
-import { CrossIcon } from '@100mslive/react-icons';
-import { Flex } from '../../Layout';
-import { Text } from '../../Text';
-import IconButton from '../IconButton';
-
-export function HlsStatsOverlay({ hlsStatsState, onClose }) {
-  return (
-    <Flex
-      css={{
-        position: 'absolute',
-        width: '$80',
-        marginLeft: '$8',
-        padding: '$8 $8 $10',
-        zIndex: 10,
-        backgroundColor: '$surface_brighter',
-        borderRadius: '$1',
-      }}
-      direction="column"
-    >
-      <IconButton css={{ position: 'absolute', top: '$2', right: '$2' }} onClick={onClose}>
-        <CrossIcon />
-      </IconButton>
-      <HlsStatsRow label="Video size">
-        {` ${hlsStatsState?.videoSize?.width}x${hlsStatsState?.videoSize?.height}`}
-      </HlsStatsRow>
-      <HlsStatsRow label="Buffer duration">{hlsStatsState?.bufferedDuration?.toFixed(2)} </HlsStatsRow>
-      <HlsStatsRow label="Connection speed">
-        {`${(hlsStatsState?.bandwidthEstimate / (1000 * 1000)).toFixed(2)} Mbps`}
-      </HlsStatsRow>
-      <HlsStatsRow label="Bitrate">{`${(hlsStatsState?.bitrate / (1000 * 1000)).toFixed(2)} Mbps`}</HlsStatsRow>
-      <HlsStatsRow label="distance from live">
-        {getDurationFromSeconds(hlsStatsState.distanceFromLive / 1000)}
-      </HlsStatsRow>
-      <HlsStatsRow label="Dropped frames">{hlsStatsState?.droppedFrames}</HlsStatsRow>
-    </Flex>
-  );
-}
-
-/**
- * Extracted from HLS new Player PR.
- * TODO: remove this and use HMSVideoUtils.js
- * when that code is merged
- */
-export function getDurationFromSeconds(timeInSeconds) {
-  let time = Math.floor(timeInSeconds);
-  const hours = Math.floor(time / 3600);
-  time = time - hours * 3600;
-  const minutes = Math.floor(time / 60);
-  const seconds = Math.floor(time - minutes * 60);
-
-  const prefixedMinutes = `${minutes < 10 ? '0' + minutes : minutes}`;
-  const prefixedSeconds = `${seconds < 10 ? '0' + seconds : seconds}`;
-
-  let videoTimeStr = `${prefixedMinutes}:${prefixedSeconds}`;
-  if (hours) {
-    const prefixedHours = `${hours < 10 ? '0' + hours : hours}`;
-    videoTimeStr = `${prefixedHours}:${prefixedMinutes}:${prefixedSeconds}`;
-  }
-  return videoTimeStr;
-}
-
-const HlsStatsRow = memo(({ label, children }) => {
-  return (
-    <Flex gap={4} justify="center" css={{ width: '100%' }}>
-      <Text
-        css={{
-          width: '50%',
-          '@md': { fontSize: '$md' },
-          '@sm': { fontSize: '$sm' },
-          // textAlign: "right",
-        }}
-      >
-        {label}
-      </Text>
-      <Text
-        css={{
-          '@md': { fontSize: '$md' },
-          '@sm': { fontSize: '$sm' },
-          width: '50%',
-          overflowWrap: 'break-word',
-          // textAlign: "left",
-        }}
-      >
-        {children}
-      </Text>
-    </Flex>
-  );
-});

package/src/Prebuilt/components/IconButtonWithOptions/IconButtonWithOptions.tsx

@@ -1,167 +0,0 @@
-import React from 'react';
-import { VerticalMenuIcon } from '@100mslive/react-icons';
-import { Dropdown } from '../../../Dropdown';
-import { Flex } from '../../../Layout';
-import { styled } from '../../../Theme';
-import { Tooltip } from '../../../Tooltip';
-import IconButton from '../../IconButton';
-
-const variants = {
-  disabled: {
-    true: {
-      bg: '$surface_brighter',
-    },
-  },
-  active: {
-    false: {
-      bg: '$secondary_dim',
-    },
-  },
-};
-
-const IconSection = styled(IconButton, {
-  w: 'unset',
-  h: '$14',
-  p: '$4',
-  r: '$1',
-  bg: 'transparent',
-  borderTopRightRadius: '0 !important',
-  borderColor: '$border_bright',
-  borderBottomRightRadius: '0 !important',
-  position: 'relative',
-  '&:not([disabled]):focus-visible': {
-    zIndex: 1,
-  },
-  '@md': {
-    mx: 0,
-    borderTopRightRadius: '$1 !important',
-    borderBottomRightRadius: '$1 !important',
-  },
-  variants: {
-    ...variants,
-    hideOptions: {
-      true: {
-        borderTopRightRadius: '$1 !important',
-        borderBottomRightRadius: '$1 !important',
-      },
-    },
-  },
-});
-
-const OptionsSection = styled(IconButton, {
-  w: 'unset',
-  h: '$14',
-  p: '$4 $2',
-  r: '$1',
-  borderTopLeftRadius: '0 !important',
-  borderColor: '$border_bright',
-  borderBottomLeftRadius: '0 !important',
-  borderLeftWidth: '0 !important',
-  position: 'relative',
-  '&:not([disabled]):focus-visible': {
-    zIndex: 1,
-  },
-  '@md': {
-    display: 'none',
-  },
-  variants,
-});
-
-const Icon = styled(Flex, {
-  alignItems: 'center',
-  justifyContent: 'center',
-  color: '$on_primary_high',
-  variants: {
-    disabled: {
-      true: {
-        color: '$on_surface_low',
-      },
-    },
-    active: {
-      true: {
-        color: '$on_surface_high',
-      },
-    },
-  },
-});
-
-export const IconButtonWithOptions = ({
-  disabled = false,
-  onDisabledClick = () => {
-    return;
-  },
-  testid = '',
-  tooltipMessage = '',
-  icon,
-  children,
-  active,
-  hideOptions = false,
-  onClick = () => {
-    return;
-  },
-}: {
-  onClick: () => void;
-  onDisabledClick: () => void;
-  icon: React.ReactNode;
-  children: React.ReactNode;
-  testid?: string;
-  hideOptions?: boolean;
-  active: boolean;
-  disabled?: boolean;
-  tooltipMessage?: string;
-}) => {
-  const commonProps = { disabled, active };
-  return (
-    <Flex>
-      <IconSection
-        data-testid={testid}
-        {...commonProps}
-        onClick={onClick}
-        hideOptions={hideOptions}
-        className="__cancel-drag-event"
-      >
-        <Tooltip disabled={!tooltipMessage} title={tooltipMessage}>
-          <Icon {...commonProps}>{icon}</Icon>
-        </Tooltip>
-      </IconSection>
-      {!hideOptions && children ? (
-        <Dropdown.Root>
-          <Dropdown.Trigger
-            asChild
-            // onClick does not work
-            onPointerDown={e => {
-              if (disabled) {
-                e.preventDefault();
-                onDisabledClick();
-              }
-            }}
-          >
-            <OptionsSection {...commonProps}>
-              <Tooltip title="View Options">
-                <Icon {...commonProps}>
-                  <VerticalMenuIcon />
-                </Icon>
-              </Tooltip>
-            </OptionsSection>
-          </Dropdown.Trigger>
-          <Dropdown.Content
-            sideOffset={5}
-            alignOffset={-44}
-            align="start"
-            side="top"
-            css={{
-              w: 344,
-              maxWidth: '100%',
-              maxHeight: 'unset',
-              p: 0,
-              border: 'none',
-              bg: '$surface_dim',
-            }}
-          >
-            {children}
-          </Dropdown.Content>
-        </Dropdown.Root>
-      ) : null}
-    </Flex>
-  );
-};

package/src/Prebuilt/components/Input/KeyboardInputManager.js

@@ -1,107 +0,0 @@
-import { useEffect } from 'react';
-import {
-  selectAppData,
-  selectIsLocalAudioEnabled,
-  selectIsLocalVideoEnabled,
-  useHMSActions,
-  useHMSVanillaStore,
-} from '@100mslive/react-sdk';
-import { APP_DATA, isMacOS } from '../../common/constants';
-
-let isEvenListenersAttached = false;
-export class KeyboardInputManager {
-  #actions;
-  #store;
-  constructor(store, actions) {
-    this.#actions = actions;
-    this.#store = store;
-  }
-  #toggleAudio = async () => {
-    const enabled = this.#store.getState(selectIsLocalAudioEnabled);
-    await this.#actions.setLocalAudioEnabled(!enabled);
-  };
-
-  #toggleVideo = async () => {
-    const enabled = this.#store.getState(selectIsLocalVideoEnabled);
-    await this.#actions.setLocalVideoEnabled(!enabled);
-  };
-
-  #hideSidepane = () => {
-    if (this.#store.getState(selectAppData(APP_DATA.sidePane))) {
-      this.#actions.setAppData(APP_DATA.sidePane, '');
-    }
-  };
-
-  #toggleStatsForNerds = () => {
-    const uiSettings = this.#store.getState(selectAppData(APP_DATA.uiSettings));
-    const statsEnabled = uiSettings.showStatsOnTiles;
-    this.#actions.setAppData(APP_DATA.uiSettings, {
-      ...uiSettings,
-      showStatsOnTiles: !statsEnabled,
-    });
-  };
-
-  #toggleHlsStats = () => {
-    this.#actions.setAppData(APP_DATA.hlsStats, !this.#store.getState(selectAppData(APP_DATA.hlsStats)));
-  };
-
-  // eslint-disable-next-line complexity
-  #keyDownHandler = async e => {
-    const CONTROL_KEY = isMacOS ? e.metaKey : e.ctrlKey;
-    const D_KEY = e.key === 'd' || e.key === 'D';
-    const E_KEY = e.key === 'e' || e.key === 'E';
-    const SNF_KEY = e.key === ']' || e.key === '}';
-
-    const SHORTCUT_TOGGLE_AUDIO = CONTROL_KEY && D_KEY;
-    const SHORTCUT_TOGGLE_VIDEO = CONTROL_KEY && E_KEY;
-    const SHORTCUT_SIDEPANE_CLOSE = e.key === 'Escape';
-    const SHORTCUT_STATS_FOR_NERDS = CONTROL_KEY && SNF_KEY;
-
-    if (SHORTCUT_TOGGLE_AUDIO) {
-      e.preventDefault();
-      await this.#toggleAudio();
-    } else if (SHORTCUT_TOGGLE_VIDEO) {
-      e.preventDefault();
-      await this.#toggleVideo();
-    } else if (SHORTCUT_SIDEPANE_CLOSE) {
-      this.#hideSidepane();
-    } else if (SHORTCUT_STATS_FOR_NERDS) {
-      this.#toggleHlsStats();
-      this.#toggleStatsForNerds();
-    }
-  };
-
-  #bind = () => {
-    document.addEventListener('keydown', this.#keyDownHandler, false);
-  };
-
-  #unbind = () => {
-    document.removeEventListener('keydown', this.#keyDownHandler, false);
-  };
-
-  bindAllShortcuts = () => {
-    if (!isEvenListenersAttached) {
-      this.#bind();
-      isEvenListenersAttached = true;
-    }
-  };
-
-  unbindAllShortcuts = () => {
-    if (isEvenListenersAttached) {
-      this.#unbind();
-      isEvenListenersAttached = false;
-    }
-  };
-}
-
-export const KeyboardHandler = () => {
-  const store = useHMSVanillaStore();
-  const actions = useHMSActions();
-
-  useEffect(() => {
-    const keyboardManager = new KeyboardInputManager(store, actions);
-    keyboardManager.bindAllShortcuts();
-    return keyboardManager.unbindAllShortcuts;
-  }, [actions, store]);
-  return null;
-};

package/src/Prebuilt/components/InsetTile.tsx

@@ -1,136 +0,0 @@
-import React, { useEffect, useRef } from 'react';
-import Draggable from 'react-draggable';
-import { useMedia } from 'react-use';
-import {
-  selectIsAllowedToPublish,
-  selectLocalPeer,
-  selectPeerByID,
-  selectVideoTrackByID,
-  useHMSStore,
-} from '@100mslive/react-sdk';
-import { ExpandIcon } from '@100mslive/react-icons';
-import { Box, Flex } from '../../Layout';
-import { Text } from '../../Text';
-import { config as cssConfig } from '../../Theme';
-// @ts-ignore: No implicit Any
-import IconButton from '../IconButton';
-// @ts-ignore: No implicit Any
-import { AudioVideoToggle } from './AudioVideoToggle';
-// @ts-ignore: No implicit Any
-import VideoTile from './VideoTile';
-// @ts-ignore: No implicit Any
-import { useSetAppDataByKey } from './AppData/useUISettings';
-import { useVideoTileContext } from './hooks/useVideoTileLayout';
-// @ts-ignore: No implicit Any
-import { APP_DATA } from '../common/constants';
-
-const MinimisedTile = ({ setMinimised }: { setMinimised: (value: boolean) => void }) => {
-  return (
-    <Flex align="center" css={{ gap: '$6', r: '$1', bg: '$surface_default', p: '$4', color: '$on_surface_high' }}>
-      <AudioVideoToggle hideOptions={true} />
-      <Text>You</Text>
-      <IconButton
-        className="__cancel-drag-event"
-        onClick={() => setMinimised(false)}
-        css={{ bg: 'transparent', border: 'transparent' }}
-      >
-        <ExpandIcon />
-      </IconButton>
-    </Flex>
-  );
-};
-
-const insetHeightPx = 180;
-const insetMaxWidthPx = 240;
-const defaultMobileAspectRatio = 9 / 16;
-const desktopAspectRatio = 1 / defaultMobileAspectRatio;
-
-export const InsetTile = ({ peerId }: { peerId?: string }) => {
-  const isMobile = useMedia(cssConfig.media.md);
-  const isLandscape = useMedia(cssConfig.media.ls);
-  const selector = peerId ? selectPeerByID(peerId) : selectLocalPeer;
-  const peer = useHMSStore(selector);
-  const [minimised, setMinimised] = useSetAppDataByKey(APP_DATA.minimiseInset);
-  const videoTrack = useHMSStore(selectVideoTrackByID(peer?.videoTrack));
-  const isAllowedToPublish = useHMSStore(selectIsAllowedToPublish);
-  const videoTileProps = useVideoTileContext();
-  let aspectRatio = isMobile ? defaultMobileAspectRatio : desktopAspectRatio;
-  if (videoTrack?.width && videoTrack?.height && !isMobile) {
-    aspectRatio = videoTrack.width / videoTrack.height;
-  }
-  let height = insetHeightPx;
-  let width = height * aspectRatio;
-  // Convert to 16/9 in landscape mode with a max width of 240
-  if (isLandscape && width > insetMaxWidthPx) {
-    width = 240;
-    height = width / aspectRatio;
-  }
-
-  const nodeRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    const node = nodeRef.current;
-    if (!node || !window.ResizeObserver) {
-      return;
-    }
-    const resizeObserver = new ResizeObserver(entries => {
-      entries.forEach(entry => {
-        if (entry.target === node.parentElement) {
-          // reset to original position on resize
-          node.style.transform = `translate(0,0)`;
-        }
-      });
-    });
-    node.parentElement && resizeObserver.observe(node.parentElement);
-    return () => {
-      node?.parentElement && resizeObserver?.unobserve(node.parentElement);
-      resizeObserver?.disconnect();
-    };
-  }, []);
-
-  if (!isAllowedToPublish.video && !isAllowedToPublish.audio) {
-    return null;
-  }
-
-  return (
-    <Draggable bounds="parent" nodeRef={nodeRef} cancel=".__cancel-drag-event">
-      <Box
-        ref={nodeRef}
-        css={{
-          position: 'absolute',
-          bottom: 0,
-          right: 0,
-          zIndex: 10,
-          boxShadow: '0 0 8px 0 rgba(0,0,0,0.3)',
-          r: '$2',
-          ...(!minimised
-            ? {
-                aspectRatio: `${aspectRatio}`,
-                h: height,
-              }
-            : {}),
-        }}
-      >
-        {minimised ? (
-          <MinimisedTile setMinimised={setMinimised} />
-        ) : (
-          <VideoTile
-            peerId={peer?.id}
-            trackId={peer?.videoTrack}
-            rootCSS={{
-              size: '100%',
-              padding: 0,
-            }}
-            width={width}
-            height={height}
-            containerCSS={{ background: '$surface_default' }}
-            canMinimise
-            isDragabble
-            {...videoTileProps}
-            hideParticipantNameOnTile
-          />
-        )}
-      </Box>
-    </Draggable>
-  );
-};