@100mslive/roomkit-react 0.2.5 → 0.2.6-alpha.1

package/package.json

@@ -10,7 +10,7 @@
     "prebuilt",
     "roomkit"
   ],
-  "version": "0.2.5",
+  "version": "0.2.6-alpha.1",
   "author": "100ms",
   "license": "MIT",
   "repository": {
@@ -82,10 +82,10 @@
     "react": ">=17.0.2 <19.0.0"
   },
   "dependencies": {
-    "@100mslive/hls-player": "0.2.5",
-    "@100mslive/hms-virtual-background": "1.12.5",
-    "@100mslive/react-icons": "0.9.5",
-    "@100mslive/react-sdk": "0.9.5",
+    "@100mslive/hls-player": "0.2.6-alpha.1",
+    "@100mslive/hms-virtual-background": "1.12.6-alpha.1",
+    "@100mslive/react-icons": "0.9.6-alpha.1",
+    "@100mslive/react-sdk": "0.9.6-alpha.1",
     "@100mslive/types-prebuilt": "0.12.6",
     "@emoji-mart/data": "^1.0.6",
     "@emoji-mart/react": "^1.0.1",
@@ -120,5 +120,5 @@
     "uuid": "^8.3.2",
     "worker-timers": "^7.0.40"
   },
-  "gitHead": "f5d7f30ea4d999fdc3ebcfe3c277153b97ac8f7b"
+  "gitHead": "d85daadafe177c535fb1203a0e377042b5502a3e"
 }

package/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx

@@ -22,6 +22,7 @@ import {
   QuizIcon,
   RecordIcon,
   SettingsIcon,
+  VirtualBackgroundIcon,
 } from '@100mslive/react-icons';
 import { Box, Loading, Tooltip } from '../../../..';
 import { Sheet } from '../../../../Sheet';
@@ -55,8 +56,6 @@ import { getFormattedCount } from '../../../common/utils';
 // @ts-ignore: No implicit any
 import { SIDE_PANE_OPTIONS } from '../../../common/constants';
 
