☰

youtube HTML5 Auto Loop

youtube再生時に自動ループする

// ==UserScript==
// @name           youtube HTML5 Auto Loop
// @namespace      youtube HTML5 Auto Loop
// @grant          none
// @description    youtube再生時に自動ループする
// @author         TNB
// @match          https://www.youtube.com/*
// @version        1.5.5
// @run-at         document-start
// ==/UserScript==

/********************  SETTING **************************/
const loop_off = {
    when_enable_next_video_autoplay: false,
    when_playlist: false,
    with_embedded_video: false
};
/********************************************************/


'use strict';

const YoutubeHTML5AutoLoop = {
    loop: true,
    readyToReload: false,
    playercontainer: null,
    video: null,
    prevSrc: null,
    button: null,
    eventcache: {},
    cancelInit: false,
    ele: {
        when_enable_next_video_autoplay: '.ytp-right-controls > button[style]:not([style *= "display: none"]) .ytp-autonav-toggle-button[aria-checked="true"]',
        when_playlist: '#secondary-inner #playlist:not([hidden])',
        with_embedded_video: 'html[data-cast-api-enabled="true"]'
    },
    init: function() {
        this.addListener();
    },
    isLoop: function() {
        return !Object.keys(loop_off).some(a => loop_off[a] && document.querySelector(this.ele[a]));
    },
    goLoop: function() {
        this.video.currentTime = 0;
        this.video.play;
    },
    enableLoop: function() {
        if (this.loop) this.video.setAttribute('loop', '');
        else this.video.removeAttribute('loop');
    },
    initLoop: function() {
        this.loop = this.isLoop();
        this.enableLoop();
    },
    loopToggle: function() {
        this.loop = !this.loop;
        this.enableLoop();
    },
    displayLoopStatus: function() {
        const video = document.querySelector('video:hover');
        if (!video) return;
        const checkBox = document.querySelector('.ytp-contextmenu [aria-checked]');
        checkBox.setAttribute('aria-checked', this.loop);
        if (!this.eventcache.checkBox) {
            checkBox.addEventListener('click', this, true);
            this.eventcache.checkBox = true;
        }
    },
    isEnded: function(m) {
        return m.classList.contains('ended-mode') || m.querySelector('.ytp-autonav-endscreen-button-container:not([style*="display"]),.html5-endscreen:not([style*="display"])');
    },
    toggleNextVideoAutoplay: function() {
        if ((!loop_off.when_enable_next_video_autoplay && this.loop) || loop_off.when_enable_next_video_autoplay) {
            setTimeout(() => {
                if (document.querySelector(`.ytp-right-controls > button[style]:not([style *= "display: none"]) .ytp-autonav-toggle-button[aria-checked="${this.loop}"]`)) this.button.click();
            }, 1000);
        }
    },
    observeVideo: function() {
        new MutationObserver(() => {
            if (this.video.src != this.prevSrc) this.cancelInit = false;
            if (!this.cancelInit) this.initLoop();
        //    if (this.loop && this.isEnded(this.playercontainer)) this.goLoop();
            if (!this.eventcache.toggleAutoPlay) this.addToggleEvent();
            this.toggleNextVideoAutoplay();
            this.prevSrc = this.video.src;
            this.video = this.playercontainer.querySelector('video');
            this.video.addEventListener('timeupdate', ()=> {
                if (this.video.duration - this.video.currentTime < 1 && !this.readyToReload) {
                    this.readyToReload = true;
                    setTimeout(() => {if (this.loop && document.querySelector('.ytp-spinner[style=""]')) location.reload()}, 2000);
                }
            });
        }).observe(this.playercontainer, {childList: true, subtree: true, attributes: true, attributeFilter: ['class']});
    },
    findPlayercontainer: function() {
        if (window != window.parent && document.getElementById('chat')) return;
        const mo = new MutationObserver(() => {
            this.playercontainer = document.getElementById('movie_player');
            if (!this.playercontainer) return;
            this.video = this.playercontainer.querySelector('video');
            this.observeVideo();
            this.initLoop();
            this.addToggleEvent();
            this.toggleNextVideoAutoplay();
            mo.disconnect();
        });
        mo.observe(document.body, {childList: true, subtree: true});
    },
    addToggleEvent: function() {
        this.button = document.querySelector('.ytp-right-controls > button[style]:not([style *= "display: none"]) .ytp-autonav-toggle-button');
        if (!loop_off.when_enable_next_video_autoplay || !this.button) return;
        this.button.addEventListener('click', () => {
            this.loop = JSON.parse(this.button.getAttribute('aria-checked'));
            this.enableLoop();
            this.cancelInit = true;
            this.eventcache.toggleAutoPlay = true;
        });
    },
    addListener: function() {
        window.addEventListener('DOMContentLoaded', this);
        window.addEventListener('contextmenu', this);
    },
    handleEvent: function(e) {
        switch (e.type) {
            case 'DOMContentLoaded':
                this.findPlayercontainer();
                break;
            case 'contextmenu':
                this.displayLoopStatus();
                break;
            case 'click':
                this.loopToggle();
                document.body.click();
                this.toggleNextVideoAutoplay();
                this.cancelInit = true;
                e.stopPropagation();
                break;
        }
    }
};

YoutubeHTML5AutoLoop.init();