laurent/piplay
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
ptl
2024-04-16 22:21:01 +02:00
commit 0bf37dc9eb
3 changed files with 302 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

159
templates/index.html Normal file
View File

@@ -0,0 +1,159 @@
<!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>