@100mslive/roomkit-react 0.1.5 → 0.1.6-alpha.0

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

@@ -1,49 +1,11 @@
-import React, { useCallback } from 'react';
+import React from 'react';
 import { Button, Flex } from '../../../';
 import { useSetAppDataByKey } from '../AppData/useUISettings';
 import { APP_DATA } from '../../common/constants';
 
-export const SubmitPDF = ({
-  pdfFile,
-  pdfURL,
-  isValidateProgress,
-  setIsPDFUrlValid,
-  setIsValidateProgress,
-  onOpenChange,
-}) => {
+export const SubmitPDF = ({ pdfFile, onOpenChange }) => {
   const [, setPDFConfig] = useSetAppDataByKey(APP_DATA.pdfConfig);
 
-  const isValidPDF = useCallback(
-    pdfURL => {
-      const extension = pdfURL.split('.').pop().toLowerCase();
-      setIsValidateProgress(true);
-      if (extension === 'pdf') {
-        setIsPDFUrlValid(true);
-        setIsValidateProgress(false);
-        setPDFConfig({ state: true, file: pdfFile, url: pdfURL });
-        onOpenChange(false);
-      }
-
-      fetch(pdfURL, { method: 'HEAD' })
-        .then(response => response.headers.get('content-type'))
-        .then(contentType => {
-          if (contentType === 'application/pdf') {
-            setIsPDFUrlValid(true);
-            setIsValidateProgress(false);
-            setPDFConfig({ state: true, file: pdfFile, url: pdfURL });
-            onOpenChange(false);
-          } else {
-            setIsPDFUrlValid(false);
-            setIsValidateProgress(false);
-          }
-        })
-        .catch(() => {
-          setIsPDFUrlValid(false);
-          setIsValidateProgress(false);
-        });
-    },
-    [onOpenChange, pdfFile, setIsPDFUrlValid, setIsValidateProgress, setPDFConfig],
-  );
   return (
     <Flex
       direction="row"
@@ -69,14 +31,11 @@ export const SubmitPDF = ({
         type="submit"
         onClick={() => {
           if (pdfFile) {
-            setPDFConfig({ state: true, file: pdfFile, url: pdfURL });
+            setPDFConfig({ state: true, file: pdfFile });
             onOpenChange(false);
-          } else if (pdfURL) {
-            isValidPDF(pdfURL);
           }
         }}
-        disabled={!pdfFile && !pdfURL}
-        loading={isValidateProgress}
+        disabled={!pdfFile}
         data-testid="share_pdf_btn"
         css={{
           w: '50%',

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

@@ -6,15 +6,7 @@ import { PDFHeader } from './pdfHeader';
 import { PDFInfo } from './pdfInfo';
 import { SubmitPDF } from './submitPdf';
 
-export const UploadedFile = ({
-  pdfFile,
-  pdfURL,
-  isValidateProgress,
-  setPDFFile,
-  setIsPDFUrlValid,
-  setIsValidateProgress,
-  onOpenChange,
-}) => {
+export const UploadedFile = ({ pdfFile, setPDFFile, onOpenChange }) => {
   const [fileName, ext] = pdfFile.name.split('.');
   return (
     <Dialog.Root defaultOpen onOpenChange={onOpenChange}>
@@ -70,14 +62,7 @@ export const UploadedFile = ({
               />
             </DialogRow>
             <PDFInfo />
-            <SubmitPDF
-              pdfFile={pdfFile}
-              pdfURL={pdfURL}
-              isValidateProgress={isValidateProgress}
-              setIsPDFUrlValid={setIsPDFUrlValid}
-              setIsValidateProgress={setIsValidateProgress}
-              onOpenChange={onOpenChange}
-            />
+            <SubmitPDF pdfFile={pdfFile} onOpenChange={onOpenChange} />
           </Flex>
         </Dialog.Content>
       </Dialog.Portal>

package/src/Prebuilt/components/peerTileUtils.jsx

@@ -22,6 +22,6 @@ export const getVideoTileLabel = ({ peerName, isLocal, track }) => {
   } else {
     label = `${peerName} ${track.source}`;
   }
-  label = `${label}${track.degraded ? '(Degraded)' : ''}`;
+  // label = `${label}${track.degraded ? '(Degraded)' : ''}`;
   return `${label}${isLocallyMuted ? ' (Muted for you)' : ''}`;
 };

package/src/Prebuilt/images/empty-chat.svg

@@ -0,0 +1,12 @@
+<svg width="184" height="133" viewBox="0 0 184 133" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M144.885 91.3998C145.318 91.023 145.861 90.7947 146.433 90.7483L146.446 90.7473L169.355 89.1614C169.702 89.1376 170.049 89.2101 170.358 89.3712C170.662 89.5305 170.918 89.7702 171.096 90.0642C171.098 90.0672 171.1 90.0703 171.102 90.0734L171.104 90.0766C171.281 90.3744 171.373 90.7154 171.369 91.062C171.365 91.4097 171.265 91.7496 171.08 92.044L158.85 111.504C158.539 111.986 158.081 112.356 157.544 112.56C157.007 112.764 156.419 112.791 155.866 112.636C155.313 112.482 154.823 112.155 154.469 111.703C154.115 111.25 153.915 110.697 153.898 110.123C153.898 110.109 153.898 110.094 153.898 110.08L153.996 100.307L145.347 95.7858C145.334 95.779 145.321 95.7721 145.308 95.7649C144.811 95.4785 144.417 95.0404 144.186 94.5146C143.955 93.9888 143.898 93.4029 144.024 92.8425C144.15 92.2821 144.451 91.7765 144.885 91.3998ZM167.441 91.0088L146.603 92.8952C146.49 92.9053 146.383 92.9508 146.298 93.0251C146.211 93.1005 146.151 93.2016 146.125 93.3137C146.1 93.4257 146.112 93.5429 146.158 93.6481C146.202 93.7484 146.276 93.8327 146.369 93.89L155.26 98.296L167.441 91.0088ZM156.32 100.171L168.547 92.8564L157.039 110.339C156.976 110.434 156.886 110.506 156.78 110.547C156.673 110.587 156.555 110.593 156.444 110.562C156.334 110.531 156.236 110.466 156.165 110.375C156.097 110.289 156.058 110.184 156.052 110.075L156.32 100.171Z" fill="#444954"/>
+<path d="M83.3248 35.4156C71.7182 47.1017 51.2098 75.5175 62.0292 95.6918C75.5536 120.91 140.453 79.2983 115.364 67.6657C90.2756 56.0331 65.8818 122.018 101.568 120.391C116.398 118.62 131.221 114.699 145.703 105.512" stroke="#293042" stroke-width="2.25" stroke-dasharray="6 6"/>
+<rect x="0.00256348" y="0.5" width="173.524" height="58.3398" rx="29.1699" fill="#272A31"/>
+<g opacity="0.4">
+<rect x="24.7526" y="20.9312" width="111" height="4.5" rx="2.25" fill="#444954"/>
+</g>
+<g opacity="0.4">
+<rect x="38.2526" y="34.4312" width="110.25" height="4.5" rx="2.25" fill="#444954"/>
+</g>
+<path d="M40.3918 71.5547L28.4246 55.0999L52.3589 55.0999L40.3918 71.5547Z" fill="#272A31"/>
+</svg>

package/src/Prebuilt/layouts/EmbedView.jsx

@@ -1,5 +1,4 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { useMedia } from 'react-use';
 import {
   selectLocalPeerID,
   selectLocalPeerRoleName,
@@ -9,9 +8,9 @@ import {
   useHMSStore,
   useScreenShare,
 } from '@100mslive/react-sdk';
-import { Box, Flex } from '../../Layout';
-import { config as cssConfig } from '../../Theme';
-import { SidePane } from './screenShareView';
+import { SecondaryTiles } from '../components/SecondaryTiles';
+import { ProminenceLayout } from '../components/VideoLayouts/ProminenceLayout';
+import { Box } from '../../Layout';
 import { useSetAppDataByKey } from '../components/AppData/useUISettings';
 import { APP_DATA } from '../common/constants';
 
@@ -26,14 +25,13 @@ export const EmbedView = () => {
 export const EmbebScreenShareView = ({ children }) => {
   const peers = useHMSStore(selectPeers);
 
-  const mediaQueryLg = cssConfig.media.xl;
-  const showSidebarInBottom = useMedia(mediaQueryLg);
   const localPeerID = useHMSStore(selectLocalPeerID);
   const localPeerRole = useHMSStore(selectLocalPeerRoleName);
   const peerPresenting = useHMSStore(selectPeerScreenSharing);
   const isPresenterFromMyRole = peerPresenting?.roleName?.toLowerCase() === localPeerRole?.toLowerCase();
   const amIPresenting = localPeerID === peerPresenting?.id;
-  const showPresenterInSmallTile = showSidebarInBottom || amIPresenting || isPresenterFromMyRole;
+  const showPresenterInSmallTile = amIPresenting || isPresenterFromMyRole;
+  const [, setActiveScreenSharePeer] = useSetAppDataByKey(APP_DATA.activeScreensharePeerId);
 
   const smallTilePeers = useMemo(() => {
     const smallTilePeers = peers.filter(peer => peer.id !== peerPresenting?.id);
@@ -42,29 +40,18 @@ export const EmbebScreenShareView = ({ children }) => {
     }
     return smallTilePeers;
   }, [peers, peerPresenting, showPresenterInSmallTile]);
+
+  useEffect(() => {
+    setActiveScreenSharePeer(peerPresenting?.id);
+    return () => {
+      setActiveScreenSharePeer('');
+    };
+  }, [peerPresenting?.id, setActiveScreenSharePeer]);
   return (
-    <Flex css={{ size: '100%' }} direction={showSidebarInBottom ? 'column' : 'row'}>
-      {children}
-      <Flex
-        direction={{ '@initial': 'column', '@lg': 'row' }}
-        css={{
-          overflow: 'hidden',
-          p: '$4 $8',
-          flex: '0 0 20%',
-          '@xl': {
-            flex: '1 1 0',
-          },
-        }}
-      >
-        <SidePane
-          showSidebarInBottom={showSidebarInBottom}
-          peerScreenSharing={peerPresenting}
-          isPresenterInSmallTiles={showPresenterInSmallTile}
-          smallTilePeers={smallTilePeers}
-          totalPeers={peers.length}
-        />
-      </Flex>
-    </Flex>
+    <ProminenceLayout.Root>
+      <ProminenceLayout.ProminentSection>{children}</ProminenceLayout.ProminentSection>
+      <SecondaryTiles peers={smallTilePeers} />
+    </ProminenceLayout.Root>
   );
 };
 
@@ -117,17 +104,7 @@ const EmbedComponent = () => {
   }, [wasScreenShared, amIScreenSharing, resetEmbedConfig, toggleScreenShare]);
 
   return (
-    <Box
-      ref={iframeRef}
-      css={{
-        flex: '3 1 0',
-        '@lg': {
-          flex: '2 1 0',
-          display: 'flex',
-          alignItems: 'center',
-        },
-      }}
-    >
+    <Box ref={iframeRef} css={{ size: '100%' }}>
       <iframe
         src={src}
         title={src}

package/src/Prebuilt/layouts/HLSView.jsx

@@ -3,7 +3,7 @@ import { useFullscreen, useToggle } from 'react-use';
 import { HLSPlaybackState, HMSHLSPlayer, HMSHLSPlayerEvents } from '@100mslive/hls-player';
 import screenfull from 'screenfull';
 import { selectAppData, selectHLSState, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
-import { ExpandIcon, ShrinkIcon } from '@100mslive/react-icons';
+import { ExpandIcon, RadioIcon, ShrinkIcon } from '@100mslive/react-icons';
 import { HlsStatsOverlay } from '../components/HlsStatsOverlay';
 import { HMSVideoPlayer } from '../components/HMSVideo';
 import { FullScreenButton } from '../components/HMSVideo/FullscreenButton';
@@ -188,6 +188,7 @@ const HLSView = () => {
             width: '100%',
             margin: '0 auto',
             height: '100%',
+            background: 'linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #000 100%)',
           }}
         >
           <HLSAutoplayBlockedPrompt open={isHlsAutoplayBlocked} unblockAutoPlay={unblockAutoPlay} />
@@ -203,83 +204,99 @@ const HLSView = () => {
             </Flex>
           )}
           <HMSVideoPlayer.Root ref={videoRef}>
-            {hlsPlayer && (
-              <HMSVideoPlayer.Progress
-                onValueChange={currentTime => {
-                  hlsPlayer.seekTo(currentTime);
-                }}
-                hlsPlayer={hlsPlayer}
-              />
-            )}
-
-            <HMSVideoPlayer.Controls.Root css={{ p: '$4 $8' }}>
-              <HMSVideoPlayer.Controls.Left>
-                <HMSVideoPlayer.PlayButton
-                  onClick={async () => {
-                    isPaused ? await hlsPlayer?.play() : hlsPlayer?.pause();
+            <Flex
+              direction="column"
+              justify="flex-end"
+              align="flex-start"
+              css={{
+                background: 'linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #000 100%)',
+              }}
+            >
+              {hlsPlayer && (
+                <HMSVideoPlayer.Progress
+                  onValueChange={currentTime => {
+                    hlsPlayer.seekTo(currentTime);
                   }}
-                  isPaused={isPaused}
+                  hlsPlayer={hlsPlayer}
                 />
-                <HMSVideoPlayer.Duration hlsPlayer={hlsPlayer} />
-                <HMSVideoPlayer.Volume hlsPlayer={hlsPlayer} />
-              </HMSVideoPlayer.Controls.Left>
+              )}
 
-              <HMSVideoPlayer.Controls.Right>
-                {availableLayers.length > 0 ? (
-                  <>
-                    <IconButton
-                      variant="standard"
-                      css={{ px: '$2' }}
-                      onClick={async () => {
-                        await hlsPlayer.seekToLivePosition();
-                        setIsVideoLive(true);
-                      }}
-                      key="jump-to-live_btn"
-                      data-testid="jump-to-live_btn"
-                    >
-                      <Tooltip title="Go to Live" side="top">
-                        <Flex justify="center" gap={2} align="center">
-                          <Box
-                            css={{
-                              height: '$4',
-                              width: '$4',
-                              background: isVideoLive ? '$alert_error_default' : '$on_primary_high',
-                              r: '$1',
-                            }}
-                          />
-                          <Text
-                            variant={{
-                              '@sm': 'xs',
-                            }}
-                          >
-                            {isVideoLive ? 'LIVE' : 'GO LIVE'}
-                          </Text>
-                        </Flex>
-                      </Tooltip>
-                    </IconButton>
+              <HMSVideoPlayer.Controls.Root css={{ p: '$4 $8' }}>
+                <HMSVideoPlayer.Controls.Left>
+                  <HMSVideoPlayer.PlayButton
+                    onClick={async () => {
+                      isPaused ? await hlsPlayer?.play() : hlsPlayer?.pause();
+                    }}
+                    isPaused={isPaused}
+                  />
+                  <HMSVideoPlayer.Duration hlsPlayer={hlsPlayer} />
+                  <HMSVideoPlayer.Volume hlsPlayer={hlsPlayer} />
+                  <IconButton
+                    variant="standard"
+                    css={{ px: '$2' }}
+                    onClick={async () => {
+                      await hlsPlayer.seekToLivePosition();
+                      setIsVideoLive(true);
+                    }}
+                    key="jump-to-live_btn"
+                    data-testid="jump-to-live_btn"
+                  >
+                    <Tooltip title="Go to Live" side="top">
+                      <Flex justify="center" gap={2} align="center">
+                        <Box
+                          css={{
+                            height: '$4',
+                            width: '$4',
+                            background: isVideoLive ? '$alert_error_default' : '$on_primary_medium',
+                            r: '$1',
+                          }}
+                        />
+                        <Text
+                          variant={{
+                            '@sm': 'xs',
+                          }}
+                          css={{
+                            c: isVideoLive ? '$on_primary_high' : '$on_primary_medium',
+                          }}
+                        >
+                          {isVideoLive ? 'LIVE' : 'GO LIVE'}
+                        </Text>
+                      </Flex>
+                    </Tooltip>
+                  </IconButton>
+                </HMSVideoPlayer.Controls.Left>
+
+                <HMSVideoPlayer.Controls.Right>
+                  {availableLayers.length > 0 ? (
                     <HLSQualitySelector
                       layers={availableLayers}
                       selection={currentSelectedQuality}
                       onQualityChange={handleQuality}
                       isAuto={isUserSelectedAuto}
                     />
-                  </>
-                ) : null}
-                {isFullScreenSupported ? (
-                  <FullScreenButton
-                    isFullScreen={isFullScreen}
-                    onToggle={toggle}
-                    icon={isFullScreen ? <ShrinkIcon /> : <ExpandIcon />}
-                  />
-                ) : null}
-              </HMSVideoPlayer.Controls.Right>
-            </HMSVideoPlayer.Controls.Root>
+                  ) : null}
+                  {isFullScreenSupported ? (
+                    <FullScreenButton
+                      isFullScreen={isFullScreen}
+                      onToggle={toggle}
+                      icon={isFullScreen ? <ShrinkIcon /> : <ExpandIcon />}
+                    />
+                  ) : null}
+                </HMSVideoPlayer.Controls.Right>
+              </HMSVideoPlayer.Controls.Root>
+            </Flex>
           </HMSVideoPlayer.Root>
         </Flex>
       ) : (
-        <Flex align="center" justify="center" css={{ size: '100%', px: '$10' }}>
-          <Text variant="md" css={{ textAlign: 'center' }}>
-            Waiting for the stream to start...
+        <Flex align="center" justify="center" direction="column" css={{ size: '100%', px: '$10' }}>
+          <Flex css={{ c: '$on_surface_high', r: '$round', bg: '$surface_default', p: '$2' }}>
+            <RadioIcon height={56} width={56} />
+          </Flex>
+          <Text variant="h5" css={{ c: '$on_surface_high', mt: '$10', mb: 0, textAlign: 'center' }}>
+            Stream yet to start
+          </Text>
+          <Text variant="md" css={{ textAlign: 'center', mt: '$4', c: '$on_surface_medium' }}>
+            Sit back and relax
           </Text>
         </Flex>
       )}

package/src/Prebuilt/layouts/PDFView.jsx

@@ -77,17 +77,7 @@ export const PDFEmbedComponent = () => {
   }, [wasScreenShared, amIScreenSharing, resetEmbedConfig, toggleScreenShare]);
 
   return (
-    <Box
-      ref={iframeRef}
-      css={{
-        flex: '3 1 0',
-        '@lg': {
-          flex: '2 1 0',
-          display: 'flex',
-          alignItems: 'center',
-        },
-      }}
-    >
+    <Box ref={iframeRef} css={{ size: '100%' }}>
       <iframe
         src={pdfJSURL}
         title="PDF Annotator"

package/src/Prebuilt/layouts/SidePane.tsx

@@ -0,0 +1,96 @@
+import React from 'react';
+import { useMedia } from 'react-use';
+import { ConferencingScreen } from '@100mslive/types-prebuilt';
+import { selectAppData, selectVideoTrackByPeerID, useHMSStore } from '@100mslive/react-sdk';
+// @ts-ignore: No implicit Any
+import { Chat } from '../components/Chat/Chat';
+// @ts-ignore: No implicit Any
+import { ParticipantList } from '../components/Footer/ParticipantList';
+// @ts-ignore: No implicit Any
+import { StreamingLanding } from '../components/Streaming/StreamingLanding';
+// @ts-ignore: No implicit Any
+import VideoTile from '../components/VideoTile';
+import { Box, Flex } from '../../Layout';
+import { config as cssConfig } from '../../Theme';
+// @ts-ignore: No implicit Any
+import { APP_DATA, SIDE_PANE_OPTIONS } from '../common/constants';
+
+const SidePane = ({ screenType }: { screenType: keyof ConferencingScreen }) => {
+  const isMobile = useMedia(cssConfig.media.md);
+  const sidepane = useHMSStore(selectAppData(APP_DATA.sidePane));
+  const activeScreensharePeerId = useHMSStore(selectAppData(APP_DATA.activeScreensharePeerId));
+  const trackId = useHMSStore(selectVideoTrackByPeerID(activeScreensharePeerId))?.id;
+  let ViewComponent;
+  if (sidepane === SIDE_PANE_OPTIONS.PARTICIPANTS) {
+    ViewComponent = <ParticipantList />;
+  } else if (sidepane === SIDE_PANE_OPTIONS.CHAT) {
+    ViewComponent = <Chat screenType={screenType} />;
+  } else if (sidepane === SIDE_PANE_OPTIONS.STREAMING) {
+    ViewComponent = <StreamingLanding />;
+  }
+  if (!ViewComponent && !trackId) {
+    return null;
+  }
+
+  const mwebStreamingChat = isMobile && sidepane === SIDE_PANE_OPTIONS.CHAT;
+
+  return (
+    <Flex
+      direction="column"
+      justify="center"
+      css={{
+        w: '$100',
+        h: '100%',
+        flexShrink: 0,
+        gap: '$4',
+        '@md': { position: mwebStreamingChat ? 'absolute' : '', zIndex: 12 },
+      }}
+    >
+      {trackId && (
+        <VideoTile
+          peerId={activeScreensharePeerId}
+          trackId={trackId}
+          width="100%"
+          height={225}
+          rootCSS={{ p: 0, alignSelf: 'start', flexShrink: 0 }}
+          objectFit="contain"
+        />
+      )}
+      {!!ViewComponent && (
+        <Box
+          css={{
+            w: '$100',
+            h: mwebStreamingChat ? '0' : '100%',
+            p: '$10',
+            flex: '1 1 0',
+            minHeight: 0,
+            maxHeight: mwebStreamingChat ? '300px' : 'unset',
+            background: mwebStreamingChat
+              ? 'linear-gradient(180deg, rgba(0, 0, 0, 0.00) 35.94%, rgba(0, 0, 0, 0.64) 100%)'
+              : '$surface_dim',
+            r: '$1',
+            position: 'relative',
+            '@lg': {
+              w: '100%',
+              h: '100%',
+              ml: 0,
+              right: 0,
+              position: 'fixed',
+              bottom: 0,
+              borderRadius: 0,
+              zIndex: 10,
+            },
+            '@md': {
+              p: '$6 $8',
+              pb: mwebStreamingChat ? '$20' : '$12',
+            },
+          }}
+        >
+          {ViewComponent}
+        </Box>
+      )}
+    </Flex>
+  );
+};
+
+export default SidePane;