☰

improve Twitter Video Player

Change the difficult-to-use Twitter player to a native player.

当前为 2023-09-17 提交的版本，查看 最新版本。

// ==UserScript==
// @name         improve Twitter Video Player
// @namespace    https://yakisova.com
// @version      0.1.0
// @description  Change the difficult-to-use Twitter player to a native player.
// @author       yakisova41
// @match        https://twitter.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=twitter.com
// @grant        none
// @license      MIT
// ==/UserScript==

(function() {
    'use strict';

    const bodyElem = document.querySelector("body");

    if(bodyElem !== null) {
        const observer = new MutationObserver(() => {
           const videoComponent = bodyElem.querySelector('div[data-testid="videoComponent"]:not(.improved-video)');
           if(videoComponent !== null) {
                videoComponent.classList.add("improved-video");
                setTimeout(() => {
                    replacePlayer(videoComponent);
                }, 100);
           }
        });

        observer.observe(bodyElem, {
            subtree: true,
            childList: true
        });
    }

    function replacePlayer(componentElement) {
        const originalVid = componentElement.querySelector("div:nth-child(1) > div > video");
        if(originalVid !== null) {

            originalVid.controls = true;
            originalVid.removeAttribute("disablepictureinpicture");

            const handleClick = (e) => {
                e.preventDefault();
                originalVid.play();
                setTimeout(() => {
                    originalVid.muted = false;
                }, 500);

                originalVid.removeEventListener("click", handleClick)
            }
            originalVid.addEventListener("click", handleClick);

            componentElement.parentElement.appendChild(originalVid);
            componentElement.remove();
        }
    }
})();