Lemmy VideoJS Player

use videojs player in videos

// ==UserScript==
// @name            Lemmy VideoJS Player
// @namespace       https://greasyfork.org/users/821661
// @match           *://*/*
// @grant           GM_addElement
// @grant           GM_addStyle
// @version         1.1
// @author          hdyzen
// @description     use videojs player in videos
// @license         MIT
// ==/UserScript==

(function () {
    'use strict';
    
    GM_addStyle(`
        .video-js {
            height: 100vh;
        }
    `)
    

    function replaceVideo(element) {
        element.classList.add('video-js');
        element.setAttribute('data-setup', '{}');

        let scriptElement = document.querySelector('script[src="https://cdnjs.cloudflare.com/ajax/libs/video.js/8.6.0/video.min.js"]');
        let newScript = document.createElement('script');
        newScript.src = 'https://cdnjs.cloudflare.com/ajax/libs/video.js/8.6.0/video.min.js';
        scriptElement.parentNode.replaceChild(newScript, scriptElement);
    }

    // Thanks to CodingAndCoffee for isLemmy
    let isLemmy;

    try {
        isLemmy = document.querySelector('meta[name="Description"][content="Lemmy"]');
    } catch (error) {
        isLemmy = false;
    }

    if (isLemmy) {
        let videoJsCss = GM_addElement(document.head, 'link', {
            href: 'https://cdnjs.cloudflare.com/ajax/libs/video.js/8.6.0/video-js.min.css',
            rel: 'stylesheet',
        });

        let videoJsScript = GM_addElement(document.body, 'script', {
            src: 'https://cdnjs.cloudflare.com/ajax/libs/video.js/8.6.0/video.min.js',
        });

        let videoJsCssC = GM_addStyle(`
                                .video-js .vjs-volume-level,
                                .video-js .vjs-play-progress,
                                .video-js .vjs-slider-bar {
                                    background: #00964a !important;
                                }
                            `);

        const observer = new MutationObserver((mutations) => {
            mutations.forEach((mutation) => {
                const video = document.querySelector('video.embed-responsive-item:not(.video-js)');
                if (video) {
                    replaceVideo(video);
                    console.log('SLA');
                }
            });
        });

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