use remote theme-song.js

This commit is contained in:
John Bowdre 2024-08-04 14:39:53 -05:00
parent 2505819bfb
commit 4a78ce7348
3 changed files with 29 additions and 29 deletions

View file

@ -5,25 +5,25 @@
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A==" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A==" crossorigin="anonymous">
<title>MusicThread Test</title> <title>MusicThread Test</title>
<script> <script>
// retrieves latest link from a musicthread thread and displays it on the page // replace theme-song placeholder text when the musicthread response comes in
document.addEventListener("DOMContentLoaded", function() { document.addEventListener('DOMContentLoaded', function() {
const musicthread = "https://musicthread.app/api/v0/thread/2aVjZUocjk96LELFbV5JvJjm14v"; const themeSongContainer = document.getElementById('theme-song');
const nowPlayingElement = document.getElementById("now-playing"); const observer = new MutationObserver(function(mutations) {
if (nowPlayingElement) { mutations.forEach(function(mutation) {
fetch(musicthread) if (mutation.type === 'childList' && themeSongContainer.childNodes.length > 2) {
.then(res => res.json()) themeSongContainer.removeChild(themeSongContainer.firstChild);
.then(function(res){ observer.disconnect();
let nowPlaying = res;
nowPlayingElement.innerHTML = "<a href='" + nowPlaying.page_url + "'>" + nowPlaying.title + "</a> by " + nowPlaying.artist;
});
} }
}); });
});
observer.observe(themeSongContainer, { childList: true });
});
</script> </script>
</head> </head>
<body> <body>
<h1>Now Playing</h1> <h1>Now Playing</h1>
<ul> <ul>
<li><span id="now-playing"></span> <i class='fa-solid fa-headphones'></i></li> <li><span id="theme-song">Silence<script src="https://res.jbowdre.lol/js/theme-song.js?id=2aVjZUocjk96LELFbV5JvJjm14v&plain=true" defer></script></span><i class='fa-solid fa-headphones'></i></li>
</ul> </ul>
</body> </body>
</html> </html>

2
now.md
View file

@ -39,7 +39,7 @@
- [Truth of the Divine](https://openlibrary.org/works/OL24198736W/Truth_of_the_Divine) by Lindsay Ellis {book} - [Truth of the Divine](https://openlibrary.org/works/OL24198736W/Truth_of_the_Divine) by Lindsay Ellis {book}
- [White Collar](https://www.imdb.com/title/tt1358522), [Canada's Drag Race: Canada vs the World](https://www.imdb.com/title/tt19357598/) {display} - [White Collar](https://www.imdb.com/title/tt1358522), [Canada's Drag Race: Canada vs the World](https://www.imdb.com/title/tt19357598/) {display}
- [The Last of Us Part I](https://store.steampowered.com/app/1888930/The_Last_of_Us_Part_I/) {gamepad} - [The Last of Us Part I](https://store.steampowered.com/app/1888930/The_Last_of_Us_Part_I/) {gamepad}
- <span id="now-playing">Silence</span> {headphones} - <span id="theme-song">Silence<script src="https://res.jbowdre.lol/js/theme-song.js?id=2aVjZUocjk96LELFbV5JvJjm14v&plain=true" defer></script></span> {headphones}
- [more recent faves](https://musicthread.app/thread/2aVjZUocjk96LELFbV5JvJjm14v) {music} - [more recent faves](https://musicthread.app/thread/2aVjZUocjk96LELFbV5JvJjm14v) {music}
<br> <br>

View file

@ -140,19 +140,19 @@ document.addEventListener("DOMContentLoaded", function() {
}); });
</script> </script>
<script> <script>
// retrieves latest link from a musicthread thread and displays it on the page // replace theme-song placeholder text when the musicthread response comes in
document.addEventListener("DOMContentLoaded", function() { document.addEventListener('DOMContentLoaded', function() {
const musicthread = 'https://musicthread.app/api/v0/thread/2aVjZUocjk96LELFbV5JvJjm14v'; const themeSongContainer = document.getElementById('theme-song');
const nowPlayingElement = document.getElementById('now-playing'); const observer = new MutationObserver(function(mutations) {
if (nowPlayingElement) { mutations.forEach(function(mutation) {
fetch(musicthread) if (mutation.type === 'childList' && themeSongContainer.childNodes.length > 2) {
.then(res => res.json()) themeSongContainer.removeChild(themeSongContainer.firstChild);
.then(function(res){ observer.disconnect();
let nowPlaying = res.links[0];
nowPlayingElement.innerHTML = "<a href='" + nowPlaying.page_url + "'>" + nowPlaying.title + "</a> by " + nowPlaying.artist;
});
} }
}); });
});
observer.observe(themeSongContainer, { childList: true });
});
</script> </script>