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

package/src/Prebuilt/components/ConferenceScreen.tsx

@@ -1,205 +0,0 @@
-import React, { useEffect, useRef } from 'react';
-import { DefaultConferencingScreen_Elements } from '@100mslive/types-prebuilt';
-import { v4 as uuid } from 'uuid';
-import {
-  HMSRoomState,
-  selectIsConnectedToRoom,
-  selectRoomState,
-  useAwayNotifications,
-  useHMSActions,
-  useHMSStore,
-} from '@100mslive/react-sdk';
-import { Footer } from './Footer/Footer';
-import { MoreSettings } from './MoreSettings/MoreSettings';
-import { HLSFailureModal } from './Notifications/HLSFailureModal';
-// @ts-ignore: No implicit Any
-import { ActivatedPIP } from './PIP/PIPComponent';
-// @ts-ignore: No implicit Any
-import { PictureInPicture } from './PIP/PIPManager';
-import { RoleChangeRequestModal } from './RoleChangeRequest/RoleChangeRequestModal';
-import { Box, Flex } from '../../Layout';
-import { useHMSPrebuiltContext } from '../AppContext';
-import { VideoStreamingSection } from '../layouts/VideoStreamingSection';
-// @ts-ignore: No implicit Any
-import { EmojiReaction } from './EmojiReaction';
-import FullPageProgress from './FullPageProgress';
-import { Header } from './Header';
-import { PreviousRoleInMetadata } from './PreviousRoleInMetadata';
-import { RaiseHand } from './RaiseHand';
-import {
-  useRoomLayoutConferencingScreen,
-  useRoomLayoutPreviewScreen,
-} from '../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
-// @ts-ignore: No implicit Any
-import { useAuthToken, useSetAppDataByKey } from './AppData/useUISettings';
-import { useLandscapeHLSStream, useMobileHLSStream } from '../common/hooks';
-import { APP_DATA } from '../common/constants';
-
-export const ConferenceScreen = () => {
-  const { userName, endpoints, onJoin: onJoinFunc } = useHMSPrebuiltContext();
-  const screenProps = useRoomLayoutConferencingScreen();
-  const { isPreviewScreenEnabled } = useRoomLayoutPreviewScreen();
-  const roomState = useHMSStore(selectRoomState);
-  const isConnectedToRoom = useHMSStore(selectIsConnectedToRoom);
-  const hmsActions = useHMSActions();
-
-  const authTokenInAppData = useAuthToken();
-  const headerRef = useRef<HTMLDivElement | null>(null);
-  const footerRef = useRef<HTMLDivElement | null>(null);
-
-  const [isHLSStarted] = useSetAppDataByKey(APP_DATA.hlsStarted);
-  const { requestPermission } = useAwayNotifications();
-
-  // using it in hls stream to show action button when chat is disabled
-  const showChat = !!screenProps.elements?.chat;
-  const autoRoomJoined = useRef(isPreviewScreenEnabled);
-  const isMobileHLSStream = useMobileHLSStream();
-  const isLandscapeHLSStream = useLandscapeHLSStream();
-  const isMwebHLSStream = isMobileHLSStream || isLandscapeHLSStream;
-
-  useEffect(() => {
-    if (
-      authTokenInAppData &&
-      !isConnectedToRoom &&
-      !isPreviewScreenEnabled &&
-      roomState !== HMSRoomState.Connecting &&
-      !autoRoomJoined.current
-    ) {
-      hmsActions
-        .join({
-          userName: userName || uuid(),
-          authToken: authTokenInAppData,
-          initEndpoint: endpoints?.init,
-          rememberDeviceSelection: true,
-          settings: {
-            isAudioMuted: !isPreviewScreenEnabled,
-            isVideoMuted: !isPreviewScreenEnabled,
-            speakerAutoSelectionBlacklist: ['Yeti Stereo Microphone'],
-          },
-        })
-        .then(() => requestPermission())
-        .catch(console.error);
-      autoRoomJoined.current = true;
-    }
-  }, [
-    authTokenInAppData,
-    endpoints?.init,
-    hmsActions,
-    isConnectedToRoom,
-    isPreviewScreenEnabled,
-    roomState,
-    userName,
-    requestPermission,
-  ]);
-
-  useEffect(() => {
-    onJoinFunc?.();
-    return () => {
-      PictureInPicture.stop().catch((error: unknown) => console.error('stopping pip', (error as Error).message));
-    };
-  }, [onJoinFunc]);
-
-  if (!isConnectedToRoom && ![HMSRoomState.Reconnecting, HMSRoomState.Disconnected].includes(roomState)) {
-    return <FullPageProgress text={roomState === HMSRoomState.Connecting ? 'Joining...' : ''} />;
-  }
-
-  return (
-    <>
-      {isHLSStarted ? (
-        <Box css={{ position: 'fixed', zIndex: 100, w: '100%', h: '100%', left: 0, top: 0 }}>
-          <FullPageProgress text="Starting live stream..." css={{ opacity: 0.8, bg: '$background_dim' }} />
-        </Box>
-      ) : null}
-      <Flex css={{ size: '100%', overflow: 'hidden' }} direction="column">
-        {!(screenProps.hideSections.includes('header') || isMwebHLSStream) && (
-          <Box
-            ref={headerRef}
-            css={{
-              h: '$18',
-              transition: 'margin 0.3s ease-in-out',
-              marginTop: isMwebHLSStream ? `-${headerRef.current?.clientHeight}px` : 'none',
-              '@md': {
-                h: '$17',
-              },
-            }}
-            data-testid="header"
-          >
-            <Header />
-          </Box>
-        )}
-        <Box
-          css={{
-            w: '100%',
-            flex: '1 1 0',
-            minHeight: 0,
-            // @ts-ignore
-            px: (screenProps?.elements as DefaultConferencingScreen_Elements)?.video_tile_layout?.grid?.edge_to_edge
-              ? 0
-              : '$10', // TODO: padding to be controlled by section/element
-            paddingBottom: 'env(safe-area-inset-bottom)',
-            '@lg': {
-              px: 0,
-            },
-          }}
-          id="conferencing"
-          data-testid="conferencing"
-        >
-          {screenProps.elements ? (
-            <VideoStreamingSection
-              screenType={screenProps.screenType}
-              elements={screenProps.elements}
-              hideControls={isMwebHLSStream}
-            />
-          ) : null}
-        </Box>
-        {!screenProps.hideSections.includes('footer') && screenProps.elements && !isMwebHLSStream && (
-          <Box
-            ref={footerRef}
-            css={{
-              flexShrink: 0,
-              maxHeight: '$24',
-              transition: 'margin 0.3s ease-in-out',
-              bg: '$background_dim',
-              marginBottom: isMwebHLSStream ? `-${footerRef.current?.clientHeight}px` : undefined,
-              '@md': {
-                maxHeight: 'unset',
-                bg: screenProps.screenType === 'hls_live_streaming' ? 'transparent' : '$background_dim',
-              },
-            }}
-            data-testid="footer"
-          >
-            <Footer elements={screenProps.elements} screenType={screenProps.screenType} />
-          </Box>
-        )}
-        {isMwebHLSStream && !showChat && (
-          <Flex
-            css={{
-              alignItems: 'center',
-              pr: '$4',
-              pb: '$4',
-              position: 'relative',
-            }}
-            justify="end"
-            gap="2"
-          >
-            <RaiseHand />
-            <MoreSettings elements={screenProps.elements} screenType={screenProps.screenType} />
-            <Box
-              css={{
-                position: 'absolute',
-                bottom: '100%',
-                mb: '$4',
-              }}
-            >
-              <EmojiReaction />
-            </Box>
-          </Flex>
-        )}
-        <RoleChangeRequestModal />
-        <HLSFailureModal />
-        <ActivatedPIP />
-        <PreviousRoleInMetadata />
-      </Flex>
-    </>
-  );
-};

