@100mslive/roomkit-react 0.1.4-alpha.1 → 0.1.4

package/src/Prebuilt/components/VideoList.jsx

@@ -1,27 +1,20 @@
 import React, { Fragment, useEffect, useState } from 'react';
-import { selectLocalPeerID, useHMSStore, useVideoList } from '@100mslive/react-sdk';
+import { useVideoList } from '@100mslive/react-sdk';
 import { useTheme } from '../../Theme';
 import { StyledVideoList } from '../../VideoList';
 import { Pagination } from './Pagination';
 import ScreenshareTile from './ScreenshareTile';
 import VideoTile from './VideoTile';
-import useSortedPeers from '../common/useSortedPeers';
 import { useAppConfig } from './AppData/useAppConfig';
-import { useIsHeadless, useUISettings } from './AppData/useUISettings';
-import { UI_SETTINGS } from '../common/constants';
+import { useIsHeadless } from './AppData/useUISettings';
 
 const List = ({ maxTileCount, peers, maxColCount, maxRowCount, includeScreenShareForPeer }) => {
   const { aspectRatio } = useTheme();
   const tileOffset = useAppConfig('headlessConfig', 'tileOffset');
   const isHeadless = useIsHeadless();
-  const hideLocalVideo = useUISettings(UI_SETTINGS.hideLocalVideo);
-  const localPeerId = useHMSStore(selectLocalPeerID);
-  let sortedPeers = useSortedPeers({ peers, maxTileCount });
-  if (hideLocalVideo && sortedPeers.length > 1) {
-    sortedPeers = filterPeerId(sortedPeers, localPeerId);
-  }
+
   const { ref, pagesWithTiles } = useVideoList({
-    peers: sortedPeers,
+    peers,
     maxTileCount,
     maxColCount,
     maxRowCount,
@@ -62,7 +55,7 @@ const List = ({ maxTileCount, peers, maxColCount, maxRowCount, includeScreenShar
           : null}
       </StyledVideoList.Container>
       {!isHeadless && pagesWithTiles.length > 1 ? (
-        <Pagination page={page} setPage={setPage} numPages={pagesWithTiles.length} />
+        <Pagination page={page} onPageChange={setPage} numPages={pagesWithTiles.length} />
       ) : null}
     </StyledVideoList.Root>
   );
@@ -70,27 +63,6 @@ const List = ({ maxTileCount, peers, maxColCount, maxRowCount, includeScreenShar
 
 const VideoList = React.memo(List);
 
-/**
- * returns a new array of peers with the peer with peerId removed,
- * keeps the reference same if peer is not found
- */
-function filterPeerId(peers, peerId) {
-  const oldPeers = peers; // to keep the reference same if peer is not found
-  let foundPeerToFilterOut = false;
-  peers = [];
-  for (let i = 0; i < oldPeers.length; i++) {
-    if (oldPeers[i].id === peerId) {
-      foundPeerToFilterOut = true;
-    } else {
-      peers.push(oldPeers[i]);
-    }
-  }
-  if (!foundPeerToFilterOut) {
-    peers = oldPeers;
-  }
-  return peers;
-}
-
 const getOffset = ({ tileOffset, isHeadless }) => {
   if (!isHeadless || isNaN(Number(tileOffset))) {
     return 32;

package/src/Prebuilt/components/VideoTile.jsx

@@ -1,4 +1,5 @@
 import React, { Fragment, useCallback, useMemo, useState } from 'react';
+import { useMedia } from 'react-use';
 import {
   selectAudioTrackByPeerID,
   selectIsPeerAudioEnabled,
@@ -9,20 +10,32 @@ import {
   selectVideoTrackByPeerID,
   useHMSStore,
 } from '@100mslive/react-sdk';
-import { BrbIcon, HandRaiseFilledIcon, MicOffIcon } from '@100mslive/react-icons';
+import { BrbTileIcon, HandIcon, MicOffIcon } from '@100mslive/react-icons';
 import TileConnection from './Connection/TileConnection';
+import TileMenu from './TileMenu/TileMenu';
 import { useBorderAudioLevel } from '../../AudioLevel';
 import { Avatar } from '../../Avatar';
 import { VideoTileStats } from '../../Stats';
+import { config as cssConfig } from '../../Theme';
 import { Video } from '../../Video';
 import { StyledVideoTile } from '../../VideoTile';
 import { getVideoTileLabel } from './peerTileUtils';
-import TileMenu from './TileMenu';
 import { useAppConfig } from './AppData/useAppConfig';
 import { useIsHeadless, useUISettings } from './AppData/useUISettings';
+import { useShowStreamingUI } from '../common/hooks';
 import { UI_SETTINGS } from '../common/constants';
 
-const Tile = ({ peerId, trackId, width, height, objectFit = 'cover', rootCSS = {}, containerCSS = {} }) => {
+const Tile = ({
+  peerId,
+  trackId,
+  width,
+  height,
+  objectFit = 'cover',
+  canMinimise = false,
+  isDragabble = false,
+  rootCSS = {},
+  containerCSS = {},
+}) => {
   const trackSelector = trackId ? selectVideoTrackByID(trackId) : selectVideoTrackByPeerID(peerId);
   const track = useHMSStore(trackSelector);
   const peerName = useHMSStore(selectPeerNameByID(peerId));
@@ -38,6 +51,8 @@ const Tile = ({ peerId, trackId, width, height, objectFit = 'cover', rootCSS = {
   const borderAudioRef = useBorderAudioLevel(audioTrack?.id);
   const isVideoDegraded = track?.degraded;
   const isLocal = localPeerID === peerId;
+  const isMobile = useMedia(cssConfig.media.md);
+  const showStreamingUI = useShowStreamingUI();
   const label = getVideoTileLabel({
     peerName,
     track,
@@ -123,11 +138,18 @@ const Tile = ({ peerId, trackId, width, height, objectFit = 'cover', rootCSS = {
               <MicOffIcon />
             </StyledVideoTile.AudioIndicator>
           ) : null}
-          {isMouseHovered && !isHeadless ? (
-            <TileMenu peerID={peerId} audioTrackID={audioTrack?.id} videoTrackID={track?.id} />
+          {(isMouseHovered || isDragabble) && !isHeadless ? (
+            <TileMenu
+              peerID={peerId}
+              audioTrackID={audioTrack?.id}
+              videoTrackID={track?.id}
+              canMinimise={canMinimise}
+            />
           ) : null}
           <PeerMetadata peerId={peerId} />
-          <TileConnection hideLabel={hideLabel} name={label} isTile peerId={peerId} width={width} />
+          {showStreamingUI && isMobile ? null : (
+            <TileConnection hideLabel={hideLabel} name={label} isTile peerId={peerId} width={width} />
+          )}
         </StyledVideoTile.Container>
       ) : null}
     </StyledVideoTile.Root>
@@ -145,12 +167,12 @@ const PeerMetadata = ({ peerId }) => {
     <Fragment>
       {isHandRaised ? (
         <StyledVideoTile.AttributeBox css={metaStyles} data-testid="raiseHand_icon_onTile">
-          <HandRaiseFilledIcon width={40} height={40} />
+          <HandIcon width={24} height={24} />
         </StyledVideoTile.AttributeBox>
       ) : null}
       {isBRB ? (
         <StyledVideoTile.AttributeBox css={metaStyles} data-testid="brb_icon_onTile">
-          <BrbIcon width={40} height={40} />
+          <BrbTileIcon width={24} height={24} />
         </StyledVideoTile.AttributeBox>
       ) : null}
     </Fragment>

package/src/Prebuilt/components/conference.jsx

@@ -9,11 +9,13 @@ import {
   useHMSActions,
   useHMSStore,
 } from '@100mslive/react-sdk';
+import { Footer } from './Footer/Footer';
 import { HLSFailureModal } from './Notifications/HLSFailureModal';
+import { ActivatedPIP } from './PIP/PIPComponent';
+import { PictureInPicture } from './PIP/PIPManager';
 import { Box, Flex } from '../../Layout';
 import { useHMSPrebuiltContext } from '../AppContext';
 import { ConferenceMainView } from '../layouts/mainView';
-import { Footer } from './Footer';
 import FullPageProgress from './FullPageProgress';
 import { Header } from './Header';
 import { RoleChangeRequestModal } from './RoleChangeRequestModal';
@@ -106,6 +108,12 @@ const Conference = () => {
     }
   }, [isHeadless, hmsActions]);
 
+  useEffect(() => {
+    return () => {
+      PictureInPicture.stop().catch(error => console.error('stopping pip', error));
+    };
+  }, []);
+
   if (!isConnectedToRoom) {
     return <FullPageProgress loadingText="Joining..." />;
   }
@@ -137,7 +145,11 @@ const Conference = () => {
           w: '100%',
           flex: '1 1 0',
           minHeight: 0,
+          px: '$10',
           paddingBottom: 'env(safe-area-inset-bottom)',
+          '@lg': {
+            px: '$4',
+          },
         }}
         id="conferencing"
         data-testid="conferencing"
@@ -164,6 +176,7 @@ const Conference = () => {
       )}
       <RoleChangeRequestModal />
       <HLSFailureModal />
+      <ActivatedPIP />
     </Flex>
   );
 };

package/src/Prebuilt/components/init/Init.jsx

@@ -1,20 +1,8 @@
 import React, { useEffect } from 'react';
-import {
-  selectLocalPeerID,
-  selectLocalPeerName,
-  selectLocalPeerRoleName,
-  selectSessionId,
-  useHMSStore,
-} from '@100mslive/react-sdk';
 import { useTheme } from '../../../';
-import { setUpZipy } from './initUtils';
 import { FeatureFlagsInit } from '../../services/FeatureFlags';
 
 const Init = () => {
-  const localPeerID = useHMSStore(selectLocalPeerID);
-  const localPeerRole = useHMSStore(selectLocalPeerRoleName);
-  const localPeerName = useHMSStore(selectLocalPeerName);
-  const sessionId = useHMSStore(selectSessionId);
   const { toggleTheme } = useTheme();
 
   useEffect(() => {
@@ -37,21 +25,6 @@ const Init = () => {
     };
   }, []);
 
-  useEffect(() => {
-    if (localPeerID && localPeerRole && localPeerName) {
-      const peerData = {
-        localPeer: {
-          id: localPeerID,
-          name: localPeerName,
-          roleName: localPeerRole,
-        },
-        sessionId,
-      };
-      setUpZipy(peerData);
-    }
-    // eslint-disable-next-line
-  }, [localPeerID, localPeerName, localPeerRole, sessionId]);
-
   return <FeatureFlagsInit />;
 };
 

package/src/Prebuilt/components/init/initUtils.js

@@ -1,26 +1,3 @@
-import { identify } from 'zipyai';
-
-const zipyKey = process.env.REACT_APP_ZIPY_KEY;
-export const setUpZipy = ({ localPeer, roomId, sessionId }) => {
-  if (!zipyKey) {
-    return;
-  }
-
-  let domain;
-  if (typeof window !== 'undefined') {
-    domain = window.location.hostname;
-  }
-
-  identify(localPeer.id, {
-    firstName: localPeer.name,
-    customerName: domain,
-    email: domain,
-    role: localPeer.roleName,
-    sessionId,
-    roomId,
-  });
-};
-
 // interface RoleConfig {
 //   center?: HMSRoleName[];
 //   sidepane?: HMSRoleName[];

package/src/Prebuilt/components/pdfAnnotator/pdfFileOptions.jsx

@@ -22,6 +22,7 @@ export function PDFFileOptions({ onOpenChange }) {
             w: 'min(420px,80%)',
             overflow: 'auto',
             p: '$10',
+            bg: '$surface_dim',
           }}
         >
           <Flex direction="column">
@@ -76,7 +77,7 @@ export function PDFFileOptions({ onOpenChange }) {
               onChange={e => {
                 setPDFURL(e.target.value);
               }}
-              placeholder="Add PDF URL"
+              placeholder="Paste PDF URL"
               type="text"
               error={!isPDFUrlValid}
             />

package/src/Prebuilt/components/pdfAnnotator/pdfInfo.jsx

@@ -9,7 +9,7 @@ export const PDFInfo = () => {
       css={{
         px: '$8',
         py: '$3',
-        bg: '$surface_bright',
+        bg: '$surface_default',
         r: '$1',
         outline: 'none',
         border: '1px solid $border_bright',

package/src/Prebuilt/components/pdfAnnotator/shareScreenOptions.jsx

@@ -1,6 +1,8 @@
 import React, { Fragment, useState } from 'react';
 import { useScreenShare } from '@100mslive/react-sdk';
-import { PdfShare, ScreenShare, StarIcon, VerticalMenuIcon } from '@100mslive/react-icons';
+import { StarIcon, VerticalMenuIcon } from '@100mslive/react-icons';
+import PDFShareImg from './../../images/pdf-share.png';
+import ScreenShareImg from './../../images/screen-share.png';
 import { Box, Button, Dropdown, Flex, IconButton, Text, Tooltip } from '../../../';
 import { ShareMenuIcon } from '../ShareMenuIcon';
 import { PDFFileOptions } from './pdfFileOptions';
@@ -28,7 +30,11 @@ export function ShareScreenOptions() {
   const { toggleScreenShare } = useScreenShare();
   return (
     <Fragment>
-      <Dropdown.Root open={openModals.has(MODALS.SHARE)} onOpenChange={value => updateState(MODALS.SHARE, value)}>
+      <Dropdown.Root
+        open={openModals.has(MODALS.SHARE)}
+        onOpenChange={value => updateState(MODALS.SHARE, value)}
+        modal={false}
+      >
         <Dropdown.Trigger asChild data-testid="sharing_btn" disabled={amIScreenSharing}>
           <ShareMenuIcon disabled={amIScreenSharing}>
             <Tooltip title="Share">
@@ -44,6 +50,7 @@ export function ShareScreenOptions() {
             w: '$96',
             maxHeight: '$96',
             p: 0,
+            bg: '$surface_dim',
           }}
         >
           <Dropdown.Item
@@ -95,12 +102,14 @@ export function ShareScreenOptions() {
                   pb: '0',
                 }}
               >
-                <ScreenShare
+                <img
+                  src={ScreenShareImg}
+                  alt="screen-share"
                   width="100%"
                   height="100%"
                   style={{
-                    borderTopLeftRadius: '$0',
-                    borderTopRightRadius: '$0',
+                    borderTopLeftRadius: '0.5rem', // TODO: create image component to solve for style hardcoding
+                    borderTopRightRadius: '0.5rem',
                   }}
                 />
               </IconButton>
@@ -139,12 +148,14 @@ export function ShareScreenOptions() {
                   pb: '0',
                 }}
               >
-                <PdfShare
+                <img
+                  src={PDFShareImg}
+                  alt="pdf-share"
                   width="100%"
                   height="100%"
                   style={{
-                    borderTopLeftRadius: '$0',
-                    borderTopRightRadius: '$0',
+                    borderTopLeftRadius: '0.5rem', // TODO: create image component to solve for style hardcoding
+                    borderTopRightRadius: '0.5rem',
                   }}
                 />
                 <Flex

package/src/Prebuilt/components/pdfAnnotator/uploadedFile.jsx

@@ -25,6 +25,7 @@ export const UploadedFile = ({
             w: 'min(420px,80%)',
             overflow: 'auto',
             p: '$10',
+            bg: '$surface_dim',
           }}
         >
           <Flex direction="column">

package/src/Prebuilt/index.ts

@@ -0,0 +1 @@
+export * from './App';

package/src/Prebuilt/layouts/EmbedView.jsx

@@ -120,7 +120,6 @@ const EmbedComponent = () => {
     <Box
       ref={iframeRef}
       css={{
-        mx: '$8',
         flex: '3 1 0',
         '@lg': {
           flex: '2 1 0',

package/src/Prebuilt/layouts/InsetView.jsx

@@ -1,11 +1,22 @@
 import React, { Fragment, useEffect, useRef } from 'react';
 import Draggable from 'react-draggable';
 import { useMedia } from 'react-use';
-import { selectAppData, selectLocalPeer, selectRemotePeers, selectRolesMap, useHMSStore } from '@100mslive/react-sdk';
+import {
+  selectIsAllowedToPublish,
+  selectLocalPeer,
+  selectRemotePeers,
+  selectRolesMap,
+  useHMSStore,
+} from '@100mslive/react-sdk';
+import { ExpandIcon } from '@100mslive/react-icons';
+import { AudioVideoToggle } from '../components/AudioVideoToggle';
 import { FirstPersonDisplay } from '../components/FirstPersonDisplay';
 import VideoTile from '../components/VideoTile';
 import { Box, Flex } from '../../Layout';
+import { Text } from '../../Text';
 import { config as cssConfig } from '../../Theme';
+import IconButton from '../IconButton';
+import { useSetAppDataByKey } from '../components/AppData/useUISettings';
 import { useRolePreference } from '../components/hooks/useFeatures';
 import { APP_DATA } from '../common/constants';
 
@@ -152,20 +163,36 @@ export function InsetView() {
   );
 }
 
-const InsetTile = ({ isMobile, roleMap, isLandscape }) => {
+const MinimisedTile = ({ setMinimised }) => {
+  return (
+    <Flex align="center" css={{ gap: '$6', r: '$1', bg: '$surface_default', p: '$4', color: '$on_surface_high' }}>
+      <AudioVideoToggle hideOptions={true} />
+      <Text>You</Text>
+      <IconButton
+        onClick={() => setMinimised(false)}
+        css={{ bg: 'transparent', border: 'transparent' }}
+        className="__cancel-drag-event"
+      >
+        <ExpandIcon />
+      </IconButton>
+    </Flex>
+  );
+};
+
+export const InsetTile = () => {
+  const isMobile = useMedia(cssConfig.media.md);
+  const isLandscape = useMedia(cssConfig.media.ls);
   const localPeer = useHMSStore(selectLocalPeer);
-  const sidepane = useHMSStore(selectAppData(APP_DATA.sidePane));
-  const aspectRatio = getAspectRatio({
-    roleMap,
-    roleName: localPeer.roleName,
-    isMobile,
-  });
+  const isAllowedToPublish = useHMSStore(selectIsAllowedToPublish);
+  const [minimised, setMinimised] = useSetAppDataByKey(APP_DATA.minimiseInset);
+  const aspectRatio = isMobile ? 9 / 16 : 16 / 9;
   let height = 180;
   let width = height * aspectRatio;
   if (isLandscape && width > 240) {
     width = 240;
     height = width / aspectRatio;
   }
+
   const nodeRef = useRef(null);
 
   useEffect(() => {
@@ -188,31 +215,45 @@ const InsetTile = ({ isMobile, roleMap, isLandscape }) => {
     };
   }, []);
 
+  if (!isAllowedToPublish.audio && !isAllowedToPublish.video) {
+    return null;
+  }
+
   return (
-    <Draggable bounds="parent" nodeRef={nodeRef}>
+    <Draggable bounds="parent" nodeRef={nodeRef} cancel=".__cancel-drag-event">
       <Box
         ref={nodeRef}
         css={{
           position: 'absolute',
           bottom: 0,
-          right: sidepane ? '$100' : '$10',
-          mr: sidepane ? '$14' : 0,
-          boxShadow: '0 0 8px 0 rgba(0,0,0,0.3)',
+          right: 0,
           zIndex: 10,
-          aspectRatio: aspectRatio,
-          h: height,
+          boxShadow: '0 0 8px 0 rgba(0,0,0,0.3)',
+          r: '$2',
+          ...(!minimised
+            ? {
+                aspectRatio: aspectRatio,
+                h: height,
+              }
+            : {}),
         }}
       >
-        <VideoTile
-          peerId={localPeer.id}
-          trackid={localPeer.videoTrack}
-          rootCSS={{
-            size: '100%',
-            padding: 0,
-          }}
-          width={width}
-          height={height}
-        />
+        {minimised ? (
+          <MinimisedTile setMinimised={setMinimised} />
+        ) : (
+          <VideoTile
+            peerId={localPeer.id}
+            trackid={localPeer.videoTrack}
+            rootCSS={{
+              size: '100%',
+              padding: 0,
+            }}
+            width={width}
+            height={height}
+            isDragabble={isMobile}
+            canMinimise
+          />
+        )}
       </Box>
     </Draggable>
   );

package/src/Prebuilt/layouts/PDFView.jsx

@@ -80,7 +80,6 @@ export const PDFEmbedComponent = () => {
     <Box
       ref={iframeRef}
       css={{
-        mx: '$8',
         flex: '3 1 0',
         '@lg': {
           flex: '2 1 0',

package/src/Prebuilt/layouts/SidePane.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { selectAppData, useHMSStore } from '@100mslive/react-sdk';
 import { Chat } from '../components/Chat/Chat';
-import { ParticipantList } from '../components/Header/ParticipantList';
+import { ParticipantList } from '../components/Footer/ParticipantList';
 import { StreamingLanding } from '../components/Streaming/StreamingLanding';
 import { Box } from '../../Layout';
 import { APP_DATA, SIDE_PANE_OPTIONS } from '../common/constants';
@@ -22,23 +22,24 @@ const SidePane = ({ css = {} }) => {
   return (
     <Box
       css={{
-        position: 'absolute',
         w: '$100',
         h: '100%',
         p: '$10',
         bg: '$surface_default',
         r: '$1',
-        top: 0,
-        right: '$10',
-        zIndex: 10,
-        boxShadow: '$md',
+        ml: '$8',
+        flexShrink: 0,
+        position: 'relative',
         ...css,
         '@lg': {
           w: '100%',
+          h: '100%',
+          ml: 0,
           right: 0,
           position: 'fixed',
           bottom: 0,
-          height: 'unset',
+          r: 0,
+          zIndex: 10,
           ...(css['@lg'] || {}),
         },
       }}