experimental: full support for background photos and videos

interface/src/hooks/settingsState.ts

@@ -13,7 +13,6 @@ const useSettingsState = ({ settingsState, setSettingsState }: SettingsProps) =>
 
     // get the current settings state
     chrome.storage.local.get(function(result: MainConfig) {
-      console.log(result);
       setSettingsState({
         notificationCollector: result.notificationcollector,
         lessonAlerts: result.lessonalert,
@@ -43,7 +42,6 @@ const useSettingsState = ({ settingsState, setSettingsState }: SettingsProps) =>
   }), []);
   
   const storageChangeListener = (changes: chrome.storage.StorageChange) => {
-    console.log(settingsState);
     for (const [key, { newValue }] of Object.entries(changes)) {
       if (key === "DarkMode") {
         if (key === "DarkMode" && newValue) {

interface/src/pages/Themes.tsx

@@ -47,12 +47,15 @@ const readData = async () => {
 
 const Themes: React.FC = () => {
   const [imageSrc, setImageSrc] = useState<string | null>(null);
+  const [videoSrc, setVideoSrc] = useState<string | null>(null);
 
   const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0];
     if (!file) return;
 
-    const fileType = 'image';
+    const fileType = file.type.split('/')[0];
+    console.log(fileType);
+
     const reader = new FileReader();
 
     reader.onload = async () => {
@@ -61,11 +64,7 @@ const Themes: React.FC = () => {
       setImageSrc(dataURL as string);
     };
 
-    if (fileType === 'image') {
-      reader.readAsDataURL(file);
-    } else {
-      // Handle video file
-    }
+    reader.readAsDataURL(file);
   };
 
   useEffect(() => {
@@ -73,6 +72,8 @@ const Themes: React.FC = () => {
       const data = await readData();
       if (data?.type === 'image') {
         setImageSrc(data.data);
+      } else if (data?.type === 'video') {
+        setVideoSrc(data.data);
       }
     })();
   }, []);  
@@ -85,6 +86,7 @@ const Themes: React.FC = () => {
 
       <input type="file" onChange={handleFileChange} />
       {imageSrc && <img src={imageSrc} alt="Uploaded content" />}
+      {videoSrc && <video src={videoSrc} autoPlay loop muted />}
 
       <div>
         <h2 className="text-lg font-bold">Themes</h2>