package/src/Prebuilt/components/Connection/ConnectionIndicator.tsx

@@ -1,89 +0,0 @@
-import React from 'react';
-import { HMSPeerType, selectConnectionQualityByPeerID, selectPeerTypeByID, useHMSStore } from '@100mslive/react-sdk';
-import { PoorConnectivityIcon } from '@100mslive/react-icons';
-import { styled, Tooltip, useTheme } from '../../..';
-// @ts-ignore
-import { getColor, getTooltipText } from './connectionQualityUtils';
-
-const Wrapper = styled('span', {
-  width: '28px',
-  height: '28px',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  borderRadius: '$round',
-  variants: {
-    isTile: {
-      true: {
-        width: 'unset',
-        height: 'unset',
-      },
-    },
-  },
-});
-
-export const ConnectionIndicator = ({
-  peerId,
-  isTile = false,
-  hideBg = false,
-}: {
-  peerId: string;
-  isTile?: boolean;
-  hideBg?: boolean;
-}) => {
-  const downlinkQuality = useHMSStore(selectConnectionQualityByPeerID(peerId))?.downlinkQuality;
-  const peerType = useHMSStore(selectPeerTypeByID(peerId));
-  const { theme } = useTheme();
-  const defaultColor = theme.colors.on_surface_low;
-  if (downlinkQuality === -1 || downlinkQuality === undefined || peerType === HMSPeerType.SIP) {
-    return null;
-  }
-  if (downlinkQuality === 0) {
-    return (
-      <Tooltip side="left" title={getTooltipText(downlinkQuality)}>
-        <Wrapper isTile={isTile} css={{ color: '#ED4C5A' }} data-testid="tile_network">
-          <PoorConnectivityIcon />
-        </Wrapper>
-      </Tooltip>
-    );
-  }
-  const size = isTile ? 12 : 16;
-  return (
-    <Tooltip side="left" title={getTooltipText(downlinkQuality)}>
-      <Wrapper isTile={isTile} data-testid="tile_network" css={{ backgroundColor: hideBg ? '' : '$surface_bright' }}>
-        <svg
-          width={size}
-          height={size}
-          viewBox="0 0 14 12"
-          xmlns="http://www.w3.org/2000/svg"
-          xmlSpace="preserve"
-          style={{
-            fillRule: 'evenodd',
-            clipRule: 'evenodd',
-            strokeLinejoin: 'round',
-            strokeMiterlimit: 2,
-          }}
-        >
-          <path
-            d="M6.875 0c2.549.035 4.679.902 6.445 2.648.366.362.45.796.216 1.096-.239.306-.714.34-1.142.072a2.28 2.28 0 0 1-.341-.271C9.24.862 4.924.775 1.992 3.346c-.284.249-.594.419-.983.393-.272-.019-.49-.135-.613-.388-.125-.261-.05-.498.114-.713.073-.092.156-.177.245-.254C2.516.804 4.591.039 6.875 0Z"
-            fill={getColor(4, downlinkQuality, defaultColor, theme)}
-            transform="translate(-.333)"
-          />
-          <path
-            d="M7.056 2.964c1.756.035 3.208.7 4.499 1.763.162.134.277.315.354.512.098.251.114.503-.075.72-.193.222-.452.259-.725.198-.293-.066-.518-.247-.738-.443a4.859 4.859 0 0 0-6.198-.26c-.166.127-.318.271-.475.409-.242.211-.513.343-.843.317-.43-.034-.679-.397-.561-.81.062-.211.181-.4.345-.546 1.265-1.162 2.733-1.836 4.417-1.86Z"
-            fill={getColor(3, downlinkQuality, defaultColor, theme)}
-            transform="translate(-.333)"
-          />
-          <path
-            d="M7.384,6.052C8.293,6.068 9.157,6.449 9.783,7.108C10.005,7.339 10.157,7.6 10.07,7.942C9.959,8.377 9.435,8.581 9.071,8.243C7.935,7.191 6.356,7.183 5.152,8.183C4.816,8.462 4.6,8.485 4.332,8.27C4.063,8.055 3.998,7.691 4.177,7.358C4.273,7.179 4.414,7.038 4.57,6.911C5.26,6.349 6.149,6.05 7.384,6.052L7.384,6.052Z"
-            fill={getColor(2, downlinkQuality, defaultColor, theme)}
-          />
-          <path
-            d="M8.214,9.941C8.214,10.234 8.097,10.515 7.888,10.721C7.68,10.928 7.398,11.042 7.104,11.039C6.471,11.036 5.982,10.541 5.993,9.912C6.004,9.259 6.499,8.766 7.133,8.779C7.744,8.791 8.22,9.301 8.214,9.941Z"
-            fill={getColor(1, downlinkQuality, defaultColor, theme)}
-          />
-        </svg>
-      </Wrapper>
-    </Tooltip>
-  );
-};

