From 30e3a9c8a0f7b9fa00c3e35e22131a99a982462d Mon Sep 17 00:00:00 2001
From: naomiceron <58761246+naomiceron@users.noreply.github.com>
Date: Sun, 26 Dec 2021 11:18:00 -0700
Subject: [PATCH 1/2] community favorites button

---
 css/styles.css   | 13 ++++++-
 index.html       | 98 +++++++++++++++++++++++++++---------------------
 js/everything.js | 28 ++++++++++++--
 3 files changed, 90 insertions(+), 49 deletions(-)

diff --git a/css/styles.css b/css/styles.css
index 9cac9e26..6fea7262 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -141,12 +141,21 @@ a {
     display: block;
     margin: 0 auto;
 }
-
-#focus-btn {
+#com-fav-btn {
+    display: flex;
+    justify-content: center;
+}
+#fav-btn {
     display: block;
     margin: 0 auto;
     width: fit-content;
 }
+#focus-btn, #lofi-btn  {
+    margin-right: 5px;
+    width: fit-content;
+    text-align: center;
+    display: none;
+}
 
 #zen-video-description {
     white-space: pre-line;
diff --git a/index.html b/index.html
index 9b8203d0..24164521 100644
--- a/index.html
+++ b/index.html
@@ -30,12 +30,12 @@
     <!-- Global site tag (gtag.js) - Google Analytics -->
     <script src="https://www.googletagmanager.com/gtag/js?id=UA-62983413-1"></script>
     <script>
-      window.dataLayer = window.dataLayer || [];
-      function gtag(){dataLayer.push(arguments);}
-      gtag("js", new Date());
+        window.dataLayer = window.dataLayer || [];
+        function gtag() { dataLayer.push(arguments); }
+        gtag("js", new Date());
 
-      gtag("config", "UA-62983413-1");
-      gtag("send", "pageview");
+        gtag("config", "UA-62983413-1");
+        gtag("send", "pageview");
     </script>
 
     <script src="js/zap-common.js"></script>
@@ -110,47 +110,59 @@ <h3>
 
         <div>
             <br>
-            <button class="btn" id="focus-btn">
+            <button class="btn" id="fav-btn">
                 <i class="fa fa-headphones"></i>
-                Focus
+                Community favorites
             </button>
