JaTochNietDan

YouTube Options (Button styles fixed)

May 28th, 2012
127
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. // ==UserScript==
  2. // @name           YouTube Player Size Options
  3. // @namespace      http://www.dragory.net/
  4. // @description    Adds three options for YouTube's player size: 360p (S), 480p (M) and 720p (L).
  5. // @include        http://*.youtube.com/watch*
  6. // @include        http://youtube.com/watch*
  7. // @include        https://*.youtube.com/watch*
  8. // @include        https://youtube.com/watch*
  9. // @version        1.12
  10. // ==/UserScript==
  11.  
  12. var script = document.createElement('script');
  13. script.setAttribute('type', 'text/javascript');
  14. script.textContent = '/* <![CDATA[ */\n';
  15. script.textContent += [
  16.     function checkStartupSize() {
  17.         var storedSize = localStorage.getItem('customSizeId');
  18.         var isHtml5 = document.getElementById('video-player');
  19.         if(storedSize != null) {
  20.             switch(storedSize) {
  21.                 case '360':
  22.                     if(isHtml5) {
  23.                         changePlayerSizeCustom(970, 390, 640, 360, false, '360');
  24.                     } else {
  25.                         changePlayerSizeCustom(970, 390, 640, 390, false, '360');
  26.                     }
  27.                     break;
  28.                 case '480':
  29.                     if(isHtml5) {
  30.                         changePlayerSizeCustom(853, 510, 853, 480, true, '480');
  31.                     } else {
  32.                         changePlayerSizeCustom(853, 510, 853, 510, true, '480');
  33.                     }
  34.                     break;
  35.                 case '720':
  36.                     if(isHtml5) {
  37.                         changePlayerSizeCustom(1280, 750, 1280, 720, true, '720');
  38.                     } else {
  39.                         changePlayerSizeCustom(1280, 750, 1280, 750, true, '720');
  40.                     }
  41.                     break;
  42.             }
  43.         }
  44.     }
  45. ].join('\n');
  46. script.textContent += [
  47.     function changePlayerSizeCustom(cWidth, cHeight, vWidth, vHeight, wide, sizeId) {
  48.         elem_vid = document.getElementById('watch-video');
  49.         elem_player = document.getElementById('watch-player');
  50.         elem_container = document.getElementById('watch-video-container');
  51.         elem_sidebar = document.getElementById('watch-sidebar')
  52.         elem_extras = document.getElementById('watch-video-extra');
  53.         height_extras = elem_extras.offsetHeight;
  54.  
  55.         elem_html5_video = document.getElementsByClassName('video-content')[0];
  56.         elem_html5_annot = document.getElementsByClassName('video-annotations')[0];
  57.  
  58.         elem_vid.setAttribute('style', 'width: '+cWidth+'px !important; height: '+(cHeight+height_extras)+'px !important;');
  59.         elem_player.setAttribute('style', 'background: none repeat scroll 0% 0% transparent; width: '+vWidth+'px !important; height: '+vHeight+'px !important;');
  60.  
  61.         if(elem_html5_video != null) {
  62.             elem_html5_video.setAttribute('style', 'width: '+vWidth+'px !important; height: '+(vHeight)+'px !important; left: 0px !important; top: 0px !important;');
  63.  
  64.             if(sizeId != '360') {
  65.                 elem_player.setAttribute('style', 'background: none repeat scroll 0% 0% transparent; width: '+cWidth+'px !important; height: '+cHeight+'px !important;');
  66.             }
  67.  
  68.             // elem_html5_annot.setAttribute('style', 'width: '+vWidth+'px !important; height: '+(vHeight)+'px');
  69.         }
  70.  
  71.         if(wide) {
  72.             elem_vid.setAttribute('class', 'wide');
  73.             elem_container.setAttribute('style', 'background: #444444; background: #444444 -moz-linear-gradient(50% 0%, #555555, #333333) !important; background: #444444 -webkit-gradient(linear,left top,left bottom,from(#555),to(#333)) !important;');
  74.             elem_sidebar.setAttribute('style', 'margin-top: 10px !important;');
  75.         } else {
  76.             elem_vid.setAttribute('class', '');
  77.             elem_container.setAttribute('style', 'background: none !important;');
  78.             elem_sidebar.setAttribute('style', 'margin-top: -390px !important;');
  79.         }
  80.  
  81.         var uAgent = navigator.userAgent;
  82.         if(sizeId == '720' && uAgent.indexOf('Chrome') == -1) {
  83.             qElements = document.getElementsByClassName('yt-uix-button-menu-item');
  84.             if(qElements != null && qElements.length != 0) {
  85.                 for(var i=0; i<qElements.length; i++) {
  86.                     if(qElements[i].getAttribute('data-value') == '720p') {
  87.                         qElements[i].click();
  88.                     }  
  89.                 }
  90.             }
  91.  
  92.             /*flashEmbed = document.getElementById('movie_player');
  93.             flashEmbed.setAttribute('flashvars', flashEmbed.getAttribute('flashvars').replace(/\%26quality\%3D[0-9a-z]+\%26/, '%26quality%3D720p'));*/
  94.         }
  95.  
  96.         localStorage.setItem('customSizeId', sizeId);
  97.     }
  98. ].join('\n');
  99. script.textContent += [
  100.     function setCurrentButton(thisElement) {
  101.         var customButtons = document.getElementsByClassName('parentButCustom');
  102.         for(var i=0; i<customButtons.length; i++) {
  103.             customButtons[i].setAttribute('class', 'html5-large-player-button html5-control-right yt-uix-button yt-uix-button-player yt-uix-tooltip yt-uix-button-empty parentButCustom');
  104.         }
  105.  
  106.         thisElement.setAttribute('class', 'html5-large-player-button html5-control-right yt-uix-button yt-uix-button-player yt-uix-tooltip yt-uix-button-empty parentButCustom parentButCustomSelected');
  107.     }
  108. ].join('\n');
  109. script.textContent += "checkStartupSize();\n";
  110. script.textContent += "/* <![CDATA[ */";
  111.  
  112. var body = document.getElementsByTagName('body')[0];
  113. body.appendChild(script);
  114.  
  115. var isHtml5 = document.getElementById('video-player');
  116. if(isHtml5) {
  117.     var qualityButton = null;
  118.  
  119.     origButtons = document.getElementsByTagName('button');
  120.     for(var i=0; i<origButtons.length; i++) {
  121.         var thisIndex = origButtons[i].getAttribute('tabindex');
  122.         if(thisIndex == '14' || thisIndex == '13') {
  123.             origButtons[i].setAttribute('style', 'display: none !important;');
  124.         } else if(thisIndex == '10') {
  125.             qualityButton = origButtons[i];
  126.         }
  127.     }
  128.  
  129.     style = document.createElement('style');
  130.     style.setAttribute('type', 'text/css');
  131.     style.innerHTML = '.butCustom {background: #6b6b6b -moz-linear-gradient(50% 0%, #909090, #535353); background: #6b6b6b -webkit-gradient(linear,left top,left bottom,from(#909090),to(#535353)); box-shadow: 0px 2px #000000;}\n';
  132.     style.innerHTML += '.parentButCustom {cursor: pointer !important; background: #191919; background: transparent !important;}\n';
  133.     style.innerHTML += '.parentButCustom:focus {outline: none !important;}\n';
  134.     style.innerHTML += '.parentButCustomSelected {background: #0d0d0d !important;}\n';
  135.     style.innerHTML += '.parentButCustom:hover .butCustom {background: #b4b4b4 -moz-linear-gradient(50% 0%, #d3d3d3, #a1a1a1); background: #b4b4b4 -webkit-gradient(linear,left top,left bottom,from(#d3d3d3),to(#a1a1a1));}';
  136.     style.innerHTML += '#butCustomSmall {margin: 3px 8px 0px 8px; height: 8px;}\n';
  137.     style.innerHTML += '#butCustomMedium {margin: 2px 6px 0px 6px; height: 10px;}\n';
  138.     style.innerHTML += '#butCustomLarge {margin: 4px 4px 4px 4px; height: 12px;}';
  139.     body.appendChild(style);
  140.  
  141.     var but_s = document.createElement('button');
  142.     but_s.setAttribute('class', 'html5-large-player-button html5-control-right yt-uix-button yt-uix-button-player yt-uix-tooltip yt-uix-button-empty parentButCustom');
  143.     but_s.setAttribute('id', 'butCustomParentSmall');
  144.     but_s.setAttribute('aria-label', 'Player size: small');
  145.     but_s.setAttribute('role', 'button');
  146.     but_s.setAttribute('tabindex', '14');
  147.     but_s.setAttribute('type', 'button');
  148.     but_s.setAttribute('title', 'Player size: small');
  149.     but_s.setAttribute('data-tooltip-text', 'Player size: small');
  150.     but_s.setAttribute('onclick', "changePlayerSizeCustom(970, 390, 640, 360, false, '360'); setCurrentButton(this);");
  151.     but_s.setAttribute('style', 'border-left: 1px solid #222222;');
  152.     but_s.innerHTML = '<div id="butCustomSmall" class="butCustom"></div>';
  153.  
  154.     var but_m = document.createElement('button');
  155.     but_m.setAttribute('class', 'html5-large-player-button html5-control-right yt-uix-button yt-uix-button-player yt-uix-tooltip yt-uix-button-empty parentButCustom');
  156.     but_s.setAttribute('id', 'butCustomParentMedium');
  157.     but_m.setAttribute('aria-label', 'Player size: medium');
  158.     but_m.setAttribute('role', 'button');
  159.     but_m.setAttribute('tabindex', '14');
  160.     but_m.setAttribute('type', 'button');
  161.     but_m.setAttribute('title', 'Player size: medium');
  162.     but_m.setAttribute('data-tooltip-text', 'Player size: medium');
  163.     but_m.setAttribute('onclick', "changePlayerSizeCustom(853, 510, 853, 480, true, '480'); setCurrentButton(this);");
  164.     but_m.setAttribute('style', 'border-left: 1px solid #222222;');
  165.     but_m.innerHTML = '<div id="butCustomMedium" class="butCustom"></div>';
  166.  
  167.     var but_l = document.createElement('button');
  168.     but_l.setAttribute('class', 'html5-large-player-button html5-control-right yt-uix-button yt-uix-button-player yt-uix-tooltip yt-uix-button-empty parentButCustom');
  169.     but_s.setAttribute('id', 'butCustomParentLarge');
  170.     but_l.setAttribute('aria-label', 'Player size: large');
  171.     but_l.setAttribute('role', 'button');
  172.     but_l.setAttribute('tabindex', '14');
  173.     but_l.setAttribute('type', 'button');
  174.     but_l.setAttribute('title', 'Player size: large');
  175.     but_l.setAttribute('data-tooltip-text', 'Player size: large');
  176.     but_l.setAttribute('onclick', "changePlayerSizeCustom(1280, 750, 1280, 720, true, '720'); setCurrentButton(this);");
  177.     but_l.setAttribute('style', 'border-left: 1px solid #222222;');
  178.     but_l.innerHTML = '<div id="butCustomLarge" class="butCustom"></div>';
  179.  
  180.     var buttonSpace = document.getElementsByClassName('html5-player-chrome')[0];
  181.     buttonSpace.insertBefore(but_l, qualityButton);
  182.     buttonSpace.insertBefore(but_m, qualityButton);
  183.     buttonSpace.insertBefore(but_s, qualityButton);
  184. } else {
  185.     var but_s = document.createElement('button');
  186.     but_s.setAttribute('role', 'button');
  187.     but_s.setAttribute('id', 'watch-size-s');
  188.     but_s.setAttribute('class', 'yt-uix-tooltip-reverse  yt-uix-button yt-uix-button-default yt-uix-tooltip');
  189.     but_s.setAttribute('style', 'padding: 4px;');
  190.     but_s.setAttribute('type', 'button');
  191.     but_s.setAttribute('title', 'Player size: small');
  192.     but_s.setAttribute('data-tooltip-text', 'Player size: small');
  193.     but_s.setAttribute('onclick', "changePlayerSizeCustom(970, 390, 640, 390, false, '360');");
  194.     but_s.innerHTML = '<span class="yt-uix-button-content">S</span>';
  195.  
  196.     var but_m = document.createElement('button');
  197.     but_m.setAttribute('role', 'button');
  198.     but_m.setAttribute('id', 'watch-size-m');
  199.     but_m.setAttribute('class', 'yt-uix-tooltip-reverse  yt-uix-button yt-uix-button-default yt-uix-tooltip');
  200.     but_m.setAttribute('style', 'padding: 4px;');
  201.     but_m.setAttribute('type', 'button');
  202.     but_m.setAttribute('title', 'Player size: medium');
  203.     but_m.setAttribute('data-tooltip-text', 'Player size: medium');
  204.     but_m.setAttribute('onclick', "changePlayerSizeCustom(853, 510, 853, 510, true, '480');");
  205.     but_m.innerHTML = '<span class="yt-uix-button-content">M</span>';
  206.  
  207.     var but_l = document.createElement('button');
  208.     but_l.setAttribute('role', 'button');
  209.     but_l.setAttribute('id', 'watch-size-l');
  210.     but_l.setAttribute('class', 'yt-uix-tooltip-reverse  yt-uix-button yt-uix-button-default yt-uix-tooltip');
  211.     but_l.setAttribute('style', 'padding: 4px;');
  212.     but_l.setAttribute('type', 'button');
  213.     but_l.setAttribute('title', 'Player size: large');
  214.     but_l.setAttribute('data-tooltip-text', 'Player size: large');
  215.     but_l.setAttribute('onclick', "changePlayerSizeCustom(1280, 750, 1280, 750, true, '720');");
  216.     but_l.innerHTML = '<span class="yt-uix-button-content">L</span>';
  217.  
  218.     var actionSpace = document.getElementById('watch-actions');
  219.     actionSpace.appendChild(but_s);
  220.     actionSpace.appendChild(but_m);
  221.     actionSpace.appendChild(but_l);
  222. }
Advertisement
Add Comment
Please, Sign In to add comment