From 06569000c4e6641d70694908384cbd05c7353e4b Mon Sep 17 00:00:00 2001
From: Jose B <jose.zdy@gmail.com>
Date: Tue, 8 Aug 2023 15:51:12 -0500
Subject: [PATCH] disconnected UI

---
 www/app/components/dashboard.js | 15 +++++++++++----
 www/app/components/record.js    |  2 +-
 www/app/page.js                 | 14 +++++++++++++-
 3 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/www/app/components/dashboard.js b/www/app/components/dashboard.js
index 9c73f6f3..f20f7427 100644
--- a/www/app/components/dashboard.js
+++ b/www/app/components/dashboard.js
@@ -1,18 +1,16 @@
-import { Mulberry32 } from "../utils.js";
 import React, { useState, useEffect } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
   faChevronRight,
   faChevronDown,
+  faLinkSlash,
 } from "@fortawesome/free-solid-svg-icons";
 
 export function Dashboard({
-  isRecording,
-  onRecord,
   transcriptionText,
   finalSummary,
   topics,
-  stream,
+  disconnected,
 }) {
   const [openIndex, setOpenIndex] = useState(null);
   const [autoscrollEnabled, setAutoscrollEnabled] = useState(true);
@@ -98,6 +96,15 @@ export function Dashboard({
         )}
       </div>
 
+      {disconnected && (
+        <div className="absolute top-0 left-0 w-full h-full bg-black opacity-50 flex justify-center items-center">
+          <div className="text-white text-2xl">
+            <FontAwesomeIcon icon={faLinkSlash} className="mr-2" />
+            Disconnected
+          </div>
+        </div>
+      )}
+
       <footer className="h-[7svh] w-full bg-gray-800 text-white text-center py-4 text-2xl">
         &nbsp;{transcriptionText}&nbsp;
       </footer>
diff --git a/www/app/components/record.js b/www/app/components/record.js
index 0ad807c0..445f7e50 100644
--- a/www/app/components/record.js
+++ b/www/app/components/record.js
@@ -186,7 +186,7 @@ export default function Recorder(props) {
         </a>
       </div>
       <div ref={waveformRef} className="w-full shadow-xl rounded-2xl"></div>
-      <div className="absolute bottom-0 right-1 text-xs text-black">
+      <div className="absolute bottom-0 right-2 text-xs text-black">
         {isRecording && (
           <div className="inline-block bg-red-500 rounded-full w-2 h-2 my-auto mr-1 animate-ping"></div>
         )}
diff --git a/www/app/page.js b/www/app/page.js
index 128d8703..56119bb1 100644
--- a/www/app/page.js
+++ b/www/app/page.js
@@ -1,5 +1,5 @@
 "use client";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import Recorder from "./components/record.js";
 import { Dashboard } from "./components/dashboard.js";
 import useWebRTC from "./components/webrtc.js";
@@ -7,6 +7,17 @@ import "../public/button.css";
 
 const App = () => {
   const [stream, setStream] = useState(null);
+  const [disconnected, setDisconnected] = useState(false);
+
+  useEffect(() => {
+    if (process.env.NEXT_PUBLIC_ENV === "development") {
+      document.onkeyup = (e) => {
+        if (e.key === "d") {
+          setDisconnected((prev) => !prev);
+        }
+      };
+    }
+  }, []);
 
   // This is where you'd send the stream and receive the data from the server.
   // transcription, summary, etc
@@ -28,6 +39,7 @@ const App = () => {
         finalSummary={serverData.finalSummary}
         topics={serverData.topics ?? []}
         stream={stream}
+        disconnected={disconnected}
       />
     </div>
   );