☰

Reddit Videojs

replace default player with videoJS

// ==UserScript==
// @name            Reddit Videojs
// @namespace       https://greasyfork.org/pt-BR/users/821661
// @match           https://www.reddit.com/*
// @match           https://new.reddit.com/*
// @grant           GM_addElement
// @grant           GM_getResourceText
// @grant           GM_getResourceURL
// @require         https://cdn.jsdelivr.net/npm/video.js@8.12.0/dist/video.min.js
// @require         https://cdn.jsdelivr.net/npm/videojs-hls-quality-selector@2.0.0/dist/videojs-hls-quality-selector.min.js
// @resource        vCSS https://cdn.jsdelivr.net/npm/video.js@8.12.0/dist/video-js.min.css
// @resource        sCSS https://cdn.jsdelivr.net/npm/videojs-hls-quality-selector@2.0.0/dist/videojs-hls-quality-selector.min.css
// @version         1.4.1
// @author          hdyzen
// @description     replace default player with videoJS
// @license         MIT
// ==/UserScript==
'use strict';

function renderVideojs(e) {
    const video = document.createElement('video-js');
    const src = e.children[0].src;
    const poster = e.getAttribute('poster');
    const options = {
        controls: true,
        poster: poster,
        playbackRates: [0.5, 1, 1.5, 2],
        playsinline: true,
        html5: {
            vhs: {
                overrideNative: true,
            },
        },
    };

    video.classList.add('video-js');
    video.classList.add('vjs-matrix');
    video.style.height = '100%';
    video.style.width = '100%';
    video.setAttribute('videojs', '');

    e.parentNode.parentNode.appendChild(video);
    videojs(video, options, function () {
        this.src({
            src: src,
            type: 'application/x-mpegURL',
        });
        this.hlsQualitySelector({ displayCurrentQuality: true });
    });

    if (!/\/r\/[^/]+\/comments/.test(window.location.pathname)) pauseVideo(video);
    video.addEventListener('click', e => e.stopPropagation());
    e.parentNode.style.display = 'none';
}

function pauseVideo(videoEl) {
    const observer = new IntersectionObserver(
        entries => {
            const entry = entries[0];
            const video = entry.target.firstElementChild;

            if (!entry.isIntersecting && !video.paused) video.pause();
        },
        { threshold: 0.8 },
    );

    observer.observe(videoEl);
}

const observer = new MutationObserver(mutations => {
    const players = [...document.getElementsByTagName('shreddit-player'), ...document.getElementsByTagName('video')].filter(e => (e.nodeName === 'VIDEO' && e.hasAttribute('data-isvideoplayer') ? !0 : e.nodeName === 'SHREDDIT-PLAYER' ? !0 : !1) && !e.hasAttribute('videojs'));
    players.forEach(player => {
        player.setAttribute('videojs', '');
        renderVideojs(player);
    });
});

window.addEventListener('load', e => {
    observer.observe(document.body, { childList: true, subtree: true });
});

GM_addElement(document.head, 'link', {
    rel: 'stylesheet',
    href: GM_getResourceURL('vCSS'),
});
GM_addElement(document.head, 'link', {
    rel: 'stylesheet',
    href: GM_getResourceURL('sCSS'),
});