mirror of
https://codeberg.org/ashley/poke.git
synced 2024-11-22 21:57:49 +01:00
Update html/poketube.ejs
This commit is contained in:
ashley
parent
098c13b966
commit
7260558276
1 changed files with 246 additions and 277 deletions
|
|
@ -703,305 +703,274 @@ background-color: #0000;
|
||||||
</style>
|
</style>
|
||||||
</noscript>
|
</noscript>
|
||||||
<script>
|
<script>
|
||||||
const qua = new URLSearchParams(new URL(window.location.href).search).get("quality") || "";
|
const qua = new URLSearchParams(new URL(window.location.href).search).get("quality") || "";
|
||||||
const playSVG = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>play-circle-outline</title><path d="M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M10,16.5L16,12L10,7.5V16.5Z" /></svg>';
|
const playSVG = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>play-circle-outline</title><path d="M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M10,16.5L16,12L10,7.5V16.5Z" /></svg>'
|
||||||
const pauseSVG = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>pause-circle-outline</title><path d="M13,16V8H15V16H13M9,16V8H11V16H9M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4Z" /></svg>';
|
const pauseSVG = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>pause-circle-outline</title><path d="M13,16V8H15V16H13M9,16V8H11V16H9M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4Z" /></svg>'
|
||||||
|
function csts(seconds) {
|
||||||
function csts(seconds) {
|
var hours = Math.floor(seconds / 3600);
|
||||||
var hours = Math.floor(seconds / 3600);
|
var minutes = Math.floor((seconds - (hours * 3600)) / 60);
|
||||||
var minutes = Math.floor((seconds - (hours * 3600)) / 60);
|
var secs = Math.floor(seconds - (hours * 3600) - (minutes * 60));
|
||||||
var secs = Math.floor(seconds - (hours * 3600) - (minutes * 60));
|
if (hours === 0) {
|
||||||
if (hours === 0) {
|
var timeString = minutes.toString().padStart(2, '0') + ':' +
|
||||||
var timeString = minutes.toString().padStart(2, '0') + ':' + secs.toString().padStart(2, '0');
|
secs.toString().padStart(2, '0');
|
||||||
} else {
|
} else {
|
||||||
var timeString = hours.toString().padStart(2, '0') + ':' + minutes.toString().padStart(2, '0') + ':' + secs.toString().padStart(2, '0');
|
var timeString = hours.toString().padStart(2, '0') + ':' +
|
||||||
}
|
minutes.toString().padStart(2, '0') + ':' +
|
||||||
return timeString;
|
secs.toString().padStart(2, '0');
|
||||||
|
}
|
||||||
|
return timeString;
|
||||||
}
|
}
|
||||||
|
|
||||||
function cstsRemaining(totalTimeInSeconds, elapsedTimeInSeconds) {
|
function cstsRemaining(totalTimeInSeconds, elapsedTimeInSeconds) {
|
||||||
var remainingSeconds = totalTimeInSeconds - elapsedTimeInSeconds;
|
var remainingSeconds = totalTimeInSeconds - elapsedTimeInSeconds;
|
||||||
var hours = Math.floor(remainingSeconds / 3600);
|
var hours = Math.floor(remainingSeconds / 3600);
|
||||||
var minutes = Math.floor((remainingSeconds % 3600) / 60);
|
var minutes = Math.floor((remainingSeconds % 3600) / 60);
|
||||||
var secs = Math.floor(remainingSeconds % 60);
|
var secs = Math.floor(remainingSeconds % 60);
|
||||||
|
|
||||||
var timeString;
|
var timeString;
|
||||||
if (hours === 0) {
|
if (hours === 0) {
|
||||||
timeString = minutes.toString().padStart(2, '0') + ':' + secs.toString().padStart(2, '0');
|
timeString = minutes.toString().padStart(2, '0') + ':' + secs.toString().padStart(2, '0');
|
||||||
} else {
|
} else {
|
||||||
timeString = hours.toString().padStart(2, '0') + ':' + minutes.toString().padStart(2, '0') + ':' + secs.toString().padStart(2, '0');
|
timeString = hours.toString().padStart(2, '0') + ':' + minutes.toString().padStart(2, '0') + ':' + secs.toString().padStart(2, '0');
|
||||||
}
|
}
|
||||||
|
|
||||||
return '-' + timeString;
|
return '-' + timeString;
|
||||||
}
|
}
|
||||||
|
function showErrorCard(e) {
|
||||||
function showErrorCard(e) {
|
try {
|
||||||
try {
|
switch (e.target.error.code) {
|
||||||
switch (e.target.error.code) {
|
|
||||||
case e.target.error.MEDIA_ERR_ABORTED:
|
case e.target.error.MEDIA_ERR_ABORTED:
|
||||||
return;
|
return;
|
||||||
|
break;
|
||||||
case e.target.error.MEDIA_ERR_NETWORK:
|
case e.target.error.MEDIA_ERR_NETWORK:
|
||||||
document.querySelector("div p span").innerText = "(Network error)";
|
document.querySelector("div p span").innerText = "(Network error)"
|
||||||
break;
|
break;
|
||||||
case e.target.error.MEDIA_ERR_DECODE:
|
case e.target.error.MEDIA_ERR_DECODE:
|
||||||
document.querySelector("div p span").innerText = "(Decode error/lack of browser support)";
|
document.querySelector("div p span").innerText = "(Decode error/lack of browser support)"
|
||||||
break;
|
break;
|
||||||
case e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED:
|
case e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED:
|
||||||
document.querySelector("div p span").innerText = "(Network error or format not supported)";
|
document.querySelector("div p span").innerText = "(Network error or format not supported)"
|
||||||
break;
|
break;
|
||||||
default:
|
default:
|
||||||
document.querySelector("div p span").innerText = "(Unknown error)";
|
document.querySelector("div p span").innerText = "(Unknown error)"
|
||||||
break;
|
break;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
} catch {
|
catch {
|
||||||
document.querySelector("div p span").innerText = "(Network error)";
|
document.querySelector("div p span").innerText = "(Network error)"
|
||||||
|
}
|
||||||
|
document.getElementById("buffer-failed-warning").style.display = "block";
|
||||||
}
|
}
|
||||||
document.getElementById("buffer-failed-warning").style.display = "block";
|
let canPlayPause = true;
|
||||||
}
|
let didFirstTimePlay = false;
|
||||||
|
document.addEventListener("DOMContentLoaded", () => {
|
||||||
let canPlayPause = true;
|
//FIXME: saved playback intentionally overwritten
|
||||||
let didFirstTimePlay = false;
|
localStorage.setItem(`progress-${new URLSearchParams(window.location.search).get('v')}`, 0);
|
||||||
|
// Controls and high-res playback
|
||||||
document.addEventListener("DOMContentLoaded", () => {
|
//TODO - a
|
||||||
localStorage.setItem(`progress-${new URLSearchParams(window.location.search).get('v')}`, 0);
|
let setTime = false
|
||||||
|
const seekbar = document.getElementById("duration-slider")
|
||||||
let setTime = false;
|
const video = document.getElementById("video");
|
||||||
const seekbar = document.getElementById("duration-slider");
|
let shouldUseRemaining = false;
|
||||||
const video = document.getElementById("video");
|
|
||||||
let shouldUseRemaining = false;
|
|
||||||
const timestamps = document.getElementById("timestamps");
|
|
||||||
|
|
||||||
video.addEventListener("timeupdate", (event) => {
|
|
||||||
seekbar.value = event.target.currentTime;
|
|
||||||
timestamps.innerText = shouldUseRemaining ? `${cstsRemaining(video.duration, video.currentTime)}/${csts(video.duration)}` : `${csts(video.currentTime)}/${csts(video.duration)}`;
|
|
||||||
});
|
|
||||||
|
|
||||||
timestamps.addEventListener("mouseover", () => {
|
|
||||||
shouldUseRemaining = true;
|
|
||||||
timestamps.innerText = `${cstsRemaining(video.duration, video.currentTime)}/${csts(video.duration)}`;
|
|
||||||
});
|
|
||||||
|
|
||||||
timestamps.addEventListener("mouseout", () => {
|
|
||||||
shouldUseRemaining = false;
|
|
||||||
timestamps.innerText = `${csts(video.currentTime)}/${csts(video.duration)}`;
|
|
||||||
});
|
|
||||||
|
|
||||||
seekbar.addEventListener("input", (event) => {
|
|
||||||
video.pause();
|
|
||||||
canPlayPause = false;
|
|
||||||
if (qua != "medium") {
|
|
||||||
aud.pause();
|
|
||||||
aud.currentTime = event.target.value;
|
|
||||||
}
|
|
||||||
video.currentTime = event.target.value;
|
|
||||||
canPlayPause = true;
|
|
||||||
setTimeout(() => {
|
|
||||||
video.play();
|
|
||||||
aud.play();
|
|
||||||
}, 200);
|
|
||||||
});
|
|
||||||
|
|
||||||
const playPauseButton = document.getElementById("play-pause");
|
|
||||||
playPauseButton.innerHTML = pauseSVG;
|
|
||||||
|
|
||||||
function toggleVideo() {
|
|
||||||
if (!canPlayPause) return;
|
|
||||||
if (document.getElementById("popupMenu").style.display == "none") {
|
|
||||||
if (!document.fullscreen) {
|
|
||||||
if (!video.paused) {
|
|
||||||
video.pause();
|
|
||||||
if (qua != "medium") {
|
|
||||||
aud.pause();
|
|
||||||
}
|
|
||||||
playPauseButton.innerHTML = playSVG;
|
|
||||||
} else {
|
|
||||||
video.play();
|
|
||||||
if (qua != "medium") {
|
|
||||||
aud.play();
|
|
||||||
}
|
|
||||||
playPauseButton.innerHTML = pauseSVG;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
document.getElementById("popupMenu").style.display = "none";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
playPauseButton.addEventListener("click", () => {
|
|
||||||
toggleVideo();
|
|
||||||
});
|
|
||||||
|
|
||||||
video.addEventListener("pause", () => {
|
|
||||||
if (qua != "medium") {
|
|
||||||
aud.pause();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
video.addEventListener("play", () => {
|
|
||||||
if (qua != "medium") {
|
|
||||||
aud.play();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
video.addEventListener("click", toggleVideo);
|
|
||||||
|
|
||||||
video.addEventListener("dblclick", () => {
|
|
||||||
document.documentElement.requestFullscreen();
|
|
||||||
});
|
|
||||||
|
|
||||||
function handleVolumeChange(element) {
|
|
||||||
switch (element.volume) {
|
|
||||||
case 1:
|
|
||||||
element.volume = 0;
|
|
||||||
document.querySelector("#muteOption #new").innerText = "25%";
|
|
||||||
document.querySelector("#muteOption #current").innerText = "0%";
|
|
||||||
break;
|
|
||||||
case 0:
|
|
||||||
element.volume = 0.25;
|
|
||||||
document.querySelector("#muteOption #new").innerText = "50%";
|
|
||||||
document.querySelector("#muteOption #current").innerText = "25%";
|
|
||||||
break;
|
|
||||||
case 0.25:
|
|
||||||
element.volume = 0.5;
|
|
||||||
document.querySelector("#muteOption #new").innerText = "75%";
|
|
||||||
document.querySelector("#muteOption #current").innerText = "50%";
|
|
||||||
break;
|
|
||||||
case 0.5:
|
|
||||||
element.volume = 0.75;
|
|
||||||
document.querySelector("#muteOption #new").innerText = "100%";
|
|
||||||
document.querySelector("#muteOption #current").innerText = "75%";
|
|
||||||
break;
|
|
||||||
case 0.75:
|
|
||||||
element.volume = 1;
|
|
||||||
document.querySelector("#muteOption #new").innerText = "0%";
|
|
||||||
document.querySelector("#muteOption #current").innerText = "100%";
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
element.volume = 1;
|
|
||||||
document.querySelector("#muteOption #new").innerText = "0%";
|
|
||||||
document.querySelector("#muteOption #current").innerText = "100%";
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
document.getElementById("muteOption").addEventListener("click", () => {
|
|
||||||
if (qua != "medium") {
|
|
||||||
handleVolumeChange(aud);
|
|
||||||
} else {
|
|
||||||
handleVolumeChange(video);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
document.getElementById("syncOption").addEventListener("click", () => {
|
|
||||||
aud.pause();
|
|
||||||
video.pause();
|
|
||||||
playPauseButton.innerHTML = playSVG;
|
|
||||||
video.currentTime > aud.currentTime ? aud.currentTime = video.currentTime : video.currentTime = aud.currentTime;
|
|
||||||
playPauseButton.innerHTML = pauseSVG;
|
|
||||||
});
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
if (!didFirstTimePlay) {
|
|
||||||
video.addEventListener("seeked", (event) => {
|
|
||||||
setTimeout(() => {
|
|
||||||
canPlayPause = true;
|
|
||||||
if (video.currentTime == 0 || aud.currentTime == 0) return;
|
|
||||||
video.pause();
|
|
||||||
aud.pause();
|
|
||||||
playPauseButton.innerHTML = playSVG;
|
|
||||||
}, 1);
|
|
||||||
});
|
|
||||||
aud.addEventListener("seeked", (event) => {
|
|
||||||
setTimeout(() => {
|
|
||||||
if (video.currentTime == 0 || aud.currentTime == 0) return;
|
|
||||||
video.pause();
|
|
||||||
aud.pause();
|
|
||||||
playPauseButton.innerHTML = playSVG;
|
|
||||||
}, 1);
|
|
||||||
});
|
|
||||||
didFirstTimePlay = true;
|
|
||||||
}
|
|
||||||
}, 100);
|
|
||||||
|
|
||||||
document.addEventListener("fullscreenchange", function() {
|
|
||||||
if (document.fullscreen) {
|
|
||||||
video.controlsList = "noplaybackrate nodownload";
|
|
||||||
window.onscroll = function() { window.scrollTo(0, 0); };
|
|
||||||
document.documentElement.style.overflow = "hidden";
|
|
||||||
video.controls = true;
|
|
||||||
}
|
|
||||||
if (!document.fullscreen) {
|
|
||||||
video.controlsList = "";
|
|
||||||
window.onscroll = null;
|
|
||||||
document.documentElement.style.overflow = null;
|
|
||||||
video.controls = false;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
video.addEventListener("fullscreenchange", () => {
|
|
||||||
video.fullscreen = false;
|
|
||||||
document.exitFullscreen();
|
|
||||||
});
|
|
||||||
|
|
||||||
video.addEventListener("contextmenu", (event) => {
|
|
||||||
if (document.fullscreen) {
|
|
||||||
event.preventDefault();
|
|
||||||
const popupMenu = document.getElementById('popupMenu');
|
|
||||||
if (popupMenu) {
|
|
||||||
const xPosition = event.clientX + window.pageXOffset;
|
|
||||||
const yPosition = event.clientY + window.pageYOffset;
|
|
||||||
popupMenu.style.left = `${xPosition}px`;
|
|
||||||
popupMenu.style.top = `${yPosition}px`;
|
|
||||||
}
|
|
||||||
popupMenu.style.display = "block";
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
function startPlayback() {
|
|
||||||
seekbar.max = video.duration;
|
|
||||||
const timestamps = document.getElementById("timestamps");
|
const timestamps = document.getElementById("timestamps");
|
||||||
timestamps.innerText = `${csts(video.currentTime)}/${csts(video.duration)}`;
|
video.addEventListener("timeupdate", (event) => {
|
||||||
|
seekbar.value = event.target.currentTime;
|
||||||
try {
|
timestamps.innerText = shouldUseRemaining ? `${cstsRemaining(video.duration, video.currentTime)}/${csts(video.duration)}` : `${csts(video.currentTime)}/${csts(video.duration)}`;
|
||||||
playPauseButton.innerHTML = pauseSVG;
|
});
|
||||||
vid.play();
|
timestamps.addEventListener("mouseover", () => {
|
||||||
aud.play();
|
shouldUseRemaining = true;
|
||||||
didFirstTimePlay = true;
|
timestamps.innerText = `${cstsRemaining(video.duration, video.currentTime)}/${csts(video.duration)}`;
|
||||||
} catch {}
|
});
|
||||||
|
timestamps.addEventListener("mouseout", () => {
|
||||||
if (!setTime) {
|
shouldUseRemaining = false;
|
||||||
aud.currentTime = 0;
|
timestamps.innerText = `${csts(video.currentTime)}/${csts(video.duration)}`;
|
||||||
vid.currentTime = 0;
|
});
|
||||||
seekbar.value = 0;
|
// test
|
||||||
setTime = true;
|
|
||||||
}
|
seekbar.addEventListener("input", (event) => {
|
||||||
|
video.pause()
|
||||||
setTimeout(() => {
|
|
||||||
video.addEventListener("seeking", (event) => {
|
|
||||||
if (!didFirstTimePlay) return;
|
|
||||||
if (qua != "medium") {
|
|
||||||
video.pause();
|
|
||||||
canPlayPause = false;
|
canPlayPause = false;
|
||||||
aud.pause();
|
if(qua != "medium") {
|
||||||
aud.currentTime = event.target.currentTime;
|
aud.pause()
|
||||||
|
aud.currentTime = event.target.value
|
||||||
|
}
|
||||||
|
video.currentTime = event.target.value
|
||||||
|
canPlayPause = true;
|
||||||
|
setTimeout(()=>{
|
||||||
|
video.play();
|
||||||
|
aud.play();
|
||||||
|
}, 200)
|
||||||
|
});
|
||||||
|
|
||||||
|
// Play/Pause
|
||||||
|
|
||||||
|
const playPauseButton = document.getElementById("play-pause");
|
||||||
|
playPauseButton.innerHTML = pauseSVG;
|
||||||
|
function toggleVideo() {
|
||||||
|
if(!canPlayPause) return;
|
||||||
|
if(document.getElementById("popupMenu").style.display == "none") {
|
||||||
|
if(!document.fullscreen) {
|
||||||
|
if(!video.paused) {
|
||||||
|
video.pause(); if(qua != "medium") { aud.pause(); } playPauseButton.innerHTML = playSVG;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
video.play(); if(qua != "medium") { aud.play(); } playPauseButton.innerHTML = pauseSVG;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
document.getElementById("popupMenu").style.display = "none"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
playPauseButton.addEventListener("click", () => {
|
||||||
|
toggleVideo()
|
||||||
|
});
|
||||||
|
video.addEventListener("pause", ()=>{if(qua != "medium") {aud.pause()}});
|
||||||
|
video.addEventListener("play", ()=>{if(qua != "medium") {aud.play()}})
|
||||||
|
video.addEventListener("click", toggleVideo);
|
||||||
|
video.addEventListener("dblclick", () => {
|
||||||
|
document.documentElement.requestFullscreen();
|
||||||
|
});
|
||||||
|
function handleVolumeChange(element) {
|
||||||
|
switch (element.volume) {
|
||||||
|
case 1:
|
||||||
|
element.volume = 0;
|
||||||
|
document.querySelector("#muteOption #new").innerText = "25%"
|
||||||
|
document.querySelector("#muteOption #current").innerText = "0%"
|
||||||
|
break;
|
||||||
|
case 0:
|
||||||
|
element.volume = 0.25;
|
||||||
|
document.querySelector("#muteOption #new").innerText = "50%"
|
||||||
|
document.querySelector("#muteOption #current").innerText = "25%"
|
||||||
|
break;
|
||||||
|
case 0.25:
|
||||||
|
element.volume = 0.5;
|
||||||
|
document.querySelector("#muteOption #new").innerText = "75%"
|
||||||
|
document.querySelector("#muteOption #current").innerText = "50%"
|
||||||
|
break;
|
||||||
|
case 0.5:
|
||||||
|
element.volume = 0.75;
|
||||||
|
document.querySelector("#muteOption #new").innerText = "100%"
|
||||||
|
document.querySelector("#muteOption #current").innerText = "75%"
|
||||||
|
break;
|
||||||
|
case 0.75:
|
||||||
|
element.volume = 1;
|
||||||
|
document.querySelector("#muteOption #new").innerText = "0%"
|
||||||
|
document.querySelector("#muteOption #current").innerText = "100%"
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
element.volume = 1;
|
||||||
|
document.querySelector("#muteOption #new").innerText = "0%"
|
||||||
|
document.querySelector("#muteOption #current").innerText = "100%"
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
document.getElementById("muteOption").addEventListener("click", () => {
|
||||||
|
if(qua != "medium") {
|
||||||
|
handleVolumeChange(aud)
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
handleVolumeChange(video)
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}, 500);
|
document.getElementById("syncOption").addEventListener("click", () => {
|
||||||
}
|
aud.pause(); video.pause(); playPauseButton.innerHTML = playSVG;
|
||||||
|
video.currentTime > aud.currentTime ? aud.currentTime = video.currentTime : video.currentTime = aud.currentTime;
|
||||||
const aud = document.getElementById("aud");
|
playPauseButton.innerHTML = pauseSVG;
|
||||||
const vid = document.getElementById("video");
|
});
|
||||||
|
setTimeout(()=>{
|
||||||
function shouldPlay() {
|
if(!didFirstTimePlay) {
|
||||||
if (vid.readyState === HTMLMediaElement.HAVE_ENOUGH_DATA && aud.readyState === HTMLMediaElement.HAVE_ENOUGH_DATA) {
|
video.addEventListener("seeked", (event) => {
|
||||||
startPlayback();
|
setTimeout(()=>{
|
||||||
|
canPlayPause = true;
|
||||||
|
if(video.currentTime==0||aud.currentTime==0) return;
|
||||||
|
video.pause(); aud.pause(); playPauseButton.innerHTML = playSVG;
|
||||||
|
},1)
|
||||||
|
});
|
||||||
|
aud.addEventListener("seeked", (event) => {
|
||||||
|
setTimeout(()=>{
|
||||||
|
if(video.currentTime==0||aud.currentTime==0) return;
|
||||||
|
video.pause(); aud.pause(); playPauseButton.innerHTML = playSVG;
|
||||||
|
},1)
|
||||||
|
});
|
||||||
|
didFirstTimePlay = true;
|
||||||
|
}
|
||||||
|
},100)
|
||||||
|
document.addEventListener("fullscreenchange", function() {
|
||||||
|
if(document.fullscreen) {
|
||||||
|
video.controlsList = "noplaybackrate nodownload"
|
||||||
|
window.onscroll = function () { window.scrollTo(0, 0); };
|
||||||
|
document.documentElement.style.overflow = "hidden"
|
||||||
|
video.controls = true;
|
||||||
|
}
|
||||||
|
if(!document.fullscreen) {
|
||||||
|
video.controlsList = ""
|
||||||
|
window.onscroll = null;
|
||||||
|
document.documentElement.style.overflow = null
|
||||||
|
video.controls = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
video.addEventListener("fullscreenchange", () => {
|
||||||
|
video.fullscreen = false;
|
||||||
|
document.exitFullscreen();
|
||||||
|
});
|
||||||
|
video.addEventListener("contextmenu", (event) => {
|
||||||
|
if(document.fullscreen) {
|
||||||
|
event.preventDefault()
|
||||||
|
const popupMenu = document.getElementById('popupMenu');
|
||||||
|
if (popupMenu) {
|
||||||
|
const xPosition = event.clientX + window.pageXOffset;
|
||||||
|
const yPosition = event.clientY + window.pageYOffset;
|
||||||
|
popupMenu.style.left = `${xPosition}px`;
|
||||||
|
popupMenu.style.top = `${yPosition}px`;
|
||||||
|
}
|
||||||
|
popupMenu.style.display = "block"
|
||||||
|
}
|
||||||
|
});
|
||||||
|
function startPlayback() {
|
||||||
|
// Final prepare
|
||||||
|
seekbar.max = video.duration
|
||||||
|
const timestamps = document.getElementById("timestamps");
|
||||||
|
timestamps.innerText = `${csts(video.currentTime)}/${csts(video.duration)}`;
|
||||||
|
|
||||||
|
// Show controls
|
||||||
|
try {
|
||||||
|
playPauseButton.innerHTML = pauseSVG;
|
||||||
|
vid.play();
|
||||||
|
aud.play();
|
||||||
|
didFirstTimePlay = true;
|
||||||
|
|
||||||
|
}
|
||||||
|
catch {}
|
||||||
|
|
||||||
|
if(!setTime) {
|
||||||
|
//FIXME: saved playback intentionally overwritten
|
||||||
|
aud.currentTime = 0
|
||||||
|
vid.currentTime = 0
|
||||||
|
seekbar.value = 0
|
||||||
|
setTime = true
|
||||||
|
}
|
||||||
|
setTimeout(()=>{
|
||||||
|
video.addEventListener("seeking", (event) => {
|
||||||
|
if(!didFirstTimePlay) return;
|
||||||
|
if(qua != "medium") {
|
||||||
|
video.pause()
|
||||||
|
canPlayPause = false;
|
||||||
|
aud.pause()
|
||||||
|
aud.currentTime = event.target.currentTime
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}, 500)
|
||||||
}
|
}
|
||||||
}
|
const aud = document.getElementById("aud");
|
||||||
|
const vid = document.getElementById("video");
|
||||||
aud.addEventListener("canplaythrough", shouldPlay);
|
function shouldPlay() {
|
||||||
vid.addEventListener("canplaythrough", shouldPlay);
|
if(vid.readyState === HTMLMediaElement.HAVE_ENOUGH_DATA && aud.readyState === HTMLMediaElement.HAVE_ENOUGH_DATA) {
|
||||||
});
|
startPlayback();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
aud.addEventListener("canplaythrough", shouldPlay);
|
||||||
|
vid.addEventListener("canplaythrough", shouldPlay);
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
<% if(shortsui) { %>
|
<% if(shortsui) { %>
|
||||||
<script>
|
<script>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue