@100mslive/roomkit-react 0.4.3-alpha.0 → 0.4.3-alpha.10

package/src/Prebuilt/components/ScreenshareTile.tsx

@@ -1,134 +0,0 @@
-import React, { useRef, useState } from 'react';
-import { useFullscreen, useMedia } from 'react-use';
-import screenfull from 'screenfull';
-import {
-  selectLocalPeerID,
-  selectPeerByID,
-  selectScreenShareAudioByPeerID,
-  selectScreenShareByPeerID,
-  useHMSStore,
-} from '@100mslive/react-sdk';
-import { ExpandIcon, ShrinkIcon } from '@100mslive/react-icons';
-import TileMenu from './TileMenu/TileMenu';
-import { Box } from '../../Layout';
-import { VideoTileStats } from '../../Stats';
-import { config as cssConfig, useTheme } from '../../Theme';
-import { Video } from '../../Video';
-import { StyledVideoTile } from '../../VideoTile';
-import { LayoutModeSelector } from './LayoutModeSelector';
-import { getVideoTileLabel } from './peerTileUtils';
-import { ScreenshareDisplay } from './ScreenshareDisplay';
-// @ts-ignore: No implicit Any
-import { useUISettings } from './AppData/useUISettings';
-import { UI_SETTINGS } from '../common/constants';
-
-const labelStyles = {
-  position: 'unset',
-  width: '100%',
-  textAlign: 'center',
-  c: '$on_surface_high',
-  transform: 'none',
-  flexShrink: 0,
-};
-
-const Tile = ({ peerId, width = '100%', height = '100%' }: { peerId: string; width?: string; height?: string }) => {
-  const isLocal = useHMSStore(selectLocalPeerID) === peerId;
-  const track = useHMSStore(selectScreenShareByPeerID(peerId));
-  const { theme } = useTheme();
-  const peer = useHMSStore(selectPeerByID(peerId));
-  const isAudioOnly = useUISettings(UI_SETTINGS.isAudioOnly);
-  const [isMouseHovered, setIsMouseHovered] = useState(false);
-  const isMobile = useMedia(cssConfig.media.md);
-  const showStatsOnTiles = useUISettings(UI_SETTINGS.showStatsOnTiles);
-  const fullscreenRef = useRef<HTMLDivElement | null>(null);
-  // fullscreen is for desired state
-  const [fullscreen, setFullscreen] = useState(false);
-  // isFullscreen is for true state
-  const isFullscreen = useFullscreen(fullscreenRef, fullscreen, {
-    onClose: () => setFullscreen(false),
-  });
-  const isFullScreenSupported = screenfull.isEnabled;
-  const audioTrack = useHMSStore(selectScreenShareAudioByPeerID(peer?.id));
-
-  if (isLocal && track?.displaySurface && !['browser', 'window', 'application'].includes(track.displaySurface)) {
-    return <ScreenshareDisplay />;
-  }
-
-  if (!peer) {
-    return null;
-  }
-
-  const label = getVideoTileLabel({
-    peerName: peer?.name,
-    isLocal: false,
-    videoTrack: track,
-    audioTrack,
-  });
-
-  return (
-    <StyledVideoTile.Root
-      css={{
-        width,
-        height,
-        p: 0,
-        minHeight: 0,
-      }}
-      data-testid="screenshare_tile"
-    >
-      <StyledVideoTile.Container
-        transparentBg
-        ref={fullscreenRef}
-        css={{ flexDirection: 'column', gap: '$2' }}
-        onMouseEnter={() => setIsMouseHovered(true)}
-        onMouseLeave={() => {
-          setIsMouseHovered(false);
-        }}
-      >
-        {showStatsOnTiles ? (
-          <VideoTileStats audioTrackID={audioTrack?.id} videoTrackID={track?.id} peerID={peerId} isLocal={isLocal} />
-        ) : null}
-        {isFullScreenSupported && isMouseHovered ? (
-          <StyledVideoTile.FullScreenButton
-            css={{ bg: `${theme.colors.background_dim.value}A3` }}
-            onClick={() => setFullscreen(!fullscreen)}
-          >
-            {isFullscreen ? <ShrinkIcon /> : <ExpandIcon />}
-          </StyledVideoTile.FullScreenButton>
-        ) : null}
-        {!isMobile && isMouseHovered && !isFullscreen && (
-          <Box
-            css={{
-              position: 'absolute',
-              top: '$2',
-              r: '$1',
-              h: '$14',
-              right: isFullScreenSupported ? '$17' : '$2',
-              zIndex: 5,
-              bg: `${theme.colors.background_dim.value}A3`,
-            }}
-          >
-            <LayoutModeSelector />
-          </Box>
-        )}
-
-        {track ? (
-          <Video screenShare={true} mirror={false} attach={!isAudioOnly} trackId={track.id} css={{ minHeight: 0 }} />
-        ) : null}
-        <StyledVideoTile.Info css={labelStyles}>{label}</StyledVideoTile.Info>
-        {isMouseHovered && !peer.isLocal ? (
-          <TileMenu
-            isScreenshare
-            peerID={peer.id}
-            audioTrackID={audioTrack?.id}
-            videoTrackID={track?.id}
-            enableSpotlightingPeer={false}
-          />
-        ) : null}
-      </StyledVideoTile.Container>
-    </StyledVideoTile.Root>
-  );
-};
-
-const ScreenshareTile = React.memo(Tile);
-
-export default ScreenshareTile;

