☰

YouTube Lite

Makes YouTube fancier

  1. // ==UserScript==
  2. // @name         YouTube Lite
  3. // @icon         http://s.ytimg.com/yts/img/favicon_144-vflWmzoXw.png
  4. // @namespace    x4_ytlite
  5. // @version      0.5.15
  6. // @description  Makes YouTube fancier
  7. // @author       x4fab
  8. // @match        http://www.youtube.com/*
  9. // @match        https://www.youtube.com/*
  10. // @grant        none
  11. // @run-at       document-start
  12. // @license      MIT
  13. // ==/UserScript==
  14.  
  15. if (window.top != window.self){
  16.     return;
  17. }
  18.  
  19. if (location.protocol === 'http:'){
  20.     location.replace(location.href.replace(/^http:/, 'https:')); 
  21. }
  22.  
  23. window.addEventListener('load', function (){
  24.     var styleNode = document.createElement('style');
  25.     styleNode.innerHTML = ''.slice.call(function(){/*
  26.         #appbar-guide-menu{
  27.             height:100vh;
  28.             opacity:1;
  29.             visibility:visible;
  30.             left:-230px;
  31.             margin-top:0;
  32.             transition:opacity .25s cubic-bezier(0.4,0,0.2,1),left .25s cubic-bezier(0.4,0,0.2,1);
  33.             transition-delay:.4s;border-right:1px solid #e3e3e3;
  34.         }
  35.         #appbar-guide-menu:hover, #appbar-guide-menu.e-active  {
  36.             left: 0;
  37.             opacity: 1;
  38.             transition-delay: 0s;
  39.         }
  40.         #appbar-guide-button-container  {
  41.             visibility: hidden;
  42.         }
  43.         
  44.         #masthead-positioner  {
  45.             position: fixed;
  46.             top: -52px;
  47.             opacity: 1;
  48.             transition: opacity .25s cubic-bezier(0.4,0,0.2,1), top .25s cubic-bezier(0.4,0,0.2,1);
  49.             transition-delay: .4s;
  50.             box-shadow: none;
  51.         }
  52.         #masthead-positioner:hover, #masthead-positioner.e-active {
  53.             top: 0;
  54.             opacity: 1;
  55.             transition-delay: 0s;
  56.         }
  57.         #masthead-positioner-height-offset {
  58.             display: none;
  59.         }
  60.         
  61.         .yt-card, .guide-flyout {
  62.             box-shadow: none;
  63.         }
  64.         #content {
  65.             margin-top: calc(100vh + 10px);
  66.         }
  67.         #placeholder-player {
  68.             display: none;
  69.         }
  70.         #watch7-main {
  71.             position: static;
  72.         }
  73.         #watch7-content {
  74.             z-index: 100;
  75.             position: relative;
  76.         }
  77.         #watch7-sidebar {
  78.             z-index: 5;
  79.         }
  80.         
  81.         #footer-container {
  82.             width: auto;
  83.             min-width: 1003px;
  84.             max-width: 1066px;
  85.             margin: 0 auto;
  86.             padding: 0 30px;
  87.             z-index: 5;
  88.             position: relative;
  89.             box-sizing: border-box;
  90.         }
  91.         @media screen and (min-height: 630px) and (min-width: 1294px){ #footer-container {
  92.             max-width: 1280px;
  93.         } }
  94.         @media screen and (min-height: 980px) and (min-width: 1720px){ #footer-container {
  95.             max-width: 1706px;
  96.         } }
  97.         #footer {
  98.             padding-bottom: 0;
  99.         }
  100.         #footer-logo {
  101.             display: none;
  102.         }
  103.         
  104.         .yt-uix-expander-collapsed #watch-description-text {
  105.             max-height: none;
  106.         }
  107.         .yt-uix-expander-collapsed .yt-uix-expander-body {
  108.             display: block !important;
  109.         }
  110.         .yt-card.yt-uix-expander .yt-uix-button-expander, .yt-card .yt-uix-expander .yt-uix-button-expander {
  111.             display: none !important;
  112.         }
  113.         
  114.         #player {
  115.             top: 0;
  116.         }
  117.         #player-api {
  118.             position: fixed !important;
  119.             top: 0 !important;
  120.             left: 0 !important;
  121.             right: 0 !important;
  122.             height: 100vh !important;
  123.             margin: 0 auto;
  124.         }
  125.         .video-stream.html5-main-video {
  126.             position: fixed !important;
  127.             top: 0 !important;
  128.             left: 0 !important;
  129.             right: 0 !important;
  130.             height: 100vh !important;
  131.             width: 100vw !important;
  132.         }
  133.         .html5-video-player {
  134.             overflow: visible;
  135.         }
  136.         .html5-video-content {
  137.             __z-index: 799;
  138.         }
  139.         body, .watch-stage-mode #theater-background {
  140.             background-color: #000;
  141.         }
  142.         
  143.         .html5-video-controls {
  144.             opacity: 0;
  145.             transition-delay: .4s;
  146.         }
  147.         .html5-video-controls:hover, .html5-video-controls.e-active {
  148.             opacity: 1 !important;
  149.             transition-delay: 0s;
  150.         }
  151.         
  152.         .ytp-player-content.ytp-iv-player-content {
  153.             width: 0;
  154.             right: 0;
  155.             left: auto;
  156.             position: fixed;
  157.             bottom: 0 !important;
  158.         }
  159.         .videowall-endscreen.html5-endscreen {
  160.             width: 100vw;
  161.             position: fixed;
  162.             height: 100vh;
  163.             top: 0;
  164.             left: 0;
  165.         }
  166.         
  167.         .us_box {
  168.             position: fixed;
  169.             border-radius: 0;
  170.             border: 1px solid #e3e3e3;
  171.             padding: 15px;
  172.         }
  173.         .us_box h3, .us_submitbuttons {
  174.             background-color: #fff;
  175.             color: #333;
  176.             border: none;
  177.             padding-left: 0;
  178.             padding-right: 0;
  179.         }
  180.  
  181.         #us_infobox {
  182.             position: fixed;
  183.             border-radius: 0;
  184.             border: 1px solid #e3e3e3;
  185.             padding: 15px;
  186.             background: white;
  187.         }
  188.         
  189.         .us_error {
  190.             color: red;
  191.             border: none;
  192.             background: none;
  193.             color: #333 !important;
  194.             font-size: 12px;
  195.         }
  196.         
  197.         .watch-stage-mode #player .player-api {
  198.             margin: 0 auto !important;
  199.         }
  200.         .watch-wide #watch7-sidebar, .watch-wide #watch7-preview {
  201.             z-index:  5;
  202.         }
  203.         
  204.         #player-playlist {
  205.             margin-top: calc(100vh + 12px);
  206.         }
  207.         #watch-appbar-playlist {
  208.             z-index: 6 !important;
  209.             top: 0 !important;
  210.             transform: none !important;
  211.             transition: none !important;
  212.         }
  213.         #content {
  214.             top: 0 !important;
  215.         }
  216.  
  217.         #player-unavailable {
  218.             position: fixed;
  219.             top: 0;
  220.             height: 100vh;
  221.             left: 0;
  222.             width: 100vw;
  223.             z-index: 0;
  224.             margin: 0;
  225.         }
  226.         .player-api {
  227.             background: transparent;
  228.         }
  229.     */}, 14, -3);
  230.     
  231.     function onMouseMove(e){ 
  232.         var m = null; 
  233.         if (e.clientY < 5){
  234.             m = document.querySelector('#masthead-positioner');
  235.         } else if (e.clientX < 5){
  236.             m = document.querySelector('#appbar-guide-menu');
  237.         } else if (e.target.tagName == 'DIV' && e.clientY > document.body.clientHeight - 5){
  238.             m = document.querySelector('.html5-video-controls');
  239.         }
  240.         if (m && (m = m.classList)){
  241.             m.add('e-active');
  242.             clearTimeout(m.e_t);
  243.             m.e_t = setTimeout(m.remove.bind(m,'e-active'), 1e3);
  244.         }
  245.     }
  246.  
  247.     function onResize(){
  248.         var v = document.querySelector('.video-stream.html5-main-video'),
  249.             c = document.querySelector('.html5-video-content');
  250.         if (v && c){
  251.             var h = v.offsetHeight / c.offsetHeight,
  252.                 k = Math.min(h, v.offsetWidth / c.offsetWidth);
  253.             c.style.transform = 'translate(0,' + Math.round(c.offsetHeight * Math.max(h - 1, 0) * .5) + 
  254.                     'px) scale(' + k + ',' + k + ')';
  255.         }
  256.     }
  257.     
  258.     document.onmousemove = document.onmouseout = onMouseMove;
  259.     window.onresize = onResize;
  260.  
  261.     setTimeout(function (){
  262.         document.querySelector('#appbar-guide-button').click();
  263.         var wide = document.querySelector('.ytp-size-button.ytp-button[title="Theater mode"]');
  264.         if (wide) wide.click();
  265.     }, 50);
  266.  
  267.     var previousLocation = null;
  268.     setInterval(function (){
  269.         if (document.body.scrollTop == 52){
  270.             document.body.scrollTop = 0;
  271.         }
  272.  
  273.         if (previousLocation != location.href){
  274.             if (location.href.indexOf('/watch?') != -1){
  275.                 if (!styleNode.parentNode){
  276.                     document.body.appendChild(styleNode);
  277.                 }
  278.             } else if (styleNode.parentNode){
  279.                 document.body.removeChild(styleNode);
  280.             }
  281.  
  282.             onResize();
  283.             previousLocation = location.href;
  284.         }
  285.     }, 50);
  286. }, false);