Skip to content

Instantly share code, notes, and snippets.

@Twanislas

Twanislas/now-playing-slider.html

Last active April 3, 2024 10:50
Show Gist options
  • Star 10 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Twanislas/8e790f247e8d975f26aca89358fe69ff to your computer and use it in GitHub Desktop.
Save Twanislas/8e790f247e8d975f26aca89358fe69ff to your computer and use it in GitHub Desktop.
Download ZIP
Simple notification style slider overlay pulling song info from local https://github.com/ytmdesktop API. For use in things like OBS.
Raw
now-playing-slider.html
<!-- https://gist.github.com/Twanislas/8e790f247e8d975f26aca89358fe69ff -->
<!-- Recommended size for the view is 165px high, 500px wide -->
<html>
<head>
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
<script>
var getData = function() {
$.ajax({
type: "GET",
url: "http://localhost:9863/query",
dataType: "json",
success: function(resp) {
if (resp.player.isPaused == false) {
var track = resp.track
if ($("span#tracktitle").html() != track.title) {
$("span#tracktitle").html(track.title)
$("span#trackauthor").html(track.author)
$("img#trackcover").attr("src", track.cover)
slideIn()
}
}
}
});
};
var timeout
function slideIn() {
clearTimeout(timeout)
$("#slider-container").animate({left: "0%"})
timeout = setTimeout(() => {slideOut()}, 10000)
}
function slideOut() {
$("#slider-container").animate({left: "-110%"})
}
// Get data
$(document).ready(function () {
setInterval(getData, 1000)
})
</script>
<style>
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro");
body {
background-color: rgba(0, 0, 0, 0);
margin: auto;
overflow: hidden;
font-family: "Source Sans Pro", sans-serif;
}
#master-container {
width: 100vw;
height: 100vh;
}
#slider-container {
position: fixed;
left: -100%;
animation-timing-function: ease-in-out;
height: 125px;
max-width: 460px;
padding: 20px;
display: flex;
border-radius: 0 25px 25px 0;
background: rgba(0,0,0,0.7);
}
#trackcover-container {
height: 125px;
width: 125px;
float: left;
margin: auto 0;
}
#trackcover {
height: 125px;
width: 125px;
border-radius: 5%;
box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 20px 0px;
}
#trackinfo-container {
float: right;
margin: auto 0;
padding-left: 15px;
}
#trackinfo-container span {
display: -webkit-box;
text-align: left;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
}
#tracktitle {
color: white;
font-weight: bold;
font-size: 32px;
-webkit-line-clamp: 2;
}
#trackauthor {
color: white;
font-size: 25px;
margin-top: 10px;
-webkit-line-clamp: 1;
}
</style>
</head>
<body>
<div id="master-container">
<div id="slider-container">
<div id="trackcover-container">
<img id="trackcover" src="#">
</div>
<div id="trackinfo-container">
<span id="tracktitle"></span>
<span id="trackauthor"></span>
</div>
</div>
</div>
</body>
</html>
Raw
now-playing-widget.html
<!-- https://gist.github.com/Twanislas/8e790f247e8d975f26aca89358fe69ff -->
<!-- Recommended size for the view is 165px high, 500px wide -->
<html>
<head>
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
<script>
var timeoutHandle
var getData = function() {
$.ajax({
type: "GET",
url: "http://localhost:9863/query",
dataType: "json",
success: function(resp) {
if (resp.player.isPaused == false) {
if (timeoutHandle) {
clearTimeout(timeoutHandle)
timeoutHandle = undefined
}
var track = resp.track
if ($("span#tracktitle").html() != track.title) {
$("#widget-container").animate({opacity: 0}, 400, function() {
$("span#tracktitle").html(track.title)
$("span#trackauthor").html(track.author)
$("img#trackcover").attr("src", track.cover)
})
$("#widget-container").animate({opacity: 1})
}
} else {
if (!timeoutHandle) {
timeoutHandle = setTimeout(() => {
$("#widget-container").animate({opacity: 0}, 400, function() {
$("span#tracktitle").html("")
})
}, 5000)
}
}
}
});
};
// Get data
$(document).ready(function () {
setInterval(getData, 1000)
})
</script>
<style>
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro");
body {
background-color: rgba(0, 0, 0, 0);
margin: auto;
overflow: hidden;
font-family: "Source Sans Pro", sans-serif;
}
#master-container {
width: 100vw;
height: 100vh;
}
#widget-container {
position: fixed;
opacity: 0;
animation-timing-function: ease-in-out;
height: 125px;
width: 460px;
padding: 20px;
display: flex;
border-radius: 25px;
background: rgba(0,0,0,0.7);
}
#trackcover-container {
height: 125px;
width: 125px;
float: left;
margin: auto 0;
}
#trackcover {
height: 125px;
width: 125px;
border-radius: 5%;
box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 20px 0px;
}
#trackinfo-container {
float: right;
margin: auto 0;
padding-left: 15px;
}
#trackinfo-container span {
display: -webkit-box;
text-align: left;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
}
#tracktitle {
color: white;
font-weight: bold;
font-size: 32px;
-webkit-line-clamp: 2;
}
#trackauthor {
color: white;
font-size: 25px;
margin-top: 10px;
-webkit-line-clamp: 1;
}
</style>
</head>
<body>
<div id="master-container">
<div id="widget-container">
<div id="trackcover-container">
<img id="trackcover" src="#">
</div>
<div id="trackinfo-container">
<span id="tracktitle"></span>
<span id="trackauthor"></span>
</div>
</div>
</div>
</body>
</html>
@Caseritto
Copy link

Thanks so much for this! I've been using this for my stream, unfortunately there is just one issue and that is if the song title or artist name have "&" in it the widget flashes on/off indefinitely while playing

@NoocaR
Copy link

NoocaR commented Jul 10, 2022

I dont understand is there a video I can watch to see how this is done... I am new to all this and a visual learner. any help would be fantastic.

@AmnesiacSloth
Copy link

AmnesiacSloth commented Jul 14, 2022 •
edited

I dont understand is there a video I can watch to see how this is done... I am new to all this and a visual learner. any help would be fantastic.

Make sure you have the Remote Control option toggled in Settings under the Integrations tab first otherwise the files will do nothing. Save
now-playing-widget.html or now-playing-slider.html to a local directory on your machine and in OBS add a browser source and check the local file option. Browse for the file on your pc and queue up a song to make sure it works! Hope this helps

Thanks so much for this! I've been using this for my stream, unfortunately there is just one issue and that is if the song title or artist name have "&" in it the widget flashes on/off indefinitely while playing

I replaced line 24 of now-playing-widget.html
if ($("span#tracktitle").html() != track.title) {
with
if ($("span#tracktitle").html().replace("&amp;","&") != track.title) {
since it seems that span#tracktitle.html() will place "&amp;" if there is ever an '&' in the song title.

@NoocaR
Copy link

NoocaR commented Jul 14, 2022

Thank you very much. your advice has been very helpful.

@venomin30
Copy link

I replaced line 24 of now-playing-widget.html

@AmnesiacSloth Hmm I've tried this line change but still see the flashing issue :(

@DuceBrickinson
Copy link

anyone know what happened to the ytm desktop app? all the links even from their site are giving a 404 error?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment