☰

Youtube Mini Player (Fork)

Toggle mini player when scrolling down in Youtube

  1. // ==UserScript==
  2. // @name        Youtube Mini Player (Fork)
  3. // @namespace   feifeihang.info
  4. // @description Toggle mini player when scrolling down in Youtube
  5. // @include     https://youtu.be/*
  6. // @include     http://youtu.be/*
  7. // @include     https://www.youtube.com/watch?*
  8. // @include     http://www.youtube.com/watch?*
  9. // @author      Feifei Hang
  10. // @maintainer  Braden Best
  11. // @version     5.1
  12. // @grant       none
  13. // ==/UserScript==
  14. window.addEventListener('load', function () {
  15.   (function (window, document, undefined) {
  16.     // find and keep a reference of the video player.
  17.     var player = document.querySelector('#movie_player');
  18.     var stylePlayer = '';
  19.     var video = document.querySelector('#movie_player video.video-stream');
  20.     var videoSize = {
  21.     };
  22.     var controls = document.querySelector('#movie_player .ytp-chrome-bottom');
  23.     var controlsWidth;
  24.     // a flag to indicate is the mini player is toggled.
  25.     var isToggled = false;
  26.     var isTogglable = true;
  27.     var originalHeight = undefined;
  28.     window.addEventListener('scroll', function () {
  29.       if (!isTogglable) {
  30.         return false;
  31.       }
  32.       // when scrolling up to 1/3 original player height, turn off mini player.
  33.  
  34.       if (isToggled && window.pageYOffset < originalHeight / 3) {
  35.         player.style = stylePlayer;
  36.         video.style.width = videoSize.width;
  37.         video.style.height = videoSize.height;
  38.         video.style.left = videoSize.left;
  39.         controls.style.width = controlsWidth;
  40.         if (document.querySelector('.ytp-size-button')) {
  41.           document.querySelector('.ytp-size-button').style.display = 'inline-block';
  42.         }
  43.         isToggled = false;
  44.         return;
  45.       }
  46.       // when scrolling down to 1/3 player height, go to mini player mode.
  47.  
  48.       gotoMini();
  49.     }, false);
  50.     function gotoMini() {
  51.       if (!isToggled &&
  52.       window.pageYOffset >= parseInt(player.offsetHeight, 10) / 3) {
  53.         originalHeight = parseInt(player.offsetHeight, 10);
  54.         stylePlayer = player.style.cssText;
  55.         videoSize = {
  56.           height: video.style.height,
  57.           width: video.style.width,
  58.           left: video.style.left
  59.         };
  60.         controlsWidth = controls.style.width;
  61.         var top = 'top: ' + (window.innerHeight - 270) + 'px;';
  62.         var left = 'left: ' + (window.innerWidth - 430) + 'px;';
  63.         player.style = 'position: fixed; bottom: 20px; left: 20px; height: 250px;' +
  64.         'width: 400px; z-index: 9999999;' + top + left;
  65.         video.style.height = '250px';
  66.         video.style.width = '350px';
  67.         video.style.left = '0';
  68.         controls.style.width = '350px';
  69.         // now, hide the switch size button.
  70.         if (document.querySelector('.ytp-size-button')) {
  71.           document.querySelector('.ytp-size-button').style.display = 'none';
  72.         }
  73.         isToggled = true;
  74.       }
  75.     }
  76.     // add a mini player toggle button.
  77.  
  78.     var btn = document.createElement('div');
  79.     btn.className += ' yt-uix-button yt-uix-button-size-default yt-uix-button-primary';
  80.     btn.innerHTML = 'Mini: on';
  81.     btn.style = 'line-height: 26px; height: 26px; margin-left: 5px;';
  82.     btn.onclick = function () {
  83.       if (this.innerHTML === 'Mini: on') {
  84.         this.innerHTML = 'Mini: off';
  85.         isTogglable = false;
  86.         if (isToggled) {
  87.           player.style = stylePlayer;
  88.           video.style.width = videoSize.width;
  89.           video.style.height = videoSize.height;
  90.           video.style.left = videoSize.left;
  91.           controls.style.width = controlsWidth;
  92.           if (document.querySelector('.ytp-size-button')) {
  93.             document.querySelector('.ytp-size-button').style.display = 'inline-block';
  94.           }
  95.           isToggled = false;
  96.         }
  97.       } 
  98.       else {
  99.         this.innerHTML = 'Mini: on';
  100.         gotoMini();
  101.         isTogglable = true;
  102.       }
  103.     }
  104.     var dom = document.querySelector('#yt-masthead-signin') ||
  105.     document.querySelector('#yt-masthead-user');
  106.     dom.appendChild(btn);
  107.   }) (window, document);
  108. }, false);