Template:Home/NowPlaying: Difference between revisions

Template page
No edit summary
No edit summary
 
(22 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>
<ul class="videolist">
{{#widget:YouTube|id=tfcf5pv3VfA|}}
<li>{{#widget:YouTube|id=tfcf5pv3VfA|}}</li>
<li>{{#widget:YouTube|id=EQ7ZgdSlQRs}}</li>
<li>{{#widget:YouTube|id=aQYTuk-_hKg}}</li>
</ul>
<html>
<html>
<head>
<br>
<div id="button-wrap">
<button id="ytButton">Click to change Tape</button>
</div>
<!-- Put Your javascript here-->
<script>
<script>
$(".videolist> li").hide();
var videoIdList = [
randomItem();
</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 randomItem(){
function playNext() {
    for (var i = 0; i < 1; i++){
  var justPlayedVideo = shuffledList.shift();
        var length = $(".videolist> li:not(:visible)").length;
  shuffledList.push(justPlayedVideo);
        var random = Math.floor(Math.random() * length);
 
        $(".videolist> li:not(:visible)").eq(random).show();
  player.src = youtubeLink + shuffledList[0];
    }
}
}
player.src = youtubeLink + shuffledList[0];
</script>
</script>
</html>
</div>
</div>
</head>
</html>

Latest revision as of 19:30, 8 June 2023

Now Playing