Last active
June 25, 2024 06:56
-
-
Save Twanislas/8e790f247e8d975f26aca89358fe69ff to your computer and use it in GitHub Desktop.
Simple notification style slider overlay pulling song info from local https://github.com/ytmdesktop API. For use in things like OBS.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- 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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- 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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I did as well, but I liked the way this looked more when it worked with V1. I might end up modifying it to look better.