Merge pull request #24 from dyte-io/fix/sample

fix: add webinar features to active speaker sample
dyte-io · Jan 12, 2024 · d6bad23 · d6bad23
2 parents f3aa171 + ab46472
commit d6bad23
Show file tree

Hide file tree

Showing 7 changed files with 69 additions and 14 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/samples/active-speaker-ui/README.md b/samples/active-speaker-ui/README.md
@@ -1,6 +1,6 @@
 # Active speaker UI Sample
 
-This sample showcases how you can build a UI to display only the active speaker while screenshare with Dyte's React UI Kit!
+This sample showcases how you can build a UI to display only the active speaker while screenshare in an webinar meeting with Dyte's React UI Kit!
 
 ---
 

diff --git a/samples/active-speaker-ui/index.html b/samples/active-speaker-ui/index.html
@@ -9,7 +9,7 @@
 </head>
 
 <body>
-	<div id="root"></div>
+	<div id="root" class="bg-1000"></div>
 	<script type="module" src="/src/main.tsx"></script>
 </body>
 

diff --git a/samples/active-speaker-ui/src/App.tsx b/samples/active-speaker-ui/src/App.tsx
@@ -1,12 +1,12 @@
 import Meeting from './components/Meeting';
-import { DyteDialogManager, DyteParticipantsAudio } from '@dytesdk/react-ui-kit';
+import { DyteDialogManager, DyteParticipantsAudio, DyteNotifications } from '@dytesdk/react-ui-kit';
 import { DyteProvider, useDyteClient } from '@dytesdk/react-web-core';
 import { useEffect } from 'react';
 
 export default function App() {
 	const [meeting, initMeeting] = useDyteClient();
 	const url = new URL(window.location.href);
-	let queryToken = url.searchParams.get('authToken')!;
+	const queryToken = url.searchParams.get('authToken')!;
 
 	if (!queryToken) {
 		alert('Please add authToken to url query params');
@@ -22,7 +22,7 @@ export default function App() {
 		}).then((meeting) => {
 			meeting?.join();
 		});
-	}, []);
+	}, []); // don't add dependencies to execute just once
 
 	if (!meeting)
 		return <main className="flex min-h-screen text-gray-50 items-center justify-center">Connecting...</main>;
@@ -31,6 +31,7 @@ export default function App() {
 		<DyteProvider value={meeting}>
 			<DyteParticipantsAudio meeting={meeting} />
 			<DyteDialogManager meeting={meeting} />
+			<DyteNotifications meeting={meeting} />
 			<Meeting />
 		</DyteProvider>
 	);

diff --git a/samples/active-speaker-ui/src/components/Meeting.tsx b/samples/active-speaker-ui/src/components/Meeting.tsx
@@ -1,15 +1,22 @@
-import { DyteParticipantTile, DyteScreenshareView, DyteSettingsToggle } from '@dytesdk/react-ui-kit';
+import SidebarOverlay from './SidebarOverlay';
 import {
+	defaultIconPack,
 	DyteCameraToggle,
 	DyteChat,
+	DyteControlbarButton,
 	DyteGrid,
 	DyteLeaveButton,
 	DyteMicToggle,
+	DyteParticipants,
+	DyteParticipantTile,
 	DyteScreenShareToggle,
+	DyteStageToggle,
+	DyteScreenshareView,
+	DyteSettingsToggle,
 } from '@dytesdk/react-ui-kit';
 import { useDyteMeeting, useDyteSelector } from '@dytesdk/react-web-core';
 import { useThrottle } from '@uidotdev/usehooks';
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useCallback } from 'react';
 
 const ACTIVE_SPEAKER_CHANGE_DELAY = 3000;
 
@@ -27,10 +34,23 @@ export default function Meeting() {
 		return meeting.participants.joined.toArray().find((p) => p.screenShareEnabled);
 	});
 	const lastActiveSpeaker = useDyteSelector((meeting) => meeting.participants.lastActiveSpeaker);
