From d2f26c7e16e3f298e2347b73393ac7971a56238e Mon Sep 17 00:00:00 2001 From: Amar Bathwal <110378139+amar-1995@users.noreply.github.com> Date: Thu, 29 Feb 2024 17:11:45 +0530 Subject: [PATCH] feat: use title in streaming from layout api --- .../Prebuilt/components/Chat/ChatFooter.tsx | 4 +- .../src/Prebuilt/components/EmojiReaction.jsx | 7 +- .../components/HMSVideo/MwebHLSViewTitle.tsx | 105 ++++++++---------- .../src/Prebuilt/components/HMSVideo/utils.ts | 8 -- .../SplitComponents/MwebOptions.tsx | 4 +- .../RoomDetails/RoomDetailsPane.tsx | 55 ++++++--- .../src/Prebuilt/layouts/SidePane.tsx | 3 +- .../layouts/VideoStreamingSection.tsx | 5 +- 8 files changed, 102 insertions(+), 89 deletions(-) diff --git a/packages/roomkit-react/src/Prebuilt/components/Chat/ChatFooter.tsx b/packages/roomkit-react/src/Prebuilt/components/Chat/ChatFooter.tsx index a23cb66fcd..1ce17cf582 100644 --- a/packages/roomkit-react/src/Prebuilt/components/Chat/ChatFooter.tsx +++ b/packages/roomkit-react/src/Prebuilt/components/Chat/ChatFooter.tsx @@ -204,12 +204,12 @@ export const ChatFooter = ({ onSend, children }: { onSend: (count: number) => vo align="center" css={{ bg: isOverlayChat && isMobile ? '$surface_dim' : '$surface_default', + minHeight: '$16', maxHeight: '$24', position: 'relative', - minHeight: '$16', py: '$6', pl: '$8', - flexGrow: '1', + flexGrow: 1, r: '$1', '@md': { minHeight: 'unset', diff --git a/packages/roomkit-react/src/Prebuilt/components/EmojiReaction.jsx b/packages/roomkit-react/src/Prebuilt/components/EmojiReaction.jsx index 1bf5fdc925..a38d4e1dc2 100644 --- a/packages/roomkit-react/src/Prebuilt/components/EmojiReaction.jsx +++ b/packages/roomkit-react/src/Prebuilt/components/EmojiReaction.jsx @@ -8,7 +8,6 @@ import { selectLocalPeerID, useCustomEvent, useHMSStore, - useRecordingStreaming, } from '@100mslive/react-sdk'; import { EmojiIcon } from '@100mslive/react-icons'; import { EmojiCard } from './Footer/EmojiCard'; @@ -18,6 +17,7 @@ import { config as cssConfig } from '../../Theme'; import { Tooltip } from '../../Tooltip'; import IconButton from '../IconButton'; import { useDropdownList } from './hooks/useDropdownList'; +import { useLandscapeHLSStream, useMobileHLSStream } from '../common/hooks'; import { EMOJI_REACTION_TYPE } from '../common/constants'; init({ data }); @@ -25,7 +25,6 @@ init({ data }); export const EmojiReaction = () => { const [open, setOpen] = useState(false); const isConnected = useHMSStore(selectIsConnectedToRoom); - const { isHLSRunning } = useRecordingStreaming(); useDropdownList({ open: open, name: 'EmojiReaction' }); // const hmsActions = useHMSActions(); @@ -34,6 +33,8 @@ export const EmojiReaction = () => { // 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, @@ -66,7 +67,7 @@ export const EmojiReaction = () => { if (!isConnected) { return null; } - return (isMobile || isLandscape) && !isHLSRunning ? ( + return (isMobile || isLandscape) && !(isLandscapeStream || isMobileHLSStream) ? ( ) : ( diff --git a/packages/roomkit-react/src/Prebuilt/components/HMSVideo/MwebHLSViewTitle.tsx b/packages/roomkit-react/src/Prebuilt/components/HMSVideo/MwebHLSViewTitle.tsx index 29fd5e238f..736f15a4d1 100644 --- a/packages/roomkit-react/src/Prebuilt/components/HMSVideo/MwebHLSViewTitle.tsx +++ b/packages/roomkit-react/src/Prebuilt/components/HMSVideo/MwebHLSViewTitle.tsx @@ -1,13 +1,14 @@ -import React, { useCallback, useEffect, useRef, useState } from 'react'; -import { selectHLSState, selectPeerCount, useHMSStore } from '@100mslive/react-sdk'; +import React from 'react'; +import { ChevronDownIcon } from '@100mslive/react-icons'; import { Flex } from '../../../Layout'; import { Text } from '../../../Text'; // @ts-ignore: No implicit any import { Logo } from '../Header/HeaderComponents'; -import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen'; -// @ts-ignore: No implicit Any -import { getFormattedCount } from '../../common/utils'; -import { getTime } from './utils'; +import { RoomDetailsRow } from '../RoomDetails/RoomDetailsRow'; +import { useRoomLayoutHeader } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen'; +// @ts-ignore +import { useIsSidepaneTypeOpen, useSidepaneToggle } from '../AppData/useSidepane'; +import { SIDE_PANE_OPTIONS } from '../../common/constants'; /* player handler --> left -> go live with timer or live, right -> expand icon @@ -16,39 +17,41 @@ import { getTime } from './utils'; half page will have chat or participant view */ export const HLSViewTitle = () => { - const peerCount = useHMSStore(selectPeerCount); - const hlsState = useHMSStore(selectHLSState); - const intervalRef = useRef(null); - const { screenType } = useRoomLayoutConferencingScreen(); - const [liveTime, setLiveTime] = useState(0); - - const startTimer = useCallback(() => { - intervalRef.current = setInterval(() => { - const timeStamp = hlsState?.variants[0]?.[screenType === 'hls_live_streaming' ? 'startedAt' : 'initialisedAt']; - if (hlsState?.running && timeStamp) { - setLiveTime(Date.now() - timeStamp.getTime()); - } - }, 60000); - }, [hlsState?.running, hlsState?.variants, screenType]); - - useEffect(() => { - if (hlsState?.running) { - startTimer(); - const timeStamp = hlsState?.variants[0]?.[screenType === 'hls_live_streaming' ? 'startedAt' : 'initialisedAt']; - if (hlsState?.running && timeStamp) { - setLiveTime(Date.now() - timeStamp.getTime()); - } - } - if (!hlsState?.running && intervalRef.current) { - clearInterval(intervalRef.current); - } - return () => { - if (intervalRef.current) { - clearInterval(intervalRef.current); - } - }; - }, [hlsState?.running, hlsState?.variants, screenType, startTimer]); + const { title, details } = useRoomLayoutHeader(); + const toggleDetailsPane = useSidepaneToggle(SIDE_PANE_OPTIONS.ROOM_DETAILS); + const isDetailSidepaneOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.ROOM_DETAILS); + if (isDetailSidepaneOpen) { + return ( + + + About Session + + + + + + ); + } return ( { > - - Tech Talk - - - - {getFormattedCount(peerCount) + ' watching'} + {title ? ( + + {title} - - - {'Started ' + getTime(liveTime) + ' ago'} + ) : null} + + + +  ...more diff --git a/packages/roomkit-react/src/Prebuilt/components/HMSVideo/utils.ts b/packages/roomkit-react/src/Prebuilt/components/HMSVideo/utils.ts index 79accc35dd..80e09e38f4 100644 --- a/packages/roomkit-react/src/Prebuilt/components/HMSVideo/utils.ts +++ b/packages/roomkit-react/src/Prebuilt/components/HMSVideo/utils.ts @@ -25,11 +25,3 @@ export function getDurationFromSeconds(timeInSeconds: number) { } return videoTimeStr; } - -export function getTime(timeInMilles: number) { - const timeInSeconds = Math.floor(timeInMilles / 1000); - const hours = Math.floor(timeInSeconds / 3600); - const minutes = Math.floor((timeInSeconds % 3600) / 60); - const hour = hours !== 0 ? `${hours < 10 ? '0' : ''}${hours}` : ''; - return hour + `${hour ? 'h:' : ''}` + minutes + 'm'; -} diff --git a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx index 0c42e7eba7..7d4ebca867 100644 --- a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx +++ b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx @@ -100,8 +100,8 @@ export const MwebOptions = ({ const { unreadPollQuiz, setUnreadPollQuiz } = useUnreadPollQuizPresent(); const { title, description } = useRoomLayoutHeader(); const toggleDetailsSheet = useSheetToggle(SHEET_OPTIONS.ROOM_DETAILS); - const isLandscapeHLSStream = useLandscapeHLSStream(); const isMobileHLSStream = useMobileHLSStream(); + const isLandscapeHLSStream = useLandscapeHLSStream(); useDropdownList({ open: openModals.size > 0 || openOptionsSheet || openSettingsSheet, name: 'MoreSettings' }); @@ -200,7 +200,7 @@ export const MwebOptions = ({ ) : null} */} - {elements?.emoji_reactions && !isHLSRunning && ( + {elements?.emoji_reactions && !(isLandscapeHLSStream || isMobileHLSStream) && ( { setShowEmojiCard(true); diff --git a/packages/roomkit-react/src/Prebuilt/components/RoomDetails/RoomDetailsPane.tsx b/packages/roomkit-react/src/Prebuilt/components/RoomDetails/RoomDetailsPane.tsx index b3522da8d1..2ce5eee09c 100644 --- a/packages/roomkit-react/src/Prebuilt/components/RoomDetails/RoomDetailsPane.tsx +++ b/packages/roomkit-react/src/Prebuilt/components/RoomDetails/RoomDetailsPane.tsx @@ -2,31 +2,32 @@ import React from 'react'; import { CrossIcon } from '@100mslive/react-icons'; import { Box, Flex } from '../../../Layout'; import { Text } from '../../../Text'; +// @ts-ignore: No implicit any +import { Logo } from '../Header/HeaderComponents'; import { RoomDetailsRow } from './RoomDetailsRow'; import { useRoomLayoutHeader } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen'; // @ts-ignore import { useSidepaneToggle } from '../AppData/useSidepane'; +import { useMobileHLSStream } from '../../common/hooks'; import { SIDE_PANE_OPTIONS } from '../../common/constants'; export const RoomDetailsPane = () => { - const { title, description, details } = useRoomLayoutHeader(); - const toggleDetailsPane = useSidepaneToggle(SIDE_PANE_OPTIONS.ROOM_DETAILS); + const { description } = useRoomLayoutHeader(); + const isMwebHLSStream = useMobileHLSStream(); return ( - - {title} - - + {isMwebHLSStream ? ( + + + - - - - + ) : ( + + )} - Description + + Description + {description} @@ -34,3 +35,29 @@ export const RoomDetailsPane = () => { ); }; + +const ShowRoomDetailHeader = () => { + const { title, details } = useRoomLayoutHeader(); + const toggleDetailsPane = useSidepaneToggle(SIDE_PANE_OPTIONS.ROOM_DETAILS); + const isMwebHLSStream = useMobileHLSStream(); + return ( + + + {title} + {!isMwebHLSStream && ( + + + + )} + + + + ); +}; diff --git a/packages/roomkit-react/src/Prebuilt/layouts/SidePane.tsx b/packages/roomkit-react/src/Prebuilt/layouts/SidePane.tsx index d9cdb21810..b17a03a68a 100644 --- a/packages/roomkit-react/src/Prebuilt/layouts/SidePane.tsx +++ b/packages/roomkit-react/src/Prebuilt/layouts/SidePane.tsx @@ -60,8 +60,7 @@ const Wrapper = styled('div', { mobileStream: { true: { '@md': { - position: 'unset !important', - background: 'red', + position: 'unset', }, }, }, diff --git a/packages/roomkit-react/src/Prebuilt/layouts/VideoStreamingSection.tsx b/packages/roomkit-react/src/Prebuilt/layouts/VideoStreamingSection.tsx index d6b6cb5e37..b1deebd310 100644 --- a/packages/roomkit-react/src/Prebuilt/layouts/VideoStreamingSection.tsx +++ b/packages/roomkit-react/src/Prebuilt/layouts/VideoStreamingSection.tsx @@ -31,7 +31,7 @@ import { // @ts-ignore: No implicit Any } from '../components/AppData/useUISettings'; import { useCloseScreenshareWhiteboard } from '../components/hooks/useCloseScreenshareWhiteboard'; -import { useMobileHLSStream } from '../common/hooks'; +import { useLandscapeHLSStream, useMobileHLSStream } from '../common/hooks'; // @ts-ignore: No implicit Any import { SESSION_STORE_KEY } from '../common/constants'; @@ -57,6 +57,7 @@ export const VideoStreamingSection = ({ const urlToIframe = useUrlToEmbed(); const pdfAnnotatorActive = usePDFConfig(); const isMobileHLSStream = useMobileHLSStream(); + const isLandscapeHLSStream = useLandscapeHLSStream(); useCloseScreenshareWhiteboard(); useEffect(() => { @@ -104,7 +105,7 @@ export const VideoStreamingSection = ({ css={{ size: '100%', position: 'relative', - gap: '$4', + gap: isMobileHLSStream || isLandscapeHLSStream ? '0' : '$4', }} direction={isMobileHLSStream ? 'column' : 'row'} >