From 0d8c9e537d8c49df5ae68f95f1a4545881bcd546 Mon Sep 17 00:00:00 2001 From: amar-1995 Date: Wed, 28 Feb 2024 20:03:52 +0530 Subject: [PATCH 1/7] fix: added title --- .../components/HMSVideo/MwebHLSViewTitle.tsx | 14 ++++++++++---- .../src/Prebuilt/layouts/SidePane.tsx | 3 +-- 2 files changed, 11 insertions(+), 6 deletions(-) diff --git a/packages/roomkit-react/src/Prebuilt/components/HMSVideo/MwebHLSViewTitle.tsx b/packages/roomkit-react/src/Prebuilt/components/HMSVideo/MwebHLSViewTitle.tsx index 29fd5e238f..90a864350f 100644 --- a/packages/roomkit-react/src/Prebuilt/components/HMSVideo/MwebHLSViewTitle.tsx +++ b/packages/roomkit-react/src/Prebuilt/components/HMSVideo/MwebHLSViewTitle.tsx @@ -4,7 +4,10 @@ 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'; +import { + useRoomLayoutConferencingScreen, + useRoomLayoutHeader, +} from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen'; // @ts-ignore: No implicit Any import { getFormattedCount } from '../../common/utils'; import { getTime } from './utils'; @@ -19,6 +22,7 @@ export const HLSViewTitle = () => { const peerCount = useHMSStore(selectPeerCount); const hlsState = useHMSStore(selectHLSState); const intervalRef = useRef(null); + const { title } = useRoomLayoutHeader(); const { screenType } = useRoomLayoutConferencingScreen(); const [liveTime, setLiveTime] = useState(0); @@ -64,9 +68,11 @@ export const HLSViewTitle = () => { > - - Tech Talk - + {title ? ( + + {title} + + ) : null} {getFormattedCount(peerCount) + ' watching'} 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', }, }, }, From 53fcf5b4c8fd01046dfb184f6f3ea7cd986e7ae0 Mon Sep 17 00:00:00 2001 From: amar-1995 Date: Wed, 28 Feb 2024 21:34:54 +0530 Subject: [PATCH 2/7] fix: title and description view --- .../components/HMSVideo/MwebHLSViewTitle.tsx | 103 ++++++++---------- .../src/Prebuilt/components/HMSVideo/utils.ts | 8 -- .../RoomDetails/RoomDetailsPane.tsx | 53 +++++++-- 3 files changed, 86 insertions(+), 78 deletions(-) diff --git a/packages/roomkit-react/src/Prebuilt/components/HMSVideo/MwebHLSViewTitle.tsx b/packages/roomkit-react/src/Prebuilt/components/HMSVideo/MwebHLSViewTitle.tsx index 90a864350f..736f15a4d1 100644 --- a/packages/roomkit-react/src/Prebuilt/components/HMSVideo/MwebHLSViewTitle.tsx +++ b/packages/roomkit-react/src/Prebuilt/components/HMSVideo/MwebHLSViewTitle.tsx @@ -1,16 +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, - useRoomLayoutHeader, -} 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 @@ -19,40 +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 { title } = useRoomLayoutHeader(); - 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 ( { {title} ) : null} - - - {getFormattedCount(peerCount) + ' watching'} - - - - {'Started ' + getTime(liveTime) + ' ago'} + + + +  ...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/RoomDetails/RoomDetailsPane.tsx b/packages/roomkit-react/src/Prebuilt/components/RoomDetails/RoomDetailsPane.tsx index b3522da8d1..6828821ad6 100644 --- a/packages/roomkit-react/src/Prebuilt/components/RoomDetails/RoomDetailsPane.tsx +++ b/packages/roomkit-react/src/Prebuilt/components/RoomDetails/RoomDetailsPane.tsx @@ -2,35 +2,64 @@ 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'; +// @ts-ignore 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 ( + {isMwebHLSStream ? ( + + + + + + + ) : ( + + )} + + + Description + + + {description} + + + + ); +}; + +const ShowRoomDetailHeader = () => { + const { title, details } = useRoomLayoutHeader(); + const toggleDetailsPane = useSidepaneToggle(SIDE_PANE_OPTIONS.ROOM_DETAILS); + const isMwebHLSStream = useMobileHLSStream(); + return ( + <> {title} - - - - Description - - {description} - - - + ); }; From 9cf037734a5856a2f1c1a873201de17a5628ceb6 Mon Sep 17 00:00:00 2001 From: amar-1995 Date: Wed, 28 Feb 2024 21:46:53 +0530 Subject: [PATCH 3/7] fix: remove unwanted --- .../src/Prebuilt/components/RoomDetails/RoomDetailsPane.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/roomkit-react/src/Prebuilt/components/RoomDetails/RoomDetailsPane.tsx b/packages/roomkit-react/src/Prebuilt/components/RoomDetails/RoomDetailsPane.tsx index 6828821ad6..1639c2750c 100644 --- a/packages/roomkit-react/src/Prebuilt/components/RoomDetails/RoomDetailsPane.tsx +++ b/packages/roomkit-react/src/Prebuilt/components/RoomDetails/RoomDetailsPane.tsx @@ -4,7 +4,6 @@ import { Box, Flex } from '../../../Layout'; import { Text } from '../../../Text'; // @ts-ignore: No implicit any import { Logo } from '../Header/HeaderComponents'; -// @ts-ignore import { RoomDetailsRow } from './RoomDetailsRow'; import { useRoomLayoutHeader } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen'; // @ts-ignore From d62426ff757f6bfe1c8683771290d817c03a21d0 Mon Sep 17 00:00:00 2001 From: amar-1995 Date: Thu, 29 Feb 2024 13:06:04 +0530 Subject: [PATCH 4/7] fix: not render cross icon --- .../RoomDetails/RoomDetailsPane.tsx | 23 ++++++++++--------- 1 file changed, 12 insertions(+), 11 deletions(-) diff --git a/packages/roomkit-react/src/Prebuilt/components/RoomDetails/RoomDetailsPane.tsx b/packages/roomkit-react/src/Prebuilt/components/RoomDetails/RoomDetailsPane.tsx index 1639c2750c..4fd3a7483b 100644 --- a/packages/roomkit-react/src/Prebuilt/components/RoomDetails/RoomDetailsPane.tsx +++ b/packages/roomkit-react/src/Prebuilt/components/RoomDetails/RoomDetailsPane.tsx @@ -46,17 +46,18 @@ const ShowRoomDetailHeader = () => { <> {title} - - - + {!isMwebHLSStream && ( + + + + )} From d3bd0a29f46b998a4e729cec137274dadeef62f4 Mon Sep 17 00:00:00 2001 From: amar-1995 Date: Thu, 29 Feb 2024 13:40:58 +0530 Subject: [PATCH 5/7] fix: removed extra gap --- .../Prebuilt/components/RoomDetails/RoomDetailsPane.tsx | 8 +++----- .../src/Prebuilt/layouts/VideoStreamingSection.tsx | 5 +++-- 2 files changed, 6 insertions(+), 7 deletions(-) diff --git a/packages/roomkit-react/src/Prebuilt/components/RoomDetails/RoomDetailsPane.tsx b/packages/roomkit-react/src/Prebuilt/components/RoomDetails/RoomDetailsPane.tsx index 4fd3a7483b..2ce5eee09c 100644 --- a/packages/roomkit-react/src/Prebuilt/components/RoomDetails/RoomDetailsPane.tsx +++ b/packages/roomkit-react/src/Prebuilt/components/RoomDetails/RoomDetailsPane.tsx @@ -19,9 +19,7 @@ export const RoomDetailsPane = () => { {isMwebHLSStream ? ( - - - + ) : ( @@ -43,7 +41,7 @@ const ShowRoomDetailHeader = () => { const toggleDetailsPane = useSidepaneToggle(SIDE_PANE_OPTIONS.ROOM_DETAILS); const isMwebHLSStream = useMobileHLSStream(); return ( - <> + {title} {!isMwebHLSStream && ( @@ -60,6 +58,6 @@ const ShowRoomDetailHeader = () => { )} - + ); }; 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'} > From 9b944604fcad8c7f390ef37da57dc375ed3d8eed Mon Sep 17 00:00:00 2001 From: amar-1995 Date: Thu, 29 Feb 2024 13:49:08 +0530 Subject: [PATCH 6/7] fix: text area height --- .../roomkit-react/src/Prebuilt/components/Chat/ChatFooter.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/roomkit-react/src/Prebuilt/components/Chat/ChatFooter.tsx b/packages/roomkit-react/src/Prebuilt/components/Chat/ChatFooter.tsx index f154f47f6b..7c978d078a 100644 --- a/packages/roomkit-react/src/Prebuilt/components/Chat/ChatFooter.tsx +++ b/packages/roomkit-react/src/Prebuilt/components/Chat/ChatFooter.tsx @@ -204,10 +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', + py: '$6', pl: '$8', - flexGrow: '1', + flexGrow: 1, r: '$1', '@md': { minHeight: 'unset', From ccd85f717d554fcb60986e05cf0b895764cb25fc Mon Sep 17 00:00:00 2001 From: amar-1995 Date: Thu, 29 Feb 2024 16:59:42 +0530 Subject: [PATCH 7/7] fix: show emoji icons --- .../src/Prebuilt/components/EmojiReaction.jsx | 7 ++++--- .../MoreSettings/SplitComponents/MwebOptions.tsx | 5 ++++- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/packages/roomkit-react/src/Prebuilt/components/EmojiReaction.jsx b/packages/roomkit-react/src/Prebuilt/components/EmojiReaction.jsx index 1b51356570..795ab8ab09 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/MoreSettings/SplitComponents/MwebOptions.tsx b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx index 7ef6f4c665..d2e8144952 100644 --- a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx +++ b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx @@ -54,6 +54,7 @@ import { useDropdownList } from '../../hooks/useDropdownList'; // @ts-ignore: No implicit any import { useMyMetadata } from '../../hooks/useMetadata'; import { useUnreadPollQuizPresent } from '../../hooks/useUnreadPollQuizPresent'; +import { useLandscapeHLSStream, useMobileHLSStream } from '../../../common/hooks'; // @ts-ignore: No implicit any import { getFormattedCount } from '../../../common/utils'; // @ts-ignore: No implicit any @@ -99,6 +100,8 @@ export const MwebOptions = ({ const { unreadPollQuiz, setUnreadPollQuiz } = useUnreadPollQuizPresent(); const { title, description } = useRoomLayoutHeader(); const toggleDetailsSheet = useSheetToggle(SHEET_OPTIONS.ROOM_DETAILS); + const isMobileHLSStream = useMobileHLSStream(); + const isLandscapeHLSStream = useLandscapeHLSStream(); useDropdownList({ open: openModals.size > 0 || openOptionsSheet || openSettingsSheet, name: 'MoreSettings' }); @@ -197,7 +200,7 @@ export const MwebOptions = ({ ) : null} */} - {elements?.emoji_reactions && !isHLSRunning && ( + {elements?.emoji_reactions && !(isLandscapeHLSStream || isMobileHLSStream) && ( { setShowEmojiCard(true);