From 6f05fd8ca30c034af2eaa3902b42601edcde69dd Mon Sep 17 00:00:00 2001
From: Keep Creating Online <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Wed, 5 Feb 2025 22:29:28 -0500
Subject: [PATCH] fixed issue with sidebar not loading profile info on view
 switch and updated sidebar styling

---
 components/profile-modal.html |  2 +-
 components/sidebar.html       | 83 ++++++++++++++++++-----------------
 index.html                    | 10 +++--
 js/app.js                     | 61 +++++++++++++++++++++----
 js/sidebar.js                 | 59 +++++++++----------------
 js/viewManager.js             | 20 +++++++++
 js/webtorrent.js              |  2 +-
 7 files changed, 144 insertions(+), 93 deletions(-)

diff --git a/components/profile-modal.html b/components/profile-modal.html
index c453d32..1b9c5f9 100644
--- a/components/profile-modal.html
+++ b/components/profile-modal.html
@@ -54,7 +54,7 @@
         <div class="flex items-center space-x-4">
           <img
             id="profileModalAvatar"
-            src="assets/jpg/default-profile.jpg"
+            src="assets/svg/default-profile.svg"
             alt="Profile"
             class="w-16 h-16 object-cover rounded-full"
           />
diff --git a/components/sidebar.html b/components/sidebar.html
index 0e5c8a4..c8ec9b3 100644
--- a/components/sidebar.html
+++ b/components/sidebar.html
@@ -3,54 +3,58 @@
   class="bg-gray-900 text-white transition-transform duration-300 ease-in-out fixed top-0 left-0 w-64 h-full -translate-x-full hidden md:translate-x-0 md:block"
 >
   <div class="flex flex-col h-full">
-    <div class="flex-1 overflow-y-auto">
-      <nav class="mt-4">
-        <a
-          href="#view=most-recent-videos"
-          class="flex items-center py-2 px-4 hover:bg-gray-800"
-        >
-          <img
-            src="assets/svg/home-icon.svg"
-            alt="Home"
-            class="w-6 h-6 mr-3 flex-shrink-0"
-          />
-          <span class="sidebar-text">Home</span>
-        </a>
-        <a
-          href="#view=explore"
-          class="flex items-center py-2 px-4 hover:bg-gray-800"
-        >
-          <img
-            src="assets/svg/explore-icon.svg"
-            alt="Explore"
-            class="w-6 h-6 mr-3 flex-shrink-0"
-          />
-          <span class="sidebar-text">Explore</span>
-        </a>
-        <a
-          href="#view=subscriptions"
-          class="flex items-center py-2 px-4 hover:bg-gray-800"
-        >
-          <img
-            src="assets/svg/subscriptions-icon.svg"
-            alt="Subscriptions"
-            class="w-6 h-6 mr-3 flex-shrink-0"
-          />
-          <span class="sidebar-text">Subscriptions</span>
-        </a>
-      </nav>
+    <!-- Top Navigation Links -->
+    <div class="flex-1 overflow-y-auto px-4">
+      <div class="bg-gray-800 rounded-lg shadow-md mt-4 p-4">
+        <nav class="flex flex-col space-y-2">
+          <a
+            href="#view=most-recent-videos"
+            class="flex items-center py-2 px-4 hover:bg-gray-700 rounded font-semibold"
+          >
+            <img
+              src="assets/svg/home-icon.svg"
+              alt="Home"
+              class="w-6 h-6 mr-3 flex-shrink-0"
+            />
+            <span class="sidebar-text">Home</span>
+          </a>
+          <a
+            href="#view=explore"
+            class="flex items-center py-2 px-4 hover:bg-gray-700 rounded font-semibold"
+          >
+            <img
+              src="assets/svg/explore-icon.svg"
+              alt="Explore"
+              class="w-6 h-6 mr-3 flex-shrink-0"
+            />
+            <span class="sidebar-text">Explore</span>
+          </a>
+          <a
+            href="#view=subscriptions"
+            class="flex items-center py-2 px-4 hover:bg-gray-700 rounded font-semibold"
+          >
+            <img
+              src="assets/svg/subscriptions-icon.svg"
+              alt="Subscriptions"
+              class="w-6 h-6 mr-3 flex-shrink-0"
+            />
+            <span class="sidebar-text">Subscriptions</span>
+          </a>
+        </nav>
+      </div>
     </div>
