override-missav-js

override missav js

Vous devrez installer une extension telle que Tampermonkey, Greasemonkey ou Violentmonkey pour installer ce script.

Vous devrez installer une extension telle que Tampermonkey ou Violentmonkey pour installer ce script.

Vous devrez installer une extension telle que Tampermonkey ou Violentmonkey pour installer ce script.

Vous devrez installer une extension telle que Tampermonkey ou Userscripts pour installer ce script.

Vous devrez installer une extension telle que Tampermonkey pour installer ce script.

Vous devrez installer une extension de gestionnaire de script utilisateur pour installer ce script.

(J'ai déjà un gestionnaire de scripts utilisateur, laissez-moi l'installer !)

Vous devrez installer une extension telle que Stylus pour installer ce style.

Vous devrez installer une extension telle que Stylus pour installer ce style.

Vous devrez installer une extension telle que Stylus pour installer ce style.

Vous devrez installer une extension du gestionnaire de style pour utilisateur pour installer ce style.

Vous devrez installer une extension du gestionnaire de style pour utilisateur pour installer ce style.

Vous devrez installer une extension du gestionnaire de style pour utilisateur pour installer ce style.

(J'ai déjà un gestionnaire de style utilisateur, laissez-moi l'installer!)

// ==UserScript==
// @name         override-missav-js
// @namespace    https://missav.*
// @version      v0.1.4
// @description  override missav js
// @author       You
// @include        https://missav.*/*
// @exclude      /^https:\/\/missav\.*\/.*-\d+.*$/
// @icon         https://www.google.com/s2/favicons?sz=64&domain=missav.ai
// @grant        none
// ==/UserScript==

// 节流
function throttle(func, wait) {
    let timeout;
    return function () {
      let context = this;
      let args = arguments;
      if (!timeout) {
        timeout = setTimeout(() => {
          timeout = null;
          func.apply(context, args);
        }, wait);
      }
    };
  }

// 防抖
function debounce(func, wait, immediate) {
    let timeout;
    return function () {
      let context = this;
      let args = arguments;
      let later = function () {
        timeout = null;
        if (!immediate) {
          func.apply(context, args);
        }
      };
      let callNow = immediate && !timeout;
      clearTimeout(timeout);
      timeout = setTimeout(later, wait);
      if (callNow) {
        func.apply(context, args);
      }
    };
  }

const onMouseEnter = () => {
    // 获取页面中所有拥有 .thumbnail 类的元素
    const thumbnails = document.querySelectorAll(".thumbnail");

    // 遍历所有的 .thumbnail 元素
    thumbnails.forEach(function (thumbnail) {
        // 在每个 .thumbnail 元素下找到符合条件的 a 元素
        const link = thumbnail.querySelector("div:first-child > a:last-child");

        if (link == null) {
            return;
        }

        // 检查 link 是否已经有监听器或者已经被触发过点击
        if (!link.hasAttribute("data-click-triggered")) {
            // 创建一个监听函数,它可以被解除绑定
            function hoverTriggerClick(event) {
                // 触发点击事件
                link.click();
                // 在触发点击后解除 mouseenter 事件监听
                link.removeEventListener("mouseenter", hoverTriggerClick);
            }

            // 标记 link 已添加事件监听器
            link.setAttribute("data-click-triggered", "true");
            // 为该 a 元素添加鼠标悬停的事件监听器
            link.addEventListener("mouseenter", hoverTriggerClick);
        }
    });
};