package/src/Prebuilt/components/Connection/TileConnection.tsx

@@ -1,93 +0,0 @@
-import React from 'react';
-import {
-  HMSPeerType,
-  selectPeerTypeByID,
-  selectScreenShareByPeerID,
-  selectSessionStore,
-  useHMSStore,
-} from '@100mslive/react-sdk';
-import { CallIcon, PinIcon, ShareScreenIcon, SpotlightIcon } from '@100mslive/react-icons';
-import { Flex, styled, Text, textEllipsis } from '../../..';
-import { ConnectionIndicator } from './ConnectionIndicator';
-import { SESSION_STORE_KEY } from '../../common/constants';
-
-const TileConnection = ({
-  name,
-  peerId,
-  hideLabel,
-  width,
-  pinned,
-}: {
-  name: string;
-  peerId: string;
-  hideLabel: boolean;
-  width?: string | number;
-  pinned?: boolean;
-}) => {
-  const spotlighted = useHMSStore(selectSessionStore(SESSION_STORE_KEY.SPOTLIGHT)) === peerId;
-  const isPeerScreenSharing = !!useHMSStore(selectScreenShareByPeerID(peerId));
-  const peerType = useHMSStore(selectPeerTypeByID(peerId));
-  return (
-    <Wrapper>
-      {!hideLabel ? (
-        <>
-          {name ? (
-            <Flex align="center">
-              {peerType === HMSPeerType.SIP && (
-                <IconWrapper>
-                  <CallIcon width="15" height="15" />
-                </IconWrapper>
-              )}
-              {isPeerScreenSharing && (
-                <IconWrapper>
-                  <ShareScreenIcon width="15" height="15" />
-                </IconWrapper>
-              )}
-              {pinned && (
-                <IconWrapper>
-                  <PinIcon width="15" height="15" />
-                </IconWrapper>
-              )}
-              {spotlighted && (
-                <IconWrapper>
-                  <SpotlightIcon width="15" height="15" />
-                </IconWrapper>
-              )}
-              <Text
-                css={{
-                  c: '$on_surface_high',
-                  verticalAlign: 'baseline',
-                  ...(width ? textEllipsis((width as number) - 60) : {}),
-                }}
-                variant="xs"
-              >
-                {name}
-              </Text>
-            </Flex>
-          ) : null}
-          <ConnectionIndicator isTile peerId={peerId} hideBg />
-        </>
-      ) : null}
-    </Wrapper>
-  );
-};
-
-const IconWrapper = styled('div', { c: '$on_surface_high', ml: '$3', mt: '$1', display: 'flex' });
-
-const Wrapper = styled('div', {
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'space-between',
-  position: 'absolute',
-  bottom: '$2',
-  left: '$2',
-  backgroundColor: '$background_dim',
-  borderRadius: '$1',
-  maxWidth: '85%',
-  zIndex: 1,
-  '& p,span': {
-    p: '$2 $3',
-  },
-});
-
-export default TileConnection;

