videopage/templates/index.html

100 lines
3.3 KiB
HTML
Raw Permalink Normal View History

{{define "index.html"}}
<!DOCTYPE html>
<html>
<head>
<title>{{.ApplicationName}}</title>
<style>
body {
background-color: black;
}
.error {
color: red;
}
.player-container .player {
object-fit: cover;
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
}
</style>
<script type="text/javascript">
var player
var generation = 0
var current_track = -1
var total_tracks = -1
var track_list = []
var last_known_time = -1
options = {
timeout: 5000
}
function load() {
fetch("video/index.json", {timeout: 5000})
.then(response => response.json())
.then(data => {
if (!data.success) {
console.log("failed to fetch index.json")
return false
}
if (typeof data.generation =="number") {
if (generation == 0) {
generation = data.generation
}
if (data.generation > generation) {
location.reload()
}
}
total_tracks = data.count
track_list = data.videos
if (current_track == -1) {
current_track = 0
player.src = "video/" + track_list[current_track].name
}
})
return true
}
function videoEnd(){
if (total_tracks == -1) {
return
}
if (player.ended) {
nextVideo()
}
}
function nextVideo(){
current_track++
if (current_track > total_tracks-1) {
current_track = 0
}
player.src = "video/" + track_list[current_track].name
}
function checkStall(){
if (last_known_time == -1) {
last_known_time = player.currentTime
return
}
if (last_known_time == player.currentTime) {
nextVideo()
}
}
window.onload = function() {
player = document.getElementById("player")
player.autoplay = true
player.controls = true
load()
setInterval(videoEnd, 1000)
setInterval(load, 60000)
setInterval(checkStall, 30000)
}
</script>
</head>
<body>
<noscript><h1 class="error">JavaScript is required for this page but not available</h1></noscript>
<div id="player-container" class="player-container">
<video id="player" class="player"></video>
</div>
</body>
</html>
{{end}}