diff --git a/webroot/js/player.js b/webroot/js/player.js index 9486f28..c871bc2 100644 --- a/webroot/js/player.js +++ b/webroot/js/player.js @@ -1,7 +1,14 @@ window.addEventListener('DOMContentLoaded', (event) => { + const autoplayInput = document.querySelector('#autoplayInput'); + const videoStreamInput = document.querySelector('#videoStreamInput'); + const audioStreamInput = document.querySelector('#audioStreamInput'); + const loopInput = document.querySelector("#loopInput"); + const controlbar = document.querySelector(".html5-video-controls") const video = document.getElementById('player_video'); const audio = document.getElementById('player_audio'); + loopInput.checked = false; + formats = JSON.parse(document.getElementById('yt_formats').innerText) .filter((fmt) => isFormatSupported(fmt) === true) .sort((a, b) => { @@ -42,7 +49,6 @@ window.addEventListener('DOMContentLoaded', (event) => { selectStreams(videoFormat, audioFormat) } - if (localStorage.getItem("volume") != null) { setVolume(localStorage.getItem("volume")); } @@ -57,10 +63,12 @@ window.addEventListener('DOMContentLoaded', (event) => { if (video.ended) { video.currentTime = 0; audio.currentTime = 0; - } - video.play(); - if (audio.src) { - audio.play(); + playbackWait(); + } else { + video.play(); + if (audio.src) { + audio.play(); + } } } else { classList.remove('ytp-button-pause'); @@ -70,6 +78,11 @@ window.addEventListener('DOMContentLoaded', (event) => { audio.currentTime = video.currentTime; // sync audio to video on pause audio.pause(); } + if (video.currentTime == video.duration && loopInput.checked == true) { + video.currentTime = 0; + audio.currentTime = 0; + playbackWait(); + } } } catch (e) { console.error(e); @@ -166,10 +179,6 @@ window.addEventListener('DOMContentLoaded', (event) => { menu.style.display = "block"; } } - - let autoplayInput = document.querySelector('#autoplayInput'); - let videoStreamInput = document.querySelector('#videoStreamInput'); - let audioStreamInput = document.querySelector('#audioStreamInput'); function applyStreams() { localStorage.setItem("videoStream", videoStreamInput.value); @@ -218,6 +227,18 @@ window.addEventListener('DOMContentLoaded', (event) => { } } + let mouseMoveTimeout; + + function handleMouse(type, e) { + controlbar.style="transform: translateY(0px);"; + clearTimeout(mouseMoveTimeout); + if(type != "controls") { + mouseMoveTimeout = setTimeout(() => { + controlbar.style="transform: translateY(40px);"; + }, 2000); + } + } + function handleProtected(e) { console.log(e) if(e.originalTarget.error.code == 4 && ! e.originalTarget.currentSrc.startsWith("https://"+window.location.hostname)) { @@ -301,6 +322,7 @@ window.addEventListener('DOMContentLoaded', (event) => { }); video.addEventListener('timeupdate', () => updateTime()); video.addEventListener('ended', () => toggleVideo(false)); // just to change the classes + video.addEventListener('ended', () => console.log("event fired")); // just to change the classes document.querySelector('.ytp-progress-list').addEventListener('click', (e) => scrub(e)); // document.querySelector('.ytp-play-progress').addEventListener('click', (e) => scrub(e)); document.querySelector('.ytp-volume-slider').addEventListener('click', (e) => volume(e)); @@ -308,6 +330,8 @@ window.addEventListener('DOMContentLoaded', (event) => { document.querySelector('video').addEventListener('error', (e) => handleProtected(e)); document.querySelector('audio').addEventListener('error', (e) => handleProtected(e)); document.querySelector('body').addEventListener('keydown', (e) => handleKeyboard(e)); + document.querySelector('.html5-video-container').addEventListener('mousemove', (e) => handleMouse("frame", e)); + controlbar.addEventListener('mousemove', (e) => handleMouse("controls", e)); if(localStorage.getItem("autoplay") == "true") { toggleVideo(true); @@ -315,6 +339,10 @@ window.addEventListener('DOMContentLoaded', (event) => { playbackWait(); } + setTimeout(() => { + controlbar.style="transform: translateY(40px);"; + }, 2000); + // formats console.log("w dzisiejszym menu") diff --git a/webroot/player.shs b/webroot/player.shs index 965ed4b..f0438af 100755 --- a/webroot/player.shs +++ b/webroot/player.shs @@ -17,6 +17,12 @@ echo ' position: relative; margin-left: auto; } + .html5-video-container { + height: 100%; + } + .html5-video-controls { + transition: ease-in .15s; + }
[x]
Video ID:
Dimensions:
Resolution:
Volume:
Stream Type:
CPN:
Mime Type:
DASH:
Protected:
Bandwidth:
Decoded FramesDropped FramesParsed FramesPresented Frames
Video Bytes DecodedAudio Bytes DecodedPainted FramesPaint Delay
@@ -28,6 +34,8 @@ echo '

+ +