From 0a5031f8bd41199a3bf23d4fb103a8c07c677034 Mon Sep 17 00:00:00 2001 From: Amar Bathwal <110378139+amar-1995@users.noreply.github.com> Date: Fri, 1 Mar 2024 11:00:31 +0530 Subject: [PATCH 1/4] fix: remove fraction in second (#2630) * fix: remove fraction in second * fix: decimal places for seconds --------- Co-authored-by: KaustubhKumar05 --- .../roomkit-react/src/Prebuilt/components/Polls/common/utils.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/roomkit-react/src/Prebuilt/components/Polls/common/utils.ts b/packages/roomkit-react/src/Prebuilt/components/Polls/common/utils.ts index c1f8f2b3b8..35d1ec8e32 100644 --- a/packages/roomkit-react/src/Prebuilt/components/Polls/common/utils.ts +++ b/packages/roomkit-react/src/Prebuilt/components/Polls/common/utils.ts @@ -16,7 +16,7 @@ export const getFormattedTime = (milliseconds: number | undefined, precise = tru if (!precise && (hours || minutes)) { return formattedTime; } - formattedTime += `${minutes >= 1 ? Math.floor(seconds) : seconds.toFixed(3)}s`; + formattedTime += `${precise ? seconds.toFixed(3) : Math.floor(seconds)}s`; return formattedTime; }; From 6774ab32e6fd9dfd50bd907cc978240fe77a5efa Mon Sep 17 00:00:00 2001 From: Amar Bathwal <110378139+amar-1995@users.noreply.github.com> Date: Fri, 1 Mar 2024 13:52:18 +0530 Subject: [PATCH 2/4] fix: no controls for no-dvr in hls player --- .../components/HMSVideo/VideoProgress.tsx | 7 ++- .../src/Prebuilt/layouts/HLSView.jsx | 54 +++++++++++-------- 2 files changed, 34 insertions(+), 27 deletions(-) diff --git a/packages/roomkit-react/src/Prebuilt/components/HMSVideo/VideoProgress.tsx b/packages/roomkit-react/src/Prebuilt/components/HMSVideo/VideoProgress.tsx index 52f44c6a6c..122696eb7a 100644 --- a/packages/roomkit-react/src/Prebuilt/components/HMSVideo/VideoProgress.tsx +++ b/packages/roomkit-react/src/Prebuilt/components/HMSVideo/VideoProgress.tsx @@ -3,7 +3,7 @@ import { Box, Flex, Slider } from '../../..'; import { useHMSPlayerContext } from './PlayerContext'; import { getPercentage } from './utils'; -export const VideoProgress = ({ isDvr = true }: { isDvr: boolean }) => { +export const VideoProgress = () => { const { hlsPlayer } = useHMSPlayerContext(); const [videoProgress, setVideoProgress] = useState(0); const [bufferProgress, setBufferProgress] = useState(0); @@ -48,7 +48,7 @@ export const VideoProgress = ({ isDvr = true }: { isDvr: boolean }) => { return null; } return ( - + { h: '$2', zIndex: 1, transition: `all .2s ease .5s`, - pointerEvents: isDvr ? '' : 'none', }} min={0} max={100} @@ -64,7 +63,7 @@ export const VideoProgress = ({ isDvr = true }: { isDvr: boolean }) => { value={[videoProgress]} showTooltip={false} onValueChange={onProgress} - thumbStyles={{ w: '$6', h: '$6', display: isDvr ? '' : 'none' }} + thumbStyles={{ w: '$6', h: '$6' }} /> { }, []); const onDoubleClickHandler = useCallback( event => { - if (!(isMobile || isLandscape)) { + if (!(isMobile || isLandscape) || hlsState?.variants[0]?.playlist_type !== HLSPlaylistType.DVR) { return; } const sidePercentage = (event.screenX * 100) / event.target.clientWidth; @@ -314,7 +314,7 @@ const HLSView = () => { setIsSeekEnabled(false); }, 200); }, - [isLandscape, isMobile, onSeekTo], + [hlsState?.variants, isLandscape, isMobile, onSeekTo], ); const onClickHandler = useCallback(() => { if (!(isMobile || isLandscape)) { @@ -401,7 +401,7 @@ const HLSView = () => { <> {isMobile || isLandscape ? ( <> - {!showLoader && ( + {!showLoader && hlsState?.variants[0]?.playlist_type === HLSPlaylistType.DVR && ( { opacity: controlsVisible ? `1` : '0', }} > - + {hlsState?.variants[0]?.playlist_type === HLSPlaylistType.DVR ? : null} { {!(isMobile || isLandscape) && ( <> - { - onSeekTo(-10); - }} - title="backward" - > - - - - { - onSeekTo(10); - }} - title="forward" - > - - - {!isVideoLive ? : null} + {hlsState?.variants[0]?.playlist_type === HLSPlaylistType.DVR ? ( + <> + { + onSeekTo(-10); + }} + title="backward" + > + + + + { + onSeekTo(10); + }} + title="forward" + > + + + {!isVideoLive ? : null} + + ) : null} )} @@ -572,7 +576,11 @@ const HLSView = () => { - {(isMobile || isLandscape) && !isVideoLive ? : null} + {(isMobile || isLandscape) && + !isVideoLive && + hlsState?.variants[0]?.playlist_type === HLSPlaylistType.DVR ? ( + + ) : null} From 8f12b6923b01435c0241e3f8310cd5da92dcd3b2 Mon Sep 17 00:00:00 2001 From: Amar Bathwal <110378139+amar-1995@users.noreply.github.com> Date: Fri, 1 Mar 2024 13:54:07 +0530 Subject: [PATCH 3/4] fix: seekbar not showing in iOS for hls player --- .../src/Prebuilt/components/HMSVideo/VideoProgress.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/roomkit-react/src/Prebuilt/components/HMSVideo/VideoProgress.tsx b/packages/roomkit-react/src/Prebuilt/components/HMSVideo/VideoProgress.tsx index 122696eb7a..ebc450daef 100644 --- a/packages/roomkit-react/src/Prebuilt/components/HMSVideo/VideoProgress.tsx +++ b/packages/roomkit-react/src/Prebuilt/components/HMSVideo/VideoProgress.tsx @@ -20,10 +20,11 @@ export const VideoProgress = () => { if (!videoEl) { return; } - const videoProgress = Math.floor(getPercentage(videoEl.currentTime, videoEl.duration)); + const duration = isFinite(videoEl.duration) ? videoEl.duration : videoEl.seekable?.end(0) || 0; + const videoProgress = Math.floor(getPercentage(videoEl.currentTime, duration)); let bufferProgress = 0; if (videoEl.buffered.length > 0) { - bufferProgress = Math.floor(getPercentage(videoEl.buffered?.end(0), videoEl.duration)); + bufferProgress = Math.floor(getPercentage(videoEl.buffered?.end(0), duration)); } setVideoProgress(isNaN(videoProgress) ? 0 : videoProgress); From 4e2ccf549d90008f3423981db326e90224cad7d3 Mon Sep 17 00:00:00 2001 From: Ravi theja Date: Fri, 1 Mar 2024 13:56:47 +0530 Subject: [PATCH 4/4] fix: don't render options dropdown if no options --- .../components/Footer/RoleOptions.tsx | 251 +++++++++--------- 1 file changed, 125 insertions(+), 126 deletions(-) diff --git a/packages/roomkit-react/src/Prebuilt/components/Footer/RoleOptions.tsx b/packages/roomkit-react/src/Prebuilt/components/Footer/RoleOptions.tsx index 8b2d7dcae3..57139cb9ad 100644 --- a/packages/roomkit-react/src/Prebuilt/components/Footer/RoleOptions.tsx +++ b/packages/roomkit-react/src/Prebuilt/components/Footer/RoleOptions.tsx @@ -1,12 +1,13 @@ import React, { useState } from 'react'; import { DefaultConferencingScreen_Elements } from '@100mslive/types-prebuilt'; +import { match } from 'ts-pattern'; import { HMSPeer, selectPermissions, selectRoleByRoleName, + selectTracksMap, useHMSActions, useHMSStore, - useHMSVanillaStore, } from '@100mslive/react-sdk'; import { MicOffIcon, @@ -32,12 +33,59 @@ const optionTextCSS = { whiteSpace: 'nowrap', }; -const MuteUnmuteOption = ({ roleName, peerList }: { peerList: HMSPeer[]; roleName: string }) => { - const vanillaStore = useHMSVanillaStore(); - const store = vanillaStore.getState(); - const hmsActions = useHMSActions(); +const DropdownWrapper = ({ children }: { children: React.ReactNode }) => { + const [openOptions, setOpenOptions] = useState(false); + if (React.Children.toArray(children).length === 0) { + return null; + } + React.Children.map(children, child => { + console.log({ child }); + }); + return ( + + e.stopPropagation()} + className="role_actions" + asChild + css={{ + p: '$1', + r: '$0', + c: '$on_surface_high', + visibility: openOptions ? 'visible' : 'hidden', + '&:hover': { + c: '$on_surface_medium', + }, + '@md': { + visibility: 'visible', + }, + }} + > + + + + + e.stopPropagation()} + css={{ w: 'max-content', bg: '$surface_default', py: 0 }} + align="end" + > + {children} + + + ); +}; + +export const RoleOptions = ({ roleName, peerList }: { roleName: string; peerList: HMSPeer[] }) => { const permissions = useHMSStore(selectPermissions); + const hmsActions = useHMSActions(); + const { elements } = useRoomLayoutConferencingScreen(); + const { on_stage_role, off_stage_roles = [] } = (elements as DefaultConferencingScreen_Elements)?.on_stage_exp || {}; + const canRemoveRoleFromStage = permissions?.changeRole && roleName === on_stage_role; const role = useHMSStore(selectRoleByRoleName(roleName)); + const canPublishAudio = role.publishParams.allowed.includes('audio'); + const canPublishVideo = role.publishParams.allowed.includes('video'); + const tracks = useHMSStore(selectTracksMap); let isVideoOnForSomePeers = false; let isAudioOnForSomePeers = false; @@ -46,8 +94,8 @@ const MuteUnmuteOption = ({ roleName, peerList }: { peerList: HMSPeer[]; roleNam if (peer.isLocal) { return; } - const isAudioOn = !!peer.audioTrack && store.tracks[peer.audioTrack]?.enabled; - const isVideoOn = !!peer.videoTrack && store.tracks[peer.videoTrack]?.enabled; + const isAudioOn = !!peer.audioTrack && tracks[peer.audioTrack]?.enabled; + const isVideoOn = !!peer.videoTrack && tracks[peer.videoTrack]?.enabled; isAudioOnForSomePeers = isAudioOnForSomePeers || isAudioOn; isVideoOnForSomePeers = isVideoOnForSomePeers || isVideoOn; }); @@ -60,75 +108,11 @@ const MuteUnmuteOption = ({ roleName, peerList }: { peerList: HMSPeer[]; roleNam } }; - if (!role) { - return null; - } - - return ( - <> - {role.publishParams.allowed.includes('audio') && ( - <> - {isAudioOnForSomePeers && permissions?.mute ? ( - setTrackEnabled('audio', false)}> - - - Mute Audio for All - - - ) : null} - - {!isAudioOnForSomePeers && permissions?.unmute ? ( - setTrackEnabled('audio', true)}> - - - Request to Unmute Audio for All - - - ) : null} - - )} - - {role.publishParams.allowed.includes('video') && ( - <> - {isVideoOnForSomePeers && permissions?.mute ? ( - setTrackEnabled('video', false)}> - - - Mute Video for All - - - ) : null} - - {!isVideoOnForSomePeers && permissions?.unmute ? ( - setTrackEnabled('video', true)}> - - - Request to Unmute Video for All - - - ) : null} - - )} - - ); -}; - -export const RoleOptions = ({ roleName, peerList }: { roleName: string; peerList: HMSPeer[] }) => { - const [openOptions, setOpenOptions] = useState(false); - const permissions = useHMSStore(selectPermissions); - const hmsActions = useHMSActions(); - const { elements } = useRoomLayoutConferencingScreen(); - const { on_stage_role, off_stage_roles = [] } = (elements as DefaultConferencingScreen_Elements)?.on_stage_exp || {}; - const canMuteOrUnmute = permissions?.mute || permissions?.unmute; - const canRemoveRoleFromStage = permissions?.changeRole && roleName === on_stage_role; - const role = useHMSStore(selectRoleByRoleName(roleName)); - // on stage and off stage roles const canRemoveRoleFromRoom = permissions?.removeOthers && (on_stage_role === roleName || off_stage_roles?.includes(roleName)); if ( - !(canMuteOrUnmute || canRemoveRoleFromStage || canRemoveRoleFromRoom) || peerList.length === 0 || // if only local peer is present no need to show any options (peerList.length === 1 && peerList[0].isLocal) || @@ -157,60 +141,75 @@ export const RoleOptions = ({ roleName, peerList }: { roleName: string; peerList }; return ( - - e.stopPropagation()} - className="role_actions" - asChild - css={{ - p: '$1', - r: '$0', - c: '$on_surface_high', - visibility: openOptions ? 'visible' : 'hidden', - '&:hover': { - c: '$on_surface_medium', - }, - '@md': { - visibility: 'visible', - }, - }} - > - - - - - e.stopPropagation()} - css={{ w: 'max-content', bg: '$surface_default', py: 0 }} - align="end" - > - {canRemoveRoleFromStage && ( - - - - Remove all from Stage - - - )} - - {canMuteOrUnmute && } - - {canRemoveRoleFromRoom && ( - - - - Remove all from Room - - - )} - - + + {canRemoveRoleFromStage ? ( + + + + Remove all from Stage + + + ) : null} + + {match({ canPublishAudio, isAudioOnForSomePeers, canMute: permissions?.mute, canUnmute: permissions?.unmute }) + .with({ canPublishAudio: true, isAudioOnForSomePeers: true, canMute: true }, () => { + return ( + setTrackEnabled('audio', false)}> + + + Mute Audio for All + + + ); + }) + .with({ canPublishAudio: true, isAudioOnForSomePeers: false, canUnmute: true }, () => { + return ( + setTrackEnabled('audio', true)}> + + + Request to Unmute Audio for All + + + ); + }) + .otherwise(() => null)} + {match({ canPublishVideo, isVideoOnForSomePeers, canMute: permissions?.mute, canUnmute: permissions?.unmute }) + .with({ canPublishVideo: true, isVideoOnForSomePeers: true, canMute: true }, () => { + return ( + setTrackEnabled('video', false)}> + + + Mute Video for All + + + ); + }) + .with({ canPublishVideo: true, isVideoOnForSomePeers: false, canUnmute: true }, () => { + return ( + setTrackEnabled('video', true)}> + + + Request to Unmute Video for All + + + ); + }) + .otherwise(() => null)} + + {canRemoveRoleFromRoom ? ( + + + + Remove all from Room + + + ) : null} + ); };