package/src/Prebuilt/components/SecondaryTiles.tsx

@@ -1,81 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { useMedia } from 'react-use';
-import { selectAppData, selectSessionStore, selectTrackByID, useHMSStore } from '@100mslive/react-sdk';
-import { LayoutProps } from './VideoLayouts/interface';
-import { ProminenceLayout } from './VideoLayouts/ProminenceLayout';
-import { config as cssConfig } from '../../Theme';
-import { Pagination } from './Pagination';
-import { usePagesWithTiles } from './hooks/useTileLayout';
-import { APP_DATA, SESSION_STORE_KEY } from '../common/constants';
-
-export const SecondaryTiles = ({ peers, onPageChange, onPageSize, edgeToEdge, hasSidebar }: LayoutProps) => {
-  const isMobile = useMedia(cssConfig.media.md);
-  const maxTileCount = isMobile ? 2 : 4;
-  const [page, setPage] = useState(0);
-  const pinnedTrackId = useHMSStore(selectAppData(APP_DATA.pinnedTrackId));
-  const spotlightPeerId = useHMSStore(selectSessionStore(SESSION_STORE_KEY.SPOTLIGHT));
-  const activeScreensharePeerId = useHMSStore(selectAppData(APP_DATA.activeScreensharePeerId));
-  const pinnedPeer = useHMSStore(selectTrackByID(pinnedTrackId))?.peerId;
-  const pageChangedAfterPinning = useRef(false);
-  const pagesWithTiles = usePagesWithTiles({
-    peers:
-      spotlightPeerId || pinnedPeer
-        ? [...peers].sort((p1, p2) => {
-            if (activeScreensharePeerId === p1.id) {
-              return -1;
-            }
-            if (activeScreensharePeerId === p2.id) {
-              return 1;
-            }
-            const peerIdList = [pinnedPeer, spotlightPeerId];
-            // put active screenshare peer, pinned peer, spotlight peer at first
-            if (peerIdList.includes(p1.id)) {
-              return -1;
-            }
-            if (peerIdList.includes(p2.id)) {
-              return 1;
-            }
-            return 0;
-          })
-        : peers,
-    maxTileCount,
-  });
-  const pageSize = pagesWithTiles[0]?.length || 0;
-
-  // Handles final peer leaving from the last page
-  useEffect(() => {
-    if (peers.length > 0 && !pagesWithTiles[page]?.length) {
-      setPage(Math.max(0, page - 1));
-    }
-  }, [peers, page, pagesWithTiles]);
-
-  useEffect(() => {
-    if (pageSize > 0) {
-      onPageSize?.(pageSize);
-    }
-  }, [pageSize, onPageSize]);
-
-  useEffect(() => {
-    if ((pinnedPeer || spotlightPeerId) && page !== 0 && !pageChangedAfterPinning.current) {
-      setPage(0);
-      pageChangedAfterPinning.current = true;
-    } else if (!pinnedPeer && !spotlightPeerId) {
-      pageChangedAfterPinning.current = false;
-    }
-  }, [pinnedPeer, spotlightPeerId, page]);
-
-  return (
-    <ProminenceLayout.SecondarySection tiles={pagesWithTiles[page]} edgeToEdge={edgeToEdge} hasSidebar={hasSidebar}>
-      {!edgeToEdge && (
-        <Pagination
-          page={page}
-          onPageChange={page => {
-            setPage(page);
-            onPageChange?.(page);
-          }}
-          numPages={pagesWithTiles.length}
-        />
-      )}
-    </ProminenceLayout.SecondarySection>
-  );
-};

