Version 1.2
- Works on both endchan.org and endchan.net.
- Fixed bug when overlapping hovered elements confused the script.


// UserScript
// @name        endchan.org media on hover
// @namespace   Violentmonkey Scripts
// @match       https://endchan.*/*/res/*.html
// @match       https://endchan.*/*/
// @grant       none
// @version     1.2
// @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 = ${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()
  }
}

// https://stackoverflow.com/a/47460565
const css = `
#hoverImage {
  display: none;
  pointer-events: none;
  position: fixed;
  top: 0;
  right: 0;
}

#hoverImage.enabled {
  display: block;
}

#hoverImage img {
  max-width: 100vw;
  max-height: 100vh;
}

#hoverVideo {
  display: none;
  pointer-events: 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)