☰

Scrolller.com Autoplay Feed

Autoplay Videos in Feed on Scrolller.com

目前為 2025-06-10 提交的版本，檢視 最新版本。

  1. // ==UserScript==
  2. // @name            Scrolller.com Autoplay Feed
  3. // @name:de         Scrolller.com Automatische Wiedergabe im Feed
  4. // @version         1.0.3
  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.  
  100.         try { // Try old first
  101.             data = [...data.querySelectorAll("head script")];
  102.             data = data.find(item => item.innerText.includes("window.scrolllerConfig"));
  103.             data = data.textContent;
  104.             data = data.replace("window.scrolllerConfig=", "");
  105.             data = data.replace(/\\'/g, "'");
  106.             data = JSON.parse(JSON.parse(data));
  107.             data = data.item.mediaSources;
  108.         } catch (e) { // Then try new
  109.             data = [...data.querySelectorAll("script")];
  110.             data = data.find(item => item.innerText.includes("mediaSources"));
  111.             data = data.innerText;
  112.  
  113.             data = data.replace("self.__next_f.push([1,\"7:", "");
  114.             data = data.replace("\\n\"])", "");
  115.  
  116.             data = data.replace("self.__next_f.push([1,\"itPost\",", "[[],[{},{},{},{\"post\":{");
  117.             data = data.replace("self.__next_f.push([1,\"itPost\\\",", "[[],[{},{},{},{\"post\":{");
  118.             data = data.replace("self.__next_f.push([1,\"38,", "[[],[{},{},{},{\"post\":{");
  119.             data = data.replace("\n\"])", "");
  120.  
  121.             data = data.replace(/\\"/g, '"');
  122.             data = data.replace(/\\"/g, '"');
  123.             data = data.replace(/\\"/g, '"');
  124.  
  125.             data = data.replace(/:"{/g, ":{");
  126.             data = data.replace(/}"}/g, "}}");
  127.  
  128.             data = JSON.parse(data);
  129.             data = data[1][3].post.mediaSources;
  130.         }
  131.  
  132.         data = data.filter(item => (item.url.endsWith(".webm") || item.url.endsWith(".mp4")) && !item.url.endsWith("_thumb."));
  133.         data = data.map(item => item.url);
  134.  
  135.         const video = document.createElement("video");
  136.         video.autoplay = true;
  137.         video.muted = true;
  138.         video.loop = true;
  139.         video.style.height = "100%";
  140.         video.style.position = "absolute";
  141.         video.addEventListener("loadeddata", () => {
  142.             parent.querySelector("picture").remove();
  143.  
  144.             const hasAudio = video.mozHasAudio || Boolean(video.webkitAudioDecodedByteCount) || Boolean(video.audioTracks && video.audioTracks.length);
  145.  
  146.             if (!hasAudio) {
  147.                 parent.classList.add("noaudio");
  148.             }
  149.  
  150.             insertSound(parent, true);
  151.         });
  152.  
  153.         for (const src of data) {
  154.             const source = document.createElement("source");
  155.             source.src = src;
  156.             video.append(source);
  157.         }
  158.  
  159.         parent.querySelector("a>div").insertBefore(video, parent.querySelector("a>div").firstChild);
  160.     }
  161.  
  162.     function loadVideos() {
  163.         const items = document.querySelectorAll("main>div>div>div a:has(div>svg), [class^=verticalView_container]>div>div a:has(div>svg)");
  164.  
  165.         for (const item of items) {
  166.             loadVideo(item.parentNode);
  167.         }
  168.     }
  169.  
  170.     async function init() {
  171.         if (!document.querySelector("main>div>div>div picture, [class^=verticalView_container]>div>div picture")) {
  172.             return;
  173.         }
  174.  
  175.         window.clearInterval(interval);
  176.  
  177.         window.setInterval(loadVideos, 500);
  178.  
  179.         document.body.onscroll = function () {
  180.             if (muted) {
  181.                 return;
  182.             }
  183.  
  184.             if (Date.now() - cooldown < 250) {
  185.                 return;
  186.             }
  187.             cooldown = Date.now();
  188.  
  189.             //console.log("Scroll");
  190.             let diffMin = 1000000;
  191.             let nearest;
  192.             let middle = window.innerHeight / 2;
  193.  
  194.             document.querySelectorAll("video").forEach(video => {
  195.                 const loud = video2SVGParent(video).querySelector(".sound:not(.muted)");
  196.                 if (loud) {
  197.                     insertSound(video2SVGParent(video), true);
  198.                 }
  199.                 video.muted = true;
  200.                 const rect = video.getBoundingClientRect();
  201.                 const elemMiddle = rect.y + (rect.height / 2);
  202.                 const diff = Math.abs(middle - elemMiddle);
  203.                 if (diff < diffMin) {
  204.                     diffMin = diff;
  205.                     nearest = video;
  206.                 }
  207.             });
  208.  
  209.             if (!nearest || diffMin > middle || video2SVGParent(nearest).querySelector(".sound:not(.muted)")) {
  210.                 return;
  211.             }
  212.  
  213.             nearest.muted = false;
  214.  
  215.             insertSound(video2SVGParent(nearest));
  216.         }
  217.     }
  218.  
  219.     interval = window.setInterval(init, 500);
  220. })();