160 lines
5.6 KiB
HTML
160 lines
5.6 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta name="viewport" content="initial-scale=1">
|
|
</head>
|
|
<body>
|
|
<style>
|
|
html, body { display:grid; margin:0; padding:0; }
|
|
piplay-gridv {
|
|
display: grid;
|
|
}
|
|
piplay-gridh {
|
|
display: grid;
|
|
width:100%;
|
|
grid-auto-flow: column;
|
|
}
|
|
#playlist {
|
|
overflow-y: auto;
|
|
}
|
|
#playlist > piplay-gridh {
|
|
height:2em;
|
|
grid-template-columns: 1fr 3em;
|
|
}
|
|
</style>
|
|
|
|
<piplay-gridv style="grid-template-rows: max-content 2em 1fr;max-height:100vh">
|
|
<video controls id="video_ui" muted style="width:100vw;max-height:80vh"></video>
|
|
|
|
<piplay-gridh>
|
|
<input id="URL-input" style="width:100%" placeholder="URL" value="">
|
|
<button id="URL-add">play</button>
|
|
</piplay-gridh>
|
|
|
|
<piplay-gridv id="playlist">
|
|
<!--
|
|
<piplay-gridh><div>coucou</div><button>x</button></piplay-gridh>
|
|
<piplay-gridh><div>coucou</div><button>x</button></piplay-gridh>
|
|
<piplay-gridh><div>coucou</div><button>x</button></piplay-gridh>
|
|
<piplay-gridh><div>coucou</div><button>x</button></piplay-gridh>
|
|
<piplay-gridh><div>coucou</div><button>x</button></piplay-gridh>
|
|
<piplay-gridh><div>coucou</div><button>x</button></piplay-gridh>
|
|
<piplay-gridh><div>coucou</div><button>x</button></piplay-gridh>
|
|
<piplay-gridh><div>coucou</div><button>x</button></piplay-gridh>
|
|
<piplay-gridh><div>coucou</div><button>x</button></piplay-gridh>
|
|
<piplay-gridh><div>coucou</div><button>x</button></piplay-gridh>
|
|
<piplay-gridh><div>coucou</div><button>x</button></piplay-gridh>
|
|
<piplay-gridh><div>coucou</div><button>x</button></piplay-gridh>
|
|
<piplay-gridh><div>coucou</div><button>x</button></piplay-gridh>
|
|
<piplay-gridh><div>coucou</div><button>x</button></piplay-gridh>
|
|
<piplay-gridh><div>coucou</div><button>x</button></piplay-gridh>
|
|
<piplay-gridh><div>coucou</div><button>x</button></piplay-gridh>
|
|
<piplay-gridh><div>coucou</div><button>x</button></piplay-gridh>
|
|
<piplay-gridh><div>coucou</div><button>x</button></piplay-gridh>
|
|
<piplay-gridh><div>coucou</div><button>x</button></piplay-gridh>
|
|
<piplay-gridh><div>coucou</div><button>x</button></piplay-gridh>
|
|
<piplay-gridh><div>coucou</div><button>x</button></piplay-gridh>
|
|
<piplay-gridh><div>coucou</div><button>x</button></piplay-gridh>
|
|
<piplay-gridh><div>coucou</div><button>x</button></piplay-gridh>
|
|
<piplay-gridh><div>coucou</div><button>x</button></piplay-gridh>
|
|
<piplay-gridh><div>coucou</div><button>x</button></piplay-gridh>
|
|
<piplay-gridh><div>coucou</div><button>x</button></piplay-gridh>
|
|
<piplay-gridh><div>coucou</div><button>x</button></piplay-gridh>
|
|
<piplay-gridh><div>coucou</div><button>x</button></piplay-gridh>
|
|
<piplay-gridh><div>coucou</div><button>x</button></piplay-gridh>
|
|
<piplay-gridh><div>coucou</div><button>x</button></piplay-gridh>
|
|
<piplay-gridh><div>coucou</div><button>x</button></piplay-gridh>
|
|
<piplay-gridh><div>coucou</div><button>x</button></piplay-gridh>
|
|
-->
|
|
</piplay-gridv>
|
|
<!--
|
|
<input type="range" min=0 max=1 step=0.0000001 id="current_time">
|
|
<piplay-gridh style="height:32px">
|
|
<button>prev</button>
|
|
<button id="btn_+10s">-10s</button>
|
|
<button id="btn_play">play</button>
|
|
<button id="btn_-10s">+10s</button>
|
|
<button>next</button>
|
|
</piplay-gridh>
|
|
-->
|
|
<div id="debug"></div>
|
|
</piplay-gridv>
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js" integrity="sha512-q/dWJ3kcmjBLU4Qc47E4A9kTB4m3wuTY7vkFJDTZKjTs8jhyGQnaUrxa0Ytd0ssMZhbNua9hE+E7Qv1j+DyZwA==" crossorigin="anonymous"></script>
|
|
|
|
<script>
|
|
function debug(msg) {
|
|
let p = document.createElement("p")
|
|
p.innerHTML = msg
|
|
document.getElementById('debug').prepend(p)
|
|
}
|
|
|
|
let time_slider = document.getElementById("current_time")
|
|
let btn_play = document.getElementById("btn_play")
|
|
let video_ui = document.getElementById("video_ui")
|
|
|
|
const socket = io()
|
|
socket.on('connect' ,() => socket.emit('request_state'))
|
|
|
|
// ###### UI - insert new video
|
|
// let URL_input = document.getElementById("URL-input")
|
|
document.getElementById("URL-add").addEventListener("click", e => {
|
|
let url = document.getElementById("URL-input").value
|
|
socket.emit('request_url',url)
|
|
})
|
|
// ######
|
|
|
|
// // light version
|
|
// socket.on('duration', d => time_slider.max = d)
|
|
// socket.on('time' , t => time_slider.value = t)
|
|
// socket.on('state' , s => btn_play.innerHTML = s ? "pause":"play")
|
|
|
|
// time_slider.addEventListener('input', e=> socket.emit('request_time',parseFloat(time_slider.value)))
|
|
|
|
// btn_play.addEventListener("click", e=> {
|
|
// if(state.playing) socket.emit('request_pause')
|
|
// else socket.emit('request_play')
|
|
// })
|
|
|
|
// video version
|
|
let last_path = ""
|
|
let state = {}
|
|
|
|
let prevent_seek_event = false
|
|
let prevent_seek_event_to = 0
|
|
|
|
socket.on('current_file',path => {video_ui.src = `data/${path}`;video_ui.play();})
|
|
socket.on('state' ,s => {s ? video_ui.play() : video_ui.pause()})
|
|
socket.on('time' ,t => {
|
|
const t_jump_tolerance = 3.0
|
|
if (Math.abs(video_ui.currentTime-t)>t_jump_tolerance) {
|
|
// discontinuous jump
|
|
video_ui.currentTime = t
|
|
// TODO : dirty fix to prevent "seeking" everywhere...
|
|
prevent_seek_event = true
|
|
clearTimeout(prevent_seek_event_to)
|
|
prevent_seek_event_to = setTimeout(()=>prevent_seek_event = false,100)
|
|
} else {
|
|
// change playback rate to cathchup
|
|
let delay = 0.5*(t-video_ui.currentTime)
|
|
video_ui.playbackRate = Math.exp(delay)
|
|
}
|
|
})
|
|
|
|
video_ui.addEventListener("seeking", e=> {
|
|
if(!prevent_seek_event) {
|
|
socket.emit('request_time',video_ui.currentTime)
|
|
} else console.log("seek prevented")
|
|
})
|
|
// video_ui.addEventListener("play", e=> {
|
|
// if(!prevent_seek_event) socket.emit('request_play')
|
|
// })
|
|
// video_ui.addEventListener("pause", e=> {
|
|
// if(!prevent_seek_event) socket.emit('request_pause')
|
|
// })
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|