☰

Sakugabooru Browse Fix

Replace specific img tag with video tag supporting MP4 and WEBM formats

  1. // ==UserScript==
  2. // @name         Sakugabooru Browse Fix
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.6969
  5. // @description  Replace specific img tag with video tag supporting MP4 and WEBM formats
  6. // @match        *://www.sakugabooru.com/post/browse*
  7. // @grant        none
  8. // @license MIT
  9. // ==/UserScript==
  10.  
  11. (function() {
  12.     'use strict';
  13.  
  14.     // Function to replace the img with video
  15.     function replaceImageWithVideo() {
  16.         console.log("tampermonkey script working");
  17.  
  18.         // Select the img element using a class name (or any other selector as needed)
  19.         const imgElement = document.querySelector('img.main-image');
  20.         const vidElement = document.querySelector('.vjs-tech');
  21.  
  22.         // Initialize vidSrc variable
  23.         let vidSrc = null;
  24.         let vidType = null;
  25.  
  26.         // Check if the element exists
  27.         if (imgElement && !vidElement) {
  28.             // Extract the src attribute value
  29.             const imgSrc = imgElement.getAttribute('src');
  30.  
  31.             // Check if the src ends with .mp4 or .webm
  32.             if (imgSrc && (imgSrc.endsWith('.mp4') || imgSrc.endsWith('.webm'))) {
  33.                 imgElement.style.display = 'none';
  34.                 vidSrc = imgSrc; // Store the URL in vidSrc
  35.                 vidType = imgSrc.endsWith('.mp4') ? 'video/mp4' : 'video/webm'; // Determine the video type
  36.                 console.log('Video Source:', vidSrc);
  37.  
  38.                 // Create the new video element
  39.                 const video = document.createElement('video');
  40.                 video.className = 'vjs-tech';
  41.                 video.loop = true;
  42.                 video.setAttribute('data-setup', JSON.stringify({
  43.                     autoplay: true,
  44.                     controls: true,
  45.                     playbackRates: [0.2, 0.4, 0.6, 0.8, 1],
  46.                     plugins: {
  47.                         framebyframe: {
  48.                             fps: 24.0,
  49.                             steps: [
  50.                                 { text: '< 1f', step: -1 },
  51.                                 { text: '1f >', step: 1 }
  52.                             ]
  53.                         }
  54.                     }
  55.                 }));
  56.                 video.id = 'vjs_video_3_html5_api';
  57.                 video.tabIndex = -1;
  58.                 video.autoplay = true;
  59.                 video.controls = false;
  60.  
  61.                 video.style.width = '100%';
  62.                 video.style.height = '100%';
  63.  
  64.                 // Create and append the source element
  65.                 const source = document.createElement('source');
  66.                 source.src = vidSrc;
  67.                 source.type = vidType;
  68.                 video.appendChild(source);
  69.  
  70.                 // Create and append the fallback content
  71.                 const p = document.createElement('p');
  72.                 p.className = 'vjs-no-js';
  73.                 p.innerHTML = 'To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="https://videojs.com/html5-video-support/" target="_blank" class="vjs-hidden" hidden="hidden">supports HTML5 video</a>';
  74.                 video.appendChild(p);
  75.  
  76.                 // Replace the img element with the video element
  77.                 imgElement.parentNode.parentNode.appendChild(video, imgElement);
  78.             } else {
  79.                 console.log('The src is an image');
  80.             }
  81.         } else {
  82.             console.log('Image element not found or video element already present');
  83.             // Select the image and video elements
  84.             const imgElement = document.querySelector('img.main-image');
  85.             const vidElement = document.querySelector('.vjs-tech');
  86.  
  87.             // Get the src attributes
  88.             const imgSrc = imgElement ? imgElement.getAttribute('src') : null;
  89.             const vidSourceElement = vidElement ? vidElement.querySelector('source') : null;
  90.             const vidSrc = vidSourceElement ? vidSourceElement.getAttribute('src') : null;
  91.  
  92.             // Check if the image src is different from the video source src
  93.             if (imgSrc && vidSrc && imgSrc !== vidSrc) {
  94.                 if (!imgSrc.endsWith('.mp4') && !imgSrc.endsWith('.webm')){
  95.                     vidElement.outerHTML = '';
  96.                 }
  97.                 else {
  98.                     imgElement.style.display = 'none';
  99.                     // Update the video source src with the image src
  100.                     const newVidType = imgSrc.endsWith('.mp4') ? 'video/mp4' : 'video/webm';
  101.                     vidSourceElement.setAttribute('src', imgSrc);
  102.                     vidSourceElement.setAttribute('type', newVidType);
  103.                     // Optionally, you may need to load the new video source
  104.                     vidElement.load();
  105.                 }
  106.             }
  107.         }
  108.     }
  109.  
  110.     // Run the function on page load
  111.     replaceImageWithVideo();
  112.  
  113.     // Optionally, observe changes to the DOM and replace elements dynamically
  114.     const observer = new MutationObserver(replaceImageWithVideo);
  115.     observer.observe(document.body, { childList: true, subtree: true });
  116. })();