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

package/src/Prebuilt/components/SidePaneTabs.tsx

@@ -1,214 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { useMedia } from 'react-use';
-import { DefaultConferencingScreen_Elements } from '@100mslive/types-prebuilt';
-import { match } from 'ts-pattern';
-import { selectPeerCount, useHMSStore } from '@100mslive/react-sdk';
-import { CrossIcon } from '@100mslive/react-icons';
-import { Chat } from './Chat/Chat';
-import { PaginatedParticipants } from './Footer/PaginatedParticipants';
-import { ParticipantList } from './Footer/ParticipantList';
-import { Box, config as cssConfig, Flex, IconButton, Tabs, Text } from '../..';
-import { Tooltip } from '../../Tooltip';
-import { ChatSettings } from './ChatSettings';
-import { useRoomLayoutConferencingScreen } from '../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
-// @ts-ignore: No implicit Any
-import { useIsSidepaneTypeOpen, useSidepaneReset, useSidepaneToggle } from './AppData/useSidepane';
-// @ts-ignore: No implicit Any
-import { getFormattedCount } from '../common/utils';
-import { SIDE_PANE_OPTIONS } from '../common/constants';
-
-const tabTriggerCSS = {
-  color: '$on_surface_low',
-  p: '$4',
-  fontWeight: '$semiBold',
-  fontSize: '$sm',
-  w: '100%',
-  justifyContent: 'center',
-  '&[data-state="active"]': {
-    color: '$on_surface_high',
-  },
-};
-
-const ParticipantCount = ({ count }: { count: number }) => {
-  return count < 1000 ? (
-    <span>({count})</span>
-  ) : (
-    <Tooltip title={count}>
-      <span>({getFormattedCount(count)})</span>
-    </Tooltip>
-  );
-};
-
-export const SidePaneTabs = React.memo<{
-  active: 'Participants | Chat';
-  hideTab?: boolean;
-}>(({ active = SIDE_PANE_OPTIONS.CHAT, hideTab = false }) => {
-  const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
-  const toggleParticipants = useSidepaneToggle(SIDE_PANE_OPTIONS.PARTICIPANTS);
-  const resetSidePane = useSidepaneReset();
-  const [activeTab, setActiveTab] = useState(active);
-  const [activeRole, setActiveRole] = useState('');
-  const peerCount = useHMSStore(selectPeerCount);
-  const { elements, screenType } = useRoomLayoutConferencingScreen();
-  const chat_title = elements?.chat?.chat_title || 'Chat';
-  const showChat = !!elements?.chat;
-  const showParticipants = !!elements?.participant_list;
-  const hideTabs = !(showChat && showParticipants) || hideTab;
-  const isMobile = useMedia(cssConfig.media.md);
-  const isOverlayChat = !!elements?.chat?.is_overlay && isMobile;
-  const { off_stage_roles = [] } = (elements as DefaultConferencingScreen_Elements)?.on_stage_exp || {};
-  const isChatOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.CHAT);
-  const showChatSettings = showChat && isChatOpen && (!isMobile || !isOverlayChat);
-
-  useEffect(() => {
-    match({ activeTab, showChat, showParticipants })
-      .with({ activeTab: SIDE_PANE_OPTIONS.CHAT, showChat: false, showParticipants: true }, () => {
-        setActiveTab(SIDE_PANE_OPTIONS.PARTICIPANTS);
-      })
-      .with({ activeTab: SIDE_PANE_OPTIONS.PARTICIPANTS, showChat: true, showParticipants: false }, () => {
-        setActiveTab(SIDE_PANE_OPTIONS.CHAT);
-      })
-      .with({ showChat: false, showParticipants: false }, () => {
-        resetSidePane();
-      });
-  }, [showChat, activeTab, showParticipants, resetSidePane]);
-
-  useEffect(() => {
-    setActiveTab(active);
-  }, [active]);
-
-  if (activeRole) {
-    return (
-      <Flex
-        direction="column"
-        css={{
-          color: '$on_primary_high',
-          h: '100%',
-          transition: 'margin 0.3s ease-in-out',
-          position: 'relative',
-        }}
-      >
-        <Box css={{ position: 'absolute', left: 0, top: 0, size: '100%', zIndex: 21, bg: '$surface_dim' }}>
-          <PaginatedParticipants roleName={activeRole} onBack={() => setActiveRole('')} />
-        </Box>
-      </Flex>
-    );
-  }
-
-  return (
-    <Flex
-      direction="column"
-      css={{
-        color: '$on_primary_high',
-        h: '100%',
-        transition: 'margin 0.3s ease-in-out',
-      }}
-    >
-      {match({ isOverlayChat, isChatOpen, showChat, hideTabs })
-        .with({ isOverlayChat: true, isChatOpen: true, showChat: true }, () => <Chat />)
-        .with({ hideTabs: true }, () => {
-          return (
-            <>
-              <Flex justify="between" css={{ w: '100%', '&:empty': { display: 'none' } }}>
-                <Text
-                  variant="sm"
-                  css={{
-                    fontWeight: '$semiBold',
-                    p: '$4',
-                    c: '$on_surface_high',
-                    pr: '$12',
-                    '&:empty': { display: 'none' },
-                  }}
-                >
-                  {activeTab === SIDE_PANE_OPTIONS.CHAT ? (
-                    screenType !== 'hls_live_streaming' && chat_title
-                  ) : (
-                    <span>
-                      Participants&nbsp;
-                      <ParticipantCount count={peerCount} />
-                    </span>
-                  )}
-                </Text>
-                <Flex>
-                  {showChatSettings ? <ChatSettings /> : null}
-                  {isOverlayChat && isChatOpen ? null : (
-                    <IconButton
-                      css={{
-                        my: '$1',
-                        color: '$on_surface_medium',
-                        '&:hover': { color: '$on_surface_high' },
-                        '&:empty': { display: 'none' },
-                      }}
-                      onClick={e => {
-                        e.stopPropagation();
-                        if (activeTab === SIDE_PANE_OPTIONS.CHAT) {
-                          toggleChat();
-                        } else {
-                          toggleParticipants();
-                        }
-                      }}
-                      data-testid="close_chat"
-                    >
-                      {screenType === 'hls_live_streaming' && isChatOpen ? null : <CrossIcon />}
-                    </IconButton>
-                  )}
-                </Flex>
-              </Flex>
-              {activeTab === SIDE_PANE_OPTIONS.CHAT ? (
-                <Chat />
-              ) : (
-                <ParticipantList offStageRoles={off_stage_roles} onActive={setActiveRole} />
-              )}
-            </>
-          );
-        })
-        .otherwise(() => {
-          return (
-            <Tabs.Root
-              value={activeTab}
-              onValueChange={setActiveTab}
-              css={{
-                flexDirection: 'column',
-                size: '100%',
-              }}
-            >
-              <Flex css={{ w: '100%' }}>
-                <Tabs.List css={{ flexGrow: 1, borderRadius: '$2', bg: '$surface_default' }}>
-                  <Tabs.Trigger value={SIDE_PANE_OPTIONS.CHAT} onClick={toggleChat} css={tabTriggerCSS}>
-                    {chat_title}
-                  </Tabs.Trigger>
-                  <Tabs.Trigger value={SIDE_PANE_OPTIONS.PARTICIPANTS} onClick={toggleParticipants} css={tabTriggerCSS}>
-                    Participants&nbsp;
-                    <ParticipantCount count={peerCount} />
-                  </Tabs.Trigger>
-                </Tabs.List>
-                {showChatSettings ? <ChatSettings /> : null}
-                {isOverlayChat && isChatOpen ? null : (
-                  <IconButton
-                    css={{ my: '$1', color: '$on_surface_medium', '&:hover': { color: '$on_surface_high' } }}
-                    onClick={e => {
-                      e.stopPropagation();
-                      if (activeTab === SIDE_PANE_OPTIONS.CHAT) {
-                        toggleChat();
-                      } else {
-                        toggleParticipants();
-                      }
-                    }}
-                    data-testid="close_chat"
-                  >
-                    <CrossIcon />
-                  </IconButton>
-                )}
-              </Flex>
-              <Tabs.Content value={SIDE_PANE_OPTIONS.PARTICIPANTS} css={{ p: 0 }}>
-                <ParticipantList offStageRoles={off_stage_roles} onActive={setActiveRole} />
-              </Tabs.Content>
-              <Tabs.Content value={SIDE_PANE_OPTIONS.CHAT} css={{ p: 0 }}>
-                <Chat />
-              </Tabs.Content>
-            </Tabs.Root>
-          );
-        })}
-    </Flex>
-  );
-});