-        </div>
-    </div>
-    <!-- footer -->
-    <footer>
-        <!-- Twitter hashtag button: #ZenAudioPlayer -->
-        <div id="tweetButton"></div>
-        <script>!function (d, s, id) { var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? "http" : "https"; if (!d.getElementById(id)) { js = d.createElement(s); js.id = id; js.src = p + "://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs); } }(document, "script", "twitter-wjs");</script>
-        <!-- Attribution, and links -->
-        <div class="color-grey">
-            <p>Created by <a href="https://twitter.com/_Shakeel" target="_blank">@_Shakeel</a> and <a
-                    href="https://github.com/zen-audio-player/zen-audio-player.github.io/graphs/contributors"
-                    target="_blank">others.</a></p>
-            <p><a href="https://chrome.google.com/webstore/detail/zen-youtube-audio-player/jlkomkpeedajclllhhfkloddbihmcjlm"
-                    target="_blank">Get the Chrome extension</a> - (<a
-                    href="https://github.com/zen-audio-player/extension-chrome" target="_blank">source</a>)</p>
-        </div>
-
-        <br>
-
-        <!-- Sponsor links -->
-        <h3>Sponsored by:</h3>
-        <div class="sponsor">
-            <a href="https://trackjs.com/" class="sponsor-a" target="_blank">
-                <img src="img/trackjs_logo.png" alt="TrackJS Logo" class="img-40">
-            </a>
-            <div class="clear-both"></div>
-        </div>
-
-        <!-- social media icons -->
-        <div class="repo-info">
             <br>
-            <p>Source available on GitHub: <br><a href="https://github.com/zen-audio-player/zen-audio-player.github.io"
-                    class="fa fa-github" target="_blank"></a></p>
-        </div>
-    </footer>
-    <!-- Schema.org structured data -->
-    <script type="application/ld+json">
+            <div id="com-fav-btn">
+                <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>
+            </div>
+            <!-- footer -->
+            <footer>
+                <!-- Twitter hashtag button: #ZenAudioPlayer -->
+                <div id="tweetButton"></div>
+                <script>!function (d, s, id) { var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? "http" : "https"; if (!d.getElementById(id)) { js = d.createElement(s); js.id = id; js.src = p + "://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs); } }(document, "script", "twitter-wjs");</script>
+                <!-- Attribution, and links -->
+                <div class="color-grey">
+                    <p>Created by <a href="https://twitter.com/_Shakeel" target="_blank">@_Shakeel</a> and <a
+                            href="https://github.com/zen-audio-player/zen-audio-player.github.io/graphs/contributors"
+                            target="_blank">others.</a></p>
+                    <p><a href="https://chrome.google.com/webstore/detail/zen-youtube-audio-player/jlkomkpeedajclllhhfkloddbihmcjlm"
+                            target="_blank">Get the Chrome extension</a> - (<a
+                            href="https://github.com/zen-audio-player/extension-chrome" target="_blank">source</a>)</p>
+                </div>
+
+                <br>
+
+                <!-- Sponsor links -->
+                <h3>Sponsored by:</h3>
+                <div class="sponsor">
+                    <a href="https://trackjs.com/" class="sponsor-a" target="_blank">
+                        <img src="img/trackjs_logo.png" alt="TrackJS Logo" class="img-40">
+                    </a>
+                    <div class="clear-both"></div>
+                </div>
+
+                <!-- social media icons -->
+                <div class="repo-info">
+                    <br>
+                    <p>Source available on GitHub: <br><a
+                            href="https://github.com/zen-audio-player/zen-audio-player.github.io" class="fa fa-github"
+                            target="_blank"></a></p>
+                </div>
+            </footer>
+            <!-- Schema.org structured data -->
+            <script type="application/ld+json">
         {
             "@context": "http://schema.org",
             "@type": "Organization",
diff --git a/js/everything.js b/js/everything.js
index 7e7398d0..4a939368 100644
--- 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 = "5qap5aO4i9A";
 
 // Some demo video's audio, feel free to add more
 var demos = [
@@ -667,6 +669,12 @@ $(function() {
         }
     });
 
+    //Handle community favorites click
+    $("#fav-btn").click(function(event) {
+        $( "#focus-btn" ).toggle();
+        $( "#lofi-btn" ).toggle();
+    })
+
     // Handle focus link click
     $("#focus-btn").click(function(event) {
         event.preventDefault();
@@ -675,15 +683,27 @@ $(function() {
         window.location.href = makeListenURL(focusId);
     });
 
-    // Check if the current ID is the focus ID
+    // 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 community focus ID
     $(window).on("load", function() {
         // Show Focus Button
         if (window.location.href.indexOf(focusId) === -1) {
-            $("#focus-btn").show();
+            $("#fav-btn").show();
+        }
+        // Show Lofi Button
+        else if (window.location.href.indexOf(d) === -1){
+            $("#fav-btn").show();
         }
         else {
-            // Hide Focus Button
-            $("#focus-btn").hide();
+            // Hide community favorites Button
+            $("#fav-btn").hide();
         }
     });
 

From 15e7dd3533f4cc6f2256cc965a12455a74dd9d31 Mon Sep 17 00:00:00 2001
From: naomiceron <58761246+naomiceron@users.noreply.github.com>
Date: Sun, 26 Dec 2021 11:36:15 -0700
Subject: [PATCH 2/2] all tests pass

---
 css/styles.css   |  5 +++-
 index.html       | 75 ++++++++++++++++++++++++------------------------
 js/everything.js |  8 +++---
 3 files changed, 45 insertions(+), 43 deletions(-)

diff --git a/css/styles.css b/css/styles.css
index 6fea7262..45e127af 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -141,16 +141,19 @@ a {
     display: block;
     margin: 0 auto;
 }
+
 #com-fav-btn {
     display: flex;
     justify-content: center;
 }
+
 #fav-btn {
     display: block;
     margin: 0 auto;
     width: fit-content;
 }
-#focus-btn, #lofi-btn  {
+
+#focus-btn, #lofi-btn {
     margin-right: 5px;
     width: fit-content;
     text-align: center;
diff --git a/index.html b/index.html
index 24164521..38771a4c 100644
--- a/index.html
+++ b/index.html
@@ -124,45 +124,44 @@ <h3>
                     <i class="fa fa-headphones"></i>
                     Lofi
                 </button>
-                <div>
-                </div>
             </div>
-            <!-- footer -->
-            <footer>
-                <!-- Twitter hashtag button: #ZenAudioPlayer -->
-                <div id="tweetButton"></div>
-                <script>!function (d, s, id) { var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? "http" : "https"; if (!d.getElementById(id)) { js = d.createElement(s); js.id = id; js.src = p + "://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs); } }(document, "script", "twitter-wjs");</script>
-                <!-- Attribution, and links -->
-                <div class="color-grey">
-                    <p>Created by <a href="https://twitter.com/_Shakeel" target="_blank">@_Shakeel</a> and <a
-                            href="https://github.com/zen-audio-player/zen-audio-player.github.io/graphs/contributors"
-                            target="_blank">others.</a></p>
-                    <p><a href="https://chrome.google.com/webstore/detail/zen-youtube-audio-player/jlkomkpeedajclllhhfkloddbihmcjlm"
-                            target="_blank">Get the Chrome extension</a> - (<a
-                            href="https://github.com/zen-audio-player/extension-chrome" target="_blank">source</a>)</p>
-                </div>
-
-                <br>
-
-                <!-- Sponsor links -->
-                <h3>Sponsored by:</h3>
-                <div class="sponsor">
-                    <a href="https://trackjs.com/" class="sponsor-a" target="_blank">
-                        <img src="img/trackjs_logo.png" alt="TrackJS Logo" class="img-40">
-                    </a>
-                    <div class="clear-both"></div>
-                </div>
-
-                <!-- social media icons -->
-                <div class="repo-info">
-                    <br>
-                    <p>Source available on GitHub: <br><a
-                            href="https://github.com/zen-audio-player/zen-audio-player.github.io" class="fa fa-github"
-                            target="_blank"></a></p>
-                </div>
-            </footer>
-            <!-- Schema.org structured data -->
-            <script type="application/ld+json">
+        </div>
+    </div>
+    <!-- footer -->
+    <footer>
+        <!-- Twitter hashtag button: #ZenAudioPlayer -->
+        <div id="tweetButton"></div>
+        <script>!function (d, s, id) { var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? "http" : "https"; if (!d.getElementById(id)) { js = d.createElement(s); js.id = id; js.src = p + "://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs); } }(document, "script", "twitter-wjs");</script>
+        <!-- Attribution, and links -->
+        <div class="color-grey">
+            <p>Created by <a href="https://twitter.com/_Shakeel" target="_blank">@_Shakeel</a> and <a
+                    href="https://github.com/zen-audio-player/zen-audio-player.github.io/graphs/contributors"
+                    target="_blank">others.</a></p>
+            <p><a href="https://chrome.google.com/webstore/detail/zen-youtube-audio-player/jlkomkpeedajclllhhfkloddbihmcjlm"
+                    target="_blank">Get the Chrome extension</a> - (<a
+                    href="https://github.com/zen-audio-player/extension-chrome" target="_blank">source</a>)</p>
+        </div>
+
+        <br>
+
+        <!-- Sponsor links -->
+        <h3>Sponsored by:</h3>
+        <div class="sponsor">
+            <a href="https://trackjs.com/" class="sponsor-a" target="_blank">
+                <img src="img/trackjs_logo.png" alt="TrackJS Logo" class="img-40">
+            </a>
+            <div class="clear-both"></div>
+        </div>
+
+        <!-- social media icons -->
+        <div class="repo-info">
+            <br>
+            <p>Source available on GitHub: <br><a href="https://github.com/zen-audio-player/zen-audio-player.github.io"
+                    class="fa fa-github" target="_blank"></a></p>
+        </div>
+    </footer>
+    <!-- Schema.org structured data -->
+    <script type="application/ld+json">
         {
             "@context": "http://schema.org",
             "@type": "Organization",
diff --git a/js/everything.js b/js/everything.js
index 4a939368..be2184d6 100644
--- a/js/everything.js
+++ b/js/everything.js
@@ -669,11 +669,12 @@ $(function() {
         }
     });
 
-    //Handle community favorites click
+    // Handle community favorites click
     $("#fav-btn").click(function(event) {
+        event.preventDefault();
         $( "#focus-btn" ).toggle();
         $( "#lofi-btn" ).toggle();
-    })
+    });
 
     // Handle focus link click
     $("#focus-btn").click(function(event) {
@@ -698,7 +699,7 @@ $(function() {
             $("#fav-btn").show();
         }
         // Show Lofi Button
-        else if (window.location.href.indexOf(d) === -1){
+        else if (window.location.href.indexOf(lofiId) === -1) {
             $("#fav-btn").show();
         }
         else {
@@ -707,7 +708,6 @@ $(function() {
         }
     });
 
-
     // Load the player
     ZenPlayer.init(currentVideoID);