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.

Sign up for GitHub

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

feat: add connection details in stats for nerds #3305

Merged
merged 15 commits into from
Oct 8, 2024
Merged

feat: add connection details in stats for nerds #3305

Show file tree
Hide file tree
Changes from 14 commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
580d445
Release - 0.12.16 (#3116)
KaustubhKumar05 Jul 22, 2024
f185635
Release - 0.12.17
raviteja83 Aug 14, 2024
66b20cd
Release - 0.12.18
raviteja83 Aug 16, 2024
a015a71
Update README.md (#3222)
KaustubhKumar05 Sep 4, 2024
b1bdfdb
Release - 0.12.19
raviteja83 Sep 9, 2024
c094ee2
feat: apply policy settings to tracks added via addTrack
raviteja83 Sep 18, 2024
da50781
Release - 0.12.20
raviteja83 Sep 18, 2024
e2911e4
Merge branch 'dev'
raviteja83 Sep 30, 2024
c0771d5
fix: remove component
hdz-666 Oct 7, 2024
ca76f50
fix: remove console log and handle css for modal
hdz-666 Oct 7, 2024
1a51ed0
fix: change name to debug info '
hdz-666 Oct 7, 2024
a0c2bf4
fix: add new websocket variable name
hdz-666 Oct 7, 2024
8cb3c38
fix: change label text
hdz-666 Oct 7, 2024
5b4d57b
fix: remove padding
hdz-666 Oct 8, 2024
b826661
fix: remove calc rewrite
hdz-666 Oct 8, 2024
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
3 changes: 3 additions & 0 deletions packages/hms-video-store/src/IHMSActions.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ import {
TokenRequestOptions,
} from './internal';
import {
DebugInfo,
HMSChangeMultiTrackStateParams,
HMSGenericTypes,
HMSMessageID,
Expand Down Expand Up @@ -581,4 +582,6 @@ export interface IHMSActions<T extends HMSGenericTypes = { sessionStore: Record<
setPlaylistSettings(settings: HMSPlaylistSettings): void;

initDiagnostics(): HMSDiagnosticsInterface;

getDebugInfo(): DebugInfo;
}
4 changes: 4 additions & 0 deletions packages/hms-video-store/src/reactive-store/HMSSDKActions.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -845,6 +845,10 @@ export class HMSSDKActions<T extends HMSGenericTypes = { sessionStore: Record<st
}, reason);
}

getDebugInfo() {
return this.sdk.getDebugInfo();
}

private async sdkJoinWithListeners(config: sdkTypes.HMSConfig) {
await this.sdk.join(config, {
onJoin: this.onJoin.bind(this),
Expand Down
6 changes: 6 additions & 0 deletions packages/hms-video-store/src/schema/settings.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,3 +6,9 @@ export interface HMSMediaSettings {
audioOutputDeviceId?: string;
audioMode?: HMSAudioMode;
}

export interface DebugInfo {
websocketURL?: string;
enabledFlags?: string[];
initEndpoint?: string;
}
12 changes: 12 additions & 0 deletions packages/hms-video-store/src/sdk/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,7 @@ import {
} from '../notification-manager';
import { createRemotePeer } from '../notification-manager/managers/utils';
import { NotificationManager } from '../notification-manager/NotificationManager';
import { DebugInfo } from '../schema';
import { SessionStore } from '../session-store';
import { InteractivityCenter } from '../session-store/interactivity-center';
import { InitConfig, InitFlags } from '../signal/init/models';
Expand Down Expand Up @@ -279,6 +280,17 @@ export class HMSSdk implements HMSInterface {
return this.transport?.getWebrtcInternals();
}

getDebugInfo(): DebugInfo {
const websocketURL = this.transport.getWebsocketEndpoint();
const enabledFlags = Object.values(InitFlags).filter(flag => this.transport.isFlagEnabled(flag));
const initEndpoint = this.store.getConfig()?.initEndpoint;
return {
websocketURL,
enabledFlags,
initEndpoint,
};
}

getSessionStore() {
return this.sessionStore;
}
Expand Down
35 changes: 32 additions & 3 deletions packages/roomkit-react/src/Prebuilt/components/StatsForNerds.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,11 @@ import {
selectLocalPeerID,
selectPeersMap,
selectTracksMap,
useHMSActions,
useHMSStatsStore,
useHMSStore,
} from '@100mslive/react-sdk';
import { Accordion } from '../../Accordion';
import { HorizontalDivider } from '../../Divider';
import { Dropdown } from '../../Dropdown';
import { Label } from '../../Label';
Expand All @@ -27,6 +29,8 @@ export const StatsForNerds = ({ onOpenChange }) => {
() => [{ id: 'local-peer', label: 'Local Peer Stats' }, ...tracksWithLabels],
[tracksWithLabels],
);
const hmsActions = useHMSActions();
const details = hmsActions.getDebugInfo();
const [selectedStat, setSelectedStat] = useState(statsOptions[0]);
const [showStatsOnTiles, setShowStatsOnTiles] = useSetUiSettings(UI_SETTINGS.showStatsOnTiles);
const [open, setOpen] = useState(false);
Expand All @@ -46,7 +50,7 @@ export const StatsForNerds = ({ onOpenChange }) => {
<Dialog.Content
css={{
width: 'min(500px, 95%)',
maxHeight: '100%',
height: 'min(656px, 90%)',
KaustubhKumar05 marked this conversation as resolved.
Show resolved Hide resolved
overflowY: 'auto',
}}
>
Expand All @@ -70,6 +74,7 @@ export const StatsForNerds = ({ onOpenChange }) => {
</Text>
</Flex>
{/* Select */}

<Flex
direction="column"
css={{
Expand Down Expand Up @@ -119,6 +124,9 @@ export const StatsForNerds = ({ onOpenChange }) => {
) : (
<TrackStats trackID={selectedStat.id} layer={selectedStat.layer} local={selectedStat.local} />
)}
<Flex justify="start" gap={4} css={{ m: '$10 0', w: '100%' }}>
<DebugInfo details={details} />
</Flex>
</Dialog.Content>
</Dialog.Portal>
</Dialog.Root>
Expand Down Expand Up @@ -229,8 +237,29 @@ const TrackStats = ({ trackID, layer, local }) => {
);
};

const StatsRow = React.memo(({ label, value }) => (
<Box css={{ bg: '$surface_bright', w: 'calc(50% - $6)', p: '$8', r: '$3' }}>
const DebugInfo = ({ details }) => {
return (
<Accordion.Root type="single" collapsible css={{ w: '100%' }}>
<Accordion.Item value="Debug Info">
<Accordion.Header>
<Label variant="body2" css={{ c: '$on_surface_high' }}>
hdz-666 marked this conversation as resolved.
Show resolved Hide resolved
Debug Info
</Label>
</Accordion.Header>
<Accordion.Content>
<Flex css={{ flexWrap: 'wrap', mt: '$10', gap: '$10' }}>
<StatsRow css={{ w: 'calc(100%)' }} label="Websocket URL" value={details?.websocketURL} />
hdz-666 marked this conversation as resolved.
Show resolved Hide resolved
<StatsRow css={{ w: 'calc(100%)' }} label="Init Endpoint" value={details?.initEndpoint} />
<StatsRow css={{ w: 'calc(100%)' }} label="Enabled flags" value={details?.enabledFlags?.join(', ')} />
</Flex>
</Accordion.Content>
</Accordion.Item>
</Accordion.Root>
);
};

const StatsRow = React.memo(({ label, value, css }) => (
<Box css={{ bg: '$surface_bright', w: 'calc(50% - $6)', p: '$8', r: '$3', ...css }}>
<Text
variant="overline"
css={{
Expand Down
Loading