+
+    <!-- Footer Links -->
     <div class="mt-auto">
       <hr class="border-gray-700" />
       <div class="p-4">
-        <nav class="space-y-2">
+        <nav class="space-y-2 text-sm opacity-70">
           <a
             href="about.html"
             class="flex items-center hover:bg-gray-800 px-4 py-2 rounded"
           >
             <img
               src="assets/svg/about-icon.svg"
-              target="_blank"
               alt="About"
               class="w-5 h-5 mr-3"
             />
@@ -62,7 +66,6 @@
           >
             <img
               src="assets/svg/guidelines-icon.svg"
-              target="_blank"
               alt="Guidelines"
               class="w-5 h-5 mr-3"
             />
@@ -74,7 +77,6 @@
           >
             <img
               src="assets/svg/getting-started-icon.svg"
-              target="_blank"
               alt="Getting Started"
               class="w-5 h-5 mr-3"
             />
@@ -114,7 +116,6 @@
           >
             <img
               src="assets/svg/roadmap-icon.svg"
-              target="_blank"
               alt="Roadmap"
               class="w-5 h-5 mr-3"
             />
diff --git a/index.html b/index.html
index b77a1f2..7c362ac 100644
--- a/index.html
+++ b/index.html
@@ -84,10 +84,14 @@
           <!-- Login Button -->
           <button
             id="loginButton"
-            style="background-color: #fe0032"
+            style="background-color: #1e293b"
             class="inline-flex items-center justify-center w-12 h-12 rounded-full text-white text-sm font-bold leading-none hover:bg-[#e6002c] focus:outline-none focus:ring-2 focus:ring-black focus:ring-offset-2"
           >
-            login
+            <img
+              src="assets/svg/default-profile.svg"
+              alt="Profile Icon"
+              class="w-9 h-9"
+            />
           </button>
 
           <!-- Upload Button (hidden by default) -->
@@ -107,7 +111,7 @@
             <div class="w-10 h-10 rounded-full overflow-hidden">
               <img
                 id="profileAvatar"
-                src="assets/jpg/default-profile.jpg"
+                src="assets/svg/default-profile.svg"
                 alt="Profile"
                 class="w-full h-full object-cover"
               />
diff --git a/js/app.js b/js/app.js
index eb198d3..417c357 100644
--- a/js/app.js
+++ b/js/app.js
@@ -511,12 +511,12 @@ class bitvidApp {
         { kinds: [0], authors: [pubkey], limit: 1 },
       ]);
       let displayName = "User";
-      let picture = "assets/jpg/default-profile.jpg";
+      let picture = "assets/svg/default-profile.svg";
 
       if (events.length && events[0].content) {
         const data = JSON.parse(events[0].content);
         displayName = data.name || data.display_name || "User";
-        picture = data.picture || "assets/jpg/default-profile.jpg";
+        picture = data.picture || "assets/svg/default-profile.svg";
       }
 
       // If you have a top-bar avatar (profileAvatar)
@@ -707,7 +707,14 @@ class bitvidApp {
       this.activeIntervals = [];
     }
 
-    // 2) Cleanup resources (this stops the torrent, etc.)
+    // *** EXPLICITLY CANCEL THE SERVICE WORKER STREAM ***
+    try {
+      await fetch("/webtorrent/cancel/", { mode: "no-cors" });
+    } catch (err) {
+      // Silently ignore if offline or the request fails
+    }
+
+    // 2) Cleanup resources (stops WebTorrent, etc.)
     await this.cleanup();
 
     // 3) Hide the modal
