☰

Youtube Storyboard

mouse-over video thumbnail to preview video by cycling through the storyboard

  1. // ==UserScript==
  2. // @name           Youtube Storyboard
  3. // @namespace      hbb_works
  4. // @description    mouse-over video thumbnail to preview video by cycling through the storyboard
  5. // @version        1.3.1r1605101704
  6. // @include        http://*youtube.com*
  7. // @include        https://*youtube.com*
  8. // @grant          none
  9. // ==/UserScript==
  10.  
  11.  
  12. const INTERVAL = 200; // default interval in milliseconds
  13. var div;
  14. var loader;
  15. var animator;
  16. var mousePos = { x: 0, y: 0 };
  17.  
  18. function dbg() {
  19.     //console.log.apply(console, arguments);
  20. }
  21.  
  22. function getPos(element) {
  23.     var ref = document.body.getBoundingClientRect();
  24.     var rel = element.getBoundingClientRect();
  25.     return {
  26.         left: rel.left - ref.left,
  27.         top: rel.top - ref.top
  28.     };
  29. }
  30.  
  31. function setMousePos(event) {
  32.     mousePos = { x: event.pageX, y: event.pageY };
  33. }
  34.  
  35. (function init() {
  36.     dbg("init youtube storyboard");
  37.     document.addEventListener('mouseover', onMouseOver, false);
  38.     loader = document.createElement('img');
  39.     div = document.createElement('div');
  40.     div.id = 'storyboardPlayer';
  41.     div.style.display = 'none';
  42.     div.style.position = 'absolute';
  43.     div.style.zIndex = 99;
  44.     var a = document.createElement('a');
  45.     var innerDiv = document.createElement('div');
  46.     innerDiv.style.height = '100%';
  47.     innerDiv.style.width = '100%';
  48.     a.appendChild(innerDiv);
  49.     div.appendChild(a);
  50.     document.getElementById('page') .appendChild(div);
  51.     div.addEventListener('mouseout', function () {
  52.         animator.stop();
  53.     });
  54.     
  55.     document.addEventListener('mousemove', function (event) {
  56.         setMousePos(event);
  57.     });
  58. })();
  59.  
  60. function onMouseOver(event) {
  61.     setMousePos(event);
  62.     var target = event.target;
  63.     var src = target.src;
  64.     if (target.nodeName == 'IMG' && src && (/default\.jpg/.exec(src) || /0\.jpg/.exec(src)))
  65.     {
  66.         if (animator) {
  67.             animator.stop();
  68.         }
  69.         animator = new Animator(target);
  70.         animator.getStoryboardSpecs(function () {
  71.             animator.start();
  72.         });
  73.     }
  74. }
  75.  
  76. var Animator = function (target) {
  77.     this.id = Math.floor(Math.random() * 10000);
  78.     dbg("new " + this.id);
  79.     this.target = target;
  80.     this.frame = 0;
  81.     this.sheet = 0;
  82.     this.interval = INTERVAL;
  83.     this.src = target.src
  84.     // get video id
  85.     this.v = (/vi\/(.*?)\//.exec(this.src) || []) [1];
  86.     if (this.v) {
  87.         this.width = target.width;
  88.         this.height = target.height;
  89.     }
  90.     var p = getPos(target);
  91.     div.style.top = p.top + 'px';
  92.     div.style.left = p.left + 'px';
  93.     div.style.width = this.width + 'px';
  94.     div.style.height = this.height + 'px';
  95.     this.x = p.left;
  96.     this.y = p.top;
  97.     
  98.     // adjustments for small thumbnails in list of related videos
  99.     if (target.parentElement.classList.contains('yt-uix-simple-thumb-wrap')) {
  100.         var spanHeight = target.parentElement.getBoundingClientRect().height;
  101.         div.style.top = p.top + ((target.height - spanHeight) / 2) + 'px';
  102.         div.style.height = spanHeight + 'px';
  103.         this.height = spanHeight;
  104.     }
  105.     
  106.     var parent = target.parentElement;
  107.     while (parent.tagName != 'A') {
  108.         parent = parent.parentElement;
  109.     }
  110.     div.children[0].href = parent.href;
  111.     
  112.     div.style.backgroundRepeat = 'no-repeat';
  113.     div.style.backgroundPosition = 'center';
  114.     div.style.backgroundSize = null;
  115.     // loading indicator
  116.     div.style.backgroundImage ='url(\'data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==\')';
  117.     div.style.display = null;
  118. };
  119. Animator.prototype.parseSpec = function (storyboard_spec) {
  120.     dbg("parseSpec " + this.id);
  121.     var lines = storyboard_spec.split('|');
  122.     var q;
  123.     if (!this.quality) {
  124.         this.quality = - 1;
  125.         do {
  126.             this.quality++;
  127.             q = lines[this.quality + 1].split('#');
  128.         } while (parseInt(q[0], 10) < this.width && this.quality + 2 < lines.length);
  129.     }
  130.     var q = lines[this.quality + 1].split('#');
  131.     var s = {
  132.         url: lines[0].replace('$L', this.quality) .replace('$N', q[6]),
  133.         width: parseInt(q[0], 10),
  134.         height: parseInt(q[1], 10),
  135.         count: parseInt(q[2], 10),
  136.         cols: parseInt(q[3], 10),
  137.         rows: parseInt(q[4], 10),
  138.         sigh: q[7]
  139.     };
  140.     s.sheetSize = s.cols * s.rows;
  141.     s.sheetCount = ((s.count / s.sheetSize) | 0) + 1; // bitwise OR to loose decimals
  142.     s.countOnLastSheet = ((s.count - 1) % s.sheetSize) + 1;
  143.     return this.spec = s;
  144. };
  145. Animator.prototype.loadImage = function (callback) {
  146.     dbg("loadImage " + this.id);
  147.     var onLoad = (function () {
  148.         div.style.backgroundImage = 'url(' + loader.src + ')';
  149.         loader.removeEventListener('load', onLoad);
  150.         callback.apply(this);
  151.     }).bind(this);
  152.     loader.addEventListener('load', onLoad);
  153.     loader.src = this.spec.url.replace('$M', this.sheet) + '?sigh=' + this.spec.sigh;
  154. };
  155. Animator.prototype.getStoryboardSpecs = function (callback, fromWatch) {
  156.     dbg("getStoryboardSpecs (fromWatch: " + fromWatch + ") " + this.id);
  157.     this.xhr = new XMLHttpRequest();
  158.     this.xhr.onload = (function () {
  159.         if (this.isMouseOver()) {
  160.             if (fromWatch) {
  161.                 var spec = (/"storyboard_spec":\s*(".*?")/.exec(this.xhr.responseText) || []) [1];
  162.             }
  163.             else {
  164.                 var spec = (/&storyboard_spec=(.*?)&/.exec(this.xhr.responseText) || []) [1];
  165.             }
  166.             if (spec) {
  167.                 if (fromWatch) {
  168.                     spec = eval(spec); // remove backslashes
  169.                 }
  170.                 this.parseSpec(decodeURIComponent(spec));
  171.                 callback.apply(this);
  172.             } 
  173.             else if (!fromWatch) {
  174.                 this.getStoryboardSpecs(callback, true);
  175.             }
  176.             else {
  177.                 div.style.background = null;
  178.             }
  179.         }
  180.         else {
  181.             this.stop();
  182.         }
  183.     }).bind(this);
  184.     if (fromWatch) {
  185.         this.xhr.open('GET', '/watch?v=' + this.v, true);
  186.     }
  187.     else {
  188.         this.xhr.open('GET', '/get_video_info?video_id=' + this.v, true);
  189.     }
  190.     this.xhr.send();
  191. };
  192. Animator.prototype.start = function () {
  193.     dbg("start " + this.id);
  194.     this.frame = 0;
  195.     this.sheet = 0;
  196.     var lastTick;
  197.     var next = function () {
  198.         dbg("next " + this.id + " token " + this.token);
  199.         if (this.isMouseOver()) {
  200.             if (this.spec.fit == 'height') {
  201.                 var w = this.spec.width * this.height / this.spec.height;
  202.                 var offset = (this.width - w) / 2;
  203.                 div.style.backgroundPosition = -((this.frame % this.spec.cols) * w - offset) + 'px ' +
  204.                                                -(((this.frame / this.spec.cols) | 0) * this.height) + 'px'; // bitwise OR with 0 to loose decimals
  205.             } 
  206.             else {
  207.                 var h = this.spec.height * this.width / this.spec.width;
  208.                 var offset = (this.height - h) / 2;
  209.                 div.style.backgroundPosition = -((this.frame % this.spec.cols) * this.width) + 'px ' +
  210.                                                -(((this.frame / this.spec.cols) | 0) * h - offset) + 'px';
  211.             }
  212.             this.frame++;
  213.             if ((this.frame == this.spec.sheetSize) || (this.sheet == this.spec.sheetCount - 1 && this.frame == this.spec.countOnLastSheet))
  214.             {
  215.                 clearInterval(this.token);
  216.                 dbg("clear " + this.id + " token " + this.token);
  217.                 this.loadImage(function () {
  218.                     this.frame = 0;
  219.                     this.sheet = (this.sheet + 1) % this.spec.sheetCount;
  220.                     this.token = setInterval(next, this.interval);
  221.                     dbg("set " + this.id + " token " + this.token);
  222.                 });
  223.             }
  224.         } 
  225.         else {
  226.             this.stop();
  227.         }
  228.     }.bind(this);
  229.     
  230.     this.loadImage(function () {
  231.         if (this.isMouseOver()) {
  232.             if ((this.width / this.height) <= (this.spec.width / this.spec.height)) {
  233.                 this.spec.fit = 'height';
  234.                 div.style.backgroundSize = ((this.spec.width * this.height / this.spec.height) * this.spec.cols) + 'px ' + 
  235.                                            (this.height * this.spec.rows) + 'px';
  236.             } 
  237.             else {
  238.                 this.spec.fit = 'width';
  239.                 div.style.backgroundSize = (this.width * this.spec.cols) + 'px ' + 
  240.                                            ((this.spec.height * this.width / this.spec.width) * this.spec.rows) + 'px';
  241.             }
  242.             this.token = setInterval(next, this.interval);
  243.             dbg("set " + id + " token " + this.token);
  244.         }
  245.         else {
  246.             this.stop();
  247.         }
  248.     });
  249. };
  250. Animator.prototype.stop = function () {
  251.     dbg("stop " + this.id);
  252.     if (!this.stopped) {
  253.         clearInterval(this.token);
  254.         dbg("clear " + this.id + " token " + this.token);
  255.         div.style.display = 'none';
  256.     }
  257.     this.stopped = true;
  258. };
  259. Animator.prototype.isMouseOver = function () {
  260.     return mousePos.x >= this.x && mousePos.x <= this.x + this.width && 
  261.            mousePos.y >= this.y && mousePos.y <= this.y + this.height;
  262. };