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);