diff --git a/css/styles.css b/css/styles.css index 9cac9e26..1daa5726 100644 --- 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 index 9b8203d0..01c4afee 100644 --- a/index.html +++ b/index.html @@ -108,12 +108,16 @@

Click for Demo -
+

+
diff --git a/js/everything.js b/js/everything.js index d0d5568c..79af4191 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 = "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,6 +683,7 @@ $(function() { // Show Focus Button if (window.location.href.indexOf(focusId) === -1) { $("#focus-btn").show(); + $("#focus-btn").css("display", "inline"); } else { // Hide Focus Button @@ -687,6 +691,26 @@ $(function() { } }); + // 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);