☰

Youtube Mini Player

Toggle mini player when scrolling down in Youtube

目前为 2015-09-06 提交的版本。查看 最新版本。

// ==UserScript==
// @name        Youtube Mini Player
// @namespace   feifeihang.info
// @description Toggle mini player when scrolling down in Youtube
// @include     https://youtu.be/*
// @include     http://youtu.be/*
// @include     https://www.youtube.com/watch?*
// @include     http://www.youtube.com/watch?*
// @version     2
// @grant       none
// ==/UserScript==
(function (window, document, undefined) {
  // find and keep a reference of the video player.
  var player = document.querySelector('.video-stream');
  var style = '';
  // a flag to indicate is the mini player is toggled.
  var isToggled = false;
  var isTogglable = true;
  
  var originalHeight = undefined;

  window.addEventListener('scroll', function () {
    if (!isTogglable) {return false;}
    
    // when scrolling up to 1/3 original player height, turn off mini player.
    if (isToggled && window.pageYOffset < originalHeight / 3) {
      player.style = style;
      isToggled = false;
      return;
    }
    
    // when scrolling down to 1/3 player height, go to mini player mode.
    gotoMini();
  }, false);
  
  function gotoMini() {
    if (!isToggled &&
        window.pageYOffset >= parseInt(player.style.height, 10) / 3) {
      originalHeight = parseInt(player.style.height, 10);
      style = player.style.cssText;
      var top = 'top: ' + (window.innerHeight - 270) + 'px;';
      player.style = 'position: fixed; bottom: 20px; left: 20px; height: 250px;' +
        'width: 350px; z-index: 9999999;' + top;
      isToggled = true;
    } 
  }
  
  // add a mini player toggle button.
  var btn = document.createElement('div');
  btn.className += ' yt-uix-button yt-uix-button-size-default yt-uix-button-primary';
  btn.innerHTML = 'Mini: on';
  btn.style = 'line-height: 26px; height: 26px; margin-left: 5px;';
  btn.onclick = function () {
    if (this.innerHTML === 'Mini: on') {
      this.innerHTML = 'Mini: off';
      isTogglable = false;
      
      if (isToggled) {
        player.style = style;
        isToggled = false;
      }
    }
    else {
      this.innerHTML = 'Mini: on';
      gotoMini();
      isTogglable = true;
    }
  }
  document.querySelector('#yt-masthead-signin').appendChild(btn);
  
})(this, this.document);