Last active
April 19, 2022 14:09
-
-
Save Gelmo/f3d5fe50206aadbbd786e842110c8d92 to your computer and use it in GitHub Desktop.
Now Playing overlay for Pretzel | Single file
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
<!DOCTYPE html> | |
<!-- Notes: | |
- This is a slight adjustment to Zyphen's Now Playing overlay, available at https://obsproject.com/forum/resources/zyphens-now-playing-overlay.1026/ | |
- Save this Gist anywhere you like, in a file with the extension ".html" | |
- In Pretzel, go to Settings > FILE OUTPUT | |
- Enable "Save Album Cover to file" and save the file in the same directory as the html file you saved saved earlier | |
- The file name must be album.jpg | |
- Enable "Save Now Playing JSON Data to file" and save the file in the same directory as the html file you saved saved earlier | |
- The file name must be nowplaying.json | |
- Open OBS | |
- Add a browser source | |
- Check Local file | |
- Point OBS to the html file you saved saved earlier | |
- Set the dimensions to 350 by 70 | |
- If you would like to use a visual tool to adjust the style, refer to https://gist.github.com/Gelmo/fa3256e7c8a2b3d3d1495d5f4e784bed | |
--> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8" /> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
<title>Now Playing</title> | |
<style> | |
#bigdiv { | |
justify-content: flex-start; | |
background-color: #121212; | |
width: 350px; | |
height: 70px; | |
overflow: hidden; | |
margin-left: -500px; | |
padding: 0; | |
} | |
#smalldiv { | |
height: 70px; | |
overflow: hidden; | |
margin-top: -70px; | |
margin-left: 70px; | |
padding: 0; | |
} | |
#image { | |
width: 70px; | |
height: 70px; | |
padding: 0; | |
margin-left: 0; | |
position: relative; | |
z-index: 5; | |
} | |
#image2 { | |
width: 70px; | |
height: 70px; | |
padding: 0; | |
position: relative; | |
margin-left: -74px; | |
z-index: 10; | |
} | |
body { | |
background-color: #ffffff; | |
padding: 0 !important; | |
margin: 0 !important; | |
} | |
#artist { | |
color: hsl(355, 100%, 68%); | |
text-transform: uppercase; | |
font-family: "proxima-nova", sans-serif; | |
margin-top: 5px; | |
margin-left: 7px; | |
font-weight: 600; | |
font-size: 15px; | |
margin-bottom: 10px; | |
display: inline-block; | |
} | |
#song { | |
color: #ffffff; | |
font-size: 24px; | |
font-family: "proxima-nova", sans-serif; | |
margin-top: -5px; | |
margin-left: 7px; | |
font-weight: bold; | |
display: inline-block; | |
} | |
p { | |
white-space: nowrap; | |
} | |
.scrolling { | |
animation: slide 20s linear infinite; | |
} | |
@keyframes slide { | |
0% { | |
/* left: 100%; */ | |
transform: translateX(290px); | |
} | |
100% { | |
/* left: -100%; */ | |
transform: translateX(-100%); | |
} | |
} | |
</style> | |
<script | |
src="https://code.jquery.com/jquery-3.5.1.min.js" | |
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" | |
crossorigin="anonymous" | |
></script> | |
<script> | |
var newSong; | |
var newArtist; | |
var shown = false; | |
function hideText() { | |
$("#artist").animate( | |
{ | |
marginLeft: "-100px", | |
opacity: 0, | |
}, | |
300 | |
); | |
$("#song").animate( | |
{ | |
marginLeft: "-100px", | |
opacity: 0, | |
}, | |
300 | |
); | |
document.getElementById("song").classList.remove("scrolling"); | |
document.getElementById("artist").classList.remove("scrolling"); | |
} | |
function updateText() { | |
document.getElementById("artist").innerHTML = newArtist; | |
document.getElementById("song").innerHTML = newSong; | |
} | |
function showText() { | |
if (document.getElementById("artist").clientWidth > 260) { | |
$("#artist").animate( | |
{ | |
marginLeft: "290px", | |
opacity: 1, | |
}, | |
300, | |
function () { | |
$("#artist").css("margin-left", "7px"); | |
console.log("changed"); | |
} | |
); | |
} else { | |
$("#artist").animate( | |
{ | |
marginLeft: "7px", | |
opacity: 1, | |
}, | |
300 | |
); | |
} | |
if (document.getElementById("song").clientWidth > 260) { | |
$("#song").animate( | |
{ | |
marginLeft: "290px", | |
opacity: 1, | |
}, | |
300, | |
function () { | |
console.log("lngsong"); | |
$("#song").css("margin-left", "7px"); | |
} | |
); | |
} else { | |
$("#song").animate( | |
{ | |
marginLeft: "7px", | |
opacity: 1, | |
}, | |
300 | |
); | |
} | |
if (document.getElementById("song").clientWidth > 260) | |
setTimeout(function () { | |
document.getElementById("song").classList.add("scrolling"); | |
}, 300); | |
if (document.getElementById("artist").clientWidth > 260) | |
setTimeout(function () { | |
document.getElementById("artist").classList.add("scrolling"); | |
}, 300); | |
console.log(document.getElementById("song").clientWidth); | |
} | |
function checkUpdate() { | |
$.getJSON("nowplaying.json", function (npinfo) { | |
newArtist = npinfo.track.artistsString.replace(/&/g, "&"); | |
newSong = npinfo.track.title.replace(/&/g, "&"); | |
}).then(displayData); | |
setTimeout(checkUpdate, 2000); | |
} | |
function displayData() { | |
if (newSong != document.getElementById("song").innerHTML) { | |
if (newSong.length > 1 && !shown) { | |
$("#bigdiv").animate( | |
{ | |
marginLeft: "0px", | |
}, | |
500 | |
); | |
shown = true; | |
} | |
if (newSong.length < 1 && shown) { | |
$("#bigdiv").animate( | |
{ | |
marginLeft: "-500px", | |
}, | |
500 | |
); | |
shown = false; | |
} | |
console.log( | |
"New song, old song: " + | |
document.getElementById("song").innerHTML + | |
" new song: " + | |
newSong | |
); | |
hideText(); | |
setTimeout(updateText, 300); | |
setTimeout(showText, 400); | |
var imgpath = "album.jpg?t=" + newSong + newArtist; | |
document.getElementById("image").setAttribute("src", imgpath); | |
$("#image2").fadeOut(500, function () { | |
document.getElementById("image2").setAttribute("src", imgpath); | |
$("#image2").show(); | |
}); | |
} | |
} | |
$(document).ready(checkUpdate); | |
</script> | |
</head> | |
<body> | |
<div id="bigdiv"> | |
<img id="image" /> | |
<img id="image2" src="album.jpg" /> | |
<div id="smalldiv"> | |
<p id="artist"></p> | |
<br /> | |
<p id="song"></p> | |
</div> | |
</div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment