Skip to content

Commit

Permalink
fix: hls when chat disabled
Browse files Browse the repository at this point in the history
  • Loading branch information
@raviteja83
raviteja83 committed Mar 1, 2024
1 parent 0da07a7 commit bdc51d3
Show file tree
Hide file tree
Showing 3 changed files with 174 additions and 159 deletions.
22 changes: 12 additions & 10 deletions packages/roomkit-react/src/Prebuilt/components/HMSVideo/HMSVideo.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,20 @@
import React, { forwardRef } from 'react';
import { useMedia } from 'react-use';
import { config, Flex } from '../../../';
import { useIsLandscape } from '../../common/hooks';
import { Flex } from '../../../Layout';

export const HMSVideo = forwardRef(({ children, ...props }, videoRef) => {
const isLandscape = useIsLandscape();
const isMobile = useMedia(config.media.md);
return (
<Flex
data-testid="hms-video"
css={{
size: '100%',
position: 'relative',
justifyContent: 'center',
'@md': {
height: 'auto',
'& video': {
height: '$60 !important',
},
},
'& video::cue': {
color: 'white',
whiteSpace: 'pre-line',
Expand All @@ -34,13 +37,12 @@ export const HMSVideo = forwardRef(({ children, ...props }, videoRef) => {
>
<video
style={{
flex: '1 1 0',
margin: '0 auto',
minHeight: '0',
objectFit: 'contain',
width: 'inherit',
height: isLandscape || isMobile ? '100%' : '',
position: isLandscape || isMobile ? 'absolute' : '',
width: 'auto',
height: 'auto',
maxWidth: '100%',
maxHeight: '100%',
}}
ref={videoRef}
playsInline
Expand Down
232 changes: 120 additions & 112 deletions packages/roomkit-react/src/Prebuilt/layouts/HLSView.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -353,12 +353,17 @@ const HLSView = () => {
id={`hls-viewer-${themeType}`}
ref={hlsViewRef}
direction={isMobile || isLandscape ? 'column' : 'row'}
justify="center"
css={{
w: sidepane !== '' && isLandscape ? '' : '100%',
h: sidepane !== '' && isMobile ? '36%' : '100%',
flex: '1 1 0',
}}
>
{hlsViewRef.current && (isMobile || isLandscape) && (
<Box css={{ position: 'fixed', left: '$4', top: '$4', zindex: 11 }}>
<LeaveRoom screenType={screenType} container={hlsViewRef.current} />
</Box>
)}

{hlsUrl && !streamEnded ? (
<>
<HMSPlayerContext.Provider value={{ hlsPlayer }}>
Expand All @@ -372,6 +377,9 @@ const HLSView = () => {
css={{
size: '100%',
margin: '0 auto',
'@md': {
height: 'auto',
},
}}
>
{!(isMobile || isLandscape) && (
Expand Down Expand Up @@ -464,9 +472,6 @@ const HLSView = () => {
p: '$4 $8',
}}
>
<HMSVideoPlayer.Controls.Left>
{hlsViewRef.current && <LeaveRoom screenType={screenType} container={hlsViewRef.current} />}
</HMSVideoPlayer.Controls.Left>
<HMSVideoPlayer.Controls.Right>
{isLandscape && <ChatToggle />}
{hasCaptions && !isHlsAutoplayBlocked && (
Expand All @@ -489,120 +494,123 @@ const HLSView = () => {
</Flex>
</>
) : null}
<Flex
ref={controlsRef}
direction={isMobile ? 'columnReverse' : 'column'}
justify="end"
align="start"
css={{
position: 'absolute',
bottom: isFullScreen && hlsState?.variants[0]?.playlist_type === HLSPlaylistType.DVR ? '$8' : '0',
left: '0',
zIndex: 1,
background:
isMobile || isLandscape
? ''
: `linear-gradient(180deg, ${theme.colors.background_dim.value}00 29.46%, ${theme.colors.background_dim.value}A3 100%);`,
width: '100%',
pt: '$8',
flexShrink: 0,
transition: 'visibility 0s 0.5s, opacity 0.5s linear',
visibility: controlsVisible ? `` : `hidden`,
opacity: controlsVisible ? `1` : '0',
}}
>
{hlsState?.variants[0]?.playlist_type === HLSPlaylistType.DVR ? <HMSVideoPlayer.Progress /> : null}
<HMSVideoPlayer.Controls.Root
{controlsVisible && (
<Flex
ref={controlsRef}
direction={isMobile ? 'columnReverse' : 'column'}
justify="end"
align="start"
css={{
p: '$4 $8',
position: 'absolute',
bottom:
isFullScreen && hlsState?.variants[0]?.playlist_type === HLSPlaylistType.DVR ? '$8' : '0',
left: '0',
zIndex: 1,
background:
isMobile || isLandscape
? ''
: `linear-gradient(180deg, ${theme.colors.background_dim.value}00 29.46%, ${theme.colors.background_dim.value}A3 100%);`,
width: '100%',
pt: '$8',
flexShrink: 0,
transition: 'visibility 0s 0.5s, opacity 0.5s linear',
}}
>
<HMSVideoPlayer.Controls.Left>
{!(isMobile || isLandscape) && (
<>
{hlsState?.variants[0]?.playlist_type === HLSPlaylistType.DVR ? (
<>
<HMSVideoPlayer.Seeker
onClick={() => {
onSeekTo(-10);
{hlsState?.variants[0]?.playlist_type === HLSPlaylistType.DVR ? (
<HMSVideoPlayer.Progress />
) : null}
<HMSVideoPlayer.Controls.Root
css={{
p: '$4 $8',
}}
>
<HMSVideoPlayer.Controls.Left>
{!(isMobile || isLandscape) && (
<>
{hlsState?.variants[0]?.playlist_type === HLSPlaylistType.DVR ? (
<>
<HMSVideoPlayer.Seeker
onClick={() => {
onSeekTo(-10);
}}
title="backward"
>
<BackwardArrowIcon width={20} height={20} />
</HMSVideoPlayer.Seeker>
<HMSVideoPlayer.PlayPauseButton isPaused={isPaused} />
<HMSVideoPlayer.Seeker
onClick={() => {
onSeekTo(10);
}}
title="forward"
>
<ForwardArrowIcon width={20} height={20} />
</HMSVideoPlayer.Seeker>
{!isVideoLive ? <HMSVideoPlayer.Duration /> : null}
</>
) : null}
<HMSVideoPlayer.Volume />
</>
)}
<IconButton
css={{ px: '$2' }}
onClick={async () => {
await hlsPlayer?.seekToLivePosition();
setIsVideoLive(true);
}}
key="jump-to-live_btn"
data-testid="jump-to-live_btn"
>
<Tooltip title={isVideoLive ? 'Live' : 'Go to Live'} side="top">
<Flex justify="center" gap={2} align="center">
<Box
css={{
height: '$4',
width: '$4',
background: isVideoLive ? '$alert_error_default' : '$on_primary_medium',
r: '$1',
}}
title="backward"
>
<BackwardArrowIcon width={20} height={20} />
</HMSVideoPlayer.Seeker>
<HMSVideoPlayer.PlayPauseButton isPaused={isPaused} />
<HMSVideoPlayer.Seeker
onClick={() => {
onSeekTo(10);
/>
<Text
variant="$body1"
css={{
c: isVideoLive ? '$on_surface_high' : '$on_surface_medium',
fontWeight: '$semiBold',
}}
title="forward"
>
<ForwardArrowIcon width={20} height={20} />
</HMSVideoPlayer.Seeker>
{!isVideoLive ? <HMSVideoPlayer.Duration /> : null}
</>
) : null}
<HMSVideoPlayer.Volume />
</>
)}
<IconButton
css={{ px: '$2' }}
onClick={async () => {
await hlsPlayer?.seekToLivePosition();
setIsVideoLive(true);
}}
key="jump-to-live_btn"
data-testid="jump-to-live_btn"
>
<Tooltip title={isVideoLive ? 'Live' : 'Go to Live'} side="top">
<Flex justify="center" gap={2} align="center">
<Box
css={{
height: '$4',
width: '$4',
background: isVideoLive ? '$alert_error_default' : '$on_primary_medium',
r: '$1',
}}
/>
<Text
variant="$body1"
css={{
c: isVideoLive ? '$on_surface_high' : '$on_surface_medium',
fontWeight: '$semiBold',
}}
>
{isVideoLive ? 'LIVE' : 'GO LIVE'}
</Text>
</Flex>
</Tooltip>
</IconButton>
{(isMobile || isLandscape) &&
!isVideoLive &&
hlsState?.variants[0]?.playlist_type === HLSPlaylistType.DVR ? (
<HMSVideoPlayer.Duration />
) : null}
</HMSVideoPlayer.Controls.Left>
{isVideoLive ? 'LIVE' : 'GO LIVE'}
</Text>
</Flex>
</Tooltip>
</IconButton>
{(isMobile || isLandscape) &&
!isVideoLive &&
hlsState?.variants[0]?.playlist_type === HLSPlaylistType.DVR ? (
<HMSVideoPlayer.Duration />
) : null}
</HMSVideoPlayer.Controls.Left>

<HMSVideoPlayer.Controls.Right>
{hasCaptions && !(isMobile || isLandscape) && (
<HLSCaptionSelector isEnabled={isCaptionEnabled} />
)}
{availableLayers.length > 0 && !(isMobile || isLandscape) ? (
<HLSQualitySelector
layers={availableLayers}
onOpenChange={setQualityDropDownOpen}
open={qualityDropDownOpen}
selection={currentSelectedQuality}
onQualityChange={handleQuality}
isAuto={isUserSelectedAuto}
/>
) : null}
{isFullScreenSupported ? (
<FullScreenButton isFullScreen={isFullScreen} onToggle={toggle} />
) : null}
</HMSVideoPlayer.Controls.Right>
</HMSVideoPlayer.Controls.Root>
</Flex>
<HMSVideoPlayer.Controls.Right>
{hasCaptions && !(isMobile || isLandscape) && (
<HLSCaptionSelector isEnabled={isCaptionEnabled} />
)}
{availableLayers.length > 0 && !(isMobile || isLandscape) ? (
<HLSQualitySelector
layers={availableLayers}
onOpenChange={setQualityDropDownOpen}
open={qualityDropDownOpen}
selection={currentSelectedQuality}
onQualityChange={handleQuality}
isAuto={isUserSelectedAuto}
/>
) : null}
{isFullScreenSupported ? (
<FullScreenButton isFullScreen={isFullScreen} onToggle={toggle} />
) : null}
</HMSVideoPlayer.Controls.Right>
</HMSVideoPlayer.Controls.Root>
</Flex>
)}
</>
</HMSVideoPlayer.Root>
</Flex>
Expand Down
Loading

0 comments on commit bdc51d3

Please sign in to comment.