+	const isOnStage = useDyteSelector((meeting) => meeting.self.stageStatus === 'ON_STAGE');
+	const requestCount = useDyteSelector(
+		(meeting) =>
+			meeting.participants.joined.toArray().filter((p) => p.stageStatus === 'REQUESTED_TO_JOIN_STAGE').length +
+			meeting.participants.waitlisted.size,
+	);
+
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	const [activeSpeakerInternal, setActiveSpeaker] = useState<any>();
+	const [participantListVisible, setParticipantListVisible] = useState<boolean>(false);
+
 	const activeSpeaker = useThrottle(activeSpeakerInternal, ACTIVE_SPEAKER_CHANGE_DELAY);
 
+	const toggleParticipantList = useCallback(() => {
+		setParticipantListVisible(!participantListVisible);
+	}, [participantListVisible]);
+
 	useEffect(() => {
 		const activeParticipants = meeting.participants.active.toArray();
 
@@ -53,18 +73,37 @@ export default function Meeting() {
 					<DyteGrid meeting={meeting} />
 				)}
 				<footer className="flex justify-center">
-					<DyteScreenShareToggle meeting={meeting} />
-					<DyteMicToggle meeting={meeting} />
-					<DyteCameraToggle meeting={meeting} />
+					{isOnStage && <DyteScreenShareToggle meeting={meeting} />}
+					{isOnStage && <DyteMicToggle meeting={meeting} />}
+					{isOnStage && <DyteCameraToggle meeting={meeting} />}
+					<DyteStageToggle meeting={meeting} />
 					<DyteLeaveButton />
-					<DyteSettingsToggle />
+					{isOnStage && <DyteSettingsToggle />}
+					<div className="relative">
+						<DyteControlbarButton
+							icon={defaultIconPack.participants}
+							label="Participants"
+							onClick={toggleParticipantList}
+							className={participantListVisible ? 'text-blue-500' : ''}
+						></DyteControlbarButton>
+						{requestCount !== 0 && (
+							<div className="absolute bg-blue-500 text-white top-0 right-0 rounded-full py-1 px-2 text-xs">
+								{requestCount}
+							</div>
+						)}
+					</div>
 				</footer>
 			</section>
 			<aside className="w-80 m-4 flex flex-col gap-4">
 				{isScreenShareEnabled && (
 					<DyteParticipantTile participant={activeSpeaker} meeting={meeting} size="md" />
 				)}
-				<DyteChat meeting={meeting} className="sidebar shrink rounded-xl overflow-hidden" />
+				<div className="flex relative bg-900 shrink rounded-xl overflow-hidden h-full">
+					<DyteChat meeting={meeting} />
+					<SidebarOverlay show={participantListVisible}>
+						{participantListVisible ? <DyteParticipants meeting={meeting} /> : null}
+					</SidebarOverlay>
+				</div>
 			</aside>
 		</main>
 	);

diff --git a/samples/active-speaker-ui/src/components/SidebarOverlay.tsx b/samples/active-speaker-ui/src/components/SidebarOverlay.tsx
@@ -0,0 +1,13 @@
+import { ReactElement } from 'react';
+
+export default function SidebarOverlay({ show, children }: { show: boolean; children: ReactElement | null }) {
+	return (
+		<div
+			className={`absolute z-20 w-full h-full bg-900 py-4 duration-300 ease-out transition-all ${
+				show ? 'right-0' : '-right-full'
+			}`}
+		>
+			{children}
+		</div>
+	);
+}
diff --git a/samples/active-speaker-ui/src/index.css b/samples/active-speaker-ui/src/index.css
@@ -2,10 +2,10 @@
 @tailwind components;
 @tailwind utilities;
 
-#root {
+.bg-1000 {
 	background: rgb(var(--dyte-colors-background-1000));
 }
 
-.sidebar {
+.bg-900 {
 	background: rgb(var(--dyte-colors-background-900));
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -9,7 +9,7 @@ @@
     </head>
     <body>
-    	<div id="root"></div>
+    	<div id="root" class="bg-1000"></div>
     	<script type="module" src="/src/main.tsx"></script>
     </body>
@@ Expand Down @@