From 310ff7a28145dbfa46d8506ba16e7cea4ace2f0d Mon Sep 17 00:00:00 2001
From: SethBurkart123 <hi25S.burkart@hills.adventist.edu.au>
Date: Fri, 20 Oct 2023 07:09:38 +1100
Subject: [PATCH] added background removal

---
 interface/src/pages/Themes.tsx   | 112 +++++++++++++++++--------------
 public/backgrounds/background.js |   6 ++
 2 files changed, 67 insertions(+), 51 deletions(-)

diff --git a/interface/src/pages/Themes.tsx b/interface/src/pages/Themes.tsx
index f894a1c5..307bfcc2 100644
--- a/interface/src/pages/Themes.tsx
+++ b/interface/src/pages/Themes.tsx
@@ -88,70 +88,80 @@ const Themes: FC = () => {
     setBackgrounds(prev => prev.filter(bg => bg.id !== fileId));
   };
 
+  const selectNoBackground = (): void => {
+    setSelectedBackground(null);
+    localStorage.removeItem('selectedBackground');
+  };  
+
   useEffect(() => {
     loadBackgrounds();
   }, []);
 
   return (
   <div>
-      <button className="absolute top-0 right-0 p-2 text-lg text-blue-500" onClick={() => setIsEditMode(!isEditMode)}>
+    <button className="p-2 my-4 text-white bg-red-600 rounded" onClick={() => selectNoBackground()}>
+      No Background
+    </button>
+    <div className="relative">
+      <button className="absolute top-0 right-0 p-2 text-[0.8rem] text-blue-500" onClick={() => setIsEditMode(!isEditMode)}>
         {isEditMode ? 'Done' : 'Edit'}
       </button>
-    <h2 className="py-2 text-lg font-bold">Images</h2>
-    <div className="flex flex-wrap gap-4">
-      {/* Image uploader swatch */}
-      <div className="relative w-16 h-16 overflow-hidden transition rounded-xl bg-zinc-900">
-        <div className="flex items-center justify-center w-full h-full text-3xl font-bold text-gray-400 transition font-IconFamily hover:text-gray-500">
-          {/*  Plus icon */}
-          
+      <h2 className="pb-2 text-lg font-bold">Images</h2>
+      <div className="flex flex-wrap gap-4">
+        {/* Image uploader swatch */}
+        <div className="relative w-16 h-16 overflow-hidden transition rounded-xl bg-zinc-900">
+          <div className="flex items-center justify-center w-full h-full text-3xl font-bold text-gray-400 transition font-IconFamily hover:text-gray-500">
+            {/*  Plus icon */}
+            
+          </div>
+          <input type="file" accept='image/*, video/*' onChange={handleFileChange} className="absolute inset-0 w-full h-full opacity-0 cursor-pointer" />
         </div>
-        <input type="file" accept='image/*, video/*' onChange={handleFileChange} className="absolute inset-0 w-full h-full opacity-0 cursor-pointer" />
+        {backgrounds.filter(bg => bg.type === 'image').map(bg => (
+          <div key={bg.id}
+            onClick={() => selectBackground(bg.id)} 
+            className={`relative w-16 h-16 cursor-pointer rounded-xl transition ring ring-white ${isEditMode ? 'animate-shake' : ''} ${selectedBackground === bg.id ? 'ring-2' : 'ring-0'}`}>
+            {isEditMode && (
+              <div className="absolute top-0 right-0 z-10 flex w-6 h-6 p-2 text-white translate-x-1/2 -translate-y-1/2 bg-red-600 rounded-full place-items-center"
+                  onClick={() => deleteBackground(bg.id)}>
+                <div className="w-4 h-0.5 bg-white"></div>
+              </div>
+            )}
+            <img className="object-cover w-full h-full rounded-xl" src={bg.url} alt="swatch" />
+          </div>
+        ))}
       </div>
-      {backgrounds.filter(bg => bg.type === 'image').map(bg => (
-        <div key={bg.id}
-          onClick={() => selectBackground(bg.id)} 
-          className={`relative w-16 h-16 cursor-pointer rounded-xl transition ring ring-white ${isEditMode ? 'animate-shake' : ''} ${selectedBackground === bg.id ? 'ring-2' : 'ring-0'}`}>
-          {isEditMode && (
-            <div className="absolute top-0 right-0 z-10 flex w-6 h-6 p-2 text-white translate-x-1/2 -translate-y-1/2 bg-red-600 rounded-full place-items-center"
-                onClick={() => deleteBackground(bg.id)}>
-              <div className="w-4 h-0.5 bg-white"></div>
-            </div>
-          )}
-          <img className="object-cover w-full h-full rounded-xl" src={bg.url} alt="swatch" />
-        </div>
-      ))}
-    </div>
 
-    <h2 className="py-2 text-lg font-bold">Videos</h2>
-    <div className="flex flex-wrap gap-4">
-      {/* Video uploader swatch */}
-      <div className="relative w-16 h-16 overflow-hidden transition rounded-xl bg-zinc-900">
-        <div className="flex items-center justify-center w-full h-full text-3xl font-bold text-gray-400 transition font-IconFamily hover:text-gray-500">
-          {/*  Plus icon */}
-          
+      <h2 className="py-2 text-lg font-bold">Videos</h2>
+      <div className="flex flex-wrap gap-4">
+        {/* Video uploader swatch */}
+        <div className="relative w-16 h-16 overflow-hidden transition rounded-xl bg-zinc-900">
+          <div className="flex items-center justify-center w-full h-full text-3xl font-bold text-gray-400 transition font-IconFamily hover:text-gray-500">
+            {/*  Plus icon */}
+            
+          </div>
+          <input type="file" accept='image/*, video/*' onChange={handleFileChange} className="absolute inset-0 w-full h-full opacity-0 cursor-pointer" />
         </div>
-        <input type="file" accept='image/*, video/*' onChange={handleFileChange} className="absolute inset-0 w-full h-full opacity-0 cursor-pointer" />
+        {backgrounds.filter(bg => bg.type === 'video').map(bg => (
+          <div key={bg.id} onClick={() => selectBackground(bg.id)} className={`relative w-16 h-16 cursor-pointer rounded-xl transition ring ring-white ${isEditMode ? 'animate-shake' : ''} ${selectedBackground === bg.id ? 'ring-2' : 'ring-0'}`}>
+            {isEditMode && (
+              <div className="absolute top-0 right-0 z-10 flex w-6 h-6 p-2 text-white translate-x-1/2 -translate-y-1/2 bg-red-600 rounded-full place-items-center"
+                  onClick={() => deleteBackground(bg.id)}>
+                <div className="w-4 h-0.5 bg-white"></div>
+              </div>
+            )}
+            <video muted loop autoPlay src={bg.url} className="object-cover w-full h-full rounded-xl" />
+          </div>
+        ))}
+      </div>
+      
+      { /* Preview section */ }
+      <div className="hidden">
+        {backgrounds.filter(bg => bg.id === selectedBackground).map(bg => (
+          bg.type === 'image' ? 
+          <img key={bg.id} src={URL.createObjectURL(bg.blob)} alt="Selected Background" /> :
+          <video key={bg.id} src={URL.createObjectURL(bg.blob)} autoPlay loop muted />
+        ))}
       </div>
-      {backgrounds.filter(bg => bg.type === 'video').map(bg => (
-        <div key={bg.id} onClick={() => selectBackground(bg.id)} className={`relative w-16 h-16 cursor-pointer rounded-xl transition ring ring-white ${isEditMode ? 'animate-shake' : ''} ${selectedBackground === bg.id ? 'ring-2' : 'ring-0'}`}>
-          {isEditMode && (
-            <div className="absolute top-0 right-0 z-10 flex w-6 h-6 p-2 text-white translate-x-1/2 -translate-y-1/2 bg-red-600 rounded-full place-items-center"
-                onClick={() => deleteBackground(bg.id)}>
-              <div className="w-4 h-0.5 bg-white"></div>
-            </div>
-          )}
-          <video muted loop autoPlay src={bg.url} className="object-cover w-full h-full rounded-xl" />
-        </div>
-      ))}
-    </div>
-    
-    { /* Preview section */ }
-    <div className="hidden">
-      {backgrounds.filter(bg => bg.id === selectedBackground).map(bg => (
-        bg.type === 'image' ? 
-        <img key={bg.id} src={URL.createObjectURL(bg.blob)} alt="Selected Background" /> :
-        <video key={bg.id} src={URL.createObjectURL(bg.blob)} autoPlay loop muted />
-      ))}
     </div>
   </div>
   );
diff --git a/public/backgrounds/background.js b/public/backgrounds/background.js
index 5aabbdfd..5c3ea234 100644
--- a/public/backgrounds/background.js
+++ b/public/backgrounds/background.js
@@ -37,6 +37,12 @@ const updateBackground = async () => {
     const data = await readData();
     if (!data) {
       console.log("No data found in IndexedDB.");
+
+      const container = document.getElementById("media-container");
+      const currentMedia = container.querySelector(".current-media");
+      if (currentMedia) {
+        currentMedia.remove();
+      }
       return;
     }