☰

subscene preview Image

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

  1. // ==UserScript==
  2. // @name         subscene preview Image
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.2
  5. // @description  Show image preview next to the titles by hovering the mouse.
  6. // @author       dr.bobo0
  7. // @match        https://subscene.com/u/*/subtitles*
  8. // @icon         data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwEHAQkIAQgKCgkLDRYPDQEMDRsUFQQWIB0iIiAdHx8kKDQsJCYxJx8fLT0tMTU3Ojo6Iys/RD84QzQ5OjcBCgoKDQwNGg8PGjclHyU3Kzc3Kzc3Nzc3Nzc3Nys3Nzc3Nzc3Kzc3NzcrNys3Nzc3Nzc3Nzc3Nzc3Nzc3Nys3N//AABEIABAAEAMBIgACEQEDEQH/xAAWAAEBAQAAAAAAAAAAAAAAAAAFBAL/xAAqEAAABAQEBAcAAAAAAAAAAAABAgMRBAUGBwATITEIQVFxEhQXGCIjMv/EABQBAQAAAAAAAAAAAAAAAAAAAAX/xAAXEQADAQAAAAAAAAAAAAAAAAABAhIA/9oADAMBAAIRAxEAPwA6ioCxs04oPLXuAD/ScyFsTKCmE7VD8kEwag+u3TB1Sp0lD8QyyNKS9aX5bAeyiqnjGEM2rDzDpvjMjX4WE7hH92JIrJMQQTrOFMAHlZ+RmHdu+KK2n1BTy7cMe3OedOGhiIeqkQ2bOhB/kZu+ECTWMVRG/9k=
  9. // @grant        none
  10. // ==/UserScript==
  11. document.querySelectorAll('a').forEach(link => {
  12.   link.addEventListener("mouseover", function(event) {
  13.     let previewContainer = document.createElement("div");
  14.     previewContainer.style.position = "fixed";
  15.     previewContainer.style.display = "none";
  16.     previewContainer.style.transition = "opacity 0.1s ease-in-out";
  17.     previewContainer.style.opacity = 0;
  18.     previewContainer.style.width = "154px";
  19.     previewContainer.style.height = "231px";
  20.     previewContainer.style.overflow = "hidden";
  21.     document.body.appendChild(previewContainer);
  22.  
  23.     var url = this.href;
  24.     var cachedImage = localStorage.getItem(url);
  25.  
  26.     if (cachedImage) {
  27.       previewContainer.innerHTML = `<img style="width: 100%; height: 100%; border-radius: 8px;" src="${cachedImage}"/>`;
  28.       document.addEventListener("mousemove", function (event) {
  29.         previewContainer.style.top = event.clientY + 20 + "px";
  30.         previewContainer.style.left = event.clientX + 20 + "px";
  31.  
  32.         // check if preview div is too close to the edge of the screen
  33.         if (event.clientX + previewContainer.offsetWidth + 20 > window.innerWidth) {
  34.           previewContainer.style.left = window.innerWidth - previewContainer.offsetWidth - 20 + "px";
  35.         }
  36.         if (event.clientY + previewContainer.offsetHeight + 20 > window.innerHeight) {
  37.           previewContainer.style.top = window.innerHeight - previewContainer.offsetHeight - 20 + "px";
  38.         }
  39.       });
  40.       previewContainer.style.display = "block";
  41.       setTimeout(function () {
  42.         previewContainer.style.opacity = 1;
  43.       }, 0);
  44.     } else {
  45.       var xhr = new XMLHttpRequest();
  46.       xhr.open("GET", url);
  47.       xhr.responseType = "document";
  48.  
  49.       xhr.onload = function() {
  50.         let preview = xhr.response.querySelector(".poster a img");
  51.         previewContainer.innerHTML = `<img style="width: 100%; height: 100%; border-radius: 8px;" src="${preview.getAttribute("src")}"/>`;
  52.         localStorage.setItem(url, preview.getAttribute("src"));
  53.       };
  54.  
  55.       document.addEventListener("mousemove", function (event) {
  56.         previewContainer.style.top = event.clientY + 20 + "px";
  57.         previewContainer.style.left = event.clientX + 20 + "px";
  58.  
  59.         // check if preview div is too close to the edge of the screen
  60.         if (event.clientX + previewContainer.offsetWidth + 20 > window.innerWidth) {
  61.           previewContainer.style.left = window.innerWidth - previewContainer.offsetWidth - 20 + "px";
  62.         }
  63.         if (event.clientY + previewContainer.offsetHeight + 20 > window.innerHeight) {
  64.           previewContainer.style.top = window.innerHeight - previewContainer.offsetHeight - 20 + "px";
  65.         }
  66.       });
  67.  
  68.       xhr.send();
  69.       previewContainer.style.display = "block";
  70.       setTimeout(function () {
  71.         previewContainer.style.opacity = 1;
  72.       }, 0);
  73.     }
  74.  
  75.     link.addEventListener("mouseout", function() {
  76.       previewContainer.style.opacity = 0;
  77.       document.removeEventListener("mousemove", function (event) {});
  78.       setTimeout(function () {
  79.         previewContainer.style.display = "none";
  80.         previewContainer.remove();
  81.       }, 300);
  82.     });
  83.   });
  84. });