// ==UserScript==
// @name         CaptionFontChange
// @namespace    https://www.youtube.com/
// @version      0.1.3
// @description  I WANT JAPANESE FONT
// @author       kAttri-ute
// @match        https://www.youtube.com/*
// @run-at       document-body
// @grant        GM_addStyle
// ==/UserScript==

GM_addStyle("@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@600&family=Jura:wght@700&family=Kosugi+Maru&family=M+PLUS+Rounded+1c&family=Mitr&family=Orbitron&display=swap');");

(function() {
    'use strict';

    /***
        font-family: 'Dosis', sans-serif;
        font-family: 'Jura', sans-serif;
        font-family: 'Kosugi Maru', sans-serif;
        font-family: 'M PLUS Rounded 1c', sans-serif;
        font-family: 'Mitr', sans-serif;
        font-family: 'Orbitron', sans-serif;
    ***/

    var $root = document.getElementById('movie_player');
    var Changer = function() {
        if($root !== null) {
            // --->
            let $conts = $root.querySelectorAll('div.caption-window span[style*="font-family"]');
            if(0 < $conts.length) {
                $conts.forEach(function($cont) {
                    let stytx = $cont.getAttribute('style');
                    let sty_arr = stytx.split(';');
                    //console.log(sty_arr);
                    let idx = sty_arr.findIndex((item) => (-1 < item.indexOf('flag')));
                    if(idx < 0) {
                        // font-falimy change
                        idx = sty_arr.findIndex((item) => (-1 < item.indexOf('font-family:')));
                        sty_arr[idx] = " font-family: 'Jura', 'Orbitron', 'M PLUS Rounded 1c', 'Kosugi Maru', sans-serif";
                        // font-size change
                        idx = sty_arr.findIndex((item) => (-1 < item.indexOf('font-size:')));
                        let sz = sty_arr[idx].match(/\d+\.\d+px/)[0];
                        sz = Math.abs(sz.substring(0, sz.length - 2)) - 3;
                        sty_arr[idx] = " font-size: "+ sz +"px";
                        // setting
                        sty_arr[sty_arr.length-1] = ' flag: true';
                        sty_arr.push(' padding: 10px');
                        sty_arr.push('');
                        stytx = sty_arr.join(';');
                        $cont.setAttribute('style', stytx);
                    }
                });
            }
            // --->|
        } else {
            $root = document.getElementById('movie_player');
        }
    }

    var interval_id;
    var interval_span = 180;
    interval_id = setInterval(Changer, interval_span);
})();