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

package/src/Prebuilt/components/Streaming/Common.jsx

@@ -1,143 +0,0 @@
-import React from 'react';
-import { selectPermissions, useHMSStore } from '@100mslive/react-sdk';
-import { ChevronLeftIcon, ChevronRightIcon, CrossIcon, RecordIcon } from '@100mslive/react-icons';
-import { Box, Flex, IconButton, slideLeftAndFade, Switch, Text } from '../../../';
-
-export const StreamCard = ({ title, subtitle, Icon, imgSrc = '', css = {}, onClick, testId }) => {
-  return (
-    <Flex
-      css={{
-        w: '100%',
-        p: '$10',
-        r: '$1',
-        cursor: 'pointer',
-        bg: '$surface_bright',
-        mb: '$10',
-        mt: '$8',
-        ...css,
-      }}
-      data-testid={testId}
-      onClick={onClick}
-    >
-      <Text css={{ alignSelf: 'center', p: '$4' }}>
-        {imgSrc ? <img src={imgSrc} height={40} width={40} alt="Streaming" /> : <Icon width={40} height={40} />}
-      </Text>
-      <Box css={{ flex: '1 1 0', mx: '$8' }}>
-        <Text variant="h6" css={{ mb: '$4' }}>
-          {title}
-        </Text>
-        <Text variant="sm" css={{ color: '$on_surface_medium' }}>
-          {subtitle}
-        </Text>
-      </Box>
-      <Text css={{ alignSelf: 'center' }}>
-        <ChevronRightIcon />
-      </Text>
-    </Flex>
-  );
-};
-
-export const ContentHeader = ({ onBack, onClose, title = '', content }) => {
-  return (
-    <Flex
-      css={{ w: '100%', py: '$8', px: '$10', cursor: 'pointer', borderBottom: '1px solid $border_bright', mb: '$8' }}
-    >
-      {onBack ? (
-        <Flex
-          align="center"
-          css={{
-            mr: '$8',
-            color: '$on_surface_high',
-          }}
-          onClick={onBack}
-          data-testid="go_back"
-        >
-          <ChevronLeftIcon />
-        </Flex>
-      ) : null}
-      <Box css={{ flex: '1 1 0', display: 'flex', alignItems: 'center' }}>
-        {title ? (
-          <Text
-            variant="tiny"
-            css={{
-              textTransform: 'uppercase',
-              fontWeight: '$semiBold',
-              color: '$on_surface_medium',
-            }}
-          >
-            {title}
-          </Text>
-        ) : null}
-        <Text variant="h6">{content}</Text>
-      </Box>
-      {onClose ? (
-        <IconButton onClick={onClose} css={{ alignSelf: 'flex-start' }} data-testid="close_stream_section">
-          <CrossIcon />
-        </IconButton>
-      ) : null}
-    </Flex>
-  );
-};
-export const Container = ({ children, rounded = false }) => {
-  return (
-    <Box
-      css={{
-        size: '100%',
-        zIndex: 2,
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        bg: '$surface_dim',
-        transform: 'translateX(10%)',
-        animation: `${slideLeftAndFade('10%')} 100ms ease-out forwards`,
-        display: 'flex',
-        flexDirection: 'column',
-        borderRadius: rounded ? '$2' : '0',
-      }}
-    >
-      {children}
-    </Box>
-  );
-};
-
-export const ContentBody = ({ Icon, title, removeVerticalPadding = false, children }) => {
-  return (
-    <Box css={{ p: removeVerticalPadding ? '$0 $10' : '$10' }}>
-      <Text css={{ display: 'flex', alignItems: 'center', mb: '$4' }}>
-        <Icon />
-        <Text as="span" css={{ fontWeight: '$semiBold', ml: '$4' }}>
-          {title}
-        </Text>
-      </Text>
-      <Text variant="sm" css={{ color: '$on_surface_medium' }}>
-        {children}
-      </Text>
-    </Box>
-  );
-};
-
-export const RecordStream = ({ record, setRecord, testId }) => {
-  const permissions = useHMSStore(selectPermissions);
-  return permissions?.browserRecording ? (
-    <Flex align="center" css={{ bg: '$surface_bright', m: '$8 $10', p: '$8', r: '$0' }}>
-      <Text css={{ color: '$alert_error_default' }}>
-        <RecordIcon />
-      </Text>
-      <Text variant="sm" css={{ flex: '1 1 0', mx: '$8' }}>
-        Record the stream
-      </Text>
-      <Switch checked={record} onCheckedChange={setRecord} data-testid={testId} />
-    </Flex>
-  ) : null;
-};
-
-export const ErrorText = ({ error }) => {
-  if (!error) {
-    return null;
-  }
-  return (
-    <Text variant="sm" css={{ my: '$4', color: '$alert_error_default' }}>
-      {error}
-    </Text>
-  );
-};

package/src/Prebuilt/components/Streaming/ResolutionInput.jsx

