☰

Scrolller.com Autoplay Feed

Autoplay Videos in Feed on Scrolller.com

  1. // ==UserScript==
  2. // @name            Scrolller.com Autoplay Feed
  3. // @name:de         Scrolller.com Automatische Wiedergabe im Feed
  4. // @version         1.0.2
  5. // @description     Autoplay Videos in Feed on Scrolller.com
  6. // @description:de  Spiele Videos im Feed automatisch ab auf Scrolller.com
  7. // @icon            https://scrolller.com/assets/favicon-16x16.png
  8. // @author          TalkLounge (https://github.com/TalkLounge)
  9. // @namespace       https://github.com/TalkLounge/scrolller.com-autoplay-feed
  10. // @license         MIT
  11. // @match           https://scrolller.com/*
  12. // @grant           none
  13. // @run-at          document-start
  14. // ==/UserScript==
  15.  
  16. (function () {
  17.     'use strict';
  18.  
  19.     let interval, muted = true;
  20.     let cooldown = Date.now();
  21.  
  22.     function video2SVGParent(video) {
  23.         const parent = video.parentNode.parentNode.parentNode;
  24.         //console.log(`video2SVGParent():`, video, "Return:", parent);
  25.         return parent;
  26.     }
  27.  
  28.     function insertSound(parent, mute) {
  29.         if (!parent || [...parent.classList].includes("noaudio")) {
  30.             return;
  31.         }
  32.         //console.log(`insertSound():`, parent, mute);
  33.  
  34.         parent.querySelector(".sound")?.remove();
  35.  
  36.         let html;
  37.         if (mute) {
  38.             html = `
  39.             <svg class="sound muted" viewBox="0 0 512 512" style="fill: grey; position: absolute; z-index: 1; width: 1.5em; cursor: pointer; margin-left: 0.2em">
  40.                 <path d="M232 416a23.88 23.88 0 01-14.2-4.68 8.27 8.27 0 01-.66-.51L125.76 336H56a24 24 0 01-24-24V200a24 24 0 0124-24h69.75l91.37-74.81a8.27 8.27 0 01.66-.51A24 24 0 01256 120v272a24 24 0 01-24 24zm-106.18-80zm-.27-159.86zM320 336a16 16 0 01-14.29-23.19c9.49-18.87 14.3-38 14.3-56.81 0-19.38-4.66-37.94-14.25-56.73a16 16 0 0128.5-14.54C346.19 208.12 352 231.44 352 256c0 23.86-6 47.81-17.7 71.19A16 16 0 01320 336z"></path>
  41.                 <path d="M368 384a16 16 0 01-13.86-24C373.05 327.09 384 299.51 384 256c0-44.17-10.93-71.56-29.82-103.94a16 16 0 0127.64-16.12C402.92 172.11 416 204.81 416 256c0 50.43-13.06 83.29-34.13 120a16 16 0 01-13.87 8z"></path>
  42.                 <path d="M416 432a16 16 0 01-13.39-24.74C429.85 365.47 448 323.76 448 256c0-66.5-18.18-108.62-45.49-151.39a16 16 0 1127-17.22C459.81 134.89 480 181.74 480 256c0 64.75-14.66 113.63-50.6 168.74A16 16 0 01416 432z"></path>
  43.             </svg>`;
  44.         } else {
  45.             html = `
  46.             <svg class="sound volume" viewBox="0 0 512 512" style="fill: white; position: absolute; z-index: 1; width: 1.5em; cursor: pointer; margin-left: 0.2em">
  47.                 <path d="M232 416a23.88 23.88 0 01-14.2-4.68 8.27 8.27 0 01-.66-.51L125.76 336H56a24 24 0 01-24-24V200a24 24 0 0124-24h69.75l91.37-74.81a8.27 8.27 0 01.66-.51A24 24 0 01256 120v272a24 24 0 01-24 24zm-106.18-80zm-.27-159.86zM320 336a16 16 0 01-14.29-23.19c9.49-18.87 14.3-38 14.3-56.81 0-19.38-4.66-37.94-14.25-56.73a16 16 0 0128.5-14.54C346.19 208.12 352 231.44 352 256c0 23.86-6 47.81-17.7 71.19A16 16 0 01320 336z"></path>
  48.                 <path d="M368 384a16 16 0 01-13.86-24C373.05 327.09 384 299.51 384 256c0-44.17-10.93-71.56-29.82-103.94a16 16 0 0127.64-16.12C402.92 172.11 416 204.81 416 256c0 50.43-13.06 83.29-34.13 120a16 16 0 01-13.87 8z"></path>
  49.                 <path d="M416 432a16 16 0 01-13.39-24.74C429.85 365.47 448 323.76 448 256c0-66.5-18.18-108.62-45.49-151.39a16 16 0 1127-17.22C459.81 134.89 480 181.74 480 256c0 64.75-14.66 113.63-50.6 168.74A16 16 0 01416 432z"></path>
  50.             </svg>`;
  51.         }
  52.         html = html.replace(/>\s+</g, '><').trim(); // Clean up formatted html, Thanks to https://stackoverflow.com/a/27841683
  53.         const child = new DOMParser().parseFromString(html, "text/html");
  54.  
  55.         child.body.firstChild.addEventListener("click", (e) => {
  56.             e.stopPropagation();
  57.  
  58.             const svg = e.target.closest(".sound");
  59.             //console.log("Clicked Sound Button", svg);
  60.  
  61.             document.querySelectorAll("video").forEach(video => {
  62.                 if (!video.muted) {
  63.                     insertSound(video2SVGParent(video), true);
  64.                 }
  65.  
  66.                 video.muted = true;
  67.             });
  68.  
  69.             if ([...svg.classList].includes("muted")) {
  70.                 //console.log("Muted");
  71.                 muted = false;
  72.  
  73.                 parent.querySelector("video").muted = false;
  74.  
  75.                 insertSound(parent);
  76.             } else {
  77.                 //console.log("Unmuted");
  78.                 muted = true;
  79.  
  80.                 insertSound(parent, true);
  81.             }
  82.         });
  83.  
  84.         parent.insertBefore(child.body.firstChild, parent.firstChild);
  85.     }
  86.  
  87.     async function loadVideo(parent) {
  88.         if ([...parent.classList].includes("loaded")) {
  89.             return;
  90.         }
  91.         //console.log(`loadVideo():`, parent);
  92.  
  93.         parent.classList.add("loaded");
  94.         parent.querySelector("div>svg").parentNode.remove();
  95.  
  96.         let data = await fetch(parent.querySelector("a").href);
  97.         data = await data.text();
  98.         data = new DOMParser().parseFromString(data, "text/html");
  99.         data = [...data.querySelectorAll("head script")];
  100.         data = data.find(item => item.innerText.includes("window.scrolllerConfig"));
  101.         data = data.textContent;
  102.         data = data.replace("window.scrolllerConfig=", "");
  103.         data = data.replace(/\\'/g, "'");
  104.         data = JSON.parse(JSON.parse(data));
  105.         data = data.item.mediaSources;
  106.         data = data.filter(item => item.url.endsWith(".mp4"));
  107.         data = data.reverse();
  108.         data = data.map(item => item.url);
  109.  
  110.         const video = document.createElement("video");
  111.         video.autoplay = true;
  112.         video.muted = true;
  113.         video.loop = true;
  114.         video.style.height = "100%";
  115.         video.style.position = "absolute";
  116.         video.addEventListener("loadeddata", () => {
  117.             parent.querySelector("picture").remove();
  118.  
  119.             const hasAudio = video.mozHasAudio || Boolean(video.webkitAudioDecodedByteCount) || Boolean(video.audioTracks && video.audioTracks.length);
  120.  
  121.             if (!hasAudio) {
  122.                 parent.classList.add("noaudio");
  123.             }
  124.  
  125.             insertSound(parent, true);
  126.         });
  127.  
  128.         for (const src of data) {
  129.             const source = document.createElement("source");
  130.             source.src = src;
  131.             video.append(source);
  132.         }
  133.  
  134.         parent.querySelector("a>div").insertBefore(video, parent.querySelector("a>div").firstChild);
  135.     }
  136.  
  137.     function loadVideos() {
  138.         const items = document.querySelectorAll("main>div>div>div a:has(div>svg)");
  139.  
  140.         for (const item of items) {
  141.             loadVideo(item.parentNode);
  142.         }
  143.     }
  144.  
  145.     async function init() {
  146.         if (!document.querySelector("main>div>div>div picture")) {
  147.             return;
  148.         }
  149.  
  150.         window.clearInterval(interval);
  151.  
  152.         window.setInterval(loadVideos, 500);
  153.  
  154.         document.body.onscroll = function () {
  155.             if (muted) {
  156.                 return;
  157.             }
  158.  
  159.             if (Date.now() - cooldown < 250) {
  160.                 return;
  161.             }
  162.             cooldown = Date.now();
  163.  
  164.             //console.log("Scroll");
  165.             let diffMin = 1000000;
  166.             let nearest;
  167.             let middle = window.innerHeight / 2;
  168.  
  169.             document.querySelectorAll("video").forEach(video => {
  170.                 const loud = video2SVGParent(video).querySelector(".sound:not(.muted)");
  171.                 if (loud) {
  172.                     insertSound(video2SVGParent(video), true);
  173.                 }
  174.                 video.muted = true;
  175.                 const rect = video.getBoundingClientRect();
  176.                 const elemMiddle = rect.y + (rect.height / 2);
  177.                 const diff = Math.abs(middle - elemMiddle);
  178.                 if (diff < diffMin) {
  179.                     diffMin = diff;
  180.                     nearest = video;
  181.                 }
  182.             });
  183.  
  184.             if (!nearest || diffMin > middle || video2SVGParent(nearest).querySelector(".sound:not(.muted)")) {
  185.                 return;
  186.             }
  187.  
  188.             nearest.muted = false;
  189.  
  190.             insertSound(video2SVGParent(nearest));
  191.         }
  192.     }
  193.  
  194.     interval = window.setInterval(init, 500);
  195. })();