☰

oxtorrent preview Image

Show image preview next to the titles by hovering the mouse.

Version vom 17.05.2023. Aktuellste Version

// ==UserScript==
// @name         oxtorrent preview Image
// @namespace    http://tampermonkey.net/
// @version      1.1
// @description  Show image preview next to the titles by hovering the mouse.
// @author       dr.bobo0
// @match        https://www.oxtorrent.co/*
// @icon         data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAAAAAAeW/F+AAAAIGNIUk0AAHomAACAhAAA+gAAAIDoAAB1MAAA6mAAADqYAAAXcJy6UTwAAAACYktHRAD/h4/MvwAAAAd0SU1FB+cFERYzNsSqEXsAAADBSURBVCjPY7RiwAeYGGgozQKhPHjiUcUXvjjCwMDAwGjFwMCgUi6BqfFC5xcGBmZZBgaefiEs5krwnIbY7cGD1V4PCYi0NQ532UCcpgLhHVl7ByocD3cKC1zti04Y68iXZkx/H0FyNJZg+Ypk6wvqBCqdpLkRgjwSmNI2CGkDLLolyqGBy+CBiHsWBgaGOxBxGyT9yLovMGAHRyDSO79gld3xApJavtzVwpIgLkz9BU1rDAwh4h6okshJkfaBihUAAMGoJCE4fyJaAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDIzLTA1LTE3VDIyOjUxOjUzKzAwOjAwF57XXQAAACV0RVh0ZGF0ZTptb2RpZnkAMjAyMy0wNS0xN1QyMjo1MTo1MyswMDowMGbDb+EAAAAodEVYdGRhdGU6dGltZXN0YW1wADIwMjMtMDUtMTdUMjI6NTE6NTQrMDA6MDD0cXCwAAAAAElFTkSuQmCC
// @grant        none
// ==/UserScript==
document.querySelectorAll("td > a[href^='/torrent/']").forEach(link => {
  link.addEventListener("mouseover", function(event) {
    let previewContainer = document.createElement("div");
    previewContainer.style.position = "fixed";
    previewContainer.style.display = "none";
    previewContainer.style.transition = "opacity 0.1s ease-in-out";
    previewContainer.style.opacity = 0;
    previewContainer.style.width = "216px";
    previewContainer.style.height = "307px";
    previewContainer.style.overflow = "hidden";
    document.body.appendChild(previewContainer);
 
    var url = this.href;
    var cachedImage = localStorage.getItem(url);
 
    if (cachedImage) {
      previewContainer.innerHTML = `<img style="width: 100%; height: 100%;" src="${cachedImage}"/>`;
      document.addEventListener("mousemove", function (event) {
        previewContainer.style.top = event.clientY + 20 + "px";
        previewContainer.style.left = event.clientX + 20 + "px";
        
        // Check if preview container is too close to edge of viewport
        if (previewContainer.getBoundingClientRect().right > window.innerWidth) {
          previewContainer.style.left = (window.innerWidth - previewContainer.offsetWidth - 20) + "px";
        }
        if (previewContainer.getBoundingClientRect().bottom > window.innerHeight) {
          previewContainer.style.top = (window.innerHeight - previewContainer.offsetHeight - 20) + "px";
        }
      });
      previewContainer.style.display = "block";
      setTimeout(function () {
        previewContainer.style.opacity = 1;
      }, 0);
    } else {
      var xhr = new XMLHttpRequest();
      xhr.open("GET", url);
      xhr.responseType = "document";
 
      xhr.onload = function() {
        let preview = xhr.response.querySelector("#torrentsimage img");
        previewContainer.innerHTML = `<img style="width: 100%; height: 100%;" src="${preview.getAttribute("src")}"/>`;
        localStorage.setItem(url, preview.getAttribute("src"));
      };
 
      document.addEventListener("mousemove", function (event) {
        previewContainer.style.top = event.clientY + 20 + "px";
        previewContainer.style.left = event.clientX + 20 + "px";
        
        // Check if preview container is too close to edge of viewport
        if (previewContainer.getBoundingClientRect().right > window.innerWidth) {
          previewContainer.style.left = (window.innerWidth - previewContainer.offsetWidth - 20) + "px";
        }
        if (previewContainer.getBoundingClientRect().bottom > window.innerHeight) {
          previewContainer.style.top = (window.innerHeight - previewContainer.offsetHeight - 20) + "px";
        }
      });
 
      xhr.send();
      previewContainer.style.display = "block";
      setTimeout(function () {
        previewContainer.style.opacity = 1;
      }, 0);
    }
 
    link.addEventListener("mouseout", function() {
      previewContainer.style.opacity = 0;
      document.removeEventListener("mousemove", function (event) {});
      setTimeout(function () {
        previewContainer.style.display = "none";
        previewContainer.remove();
      }, 300);
    });
  });
});