package/src/Prebuilt/components/Settings/DeviceSettings.jsx

@@ -1,208 +0,0 @@
-import React, { Fragment, useRef, useState } from 'react';
-import {
-  DeviceType,
-  selectIsLocalVideoEnabled,
-  selectLocalVideoTrackID,
-  selectVideoTrackByID,
-  useDevices,
-  useHMSStore,
-} from '@100mslive/react-sdk';
-import { MicOnIcon, SpeakerIcon, VideoOnIcon } from '@100mslive/react-icons';
-import { Box, Button, Dropdown, Flex, StyledVideoTile, Text, Video } from '../../../';
-import { DialogDropdownTrigger } from '../../primitives/DropdownTrigger';
-import { useUISettings } from '../AppData/useUISettings';
-import { useAudioOutputTest } from '../hooks/useAudioOutputTest';
-import { useDropdownSelection } from '../hooks/useDropdownSelection';
-import { settingOverflow } from './common';
-import { TEST_AUDIO_URL, UI_SETTINGS } from '../../common/constants';
-
-/**
- * wrap the button on click of whom settings should open, this component will take care of the rest,
- * it'll give the user options to change input/output device as well as check speaker.
- * There is also another controlled way of using this by passing in open and onOpenChange.
- */
-const Settings = ({ setHide }) => {
-  const { allDevices, selectedDeviceIDs, updateDevice } = useDevices();
-  const { videoInput, audioInput, audioOutput } = allDevices;
-  const videoTrackId = useHMSStore(selectLocalVideoTrackID);
-  const isVideoOn = useHMSStore(selectIsLocalVideoEnabled);
-  // 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 mirrorLocalVideo = useUISettings(UI_SETTINGS.mirrorLocalVideo);
-  const trackSelector = selectVideoTrackByID(videoTrackId);
-  const track = useHMSStore(trackSelector);
-
-  /**
-   * Chromium browsers return an audioOutput with empty label when no permissions are given
-   */
-  const audioOutputFiltered = audioOutput?.filter(item => !!item.label) ?? [];
-
-  if (!videoInput?.length && !audioInput?.length && !audioOutputFiltered?.length) {
-    setHide(true);
-  }
-
-  return (
-    <Box className={settingOverflow()}>
-      {videoInput?.length ? (
-        <Fragment>
-          {isVideoOn && (
-            <StyledVideoTile.Container
-              css={{
-                w: '90%',
-                px: '$10',
-                height: '$48',
-                bg: 'transparent',
-                m: '$10 auto',
-              }}
-            >
-              <Video trackId={videoTrackId} mirror={track?.facingMode !== 'environment' && mirrorLocalVideo} />
-            </StyledVideoTile.Container>
-          )}
-          <DeviceSelector
-            title="Video"
-            devices={videoInput}
-            icon={<VideoOnIcon />}
-            selection={selectedDeviceIDs.videoInput}
-            onChange={deviceId =>
-              updateDevice({
-                deviceId,
-                deviceType: DeviceType.videoInput,
-              })
-            }
-          />
-        </Fragment>
-      ) : null}
-
-      {audioInput?.length ? (
-        <DeviceSelector
-          title={shouldShowAudioOutput ? 'Microphone' : 'Audio'}
-          icon={<MicOnIcon />}
-          devices={audioInput}
-          selection={selectedDeviceIDs.audioInput}
-          onChange={deviceId =>
-            updateDevice({
-              deviceId,
-              deviceType: DeviceType.audioInput,
-            })
-          }
-        />
-      ) : null}
-
-      {audioOutputFiltered?.length && shouldShowAudioOutput ? (
-        <DeviceSelector
-          title="Speaker"
-          icon={<SpeakerIcon />}
-          devices={audioOutput}
-          selection={selectedDeviceIDs.audioOutput}
-          onChange={deviceId =>
-            updateDevice({
-              deviceId,
-              deviceType: DeviceType.audioOutput,
-            })
-          }
-        >
-          <TestAudio id={selectedDeviceIDs.audioOutput} />
-        </DeviceSelector>
-      ) : null}
-    </Box>
-  );
-};
-
-const DeviceSelector = ({ title, devices, selection, onChange, icon, children = null }) => {
-  const [open, setOpen] = useState(false);
-  const selectionBg = useDropdownSelection();
-  const ref = useRef(null);
-
-  return (
-    <Box css={{ mb: '$10' }}>
-      <Text css={{ mb: '$4' }}>{title}</Text>
-      <Flex
-        align="center"
-        css={{
-          gap: '$4',
-          '@md': {
-            flexDirection: children ? 'column' : 'row',
-            alignItems: children ? 'start' : 'center',
-          },
-        }}
-      >
-        <Box
-          css={{
-            position: 'relative',
-            flex: '1 1 0',
-            minWidth: 0,
-            w: '100%',
-            maxWidth: '100%',
-            '@md': {
-              mb: children ? '$8' : 0,
-            },
-          }}
-        >
-          <Dropdown.Root open={open} onOpenChange={setOpen}>
-            <DialogDropdownTrigger
-              ref={ref}
-              icon={icon}
-              title={devices.find(({ deviceId }) => deviceId === selection)?.label || 'Select device from list'}
-              open={open}
-            />
-            <Dropdown.Portal>
-              <Dropdown.Content align="start" sideOffset={8} css={{ w: ref.current?.clientWidth, zIndex: 1001 }}>
-                {devices.map(device => {
-                  return (
-                    <Dropdown.Item
-                      key={device.label}
-                      onSelect={() => onChange(device.deviceId)}
-                      css={{
-                        px: '$9',
-                        bg: device.deviceId === selection ? selectionBg : undefined,
-                      }}
-                    >
-                      {device.label}
-                    </Dropdown.Item>
-                  );
-                })}
-              </Dropdown.Content>
-            </Dropdown.Portal>
-          </Dropdown.Root>
-        </Box>
-        {children}
-      </Flex>
-    </Box>
-  );
-};
-
-const TestAudio = ({ id }) => {
-  const { playing, setPlaying, audioRef } = useAudioOutputTest({ deviceId: id });
-  return (
-    <>
-      <Button
-        variant="standard"
-        css={{
-          flexShrink: 0,
-          p: '$6 $9',
-          '@md': {
-            w: '100%',
-          },
-        }}
-        onClick={() => audioRef.current?.play()}
-        disabled={playing}
-      >
-        <SpeakerIcon />
-        &nbsp;Test{' '}
-        <Text as="span" css={{ display: 'none', '@md': { display: 'inline' } }}>
-          &nbsp; speaker
-        </Text>
-      </Button>
-      <audio
-        ref={audioRef}
-        src={TEST_AUDIO_URL}
-        onEnded={() => setPlaying(false)}
-        onPlay={() => setPlaying(true)}
-        css={{ display: 'none' }}
-      />
-    </>
-  );
-};
-
-export default Settings;

