WebFM/src/core/static/js/video-events.js

185 lines
5.2 KiB
JavaScript
Raw Normal View History

2021-02-08 02:07:13 +00:00
let fullScreenState = 0;
let clicktapwait = 200;
let shouldPlay = null;
let controlsTimeout = null;
let canHideControls = true;
const getTimeFormatted = (duration = null) => {
if (duration == null) { return "00:00"; }
2021-02-10 03:18:38 +00:00
const hours = (duration / 3600).toFixed(2).split(".")[0];
const minutes = (duration / 60).toFixed(2).split(".")[0];
const time = (duration / 60).toFixed(2)
const seconds = Math.floor( (time - Math.floor(time) ) * 60);
2021-02-08 02:07:13 +00:00
return hours + ":" + minutes + ":" + seconds;
}
const pauseVideo = () => {
2021-02-10 03:18:38 +00:00
const video = document.getElementById("video");
2021-02-08 02:07:13 +00:00
video.style.cursor = '';
video.pause();
}
const togglePlay = (video) => {
shouldPlay = setTimeout(function () {
let controls = document.getElementById("video-controls");
shouldPlay = null;
if (video.paused) {
video.style.cursor = 'none';
controls.style.display = "none";
video.play();
} else {
video.style.cursor = '';
controls.style.display = "";
video.pause();
}
}, 300);
}
2021-02-10 03:18:38 +00:00
const showControls = () => {
const video = document.getElementById("video");
const controls = document.getElementById("video-controls");
video.style.cursor = '';
controls.style.display = "";
if (controlsTimeout) {
clearTimeout(controlsTimeout);
}
controlsTimeout = setTimeout(function () {
if (!video.paused) {
if (canHideControls) {
video.style.cursor = 'none';
controls.style.display = "none";
controlsTimeout = null;
} else {
showControls();
}
}
}, 3000);
}
const setFullscreenSettings = (parentElm, video) => {
parentElm.requestFullscreen();
video.classList.remove("card-img-top");
video.classList.remove("viewer");
video.style.cursor = 'none';
video.style.height = 'inherit';
}
const unsetFullscreenSettings = (video) => {
video.classList.add("card-img-top");
video.classList.add("viewer");
video.style.cursor = '';
video.style.height = '';
}
2021-02-08 02:07:13 +00:00
const toggleFullscreen = (video) => {
containerElm = document.getElementById("video-container");
parentElm = video.parentElement;
2021-02-10 03:18:38 +00:00
if (video.requestFullscreen || video.webkitRequestFullscreen || video.msRequestFullscreen) {
setFullscreenSettings(parentElm, video);
2021-02-08 02:07:13 +00:00
}
if (fullScreenState == 2) {
if (document.exitFullscreen) {
document.exitFullscreen();
2021-02-10 03:18:38 +00:00
unsetFullscreenSettings(video);
2021-02-08 02:07:13 +00:00
} else if (document.webkitExitFullscreen) { /* Safari */
document.webkitExitFullscreen();
2021-02-10 03:18:38 +00:00
unsetFullscreenSettings(video);
2021-02-08 02:07:13 +00:00
} else if (document.msExitFullscreen) { /* IE11 */
document.msExitFullscreen();
2021-02-10 03:18:38 +00:00
unsetFullscreenSettings(video);
2021-02-08 02:07:13 +00:00
}
fullScreenState = 0;
}
fullScreenState += 1;
}
const toggleVolumeControl = () => {
const volume = document.getElementById("volume-slider");
if (volume.style.display === "none") {
volume.style.display = "";
} else {
volume.style.display = "none";
}
}
2021-02-10 03:18:38 +00:00
$("#video").on("loadedmetadata", function(eve){
const video = eve.target;
2021-02-08 02:07:13 +00:00
let videoDuration = document.getElementById("videoDuration");
videoDuration.innerText = getTimeFormatted(video.duration);
});
2021-02-10 03:18:38 +00:00
$("#video").on("click", function(eve){
2021-02-08 02:07:13 +00:00
const video = eve.target;
if(!shouldPlay) {
shouldPlay = setTimeout( function() {
shouldPlay = null;
togglePlay(video);
}, clicktapwait);
} else {
clearTimeout(shouldPlay); // Stop single tap callback
shouldPlay = null;
toggleFullscreen(video);
}
eve.preventDefault();
});
2021-02-10 03:18:38 +00:00
$("#video").on("touchend", function(eve){
2021-02-08 02:07:13 +00:00
const video = eve.target;
if(!shouldPlay) {
shouldPlay = setTimeout( function() {
shouldPlay = null;
togglePlay(video);
}, clicktapwait);
} else {
clearTimeout(shouldPlay); // Stop single tap callback
shouldPlay = null;
toggleFullscreen(video);
}
eve.preventDefault();
});
2021-02-10 03:18:38 +00:00
$( "#video" ).bind( "timeupdate", async function(eve) {
2021-02-08 02:07:13 +00:00
let videoDuration = document.getElementById("videoCurrentTime");
const video = eve.target;
const seekto = document.getElementById("seek-slider");
const vt = video.currentTime * (100 / video.duration);
seekto.value = vt;
videoDuration.innerText = getTimeFormatted(video.currentTime);
});
$( "#seek-slider" ).bind( "change", async function(eve) {
const slider = eve.target;
2021-02-10 03:18:38 +00:00
let video = document.getElementById("video");
2021-02-08 02:07:13 +00:00
let seekto = video.duration * (slider.value / 100);
video.currentTime = seekto;
});
$( "#volume-slider" ).bind( "change", async function(eve) {
const slider = eve.target;
2021-02-10 03:18:38 +00:00
let video = document.getElementById("video");
2021-02-08 02:07:13 +00:00
let volumeto = slider.value;
video.volume = volumeto;
});
$( "#video-controls" ).bind( "mouseenter", async function(eve) { canHideControls = false; });
$( "#video-controls" ).bind( "mouseleave", async function(eve) { canHideControls = true; });