-// const VirtualBackground = React.lazy(() => import('../../../plugins/VirtualBackground/VirtualBackground'));
-
 const MODALS = {
   CHANGE_NAME: 'changeName',
   SELF_ROLE_CHANGE: 'selfRoleChange',
@@ -92,10 +91,10 @@ export const MwebOptions = ({
   const peerCount = useHMSStore(selectPeerCount);
   const emojiCardRef = useRef(null);
   const { isBRBOn, toggleBRB, isHandRaised, toggleHandRaise } = useMyMetadata();
-  const { toggleAudio, toggleVideo } = useAVToggle();
+  const { toggleAudio, toggleVideo, isLocalVideoEnabled } = useAVToggle();
   const noAVPermissions = !(toggleAudio || toggleVideo);
   const { unreadPollQuiz, setUnreadPollQuiz } = useUnreadPollQuizPresent();
-  // const isVideoOn = useHMSStore(selectIsLocalVideoEnabled);
+  const toggleVB = useSidepaneToggle(SIDE_PANE_OPTIONS.VB);
 
   useDropdownList({ open: openModals.size > 0 || openOptionsSheet || openSettingsSheet, name: 'MoreSettings' });
 
@@ -182,11 +181,17 @@ export const MwebOptions = ({
               </ActionTile.Root>
             ) : null}
 
-            {/* {isVideoOn ? (
-              <Suspense fallback="">
-                <VirtualBackground asActionTile onVBClick={() => setOpenOptionsSheet(false)} />
-              </Suspense>
-            ) : null} */}
+            {isLocalVideoEnabled && !!elements?.virtual_background ? (
+              <ActionTile.Root
+                onClick={() => {
+                  toggleVB();
+                  setOpenOptionsSheet(false);
+                }}
+              >
+                <VirtualBackgroundIcon />
+                <ActionTile.Title>Virtual Background</ActionTile.Title>
+              </ActionTile.Root>
+            ) : null}
 
             {elements?.emoji_reactions && (
               <ActionTile.Root

package/src/Prebuilt/components/Preview/PreviewJoin.tsx

@@ -268,7 +268,7 @@ export const PreviewControls = ({ hideSettings, vbEnabled }: { hideSettings: boo
     >
       <Flex css={{ gap: '$4' }}>
         <AudioVideoToggle />
-        {!isMobile && vbEnabled ? <VBToggle /> : null}
+        {vbEnabled ? <VBToggle /> : null}
       </Flex>
       {!hideSettings ? <PreviewSettings /> : null}
     </Flex>

package/src/Prebuilt/components/VirtualBackground/{VBToggle.jsx → VBToggle.tsx}

@@ -3,6 +3,7 @@ import { selectIsEffectsEnabled, selectIsLocalVideoEnabled, useHMSStore } from '
 import { VirtualBackgroundIcon } from '@100mslive/react-icons';
 import { Tooltip } from '../../../Tooltip';
 import IconButton from '../../IconButton';
+// @ts-ignore
 import { useIsSidepaneTypeOpen, useSidepaneToggle } from '../AppData/useSidepane';
 import { isSafari, SIDE_PANE_OPTIONS } from '../../common/constants';
 

package/src/Prebuilt/layouts/HLSView.jsx

@@ -308,7 +308,8 @@ const HLSView = () => {
           align="center"
           justify="center"
           css={{
-            width: '100%',
+            width:
+              videoRef.current && videoRef.current.clientWidth <= 720 ? `${videoRef.current.clientWidth}px` : '100%',
             margin: '0 auto',
             height: '100%',
           }}
@@ -351,6 +352,7 @@ const HLSView = () => {
                 </IconButton>
               </Box>
             )}
+
             <Flex
               ref={controlsRef}
               direction="column"
@@ -370,78 +372,90 @@ const HLSView = () => {
               }}
             >
               {!isMobile && (
-                <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_surface_high' : '$on_surface_medium',
-                            }}
-                          >
-                            {isVideoLive ? 'LIVE' : 'GO LIVE'}
-                          </Text>
-                        </Flex>
-                      </Tooltip>
-                    </IconButton>
-                  </HMSVideoPlayer.Controls.Left>
-
-                  <HMSVideoPlayer.Controls.Right>
-                    {hasCaptions && (
-                      <HLSCaptionSelector onClick={() => hlsPlayer?.toggleCaption()} isEnabled={isCaptionEnabled} />
-                    )}
-                    {availableLayers.length > 0 ? (
-                      <HLSQualitySelector
-                        layers={availableLayers}
-                        onOpen={setQualityDropDownOpen}
-                        open={qualityDropDownOpen}
-                        selection={currentSelectedQuality}
-                        onQualityChange={handleQuality}
-                        isAuto={isUserSelectedAuto}
+                <Flex direction="column">
+                  <Box>
+                    {hlsPlayer && (
+                      <HMSVideoPlayer.Progress
+                        hlsPlayer={hlsPlayer}
+                        onValueChange={time => {
+                          hlsPlayer.seekTo(time);
+                        }}
                       />
-                    ) : null}
-                    {isFullScreenSupported ? (
-                      <FullScreenButton
-                        isFullScreen={isFullScreen}
-                        onToggle={toggle}
-                        icon={isFullScreen ? <ShrinkIcon /> : <ExpandIcon />}
+                    )}
+                  </Box>
+                  <HMSVideoPlayer.Controls.Root
+                    css={{
+                      p: '$4 $8',
+                    }}
+                  >
+                    <HMSVideoPlayer.Controls.Left>
+                      <HMSVideoPlayer.PlayButton
+                        onClick={async () => {
+                          isPaused ? await hlsPlayer?.play() : hlsPlayer?.pause();
+                        }}
+                        isPaused={isPaused}
                       />
-                    ) : null}
-                  </HMSVideoPlayer.Controls.Right>
-                </HMSVideoPlayer.Controls.Root>
+                      <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_surface_high' : '$on_surface_medium',
+                              }}
+                            >
+                              {isVideoLive ? 'LIVE' : 'GO LIVE'}
+                            </Text>
+                          </Flex>
+                        </Tooltip>
+                      </IconButton>
+                    </HMSVideoPlayer.Controls.Left>
+
+                    <HMSVideoPlayer.Controls.Right>
+                      {hasCaptions && (
+                        <HLSCaptionSelector onClick={() => hlsPlayer?.toggleCaption()} isEnabled={isCaptionEnabled} />
+                      )}
+                      {availableLayers.length > 0 ? (
+                        <HLSQualitySelector
+                          layers={availableLayers}
+                          onOpen={setQualityDropDownOpen}
+                          open={qualityDropDownOpen}
+                          selection={currentSelectedQuality}
+                          onQualityChange={handleQuality}
+                          isAuto={isUserSelectedAuto}
+                        />
+                      ) : null}
+                      {isFullScreenSupported ? (
+                        <FullScreenButton
+                          isFullScreen={isFullScreen}
+                          onToggle={toggle}
+                          icon={isFullScreen ? <ShrinkIcon /> : <ExpandIcon />}
+                        />
+                      ) : null}
+                    </HMSVideoPlayer.Controls.Right>
+                  </HMSVideoPlayer.Controls.Root>
+                </Flex>
               )}
             </Flex>
           </HMSVideoPlayer.Root>