From 85b03c0fb0fe808fdefc6eedbc93db1c8cbf4dc8 Mon Sep 17 00:00:00 2001 From: Zankaria Date: Mon, 5 Aug 2024 19:20:55 +0200 Subject: [PATCH] expand-video.js: format --- js/expand-video.js | 438 ++++++++++++++++++++++++--------------------- 1 file changed, 230 insertions(+), 208 deletions(-) diff --git a/js/expand-video.js b/js/expand-video.js index 08b474c1..fb4c6b5f 100644 --- a/js/expand-video.js +++ b/js/expand-video.js @@ -2,243 +2,265 @@ /* Note: This code expects the global variable configRoot to be set. */ if (typeof _ == 'undefined') { - var _ = function(a) { return a; }; + var _ = function(a) { + return a; + }; } function setupVideo(thumb, url) { - if (thumb.videoAlreadySetUp) return; - thumb.videoAlreadySetUp = true; + if (thumb.videoAlreadySetUp) { + return; + } + thumb.videoAlreadySetUp = true; - var video = null; - var videoContainer, videoHide; - var expanded = false; - var hovering = false; - var loop = true; - var loopControls = [document.createElement("span"), document.createElement("span")]; - var fileInfo = thumb.parentNode.querySelector(".fileinfo"); - var mouseDown = false; + let video = null; + let videoContainer, videoHide; + let expanded = false; + let hovering = false; + let loop = true; + let loopControls = [document.createElement("span"), document.createElement("span")]; + let fileInfo = thumb.parentNode.querySelector(".fileinfo"); + let mouseDown = false; - function unexpand() { - if (expanded) { - expanded = false; - if (video.pause) video.pause(); - videoContainer.style.display = "none"; - thumb.style.display = "inline"; - video.style.maxWidth = "inherit"; - video.style.maxHeight = "inherit"; - } - } + function unexpand() { + if (expanded) { + expanded = false; + if (video.pause) { + video.pause(); + } + videoContainer.style.display = "none"; + thumb.style.display = "inline"; + video.style.maxWidth = "inherit"; + video.style.maxHeight = "inherit"; + } + } - function unhover() { - if (hovering) { - hovering = false; - if (video.pause) video.pause(); - videoContainer.style.display = "none"; - video.style.maxWidth = "inherit"; - video.style.maxHeight = "inherit"; - } - } + function unhover() { + if (hovering) { + hovering = false; + if (video.pause) { + video.pause(); + } + videoContainer.style.display = "none"; + video.style.maxWidth = "inherit"; + video.style.maxHeight = "inherit"; + } + } - // Create video element if does not exist yet - function getVideo() { - if (video == null) { - video = document.createElement("video"); - video.src = url; - video.loop = loop; - video.innerText = _("Your browser does not support HTML5 video."); + // Create video element if does not exist yet + function getVideo() { + if (video == null) { + video = document.createElement("video"); + video.src = url; + video.loop = loop; + video.innerText = _("Your browser does not support HTML5 video."); - videoHide = document.createElement("img"); - videoHide.src = configRoot + "static/collapse.gif"; - videoHide.alt = "[ - ]"; - videoHide.title = "Collapse video"; - videoHide.style.marginLeft = "-15px"; - videoHide.style.cssFloat = "left"; - videoHide.addEventListener("click", unexpand, false); + videoHide = document.createElement("img"); + videoHide.src = configRoot + "static/collapse.gif"; + videoHide.alt = "[ - ]"; + videoHide.title = "Collapse video"; + videoHide.style.marginLeft = "-15px"; + videoHide.style.cssFloat = "left"; + videoHide.addEventListener("click", unexpand, false); - videoContainer = document.createElement("div"); - videoContainer.style.paddingLeft = "15px"; - videoContainer.style.display = "none"; - videoContainer.appendChild(videoHide); - videoContainer.appendChild(video); - thumb.parentNode.insertBefore(videoContainer, thumb.nextSibling); + videoContainer = document.createElement("div"); + videoContainer.style.paddingLeft = "15px"; + videoContainer.style.display = "none"; + videoContainer.appendChild(videoHide); + videoContainer.appendChild(video); + thumb.parentNode.insertBefore(videoContainer, thumb.nextSibling); - // Dragging to the left collapses the video - video.addEventListener("mousedown", function(e) { - if (e.button == 0) mouseDown = true; - }, false); - video.addEventListener("mouseup", function(e) { - if (e.button == 0) mouseDown = false; - }, false); - video.addEventListener("mouseenter", function(e) { - mouseDown = false; - }, false); - video.addEventListener("mouseout", function(e) { - if (mouseDown && e.clientX - video.getBoundingClientRect().left <= 0) { - unexpand(); - } - mouseDown = false; - }, false); - } - } + // Dragging to the left collapses the video + video.addEventListener("mousedown", function(e) { + if (e.button == 0) mouseDown = true; + }, false); + video.addEventListener("mouseup", function(e) { + if (e.button == 0) mouseDown = false; + }, false); + video.addEventListener("mouseenter", function(e) { + mouseDown = false; + }, false); + video.addEventListener("mouseout", function(e) { + if (mouseDown && e.clientX - video.getBoundingClientRect().left <= 0) { + unexpand(); + } + mouseDown = false; + }, false); + } + } - // Clicking on thumbnail expands video - thumb.addEventListener("click", function(e) { - if (setting("videoexpand") && !e.shiftKey && !e.ctrlKey && !e.altKey && !e.metaKey) { - getVideo(); - expanded = true; - hovering = false; + // Clicking on thumbnail expands video + thumb.addEventListener("click", function(e) { + if (setting("videoexpand") && !e.shiftKey && !e.ctrlKey && !e.altKey && !e.metaKey) { + getVideo(); + expanded = true; + hovering = false; - video.style.position = "static"; - video.style.pointerEvents = "inherit"; - video.style.display = "inline"; - videoHide.style.display = "inline"; - videoContainer.style.display = "block"; - videoContainer.style.position = "static"; - video.parentNode.parentNode.removeAttribute('style'); - thumb.style.display = "none"; + video.style.position = "static"; + video.style.pointerEvents = "inherit"; + video.style.display = "inline"; + videoHide.style.display = "inline"; + videoContainer.style.display = "block"; + videoContainer.style.position = "static"; + video.parentNode.parentNode.removeAttribute('style'); + thumb.style.display = "none"; - video.muted = (setting("videovolume") == 0); - video.volume = setting("videovolume"); - video.controls = true; - if (video.readyState == 0) { - video.addEventListener("loadedmetadata", expand2, false); - } else { - setTimeout(expand2, 0); - } - video.play(); - e.preventDefault(); - } - }, false); + video.muted = (setting("videovolume") == 0); + video.volume = setting("videovolume"); + video.controls = true; + if (video.readyState == 0) { + video.addEventListener("loadedmetadata", expand2, false); + } else { + setTimeout(expand2, 0); + } + video.play(); + e.preventDefault(); + } + }, false); - function expand2() { - video.style.maxWidth = "100%"; - video.style.maxHeight = window.innerHeight + "px"; - var bottom = video.getBoundingClientRect().bottom; - if (bottom > window.innerHeight) { - window.scrollBy(0, bottom - window.innerHeight); - } - // work around Firefox volume control bug - video.volume = Math.max(setting("videovolume") - 0.001, 0); - video.volume = setting("videovolume"); - } + function expand2() { + video.style.maxWidth = "100%"; + video.style.maxHeight = window.innerHeight + "px"; + var bottom = video.getBoundingClientRect().bottom; + if (bottom > window.innerHeight) { + window.scrollBy(0, bottom - window.innerHeight); + } + // work around Firefox volume control bug + video.volume = Math.max(setting("videovolume") - 0.001, 0); + video.volume = setting("videovolume"); + } - // Hovering over thumbnail displays video - thumb.addEventListener("mouseover", function(e) { - if (setting("videohover")) { - getVideo(); - expanded = false; - hovering = true; + // Hovering over thumbnail displays video + thumb.addEventListener("mouseover", function(e) { + if (setting("videohover")) { + getVideo(); + expanded = false; + hovering = true; - var docRight = document.documentElement.getBoundingClientRect().right; - var thumbRight = thumb.querySelector("img, video").getBoundingClientRect().right; - var maxWidth = docRight - thumbRight - 20; - if (maxWidth < 250) maxWidth = 250; + let docRight = document.documentElement.getBoundingClientRect().right; + let thumbRight = thumb.querySelector("img, video").getBoundingClientRect().right; + let maxWidth = docRight - thumbRight - 20; + if (maxWidth < 250) { + maxWidth = 250; + } - video.style.position = "fixed"; - video.style.right = "0px"; - video.style.top = "0px"; - var docRight = document.documentElement.getBoundingClientRect().right; - var thumbRight = thumb.querySelector("img, video").getBoundingClientRect().right; - video.style.maxWidth = maxWidth + "px"; - video.style.maxHeight = "100%"; - video.style.pointerEvents = "none"; + video.style.position = "fixed"; + video.style.right = "0px"; + video.style.top = "0px"; + docRight = document.documentElement.getBoundingClientRect().right; + thumbRight = thumb.querySelector("img, video").getBoundingClientRect().right; + video.style.maxWidth = maxWidth + "px"; + video.style.maxHeight = "100%"; + video.style.pointerEvents = "none"; - video.style.display = "inline"; - videoHide.style.display = "none"; - videoContainer.style.display = "inline"; - videoContainer.style.position = "fixed"; + video.style.display = "inline"; + videoHide.style.display = "none"; + videoContainer.style.display = "inline"; + videoContainer.style.position = "fixed"; - video.muted = (setting("videovolume") == 0); - video.volume = setting("videovolume"); - video.controls = false; - video.play(); - } - }, false); + video.muted = (setting("videovolume") == 0); + video.volume = setting("videovolume"); + video.controls = false; + video.play(); + } + }, false); - thumb.addEventListener("mouseout", unhover, false); + thumb.addEventListener("mouseout", unhover, false); - // Scroll wheel on thumbnail adjusts default volume - thumb.addEventListener("wheel", function(e) { - if (setting("videohover")) { - var volume = setting("videovolume"); - if (e.deltaY > 0) volume -= 0.1; - if (e.deltaY < 0) volume += 0.1; - if (volume < 0) volume = 0; - if (volume > 1) volume = 1; - if (video != null) { - video.muted = (volume == 0); - video.volume = volume; - } - changeSetting("videovolume", volume); - e.preventDefault(); - } - }, false); + // Scroll wheel on thumbnail adjusts default volume + thumb.addEventListener("wheel", function(e) { + if (setting("videohover")) { + var volume = setting("videovolume"); + if (e.deltaY > 0) { + volume -= 0.1; + } + if (e.deltaY < 0) { + volume += 0.1; + } + if (volume < 0) { + volume = 0; + } + if (volume > 1) { + volume = 1; + } + if (video != null) { + video.muted = (volume == 0); + video.volume = volume; + } + changeSetting("videovolume", volume); + e.preventDefault(); + } + }, false); - // [play once] vs [loop] controls - function setupLoopControl(i) { - loopControls[i].addEventListener("click", function(e) { - loop = (i != 0); - thumb.href = thumb.href.replace(/([\?&])loop=\d+/, "$1loop=" + i); - if (video != null) { - video.loop = loop; - if (loop && video.currentTime >= video.duration) { - video.currentTime = 0; - } - } - loopControls[i].style.fontWeight = "bold"; - loopControls[1-i].style.fontWeight = "inherit"; - }, false); - } + // [play once] vs [loop] controls + function setupLoopControl(i) { + loopControls[i].addEventListener("click", function(e) { + loop = (i != 0); + thumb.href = thumb.href.replace(/([\?&])loop=\d+/, "$1loop=" + i); + if (video != null) { + video.loop = loop; + if (loop && video.currentTime >= video.duration) { + video.currentTime = 0; + } + } + loopControls[i].style.fontWeight = "bold"; + loopControls[1-i].style.fontWeight = "inherit"; + }, false); + } - loopControls[0].textContent = _("[play once]"); - loopControls[1].textContent = _("[loop]"); - loopControls[1].style.fontWeight = "bold"; - for (var i = 0; i < 2; i++) { - setupLoopControl(i); - loopControls[i].style.whiteSpace = "nowrap"; - fileInfo.appendChild(document.createTextNode(" ")); - fileInfo.appendChild(loopControls[i]); - } + loopControls[0].textContent = _("[play once]"); + loopControls[1].textContent = _("[loop]"); + loopControls[1].style.fontWeight = "bold"; + for (var i = 0; i < 2; i++) { + setupLoopControl(i); + loopControls[i].style.whiteSpace = "nowrap"; + fileInfo.appendChild(document.createTextNode(" ")); + fileInfo.appendChild(loopControls[i]); + } } function setupVideosIn(element) { - var thumbs = element.querySelectorAll("a.file"); - for (var i = 0; i < thumbs.length; i++) { - if (/\.webm$|\.mp4$/.test(thumbs[i].pathname)) { - setupVideo(thumbs[i], thumbs[i].href); - } else { - var m = thumbs[i].search.match(/\bv=([^&]*)/); - if (m != null) { - var url = decodeURIComponent(m[1]); - if (/\.webm$|\.mp4$/.test(url)) setupVideo(thumbs[i], url); - } - } - } + let thumbs = element.querySelectorAll("a.file"); + for (let i = 0; i < thumbs.length; i++) { + if (/\.webm$|\.mp4$/.test(thumbs[i].pathname)) { + setupVideo(thumbs[i], thumbs[i].href); + } else { + let m = thumbs[i].search.match(/\bv=([^&]*)/); + if (m != null) { + let url = decodeURIComponent(m[1]); + if (/\.webm$|\.mp4$/.test(url)) { + setupVideo(thumbs[i], url); + } + } + } + } } onready(function(){ - // Insert menu from settings.js - if (typeof settingsMenu != "undefined" && typeof Options == "undefined") - document.body.insertBefore(settingsMenu, document.getElementsByTagName("hr")[0]); + // Insert menu from settings.js + if (typeof settingsMenu != "undefined" && typeof Options == "undefined") { + document.body.insertBefore(settingsMenu, document.getElementsByTagName("hr")[0]); + } - // Setup Javascript events for videos in document now - setupVideosIn(document); + // Setup Javascript events for videos in document now + setupVideosIn(document); - // Setup Javascript events for videos added by updater - if (window.MutationObserver) { - var observer = new MutationObserver(function(mutations) { - for (var i = 0; i < mutations.length; i++) { - var additions = mutations[i].addedNodes; - if (additions == null) continue; - for (var j = 0; j < additions.length; j++) { - var node = additions[j]; - if (node.nodeType == 1) { - setupVideosIn(node); - } - } - } - }); - observer.observe(document.body, {childList: true, subtree: true}); - } + // Setup Javascript events for videos added by updater + if (window.MutationObserver) { + let observer = new MutationObserver(function(mutations) { + for (let i = 0; i < mutations.length; i++) { + let additions = mutations[i].addedNodes; + if (additions == null) { + continue; + } + for (let j = 0; j < additions.length; j++) { + let node = additions[j]; + if (node.nodeType == 1) { + setupVideosIn(node); + } + } + } + }); + observer.observe(document.body, {childList: true, subtree: true}); + } }); -