☰

AnimeLib Player Settings

Settings for video player

// ==UserScript==
// @name         AnimeLib Player Settings
// @namespace    https://github.com/RENOMIZER
// @version      1.3
// @description  Settings for video player
// @author       RENOMIZER, SimbiAnT29
// @match        https://animelib.me/anime/*
// @grant        GM_getValue
// @grant        GM_setValue
// @grant        GM_addStyle
// @grant        GM_getResourceText
// @grant        GM_deleteValue
// @require      https://code.jquery.com/jquery-3.6.3.js
// @resource     REMOTE_CSS https://raw.githubusercontent.com/RENOMIZER/animelib-player-settings/main/settings-styles.css
// ==/UserScript==

var $ = window.jQuery;
var hght = GM_getValue("hght");
var cinechck = GM_getValue("cinechck");
var maxhght = 80;
var subtitleSize = GM_getValue("subtitleSize");
var maxSubtitleSize = 100;

(function () {
    'use strict'

    /* Add style */
    const CSS = GM_getResourceText("REMOTE_CSS");
    GM_addStyle(CSS);

    /* Add settings button */
    $('<div class="reader-header-action reader-header-action_icon player-height"> </div>').insertBefore($('#add-chapter-bookmark'));
    $('.player-height').append('<span class="reader-header__icon"> </span>');
    $('.player-height span.reader-header__icon').append('<i class="fa fa-solid fa-gear"></i>');

    /* Add settings panel */
    $('body').append('<div id="player-settings-modal" class="modal" data-type="slide" tabindex="-1"> </div>');
    $('#episodes-list-modal .popup__content').clone().appendTo($('#player-settings-modal'));
    $('#player-settings-modal div.modal__body').remove();
    $('#player-settings-modal h4').text("Настройки плеера");
    $('#player-settings-modal div.modal__content').append('<div id="settings" class="modal__body"> </div>');
    $('#player-settings-modal div.modal__content').attr('style', 'overflow-y: auto; left: 80%; width: 20%');
    $('#player-settings-modal div.modal__content').append('<p class="settingstext hiddentext"> Настройки сохраняются в память дополнения </p>')

    /* Add settings content */
    $('#settings').append('<div class="slidecontainer slidecontainerHeight"> </div>');
    $('.slidecontainerHeight').append('<p class="slideheader.settingstext"> Высота плеера </p>');
    $('.slidecontainerHeight').append('<input type="range" min="60" class="slider sliderHeight" id="player-height_var" name="player-height_var">');
    $('.slidecontainerHeight').append('<p class="slidemin settingstext">0⠀⠀</p>');
    $('.slidecontainerHeight').append('<p class="slideval slidevalHeight settingstext"> </p>');
    $('.slidevalHeight').text((hght / 10 - 60) * 5);
    $('.slidecontainerHeight').append('<p class="slidemax settingstext"> 100 </p>');
    $('.sliderHeight').attr('max', maxhght)
    $('.sliderHeight').attr('value', hght / 10);

    $('#settings').append('<div class="switchcontainer"> </div>');
    $('.switchcontainer').append('<p class="cintxt settingstext"> Режим кинотеатра </p>');
    $('.switchcontainer').append(`
        <label class="switch">
            <input type="checkbox" id="switch" value="true">
            <span class="slider-switch round"></span>
        </label>
    `);

    $('#settings').append('<div class="slidecontainer slidecontainerSub"> </div>');
    $('.slidecontainerSub').append('<p class="slideheader.settingstext"> Размер субтитров </p>');
    $('.slidecontainerSub').append('<input type="range" min="5" class="slider sliderSub" id="player-subtitile-size" name="player-subtitile-size">');
    $('.slidecontainerSub').append('<p class="slidemin settingstext">5px</p>');
    $('.slidecontainerSub').append('<p class="slideval slidevalSub settingstext"> </p>');
    $('.slidevalSub').text(subtitleSize);
    $('.slidecontainerSub').append('<p class="slidemax settingstext">100px</p>');
    $('.sliderSub').attr('max', maxSubtitleSize)
    $('.sliderSub').attr('value', subtitleSize);

    /* Add panel animation */
    $('.player-height').attr('data-open-modal', '#player-settings-modal');
    $('.player-height').attr('data-media-up', 'md');

    /* Apply settings (init) */
    window.onload = function () {
        $('.player-frame').css('height', hght + 'px');
        $('.player-frame').css('max-height', hght + 'px');
        $('.plyr').css('height', 'inherit');
        $('.collapse__body').css('height', hght + 'px');
        $('.collapse__body').css('max-height', hght + 'px');

        $('<div class="cinetint"> </div>').insertAfter($('#all_players'));
        if (cinechck) {
            $('.cinetint').toggleClass("is-active");
            $('.player-frame').toggleClass("is-active");
            $("#switch").prop("checked", true);
        }
    };

    subtitleSize = $('#player-subtitile-size').val();
    $('.plyr__captions').css('font-size', subtitleSize + 'px');
    $('.slidevalSub').text(subtitleSize + 'px');
    GM_setValue("subtitleSize", subtitleSize);

    /* Apply settings */
    document.getElementById("player-height_var").oninput = function () {
        hght = $('#player-height_var').val() * 10;
        $('.player-frame').css('height', hght + 'px');
        $('.player-frame').css('max-height', hght + 'px');
        $('.plyr').css('height', 'inherit');
        $('.collapse__body').css('height', hght + 'px');
        $('.collapse__body').css('max-height', hght + 'px');
        $('.slidevalHeight').text((hght / 10 - 60) * 5);
        GM_setValue("hght", hght);
    };
    
    document.getElementById("player-subtitile-size").oninput = function () {
        subtitleSize = $('#player-subtitile-size').val();
        $('.plyr__captions').css('font-size', subtitleSize + 'px');
        $('.slidevalSub').text(subtitleSize + 'px');
        GM_setValue("subtitleSize", subtitleSize);
    };

    /* Apply cinema mode */
    $('#switch').on('click', function () {
        if (!cinechck) {
            $('.cinetint').toggleClass("is-active");
            $('.player-frame').toggleClass("is-active");
            cinechck = true;
        }
        else {
            $('.cinetint').removeClass("is-active");
            $('.player-frame').removeClass("is-active");
            cinechck = false;
        }
    });

    function waitForElm(selector) {
        return new Promise(resolve => {
            if (document.querySelector(selector)) {
                return resolve(document.querySelector(selector));
            }

            const observer = new MutationObserver(mutations => {
                if (document.querySelector(selector)) {
                    resolve(document.querySelector(selector));
                    observer.disconnect();
                }
            });

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

    waitForElm('.plyr__captions').then((elm) => {
        subtitleSize = $('#player-subtitile-size').val();
        $('.plyr__captions').css('font-size', subtitleSize + 'px');
        $('.slidevalSub').text(subtitleSize + 'px');
        GM_setValue("subtitleSize", subtitleSize);
    });

}
)();