Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added Lofi button to favorites panel #427

Merged
merged 2 commits into from
Dec 26, 2023
Merged

Added Lofi button to favorites panel #427

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d841094
Added Lofi button to favorites panel
Oct 21, 2023
c95e583
Refactoring of community favorites button
Dec 25, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 11 additions & 3 deletions css/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@
border-radius: 20%;
font-size: 36px;
margin: 5px 2px;
padding: 20px 0 20px 0;

Check warning on line 38 in css/styles.css

View workflow job for this annotation

GitHub Actions / build (16.x) 

Using width with padding can sometimes make elements larger than you expect.
text-align: center;
text-decoration: none;
width: 30px;
Expand Down Expand Up @@ -75,12 +75,12 @@
display: none;
}

#audioplayer {

Check warning on line 78 in css/styles.css

View workflow job for this annotation

GitHub Actions / build (16.x) 

Don't use IDs in selectors.
display: none;
text-align: center;
}

#container {

Check warning on line 83 in css/styles.css

View workflow job for this annotation

GitHub Actions / build (16.x) 

Don't use IDs in selectors.
margin: 10px auto 0;
width: 80%;
}
Expand All @@ -99,21 +99,21 @@

@media all and (min-width: 480px) {

#container {

Check warning on line 102 in css/styles.css

View workflow job for this annotation

GitHub Actions / build (16.x) 

Don't use IDs in selectors.
max-width: 450px;
}

}

#v {

Check warning on line 108 in css/styles.css

View workflow job for this annotation

GitHub Actions / build (16.x) 

Don't use IDs in selectors.
font-size: 16px;
margin: 0 auto;
padding-left: 50px;

Check warning on line 111 in css/styles.css

View workflow job for this annotation

GitHub Actions / build (16.x) 

Using width with padding-left can sometimes make elements larger than you expect.
text-align: center;
width: 100%;
}

#v::-ms-clear {

Check warning on line 116 in css/styles.css

View workflow job for this annotation

GitHub Actions / build (16.x) 

Don't use IDs in selectors.
display: none;
}

Expand All @@ -140,12 +140,20 @@
#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 {
Expand Down
6 changes: 5 additions & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 -->
Expand Down
24 changes: 24 additions & 0 deletions js/everything.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@
gtag("send", "event", "YouTube iframe API error", verboseMessage);

// Log debug info
console.log("Verbose debug error message: ", verboseMessage);

Check warning on line 83 in js/everything.js

View workflow job for this annotation

GitHub Actions / build (16.x) 

Unexpected console statement
}
}

Expand Down Expand Up @@ -262,7 +262,7 @@
var description = "";

if (isFileProtocol()) {
console.log("Skipping video description request as we're running the site locally.");

Check warning on line 265 in js/everything.js

View workflow job for this annotation

GitHub Actions / build (16.x) 

Unexpected console statement
$("#toggleDescription").hide();
}
else {
Expand Down Expand Up @@ -327,7 +327,7 @@
function logError(jqXHR, textStatus, errorThrown, _errorMessage) {
var responseText = JSON.parse(jqXHR.error().responseText);
errorMessage.show(responseText.error.errors[0].message);
console.log(_errorMessage, errorThrown);

Check warning on line 330 in js/everything.js

View workflow job for this annotation

GitHub Actions / build (16.x) 

Unexpected console statement
}

function toggleElement(event, toggleID, buttonText) {
Expand Down Expand Up @@ -511,6 +511,8 @@

// 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 = [
Expand Down Expand Up @@ -627,6 +629,7 @@
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!");
}
});
Expand Down Expand Up @@ -680,13 +683,34 @@
// 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);
Expand Down