Merge pull request #27 from dyte-io/active-speaker-ui

feat: updated active-speaker-ui sample
dyte-io · Jan 17, 2024 · 62ff0fd · 62ff0fd
2 parents ccf961a + 1dbd2cd
commit 62ff0fd
Show file tree

Hide file tree

Showing 27 changed files with 826 additions and 1,170 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/samples/active-speaker-ui/.editorconfig b/samples/active-speaker-ui/.editorconfig
diff --git a/samples/active-speaker-ui/.eslintrc.cjs b/samples/active-speaker-ui/.eslintrc.cjs
diff --git a/samples/active-speaker-ui/.gitignore b/samples/active-speaker-ui/.gitignore
@@ -8,7 +8,6 @@ pnpm-debug.log*
 lerna-debug.log*
 
 node_modules
-dist
 dist-ssr
 *.local
 

diff --git a/samples/active-speaker-ui/.prettierrc b/samples/active-speaker-ui/.prettierrc
diff --git a/samples/active-speaker-ui/README.md b/samples/active-speaker-ui/README.md
@@ -1,4 +1,4 @@
-# Active speaker UI Sample
+# Active Speaker UI Sample
 
 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
@@ -1,16 +1,12 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
-
-<head>
-	<meta charset="UTF-8" />
-	<link rel="icon" type="image/svg+xml" href="/src/assets/react.svg" />
-	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-	<title>Active speaker UI Sample app</title>
-</head>
-
-<body>
-	<div id="root" class="bg-1000"></div>
-	<script type="module" src="/src/main.tsx"></script>
-</body>
-
-</html>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Active Speaker UI</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/samples/active-speaker-ui/package.json b/samples/active-speaker-ui/package.json
@@ -1,34 +1,29 @@
 {
-	"name": "active-speaker-ui-sample",
-	"private": true,
-	"version": "0.0.0",
-	"type": "module",
-	"scripts": {
-		"dev": "vite",
-		"build": "tsc && vite build",
-		"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-		"preview": "vite preview"
-	},
-	"dependencies": {
-		"@dytesdk/react-ui-kit": "^1.61.3-staging.20",
-		"@dytesdk/react-web-core": "^1.35.12",
-		"@uidotdev/usehooks": "^2.4.1",
-		"react": "^18.2.0",
-		"react-dom": "^18.2.0"
-	},
-	"devDependencies": {
-		"@types/react": "^18.2.47",
-		"@types/react-dom": "^18.2.18",
-		"@typescript-eslint/eslint-plugin": "^6.18.0",
-		"@typescript-eslint/parser": "^6.18.0",
-		"@vitejs/plugin-react-swc": "^3.5.0",
-		"autoprefixer": "^10.4.16",
-		"eslint": "^8.56.0",
-		"eslint-plugin-react-hooks": "^4.6.0",
-		"eslint-plugin-react-refresh": "^0.4.5",
-		"postcss": "^8.4.33",
-		"tailwindcss": "^3.4.1",
-		"typescript": "^5.3.3",
-		"vite": "^5.0.11"
-	}
+  "name": "active-speaker-ui",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@dytesdk/react-ui-kit": "^1.61.5-staging.1",
+    "@dytesdk/react-web-core": "^1.35.16-staging.1",
+    "clsx": "^2.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "zustand": "^4.4.7"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.24",
+    "@types/react-dom": "^18.0.8",
+    "@vitejs/plugin-react": "^2.2.0",
+    "autoprefixer": "^10.4.16",
+    "postcss": "^8.4.33",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^4.6.4",
+    "vite": "^3.2.3"
+  }
 }
diff --git a/samples/active-speaker-ui/postcss.config.js b/samples/active-speaker-ui/postcss.config.js
@@ -1,6 +1,6 @@
 export default {
-	plugins: {
-		tailwindcss: {},
-		autoprefixer: {},
-	},
-};
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/samples/active-speaker-ui/public/vite.svg b/samples/active-speaker-ui/public/vite.svg
diff --git a/samples/active-speaker-ui/src/App.tsx b/samples/active-speaker-ui/src/App.tsx
@@ -1,38 +1,41 @@
 import Meeting from './components/Meeting';
-import { DyteParticipantsAudio, DyteNotifications } from '@dytesdk/react-ui-kit';
 import { DyteProvider, useDyteClient } from '@dytesdk/react-web-core';
 import { useEffect } from 'react';
-import MeetingProvider from './components/MeetingContext';
 
