56 lines
1.6 KiB
Cheetah
56 lines
1.6 KiB
Cheetah
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>prettysunflower - The trains radio</title>
|
|
<link rel="stylesheet" type="text/css" href="/static/static/css/style.css">
|
|
</head>
|
|
<body class="page-radio-trains">
|
|
<div class="video-zone">
|
|
<video id="video-player" controls></video>
|
|
</div>
|
|
|
|
<h1>The trains radio</h1>
|
|
|
|
<main>
|
|
{{ range .PlaylistItems }}
|
|
<div class="playlist-item" data-videoid="{{ .VideoId }}">
|
|
<img src="{{ .ThumbnailUrl }}">
|
|
<p>
|
|
<a href="https://invidious.prettysunflower.moe/watch?v={{ .VideoId }}">
|
|
<strong>{{ .Title }}</strong><br>
|
|
{{ .Channel.Name }}
|
|
</a>
|
|
</p>
|
|
</div>
|
|
{{ end }}
|
|
</main>
|
|
|
|
<script>
|
|
const playlistItems = document.getElementsByClassName("playlist-item");
|
|
const videoBlock = document.querySelector(".video-zone video");
|
|
|
|
function loadVideo(videoId) {
|
|
videoBlock.src = `https://invidious.prettysunflower.moe/latest_version?local=true&id=${videoId}`;
|
|
videoBlock.currentTime = 0;
|
|
videoBlock.play();
|
|
}
|
|
|
|
let index = 0;
|
|
|
|
playlistItems[index].classList.add('active');
|
|
loadVideo(playlistItems[index].dataset.videoid);
|
|
|
|
videoBlock.addEventListener('ended', () => {
|
|
playlistItems[index].classList.remove('active');
|
|
index = index + 1;
|
|
|
|
if (index < playlistItems.length) {
|
|
playlistItems[index].classList.add('active');
|
|
loadVideo(playlistItems[index].dataset.videoid);
|
|
}
|
|
})
|
|
</script>
|
|
</body>
|
|
</html> |