Actions
stikstikst... mp4
(3.53 MB, 576x1024 h264)
(3.53 MB, 576x1024 h264)
This is a userscript that lets you view images and videos on hover. It needs a few usability improvements, but it mostly works. // UserScript // @name endchan.org media on hover // @namespace Violentmonkey Scripts // @match https://endchan.org/*/res/*.html* // @grant none // @version 1.1 // @author - // @description Display media by hovering over it. // /UserScript function createHoverImageContainer() { const div = document.createElement("div") div.id = "hoverImage" const img = document.createElement("img") div.appendChild(img) return div } function createHoverVideoContainer() { const div = document.createElement("div") div.id = "hoverVideo" return div } function deriveVideoSrc(imgSrc) { const m = imgSrc.match(RegExp("/.media/(t_)(.*)-video(.*)")) const videoSrc = /.media/${m[2]}-video${m[3]}.${m[3]} return { src: videoSrc, type: video/${m[3]} } } function displayOnHover(ev) { const target = ev.target const parent = target.parentElement const hi = document.getElementById("hoverImage") const hii = hi.querySelector("img") const hv = document.getElementById("hoverVideo") //console.log(target, parent) if (target.tagName "IMG" && parent.classList.contains("imgLink")) { hii.src = parent.href hi.classList.add("enabled") } if (target.tagName "IMG" && parent.tagName "SPAN") { hv.classList.add("enabled") const hvv = document.createElement("video") hvv.setAttribute("controls", "true") hvv.setAttribute("autoplay", "true") hv.appendChild(hvv) const r = deriveVideoSrc(target.src) hvvs = document.createElement("source") hvvs.type = r.type hvvs.src = https://endchan.org${r.src} hvv.append(hvvs) hvv.play() } } function hideOnLeave(ev) { const target = ev.target const parent = target.parentElement const hi = document.getElementById("hoverImage") const hii = hi.querySelector("img") const hv = document.getElementById("hoverVideo") //console.log(target, parent) if (target.tagName "IMG" && parent.classList.contains("imgLink")) { hii.src = parent.href hi.classList.remove("enabled") } if (target.tagName "IMG" && parent.tagName "SPAN") { //hv.classList.remove("enabled") hvv = hv.querySelector("video") hv.classList.remove("enabled") hvv.remove() } } const css = ` #hoverImage { display: none; position: fixed; top: 0; right: 0; } #hoverImage.enabled { display: block; } #hoverImage img { max-width: 100vw; max-height: 100vh; } #hoverVideo { display: none; position: fixed; top: 0; right: 0; } #hoverVideo.enabled { display: block; } #hoverVideo video { max-width: 100vw; max-height: 100vh; } ` // Add CSS let style = document.createElement("style"); style.type = "text/css"; style.appendChild(document.createTextNode(css)); document.head.appendChild(style); // setup container for image document.body.append(createHoverImageContainer()) document.body.append(createHoverVideoContainer()) // setup event handlers document.addEventListener('mouseover', displayOnHover) document.addEventListener('mouseout', hideOnLeave)