@@ -945,7 +952,7 @@ class bitvidApp {
                 <img
                   class="author-pic"
                   data-pubkey="${video.pubkey}"
-                  src="assets/jpg/default-profile.jpg"
+                  src="assets/svg/default-profile.svg"
                   alt="Placeholder"
                 />
               </div>
@@ -1011,7 +1018,7 @@ class bitvidApp {
         const data = JSON.parse(userEvents[0].content);
         const profile = {
           name: data.name || data.display_name || "Unknown",
-          picture: data.picture || "assets/jpg/default-profile.jpg",
+          picture: data.picture || "assets/svg/default-profile.svg",
         };
 
         // Store into the cache with a timestamp
@@ -1401,7 +1408,7 @@ class bitvidApp {
         video.alreadyDecrypted = true;
       }
 
-      // 5) Show the modal
+      // 5) Show the modal and set the "please stand by" poster
       this.currentVideo = video;
       this.currentMagnetUri = video.magnet;
       this.showModalWithPoster();
@@ -1464,13 +1471,49 @@ class bitvidApp {
       const cacheBustedMagnet = video.magnet + "&ts=" + Date.now();
       this.log("Starting video stream with:", cacheBustedMagnet);
 
+      // 11) Set autoplay preferences:
+      // Read user preference from localStorage (if not set, default to muted)
+      const storedUnmuted = localStorage.getItem("unmutedAutoplay");
+      const userWantsUnmuted = storedUnmuted === "true";
+      this.modalVideo.muted = !userWantsUnmuted;
+      this.log(
+        "Autoplay preference - unmuted:",
+        userWantsUnmuted,
+        "=> muted:",
+        this.modalVideo.muted
+      );
+
+      // Attach a volumechange listener to update the stored preference
+      this.modalVideo.addEventListener("volumechange", () => {
+        localStorage.setItem(
+          "unmutedAutoplay",
+          (!this.modalVideo.muted).toString()
+        );
+        this.log(
+          "Volume changed, new unmuted preference:",
+          !this.modalVideo.muted
+        );
+      });
+
+      // 12) Start torrent streaming
       const realTorrent = await torrentClient.streamVideo(
         cacheBustedMagnet,
         this.modalVideo
       );
 
-      // 11) Start intervals to update stats
-      // *** Slower stats update => 3 seconds
+      // 13) Attempt to autoplay; if unmuted autoplay fails, fall back to muted
+      this.modalVideo.play().catch((err) => {
+        this.log("Autoplay failed:", err);
+        if (!this.modalVideo.muted) {
+          this.log("Falling back to muted autoplay.");
+          this.modalVideo.muted = true;
+          this.modalVideo.play().catch((err2) => {
+            this.log("Muted autoplay also failed:", err2);
+          });
+        }
+      });
+
+      // 14) Start intervals to update torrent stats (every 3 seconds)
       const updateInterval = setInterval(() => {
         if (!document.body.contains(this.modalVideo)) {
           clearInterval(updateInterval);
@@ -1480,7 +1523,7 @@ class bitvidApp {
       }, 3000);
       this.activeIntervals.push(updateInterval);
 
-      // (Optional) Mirror small inline stats into the modal
+      // 15) (Optional) Mirror small inline stats into the modal
       const mirrorInterval = setInterval(() => {
         if (!document.body.contains(this.modalVideo)) {
           clearInterval(mirrorInterval);
diff --git a/js/sidebar.js b/js/sidebar.js
index 1b6239f..e2eacf9 100644
--- a/js/sidebar.js
+++ b/js/sidebar.js
@@ -1,46 +1,29 @@
 import { loadView } from "./viewManager.js";
+import { viewInitRegistry } from "./viewManager.js";
 
-/**
- * Wire up the sidebar links.
- * Home => loads the "most-recent-videos" partial and re-renders videos
- * Explore => loads explore.html with a "Coming Soon" message
- * Subscriptions => loads subscriptions.html with a "Coming Soon" message
- */
 export function setupSidebarNavigation() {
-  // 1) Home
-  const homeLink = document.querySelector('a[href="#view=most-recent-videos"]');
-  if (homeLink) {
-    homeLink.addEventListener("click", (e) => {
+  // Grab all primary nav links that use the "#view=..." pattern
+  const sidebarLinks = document.querySelectorAll('#sidebar a[href^="#view="]');
+  sidebarLinks.forEach((link) => {
+    link.addEventListener("click", (e) => {
       e.preventDefault();
-      loadView("views/most-recent-videos.html").then(() => {
-        // Once the partial is loaded, reassign #videoList + call loadVideos
-        if (window.app && window.app.loadVideos) {
-          window.app.videoList = document.getElementById("videoList");
-          window.app.loadVideos();
+      // For a link like "#view=most-recent-videos", parse out "most-recent-videos"
+      const href = link.getAttribute("href") || "";
+      const viewMatch = href.match(/#view=(.+)/);
+      if (!viewMatch || !viewMatch[1]) {
+        return;
+      }
+      const viewName = viewMatch[1]; // e.g. "most-recent-videos"
+      const viewUrl = `views/${viewName}.html`;
+
+      // Load the partial view
+      loadView(viewUrl).then(() => {
+        // If there's a post-load function for this view, call it
+        const initFn = viewInitRegistry[viewName];
+        if (typeof initFn === "function") {
+          initFn();
         }
       });
     });
-  }
-
-  // 2) Explore
-  const exploreLink = document.querySelector('a[href="#view=explore"]');
-  if (exploreLink) {
-    exploreLink.addEventListener("click", (e) => {
-      e.preventDefault();
-      loadView("views/explore.html");
-      // We just show the partial. No dynamic videos needed yet.
-    });
-  }
-
-  // 3) Subscriptions
-  const subscriptionsLink = document.querySelector(
-    'a[href="#view=subscriptions"]'
-  );
-  if (subscriptionsLink) {
-    subscriptionsLink.addEventListener("click", (e) => {
-      e.preventDefault();
-      loadView("views/subscriptions.html");
-      // Also "Coming Soon" in that partial for now.
-    });
-  }
+  });
 }
diff --git a/js/viewManager.js b/js/viewManager.js
index 6fc488c..6b2cddf 100644
--- a/js/viewManager.js
+++ b/js/viewManager.js
@@ -15,3 +15,23 @@ export async function loadView(viewUrl) {
       "<p class='text-center text-red-500'>Failed to load content.</p>";
   }
 }
+
+export const viewInitRegistry = {
+  "most-recent-videos": () => {
+    if (window.app && window.app.loadVideos) {
+      window.app.videoList = document.getElementById("videoList");
+      window.app.loadVideos();
+    }
+    // Force the profiles to update after the new view is in place.
+    if (window.app && window.app.forceRefreshAllProfiles) {
+      window.app.forceRefreshAllProfiles();
+    }
+  },
+  explore: () => {
+    console.log("Explore view loaded.");
+  },
+  subscriptions: () => {
+    console.log("Subscriptions view loaded.");
+  },
+  // Add additional view-specific functions here as needed.
+};
diff --git a/js/webtorrent.js b/js/webtorrent.js
index 80b96ab..0e82b2e 100644
--- a/js/webtorrent.js
+++ b/js/webtorrent.js
@@ -176,7 +176,7 @@ export class TorrentClient {
       return reject(new Error("No compatible video file found in torrent"));
     }
 
-    videoElement.muted = false;
+    videoElement.muted = true;
     videoElement.crossOrigin = "anonymous";
 
     videoElement.addEventListener("error", (e) => {