No edit summary |
No edit summary |
||
| (17 intermediate revisions by 2 users not shown) | |||
| Line 1: | Line 1: | ||
{{#get_db_data: db=DATA | |||
|query=now_playing | |||
|data=video_id=video_id | |||
}} | |||
<templatestyles src="Home/NowPlaying/styles.css" /> | <templatestyles src="Home/NowPlaying/styles.css" /> | ||
<div id="now-playing"> | <div id="now-playing" style="box-shadow: 0px 0px 14px rgb(192 14 170 / 75%), inset 0 0 14px rgb(246 21 115);"> | ||
<h2>Now Playing</h2> | <h2>Now Playing</h2> | ||
{{#widget:YouTube| | {{#widget:YouTube|id=tfcf5pv3VfA|}} | ||
<html> | |||
<br> | |||
<div id="button-wrap"> | |||
<button id="ytButton">Click to change Tape</button> | |||
</div> | |||
<!-- Put Your javascript here--> | |||
<script> | |||
var videoIdList = [ | |||
</html> | |||
{{#for_external_table: | |||
"{{{video_id}}}", | |||
}} | |||
<html> | |||
]; | |||
var youtubeLink = "https://www.youtube.com/embed/"; | |||
var shuffledList = videoIdList.sort(() => Math.random() - 0.5); | |||
var button = document.querySelector("#ytButton"); | |||
var player = document.querySelector("#ytPlayer"); | |||
button.addEventListener("click", playNext); | |||
function playNext() { | |||
var justPlayedVideo = shuffledList.shift(); | |||
shuffledList.push(justPlayedVideo); | |||
player.src = youtubeLink + shuffledList[0]; | |||
} | |||
player.src = youtubeLink + shuffledList[0]; | |||
</script> | |||
</html> | |||
</div> | </div> | ||