{screenshares.map((participant) => (
))}
@@ -157,7 +198,7 @@ function ActiveSpeakerView({
{plugins.map((plugin) => (
))}
@@ -182,7 +223,7 @@ function ActiveSpeakerView({
{plugins.map((plugin) => (
+
+ {plugin.name}
+
+ closePlugin(plugin)} />
+
+
{states.activeSidebar && (
@@ -202,7 +253,7 @@ function ActiveSpeakerView({
setStates({ activeSidebar: false, sidebar: undefined });
}}
>
-
+
)}
@@ -243,7 +294,7 @@ export default function MainArea() {
const setActiveMode = useMeetingStore((s) => s.setIsActiveSpeakerMode);
const isMobile = useMeetingStore((s) => s.isMobile);
- const isHost = meeting.self.presetName === 'webinar_presenter';
+ const isHost = meeting.self.presetName === HOST_PRESET;
const isEmptyStage = participants.length === 0;
useEffect(() => {
diff --git a/samples/active-speaker-ui/src/components/Meeting.tsx b/samples/active-speaker-ui/src/components/Meeting.tsx
index 23c2d99..d054d23 100644
--- a/samples/active-speaker-ui/src/components/Meeting.tsx
+++ b/samples/active-speaker-ui/src/components/Meeting.tsx
@@ -8,6 +8,7 @@ import {
DyteNotifications,
DyteParticipantsAudio,
DyteSetupScreen,
+ DyteSpinner,
DyteWaitingScreen,
} from '@dytesdk/react-ui-kit';
import { useDyteMeeting, useDyteSelector } from '@dytesdk/react-web-core';
@@ -100,8 +101,6 @@ export default function Meeting() {
case 'joined':
children =
;
break;
- case 'disconnected':
- // TODO: show disconnected screen
default:
children =
;
break;
diff --git a/samples/active-speaker-ui/src/components/ScreenShareView.tsx b/samples/active-speaker-ui/src/components/ScreenShareView.tsx
index 4513194..6a8d50e 100644
--- a/samples/active-speaker-ui/src/components/ScreenShareView.tsx
+++ b/samples/active-speaker-ui/src/components/ScreenShareView.tsx
@@ -5,10 +5,10 @@ import {
DyteIcon,
DyteNameTag,
DyteScreenshareView,
- defaultIconPack,
} from '@dytesdk/react-ui-kit';
import { useDyteMeeting } from '@dytesdk/react-web-core';
import type { DyteParticipant, DyteSelf } from '@dytesdk/web-core';
+import { iconPack } from '../lib/const';
export default function ScreenShareView({
participant,
@@ -48,7 +48,7 @@ export default function ScreenShareView({
onClick={onMaximise}
className="absolute bottom-3 right-3"
>
-
+
)}
diff --git a/samples/active-speaker-ui/src/components/Sidebar.tsx b/samples/active-speaker-ui/src/components/Sidebar.tsx
index 1590f48..c71409a 100644
--- a/samples/active-speaker-ui/src/components/Sidebar.tsx
+++ b/samples/active-speaker-ui/src/components/Sidebar.tsx
@@ -1,3 +1,4 @@
+import HOST_PRESET from '../lib/const';
import { useMeetingStore } from '../lib/meeting-store';
import ActiveSpeaker from './ActiveSpeaker';
import Grid from './Grid';
@@ -36,7 +37,7 @@ export default function Sidebar() {
break;
}
- const isHost = meeting.self.presetName === 'webinar_presenter';
+ const isHost = meeting.self.presetName === HOST_PRESET;
if (isHost && !sidebar) {
return null;
diff --git a/samples/active-speaker-ui/src/index.css b/samples/active-speaker-ui/src/index.css
index 2550bd1..ba636b5 100644
--- a/samples/active-speaker-ui/src/index.css
+++ b/samples/active-speaker-ui/src/index.css
@@ -17,4 +17,24 @@
* {
border-color: theme(colors.zinc.700);
}
+
+ /* width */
+ ::-webkit-scrollbar {
+ width: 6px;
+ height: 6px;
+ border-radius: 10px;
+ }
+
+ /* Track */
+ ::-webkit-scrollbar-track {
+ border-radius: 10px;
+ background: theme(colors.zinc.1000);
+ }
+
+ /* Handle */
+ ::-webkit-scrollbar-thumb {
+ border-radius: 10px;
+ background: theme(colors.zinc.900);
+
+ }
}
diff --git a/samples/active-speaker-ui/src/lib/const.ts b/samples/active-speaker-ui/src/lib/const.ts
new file mode 100644
index 0000000..2bfaa5e
--- /dev/null
+++ b/samples/active-speaker-ui/src/lib/const.ts
@@ -0,0 +1,25 @@
+import { defaultIconPack } from "@dytesdk/react-ui-kit";
+import type { DytePlugin } from '@dytesdk/web-core';
+const HOST_PRESET = 'group_call_host';
+export const WHITEBOARD_ID = "ae79b269-24ca-4f8a-8112-f96084c8c19a";
+export const iconPack = {
+ ...defaultIconPack,
+ 'light': '
',
+ 'dark': '
',
+ join_stage: '
',
+}
+export const saveWhiteboard = async (whiteboardPlugin: DytePlugin | undefined) => {
+ if (!whiteboardPlugin) return;
+ await new Promise((resolve) => {
+ whiteboardPlugin.removeAllListeners('board-saved' as any);
+ whiteboardPlugin.on('board-saved' as any, (data: any) => {
+ console.log('board saved:', data);
+ resolve(true);
+ })
+ whiteboardPlugin.sendData({
+ eventName: 'save-board',
+ data: { eventName: 'save-board' }
+ })
+ });
+ }
+export default HOST_PRESET;
diff --git a/samples/active-speaker-ui/src/lib/meeting-store.ts b/samples/active-speaker-ui/src/lib/meeting-store.ts
index 9df0307..7948bae 100644
--- a/samples/active-speaker-ui/src/lib/meeting-store.ts
+++ b/samples/active-speaker-ui/src/lib/meeting-store.ts
@@ -10,6 +10,8 @@ interface Dimensions {
export interface MeetingStore {
isImmersiveMode: boolean;
+ darkMode: boolean;
+ toggleDarkMode: (val: boolean) => void;
setIsImmersiveMode: (val: boolean) => void;
toggleImmersiveMode: () => void;
@@ -30,6 +32,9 @@ export const useMeetingStore = create
((set, get) => ({
isActiveSpeakerMode: false,
setIsActiveSpeakerMode: (isActiveSpeakerMode) => set({ isActiveSpeakerMode }),
+ darkMode: true,
+ toggleDarkMode: (darkMode) => set({ darkMode }),
+
isImmersiveMode: false,
setIsImmersiveMode: (isImmersiveMode) => set({ isImmersiveMode }),
toggleImmersiveMode: () => set({ isImmersiveMode: !get().isImmersiveMode }),