package/src/Prebuilt/components/Connection/connectionQualityUtils.js

@@ -1,37 +0,0 @@
-const connectionTooltip = {
-  0: 'Reconnecting',
-  1: 'Very Bad Connection',
-  2: 'Bad Connection',
-  3: 'Moderate Connection',
-  4: 'Good Connection',
-  5: 'Excellent Connection',
-};
-connectionTooltip[-1] = 'Network Unknown';
-
-/**
- * @param connectionScore -> 1-5 connection score for network quality
- */
-export const getTooltipText = connectionScore => {
-  return connectionTooltip[connectionScore];
-};
-
-/**
- * position is needed here as we don't want all the dots/arcs to be colored,
- * the non colored ones will be passed in the default color. If user is
- * disconnected(score=0), no dot/arc will be colored.
- * @param position -> 1 to 5
- * @param connectionScore -> 0 to 5, 0 means disconnected
- * @param defaultColor -> color for components not taking the connection color
- */
-export const getColor = (position, connectionScore, defaultColor, theme) => {
-  const shouldBeColored = position <= connectionScore;
-  if (!shouldBeColored) {
-    return defaultColor;
-  }
-  if (connectionScore >= 4) {
-    return theme.colors.alert_success;
-  } else if (connectionScore >= 1) {
-    return theme.colors.alert_warning;
-  }
-  return defaultColor;
-};