@@ -1,88 +0,0 @@
-import React, { useCallback, useState } from 'react';
-import { InfoIcon } from '@100mslive/react-icons';
-import { Flex, Input, Label, Text, Tooltip } from '../../../';
-import { DialogRow } from '../../primitives/DialogContent';
-import {
-  RTMP_RECORD_DEFAULT_RESOLUTION,
-  RTMP_RECORD_RESOLUTION_MAX,
-  RTMP_RECORD_RESOLUTION_MIN,
-} from '../../common/constants';
-
-export const ResolutionInput = ({ onResolutionChange, disabled, tooltipText, css, testId }) => {
-  const [resolution, setResolution] = useState(RTMP_RECORD_DEFAULT_RESOLUTION);
-
-  const resolutionChangeHandler = useCallback(
-    event => {
-      const { name, value } = event.target;
-      let width = name === 'resWidth' ? Number(value) : resolution.width;
-      let height = name === 'resHeight' ? Number(value) : resolution.height;
-
-      if (width === 0) {
-        width = null;
-      }
-      if (height === 0) {
-        height = null;
-      }
-      const newResolution = {
-        width: !isNaN(width) ? width : RTMP_RECORD_DEFAULT_RESOLUTION.width,
-        height: !isNaN(height) ? height : RTMP_RECORD_DEFAULT_RESOLUTION.height,
-      };
-      setResolution(newResolution);
-    },
-    [resolution],
-  );
-
-  return (
-    <DialogRow breakSm css={css}>
-      <Flex gap={1}>
-        <Label css={{ mb: '$8' }}>Resolution</Label>
-        {tooltipText && (
-          <Tooltip title={tooltipText}>
-            <div>
-              <InfoIcon color="#B0C3DB" />
-            </div>
-          </Tooltip>
-        )}
-      </Flex>
-      <Flex
-        justify="between"
-        css={{ width: !tooltipText ? '100%' : '70%', '@sm': { width: '100%' } }}
-        gap={2}
-        direction="column"
-      >
-        <Flex justify="between" gap={2}>
-          <Flex direction="column" css={{ width: '50%' }}>
-            <Text variant="xs">Width</Text>
-            <Input
-              data-testid={`${testId}_width`}
-              css={{ width: '100%', mt: '$4' }}
-              name="resWidth"
-              value={resolution.width}
-              onChange={resolutionChangeHandler}
-              readOnly={disabled}
-              min={RTMP_RECORD_RESOLUTION_MIN}
-              max={RTMP_RECORD_RESOLUTION_MAX}
-              onBlur={() => onResolutionChange(resolution)}
-              type="number"
-            />
-          </Flex>
-          <Flex direction="column" css={{ width: '50%' }}>
-            <Text variant="xs">Height</Text>
-            <Input
-              data-testid={`${testId}_height`}
-              css={{ width: '100%', mt: '$4' }}
-              name="resHeight"
-              value={resolution.height}
-              onChange={resolutionChangeHandler}
-              onBlur={() => onResolutionChange(resolution)}
-              readOnly={disabled}
-              min={RTMP_RECORD_RESOLUTION_MIN}
-              max={RTMP_RECORD_RESOLUTION_MAX}
-              type="number"
-            />
-          </Flex>
-        </Flex>
-      </Flex>
-    </DialogRow>
-  );
-};

package/src/Prebuilt/components/TileMenu/TileMenu.tsx

