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 }) => {