From 7d4a6852fffde4f0c8052cb76d81a2d1133262d8 Mon Sep 17 00:00:00 2001 From: hdz-666 <93115614+hdz-666@users.noreply.github.com> Date: Mon, 14 Oct 2024 17:43:11 +0530 Subject: [PATCH 1/7] fix: add new stats for nerds sheet --- .../SplitComponents/MwebOptions.tsx | 15 ++- .../src/Prebuilt/components/StatsForNerds.jsx | 98 +++++++++++++++++-- 2 files changed, 105 insertions(+), 8 deletions(-) diff --git a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx index c5e4257ff6..869d8f31d8 100644 --- a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx +++ b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx @@ -43,6 +43,8 @@ import { StopRecordingInSheet } from '../../Header/StreamActions'; // @ts-ignore: No implicit any import SettingsModal from '../../Settings/SettingsModal'; // @ts-ignore: No implicit any +import { StatsForNerds } from '../../StatsForNerds'; +// @ts-ignore: No implicit any import { ToastManager } from '../../Toast/ToastManager'; // @ts-ignore: No implicit any import { ActionTile } from '../ActionTile'; @@ -94,6 +96,7 @@ export const MwebOptions = ({ const [openModals, setOpenModals] = useState(new Set()); const [openOptionsSheet, setOpenOptionsSheet] = useState(false); const [openSettingsSheet, setOpenSettingsSheet] = useState(false); + const [openStatsForNerdsSheet, setOpenStatsForNerdsSheet] = useState(false); const [showEmojiCard, setShowEmojiCard] = useState(false); const [showRecordingOn, setShowRecordingOn] = useState(false); const toggleParticipants = useSidepaneToggle(SIDE_PANE_OPTIONS.PARTICIPANTS); @@ -269,7 +272,15 @@ export const MwebOptions = ({ Settings - + { + setOpenStatsForNerdsSheet(true); + setOpenOptionsSheet(false); + }} + > + + Stats For Nerds + {isConnected && permissions?.browserRecording ? ( + + {openModals.has(MODALS.MUTE_ALL) && ( updateState(MODALS.MUTE_ALL, value)} isMobile /> )} diff --git a/packages/roomkit-react/src/Prebuilt/components/StatsForNerds.jsx b/packages/roomkit-react/src/Prebuilt/components/StatsForNerds.jsx index 747601668b..6d48e0ef71 100644 --- a/packages/roomkit-react/src/Prebuilt/components/StatsForNerds.jsx +++ b/packages/roomkit-react/src/Prebuilt/components/StatsForNerds.jsx @@ -1,4 +1,5 @@ import React, { useEffect, useMemo, useRef, useState } from 'react'; +import { useMedia } from 'react-use'; import { match, P } from 'ts-pattern'; import { selectHMSStats, @@ -13,15 +14,20 @@ import { Dropdown } from '../../Dropdown'; import { Label } from '../../Label'; import { Box, Flex } from '../../Layout'; import { Dialog } from '../../Modal'; +import { Sheet } from '../../Sheet'; import { formatBytes } from '../../Stats'; import { Switch } from '../../Switch'; import { Text } from '../../Text'; +import { config as cssConfig } from '../../Theme'; import { DialogDropdownTrigger } from '../primitives/DropdownTrigger'; import { useSetUiSettings } from './AppData/useUISettings'; import { useDropdownSelection } from './hooks/useDropdownSelection'; import { UI_SETTINGS } from '../common/constants'; -export const StatsForNerds = ({ onOpenChange }) => { +export const StatsForNerds = ({ open, onOpenChange }) => { + const mediaQueryLg = cssConfig.media.md; + const isMobile = useMedia(mediaQueryLg); + const tracksWithLabels = useTracksWithLabel(); const statsOptions = useMemo( () => [{ id: 'local-peer', label: 'Local Peer Stats' }, ...tracksWithLabels], @@ -29,7 +35,7 @@ export const StatsForNerds = ({ onOpenChange }) => { ); const [selectedStat, setSelectedStat] = useState(statsOptions[0]); const [showStatsOnTiles, setShowStatsOnTiles] = useSetUiSettings(UI_SETTINGS.showStatsOnTiles); - const [open, setOpen] = useState(false); + const [openDropdown, setOpenDropdown] = useState(false); const ref = useRef(); const selectionBg = useDropdownSelection(); @@ -38,9 +44,87 @@ export const StatsForNerds = ({ onOpenChange }) => { setSelectedStat('local-peer'); } }, [tracksWithLabels, selectedStat]); - - return ( - + console.log({ isMobile }); + return isMobile ? ( + + + + + + + Stats For Nerds + + + + + + + + + + Show Stats on Tiles + + + {/* Select */} + + + + + + + {statsOptions.map(option => { + const isSelected = option.id === selectedStat.id && option.layer === selectedStat.layer; + return ( + { + setSelectedStat(option); + }} + css={{ + px: '$9', + bg: isSelected ? selectionBg : undefined, + c: isSelected ? '$on_primary_high' : '$on_primary_high', + }} + > + {option.label} + + ); + })} + + + + + {/* Stats */} + {selectedStat.id === 'local-peer' ? ( + + ) : ( + + )} + + + ) : ( + { - + From 2c50a1d42b9097c48023f2cb4e17a56e65343274 Mon Sep 17 00:00:00 2001 From: hdz-666 <93115614+hdz-666@users.noreply.github.com> Date: Tue, 15 Oct 2024 13:15:39 +0530 Subject: [PATCH 2/7] fix: remove console --- .../roomkit-react/src/Prebuilt/components/StatsForNerds.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/roomkit-react/src/Prebuilt/components/StatsForNerds.jsx b/packages/roomkit-react/src/Prebuilt/components/StatsForNerds.jsx index 6d48e0ef71..0390f07425 100644 --- a/packages/roomkit-react/src/Prebuilt/components/StatsForNerds.jsx +++ b/packages/roomkit-react/src/Prebuilt/components/StatsForNerds.jsx @@ -44,7 +44,7 @@ export const StatsForNerds = ({ open, onOpenChange }) => { setSelectedStat('local-peer'); } }, [tracksWithLabels, selectedStat]); - console.log({ isMobile }); + return isMobile ? ( Date: Mon, 21 Oct 2024 13:42:14 +0530 Subject: [PATCH 3/7] fix: add new changes for debug info in mweb --- .../roomkit-react/src/Prebuilt/components/StatsForNerds.jsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/roomkit-react/src/Prebuilt/components/StatsForNerds.jsx b/packages/roomkit-react/src/Prebuilt/components/StatsForNerds.jsx index 209b6095e5..c205d98483 100644 --- a/packages/roomkit-react/src/Prebuilt/components/StatsForNerds.jsx +++ b/packages/roomkit-react/src/Prebuilt/components/StatsForNerds.jsx @@ -56,6 +56,7 @@ export const StatsForNerds = ({ open, onOpenChange }) => { bg: '$surface_dim', overflowY: 'auto', px: '$4', + pb: '$4', }} > @@ -125,6 +126,9 @@ export const StatsForNerds = ({ open, onOpenChange }) => { ) : ( )} + + + ) : ( From 41ce979600dc2c0878b5caea871f2dccd373c60a Mon Sep 17 00:00:00 2001 From: hdz-666 <93115614+hdz-666@users.noreply.github.com> Date: Mon, 21 Oct 2024 14:00:52 +0530 Subject: [PATCH 4/7] fix: add new mweb changes for stats for nerds and debug info --- .../src/Prebuilt/components/StatsForNerds.jsx | 119 +++++++++--------- 1 file changed, 63 insertions(+), 56 deletions(-) diff --git a/packages/roomkit-react/src/Prebuilt/components/StatsForNerds.jsx b/packages/roomkit-react/src/Prebuilt/components/StatsForNerds.jsx index c205d98483..ccf56cba8e 100644 --- a/packages/roomkit-react/src/Prebuilt/components/StatsForNerds.jsx +++ b/packages/roomkit-react/src/Prebuilt/components/StatsForNerds.jsx @@ -54,12 +54,11 @@ export const StatsForNerds = ({ open, onOpenChange }) => { - + @@ -70,64 +69,72 @@ export const StatsForNerds = ({ open, onOpenChange }) => { - - - - Show Stats on Tiles - - - {/* Select */} - - - - - - {statsOptions.map(option => { - const isSelected = option.id === selectedStat.id && option.layer === selectedStat.layer; - return ( - { - setSelectedStat(option); - }} - css={{ - px: '$9', - bg: isSelected ? selectionBg : undefined, - c: isSelected ? '$on_primary_high' : '$on_primary_high', - }} - > - {option.label} - - ); - })} - - - - - {/* Stats */} - {selectedStat.id === 'local-peer' ? ( - - ) : ( - - )} - - + + + + Show Stats on Tiles + + + {/* Select */} + + + + + + + {statsOptions.map(option => { + const isSelected = option.id === selectedStat.id && option.layer === selectedStat.layer; + return ( + { + setSelectedStat(option); + }} + css={{ + px: '$9', + bg: isSelected ? selectionBg : undefined, + c: isSelected ? '$on_primary_high' : '$on_primary_high', + }} + > + {option.label} + + ); + })} + + + + + {/* Stats */} + {selectedStat.id === 'local-peer' ? ( + + ) : ( + + )} + + + From e2226dd0759abcf85676fc9c2af2c5303febb5d1 Mon Sep 17 00:00:00 2001 From: hdz-666 <93115614+hdz-666@users.noreply.github.com> Date: Mon, 21 Oct 2024 17:27:29 +0530 Subject: [PATCH 5/7] fix: padding and scroll css styles --- .../roomkit-react/src/Prebuilt/components/StatsForNerds.jsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/roomkit-react/src/Prebuilt/components/StatsForNerds.jsx b/packages/roomkit-react/src/Prebuilt/components/StatsForNerds.jsx index ccf56cba8e..39d50b94f7 100644 --- a/packages/roomkit-react/src/Prebuilt/components/StatsForNerds.jsx +++ b/packages/roomkit-react/src/Prebuilt/components/StatsForNerds.jsx @@ -54,11 +54,11 @@ export const StatsForNerds = ({ open, onOpenChange }) => { - + @@ -74,6 +74,7 @@ export const StatsForNerds = ({ open, onOpenChange }) => { css={{ overflowY: 'auto', maxHeight: '65vh', + px: '$4', }} > From a6312cf335d70fef6361a3977e8c32ac24b839b0 Mon Sep 17 00:00:00 2001 From: hdz-666 <93115614+hdz-666@users.noreply.github.com> Date: Tue, 22 Oct 2024 16:41:33 +0530 Subject: [PATCH 6/7] fix: add negative margin --- packages/roomkit-react/src/Prebuilt/components/StatsForNerds.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/roomkit-react/src/Prebuilt/components/StatsForNerds.jsx b/packages/roomkit-react/src/Prebuilt/components/StatsForNerds.jsx index 39d50b94f7..1f6b6c95b5 100644 --- a/packages/roomkit-react/src/Prebuilt/components/StatsForNerds.jsx +++ b/packages/roomkit-react/src/Prebuilt/components/StatsForNerds.jsx @@ -55,6 +55,7 @@ export const StatsForNerds = ({ open, onOpenChange }) => { css={{ bg: '$surface_dim', px: '$4', + mr: '-$2', pb: '$4', }} > From 43c0d01a062edacf924f0f29f6dbd6a7f78d1239 Mon Sep 17 00:00:00 2001 From: hdz-666 <93115614+hdz-666@users.noreply.github.com> Date: Tue, 22 Oct 2024 18:57:26 +0530 Subject: [PATCH 7/7] fix: padding left --- .../roomkit-react/src/Prebuilt/components/StatsForNerds.jsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/roomkit-react/src/Prebuilt/components/StatsForNerds.jsx b/packages/roomkit-react/src/Prebuilt/components/StatsForNerds.jsx index 1f6b6c95b5..989f5ab648 100644 --- a/packages/roomkit-react/src/Prebuilt/components/StatsForNerds.jsx +++ b/packages/roomkit-react/src/Prebuilt/components/StatsForNerds.jsx @@ -55,7 +55,6 @@ export const StatsForNerds = ({ open, onOpenChange }) => { css={{ bg: '$surface_dim', px: '$4', - mr: '-$2', pb: '$4', }} > @@ -73,9 +72,11 @@ export const StatsForNerds = ({ open, onOpenChange }) => {