From b64a569a57dd0bdb86c8e819c2700aa8d24876f3 Mon Sep 17 00:00:00 2001 From: amar-1995 Date: Tue, 5 Mar 2024 15:35:11 +0530 Subject: [PATCH 1/5] fix: added keyboard interaction --- .../src/Prebuilt/layouts/HLSView.jsx | 28 +++++++++++++++++++ 1 file changed, 28 insertions(+) diff --git a/packages/roomkit-react/src/Prebuilt/layouts/HLSView.jsx b/packages/roomkit-react/src/Prebuilt/layouts/HLSView.jsx index e1327df85c..7afc63c515 100644 --- a/packages/roomkit-react/src/Prebuilt/layouts/HLSView.jsx +++ b/packages/roomkit-react/src/Prebuilt/layouts/HLSView.jsx @@ -367,6 +367,31 @@ const HLSView = () => { [controlsVisible, isLandscape, isMobile, qualityDropDownOpen, seekProgress], ); + const keyPressHandler = useCallback( + async event => { + if (hlsState?.variants[0]?.playlist_type !== HLSPlaylistType.DVR) { + return; + } + switch (event.key) { + case ' ': + if (isPaused) { + await hlsPlayer?.play(); + } else { + hlsPlayer?.pause(); + } + break; + case 'ArrowRight': + onSeekTo(10); + break; + case 'ArrowLeft': + onSeekTo(-10); + break; + default: + } + }, + [hlsState?.variants, isPaused, onSeekTo], + ); + if (!hlsUrl || streamEnded) { return ( <> @@ -437,7 +462,10 @@ const HLSView = () => { '@md': { height: 'auto', }, + outline: 'none', }} + onKeyDown={keyPressHandler} + tabIndex="0" > {!(isMobile || isLandscape) && ( From 5eea58b6ac3817d150899c265de65b6e90b122b4 Mon Sep 17 00:00:00 2001 From: amar-1995 Date: Wed, 6 Mar 2024 14:00:28 +0530 Subject: [PATCH 2/5] fix: updated to hook --- .../src/Prebuilt/common/hooks.ts | 30 +++++++++++++++- .../src/Prebuilt/layouts/HLSView.jsx | 34 ++++++------------- 2 files changed, 40 insertions(+), 24 deletions(-) diff --git a/packages/roomkit-react/src/Prebuilt/common/hooks.ts b/packages/roomkit-react/src/Prebuilt/common/hooks.ts index 5f2690cb1a..db91d8f8dc 100644 --- a/packages/roomkit-react/src/Prebuilt/common/hooks.ts +++ b/packages/roomkit-react/src/Prebuilt/common/hooks.ts @@ -1,4 +1,4 @@ -import { useEffect, useRef, useState } from 'react'; +import { useCallback, useEffect, useRef, useState } from 'react'; import { useMedia } from 'react-use'; import { JoinForm_JoinBtnType } from '@100mslive/types-prebuilt/elements/join_form'; import { @@ -121,3 +121,31 @@ export const useMobileHLSStream = () => { const { screenType } = useRoomLayoutConferencingScreen(); return isMobile && screenType === 'hls_live_streaming'; }; + +export const useKeyboardHandler = ( + handlePlayPause: () => Promise, + onSeekTo: (value: number) => void, + targetKeys: string[], +) => { + const handleKeyEvent = useCallback( + async (event: KeyboardEvent) => { + const { key } = event; + if (targetKeys.includes(key)) { + switch (event.key) { + case ' ': + await handlePlayPause(); + break; + case 'ArrowRight': + onSeekTo(10); + break; + case 'ArrowLeft': + onSeekTo(-10); + break; + } + } + }, + [handlePlayPause, onSeekTo, targetKeys], + ); + + return handleKeyEvent; +}; diff --git a/packages/roomkit-react/src/Prebuilt/layouts/HLSView.jsx b/packages/roomkit-react/src/Prebuilt/layouts/HLSView.jsx index 7afc63c515..8c854b1eba 100644 --- a/packages/roomkit-react/src/Prebuilt/layouts/HLSView.jsx +++ b/packages/roomkit-react/src/Prebuilt/layouts/HLSView.jsx @@ -36,7 +36,7 @@ import { config, theme, useTheme } from '../../Theme'; import { Tooltip } from '../../Tooltip'; import { useSidepaneToggle } from '../components/AppData/useSidepane'; import { useRoomLayoutConferencingScreen } from '../provider/roomLayoutProvider/hooks/useRoomLayoutScreen'; -import { useIsLandscape } from '../common/hooks'; +import { useIsLandscape, useKeyboardHandler } from '../common/hooks'; import { APP_DATA, EMOJI_REACTION_TYPE, POLL_STATE, POLL_VIEWS, SIDE_PANE_OPTIONS } from '../common/constants'; let hlsPlayer; @@ -315,6 +315,7 @@ const HLSView = () => { }, [controlsVisible, isFullScreen, seekProgress, qualityDropDownOpen]); const onSeekTo = useCallback(seek => { + console.log('current time ', videoRef.current?.currentTime); hlsPlayer?.seekTo(videoRef.current?.currentTime + seek); }, []); const onDoubleClickHandler = useCallback( @@ -367,29 +368,16 @@ const HLSView = () => { [controlsVisible, isLandscape, isMobile, qualityDropDownOpen, seekProgress], ); - const keyPressHandler = useCallback( - async event => { - if (hlsState?.variants[0]?.playlist_type !== HLSPlaylistType.DVR) { - return; - } - switch (event.key) { - case ' ': - if (isPaused) { - await hlsPlayer?.play(); - } else { - hlsPlayer?.pause(); - } - break; - case 'ArrowRight': - onSeekTo(10); - break; - case 'ArrowLeft': - onSeekTo(-10); - break; - default: + const keyHandler = useKeyboardHandler( + async () => { + if (isPaused) { + await hlsPlayer?.play(); + } else { + hlsPlayer?.pause(); } }, - [hlsState?.variants, isPaused, onSeekTo], + onSeekTo, + ['ArrowRight', 'ArrowLeft', ' '], ); if (!hlsUrl || streamEnded) { @@ -464,7 +452,7 @@ const HLSView = () => { }, outline: 'none', }} - onKeyDown={keyPressHandler} + onKeyDown={keyHandler} tabIndex="0" > {!(isMobile || isLandscape) && ( From 5a1dd5f5ee2a13c113ba0fb707983a834cbfdc9e Mon Sep 17 00:00:00 2001 From: amar-1995 Date: Wed, 6 Mar 2024 14:01:43 +0530 Subject: [PATCH 3/5] fix: remove log --- packages/roomkit-react/src/Prebuilt/layouts/HLSView.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/roomkit-react/src/Prebuilt/layouts/HLSView.jsx b/packages/roomkit-react/src/Prebuilt/layouts/HLSView.jsx index 8c854b1eba..08be4abeb9 100644 --- a/packages/roomkit-react/src/Prebuilt/layouts/HLSView.jsx +++ b/packages/roomkit-react/src/Prebuilt/layouts/HLSView.jsx @@ -315,7 +315,6 @@ const HLSView = () => { }, [controlsVisible, isFullScreen, seekProgress, qualityDropDownOpen]); const onSeekTo = useCallback(seek => { - console.log('current time ', videoRef.current?.currentTime); hlsPlayer?.seekTo(videoRef.current?.currentTime + seek); }, []); const onDoubleClickHandler = useCallback( From a2ec74d9f2471f6b06a915c3213e8a95c61dccc9 Mon Sep 17 00:00:00 2001 From: amar-1995 Date: Wed, 6 Mar 2024 14:45:29 +0530 Subject: [PATCH 4/5] fix: updated --- .../src/Prebuilt/common/hooks.ts | 36 +++++++++---------- .../src/Prebuilt/layouts/HLSView.jsx | 12 +------ 2 files changed, 18 insertions(+), 30 deletions(-) diff --git a/packages/roomkit-react/src/Prebuilt/common/hooks.ts b/packages/roomkit-react/src/Prebuilt/common/hooks.ts index db91d8f8dc..80575ca970 100644 --- a/packages/roomkit-react/src/Prebuilt/common/hooks.ts +++ b/packages/roomkit-react/src/Prebuilt/common/hooks.ts @@ -1,5 +1,6 @@ import { useCallback, useEffect, useRef, useState } from 'react'; import { useMedia } from 'react-use'; +import { HMSHLSPlayer } from '@100mslive/hls-player'; import { JoinForm_JoinBtnType } from '@100mslive/types-prebuilt/elements/join_form'; import { parsedUserAgent, @@ -122,29 +123,26 @@ export const useMobileHLSStream = () => { return isMobile && screenType === 'hls_live_streaming'; }; -export const useKeyboardHandler = ( - handlePlayPause: () => Promise, - onSeekTo: (value: number) => void, - targetKeys: string[], -) => { +export const useKeyboardHandler = (isPaused: boolean, hlsPlayer: HMSHLSPlayer) => { const handleKeyEvent = useCallback( async (event: KeyboardEvent) => { - const { key } = event; - if (targetKeys.includes(key)) { - switch (event.key) { - case ' ': - await handlePlayPause(); - break; - case 'ArrowRight': - onSeekTo(10); - break; - case 'ArrowLeft': - onSeekTo(-10); - break; - } + switch (event.key) { + case ' ': + if (isPaused) { + await hlsPlayer?.play(); + } else { + hlsPlayer?.pause(); + } + break; + case 'ArrowRight': + hlsPlayer?.seekTo(hlsPlayer?.getVideoElement().currentTime + 10); + break; + case 'ArrowLeft': + hlsPlayer?.seekTo(hlsPlayer?.getVideoElement().currentTime - 10); + break; } }, - [handlePlayPause, onSeekTo, targetKeys], + [hlsPlayer, isPaused], ); return handleKeyEvent; diff --git a/packages/roomkit-react/src/Prebuilt/layouts/HLSView.jsx b/packages/roomkit-react/src/Prebuilt/layouts/HLSView.jsx index 08be4abeb9..0949500b34 100644 --- a/packages/roomkit-react/src/Prebuilt/layouts/HLSView.jsx +++ b/packages/roomkit-react/src/Prebuilt/layouts/HLSView.jsx @@ -367,17 +367,7 @@ const HLSView = () => { [controlsVisible, isLandscape, isMobile, qualityDropDownOpen, seekProgress], ); - const keyHandler = useKeyboardHandler( - async () => { - if (isPaused) { - await hlsPlayer?.play(); - } else { - hlsPlayer?.pause(); - } - }, - onSeekTo, - ['ArrowRight', 'ArrowLeft', ' '], - ); + const keyHandler = useKeyboardHandler(isPaused, hlsPlayer); if (!hlsUrl || streamEnded) { return ( From 3d30a60553f9aeb2765b8abf7c0d8b1b87de90b0 Mon Sep 17 00:00:00 2001 From: amar-1995 Date: Wed, 6 Mar 2024 14:59:03 +0530 Subject: [PATCH 5/5] fix: added dvr check --- packages/roomkit-react/src/Prebuilt/layouts/HLSView.jsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/roomkit-react/src/Prebuilt/layouts/HLSView.jsx b/packages/roomkit-react/src/Prebuilt/layouts/HLSView.jsx index 0949500b34..e754cf4958 100644 --- a/packages/roomkit-react/src/Prebuilt/layouts/HLSView.jsx +++ b/packages/roomkit-react/src/Prebuilt/layouts/HLSView.jsx @@ -441,7 +441,11 @@ const HLSView = () => { }, outline: 'none', }} - onKeyDown={keyHandler} + onKeyDown={async event => { + if (hlsState?.variants[0]?.playlist_type === HLSPlaylistType.DVR) { + await keyHandler(event); + } + }} tabIndex="0" > {!(isMobile || isLandscape) && (