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)

>>29380
In my experience, the autoplay for the videos needs to be nudged a little bit to work. Play a video normally by clicking on it. Then, autoplay on hove will work for the remainder of the videos on the page.

Demo

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)

>>29381
It might just be autoplay on mp4 files that's slightly buggy.

>>29380
This mp4 doesn't autoplay on first try. I have to manually click it once. Then, every subsequent hover will autoplay.

>>29382
This webm autoplays every time. No nudging needed.

>>29384
Videos with different codecs might behave differently.

>>29384
Cheers.

>>29385
If I knew this existed, I wouldn't have written
>>29383
.

It was a good little learning exercise, I guess.

>>29385
- It's interesting that we both decided to position the hovered media in the same spot (the top right).
- More interesting is that autoplay on the mp4 works for your script on the first try.
- I have to look into that to see what you did differently.
- I like the settings UI, too.
- I've never made a settings UI for any of my userscripts, but it's something that would be nice to have sometimes.

>>29381
I tried this in Brave, and autoplay seems to be fine from the start. No nudging needed.

>>29388
You learned something new. That's the most important part of it.
And next time you find something annoying about a website, you'll have a much easier time fixing it with a userscript too.

>>29389
If new posts are loaded throug page auto refreshing, the script isn't applied, as it only runs once. That's what the MutationObserver handles.
Moreover, posts present on the page when you load the thread, and posts which gets added during auto-refresh, varies slightly.

I made a rough proof-of-concept that tries to fix tiktok embeds here. The code is too long to post, so you can find it here:

https://git.vern.cc/gg/endchan-scripts

Example
>>>/jp/1507
https://www.tiktok.com/@mina14504/video/7546151220046613776 [Embed]

It's really rough, but it does manage to successfully embed tiktok videos.

>>29425
Thanks, I pass it on.

Скрипт на скрытие Капсодауна

Работает на Tampermonkey (как минимум).
Распространяется на основной домен, на magrathea, а также .onion'ы.

Ссылка::
https://pastebin.com/XcCnMUru

Спасибо bb-мочуху за бездействие ^^