Skip to content

Commit

Permalink
Update publish-alpha (#2631)
Browse files Browse the repository at this point in the history
  • Loading branch information
@raviteja83
raviteja83 authored Mar 1, 2024
2 parents cddbc3f + 4e2ccf5 commit 4abe4bd
Show file tree
Hide file tree
Showing 4 changed files with 163 additions and 156 deletions.
251 changes: 125 additions & 126 deletions packages/roomkit-react/src/Prebuilt/components/Footer/RoleOptions.tsx
View file
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -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 (
<Dropdown.Root open={openOptions} onOpenChange={setOpenOptions}>
<Dropdown.Trigger
data-testid="role_group_options"
onClick={e => 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',
},
}}
>
<Flex>
<VerticalMenuIcon />
</Flex>
</Dropdown.Trigger>
<Dropdown.Content
onClick={e => e.stopPropagation()}
css={{ w: 'max-content', bg: '$surface_default', py: 0 }}
align="end"
>
{children}
</Dropdown.Content>
</Dropdown.Root>
);
};

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;
Expand All @@ -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;
});
Expand All @@ -60,75 +108,11 @@ const MuteUnmuteOption = ({ roleName, peerList }: { peerList: HMSPeer[]; roleNam
}
};

if (!role) {
return null;
}

return (
<>
{role.publishParams.allowed.includes('audio') && (
<>
{isAudioOnForSomePeers && permissions?.mute ? (
<Dropdown.Item css={dropdownItemCSS} onClick={() => setTrackEnabled('audio', false)}>
<MicOffIcon />
<Text variant="sm" css={optionTextCSS}>
Mute Audio for All
</Text>
</Dropdown.Item>
) : null}

{!isAudioOnForSomePeers && permissions?.unmute ? (
<Dropdown.Item css={dropdownItemCSS} onClick={() => setTrackEnabled('audio', true)}>
<MicOnIcon />
<Text variant="sm" css={optionTextCSS}>
Request to Unmute Audio for All
</Text>
</Dropdown.Item>
) : null}
</>
)}

{role.publishParams.allowed.includes('video') && (
<>
{isVideoOnForSomePeers && permissions?.mute ? (
<Dropdown.Item css={dropdownItemCSS} onClick={() => setTrackEnabled('video', false)}>
<VideoOffIcon />
<Text variant="sm" css={optionTextCSS}>
Mute Video for All
</Text>
</Dropdown.Item>
) : null}

{!isVideoOnForSomePeers && permissions?.unmute ? (
<Dropdown.Item css={dropdownItemCSS} onClick={() => setTrackEnabled('video', true)}>
<VideoOnIcon />
<Text variant="sm" css={optionTextCSS}>
Request to Unmute Video for All
</Text>
</Dropdown.Item>
) : 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) ||
Expand Down Expand Up @@ -157,60 +141,75 @@ export const RoleOptions = ({ roleName, peerList }: { roleName: string; peerList
};

return (
<Dropdown.Root open={openOptions} onOpenChange={setOpenOptions}>
<Dropdown.Trigger
data-testid="role_group_options"
onClick={e => 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',
},
}}
>
<Flex>
<VerticalMenuIcon />
</Flex>
</Dropdown.Trigger>
<Dropdown.Content
onClick={e => e.stopPropagation()}
css={{ w: 'max-content', bg: '$surface_default', py: 0 }}
align="end"
>
{canRemoveRoleFromStage && (
<Dropdown.Item
css={{ ...dropdownItemCSS, borderBottom: '1px solid $border_bright' }}
onClick={removeAllFromStage}
>
<PersonRectangleIcon />
<Text variant="sm" css={optionTextCSS}>
Remove all from Stage
</Text>
</Dropdown.Item>
)}

{canMuteOrUnmute && <MuteUnmuteOption peerList={peerList} roleName={roleName} />}

{canRemoveRoleFromRoom && (
<Dropdown.Item
css={{ ...dropdownItemCSS, borderTop: '1px solid $border_bright', color: '$alert_error_default' }}
onClick={removePeersFromRoom}
>
<RemoveUserIcon />
<Text variant="sm" css={{ ...optionTextCSS, color: 'inherit' }}>
Remove all from Room
</Text>
</Dropdown.Item>
)}
</Dropdown.Content>
</Dropdown.Root>
<DropdownWrapper>
{canRemoveRoleFromStage ? (
<Dropdown.Item
css={{ ...dropdownItemCSS, borderBottom: '1px solid $border_bright' }}
onClick={removeAllFromStage}
>
<PersonRectangleIcon />
<Text variant="sm" css={optionTextCSS}>
Remove all from Stage
</Text>
</Dropdown.Item>
) : null}

{match({ canPublishAudio, isAudioOnForSomePeers, canMute: permissions?.mute, canUnmute: permissions?.unmute })
.with({ canPublishAudio: true, isAudioOnForSomePeers: true, canMute: true }, () => {
return (
<Dropdown.Item css={dropdownItemCSS} onClick={() => setTrackEnabled('audio', false)}>
<MicOffIcon />
<Text variant="sm" css={optionTextCSS}>
Mute Audio for All
</Text>
</Dropdown.Item>
);
})
.with({ canPublishAudio: true, isAudioOnForSomePeers: false, canUnmute: true }, () => {
return (
<Dropdown.Item css={dropdownItemCSS} onClick={() => setTrackEnabled('audio', true)}>
<MicOnIcon />
<Text variant="sm" css={optionTextCSS}>
Request to Unmute Audio for All
</Text>
</Dropdown.Item>
);
})
.otherwise(() => null)}
{match({ canPublishVideo, isVideoOnForSomePeers, canMute: permissions?.mute, canUnmute: permissions?.unmute })
.with({ canPublishVideo: true, isVideoOnForSomePeers: true, canMute: true }, () => {
return (
<Dropdown.Item css={dropdownItemCSS} onClick={() => setTrackEnabled('video', false)}>
<VideoOffIcon />
<Text variant="sm" css={optionTextCSS}>
Mute Video for All
</Text>
</Dropdown.Item>
);
})
.with({ canPublishVideo: true, isVideoOnForSomePeers: false, canUnmute: true }, () => {
return (
<Dropdown.Item css={dropdownItemCSS} onClick={() => setTrackEnabled('video', true)}>
<VideoOnIcon />
<Text variant="sm" css={optionTextCSS}>
Request to Unmute Video for All
</Text>
</Dropdown.Item>
);
})
.otherwise(() => null)}

{canRemoveRoleFromRoom ? (
<Dropdown.Item
css={{ ...dropdownItemCSS, borderTop: '1px solid $border_bright', color: '$alert_error_default' }}
onClick={removePeersFromRoom}
>
<RemoveUserIcon />
<Text variant="sm" css={{ ...optionTextCSS, color: 'inherit' }}>
Remove all from Room
</Text>
</Dropdown.Item>
) : null}
</DropdownWrapper>
);
};
12 changes: 6 additions & 6 deletions packages/roomkit-react/src/Prebuilt/components/HMSVideo/VideoProgress.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<number>(0);
const [bufferProgress, setBufferProgress] = useState(0);
Expand All @@ -20,10 +20,11 @@ export const VideoProgress = ({ isDvr = true }: { isDvr: boolean }) => {
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);
Expand All @@ -48,23 +49,22 @@ export const VideoProgress = ({ isDvr = true }: { isDvr: boolean }) => {
return null;
}
return (
<Flex align="center" css={{ cursor: 'pointer', h: '$2', alignSelf: 'stretch', pointerEvents: isDvr ? '' : 'none' }}>
<Flex align="center" css={{ cursor: 'pointer', h: '$2', alignSelf: 'stretch' }}>
<Slider
id="video-actual-rest"
css={{
cursor: 'pointer',
h: '$2',
zIndex: 1,
transition: `all .2s ease .5s`,
pointerEvents: isDvr ? '' : 'none',
}}
min={0}
max={100}
step={1}
value={[videoProgress]}
showTooltip={false}
onValueChange={onProgress}
thumbStyles={{ w: '$6', h: '$6', display: isDvr ? '' : 'none' }}
thumbStyles={{ w: '$6', h: '$6' }}
/>
<Box
id="video-buffer"
Expand Down
2 changes: 1 addition & 1 deletion packages/roomkit-react/src/Prebuilt/components/Polls/common/utils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
};
Loading

0 comments on commit 4abe4bd

Please sign in to comment.