Skip to content

Commit

Permalink
fix: show contriols when in fullscreen
Browse files Browse the repository at this point in the history
  • Loading branch information
@raviteja83
raviteja83 committed Feb 29, 2024
1 parent 943e15c commit c0f1a52
Show file tree
Hide file tree
Showing 6 changed files with 161 additions and 140 deletions.
163 changes: 85 additions & 78 deletions packages/roomkit-react/src/Prebuilt/components/HMSVideo/HLSQualitySelector.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,16 +14,22 @@ export function HLSQualitySelector({
onQualityChange,
selection,
isAuto,
containerRef,
}: {
open: boolean;
onOpenChange: (value: boolean) => void;
layers: HMSHLSLayer[];
onQualityChange: (quality: { [key: string]: string | number } | HMSHLSLayer) => void;
selection: HMSHLSLayer;
isAuto: boolean;
containerRef?: HTMLDivElement;
}) {
const isMobile = useMedia(config.media.md);
const isLandscape = useIsLandscape();

if (layers.length === 0) {
return null;
}
if (isMobile || isLandscape) {
return (
<Sheet.Root open={open} onOpenChange={onOpenChange}>
Expand All @@ -39,86 +45,87 @@ export function HLSQualitySelector({
<SettingsIcon />
</Flex>
</Sheet.Trigger>

{layers.length > 0 && (
<Sheet.Content css={{ bg: '$surface_default', pb: '$1' }} onClick={() => onOpenChange(false)}>
<Sheet.Title
css={{
display: 'flex',
color: '$on_surface_high',
w: '100%',
justifyContent: 'space-between',
mt: '$8',
fontSize: '$md',
px: '$10',
pb: '$8',
borderBottom: '1px solid $border_bright',
alignItems: 'center',
}}
>
Quality
<Sheet.Close css={{ color: '$on_surface_high' }} onClick={() => onOpenChange(false)}>
<CrossIcon />
</Sheet.Close>
</Sheet.Title>
{layers.map(layer => {
return (
<Flex
align="center"
css={{
w: '100%',
bg: '$surface_default',
'&:hover': {
bg: '$surface_brighter',
},
cursor: 'pointer',
gap: '$4',
py: '$8',
px: '$10',
}}
key={layer.width}
onClick={() => onQualityChange(layer)}
>
<Text variant="caption" css={{ fontWeight: '$semiBold' }}>
{getQualityText(layer)}
</Text>
<Text variant="caption" css={{ flex: '1 1 0', c: '$on_surface_low', pl: '$2' }}>
{getBitrateText(layer)}
</Text>
{!isAuto && layer.width === selection?.width && layer.height === selection?.height && (
<CheckIcon width="16px" height="16px" />
)}
</Flex>
);
})}
<Flex
align="center"
css={{
w: '100%',
bg: '$surface_default',
'&:hover': {
bg: '$surface_brighter',
},
cursor: 'pointer',
gap: '$4',
py: '$8',
px: '$10',
}}
key="auto"
onClick={() => onQualityChange({ height: 'auto' })}
>
<Text variant="caption" css={{ fontWeight: '$semiBold', flex: '1 1 0' }}>
Auto
</Text>
{isAuto && <CheckIcon width="16px" height="16px" />}
</Flex>
</Sheet.Content>
)}
<Sheet.Content
container={containerRef}
css={{ bg: '$surface_default', pb: '$1' }}
onClick={() => onOpenChange(false)}
>
<Sheet.Title
css={{
display: 'flex',
color: '$on_surface_high',
w: '100%',
justifyContent: 'space-between',
mt: '$8',
fontSize: '$md',
px: '$10',
pb: '$8',
borderBottom: '1px solid $border_bright',
alignItems: 'center',
}}
>
Quality
<Sheet.Close css={{ color: '$on_surface_high' }} onClick={() => onOpenChange(false)}>
<CrossIcon />
</Sheet.Close>
</Sheet.Title>
{layers.map(layer => {
return (
<Flex
align="center"
css={{
w: '100%',
bg: '$surface_default',
'&:hover': {
bg: '$surface_brighter',
},
cursor: 'pointer',
gap: '$4',
py: '$8',
px: '$10',
}}
key={layer.width}
onClick={() => onQualityChange(layer)}
>
<Text variant="caption" css={{ fontWeight: '$semiBold' }}>
{getQualityText(layer)}
</Text>
<Text variant="caption" css={{ flex: '1 1 0', c: '$on_surface_low', pl: '$2' }}>
{getBitrateText(layer)}
</Text>
{!isAuto && layer.width === selection?.width && layer.height === selection?.height && (
<CheckIcon width="16px" height="16px" />
)}
</Flex>
);
})}
<Flex
align="center"
css={{
w: '100%',
bg: '$surface_default',
'&:hover': {
bg: '$surface_brighter',
},
cursor: 'pointer',
gap: '$4',
py: '$8',
px: '$10',
}}
key="auto"
onClick={() => onQualityChange({ height: 'auto' })}
>
<Text variant="caption" css={{ fontWeight: '$semiBold', flex: '1 1 0' }}>
Auto
</Text>
{isAuto && <CheckIcon width="16px" height="16px" />}
</Flex>
</Sheet.Content>
</Sheet.Root>
);
}
return (
<Dropdown.Root open={open} onOpenChange={value => onOpenChange(value)}>
<Dropdown.Root open={open} onOpenChange={value => onOpenChange(value)} modal={false}>
<Dropdown.Trigger asChild data-testid="quality_selector">
<Flex
css={{
Expand Down Expand Up @@ -169,7 +176,7 @@ export function HLSQualitySelector({
</Tooltip>
</Flex>
</Dropdown.Trigger>
{layers.length > 0 && (
<Dropdown.Portal container={containerRef}>
<Dropdown.Content
sideOffset={5}
align="end"
Expand Down Expand Up @@ -232,7 +239,7 @@ export function HLSQualitySelector({
{isAuto && <CheckIcon width="16px" height="16px" />}
</Dropdown.Item>
</Dropdown.Content>
)}
</Dropdown.Portal>
</Dropdown.Root>
);
}
Expand Down
96 changes: 50 additions & 46 deletions packages/roomkit-react/src/Prebuilt/components/Leave/DesktopLeaveRoom.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,12 @@ export const DesktopLeaveRoom = ({
leaveRoom,
screenType,
endRoom,
container,
}: {
leaveRoom: (options?: { endStream?: boolean }) => Promise<void>;
screenType: keyof ConferencingScreen;
endRoom: () => Promise<void>;
container?: HTMLElement;
}) => {
const [open, setOpen] = useState(false);
const [showLeaveRoomAlert, setShowLeaveRoomAlert] = useState(false);
Expand Down Expand Up @@ -69,54 +71,56 @@ export const DesktopLeaveRoom = ({
<VerticalMenuIcon />
</MenuTriggerButton>
</Dropdown.Trigger>
<Dropdown.Content css={{ p: 0, w: '$100' }} alignOffset={-50} sideOffset={10}>
<Dropdown.Item
css={{
bg: '$surface_dim',
color: '$on_surface_medium',
'&:hover': { bg: '$surface_default', color: '$on_surface_high' },
p: '0',
}}
data-testid="just_leave_btn"
>
<LeaveCard
title={showStream ? 'Leave Stream' : 'Leave Session'}
subtitle={`Others will continue after you leave. You can join the ${
showStream ? 'stream' : 'session'
} again.`}
bg=""
titleColor="$on_surface_high"
icon={<ExitIcon height={24} width={24} style={{ transform: 'rotate(180deg)' }} />}
onClick={async () => await leaveRoom()}
css={{ p: '$8 $4' }}
/>
</Dropdown.Item>
<Dropdown.Portal container={container}>
<Dropdown.Content css={{ p: 0, w: '$100' }} alignOffset={-50} sideOffset={10}>
<Dropdown.Item
css={{
bg: '$surface_dim',
color: '$on_surface_medium',
'&:hover': { bg: '$surface_default', color: '$on_surface_high' },
p: '0',
}}
data-testid="just_leave_btn"
>
<LeaveCard
title={showStream ? 'Leave Stream' : 'Leave Session'}
subtitle={`Others will continue after you leave. You can join the ${
showStream ? 'stream' : 'session'
} again.`}
bg=""
titleColor="$on_surface_high"
icon={<ExitIcon height={24} width={24} style={{ transform: 'rotate(180deg)' }} />}
onClick={async () => await leaveRoom()}
css={{ p: '$8 $4' }}
/>
</Dropdown.Item>

<Dropdown.Item
css={{
bg: '$alert_error_dim',
color: '$alert_error_bright',
'&:hover': { bg: '$alert_error_dim', color: '$alert_error_brighter' },
p: '0',
}}
data-testid="end_room_btn"
>
<LeaveCard
title={showStream ? 'End Stream' : 'End Session'}
subtitle={`The ${
showStream ? 'stream' : 'session'
} will end for everyone. You can't undo this action.`}
bg=""
titleColor="$alert_error_brighter"
icon={<StopIcon height={24} width={24} />}
onClick={() => {
setOpen(false);
setShowEndStreamAlert(true);
<Dropdown.Item
css={{
bg: '$alert_error_dim',
color: '$alert_error_bright',
'&:hover': { bg: '$alert_error_dim', color: '$alert_error_brighter' },
p: '0',
}}
css={{ p: '$8 $4' }}
/>
</Dropdown.Item>
</Dropdown.Content>
data-testid="end_room_btn"
>
<LeaveCard
title={showStream ? 'End Stream' : 'End Session'}
subtitle={`The ${
showStream ? 'stream' : 'session'
} will end for everyone. You can't undo this action.`}
bg=""
titleColor="$alert_error_brighter"
icon={<StopIcon height={24} width={24} />}
onClick={() => {
setOpen(false);
setShowEndStreamAlert(true);
}}
css={{ p: '$8 $4' }}
/>
</Dropdown.Item>
</Dropdown.Content>
</Dropdown.Portal>
</Dropdown.Root>
</Flex>
) : (
Expand Down
13 changes: 9 additions & 4 deletions packages/roomkit-react/src/Prebuilt/components/Leave/LeaveRoom.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,13 +14,18 @@ import {
} from '@100mslive/react-sdk';
import { config as cssConfig } from '../../../Theme';
// @ts-ignore: No implicit Any
// @ts-ignore: No implicit Any
import { ToastManager } from '../Toast/ToastManager';
import { DesktopLeaveRoom } from './DesktopLeaveRoom';
import { MwebLeaveRoom } from './MwebLeaveRoom';
import { useLandscapeHLSStream, useMobileHLSStream } from '../../common/hooks';

export const LeaveRoom = ({ screenType }: { screenType: keyof ConferencingScreen }) => {
export const LeaveRoom = ({
screenType,
container,
}: {
screenType: keyof ConferencingScreen;
container?: HTMLElement;
}) => {
const isConnected = useHMSStore(selectIsConnectedToRoom);
const permissions = useHMSStore(selectPermissions);
const isMobile = useMedia(cssConfig.media.md);
Expand Down Expand Up @@ -68,8 +73,8 @@ export const LeaveRoom = ({ screenType }: { screenType: keyof ConferencingScreen
return <MwebLeaveRoom leaveRoom={leaveRoom} endRoom={endRoom} />;
}
return isMobile ? (
<MwebLeaveRoom leaveRoom={leaveRoom} endRoom={endRoom} />
<MwebLeaveRoom leaveRoom={leaveRoom} endRoom={endRoom} container={container} />
) : (
<DesktopLeaveRoom leaveRoom={leaveRoom} screenType={screenType} endRoom={endRoom} />
<DesktopLeaveRoom leaveRoom={leaveRoom} screenType={screenType} endRoom={endRoom} container={container} />
);
};
Loading

0 comments on commit c0f1a52

Please sign in to comment.