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

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

@@ -1,52 +0,0 @@
-import React from 'react';
-import { useMedia } from 'react-use';
-import { HMSRoomState, selectRoomState, useHMSStore } from '@100mslive/react-sdk';
-import { config as cssConfig, Flex } from '../../..';
-// @ts-ignore: No implicit any
-import { Logo, SpeakerTag } from './HeaderComponents';
-// @ts-ignore: No implicit any
-import { RoomDetailsHeader } from './RoomDetailsHeader';
-import { LiveStatus, RecordingPauseStatus, RecordingStatus, StreamActions } from './StreamActions';
-// @ts-ignore: No implicit any
-import { AudioActions, CamaraFlipActions } from './common';
-
-export const Header = () => {
-  const roomState = useHMSStore(selectRoomState);
-  const isMobile = useMedia(cssConfig.media.md);
-  // Header should be present only inside the call - not in preview, leave room states
-  if (roomState !== HMSRoomState.Connected) {
-    return <></>;
-  }
-  return (
-    <Flex justify="between" align="center" css={{ position: 'relative', height: '100%' }}>
-      <Flex align="center" gap="2" css={{ position: 'absolute', left: '$10' }}>
-        <Logo />
-        <RoomDetailsHeader />
-        <SpeakerTag />
-        {isMobile && (
-          <Flex align="center" css={{ gap: '$4' }}>
-            <LiveStatus />
-            <RecordingStatus />
-            <RecordingPauseStatus />
-          </Flex>
-        )}
-      </Flex>
-      <Flex
-        align="center"
-        css={{
-          position: 'absolute',
-          right: '$10',
-          gap: '$4',
-        }}
-      >
-        <StreamActions />
-        {isMobile ? (
-          <>
-            <CamaraFlipActions />
-            <AudioActions />
-          </>
-        ) : null}
-      </Flex>
-    </Flex>
-  );
-};

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

