fix: show empty screen

dyte-io · Jan 23, 2024 · f004e21 · f004e21
1 parent 6d2ae91
commit f004e21
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 2 deletions.
diff --git a/samples/active-speaker-ui/package.json b/samples/active-speaker-ui/package.json
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@dytesdk/react-ui-kit": "^1.62.0",
-    "@dytesdk/react-web-core": "^1.35.16",
+    "@dytesdk/react-web-core": "^1.35.17",
     "clsx": "^2.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

diff --git a/samples/active-speaker-ui/src/components/MainArea.tsx b/samples/active-speaker-ui/src/components/MainArea.tsx
@@ -243,14 +243,38 @@ export default function MainArea() {
 
   const setActiveMode = useMeetingStore((s) => s.setIsActiveSpeakerMode);
   const isMobile = useMeetingStore((s) => s.isMobile);
+  const isHost = meeting.self.presetName === 'webinar_presenter';
+  const isEmptyStage = participants.length === 0;
 
   useEffect(() => {
     setActiveMode(isActiveView);
   }, [isActiveView]);
 
   return (
     <div className="flex flex-col w-full h-full max-w-full p-2">
-      {isActiveView ? (
+      {isEmptyStage ? (
+        <div className="flex box-border h-full content-center items-center justify-center text-center">
+            <div className="center">
+              {isHost && (
+                <div className="flex flex-col items-center">
+                  <p className="text-text-lg bg-background-800 text-text-1000 rounded-lg px-8 py-4">
+                    The stage is empty
+                  </p>
+                  <span className="text-text-md my-4">
+                    You are off stage.
+                  </span>
+                </div>
+              )}
+              {!isHost && (
+                <div className="flex flex-col items-center">
+                  <p className="text-text-lg bg-background-800 text-text-1000 rounded-lg px-8 py-4">
+                    Waiting for the host to join
+                  </p>
+                </div>
+              )}
+            </div>
+          </div>
+      ): isActiveView ? (
         <ActiveSpeakerView
           screenshares={screenshares}
           plugins={activePlugins}