☰

Youtube floating player

Youtube floating player.

当前为 2016-08-04 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name        Youtube floating player
  3. // @description Youtube floating player.
  4. // @version     2.0
  5. // @author      REVerdi
  6. // @namespace   https://openuserjs.org/users/REVerdi
  7. // @copyright   2014+, REVerdi (https://openuserjs.org/users/REVerdi)
  8. // @license     (CC) Attribution Non-Commercial Share Alike; http://creativecommons.org/licenses/by-nc-sa/3.0/
  9. // Por causa do SPF (Structured Page Fragments), não posso usar  // @include   http*://www.youtube.com/watch?*
  10. // porque se o 1° link no YouTube não for do tipo acima, esse script nunca será executado.
  11. // @include     http*://www.youtube.com/*
  12. // @grant       none
  13. // ==/UserScript==
  14.  
  15.  
  16. /*
  17. TESTADO APENAS NO FIREFOX
  18.  
  19. ONLY TESTED ON FIREFOX
  20. */
  21.  
  22.  
  23. /*
  24. O YouTube "quase" exatamente como eu queria!
  25. Eu não sou programador, então não joguem tomates podres em mim :)
  26.  
  27. YouTube "almost" exactly as I wanted!
  28. I'm not a programmer, so don't throw rotten tomatoes at me :)
  29. */
  30.  
  31.  
  32. // Based on the ideia of drhouse (http://userscripts.org/scripts/show/186872)
  33. // and contains source code written by tforbus:
  34. // https://chrome.google.com/webstore/detail/video-pinner/egfhbaheiflmihggjcfmnmchkijkcdpl
  35. // https://github.com/tforbus/youtube-fixed-video-bookmarklet
  36. // http://www.whattheforbus.com/youtube-bookmarklet
  37. // http://www.tristinforbus.com/
  38.  
  39.  
  40. (function(){
  41.  
  42.  
  43. "use strict";
  44.  
  45.  
  46. var _window;
  47. if (typeof unsafeWindow !== undefined){
  48.     _window = unsafeWindow;
  49. }
  50. else {
  51.     _window = window;
  52. }
  53.  
  54.  
  55. var bodyDivName = 'body';
  56. //var pageDivName = 'page';
  57.  
  58. //var headerDivName = 'yt-masthead';
  59. //var header;
  60. //var headerRect;
  61.  
  62. var placeholderPlayerDivName = 'placeholder-player';
  63. var placeHolderPlayer;
  64.  
  65. var playerDivName = 'player';
  66. var player;
  67. var playerRect;
  68.  
  69. var contentDivName = 'watch7-content';
  70. var content;
  71. var contentRect;
  72.  
  73. var sidebarDivName = 'watch7-sidebar';
  74. var sidebar;
  75. var sidebarRect;
  76.  
  77. var footerDivName = 'footer-container';
  78. var footer;
  79. //var footerRect;
  80.  
  81.  
  82. var isBodyMutationObserverAdded = 0;
  83. var isPageScrollOrResizeListenerAdded = 0;
  84.  
  85.  
  86. //if (document.getElementById('movie_player')) document.getElementById('movie_player').style.border = "thick solid blue";
  87. //if (document.getElementById('player')) document.getElementById('player').style.border = "thick solid red";
  88.  
  89.  
  90. function pageScrollOrResize(evt) {
  91.     
  92.     player = document.getElementById(playerDivName);
  93.     
  94.     placeHolderPlayer = document.getElementById(placeholderPlayerDivName);
  95.     
  96.     if ( placeHolderPlayer ) {                                                      //user IS on a video page
  97.         
  98.         placeHolderPlayer.firstElementChild.style.backgroundColor = 'transparent';
  99.         
  100.       //player = document.getElementById(playerDivName);
  101.         content = document.getElementById(contentDivName);
  102.         sidebar = document.getElementById(sidebarDivName);
  103.         footer = document.getElementById(footerDivName);
  104.         
  105.       //footer.style.position = 'fixed';                                            //fixa o rodapé na base da página
  106.       //footer.style.bottom = '0px';                                                //fix the footer at the base of page
  107.         
  108.         if ( _window.pageYOffset > 0 ) {                                            //scroll > 0
  109.             
  110.             player.style.position = 'fixed';
  111.             player.style.top = '60px';
  112.             contentRect = content.getBoundingClientRect();
  113.             player.style.left = contentRect.left+'px';
  114.           //player.style.zIndex = 998;
  115.             
  116.             sidebar.style.position = 'absolute';
  117.           //sidebar.style.top = player.clientHeight+'px';
  118.           //sidebar.style.zIndex = 999;
  119.             
  120.             if ( /list/.test(document.location) === false ) {                       //user is NOT playing a playlist
  121.                 player.style.zIndex = 998;
  122.                 sidebar.style.zIndex = 999;
  123.             }
  124.             else {                                                                  //user IS playing a playlist
  125.                 player.style.zIndex = 999;
  126.                 sidebar.style.zIndex = 998;
  127.                 sidebarRect = sidebar.getBoundingClientRect();
  128.                 playerRect = player.getBoundingClientRect();
  129.                 player.style.width = sidebarRect.right - playerRect.left + 'px';    //playlist width
  130.             }
  131.             
  132.           //content.style.position = 'relative';
  133.           //content.style.top = player.clientHeight + 'px';
  134.           //content.style.zIndex = 997;
  135.             
  136.         }
  137.         else {                                                                      //scroll == 0
  138.             player.style.position = '';
  139.             player.style.top = '';
  140.             player.style.left = '';
  141.           //player.style.zIndex = '';
  142.             
  143.             sidebar.style.position = '';
  144.           //sidebar.style.top = '';
  145.           //sidebar.style.zIndex = '';
  146.             
  147.             player.style.zIndex = '';
  148.             sidebar.style.zIndex = '';
  149.             
  150.             player.style.width = '';
  151.             
  152.           //content.style.position = '';
  153.           //content.style.top = '';
  154.           //content.style.zIndex = '';
  155.         }
  156.     }
  157.     else {                                                                          //user is NOT on a video page
  158.         player.style.position = '';
  159.         player.style.top = '';
  160.         player.style.left = '';
  161.         player.style.zIndex = '';
  162.         player.style.width = '';
  163.     }
  164. }
  165.  
  166.  
  167.  
  168.  
  169. var bodyMutationOberver = new MutationObserver(function(mutations) {
  170.     mutations.forEach(function(mutation) {
  171.         if ( isPageScrollOrResizeListenerAdded === 0 ) {
  172.             document.addEventListener('scroll', pageScrollOrResize, false);
  173.              _window.addEventListener('resize', pageScrollOrResize, false);
  174.             isPageScrollOrResizeListenerAdded = 1;
  175.         }
  176.     });
  177. });
  178.  
  179. function addBodyMutationObserver() {
  180.     var config = { attributes: true, characterData: true, childList: true };
  181.     var target = document.getElementById(bodyDivName);                          //tem que ser 'body', porque 'page' só funciona quando a 1ª página NÃO for uma de vídeo
  182.     if ( target !== null ) {                                                    //( target !== null ) ou apenas ( target )
  183.         bodyMutationOberver.observe(target, config);
  184.         isBodyMutationObserverAdded = 1;
  185.     }
  186. }
  187.  
  188.  
  189.  
  190.  
  191. function entryPoint() {
  192.     if( isBodyMutationObserverAdded === 0 ) {
  193.         addBodyMutationObserver();
  194.     }
  195. }
  196.  
  197. entryPoint();
  198.  
  199.  
  200. })();