From a8071b4c41b35c006fb7f3984eaeff453a2c832e Mon Sep 17 00:00:00 2001 From: Kaustubh Kumar Date: Thu, 28 Sep 2023 16:32:29 +0530 Subject: [PATCH 1/2] fix: prompt for page refresh, tab close --- apps/100ms-custom-app/src/App.jsx | 15 ++++++++++++++- .../src/assets/images/100ms_logo.svg | 2 +- .../react-sdk/src/primitives/HmsRoomProvider.ts | 7 +++---- .../src/Prebuilt/common/constants.js | 2 +- .../src/Prebuilt/components/AppData/AppData.jsx | 2 +- .../Prebuilt/components/AppData/useUISettings.js | 2 +- 6 files changed, 21 insertions(+), 9 deletions(-) diff --git a/apps/100ms-custom-app/src/App.jsx b/apps/100ms-custom-app/src/App.jsx index 42fd489094..bb769c615a 100644 --- a/apps/100ms-custom-app/src/App.jsx +++ b/apps/100ms-custom-app/src/App.jsx @@ -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]); @@ -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 ( +pa diff --git a/packages/react-sdk/src/primitives/HmsRoomProvider.ts b/packages/react-sdk/src/primitives/HmsRoomProvider.ts index 629573e641..4d5fb0a20d 100644 --- a/packages/react-sdk/src/primitives/HmsRoomProvider.ts +++ b/packages/react-sdk/src/primitives/HmsRoomProvider.ts @@ -111,11 +111,10 @@ export const HMSRoomProvider = { 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); }; } diff --git a/packages/roomkit-react/src/Prebuilt/common/constants.js b/packages/roomkit-react/src/Prebuilt/common/constants.js index ad1a903ec5..6b496c1f3f 100644 --- a/packages/roomkit-react/src/Prebuilt/common/constants.js +++ b/packages/roomkit-react/src/Prebuilt/common/constants.js @@ -44,7 +44,7 @@ export const APP_DATA = { pdfConfig: 'pdfConfig', minimiseInset: 'minimiseInset', activeScreensharePeerId: 'activeScreensharePeerId', - disableNotificiations: 'disableNotificiations', + disableNotifications: 'disableNotifications', }; export const UI_SETTINGS = { isAudioOnly: 'isAudioOnly', diff --git a/packages/roomkit-react/src/Prebuilt/components/AppData/AppData.jsx b/packages/roomkit-react/src/Prebuilt/components/AppData/AppData.jsx index d1ac7d1e6d..5580d028ff 100644 --- a/packages/roomkit-react/src/Prebuilt/components/AppData/AppData.jsx +++ b/packages/roomkit-react/src/Prebuilt/components/AppData/AppData.jsx @@ -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 }) => { diff --git a/packages/roomkit-react/src/Prebuilt/components/AppData/useUISettings.js b/packages/roomkit-react/src/Prebuilt/components/AppData/useUISettings.js index af672ba3d0..d468faeb4a 100644 --- a/packages/roomkit-react/src/Prebuilt/components/AppData/useUISettings.js +++ b/packages/roomkit-react/src/Prebuilt/components/AppData/useUISettings.js @@ -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; }; From 9c590ba31433df5f239004d4cb85538c173e1cca Mon Sep 17 00:00:00 2001 From: Kaustubh Kumar Date: Thu, 28 Sep 2023 16:33:52 +0530 Subject: [PATCH 2/2] fix: tile element dimensions --- .../components/PrebuiltTileElements.tsx | 5 ++ .../components/Preview/PreviewJoin.tsx | 15 +++--- .../src/Prebuilt/components/VideoTile.jsx | 53 +++++++------------ 3 files changed, 33 insertions(+), 40 deletions(-) create mode 100644 packages/roomkit-react/src/Prebuilt/components/PrebuiltTileElements.tsx diff --git a/packages/roomkit-react/src/Prebuilt/components/PrebuiltTileElements.tsx b/packages/roomkit-react/src/Prebuilt/components/PrebuiltTileElements.tsx new file mode 100644 index 0000000000..a0d88f0dbd --- /dev/null +++ b/packages/roomkit-react/src/Prebuilt/components/PrebuiltTileElements.tsx @@ -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' }); diff --git a/packages/roomkit-react/src/Prebuilt/components/Preview/PreviewJoin.tsx b/packages/roomkit-react/src/Prebuilt/components/Preview/PreviewJoin.tsx index f0a178954a..83f318046e 100644 --- a/packages/roomkit-react/src/Prebuilt/components/Preview/PreviewJoin.tsx +++ b/packages/roomkit-react/src/Prebuilt/components/Preview/PreviewJoin.tsx @@ -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'; @@ -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 @@ -232,7 +235,7 @@ export const PreviewTile = ({ name, error }: { name: string; error?: boolean }) {!isVideoOn ? ( - + ) : null} @@ -241,13 +244,13 @@ export const PreviewTile = ({ name, error }: { name: string; error?: boolean }) ) : null} {showMuteIcon ? ( - - - + + + ) : ( - + - + )} ); diff --git a/packages/roomkit-react/src/Prebuilt/components/VideoTile.jsx b/packages/roomkit-react/src/Prebuilt/components/VideoTile.jsx index 4024aabaf6..cbbd61b903 100644 --- a/packages/roomkit-react/src/Prebuilt/components/VideoTile.jsx +++ b/packages/roomkit-react/src/Prebuilt/components/VideoTile.jsx @@ -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, @@ -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, @@ -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 ( - - + + + ) : ( - - - + + + ) ) : null} {isMouseHovered || (isDragabble && isMobile) ? ( @@ -160,7 +145,7 @@ const Tile = ({ enableSpotlightingPeer={enableSpotlightingPeer} /> ) : null} - {!hideMetadataOnTile && } + {!hideMetadataOnTile && } { +const PeerMetadata = ({ peerId }) => { const metaData = useHMSStore(selectPeerMetadata(peerId)); const isBRB = metaData?.isBRBOn || false; const isHandRaised = useHMSStore(selectHasPeerHandRaised(peerId)); @@ -185,14 +170,14 @@ const PeerMetadata = ({ peerId, size }) => { return ( {isHandRaised ? ( - - - + + + ) : null} {isBRB ? ( - - - + + + ) : null} );