feat: hls player ui for mweb

examples/prebuilt-react-integration/src/App.jsx

@@ -5,8 +5,15 @@ export default function App() {
   const roomCode = getRoomCodeFromUrl();
 
   return (
-      <HMSPrebuilt roomCode={roomCode}/>
-  )
+    <HMSPrebuilt
+      roomCode={roomCode}
+      options={{
+        endpoints: {
+          tokenByRoomCode: 'https://auth-nonprod.100ms.live/v2/token',
+          roomLayout: 'https://api-nonprod.100ms.live/v2/layouts/ui',
+          init: 'https://qa-in2-ipv6.100ms.live/init',
+        },
+      }}
+    />
+  );
 }
-
-

examples/prebuilt-react-integration/vite.config.js

@@ -7,4 +7,7 @@ export default defineConfig({
   define: {
     'process.env': {},
   },
+  optimizeDeps: {
+    exclude: ['lodash'],
+  },
 });

packages/roomkit-react/src/Prebuilt/common/hooks.ts

@@ -1,4 +1,5 @@
 import { useEffect, useRef, useState } from 'react';
+import { useMedia } from 'react-use';
 import { JoinForm_JoinBtnType } from '@100mslive/types-prebuilt/elements/join_form';
 import {
   selectAvailableRoleNames,
@@ -10,6 +11,7 @@ import {
   useHMSStore,
   useHMSVanillaStore,
 } from '@100mslive/react-sdk';
+import { config } from '../../Theme';
 import { useRoomLayout } from '../provider/roomLayoutProvider';
 import { useRoomLayoutConferencingScreen } from '../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
 import { CHAT_SELECTOR } from './constants';
@@ -100,3 +102,15 @@ export const useParticipants = (params?: { metadata?: { isHandRaised?: boolean }
   }
   return { participants: participantList, isConnected, peerCount, rolesWithParticipants };
 };
+
+export const useLandscapeHLSStream = () => {
+  const isLandscape = useMedia(config.media.ls);
+  const { screenType } = useRoomLayoutConferencingScreen();
+  return isLandscape && screenType === 'hls_live_streaming';
+};
+
+export const useMobileHLSStream = () => {
+  const isMobile = useMedia(config.media.md);
+  const { screenType } = useRoomLayoutConferencingScreen();
+  return isMobile && screenType === 'hls_live_streaming';
+};

packages/roomkit-react/src/Prebuilt/components/Chat/ChatFooter.tsx

@@ -2,10 +2,13 @@ import React, { ReactNode, useCallback, useEffect, useRef, useState } from 'reac
 import { useMedia } from 'react-use';
 import data from '@emoji-mart/data';
 import Picker from '@emoji-mart/react';
-import { HMSException, selectLocalPeer, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
+import { HMSException, selectLocalPeer, useAVToggle, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
 import { EmojiIcon, PauseCircleIcon, SendIcon, VerticalMenuIcon } from '@100mslive/react-icons';
 import { Box, config as cssConfig, Flex, IconButton as BaseIconButton, Popover, styled, Text } from '../../..';
 import { IconButton } from '../../../IconButton';
+import { MoreSettings } from '../MoreSettings/MoreSettings';
+// @ts-ignore: No implicit Any
+import { RaiseHand } from '../RaiseHand';
 // @ts-ignore
 import { ToastManager } from '../Toast/ToastManager';
 import { ChatSelectorContainer } from './ChatSelectorContainer';
@@ -17,7 +20,7 @@ import { useSetSubscribedChatSelector, useSubscribeChatSelector } from '../AppDa
 import { useIsPeerBlacklisted } from '../hooks/useChatBlacklist';
 // @ts-ignore
 import { useEmojiPickerStyles } from './useEmojiPickerStyles';
-import { useDefaultChatSelection } from '../../common/hooks';
+import { useDefaultChatSelection, useLandscapeHLSStream } from '../../common/hooks';
 import { CHAT_SELECTOR, SESSION_STORE_KEY } from '../../common/constants';
 
 const TextArea = styled('textarea', {
@@ -77,7 +80,8 @@ export const ChatFooter = ({ onSend, children }: { onSend: (count: number) => vo
   const inputRef = useRef<HTMLTextAreaElement>(null);
   const [draftMessage, setDraftMessage] = useChatDraftMessage();
   const isMobile = useMedia(cssConfig.media.md);
-  const { elements } = useRoomLayoutConferencingScreen();
+  const isLandscape = useMedia(cssConfig.media.ls);
+  const { elements, screenType } = useRoomLayoutConferencingScreen();
   const message_placeholder = elements?.chat?.message_placeholder || 'Send a message';
   const localPeer = useHMSStore(selectLocalPeer);
   const isOverlayChat = elements?.chat?.is_overlay;
@@ -87,6 +91,10 @@ export const ChatFooter = ({ onSend, children }: { onSend: (count: number) => vo
   const defaultSelection = useDefaultChatSelection();
   const selection = selectedPeer.name || selectedRole || defaultSelection;
   const isLocalPeerBlacklisted = useIsPeerBlacklisted({ local: true });
+  const { toggleAudio, toggleVideo } = useAVToggle();
+  const noAVPermissions = !(toggleAudio || toggleVideo);
+  const isMwebHLSStream = screenType === 'hls_live_streaming' && (isMobile || isLandscape);
+  const isLandscapeHLSStream = useLandscapeHLSStream();
 
   useEffect(() => {
     if (!selectedPeer.id && !selectedRole && !['Everyone', ''].includes(defaultSelection)) {
@@ -198,7 +206,7 @@ export const ChatFooter = ({ onSend, children }: { onSend: (count: number) => vo
               position: 'relative',
               py: '$6',
               pl: '$8',
-              flexGrow: 1,
+              flexGrow: `${isMwebHLSStream ? 1 : 0}`,
               r: '$1',
               '@md': {
                 minHeight: 'unset',
@@ -234,7 +242,7 @@ export const ChatFooter = ({ onSend, children }: { onSend: (count: number) => vo
               onCut={e => e.stopPropagation()}
               onCopy={e => e.stopPropagation()}
             />
-            {!isMobile ? (
+            {!isMobile && !isLandscapeHLSStream ? (
               <EmojiPicker
                 onSelect={emoji => {
                   if (inputRef.current) {
@@ -257,6 +265,17 @@ export const ChatFooter = ({ onSend, children }: { onSend: (count: number) => vo
               <SendIcon />
             </BaseIconButton>
           </Flex>
+          {isMwebHLSStream && (
+            <Flex
+              css={{
+                alignItems: 'center',
+              }}
+              gap="1"
+            >
+              {noAVPermissions ? <RaiseHand /> : null}
+              <MoreSettings elements={elements} screenType={screenType} />
+            </Flex>
+          )}
         </Flex>
       )}
     </Box>

packages/roomkit-react/src/Prebuilt/components/ConferenceScreen.tsx

@@ -1,27 +1,34 @@
 import React, { useEffect, useRef, useState } from 'react';
+import { useMedia } from 'react-use';
 import { DefaultConferencingScreen_Elements } from '@100mslive/types-prebuilt';
 import {
   HMSRoomState,
   selectAppData,
   selectIsConnectedToRoom,
   selectRoomState,
+  useAVToggle,
   useHMSActions,
   useHMSStore,
 } from '@100mslive/react-sdk';
 import { Footer } from './Footer/Footer';
+import { LeaveRoom } from './Leave/LeaveRoom';
+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 { config } from '../../Theme';
 import { useHMSPrebuiltContext } from '../AppContext';
 import { VideoStreamingSection } from '../layouts/VideoStreamingSection';
 // @ts-ignore: No implicit Any
 import FullPageProgress from './FullPageProgress';
 import { Header } from './Header';
 import { PreviousRoleInMetadata } from './PreviousRoleInMetadata';
+// @ts-ignore: No implicit Any
+import { RaiseHand } from './RaiseHand';
 import {
   useRoomLayoutConferencingScreen,
   useRoomLayoutPreviewScreen,
@@ -46,12 +53,19 @@ export const ConferenceScreen = () => {
   const isMobileDevice = isAndroid || isIOS || isIPadOS;
   const dropdownListRef = useRef<string[]>();
   const [isHLSStarted] = useSetAppDataByKey(APP_DATA.hlsStarted);
+
+  const { toggleAudio, toggleVideo } = useAVToggle();
+  const noAVPermissions = !(toggleAudio || toggleVideo);
+  const showChat = !!screenProps.elements?.chat;
   const toggleControls = () => {
     if (dropdownListRef.current?.length === 0 && isMobileDevice) {
       setHideControls(value => !value);
     }
   };
   const autoRoomJoined = useRef(isPreviewScreenEnabled);
+  const isMobile = useMedia(config.media.md);
+  const isLandscape = useMedia(config.media.ls);
+  const isMwebHLSStream = screenProps.screenType === 'hls_live_streaming' && (isMobile || isLandscape);
 
   useEffect(() => {
     let timeout: undefined | ReturnType<typeof setTimeout>;
@@ -112,7 +126,7 @@ export const ConferenceScreen = () => {
         </Box>
       ) : null}
       <Flex css={{ size: '100%', overflow: 'hidden' }} direction="column">
-        {!screenProps.hideSections.includes('header') && (
+        {!screenProps.hideSections.includes('header') && !isMwebHLSStream && (
           <Box
             ref={headerRef}
             css={{
@@ -128,6 +142,11 @@ export const ConferenceScreen = () => {
             <Header />
           </Box>
         )}
+        {isMwebHLSStream && (
+          <Flex align="center" gap="2" css={{ position: 'absolute', left: '$4', top: '$4', zIndex: 1 }}>
+            <LeaveRoom screenType={screenProps.screenType} />
+          </Flex>
+        )}
         <Box
           css={{
             w: '100%',
@@ -154,7 +173,7 @@ export const ConferenceScreen = () => {
             />
           ) : null}
         </Box>
-        {!screenProps.hideSections.includes('footer') && screenProps.elements && (
+        {!screenProps.hideSections.includes('footer') && screenProps.elements && !isMwebHLSStream && (
           <Box
             ref={footerRef}
             css={{
@@ -173,6 +192,20 @@ export const ConferenceScreen = () => {
             <Footer elements={screenProps.elements} screenType={screenProps.screenType} />
           </Box>
         )}
+        {isMwebHLSStream && !showChat && (
+          <Flex
+            css={{
+              alignItems: 'center',
+              pr: '$4',
+              pb: '$4',
+            }}
+            justify="end"
+            gap="1"
+          >
+            {noAVPermissions ? <RaiseHand /> : null}
+            <MoreSettings elements={screenProps.elements} screenType={screenProps.screenType} />
+          </Flex>
+        )}
         <RoleChangeRequestModal />
         <HLSFailureModal />
         <ActivatedPIP />

packages/roomkit-react/src/Prebuilt/components/HMSVideo/Controls.jsx

@@ -1,4 +1,4 @@
-import { Flex, styled } from '../../../';
+import { Flex, styled } from '../../..';
 
 export const VideoControls = styled(Flex, {
   justifyContent: 'center',