package/src/Prebuilt/components/EmojiReaction.jsx

@@ -1,100 +0,0 @@
-import React, { useState } from 'react';
-import { useMedia } from 'react-use';
-import data from '@emoji-mart/data/sets/14/apple.json';
-import { init } from 'emoji-mart';
-import {
-  selectAvailableRoleNames,
-  selectIsConnectedToRoom,
-  selectLocalPeerID,
-  useCustomEvent,
-  useHMSStore,
-} from '@100mslive/react-sdk';
-import { EmojiIcon } from '@100mslive/react-icons';
-import { EmojiCard } from './Footer/EmojiCard';
-// import { ToastManager } from './Toast/ToastManager';
-import { Dropdown } from '../../Dropdown';
-import { Box } from '../../Layout';
-import { config as cssConfig } from '../../Theme';
-import { Tooltip } from '../../Tooltip';
-import IconButton from '../IconButton';
-import { useRoomLayoutConferencingScreen } from '../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
-import { useDropdownList } from './hooks/useDropdownList';
-import { useLandscapeHLSStream, useMobileHLSStream } from '../common/hooks';
-import { EMOJI_REACTION_TYPE } from '../common/constants';
-
-init({ data });
-
-export const EmojiReaction = ({ showCard = false }) => {
-  const [open, setOpen] = useState(false);
-  const isConnected = useHMSStore(selectIsConnectedToRoom);
-  const { elements } = useRoomLayoutConferencingScreen();
-  useDropdownList({ open: open, name: 'EmojiReaction' });
-  // const hmsActions = useHMSActions();
-  const roles = useHMSStore(selectAvailableRoleNames);
-  const localPeerId = useHMSStore(selectLocalPeerID);
-  // const { isStreamingOn } = useRecordingStreaming();
-  const isMobile = useMedia(cssConfig.media.md);
-  const isLandscape = useMedia(cssConfig.media.ls);
-  const isMobileHLSStream = useMobileHLSStream();
-  const isLandscapeStream = useLandscapeHLSStream();
-
-  const { sendEvent } = useCustomEvent({
-    type: EMOJI_REACTION_TYPE,
-  });
-
-  const sendReaction = async emojiId => {
-    const data = {
-      type: EMOJI_REACTION_TYPE,
-      emojiId: emojiId,
-      senderId: localPeerId,
-    };
-    // TODO: RT find a way to figure out hls-viewer roles
-    sendEvent(data, { roleNames: roles });
-    window.showFlyingEmoji?.({ emojiId, senderId: localPeerId });
-    /* if (isStreamingOn) {
-      try {
-        await hmsActions.sendHLSTimedMetadata([
-          {
-            payload: JSON.stringify(data),
-            duration: 2,
-          },
-        ]);
-      } catch (error) {
-        console.log(error);
-        ToastManager.addToast({ title: error.message });
-      }
-    } */
-  };
-
-  if (!isConnected || !elements.emoji_reactions) {
-    return null;
-  }
-
-  if (showCard) {
-    return <EmojiCard sendReaction={sendReaction} />;
-  }
-  return (
-    <Dropdown.Root open={open} onOpenChange={setOpen}>
-      <Dropdown.Trigger asChild data-testid="emoji_reaction_btn">
-        <IconButton
-          css={
-            isMobile || isLandscape ? { bg: '$surface_default', r: '$round', border: '1px solid $border_bright' } : {}
-          }
-        >
-          <Tooltip title="Emoji reaction">
-            <Box>
-              <EmojiIcon />
-            </Box>
-          </Tooltip>
-        </IconButton>
-      </Dropdown.Trigger>
-      <Dropdown.Content
-        sideOffset={5}
-        align={isMobileHLSStream || isLandscapeStream ? 'end' : 'center'}
-        css={{ p: '$8', bg: '$surface_default' }}
-      >
-        <EmojiCard sendReaction={sendReaction} />
-      </Dropdown.Content>
-    </Dropdown.Root>
-  );
-};

