Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

QA Handover PR #1995

Merged
merged 2 commits into from
Sep 28, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 14 additions & 1 deletion apps/100ms-custom-app/src/App.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ const App = () => {
const { hmsActions } = hmsPrebuiltRef.current;
hmsActions?.enableBeamSpeakerLabelsLogging?.();
hmsActions?.ignoreMessageTypes?.(['chat', 'EMOJI_REACTION']);
hmsActions?.setAppData?.('disableNotificiations', true);
hmsActions?.setAppData?.('disableNotifications', true);
}
}, [authToken, roomCode, isHeadless]);

Expand All @@ -54,6 +54,19 @@ const App = () => {
}
}, [authToken, role, roomCode, roomId, subdomain]);

// Prompt for page refresh/tab close
useEffect(() => {
const confirmLeave = e => {
e.returnValue = 'Are you sure you want to leave?';
};

window.addEventListener('beforeunload', confirmLeave);

return () => {
window.removeEventListener('beforeunload', confirmLeave);
};
}, []);

return (
<Flex
className="prebuilt-wrapper"
Expand Down
2 changes: 1 addition & 1 deletion apps/100ms-custom-app/src/assets/images/100ms_logo.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
7 changes: 3 additions & 4 deletions packages/react-sdk/src/primitives/HmsRoomProvider.ts
Original file line number Diff line number Diff line change
Expand Up @@ -111,11 +111,10 @@ export const HMSRoomProvider = <T extends HMSGenericTypes = { sessionStore: Reco

useEffect(() => {
if (isBrowser && leaveOnUnload) {
const beforeUnloadCallback = () => providerProps.actions.leave();
window.addEventListener('beforeunload', beforeUnloadCallback);

const unloadCallback = () => providerProps.actions.leave();
window.addEventListener('unload', unloadCallback);
return () => {
window.removeEventListener('beforeunload', beforeUnloadCallback);
window.removeEventListener('unload', unloadCallback);
};
}

Expand Down
2 changes: 1 addition & 1 deletion packages/roomkit-react/src/Prebuilt/common/constants.js
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ export const APP_DATA = {
pdfConfig: 'pdfConfig',
minimiseInset: 'minimiseInset',
activeScreensharePeerId: 'activeScreensharePeerId',
disableNotificiations: 'disableNotificiations',
disableNotifications: 'disableNotifications',
};
export const UI_SETTINGS = {
isAudioOnly: 'isAudioOnly',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ const initialAppData = {
[APP_DATA.authToken]: '',
[APP_DATA.minimiseInset]: false,
[APP_DATA.activeScreensharePeerId]: '',
[APP_DATA.disableNotificiations]: false,
[APP_DATA.disableNotifications]: false,
};

export const AppData = React.memo(({ appDetails, tokenEndpoint }) => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@ export const useSubscribedNotifications = notificationKey => {
};

export const useIsNotificationDisabled = () => {
const notificationPreference = useHMSStore(selectAppDataByPath(APP_DATA.disableNotificiations));
const notificationPreference = useHMSStore(selectAppDataByPath(APP_DATA.disableNotifications));
return notificationPreference;
};

Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import { styled } from '../../Theme';
import { StyledVideoTile } from '../../VideoTile';

export const PrebuiltAudioIndicator = styled(StyledVideoTile.AudioIndicator, { height: '$12', width: '$12' });
export const PrebuiltAttributeBox = styled(StyledVideoTile.AttributeBox, { height: '$12', width: '$12' });
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,9 @@ import {
useParticipants,
usePreviewJoin,
useRecordingStreaming,
// @ts-ignore: No implicit Any
} from '@100mslive/react-sdk';
// @ts-ignore: No implicit Any
import { MicOffIcon, SettingsIcon } from '@100mslive/react-icons';
import { Avatar, Box, config as cssConfig, Flex, flexCenter, styled, StyledVideoTile, Text, Video } from '../../..';
import { AudioLevel } from '../../../AudioLevel';
Expand All @@ -29,6 +31,7 @@ import TileConnection from '../Connection/TileConnection';
import FullPageProgress from '../FullPageProgress';
// @ts-ignore: No implicit Any
import { Logo } from '../Header/HeaderComponents';
import { PrebuiltAudioIndicator } from '../PrebuiltTileElements';
// @ts-ignore: No implicit Any
import SettingsModal from '../Settings/SettingsModal';
// @ts-ignore: No implicit Any
Expand Down Expand Up @@ -232,7 +235,7 @@ export const PreviewTile = ({ name, error }: { name: string; error?: boolean })

{!isVideoOn ? (
<StyledVideoTile.AvatarContainer>
<Avatar name={name} data-testid="preview_avatar_tile" />
<Avatar name={name} data-testid="preview_avatar_tile" size="medium" />
</StyledVideoTile.AvatarContainer>
) : null}
</>
Expand All @@ -241,13 +244,13 @@ export const PreviewTile = ({ name, error }: { name: string; error?: boolean })
) : null}

{showMuteIcon ? (
<StyledVideoTile.AudioIndicator>
<MicOffIcon />
</StyledVideoTile.AudioIndicator>
<PrebuiltAudioIndicator>
<MicOffIcon height={16} width={16} />
</PrebuiltAudioIndicator>
) : (
<StyledVideoTile.AudioIndicator size="medium">
<PrebuiltAudioIndicator>
<AudioLevel trackId={localPeer?.audioTrack} />
</StyledVideoTile.AudioIndicator>
</PrebuiltAudioIndicator>
)}
</StyledVideoTile.Container>
);
Expand Down
53 changes: 19 additions & 34 deletions packages/roomkit-react/src/Prebuilt/components/VideoTile.jsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { Fragment, useCallback, useMemo, useRef, useState } from 'react';
import React, { Fragment, useCallback, useRef, useState } from 'react';
import { useMedia } from 'react-use';
import {
selectAudioTrackByPeerID,
Expand All @@ -22,9 +22,12 @@ import { config as cssConfig } from '../../Theme';
import { Video } from '../../Video';
import { StyledVideoTile } from '../../VideoTile';
import { getVideoTileLabel } from './peerTileUtils';
import { PrebuiltAttributeBox, PrebuiltAudioIndicator } from './PrebuiltTileElements';
import { useSetAppDataByKey, useUISettings } from './AppData/useUISettings';
import { APP_DATA, SESSION_STORE_KEY, UI_SETTINGS } from '../common/constants';

const iconDims = { height: '1rem', width: '1rem' };

const Tile = ({
peerId,
trackId,
Expand Down Expand Up @@ -74,26 +77,8 @@ const Tile = ({
const ref = useRef(null);
const calculatedHeight = ref.current?.clientHeight || '';
const calculatedWidth = ref.current?.clientWidth || '';

const isTileBigEnoughToShowStats = calculatedHeight >= 180 && calculatedWidth >= 180;

const [avatarSize, attribBoxSize] = useMemo(() => {
if (!calculatedWidth || !calculatedHeight) {
return [undefined, undefined];
}
let avatarSize = 'large';
if (calculatedWidth <= 150 || calculatedHeight <= 150) {
avatarSize = 'small';
} else if (calculatedWidth <= 300 || calculatedHeight <= 300) {
avatarSize = 'medium';
}
let attribBoxSize = 'medium';
if (calculatedWidth <= 180 || calculatedHeight <= 180) {
attribBoxSize = 'small';
}

return [avatarSize, attribBoxSize];
}, [calculatedWidth, calculatedHeight]);
const avatarSize = 'medium';

return (
<StyledVideoTile.Root
Expand Down Expand Up @@ -142,13 +127,13 @@ const Tile = ({

{!hideAudioMuteOnTile ? (
isAudioMuted ? (
<StyledVideoTile.AudioIndicator data-testid="participant_audio_mute_icon" size={attribBoxSize}>
<MicOffIcon />
</StyledVideoTile.AudioIndicator>
<PrebuiltAudioIndicator data-testid="participant_audio_mute_icon">
<MicOffIcon style={iconDims} />
</PrebuiltAudioIndicator>
) : (
<StyledVideoTile.AudioIndicator size={attribBoxSize}>
<AudioLevel trackId={audioTrack?.id} size={attribBoxSize} />
</StyledVideoTile.AudioIndicator>
<PrebuiltAudioIndicator>
<AudioLevel trackId={audioTrack?.id} />
</PrebuiltAudioIndicator>
)
) : null}
{isMouseHovered || (isDragabble && isMobile) ? (
Expand All @@ -160,7 +145,7 @@ const Tile = ({
enableSpotlightingPeer={enableSpotlightingPeer}
/>
) : null}
{!hideMetadataOnTile && <PeerMetadata peerId={peerId} size={attribBoxSize} />}
{!hideMetadataOnTile && <PeerMetadata peerId={peerId} />}

<TileConnection
hideLabel={hideParticipantNameOnTile}
Expand All @@ -177,22 +162,22 @@ const Tile = ({
);
};

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

return (
<Fragment>
{isHandRaised ? (
<StyledVideoTile.AttributeBox size={size} data-testid="raiseHand_icon_onTile">
<HandIcon width={24} height={24} />
</StyledVideoTile.AttributeBox>
<PrebuiltAttributeBox data-testid="raiseHand_icon_onTile">
<HandIcon style={iconDims} />
</PrebuiltAttributeBox>
) : null}
{isBRB ? (
<StyledVideoTile.AttributeBox size={size} data-testid="brb_icon_onTile">
<BrbTileIcon width={22} height={22} />
</StyledVideoTile.AttributeBox>
<PrebuiltAttributeBox data-testid="brb_icon_onTile">
<BrbTileIcon style={iconDims} />
</PrebuiltAttributeBox>
) : null}
</Fragment>
);
Expand Down
Loading