From 67d47413ac8c0731f49979cc8a882dae237cffa7 Mon Sep 17 00:00:00 2001
From: Evan Lihou <3743825+evanlihou@users.noreply.github.com>
Date: Tue, 27 Feb 2024 15:58:07 -0500
Subject: [PATCH] Add ability to save and recall lower thirds (#57)

---
 src/assets/delete.svg                      |   1 +
 src/assets/load.svg                        |   1 +
 src/assets/save.svg                        |   1 +
 src/assets/show.svg                        |   1 +
 src/components/Manage/Options.tsx          |  18 ++-
 src/components/Manage/SavedLowerThirds.tsx | 172 +++++++++++++++++++++
 src/routes.ts                              |   2 +-
 7 files changed, 192 insertions(+), 4 deletions(-)
 create mode 100644 src/assets/delete.svg
 create mode 100644 src/assets/load.svg
 create mode 100644 src/assets/save.svg
 create mode 100644 src/assets/show.svg
 create mode 100644 src/components/Manage/SavedLowerThirds.tsx

diff --git a/src/assets/delete.svg b/src/assets/delete.svg
new file mode 100644
index 0000000..c812bb0
--- /dev/null
+++ b/src/assets/delete.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48" fill="#fff"><path d="M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm400-600H280v520h400v-520ZM360-280h80v-360h-80v360Zm160 0h80v-360h-80v360ZM280-720v520-520Z"/></svg>
\ No newline at end of file
diff --git a/src/assets/load.svg b/src/assets/load.svg
new file mode 100644
index 0000000..fbefe9a
--- /dev/null
+++ b/src/assets/load.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48" fill="#fff"><path d="M440-320v-326L336-542l-56-58 200-200 200 200-56 58-104-104v326h-80ZM240-160q-33 0-56.5-23.5T160-240v-120h80v120h480v-120h80v120q0 33-23.5 56.5T720-160H240Z"/></svg>
\ No newline at end of file
diff --git a/src/assets/save.svg b/src/assets/save.svg
new file mode 100644
index 0000000..a5d1616
--- /dev/null
+++ b/src/assets/save.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48" fill="#fff"><path d="M480-320 280-520l56-58 104 104v-326h80v326l104-104 56 58-200 200ZM240-160q-33 0-56.5-23.5T160-240v-120h80v120h480v-120h80v120q0 33-23.5 56.5T720-160H240Z"/></svg>
\ No newline at end of file
diff --git a/src/assets/show.svg b/src/assets/show.svg
new file mode 100644
index 0000000..243648e
--- /dev/null
+++ b/src/assets/show.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48" fill="#fff"><path d="M480-320q75 0 127.5-52.5T660-500q0-75-52.5-127.5T480-680q-75 0-127.5 52.5T300-500q0 75 52.5 127.5T480-320Zm0-72q-45 0-76.5-31.5T372-500q0-45 31.5-76.5T480-608q45 0 76.5 31.5T588-500q0 45-31.5 76.5T480-392Zm0 192q-146 0-266-81.5T40-500q54-137 174-218.5T480-800q146 0 266 81.5T920-500q-54 137-174 218.5T480-200Zm0-300Zm0 220q113 0 207.5-59.5T832-500q-50-101-144.5-160.5T480-720q-113 0-207.5 59.5T128-500q50 101 144.5 160.5T480-280Z"/></svg>
\ No newline at end of file
diff --git a/src/components/Manage/Options.tsx b/src/components/Manage/Options.tsx
index 7da0352..fb3e65f 100644
--- a/src/components/Manage/Options.tsx
+++ b/src/components/Manage/Options.tsx
@@ -3,14 +3,15 @@ import { route } from 'preact-router';
 import { getAuth } from 'firebase/auth';
 import styled from 'styled-components';
 import {
-  useContext, useEffect, useMemo, useRef, useState,
+  useCallback, useContext, useEffect, useMemo, useRef, useState,
 } from 'preact/hooks';
 import {
-  ref, getDatabase, onValue, DatabaseReference, set,
+  ref, getDatabase, onValue, DatabaseReference, update,
 } from 'firebase/database';
 import AppContext from '@/AppContext';
 import { CGConfig } from '@/types';
 import ErrorMessage from '../ErrorMessage';
+import SavedLowerThirds, { SavedLowerThirdRecord } from './SavedLowerThirds';
 
 const OptionsPage = styled.div`
   font-size: 18px;
@@ -170,7 +171,7 @@ const Options = () => {
       if (cgConfigDbRef.current === undefined) {
         throw new Error('DB Reference not defined');
       }
-      await set(cgConfigDbRef.current, {
+      await update(cgConfigDbRef.current, {
         pageBg: pageBg ?? null,
         showBranding: showBranding ?? null,
         showTicker: showTicker ?? null,
@@ -191,6 +192,11 @@ const Options = () => {
     }
   };
 
+  const onLoadLowerThird = useCallback((rec: SavedLowerThirdRecord) => {
+    setLowerThirdTitle(rec.title);
+    setLowerThirdSubtitle(rec.subtitle);
+  }, []);
+
   const onClickLogout = async () => {
     await getAuth().signOut();
     route('/login');
@@ -309,6 +315,12 @@ const Options = () => {
             Subtitle
             <input id="lowerThirdSubtitle" onChange={(e) => setLowerThirdSubtitle((e.target as HTMLInputElement).value)} value={lowerThirdSubtitle ?? undefined} type="text" />
           </label>
+          <SavedLowerThirds
+            lowerThirdTitle={lowerThirdTitle}
+            lowerThirdSubtitle={lowerThirdSubtitle}
+            cgConfigRef={cgConfigDbRef}
+            onLoad={onLoadLowerThird}
+          />
         </OptionsBox>
       </main>
       <footer>
diff --git a/src/components/Manage/SavedLowerThirds.tsx b/src/components/Manage/SavedLowerThirds.tsx
new file mode 100644
index 0000000..eb1a716
--- /dev/null
+++ b/src/components/Manage/SavedLowerThirds.tsx
@@ -0,0 +1,172 @@
+import { h } from 'preact';
+import {
+  MutableRef, useCallback, useMemo, useEffect, useState,
+} from 'preact/hooks';
+import styled from 'styled-components';
+import {
+  DatabaseReference, child, off, onValue, push, remove, update,
+} from 'firebase/database';
+import ShowIcon from '@/assets/show.svg';
+import LoadIcon from '@/assets/load.svg';
+import SaveIcon from '@/assets/save.svg';
+import DeleteIcon from '@/assets/delete.svg';
+import { CGConfig } from '@/types';
+
+export type SavedLowerThirdRecord = {
+  title: string | null,
+  subtitle: string | null,
+};
+
+type SavedLowerThirdsProps = {
+  lowerThirdTitle: string | null,
+  lowerThirdSubtitle: string | null,
+  cgConfigRef: MutableRef<DatabaseReference | undefined>,
+  onLoad: (record: SavedLowerThirdRecord) => void,
+};
+
+const Container = styled.div`
+  table tr>td:last-of-type {
+    width: 0.1%;
+    word-wrap: nowrap;
+  }
+
+  .buttons{
+    display: flex;
+    gap: .5em;
+    button {
+      display: block;
+      width: 100%;
+      margin-block: .5em;
+      padding: .2em;
+
+      &.destructive {
+        background-color: red;
+        border-color: red;
+      }
+
+      img {
+        height: 100%;
+      }
+
+      &:hover img {
+        filter: grayscale(1);
+      }
+    }
+  }
+`;
+
+const SavedLowerThirds = ({
+  lowerThirdTitle, lowerThirdSubtitle, cgConfigRef, onLoad,
+}: SavedLowerThirdsProps) => {
+  const savedRef = useMemo(() => (cgConfigRef.current ? child(cgConfigRef.current, 'lowerThirds') : undefined), [cgConfigRef.current]);
+  const [saved, setSaved] = useState<{ [_: string]: SavedLowerThirdRecord }>({});
+
+  useEffect(() => {
+    if (savedRef) {
+      onValue(savedRef, (snap) => {
+        setSaved(snap.val() ?? {});
+        console.log(snap.val());
+      });
+    }
+
+    return () => {
+      if (savedRef) off(savedRef);
+    };
+  }, [savedRef]);
+
+  const onClickSave = useCallback(() => {
+    (async () => {
+      if (lowerThirdTitle === null && lowerThirdSubtitle === null) return;
+      if (!savedRef) {
+        // eslint-disable-next-line no-alert
+        alert('Unable to connect to database.');
+        return;
+      }
+
+      console.log({
+        title: lowerThirdTitle,
+        subtitle: lowerThirdSubtitle,
+      });
+      await push(savedRef, {
+        title: lowerThirdTitle,
+        subtitle: lowerThirdSubtitle,
+      });
+    })();
+  }, [lowerThirdTitle, lowerThirdSubtitle, savedRef]);
+
+  const onClickLoad = useCallback((record: SavedLowerThirdRecord) => {
+    onLoad(record);
+  }, []);
+
+  const onClickShow = useCallback((rec: SavedLowerThirdRecord) => {
+    (async () => {
+      if (!cgConfigRef.current) {
+        // eslint-disable-next-line no-alert
+        alert('Unable to connect to database.');
+        return;
+      }
+
+      await update(cgConfigRef.current, {
+        lowerThirdTitle: rec.title,
+        lowerThirdSubtitle: rec.subtitle,
+      } as Partial<CGConfig>);
+    })();
+  }, [savedRef, saved]);
+
+  const onClickDelete = useCallback((key: string) => {
+    (async () => {
+      if (!savedRef) {
+        // eslint-disable-next-line no-alert
+        alert('Unable to connect to database.');
+        return;
+      }
+
+      // eslint-disable-next-line no-alert
+      if (!window.confirm(`Are you sure you want to delete '${saved[key].title}'?`)) return;
+
+      await remove(child(savedRef, key));
+    })();
+  }, [savedRef, saved]);
+
+  return (
+    <Container>
+      <div className="buttons">
+        <button
+          type="button"
+          title="Save"
+          onClick={onClickSave}
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: '1em',
+          }}
+        >
+          <img src={SaveIcon} alt="Save" /> <span>Save</span>
+        </button>
+      </div>
+      <h3>Saved</h3>
+      <table>
+        {Object.keys(saved).length > 0 ? Object.entries(saved).map(([key, rec]) => (
+          <tr key={key}>
+            <td>
+              <div>{rec.title}</div>
+              <div style={{ marginLeft: '1em' }}>{rec.subtitle}</div>
+            </td>
+            <td>
+              <div className="buttons">
+                <button type="button" title="Load" onClick={() => onClickLoad(rec)}><img src={LoadIcon} alt="Load" /></button>
+                <button type="button" title="Immediately Show" onClick={() => onClickShow(rec)}><img src={ShowIcon} alt="Show" /></button>
+                <button type="button" className="destructive" title="Delete" onClick={() => onClickDelete(key)}>
+                  <img src={DeleteIcon} alt="Delete" />
+                </button>
+              </div>
+            </td>
+          </tr>
+        )) : <span>You don&apos;t have any saved lower thirds yet...</span>}
+      </table>
+    </Container>
+  );
+};
+
+export default SavedLowerThirds;
diff --git a/src/routes.ts b/src/routes.ts
index 22c7cfd..811e1e0 100644
--- a/src/routes.ts
+++ b/src/routes.ts
@@ -97,7 +97,7 @@ const Routes: Route<any>[] = [
     requiresLogin: true,
   },
   {
-    name: 'Audience Display',
+    name: 'Stream Overlay',
     url: '/overlay',
     linkFactory: (ctx: AppContextType) => `/overlay?key=${ctx.token}`,
     component: Overlay,