@@ -1,148 +0,0 @@
-import React, { useState } from 'react';
-import { useMedia } from 'react-use';
-import {
-  HMSAudioTrack,
-  HMSVideoTrack,
-  selectLocalPeerID,
-  selectPeerByID,
-  selectPermissions,
-  selectTrackByID,
-  selectVideoTrackByPeerID,
-  useHMSStore,
-  useRemoteAVToggle,
-} from '@100mslive/react-sdk';
-import { CrossIcon, VerticalMenuIcon } from '@100mslive/react-icons';
-import { Box, Flex } from '../../../Layout';
-import { Sheet } from '../../../Sheet';
-import { Text } from '../../../Text';
-import { config as cssConfig, useTheme } from '../../../Theme';
-import { StyledMenuTile } from '../../../TileMenu';
-import { ChangeNameModal } from '../MoreSettings/ChangeNameModal';
-import { getVideoTileLabel } from '../peerTileUtils';
-import { RoleChangeModal } from '../RoleChangeModal';
-import { TileMenuContent } from './TileMenuContent';
-import { useDropdownList } from '../hooks/useDropdownList';
-import { getDragClassName } from './utils';
-
-/**
- * Taking peerID as peer won't necesarilly have tracks
- */
-const TileMenu = ({
-  audioTrackID,
-  videoTrackID,
-  peerID,
-  isScreenshare = false,
-  canMinimise,
-  enableSpotlightingPeer = true,
-}: {
-  audioTrackID: string;
-  videoTrackID: string;
-  peerID: string;
-  isScreenshare?: boolean;
-  canMinimise?: boolean;
-  enableSpotlightingPeer?: boolean;
-}) => {
-  const [open, setOpen] = useState(false);
-  const { theme } = useTheme();
-
-  const localPeerID = useHMSStore(selectLocalPeerID);
-  const isLocal = localPeerID === peerID;
-  const { removeOthers } = useHMSStore(selectPermissions) || {};
-  const { setVolume, toggleAudio, toggleVideo } = useRemoteAVToggle(audioTrackID, videoTrackID);
-  const showSpotlight = enableSpotlightingPeer;
-
-  const isPrimaryVideoTrack = useHMSStore(selectVideoTrackByPeerID(peerID))?.id === videoTrackID;
-  const showPinAction = !!(audioTrackID || (videoTrackID && isPrimaryVideoTrack));
-
-  const track = useHMSStore(selectTrackByID(videoTrackID)) as HMSVideoTrack | null;
-  const audioTrack = useHMSStore(selectTrackByID(audioTrackID)) as HMSAudioTrack | null;
-  const hideSimulcastLayers = !track?.layerDefinitions?.length || track.degraded || !track.enabled;
-  const isMobile = useMedia(cssConfig.media.md);
-  const peer = useHMSStore(selectPeerByID(peerID));
-  const [showNameChangeModal, setShowNameChangeModal] = useState(false);
-  const [showRoleChangeModal, setShowRoleChangeModal] = useState(false);
-  useDropdownList({ open, name: 'TileMenu' });
-  const dragClassName = getDragClassName();
-
-  if (!peer || (!(removeOthers || toggleAudio || toggleVideo || setVolume || showPinAction) && hideSimulcastLayers)) {
-    return null;
-  }
-
-  const openNameChangeModal = () => setShowNameChangeModal(true);
-  const openRoleChangeModal = () => setShowRoleChangeModal(true);
-
-  const props: React.ComponentPropsWithoutRef<typeof TileMenuContent> = {
-    isLocal,
-    isScreenshare,
-    audioTrackID,
-    videoTrackID,
-    peerID,
-    showSpotlight,
-    showPinAction,
-    canMinimise,
-    openNameChangeModal,
-    openRoleChangeModal,
-  };
-
-  return (
-    <>
-      <StyledMenuTile.Root open={open} onOpenChange={setOpen}>
-        <StyledMenuTile.Trigger
-          data-testid="participant_menu_btn"
-          css={{ bg: `${theme.colors.background_dim.value}A3`, p: '$2', w: 'unset', h: 'unset' }}
-          onClick={e => e.stopPropagation()}
-          className={dragClassName}
-        >
-          <VerticalMenuIcon width={20} height={20} />
-        </StyledMenuTile.Trigger>
-
-        {isMobile ? (
-          <Sheet.Root open={open} onOpenChange={setOpen}>
-            <Sheet.Content css={{ bg: '$surface_dim', pt: '$8' }}>
-              <Flex
-                css={{
-                  color: '$on_surface_high',
-                  display: 'flex',
-                  w: '100%',
-                  justifyContent: 'space-between',
-                  alignItems: 'center',
-                  px: '$10',
-                  pb: '$8',
-                  borderBottom: '1px solid $border_default',
-                }}
-              >
-                <Box>
-                  <Text css={{ color: '$on_surface_high', fontWeight: '$semiBold' }}>
-                    {getVideoTileLabel({ peerName: peer?.name, isLocal, audioTrack, videoTrack: track })}
-                  </Text>
-                  {peer?.roleName ? (
-                    <Text variant="xs" css={{ color: '$on_surface_low', mt: '$2' }}>
-                      {peer.roleName}
-                    </Text>
-                  ) : null}
-                </Box>
-
-                <Sheet.Close css={{ color: 'inherit' }}>
-                  <CrossIcon />
-                </Sheet.Close>
-              </Flex>
-              <Box css={{ px: '$8', pb: '$8', maxHeight: '80vh', overflowY: 'auto' }}>
-                <TileMenuContent {...props} closeSheetOnClick={() => setOpen(false)} />
-              </Box>
-            </Sheet.Content>
-          </Sheet.Root>
-        ) : (
-          <StyledMenuTile.Content side="top" align="end" css={{ maxHeight: '$80', overflowY: 'auto' }}>
-            <TileMenuContent {...props} />
-          </StyledMenuTile.Content>
-        )}
-      </StyledMenuTile.Root>
-      {showNameChangeModal && <ChangeNameModal onOpenChange={setShowNameChangeModal} />}
-      {showRoleChangeModal && <RoleChangeModal peerId={peerID} onOpenChange={setShowRoleChangeModal} />}
-    </>
-  );
-};
-
-export { isSameTile } from './TileMenuContent';
-
-export default TileMenu;