const onVideo = () => {
    // 获取页面中所有拥有 .thumbnail 类的元素
    const thumbnails = document.querySelectorAll(
        ".thumbnail > div:first-child > a:first-child"
    );

    // 遍历所有的 .thumbnail 元素
    thumbnails.forEach(function (thumbnail) {
        // 在每个 .thumbnail 元素下找到符合条件的 a 元素
        const video = thumbnail.querySelector(
            "div:first-child > a:first-child > video"
        );

        if (video == null){
            return;
        }

        if (video.getAttribute("play") === "true" && video.src.indexOf("https") != -1) {
            // video.play();
            // video.className = "preview";
            return;
        }

        // const id = video.id.replace("preview-", "");
        // console.log(id, video.dataset.src);
        // video.src = video.dataset.src.replace("undefined", id);

        // console.log(video.id, video.dataset.src);

        if (video.dataset.src.indexOf("undefined") > -1) {
            return;
        }

        video.setAttribute("costom-src", "true");
        video.setAttribute("play", "true");
        video.src = video.dataset.src;
        // video.play();
        // video.className = "preview";
    });
};

const playVideo = () => {
    onVideo();
    const videos = document.querySelectorAll("video[costom-src=true]");
    videos.forEach((video) => {
        video.play();
        video.className = "preview";
    });
}

const addSettingIcon = () => {
    const div = document.createElement("div");
    div.style.position = "fixed";
    div.style.right = "20px";
    div.style.bottom = "45%";
    div.style.padding="10px";
    div.style.zIndex = "50";
    div.style.width = "30px";
    div.style.height = "30px";
    div.style.color = "white";
    div.style.backgroundColor = "black";
    div.style.borderRadius = "50%";
    div.style.opacity = "1";
    div.style.cursor = "pointer";
    div.style.display = "flex";
    div.style.justifyContent = "center";
    div.style.alignItems = "center";
    div.style.userSelect = "none";
    div.innerText = "⚙️";

    div.addEventListener("mouseenter", function () {
        div.style.opacity = "1";
    });
    div.addEventListener("mouseleave", function () {
        div.style.opacity = "0.5";
    });

    div.addEventListener("click", function () {
        playVideo();
    });

    document.body.appendChild(div);
}

const addTriggerAutoPlay = () => {
    const div = document.createElement("div");
    div.style.position = "fixed";
    div.style.left = "20px";
    div.style.bottom = "20px";
    div.style.padding="10px";
    div.style.zIndex = "50";
    div.style.width = "30px";
    div.style.height = "30px";
    div.style.color = "white";
    div.style.backgroundColor = "black";
    div.style.borderRadius = "50%";
    div.style.opacity = "1";
    div.style.cursor = "pointer";
    div.style.display = "flex";
    div.style.justifyContent = "center";
    div.style.alignItems = "center";
    div.style.userSelect = "none";
    div.innerText = "🚫";

    if (localStorage.getItem("autoPlay") === "1") {
        div.innerText = "♨️";
    }

    div.addEventListener("mouseenter", function () {
        div.style.opacity = "1";
    });
    div.addEventListener("mouseleave", function () {
        div.style.opacity = "0.5";
    });

    div.addEventListener("click", function () {
        const autoPlay = localStorage.getItem("autoPlay");
        if (autoPlay === "1") {
            div.innerText = "🚫";
            localStorage.setItem("autoPlay", "0");
            return;
        }
        div.innerText = "♨️";
        localStorage.setItem("autoPlay", "1");
    });

    document.body.appendChild(div);
}

(function () {
    "use strict";

    addSettingIcon();
    addTriggerAutoPlay();

    document.addEventListener("keydown", function (event) {
        playVideo();
    });

    const timer = setInterval(() => {
        if (window.player != null) {
            return;
        }

        const autoPlay = localStorage.getItem("autoPlay");
        if (autoPlay === "1") {
            setTimeout(() => {
                playVideo();
            }, 2000);

            const observer = new MutationObserver(function (mutations) {
                mutations.forEach(function (mutation) {
                    if (mutation.addedNodes.length > 0) {
                        // onMouseEnter();
                        debounce(playVideo, 1000)();
                    }
                });
            });

            observer.observe(document.body, {
                attributes: false,
                childList: true,
                subtree: true,
            });
        }

        clearInterval(timer);

    }, 1000)

})();