package/src/Prebuilt/components/StatsForNerds.jsx

@@ -1,373 +0,0 @@
-import React, { useEffect, useMemo, useRef, useState } from 'react';
-import { useMedia } from 'react-use';
-import { match, P } from 'ts-pattern';
-import {
-  selectHMSStats,
-  selectLocalPeerID,
-  selectPeersMap,
-  selectTracksMap,
-  useHMSActions,
-  useHMSStatsStore,
-  useHMSStore,
-} from '@100mslive/react-sdk';
-import { Accordion } from '../../Accordion';
-import { HorizontalDivider } from '../../Divider';
-import { Dropdown } from '../../Dropdown';
-import { Label } from '../../Label';
-import { Box, Flex } from '../../Layout';
-import { Dialog } from '../../Modal';
-import { Sheet } from '../../Sheet';
-import { formatBytes } from '../../Stats';
-import { Switch } from '../../Switch';
-import { Text } from '../../Text';
-import { config as cssConfig } from '../../Theme';
-import { DialogDropdownTrigger } from '../primitives/DropdownTrigger';
-import { useSetUiSettings } from './AppData/useUISettings';
-import { useDropdownSelection } from './hooks/useDropdownSelection';
-import { UI_SETTINGS } from '../common/constants';
-
-export const StatsForNerds = ({ open, onOpenChange }) => {
-  const mediaQueryLg = cssConfig.media.md;
-  const isMobile = useMedia(mediaQueryLg);
-
-  const tracksWithLabels = useTracksWithLabel();
-  const statsOptions = useMemo(
-    () => [{ id: 'local-peer', label: 'Local Peer Stats' }, ...tracksWithLabels],
-    [tracksWithLabels],
-  );
-  const hmsActions = useHMSActions();
-  const details = hmsActions.getDebugInfo();
-  const [selectedStat, setSelectedStat] = useState(statsOptions[0]);
-  const [showStatsOnTiles, setShowStatsOnTiles] = useSetUiSettings(UI_SETTINGS.showStatsOnTiles);
-  const [openDropdown, setOpenDropdown] = useState(false);
-  const ref = useRef();
-  const selectionBg = useDropdownSelection();
-
-  useEffect(() => {
-    if (selectedStat.id !== 'local-peer' && !tracksWithLabels.find(track => track.id === selectedStat.id)) {
-      setSelectedStat('local-peer');
-    }
-  }, [tracksWithLabels, selectedStat]);
-
-  return isMobile ? (
-    <Sheet.Root open={open} onOpenChange={onOpenChange}>
-      <Sheet.Content
-        css={{
-          bg: '$surface_dim',
-          px: '$4',
-          pb: '$4',
-        }}
-      >
-        <Sheet.Title css={{ py: '$10', px: '$8', alignItems: 'center' }}>
-          <Flex justify="between">
-            <Flex align="center" css={{ mb: '$1' }}>
-              <Text variant="h6" inline>
-                Stats For Nerds
-              </Text>
-            </Flex>
-            <Dialog.DefaultClose data-testid="stats_dialog_close_icon" />
-          </Flex>
-        </Sheet.Title>
-        <HorizontalDivider />
-        <Flex
-          direction="column"
-          css={{
-            mr: '-$2',
-            overflowY: 'auto',
-            maxHeight: '65vh',
-            pr: '$6',
-            pl: '$4',
-          }}
-        >
-          <Flex justify="start" gap={4} css={{ m: '$10 0' }}>
-            <Switch checked={showStatsOnTiles} onCheckedChange={setShowStatsOnTiles} />
-            <Text variant="body2" css={{ fontWeight: '$semiBold' }}>
-              Show Stats on Tiles
-            </Text>
-          </Flex>
-          {/* Select */}
-          <Flex
-            direction="column"
-            css={{
-              mb: '$12',
-              position: 'relative',
-              minWidth: 0,
-            }}
-          >
-            <Label variant="body2" css={{ c: '$on_surface_high' }}>
-              Stats For
-            </Label>
-            <Dropdown.Root data-testid="dialog_select_Stats For" open={openDropdown} onOpenChange={setOpenDropdown}>
-              <DialogDropdownTrigger
-                title={selectedStat.label || 'Select Stats'}
-                css={{ mt: '$4' }}
-                titleCSS={{ mx: 0 }}
-                open={openDropdown}
-                ref={ref}
-              />
-              <Dropdown.Portal>
-                <Dropdown.Content align="start" sideOffset={8} css={{ w: ref.current?.clientWidth, zIndex: 1000 }}>
-                  {statsOptions.map(option => {
-                    const isSelected = option.id === selectedStat.id && option.layer === selectedStat.layer;
-                    return (
-                      <Dropdown.Item
-                        key={`${option.id}-${option.layer || ''}`}
-                        onClick={() => {
-                          setSelectedStat(option);
-                        }}
-                        css={{
-                          px: '$9',
-                          bg: isSelected ? selectionBg : undefined,
-                        }}
-                      >
-                        {option.label}
-                      </Dropdown.Item>
-                    );
-                  })}
-                </Dropdown.Content>
-              </Dropdown.Portal>
-            </Dropdown.Root>
-          </Flex>
-          {/* Stats */}
-          {selectedStat.id === 'local-peer' ? (
-            <LocalPeerStats />
-          ) : (
-            <TrackStats trackID={selectedStat.id} layer={selectedStat.layer} local={selectedStat.local} />
-          )}
-          <Flex justify="start" gap={4} css={{ m: '$10 0', w: '100%' }}>
-            <DebugInfo details={details} />
-          </Flex>
-        </Flex>
-      </Sheet.Content>
-    </Sheet.Root>
-  ) : (
-    <Dialog.Root open={open} onOpenChange={onOpenChange}>
-      <Dialog.Portal>
-        <Dialog.Overlay />
-        <Dialog.Content
-          css={{
-            width: 'min(500px, 95%)',
-            height: 'min(656px, 90%)',
-            overflowY: 'auto',
-          }}
-        >
-          {/* Title */}
-          <Dialog.Title css={{ p: '$4 0' }}>
-            <Flex justify="between">
-              <Flex align="center" css={{ mb: '$1' }}>
-                <Text variant="h6" inline>
-                  Stats For Nerds
-                </Text>
-              </Flex>
-              <Dialog.DefaultClose data-testid="stats_dialog_close_icon" />
-            </Flex>
-          </Dialog.Title>
-          <HorizontalDivider css={{ mt: '0.8rem' }} />
-          {/* Switch */}
-          <Flex justify="start" gap={4} css={{ m: '$10 0' }}>
-            <Switch checked={showStatsOnTiles} onCheckedChange={setShowStatsOnTiles} />
-            <Text variant="body2" css={{ fontWeight: '$semiBold' }}>
-              Show Stats on Tiles
-            </Text>
-          </Flex>
-          {/* Select */}
-
-          <Flex
-            direction="column"
-            css={{
-              mb: '$12',
-              position: 'relative',
-              minWidth: 0,
-            }}
-          >
-            <Label variant="body2" css={{ c: '$on_surface_high' }}>
-              Stats For
-            </Label>
-            <Dropdown.Root data-testid="dialog_select_Stats For" open={openDropdown} onOpenChange={setOpenDropdown}>
-              <DialogDropdownTrigger
-                title={selectedStat.label || 'Select Stats'}
-                css={{ mt: '$4' }}
-                titleCSS={{ mx: 0 }}
-                open={openDropdown}
-                ref={ref}
-              />
-              <Dropdown.Portal>
-                <Dropdown.Content align="start" sideOffset={8} css={{ w: ref.current?.clientWidth, zIndex: 1000 }}>
-                  {statsOptions.map(option => {
-                    const isSelected = option.id === selectedStat.id && option.layer === selectedStat.layer;
-                    return (
-                      <Dropdown.Item
-                        key={`${option.id}-${option.layer || ''}`}
-                        onClick={() => {
-                          setSelectedStat(option);
-                        }}
-                        css={{
-                          px: '$9',
-                          bg: isSelected ? selectionBg : undefined,
-                        }}
-                      >
-                        {option.label}
-                      </Dropdown.Item>
-                    );
-                  })}
-                </Dropdown.Content>
-              </Dropdown.Portal>
-            </Dropdown.Root>
-          </Flex>
-          {/* Stats */}
-          {selectedStat.id === 'local-peer' ? (
-            <LocalPeerStats />
-          ) : (
-            <TrackStats trackID={selectedStat.id} layer={selectedStat.layer} local={selectedStat.local} />
-          )}
-          <Flex justify="start" gap={4} css={{ m: '$10 0', w: '100%' }}>
-            <DebugInfo details={details} />
-          </Flex>
-        </Dialog.Content>
-      </Dialog.Portal>
-    </Dialog.Root>
-  );
-};
-
-const useTracksWithLabel = () => {
-  const tracksMap = useHMSStore(selectTracksMap);
-  const peersMap = useHMSStore(selectPeersMap);
-  const localPeerID = useHMSStore(selectLocalPeerID);
-  const tracksWithLabels = useMemo(
-    () =>
-      Object.values(tracksMap).reduce((res, track) => {
-        const peerName = peersMap[track.peerId]?.name;
-        const isLocalTrack = track.peerId === localPeerID;
-        if (isLocalTrack && track.layerDefinitions?.length) {
-          res = res.concat(
-            track.layerDefinitions.map(({ layer }) => {
-              return {
-                id: track.id,
-                layer,
-                local: true,
-                label: `${peerName} ${track.source} ${track.type} - ${layer}`,
-              };
-            }),
-          );
-          return res;
-        }
-        res.push({
-          id: track.id,
-          local: isLocalTrack,
-          label: `${peerName} ${track.source} ${track.type}`,
-        });
-        return res;
-      }, []),
-    [tracksMap, peersMap, localPeerID],
-  );
-  return tracksWithLabels;
-};
-
-const LocalPeerStats = () => {
-  const stats = useHMSStatsStore(selectHMSStats.localPeerStats);
-
-  if (!stats) {
-    return null;
-  }
-
-  return (
-    <Flex css={{ flexWrap: 'wrap', gap: '$10' }}>
-      <StatsRow label="Packets Lost" value={stats.subscribe?.packetsLost} />
-      <StatsRow label="Jitter" value={`${((stats.subscribe?.jitter ?? 0) * 1000).toFixed(2)} ms`} />
-      <StatsRow label="Publish Bitrate" value={formatBytes(stats.publish?.bitrate, 'b/s')} />
-      <StatsRow label="Subscribe Bitrate" value={formatBytes(stats.subscribe?.bitrate, 'b/s')} />
-      <StatsRow
-        label="Available Outgoing Bitrate"
-        value={formatBytes(stats.publish?.availableOutgoingBitrate, 'b/s')}
-      />
-      <StatsRow label="Total Bytes Sent" value={formatBytes(stats.publish?.bytesSent)} />
-      <StatsRow label="Total Bytes Received" value={formatBytes(stats.subscribe?.bytesReceived)} />
-      <StatsRow
-        label="Round Trip Time"
-        value={`${
-          (((stats.publish?.currentRoundTripTime || 0) + (stats.subscribe?.currentRoundTripTime || 0)) / 2).toFixed(3) *
-          1000
-        } ms`}
-      />
-    </Flex>
-  );
-};
-
-const TrackStats = ({ trackID, layer, local }) => {
-  const selector = match({ trackID, layer, local })
-    .with(
-      {
-        layer: P.when(layer => !!layer),
-      },
-      () => selectHMSStats.localVideoTrackStatsByLayer(layer)(trackID),
-    )
-    .with({ local: P.when(local => !!local) }, () => selectHMSStats.localAudioTrackStatsByID(trackID))
-    .otherwise(() => selectHMSStats.trackStatsByID(trackID));
-  const stats = useHMSStatsStore(selector);
-  if (!stats) {
-    return null;
-  }
-  const inbound = stats.type.includes('inbound');
-
-  return (
-    <Flex css={{ flexWrap: 'wrap', gap: '$10' }}>
-      <StatsRow label="Type" value={stats.type + ' ' + stats.kind} />
-      <StatsRow label="Bitrate" value={formatBytes(stats.bitrate, 'b/s')} />
-      <StatsRow label="Packets Lost" value={stats.packetsLost} />
-      <StatsRow label="Jitter" value={`${((stats.subscribe?.jitter ?? 0) * 1000).toFixed(2)} ms`} />
-      <StatsRow
-        label={inbound ? 'Bytes Received' : 'Bytes Sent'}
-        value={formatBytes(inbound ? stats.bytesReceived : stats.bytesSent)}
-      />
-      {stats.kind === 'video' && (
-        <>
-          <StatsRow label="Framerate" value={stats.framesPerSecond} />
-          {!inbound && <StatsRow label="Quality Limitation Reason" value={stats.qualityLimitationReason} />}
-        </>
-      )}
-      <StatsRow
-        label="Round Trip Time"
-        value={stats.roundTripTime ? `${(stats.roundTripTime * 1000).toFixed(3)} ms` : '-'}
-      />
-    </Flex>
-  );
-};
-
-const DebugInfo = ({ details }) => {
-  return (
-    <Accordion.Root type="single" collapsible css={{ w: '100%' }}>
-      <Accordion.Item value="Debug Info">
-        <Accordion.Header>
-          <Label variant="body2" css={{ c: '$on_surface_high' }}>
-            Debug Info
-          </Label>
-        </Accordion.Header>
-        <Accordion.Content>
-          <Flex css={{ flexWrap: 'wrap', mt: '$10', gap: '$10' }}>
-            <StatsRow css={{ w: '100%' }} label="Websocket URL" value={details?.websocketURL} />
-            <StatsRow css={{ w: '100%' }} label="Init Endpoint" value={details?.initEndpoint} />
-            <StatsRow css={{ w: '100%' }} label="Enabled flags" value={details?.enabledFlags?.join(', ')} />
-          </Flex>
-        </Accordion.Content>
-      </Accordion.Item>
-    </Accordion.Root>
-  );
-};
-
-const StatsRow = React.memo(({ label, value, css }) => (
-  <Box css={{ bg: '$surface_bright', w: 'calc(50% - $6)', p: '$8', r: '$3', ...css }}>
-    <Text
-      variant="overline"
-      css={{
-        fontWeight: '$semiBold',
-        color: '$on_surface_medium',
-        textTransform: 'uppercase',
-      }}
-    >
-      {label}
-    </Text>
-    <Text variant="sub1" css={{ fontWeight: '$semiBold', color: '$on_surface_high' }}>
-      {value || '-'}
-    </Text>
-  </Box>
-));