☰

YouTube Minimal Fixs

This is to fix various features of YouTube Minimal on PC

  1. // ==UserScript==
  2. // @name         YouTube Minimal Fixs
  3. // @version      0.7.10
  4. // @description  This is to fix various features of YouTube Minimal on PC
  5. // @namespace    http://tampermonkey.net/
  6. // @author       CY Fung
  7. // @license      MIT
  8. // @supportURL   https://github.com/cyfung1031/userscript-supports
  9. // @run-at       document-start
  10. // @match        https://m.youtube.com/*
  11. // @icon         https://raw.githubusercontent.com/cyfung1031/userscript-supports/main/icons/youtube-minimal.png
  12. // @grant        none
  13. // @unwrap
  14. // @allFrames    true
  15. // @inject-into  page
  16. // ==/UserScript==
  17. "use strict";
  18.  
  19. /*
  20.  
  21. MIT License
  22.  
  23. Copyright 2023 CY Fung
  24.  
  25. Permission is hereby granted, free of charge, to any person obtaining a copy
  26. of this software and associated documentation files (the "Software"), to deal
  27. in the Software without restriction, including without limitation the rights
  28. to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  29. copies of the Software, and to permit persons to whom the Software is
  30. furnished to do so, subject to the following conditions:
  31.  
  32. The above copyright notice and this permission notice shall be included in all
  33. copies or substantial portions of the Software.
  34.  
  35. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  36. IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  37. FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  38. AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  39. LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  40. OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  41. SOFTWARE.
  42.  
  43. */
  44.  
  45. //document.addEventListener('visibilitychange',function(evt){ evt.isTrusted && document.visibilityState==='hidden' && evt.stopPropagation() }, true)
  46.  
  47. (function (__CONTEXT__) {
  48.     "use strict";
  49.  
  50.     const showNativeControls = false;
  51.  
  52.     const { Promise } = __CONTEXT__;
  53.  
  54.     let [window] = new Function('return [window]')();
  55.  
  56.     if (window.document.addEventListener399) return;
  57.     window.document.addEventListener399 = window.document.addEventListener
  58.     //    let i = 0
  59.     window.document.addEventListener = function (type, listener, options) {
  60.         if (type === 'visibilitychange') {
  61.             // i++
  62.             if (listener.length === 0 && !listener.name) {
  63.  
  64.  
  65.                 let s = `${listener}`;
  66.                 if (s.length >= 17 && s.length <= 19) {
  67.                     return // ƒ (){a.Eh()} 18
  68.                 } else if (s.length > 348 && s.indexOf(".getVisibilityState()") > 0) {
  69.  
  70.                     return
  71.  
  72.                 }
  73.  
  74.             }
  75.             /*
  76.             if(i==4 || i==2){
  77.                 console.log(listener, (listener+"").length)
  78.                 return
  79.                             }
  80.                             */
  81.             //            return
  82.         }
  83.         return this.addEventListener399.apply(this, arguments)
  84.     }
  85.  
  86.  
  87.  
  88.  
  89.     let styleElm = document.createElement('style')
  90.     styleElm.textContent = `
  91.  
  92.     @keyframes addFadeIn {
  93.         from{background-position:1px;}
  94.         to{background-position:2px;}
  95.     }
  96.     @keyframes removeFadeIn {
  97.         from{background-position:1px;}
  98.         to{background-position:2px;}
  99.     }
  100.     #player-control-overlay[class] {
  101.         animation: removeFadeIn 1ms;
  102.     }
  103.     #player-control-overlay[class]:hover
  104.      {
  105.         animation: addFadeIn 1ms;
  106.     }
  107.     h2.slim-video-information-title{
  108.         animation: initUI 1ms;
  109.  
  110.     }
  111.  
  112.     #player-control-overlay[class]{
  113.         pointer-events: all !important;
  114.     }
  115.  
  116.     ytm-cinematic-container-renderer, ytm-cinematic-container-renderer * {
  117.         contain: layout size style;
  118.         user-select: none;
  119.         touch-action: none;
  120.         pointer-events: none;
  121.     }
  122.  
  123.     ytm-custom-control .player-controls-bottom .icon-button:hover>c3-icon svg path,
  124.     ytm-custom-control .player-controls-middle .icon-button:hover>c3-icon svg path,
  125.     ytm-custom-control .player-controls-top .icon-button:hover>c3-icon svg path,
  126.     ytm-custom-control .player-controls-pb .icon-button:hover>c3-icon,
  127.     ytm-custom-control .player-controls-top ytm-closed-captioning-button button[aria-pressed=true]:hover>c3-icon svg path,
  128.     ytm-custom-control .player-controls-top ytm-closed-captioning-button button[aria-pressed=false]:hover>c3-icon svg path ,
  129.  
  130.     ytm-custom-control .player-controls-top ytm-closed-captioning-button button:hover>c3-icon svg path,
  131.     ytm-custom-control .player-controls-middle .icon-button.icon-disable:hover>c3-icon svg path
  132.     {
  133.  
  134.  
  135.         fill: #006aff;
  136.  
  137.     }
  138.  
  139.     #player-control-overlay.fadein .player-controls-background[class] {
  140.         background: linear-gradient(to bottom, rgba(0,0,0,0) 78%, rgba(0,0,0,0.32) 100%);
  141.     }
  142.  
  143.     #player, #player-control-container, .ytp-autohide[class] {
  144.         cursor: initial !important;
  145.     }
  146.  
  147.     button.icon-button:hover {
  148.         color: #006aff;
  149.     }
  150.  
  151.     .ytWebScrimHost[class] {
  152.         cursor: initial;
  153.     }
  154.  
  155.     #player-control-overlay:not(.fadein)[id] {
  156.         height: unset;
  157.     }
  158.  
  159.     #player-control-overlay::before {
  160.         content: '';
  161.         display: block;
  162.         position: absolute;
  163.         left: -4px;
  164.         top: -4px;
  165.         right: -4px;
  166.         bottom: -4px;
  167.         box-sizing: border-box;
  168.         background: transparent;
  169.         border: 0;
  170.         margin: 0;
  171.         padding: 0;
  172.         z-index: -1;
  173.     }
  174.  
  175.     #global-loader ytw-scrim {
  176.         display: none;
  177.     }
  178.  
  179.     `
  180.  
  181.     let controlsInitialized = false
  182.  
  183.     async function videoToggle(video) {
  184.  
  185.         if (video.paused) video.play(); else video.pause();
  186.     }
  187.  
  188.     const eventHandlers = {
  189.  
  190.         pbMouseUp(evt) {
  191.  
  192.  
  193.             let pb = this
  194.             //                console.log(evt.target, evt, this)
  195.             let m = evt.offsetX / pb.offsetWidth
  196.             if (m < 0 || m > 1) return
  197.  
  198.             let video = document.querySelector('#movie_player video[src]')
  199.             if (!video) return
  200.  
  201.             let ct = video.currentTime
  202.             let d = video.duration
  203.             if (!ct || ct < 0) return
  204.             if (!d || d < 0) return
  205.  
  206.             video.currentTime = m * d
  207.  
  208.  
  209.             evt.preventDefault()
  210.             evt.stopPropagation()
  211.             evt.stopImmediatePropagation()
  212.  
  213.  
  214.         },
  215.         pbMouseClick(evt) {
  216.  
  217.  
  218.  
  219.             evt.preventDefault()
  220.             evt.stopPropagation()
  221.             evt.stopImmediatePropagation()
  222.  
  223.  
  224.         },
  225.         pbMouseDown(evt) {
  226.  
  227.  
  228.  
  229.             evt.preventDefault()
  230.             evt.stopPropagation()
  231.             evt.stopImmediatePropagation()
  232.  
  233.  
  234.         },
  235.         backDropClick(evt) {
  236.  
  237.  
  238.  
  239.  
  240.             if (evt && evt.target) { } else return;
  241.  
  242.             let target = evt.target
  243.             if (target.nodeName === "DIV" && (target.className || '').indexOf('player-controls-background') >= 0) { } else return;
  244.  
  245.  
  246.             let video = document.querySelector('#movie_player video[src]')
  247.             if (!video) return;
  248.  
  249.  
  250.             evt.preventDefault();
  251.             evt.stopPropagation();
  252.             evt.stopImmediatePropagation();
  253.  
  254.             videoToggle(video);
  255.  
  256.  
  257.         },
  258.         docKeyDown(evt) {
  259.             if (evt.target.nodeName === 'BODY') {
  260.                 // console.log(evt)
  261.                 if (evt.code === "Space") {
  262.  
  263.                     let video = document.querySelector('#movie_player video[src]')
  264.                     if (!video) return;
  265.                     videoToggle(video);
  266.                     evt.preventDefault();
  267.                     evt.stopPropagation();
  268.                     evt.stopImmediatePropagation();
  269.  
  270.                 } else if (evt.code === 'ArrowLeft') {
  271.  
  272.  
  273.                     let video = document.querySelector('#movie_player video[src]')
  274.                     if (!video) return;
  275.  
  276.                     if (video.currentTime >= 5)
  277.                         video.currentTime = video.currentTime - 5
  278.  
  279.                 } else if (evt.code === 'ArrowRight') {
  280.  
  281.  
  282.                     let video = document.querySelector('#movie_player video[src]')
  283.                     if (!video) return;
  284.  
  285.                     if (video.duration >= video.currentTime + 5)
  286.                         video.currentTime = video.currentTime + 5
  287.  
  288.  
  289.                 }
  290.  
  291.             }
  292.         }
  293.  
  294.     }
  295.  
  296.     function uiSetup(elm) {
  297.  
  298.         if (!elm) return;
  299.  
  300.  
  301.         if (!controlsInitialized) {
  302.             controlsInitialized = true;
  303.  
  304.             const isProgressBarExist = document.querySelector('[role="slider"], yt-progress-bar, ytm-progress-bar, .yt-progress-bar, .ytm-progress-bar, .YtmProgressBarProgressBar, .watch-page-progress-bar')
  305.  
  306.             // (( pb element to be reviewed. ))
  307.  
  308.             if (isProgressBarExist) {
  309.  
  310.                 // let pb = document.querySelector('.player-controls-pb .ytm-progress-bar')
  311.  
  312.                 // if (!pb) {
  313.                 //     console.log("'.player-controls-pb .ytm-progress-bar' cannot be found");
  314.                 // } else {
  315.  
  316.                 //     pb.addEventListener('mouseup', eventHandlers.pbMouseUp, true)
  317.  
  318.                 elm.addEventListener('click', eventHandlers.backDropClick, true)
  319.  
  320.                 document.addEventListener('keydown', eventHandlers.docKeyDown, true)
  321.  
  322.                 // }
  323.             }
  324.  
  325.         }
  326.  
  327.     }
  328.  
  329.     const cssFNs = {
  330.  
  331.         addFadeIn(elm) {
  332.             elm.classList.add('fadein')
  333.             uiSetup(elm)
  334.         },
  335.  
  336.         removeFadeIn(elm) {
  337.             let skip = false
  338.             let video = document.querySelector('#movie_player video[src]')
  339.             if (video && video.paused) {
  340.                 skip = true
  341.             }
  342.             if (!skip) elm.classList.remove('fadein')
  343.  
  344.             uiSetup(elm)
  345.         },
  346.         initUI() {
  347.  
  348.             let elm = document.querySelector('#player-control-overlay[class]')
  349.             uiSetup(elm)
  350.  
  351.         }
  352.  
  353.     }
  354.  
  355.     document.addEventListener('animationstart', (evt) => {
  356.  
  357.         let n = (evt || 0).animationName
  358.  
  359.         let f = cssFNs[n]
  360.         if (f) f(evt.target)
  361.  
  362.  
  363.     }, true)
  364.  
  365.  
  366.  
  367.     function onReady() {
  368.  
  369.         (document.head || document.documentElement).appendChild(styleElm);
  370.         styleElm = null;
  371.  
  372.     }
  373.  
  374.  
  375.  
  376.     Promise.resolve().then(() => {
  377.         if (document.readyState !== 'loading') {
  378.             onReady();
  379.         } else {
  380.             window.addEventListener("DOMContentLoaded", onReady, false);
  381.         }
  382.     });
  383.  
  384.     if (showNativeControls) {
  385.         // ==UserScript==
  386.         // @name Show Native Controls
  387.         // @match https://m.youtube.com/*
  388.         // @run-at document-start
  389.         // ==/UserScript==
  390.  
  391.  
  392.         let addedCSS = false;
  393.         function setupVideo(video) {
  394.  
  395.             if (!addedCSS) {
  396.  
  397.                 document.documentElement.appendChild(document.createElement('style')).textContent = `
  398.  
  399.                     #player-control-overlay:not(.fadein){
  400.                         height: calc(100% - 64px);
  401.                     }
  402.  
  403.                     #player-control-overlay .player-controls-background{
  404.                         pointer-events: none;
  405.                     }
  406.  
  407.                     #player-control-overlay:not(.fadein) .player-controls-background{
  408.                         bottom: -64px;
  409.                     }
  410.  
  411.                 `
  412.             }
  413.             const v = video;
  414.             /*
  415.             try {
  416.               v.controls = true;
  417.               v.nextSibling.childNodes[0].style['pointer-events'] = 'none'
  418.               v.nextSibling.childNodes[0].childNodes[1].style['pointer-events'] = 'auto'
  419.             } catch (e) { }
  420.             */
  421.  
  422.             v.controls = true;
  423.  
  424.             const observer = new MutationObserver((list, observer) => {
  425.                 let q = !!document.querySelector('#player-control-overlay:not(.fadein)');
  426.                 if (v.controls !== q) {
  427.  
  428.                     v.controls = q;
  429.                 }
  430.  
  431.             })
  432.  
  433.             observer.observe(v, { attributes: true, attributeFilter: ['controls'] });
  434.             v.setAttribute('w68u4', '1')
  435.  
  436.         }
  437.  
  438.         const parentMO = new MutationObserver(() => {
  439.  
  440.             let q = !!document.querySelector('#player-control-overlay:not(.fadein)');
  441.  
  442.             if (q) {
  443.  
  444.                 for (const v of document.querySelectorAll('.html5-main-video[w68u4="1"]')) {
  445.  
  446.                     if (v.controls !== q) {
  447.                         v.controls = q;
  448.                     }
  449.                 }
  450.  
  451.             }
  452.  
  453.         });
  454.  
  455.  
  456.         new MutationObserver(() => {
  457.  
  458.             const video = document.querySelector('.html5-main-video:not([w68u4])');
  459.             if (!video) return;
  460.             video.setAttribute('w68u4', '');
  461.             if (!(video instanceof HTMLMediaElement)) return;
  462.  
  463.             setupVideo(video);
  464.  
  465.             for (const elm of document.querySelectorAll('#player-control-overlay, ytm-custom-control, ytm-custom-control .new-controls, ytm-custom-control .player-controls-content, ytm-custom-control .player-controls-content, ytm-custom-control .player-controls-background-container, #player')) {
  466.                 parentMO.observe(elm, { childList: true, attributes: true });
  467.             }
  468.  
  469.  
  470.         }).observe(document, { subtree: true, childList: true });
  471.  
  472.     }
  473.  
  474.  
  475.     const isCtrl = (e) => ((e.ctrlKey && !e.metaKey) || (!e.ctrlKey && e.metaKey));
  476.  
  477.     const eventFn1 = (evt) => {
  478.         if (isCtrl(evt)) {
  479.             evt.stopImmediatePropagation();
  480.             evt.stopPropagation();
  481.         }
  482.     };
  483.  
  484.     document.addEventListener('mousedown', eventFn1, true);
  485.  
  486.     document.addEventListener('mouseup', eventFn1, true);
  487.  
  488.     document.addEventListener('pointerdown', eventFn1, true);
  489.  
  490.     document.addEventListener('pointerup', eventFn1, true);
  491.  
  492.     document.addEventListener('click', eventFn1, true);
  493.  
  494.     document.addEventListener('playing', (evt) => {
  495.  
  496.         if (evt && evt.isTrusted === true && evt.target instanceof HTMLVideoElement && evt.target.closest('#player')) {
  497.  
  498.             evt.target.style.pointerEvents = "none";
  499.             if (!evt.target.muted) evt.target.volume = 1; // fixed at 1.0
  500.  
  501.         }
  502.  
  503.     }, true);
  504.  
  505.  
  506. })({ Promise });