Merge pull request #427 from ShivaniG14/community-favorites

Added Lofi button to favorites panel
zen-audio-player · Dec 26, 2023 · e1a3fa6 · e1a3fa6
2 parents d6c013c + c95e583
commit e1a3fa6
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 4 deletions.
diff --git a/css/styles.css b/css/styles.css
@@ -140,12 +140,20 @@ a {
 #demo {
     display: block;
     margin: 0 auto;
+    margin-bottom: 15px;
+}
+
+.fav-panel {
+    display: flex;
+    justify-content: center;
 }
 
 #focus-btn {
-    display: block;
-    margin: 0 auto;
-    width: fit-content;
+    margin-right: 8px;
+}
+
+#lofi-btn {
+    margin-left: 8px;
 }
 
 #zen-video-description {

diff --git a/index.html b/index.html
@@ -108,12 +108,16 @@ <h3>
             Click for Demo
         </button>
 
-        <div>
+        <div class="fav-panel">
             <br>
             <button class="btn" id="focus-btn">
                 <i class="fa fa-headphones"></i>
                 Focus
             </button>
+            <button class="btn" id="lofi-btn">
+                <i class="fa fa-headphones"></i>
+                Lofi
+            </button>
         </div>
     </div>
     <!-- footer -->

diff --git a/js/everything.js b/js/everything.js
@@ -511,6 +511,8 @@ function wrapParseYouTubeVideoID(url) {
 
 // The focus video ID
 var focusId = "pJ5FD9_Orbg";
+// The lofi video ID
+var lofiId = "i43tkaTXtwI";
 
 // Some demo video's audio, feel free to add more
 var demos = [
@@ -627,6 +629,7 @@ $(function() {
         else {
             // Show the Focus button If there is no search
             $("#focus-btn").show();
+            $("#focus-btn").css("display", "inline");
             errorMessage.show("Try entering a YouTube video ID or URL!");
         }
     });
@@ -680,13 +683,34 @@ $(function() {
         // Show Focus Button
         if (window.location.href.indexOf(focusId) === -1) {
             $("#focus-btn").show();
+            $("#focus-btn").css("display", "inline");
         }
         else {
             // Hide Focus Button
             $("#focus-btn").hide();
         }
     });
 
+    // Handle lofi link click
+    $("#lofi-btn").click(function(event) {
+        event.preventDefault();
+        gtag("send", "event", "lofi", "clicked");
+        // Redirect to the favorite "lofi" URL
+        window.location.href = makeListenURL(lofiId);
+    });
+
+    // Check if the current ID is the lofi ID
+    $(window).on("load", function() {
+        // Show Lofi Button
+        if (window.location.href.indexOf(lofiId) === -1) {
+            $("#lofi-btn").show();
+            $("#lofi-btn").css("display", "inline");
+        }
+        else {
+            // Hide Lofi Button
+            $("#lofi-btn").hide();
+        }
+    });
 
     // Load the player
     ZenPlayer.init(currentVideoID);