-export default function App() {
-	const [meeting, initMeeting] = useDyteClient();
-	const url = new URL(window.location.href);
-	const queryToken = url.searchParams.get('authToken')!;
+function App() {
+  const [meeting, initMeeting] = useDyteClient();
 
-	if (!queryToken) {
-		alert('Please add authToken to url query params');
-	}
+  useEffect(() => {
+    const searchParams = new URLSearchParams(window.location.search);
 
-	useEffect(() => {
-		initMeeting({
-			authToken: queryToken,
-			defaults: {
-				audio: false,
-				video: false,
-			},
-		});
-	}, []); // don't add dependencies to execute just once
+    const authToken = searchParams.get('authToken');
 
-	if (!meeting)
-		return <main className="flex min-h-screen text-gray-50 items-center justify-center">Connecting...</main>;
+    if (!authToken) {
+      alert(
+        "An authToken wasn't passed, please pass an authToken in the URL query to join a meeting."
+      );
+      return;
+    }
 
-	return (
-		<DyteProvider value={meeting}>
-			<DyteParticipantsAudio meeting={meeting} />
-			<MeetingProvider>
-				<DyteNotifications meeting={meeting} />
-				<Meeting />
-			</MeetingProvider>
-		</DyteProvider>
-	);
+    initMeeting({
+      authToken,
+      defaults: {
+        audio: false,
+        video: false,
+      },
+    }).then((meeting) => {
+      Object.assign(window, { meeting });
+    });
+  }, []);
+
+  // By default this component will cover the entire viewport.
+  // To avoid that and to make it fill a parent container, pass the prop:
+  // `mode="fill"` to the component.
+  return (
+    <DyteProvider value={meeting}>
+      <Meeting />
+    </DyteProvider>
+  );
 }
+
+export default App;
diff --git a/samples/active-speaker-ui/src/assets/react.svg b/samples/active-speaker-ui/src/assets/react.svg
diff --git a/samples/active-speaker-ui/src/components/ActiveSpeaker.tsx b/samples/active-speaker-ui/src/components/ActiveSpeaker.tsx
@@ -0,0 +1,26 @@
+import { useMeetingStore } from '../lib/meeting-store';
+import { useActiveSpeaker } from '../lib/useActiveSpeaker';
+import { DyteParticipantTile } from '@dytesdk/react-ui-kit';
+import { useDyteMeeting } from '@dytesdk/react-web-core';
+import { HTMLAttributes } from 'react';
+
+export default function ActiveSpeaker(
+  props: Omit<HTMLAttributes<HTMLDyteParticipantTileElement>, 'style'>
+) {
+  const activeSpeaker = useActiveSpeaker();
+  const { meeting } = useDyteMeeting();
+  const [size, states] = useMeetingStore((s) => [s.size, s.states]);
+  const isActiveMode = useMeetingStore((s) => s.isActiveSpeakerMode);
+
+  if (!activeSpeaker || !isActiveMode) return null;
+
+  return (
+    <DyteParticipantTile
+      participant={activeSpeaker}
+      meeting={meeting}
+      size={size}
+      states={states}
+      {...props}
+    />
+  );
+}
diff --git a/samples/active-speaker-ui/src/components/Controlbar.tsx b/samples/active-speaker-ui/src/components/Controlbar.tsx
@@ -0,0 +1,80 @@
+import { useMeetingStore } from '../lib/meeting-store';
+import {
+  DyteSettingsToggle,
+  DyteScreenShareToggle,
+  DyteStageToggle,
+  DyteMicToggle,
+  DyteCameraToggle,
+  DyteLeaveButton,
+  DyteParticipantsToggle,
+  DytePollsToggle,
+  DyteChatToggle,
+  DytePluginsToggle,
+} from '@dytesdk/react-ui-kit';
+import { useDyteMeeting } from '@dytesdk/react-web-core';
+
+export default function Controlbar() {
+  const { meeting } = useDyteMeeting();
+  const size = useMeetingStore((s) => s.size);
+  const isMobile = useMeetingStore((s) => s.isMobile);
+
+  const buttonSize = size === 'lg' ? 'lg' : 'sm';
+
+  const isHost = meeting.self.presetName === 'webinar_presenter';
+
+  if (isMobile) {
+    return (
+      <>
+        <div className="flex flex-col lg:flex-row items-center">
+          {isHost && (
+            <>
+              <DyteParticipantsToggle meeting={meeting} size={buttonSize} />
+              <DytePluginsToggle meeting={meeting} size={buttonSize} />
+            </>
+          )}
+          <DyteChatToggle meeting={meeting} size={buttonSize} />
+          <DytePollsToggle meeting={meeting} size={buttonSize} />
+        </div>
+
+        <div className="flex flex-col lg:flex-row items-center justify-center">
+          <DyteMicToggle meeting={meeting} size={buttonSize} />
+          <DyteCameraToggle meeting={meeting} size={buttonSize} />
+          <DyteScreenShareToggle meeting={meeting} size={buttonSize} />
+        </div>
+
+        <div className="flex flex-col lg:flex-row items-center">
+          <DyteStageToggle meeting={meeting} size={buttonSize} />
+          <DyteLeaveButton size={buttonSize} />
+          <DyteSettingsToggle size={buttonSize} />
+        </div>
+      </>
+    );
+  }
+
+  return (
+    <>
+      <div className="flex flex-col lg:flex-row items-center">
+        <DyteSettingsToggle size={buttonSize} />
+        <DyteScreenShareToggle meeting={meeting} size={buttonSize} />
+      </div>
+
+      <div className="flex flex-col lg:flex-row items-center justify-center">
+        <DyteStageToggle meeting={meeting} size={buttonSize} />
+        <DyteMicToggle meeting={meeting} size={buttonSize} />
+        <DyteCameraToggle meeting={meeting} size={buttonSize} />
+        <DyteLeaveButton size={buttonSize} />
+      </div>
+
+      <div className="flex flex-col lg:flex-row items-center justify-end">
+        {isHost && (
+          <>
+            <DyteParticipantsToggle meeting={meeting} size={buttonSize} />
+            <DytePluginsToggle meeting={meeting} size={buttonSize} />
+          </>
+        )}
+        <DyteChatToggle meeting={meeting} size={buttonSize} />
+        <DytePollsToggle meeting={meeting} size={buttonSize} />
+      </div>
+    </>
+  );
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -8,7 +8,6 @@ pnpm-debug.log* @@
     lerna-debug.log*
     node_modules
-    dist
     dist-ssr
     *.local
@@ Expand Down @@