☰

site youtube - Fixed Player + Player Bottom Progress

fix the player at the top on scrolling and move the progress bar to the bottom of the player

Verze ze dne 16. 07. 2024. Zobrazit nejnovější verzi.

// ==UserScript==
// @name         site youtube - Fixed Player + Player Bottom Progress
// @namespace    http://greasyfork.org
// @version      2024.07.16
// @license MIT
// @description  fix the player at the top on scrolling and move the progress bar to the bottom of the player
// @author       hg42
// @match        *://*.youtube.com/*
// @require      https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js
// @grant        GM_addStyle
// @run-at 	     document-end
// ==/UserScript==

function stylePlayer() {
    console.log("-------------------- stylePlayer");
    var player = document.querySelector(".video-stream");
    var container = document.querySelector("#player-container");
    var movie = document.querySelector("#movie_player");
    //container.addEventListener("resize", stylePlayer);
    // empty console.log("movie     w,h = " + movie.style.width + "," + movie.style.height);
    // empty console.log("container w,h = " + container.style.width + "," + container.style.height);
    //console.log("    width: " + player.style.width + ";");
    //console.log("    height: calc(" + player.style.height + " + 50px);");
    var width = player.style.width;
    var height = player.style.height;
    console.log("player    w,h = " + width + "," + height);
    var userStyles = ""
    + "#content #player #player-container"
    + "{"
    + "    position: fixed;"
    + "    top: calc(2px + var(--ytd-toolbar-offset));" // 57px
    //+ "    left: 2px;"
    + "    z-index: 2000;"
    //+ "    border: solid 1px yellow;"
    + "}"
    + "#content #player .video-stream"
    + "{"
    + "    width: " + width + ";"
    + "    height: " + height + ";"
    + "}"
    + "#content #player #movie_player"
    //+ "#content #player #player-container"
    + "{"
    + "    width: " + width + ";"
    + "    height: " + height + ";"
    + "}"
    + "#content #player-theater-container .video-stream"
    + "{"
    + "    width: " + width + ";"
    + "    height: " + height + ";"
    + "}"
    + "#content #player-theater-container #movie_player,"
    + "#content #player-theater-container #player-container"
    + "{"
    + "    width: " + width + ";"
    + "    height: " + height + ";"
    //+ "    margin-bottom: 36px;"
    + "}"
    + "#content .ytp-chrome-bottom"
    + "{"
    //+ "    bottom: -36px;"
    + "    background: rgba(0, 0, 0, 0.5)"
    + "}"
    // progress at bottom
    + "#content .ytp-progress-bar-container,"
    + "#content .ytp-big-mode .ytp-progress-bar-container {"
    + "    position: absolute;"
    + "    bottom: 2px;"
    + "}"
    + "#content .ytp-gradient-bottom {"
    + "    display: none;"
    + "}"
    + "#content .ytp-chrome-bottom,"
    + "#content .ytp-autohide .ytp-chrome-bottom {"
    + "    text-shadow: 0 0 0 black;"
    + "    padding-bottom: 13px;"
    + "}"
    + "#content .ytp-svg-shadow {"
    + "    stroke: #000;"
    + "    stroke-opacity: 0.5;"
    + "    stroke-width: 3px;"
    + "    fill: none;"
    + "}"
    ;
    GM_addStyle(userStyles);
    //movie.style.width = container.style.width;
    //movie.style.height = container.style.height;
    window.setTimeout(stylePlayer, 5000);
}

function styleContent() {
    var userStyles = ""
    ;
    GM_addStyle(userStyles);
}

function styleInit() {
    var player = document.querySelector(".html5-main-video");
    console.log("-------------------- styleInit", player);
    if(!player) {
        window.setTimeout(styleInit, 1000);
        return;
    }
    player.addEventListener("resize", function() {
        console.log("resize");
        window.setTimeout(stylePlayer, 100);
    });
    player.addEventListener("playing", function() {
        console.log("playing");
        window.setTimeout(stylePlayer, 0);
    });
}

(function() {
    'use strict';

    window.setTimeout(styleInit, 3000);

})();