Skip to content

Commit

Permalink
fix: brb and audio indicator size on tile
Browse files Browse the repository at this point in the history
  • Loading branch information
KaustubhKumar05 authored Sep 19, 2023
1 parent fcd5caa commit d8a7619
Show file tree
Hide file tree
Showing 4 changed files with 25 additions and 21 deletions.
7 changes: 7 additions & 0 deletions packages/roomkit-react/src/Prebuilt/common/utils.js
Original file line number Diff line number Diff line change
Expand Up @@ -88,3 +88,10 @@ export const formatTime = timeInSeconds => {
const hour = hours !== 0 ? `${hours < 10 ? '0' : ''}${hours}:` : '';
return `${hour}${minutes < 10 ? '0' : ''}${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
};

export const getAttributeBoxSize = (width, height) => {
if (!width || !height) {
return '';
}
return width < 180 || height < 180 ? 'small' : 'medium';
};
Original file line number Diff line number Diff line change
Expand Up @@ -230,6 +230,7 @@ export const PreviewTile = ({ name, error }: { name: string; error?: boolean })
trackId={localPeer.videoTrack}
data-testid="preview_tile"
/>

{!isVideoOn ? (
<StyledVideoTile.AvatarContainer>
<Avatar name={name} data-testid="preview_avatar_tile" />
Expand All @@ -239,8 +240,9 @@ export const PreviewTile = ({ name, error }: { name: string; error?: boolean })
) : !error ? (
<FullPageProgress />
) : null}

{showMuteIcon ? (
<StyledVideoTile.AudioIndicator size="medium">
<StyledVideoTile.AudioIndicator>
<MicOffIcon />
</StyledVideoTile.AudioIndicator>
) : (
Expand Down
13 changes: 6 additions & 7 deletions packages/roomkit-react/src/Prebuilt/components/VideoTile.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ import { Video } from '../../Video';
import { StyledVideoTile } from '../../VideoTile';
import { getVideoTileLabel } from './peerTileUtils';
import { useSetAppDataByKey, useUISettings } from './AppData/useUISettings';
import { getAttributeBoxSize } from '../common/utils';
import { APP_DATA, SESSION_STORE_KEY, UI_SETTINGS } from '../common/constants';

const Tile = ({
Expand Down Expand Up @@ -133,7 +134,7 @@ const Tile = ({
isAudioMuted ? (
<StyledVideoTile.AudioIndicator
data-testid="participant_audio_mute_icon"
size={width && height && (width < 180 || height < 180) ? 'small' : 'medium'}
size={getAttributeBoxSize(width, height)}
>
<MicOffIcon />
</StyledVideoTile.AudioIndicator>
Expand All @@ -150,7 +151,7 @@ const Tile = ({
enableSpotlightingPeer={enableSpotlightingPeer}
/>
) : null}
{!hideMetadataOnTile && <PeerMetadata peerId={peerId} />}
{!hideMetadataOnTile && <PeerMetadata peerId={peerId} height={height} width={width} />}

<TileConnection
hideLabel={hideParticipantNameOnTile}
Expand All @@ -167,8 +168,6 @@ const Tile = ({
);
};

const metaStyles = { top: '$4', left: '$4', width: '$13', height: '$13' };

const heightAnimation = value =>
keyframes({
'50%': {
Expand Down Expand Up @@ -218,20 +217,20 @@ export const AudioLevel = ({ trackId }) => {
);
};

const PeerMetadata = ({ peerId }) => {
const PeerMetadata = ({ peerId, height, width }) => {
const metaData = useHMSStore(selectPeerMetadata(peerId));
const isBRB = metaData?.isBRBOn || false;
const isHandRaised = useHMSStore(selectHasPeerHandRaised(peerId));

return (
<Fragment>
{isHandRaised ? (
<StyledVideoTile.AttributeBox css={metaStyles} data-testid="raiseHand_icon_onTile">
<StyledVideoTile.AttributeBox size={getAttributeBoxSize(width, height)} data-testid="raiseHand_icon_onTile">
<HandIcon width={24} height={24} />
</StyledVideoTile.AttributeBox>
) : null}
{isBRB ? (
<StyledVideoTile.AttributeBox css={metaStyles} data-testid="brb_icon_onTile">
<StyledVideoTile.AttributeBox size={getAttributeBoxSize(width, height)} data-testid="brb_icon_onTile">
<BrbTileIcon width={22} height={22} />
</StyledVideoTile.AttributeBox>
) : null}
Expand Down
22 changes: 9 additions & 13 deletions packages/roomkit-react/src/VideoTile/StyledVideoTile.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -56,19 +56,8 @@ const Info = styled('div', {
});

const AttributeBox = styled('div', {
position: 'absolute',
color: '$on_primary_high',
w: '$12',
h: '$12',
bg: '$secondary_dim',
r: '$round',
...flexCenter,
});

const AudioIndicator = styled('div', {
position: 'absolute',
top: '$4',
right: '$4',
color: '$on_primary_high',
bg: '$secondary_dim',
borderRadius: '$round',
Expand All @@ -91,12 +80,19 @@ const AudioIndicator = styled('div', {
height: '$13',
},
},
position: {
left: { left: '$4' },
right: { right: '$4' },
},
},
defaultVariants: {
size: 'medium',
position: 'left',
},
});

const AudioIndicator = styled(AttributeBox, { defaultVariants: { position: 'right' } });

const FullScreenButton = styled('button', {
width: '2.25rem',
height: '2.25rem',
Expand Down Expand Up @@ -136,9 +132,9 @@ interface VideoTileType {
Container: typeof Container;
Overlay: typeof Overlay;
Info: typeof Info;
AudioIndicator: typeof AudioIndicator;
AvatarContainer: typeof AvatarContainer;
AttributeBox: typeof AttributeBox;
AudioIndicator: typeof AudioIndicator;
FullScreenButton: typeof FullScreenButton;
}

Expand All @@ -147,8 +143,8 @@ export const StyledVideoTile: VideoTileType = {
Container,
Overlay,
Info,
AudioIndicator,
AvatarContainer,
AttributeBox,
AudioIndicator,
FullScreenButton,
};

0 comments on commit d8a7619

Please sign in to comment.