package/src/Prebuilt/components/EndCallFeedback/Feedback.tsx

@@ -1,71 +0,0 @@
-import React, { useState } from 'react';
-import { useMedia } from 'react-use';
-import { Flex } from '../../../Layout';
-import { config as cssConfig } from '../../../Theme';
-import { FEEBACK_INDEX, FeedbackHeader, FeedbackModal } from './FeedbackForm';
-import { ThankyouView } from './ThankyouView';
-import { useRoomLayoutLeaveScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
-
-export const Feedback = () => {
-  const { feedback } = useRoomLayoutLeaveScreen();
-  const [index, setIndex] = useState(FEEBACK_INDEX.INIT);
-  const isMobile = useMedia(cssConfig.media.md);
-
-  if (!feedback) {
-    return null;
-  }
-  const { ratings } = feedback;
-  if (!ratings) {
-    return null;
-  }
-  ratings.sort((a, b) => {
-    if (!a.value || !b.value) {
-      return 0;
-    }
-    return a.value - b.value;
-  });
-  // TO show thank ypu page
-  if (index === FEEBACK_INDEX.THANK_YOU) {
-    return (
-      <Flex
-        justify="center"
-        css={{
-          pt: '$16',
-        }}
-      >
-        <ThankyouView />
-      </Flex>
-    );
-  }
-  return (
-    <Flex
-      justify="center"
-      css={{
-        pt: '$16',
-        w: isMobile ? '100%' : '528px',
-      }}
-    >
-      {index === FEEBACK_INDEX.INIT ? (
-        <Flex
-          css={{
-            p: isMobile ? '$10' : '$12',
-            border: '1px solid $border_default',
-            bg: '$surface_dim',
-            borderRadius: !isMobile ? '$3' : '$3 $3 0 0',
-            gap: '$10',
-            '@md': {
-              position: 'absolute',
-              bottom: '0',
-              w: '100%',
-            },
-          }}
-          direction="column"
-        >
-          <FeedbackHeader ratings={ratings} onEmojiClicked={setIndex} />
-        </Flex>
-      ) : (
-        <FeedbackModal ratings={ratings} index={index} setIndex={setIndex} />
-      )}
-    </Flex>
-  );
-};