-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix: webinar speaker mode update (#136)
* refactor: rename component and style names * fix: hidden participants are still rendered as audio tag * refactor: wrap the calculation logic into 1 usememo
- Loading branch information
1 parent
7440c06
commit be12e7b
Showing
7 changed files
with
168 additions
and
121 deletions.
There are no files selected for viewing
74 changes: 0 additions & 74 deletions
74
app/_features/room/components/conference-speaker-layout.tsx
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
113 changes: 113 additions & 0 deletions
113
app/_features/room/components/webinar-speaker-layout.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,113 @@ | ||
| 'use client'; | ||
|
|
||
| import { useMemo } from 'react'; | ||
| import { type ParticipantStream } from '@/_features/room/contexts/participant-context'; | ||
| import { useMetadataContext } from '@/_features/room/contexts/metadata-context'; | ||
| import ConferenceScreen from '@/_features/room/components/conference-screen'; | ||
| import ConferenceScreenHidden from '@/_features/room/components/conference-screen-hidden'; | ||
| import '../styles/webinar-speaker-layout.css'; | ||
|
|
||
| export default function WebinarSpeakerLayout({ | ||
| streams, | ||
| }: { | ||
| streams: ParticipantStream[]; | ||
| }) { | ||
| const MAX_VISIBLE_PARTICIPANTS = 20; | ||
| const { moderatorClientIDs, speakerClientIDs } = useMetadataContext(); | ||
|
|
||
| const { | ||
| speakers, | ||
| visibleParticipants, | ||
| hiddenParticipants, | ||
| participantsMoreThanMax, | ||
| } = useMemo(() => { | ||
| const { speakers, participants } = streams.reduce( | ||
| (accumulator, currentStream) => { | ||
| if ( | ||
| moderatorClientIDs.includes(currentStream.clientId) || | ||
| speakerClientIDs.includes(currentStream.clientId) | ||
| ) { | ||
| return { | ||
| ...accumulator, | ||
| speakers: [...accumulator.speakers, currentStream], | ||
| }; | ||
| } else { | ||
| return { | ||
| ...accumulator, | ||
| participants: [...accumulator.participants, currentStream], | ||
| }; | ||
| } | ||
| }, | ||
| { | ||
| speakers: [] as ParticipantStream[], | ||
| participants: [] as ParticipantStream[], | ||
| } | ||
| ); | ||
|
|
||
| const participantsMoreThanMax = | ||
| participants.length > MAX_VISIBLE_PARTICIPANTS; | ||
|
|
||
| const visibleParticipants = participants.slice( | ||
| 0, | ||
| participantsMoreThanMax | ||
| ? MAX_VISIBLE_PARTICIPANTS - 1 | ||
| : MAX_VISIBLE_PARTICIPANTS | ||
| ); | ||
|
|
||
| const hiddenParticipants = participants.slice( | ||
| participantsMoreThanMax | ||
| ? MAX_VISIBLE_PARTICIPANTS - 1 | ||
| : MAX_VISIBLE_PARTICIPANTS | ||
| ); | ||
|
|
||
| return { | ||
| speakers, | ||
| visibleParticipants, | ||
| hiddenParticipants, | ||
| participantsMoreThanMax, | ||
| }; | ||
| }, [streams, moderatorClientIDs, speakerClientIDs]); | ||
|
|
||
| return ( | ||
| <div className="conference-layout speaker"> | ||
| <div className="speaker-container"> | ||
| {speakers.map((speaker) => { | ||
| return ( | ||
| <div key={`speaker-${speaker.id}`} className="relative"> | ||
| <ConferenceScreen stream={speaker} /> | ||
| </div> | ||
| ); | ||
| })} | ||
| </div> | ||
| <div className="participant-container"> | ||
| <div className="participant-grid"> | ||
| {visibleParticipants.map((stream) => { | ||
| return ( | ||
| <div | ||
| key={`visible-stream-${stream.id}`} | ||
| className="participant-item relative" | ||
| > | ||
| <ConferenceScreen stream={stream} /> | ||
| </div> | ||
| ); | ||
| })} | ||
| {participantsMoreThanMax && ( | ||
| <div className="participant-item relative"> | ||
| <div className="flex h-full w-full items-center justify-center rounded-lg bg-zinc-700/70 p-2 text-sm font-medium shadow-lg"> | ||
| More+ | ||
| </div> | ||
| {hiddenParticipants.map((stream) => { | ||
| return ( | ||
| <ConferenceScreenHidden | ||
| key={`hidden-stream-${stream.id}`} | ||
| stream={stream} | ||
| /> | ||
| ); | ||
| })} | ||
| </div> | ||
| )} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } |
File renamed without changes.