Template:Home/NowPlaying: Difference between revisions

Template page
No edit summary
No edit summary
 
(20 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>
<li>{{#widget:YouTube|id=0UMeJpjvV5k}}</li>
<li>{{#widget:YouTube|id=1p9I-No9HEo}}</li>
<li>{{#widget:YouTube|id=48mKhSfcJ60}}</li>
<li>{{#widget:YouTube|id=5_oQb7GWKTU}}</li>
<li>{{#widget:YouTube|id=5f4Xt_QYxTc}}</li>
<li>{{#widget:YouTube|id=5lmm3sSr7nY}}</li>
<li>{{#widget:YouTube|id=BSJpTMTyxUM}}</li>
<li>{{#widget:YouTube|id=DE0I-rey15k}}</li>
<li>{{#widget:YouTube|id=GXoOjRoF0nc}}</li>
<li>{{#widget:YouTube|id=G_KgZqd8b2k}}</li>
<li>{{#widget:YouTube|id=HLa1T9f0hy4}}</li>
<li>{{#widget:YouTube|id=JXbdSsjOYn8}}</li>
<li>{{#widget:YouTube|id=KAce42mgj84}}</li>
<li>{{#widget:YouTube|id=KRXUYAFdKX4}}</li>
<li>{{#widget:YouTube|id=N90Utrsfwz8}}</li>
<li>{{#widget:YouTube|id=O69bZUNgEas}}</li>
<li>{{#widget:YouTube|id=PPap3u_cWVw}}</li>
<li>{{#widget:YouTube|id=R8RTLW9SOlc}}</li>
<li>{{#widget:YouTube|id=RTNljh1RLdM}}</li>
<li>{{#widget:YouTube|id=RvgYj1dVg14}}</li>
<li>{{#widget:YouTube|id=T-sDOO4L42U}}</li>
<li>{{#widget:YouTube|id=UHppQLgcC_8}}</li>
<li>{{#widget:YouTube|id=Ura1IgHRlgg}}</li>
<li>{{#widget:YouTube|id=W_Yh2-MHATo}}</li>
<li>{{#widget:YouTube|id=W_Yh2-MHATo}}</li>
<li>{{#widget:YouTube|id=Z__E97Wo2yw}}</li>
<li>{{#widget:YouTube|id=Zc9HsPx0rN8}}</li>
<li>{{#widget:YouTube|id=Zc9HsPx0rN8}}</li>
<li>{{#widget:YouTube|id=Zw7PEVEBuwY}}</li>
<li>{{#widget:YouTube|id=_LWj3TSbDRo}}</li>
<li>{{#widget:YouTube|id=_r47zds9ajg}}</li>
<li>{{#widget:YouTube|id=apNnmCBiKv4}}</li>
<li>{{#widget:YouTube|id=fTgo466hG1c}}</li>
<li>{{#widget:YouTube|id=jFW7BdHTRdY}}</li>
<li>{{#widget:YouTube|id=mtZA_k174VM}}</li>
<li>{{#widget:YouTube|id=sxXaPow0qig}}</li>
<li>{{#widget:YouTube|id=wYwf1HdBlkQ}}</li>
<li>{{#widget:YouTube|id=xV88777nyOA}}</li>
<li>{{#widget:YouTube|id=ydxQlqpkX8E}}</li>
<li>{{#widget:YouTube|id=yeF-QesNdto}}</li>
</ul>
<html>
<html>
<button>Next Tape</button>
<br>
<head>
<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);


$("button").click(function(){
function playNext() {
    var lastItems = $(".videolist > li:visible");
  var justPlayedVideo = shuffledList.shift();
    randomItem();
  shuffledList.push(justPlayedVideo);
    lastItems.hide();
});


function randomItem(){
  player.src = youtubeLink + shuffledList[0];
    for (var i = 0; i < 1; i++){
        var length = $(".videolist> li:not(:visible)").length;
        var random = Math.floor(Math.random() * length);
        $(".videolist> li:not(:visible)").eq(random).show();
    }
}
}
player.src = youtubeLink + shuffledList[0];
</script>
</script>
</html>
</div>
</div>
</head>
</html>

Latest revision as of 19:30, 8 June 2023

Now Playing