Skip to content

Commit

Permalink
Add mid debug info
Browse files Browse the repository at this point in the history
  • Loading branch information
third774 committed Sep 5, 2024
1 parent b92c6fc commit f418193
Show file tree
Hide file tree
Showing 3 changed files with 81 additions and 29 deletions.
60 changes: 49 additions & 11 deletions app/components/Participant.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { VisuallyHidden } from '@radix-ui/react-visually-hidden'
import { forwardRef, useEffect, useMemo } from 'react'
import { Flipped } from 'react-flip-toolkit'
import { of } from 'rxjs'
import { combineLatest, fromEvent, map, of, switchMap } from 'rxjs'
import { useSubscribedState } from '~/hooks/rxjsHooks'
import { useDeadPulledTrackMonitor } from '~/hooks/useDeadPulledTrackMonitor'
import { useRoomContext } from '~/hooks/useRoomContext'
Expand All @@ -26,18 +26,40 @@ import { OptionalLink } from './OptionalLink'
import { Tooltip } from './Tooltip'
import { VideoSrcObject } from './VideoSrcObject'

function useMid(track?: MediaStreamTrack) {
const { peer } = useRoomContext()
const transceivers$ = useMemo(
() =>
combineLatest([
peer.peerConnection$,
peer.peerConnection$.pipe(
switchMap((peerConnection) => fromEvent(peerConnection, 'track'))
),
]).pipe(map(([pc]) => pc.getTransceivers())),
[peer.peerConnection$]
)
const transceivers = useSubscribedState(transceivers$, [])
if (!track) return null
return transceivers.find(
(t) => t.sender.track === track || t.receiver.track === track
)?.mid
}

interface Props {
flipId: string
isScreenShare?: boolean
showDebugInfo?: boolean
user: User
audioTrack?: MediaStreamTrack
videoTrack?: MediaStreamTrack
isSelf?: boolean
pinnedId?: string
setPinnedId: (id?: string) => void
}

export const Participant = forwardRef<
HTMLDivElement,
JSX.IntrinsicElements['div'] & {
flipId: string
isScreenShare?: boolean
user: User
audioTrack?: MediaStreamTrack
videoTrack?: MediaStreamTrack
isSelf?: boolean
pinnedId?: string
setPinnedId: (id?: string) => void
}
JSX.IntrinsicElements['div'] & Props
>(
(
{
Expand All @@ -49,11 +71,13 @@ export const Participant = forwardRef<
audioTrack,
pinnedId,
setPinnedId,
showDebugInfo,
},
ref
) => {
const { data } = useUserMetadata(user.name)
const { traceLink, peer, dataSaverMode } = useRoomContext()
const peerConnection = useSubscribedState(peer.peerConnection$)

useDeadPulledTrackMonitor(
user.tracks.video,
Expand Down Expand Up @@ -90,6 +114,9 @@ export const Participant = forwardRef<

const packetLoss = useSubscribedState(packetLoss$, 0)

const audioMid = useMid(audioTrack)
const videoMid = useMid(videoTrack)

return (
<div
className="grow shrink text-base basis-[calc(var(--flex-container-width)_-_var(--gap)_*_3)]"
Expand Down Expand Up @@ -201,6 +228,17 @@ export const Participant = forwardRef<
rel="noopener noreferrer"
>
{data.displayName}
{showDebugInfo && peerConnection && (
<span className="opacity-50">
{' '}
{[
audioMid && `audio mid: ${audioMid}`,
videoMid && `video mid: ${videoMid}`,
]
.filter(Boolean)
.join(' ')}
</span>
)}
</OptionalLink>
</div>
)}
Expand Down
13 changes: 9 additions & 4 deletions app/components/PullAudioTracks.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -22,12 +22,17 @@ export const PullAudioTracks: FC<PullAudioTracksProps> = ({
<AudioStream
tracksToPull={audioTracks}
onTrackAdded={(id, track) =>
setAudioTrackMap({ ...audioTrackMap, [id]: track })
setAudioTrackMap((previous) => ({
...previous,
[id]: track,
}))
}
onTrackRemoved={(id) => {
const update = { ...audioTrackMap }
delete update[id]
setAudioTrackMap(update)
setAudioTrackMap((previous) => {
const update = { ...previous }
delete update[id]
return update
})
}}
/>
{children}
Expand Down
37 changes: 23 additions & 14 deletions app/routes/_room.$roomName.room.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -44,19 +44,8 @@ export const loader = async ({ request, context }: LoaderFunctionArgs) => {
})
}

function useGridDebugControls(
{
initialCount,
defaultEnabled,
}: {
initialCount: number
defaultEnabled: boolean
} = { initialCount: 0, defaultEnabled: false }
) {
const [enabled, setEnabled] = useState(defaultEnabled)
const [fakeUsers, setFakeUsers] = useState<string[]>(
Array.from({ length: initialCount }).map(() => nanoid())
)
function useDebugEnabled() {
const [enabled, setEnabled] = useState(false)

useEffect(() => {
const handler = (e: KeyboardEvent) => {
Expand All @@ -72,6 +61,20 @@ function useGridDebugControls(
}
}, [enabled])

return enabled
}

function useGridDebugControls({
initialCount,
enabled,
}: {
initialCount: number
enabled: boolean
}) {
const [fakeUsers, setFakeUsers] = useState<string[]>(
Array.from({ length: initialCount }).map(() => nanoid())
)

const GridDebugControls = useCallback(
() =>
enabled ? (
Expand Down Expand Up @@ -128,8 +131,9 @@ function JoinedRoom({ bugReportsEnabled }: { bugReportsEnabled: boolean }) {
room: { otherUsers, websocket, identity },
} = useRoomContext()

const debugEnabled = useDebugEnabled()
const { GridDebugControls, fakeUsers } = useGridDebugControls({
defaultEnabled: false,
enabled: debugEnabled,
initialCount: 0,
})

Expand Down Expand Up @@ -224,6 +228,7 @@ function JoinedRoom({ bugReportsEnabled }: { bugReportsEnabled: boolean }) {
audioTrack={userMedia.audioStreamTrack}
pinnedId={pinnedId}
setPinnedId={setPinnedId}
showDebugInfo={debugEnabled}
/>
)}

Expand All @@ -238,6 +243,7 @@ function JoinedRoom({ bugReportsEnabled }: { bugReportsEnabled: boolean }) {
videoTrack={userMedia.screenShareVideoTrack}
pinnedId={pinnedId}
setPinnedId={setPinnedId}
showDebugInfo={debugEnabled}
/>
)}
{actorsOnStage.map((user) => (
Expand All @@ -254,6 +260,7 @@ function JoinedRoom({ bugReportsEnabled }: { bugReportsEnabled: boolean }) {
audioTrack={audioTrack}
pinnedId={pinnedId}
setPinnedId={setPinnedId}
showDebugInfo={debugEnabled}
></Participant>
)}
</PullVideoTrack>
Expand All @@ -267,6 +274,7 @@ function JoinedRoom({ bugReportsEnabled }: { bugReportsEnabled: boolean }) {
isScreenShare
pinnedId={pinnedId}
setPinnedId={setPinnedId}
showDebugInfo={debugEnabled}
/>
)}
</PullVideoTrack>
Expand All @@ -293,6 +301,7 @@ function JoinedRoom({ bugReportsEnabled }: { bugReportsEnabled: boolean }) {
flipId={uid.toString()}
pinnedId={pinnedId}
setPinnedId={setPinnedId}
showDebugInfo={debugEnabled}
></Participant>
)}
</PullVideoTrack>
Expand Down

0 comments on commit f418193

Please sign in to comment.