@@ -1,57 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { selectDominantSpeaker, useHMSStore } from '@100mslive/react-sdk';
-import { VolumeOneIcon } from '@100mslive/react-icons';
-import { Flex, styled, Text, textEllipsis } from '../../../';
-import { useRoomLayout } from '../../provider/roomLayoutProvider';
-
-export const SpeakerTag = () => {
-  const dominantSpeaker = useHMSStore(selectDominantSpeaker);
-  return (
-    dominantSpeaker &&
-    dominantSpeaker.name && (
-      <Flex
-        align="center"
-        justify="center"
-        css={{ flex: '1 1 0', color: '$on_surface_high', '@md': { display: 'none' } }}
-      >
-        <VolumeOneIcon />
-        <Text variant="sm" css={{ ...textEllipsis(200), ml: '$2' }} title={dominantSpeaker.name}>
-          {dominantSpeaker.name}
-        </Text>
-      </Flex>
-    )
-  );
-};
-
-const LogoImg = styled('img', {
-  maxHeight: '$14',
-  w: 'auto',
-  objectFit: 'contain',
-  '@md': {
-    maxHeight: '$12',
-  },
-});
-
-export const Logo = () => {
-  const roomLayout = useRoomLayout();
-  const logo = roomLayout?.logo?.url;
-  const [hideImage, setHideImage] = useState(false);
-  // Hide logo for now as there is not enough space
-  useEffect(() => {
-    if (hideImage) {
-      setHideImage(false);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [logo]);
-
-  return logo && !hideImage ? (
-    <LogoImg
-      src={logo}
-      alt="Brand Logo"
-      onError={e => {
-        e.target.onerror = null;
-        setHideImage(true);
-      }}
-    />
-  ) : null;
-};

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

@@ -1,89 +0,0 @@
-import React, { useCallback, useState } from 'react';
-import { CheckIcon, ChevronDownIcon, ChevronUpIcon, HandRaiseIcon, PeopleIcon } from '@100mslive/react-icons';
-import { Box, Dropdown, Flex, Text, textEllipsis } from '../../../';
-import { CHAT_SELECTOR } from '../../common/constants';
-
-export const ParticipantFilter = ({ selection, onSelection, isConnected, roles }) => {
-  const [open, setOpen] = useState(false);
-  const selectionValue = selection?.role || (selection?.metadata?.isHandRaised ? 'Raised Hand' : '');
-  const onItemClick = useCallback(value => {
-    onSelection(value);
-    setOpen(false);
-  }, []); //eslint-disable-line
-  if (!isConnected) {
-    return null;
-  }
-  return (
-    <Dropdown.Root open={open} onOpenChange={value => setOpen(value)}>
-      <Dropdown.Trigger
-        asChild
-        data-testid="participant_list_filter"
-        css={{
-          border: '1px solid $on_surface_low',
-          r: '$0',
-          p: '$2 $4',
-        }}
-        tabIndex={0}
-      >
-        <Flex align="center">
-          <Text variant="sm" css={{ ...textEllipsis(80) }}>
-            {selectionValue || CHAT_SELECTOR.EVERYONE}
-          </Text>
-          <Box css={{ ml: '$2', color: '$on_surface_low' }}>
-            {open ? <ChevronUpIcon width={14} height={14} /> : <ChevronDownIcon width={14} height={14} />}
-          </Box>
-        </Flex>
-      </Dropdown.Trigger>
-      <Dropdown.Content
-        align="start"
-        sideOffset={8}
-        css={{
-          height: 'auto',
-          maxHeight: '$96',
-          boxShadow: '$md',
-          w: '$48',
-        }}
-      >
-        <Item selected={!selection} title="Everyone" onSelection={onItemClick} icon={<PeopleIcon />} />
-        <Item
-          selected={selection?.metadata?.isHandRaised}
-          title="Raised Hand"
-          onSelection={onItemClick}
-          icon={<HandRaiseIcon />}
-          value={{ metadata: { isHandRaised: true }, role: '' }}
-        />
-        <Dropdown.ItemSeparator />
-        {roles.map(role => (
-          <Item
-            key={role}
-            selected={selectionValue === role}
-            title={role}
-            value={{ metadata: { isHandRaised: false }, role }}
-            onSelection={onItemClick}
-          />
-        ))}
-      </Dropdown.Content>
-    </Dropdown.Root>
-  );
-};
-
-const Item = ({ selected, title, onSelection, value, icon }) => {
-  return (
-    <Dropdown.Item
-      onClick={e => {
-        e.preventDefault();
-        onSelection(value);
-      }}
-    >
-      <Flex align="center" css={{ flex: '1 1 0' }}>
-        {icon && <Text>{icon}</Text>}
-        <Text css={{ ml: '$4' }}>{title}</Text>
-      </Flex>
-      {selected && (
-        <Text>
-          <CheckIcon widht={16} height={16} />
-        </Text>
-      )}
-    </Dropdown.Item>
-  );
-};

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

@@ -1,51 +0,0 @@
-import React from 'react';
-import { useMedia } from 'react-use';
-import { ChevronRightIcon } from '@100mslive/react-icons';
-import { Flex } from '../../../Layout';
-import { Text } from '../../../Text';
-import { config as cssConfig } from '../../../Theme';
-import { useRoomLayoutHeader } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
-import { useSheetToggle } from '../AppData/useSheet';
-// @ts-ignore
-import { useSidepaneToggle } from '../AppData/useSidepane';
-import { SHEET_OPTIONS, SIDE_PANE_OPTIONS } from '../../common/constants';
-
-export const RoomDetailsHeader = () => {
-  const { title, description } = useRoomLayoutHeader();
-  const isMobile = useMedia(cssConfig.media.md);
-  const clipLength = 30;
-  const toggleDetailsPane = useSidepaneToggle(SIDE_PANE_OPTIONS.ROOM_DETAILS);
-  const toggleDetailsSheet = useSheetToggle(SHEET_OPTIONS.ROOM_DETAILS);
-
-  if ((!title && !description) || (isMobile && !title)) {
-    return null;
-  }
-
-  return (
-    <Flex direction={isMobile ? 'row' : 'column'} css={{ ml: '$8', alignItems: isMobile ? 'center' : 'start' }}>
-      <Text variant="sm" css={{ c: '$on_surface_high', fontWeight: '$semiBold' }}>
-        {title}
-      </Text>
-      {!isMobile && (
-        <Flex align="end" css={{ color: '$on_surface_high' }}>
-          <Text variant="xs" css={{ c: '$on_surface_medium' }}>
-            {description.slice(0, clipLength)}
-          </Text>
-          {description.length > clipLength ? (
-            <span
-              style={{ fontWeight: '600', fontSize: '12px', cursor: 'pointer', lineHeight: '1rem' }}
-              onClick={toggleDetailsPane}
-            >
-              &nbsp;...more
-            </span>
-          ) : null}
-        </Flex>
-      )}
-      {isMobile && description ? (
-        <Flex css={{ color: '$on_surface_medium' }}>
-          <ChevronRightIcon height={16} width={16} onClick={toggleDetailsSheet} />
-        </Flex>
-      ) : null}
-    </Flex>
-  );
-};

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

@@ -1,297 +0,0 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { useMedia } from 'react-use';
-import { HMSRecordingState } from '@100mslive/hms-video-store';
-import {
-  HMSRoomState,
-  selectHLSState,
-  selectIsConnectedToRoom,
-  selectPermissions,
-  selectRecordingState,
-  selectRoomState,
-  useHMSActions,
-  useHMSStore,
-  useRecordingStreaming,
-} from '@100mslive/react-sdk';
-import { AlertTriangleIcon, CrossIcon, PauseCircleIcon, RecordIcon } from '@100mslive/react-icons';
-import { Box, Button, config as cssConfig, Flex, HorizontalDivider, Loading, Popover, Text, Tooltip } from '../../..';
-import { Sheet } from '../../../Sheet';
-// @ts-ignore
-import { ToastManager } from '../Toast/ToastManager';
-import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
-import { useRecordingHandler } from '../../common/hooks';
-// @ts-ignore
-import { formatTime } from '../../common/utils';
-
-export const getRecordingText = (
-  {
-    isBrowserRecordingOn,
-    isServerRecordingOn,
-    isHLSRecordingOn,
-  }: { isBrowserRecordingOn: boolean; isServerRecordingOn: boolean; isHLSRecordingOn: boolean },
-  delimiter = ', ',
-) => {
-  if (!isBrowserRecordingOn && !isServerRecordingOn && !isHLSRecordingOn) {
-    return '';
-  }
-  const title: string[] = [];
-  if (isBrowserRecordingOn) {
-    title.push('Browser');
-  }
-  if (isServerRecordingOn) {
-    title.push('Server');
-  }
-  if (isHLSRecordingOn) {
-    title.push('HLS');
-  }
-  return title.join(delimiter);
-};
-
-export const LiveStatus = () => {
-  const { isHLSRunning, isRTMPRunning } = useRecordingStreaming();
-  const hlsState = useHMSStore(selectHLSState);
-  const isMobile = useMedia(cssConfig.media.md);
-  const intervalRef = useRef<NodeJS.Timeout | null>(null);
-  const { screenType } = useRoomLayoutConferencingScreen();
-  const [liveTime, setLiveTime] = useState(0);
-
-  const startTimer = useCallback(() => {
-    intervalRef.current = setInterval(() => {
-      const timeStamp = hlsState?.variants[0]?.[screenType === 'hls_live_streaming' ? 'startedAt' : 'initialisedAt'];
-      if (hlsState?.running && timeStamp) {
-        setLiveTime(Date.now() - timeStamp.getTime());
-      }
-    }, 1000);
-  }, [hlsState?.running, hlsState?.variants, screenType]);
-
-  useEffect(() => {
-    if (hlsState?.running) {
-      startTimer();
-    }
-    if (!hlsState?.running && intervalRef.current) {
-      clearInterval(intervalRef.current);
-    }
-    return () => {
-      if (intervalRef.current) {
-        clearInterval(intervalRef.current);
-      }
-    };
-  }, [hlsState.running, isMobile, startTimer]);
-
-  if (!isHLSRunning && !isRTMPRunning) {
-    return null;
-  }
-  return (
-    <Flex
-      align="center"
-      gap="1"
-      css={{
-        border: '1px solid $border_default',
-        padding: '$4 $6 $4 $6',
-        borderRadius: '$1',
-      }}
-    >
-      <Box css={{ w: '$4', h: '$4', r: '$round', bg: '$alert_error_default', mr: '$2' }} />
-      <Flex align="center" gap="2">
-        <Text variant={!isMobile ? 'button' : 'body2'}>LIVE</Text>
-        <Text variant="caption">{hlsState?.variants?.length > 0 && isHLSRunning ? formatTime(liveTime) : ''}</Text>
-      </Flex>
-    </Flex>
-  );
-};
-
-export const RecordingStatus = () => {
-  const { isBrowserRecordingOn, isServerRecordingOn, isHLSRecordingOn, isRecordingOn } = useRecordingStreaming();
-  const permissions = useHMSStore(selectPermissions);
-  const isMobile = useMedia(cssConfig.media.md);
-
-  if (
-    !isRecordingOn ||
-    // if only browser recording is enabled, stop recording is shown
-    // so no need to show this as it duplicates
-    [permissions?.browserRecording, !isServerRecordingOn, !isHLSRecordingOn, isBrowserRecordingOn].every(
-      value => !!value,
-    )
-  ) {
-    // show recording icon in mobile without popover
-    if (!(isMobile && isRecordingOn)) return null;
-  }
-
-  return (
-    <Tooltip
-      boxCss={{ zIndex: 1 }}
-      title={getRecordingText({
-        isBrowserRecordingOn,
-        isServerRecordingOn,
-        isHLSRecordingOn,
-      })}
-    >
-      <Flex
-        css={{
-          color: '$alert_error_default',
-          alignItems: 'center',
-        }}
-      >
-        <RecordIcon width={24} height={24} />
-      </Flex>
-    </Tooltip>
-  );
-};
-
-export const RecordingPauseStatus = () => {
-  const recording = useHMSStore(selectRecordingState);
-  if (recording.hls && recording.hls.state === HMSRecordingState.PAUSED) {
-    return (
-      <Tooltip
-        boxCss={{ zIndex: 1 }}
-        title={getRecordingText({
-          isBrowserRecordingOn: false,
-          isServerRecordingOn: false,
-          isHLSRecordingOn: true,
-        })}
-      >
-        <Flex
-          css={{
-            color: '$on_surface_high',
-            alignItems: 'center',
-          }}
-        >
-          <PauseCircleIcon width={24} height={24} />
-        </Flex>
-      </Tooltip>
-    );
-  }
-  return null;
-};
-
-const StartRecording = () => {
-  const permissions = useHMSStore(selectPermissions);
-  const [open, setOpen] = useState(false);
-  const { startRecording, recordingStarted } = useRecordingHandler();
-  const { isBrowserRecordingOn, isStreamingOn, isHLSRunning } = useRecordingStreaming();
-  const hmsActions = useHMSActions();
-  if (!permissions?.browserRecording || isHLSRunning) {
-    return null;
-  }
-  if (isBrowserRecordingOn) {
-    return (
-      <Popover.Root open={open} onOpenChange={setOpen}>
-        <Popover.Trigger asChild>
-          <Button variant="danger" data-testid="stop_recording" icon outlined onClick={() => setOpen(true)}>
-            <RecordIcon />
-            <Text as="span" css={{ '@md': { display: 'none' }, color: 'currentColor' }}>
-              Stop Recording
-            </Text>
-          </Button>
-        </Popover.Trigger>
-        <Popover.Portal>
-          <Popover.Content align="end" sideOffset={8} css={{ w: '$64' }}>
-            <Text variant="body1" css={{ color: '$on_surface_medium' }}>
-              Are you sure you want to end the recording?
-            </Text>
-            <Button
-              data-testid="stop_recording_confirm"
-              variant="danger"
-              icon
-              css={{ ml: 'auto' }}
-              onClick={async () => {
-                try {
-                  await hmsActions.stopRTMPAndRecording();
-                } catch (error) {
-                  const err = error as Error;
-                  ToastManager.addToast({
-                    title: err.message,
-                    variant: 'error',
-                  });
-                }
-                setOpen(false);
-              }}
-            >
-              Stop
-            </Button>
-          </Popover.Content>
-        </Popover.Portal>
-      </Popover.Root>
-    );
-  }
-  return (
-    <Button
-      data-testid="start_recording"
-      variant="standard"
-      icon
-      disabled={recordingStarted || isStreamingOn}
-      onClick={async () => {
-        await startRecording();
-      }}
-    >
-      {recordingStarted ? <Loading size={24} color="currentColor" /> : <RecordIcon />}
-      <Text as="span" css={{ '@md': { display: 'none' }, color: 'currentColor' }}>
-        {recordingStarted ? 'Starting' : 'Start'} Recording
-      </Text>
-    </Button>
-  );
-};
-
-/**
- * @description only start recording button will be shown.
- */
-export const StreamActions = () => {
-  const isConnected = useHMSStore(selectIsConnectedToRoom);
-  const isMobile = useMedia(cssConfig.media.md);
-  const roomState = useHMSStore(selectRoomState);
-
-  return (
-    <Flex align="center" css={{ gap: '$4' }}>
-      {!isMobile && (
-        <Flex align="center" css={{ gap: '$4' }}>
-          <RecordingPauseStatus />
-          <RecordingStatus />
-          {roomState !== HMSRoomState.Preview ? <LiveStatus /> : null}
-        </Flex>
-      )}
-      {isConnected && !isMobile ? <StartRecording /> : null}
-    </Flex>
-  );
-};
-
-export const StopRecordingInSheet = ({
-  onStopRecording,
-  onClose,
-}: {
-  onStopRecording: () => void;
-  onClose: () => void;
-}) => {
-  return (
-    <Sheet.Root open={true}>
-      <Sheet.Content>
-        <Sheet.Title css={{ p: '$10' }}>
-          <Flex direction="row" justify="between" css={{ w: '100%', c: '$alert_error_default' }}>
-            <Flex justify="start" align="center" gap="3">
-              <AlertTriangleIcon />
-              <Text variant="h5" css={{ c: '$alert_error_default' }}>
-                Stop Recording
-              </Text>
-            </Flex>
-            <Sheet.Close css={{ color: 'white' }} onClick={onClose}>
-              <CrossIcon />
-            </Sheet.Close>
-          </Flex>
-        </Sheet.Title>
-        <HorizontalDivider />
-        <Box as="div" css={{ p: '$10', overflowY: 'scroll', maxHeight: '70vh' }}>
-          <Text variant="caption" css={{ c: '$on_surface_medium', pb: '$8' }}>
-            Are you sure you want to stop recording? You can’t undo this action.
-          </Text>
-          <Button
-            variant="danger"
-            css={{ width: '100%' }}
-            type="submit"
-            data-testid="popup_change_btn"
-            onClick={onStopRecording}
-          >
-            Stop
-          </Button>
-        </Box>
-      </Sheet.Content>
-    </Sheet.Root>
-  );
-};