package/src/Prebuilt/components/Settings/LayoutSettings.tsx

@@ -1,74 +0,0 @@
-import React, { useCallback } from 'react';
-import { selectIsLocalScreenShared, selectIsLocalVideoEnabled, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
-import { GalleryIcon, PersonRectangleIcon, SidebarIcon } from '@100mslive/react-icons';
-import { Box, Flex, Slider, Text } from '../../..';
-import SwitchWithLabel from './SwitchWithLabel';
-// @ts-ignore: No implicit Any
-import { useSetUiSettings } from '../AppData/useUISettings';
-import { settingOverflow } from './common';
-import { UI_SETTINGS } from '../../common/constants';
-
-export const LayoutMode = {
-  SIDEBAR: 'Sidebar',
-  GALLERY: 'Gallery',
-  SPOTLIGHT: 'Spotlight',
-};
-
-export type LayoutModeKeys = keyof typeof LayoutMode;
-
-export const LayoutModeIconMapping = {
-  [LayoutMode.GALLERY]: <GalleryIcon />,
-  [LayoutMode.SIDEBAR]: <SidebarIcon />,
-  [LayoutMode.SPOTLIGHT]: <PersonRectangleIcon />,
-};
-
-export const LayoutSettings = () => {
-  const hmsActions = useHMSActions();
-  const isLocalVideoEnabled = useHMSStore(selectIsLocalVideoEnabled);
-  const isLocalScreenShared = useHMSStore(selectIsLocalScreenShared);
-  const [{ isAudioOnly, maxTileCount, mirrorLocalVideo }, setUISettings] = useSetUiSettings();
-  const toggleIsAudioOnly = useCallback(
-    async (isAudioOnlyModeOn?: boolean) => {
-      if (isAudioOnlyModeOn) {
-        // turn off video and screen share if user switches to audio only mode
-        isLocalVideoEnabled && (await hmsActions.setLocalVideoEnabled(false));
-        isLocalScreenShared && (await hmsActions.setScreenShareEnabled(false));
-      }
-      setUISettings({ [UI_SETTINGS.isAudioOnly]: isAudioOnlyModeOn });
-    },
-    [hmsActions, isLocalVideoEnabled, isLocalScreenShared, setUISettings],
-  );
-
-  return (
-    <Box className={settingOverflow()}>
-      <Flex align="center" css={{ w: '100%', my: '$2', py: '$8', '@md': { display: 'none' } }}>
-        <Text variant="md" css={{ fontWeight: '$semiBold' }}>
-          Tiles In View({maxTileCount})
-        </Text>
-        <Flex justify="end" css={{ flex: '1 1 0' }}>
-          <Slider
-            step={1}
-            value={[maxTileCount]}
-            min={1}
-            max={49}
-            onValueChange={e => {
-              setUISettings({ [UI_SETTINGS.maxTileCount]: e[0] });
-            }}
-            css={{ w: '70%' }}
-          />
-        </Flex>
-      </Flex>
-      <SwitchWithLabel label="Audio Only Mode" id="audioOnlyMode" checked={isAudioOnly} onChange={toggleIsAudioOnly} />
-      <SwitchWithLabel
-        label="Mirror Local Video"
-        id="mirrorMode"
-        checked={mirrorLocalVideo}
-        onChange={value => {
-          setUISettings({
-            [UI_SETTINGS.mirrorLocalVideo]: value,
-          });
-        }}
-      />
-    </Box>
-  );
-};

package/src/Prebuilt/components/Settings/NotificationSettings.tsx

@@ -1,66 +0,0 @@
-import React from 'react';
-import { AlertOctagonIcon, HandIcon, PeopleAddIcon, PeopleRemoveIcon } from '@100mslive/react-icons';
-import { Box } from '../../..';
-import SwitchWithLabel from './SwitchWithLabel';
-// @ts-ignore: No implicit Any
-import { useSetSubscribedNotifications, useSubscribedNotifications } from '../AppData/useUISettings';
-import { settingOverflow } from './common';
-import { SUBSCRIBED_NOTIFICATIONS } from '../../common/constants';
-
-const NotificationItem = ({
-  type,
-  label,
-  icon,
-  checked,
-}: {
-  type: string;
-  label: string;
-  icon: React.ReactNode;
-  checked: boolean;
-}) => {
-  const [, setSubscribedNotifications] = useSetSubscribedNotifications(type);
-  return (
-    <SwitchWithLabel
-      label={label}
-      id={type}
-      icon={icon}
-      checked={checked}
-      onChange={value => {
-        setSubscribedNotifications(value);
-      }}
-    />
-  );
-};
-
-export const NotificationSettings = () => {
-  const subscribedNotifications = useSubscribedNotifications();
-
-  return (
-    <Box className={settingOverflow()}>
-      <NotificationItem
-        label="Peer Joined"
-        type={SUBSCRIBED_NOTIFICATIONS.PEER_JOINED}
-        icon={<PeopleAddIcon />}
-        checked={subscribedNotifications.PEER_JOINED}
-      />
-      <NotificationItem
-        label="Peer Leave"
-        type={SUBSCRIBED_NOTIFICATIONS.PEER_LEFT}
-        icon={<PeopleRemoveIcon />}
-        checked={subscribedNotifications.PEER_LEFT}
-      />
-      <NotificationItem
-        label="Hand Raised"
-        type={SUBSCRIBED_NOTIFICATIONS.METADATA_UPDATED}
-        icon={<HandIcon />}
-        checked={subscribedNotifications.METADATA_UPDATED}
-      />
-      <NotificationItem
-        label="Error"
-        type={SUBSCRIBED_NOTIFICATIONS.ERROR}
-        icon={<AlertOctagonIcon />}
-        checked={subscribedNotifications.ERROR}
-      />
-    </Box>
-  );
-};