☰

YouTube Animated Thumbnails & Preview Videos

On hover, each thumbnail cycles though its 3 thumbnails. Additional feature to view those 3 thumbnails all at once (non-animated)

  1. // ==UserScript==
  2. // @name          YouTube Animated Thumbnails & Preview Videos
  3. // @namespace     http://userscripts.org/users/23652
  4. // @description   On hover, each thumbnail cycles though its 3 thumbnails. Additional feature to view those 3 thumbnails all at once (non-animated)
  5. // @include       http://*.youtube.com/*
  6. // @include       http://youtube.com/*
  7. // @include       https://*.youtube.com/*
  8. // @include       https://youtube.com/*
  9. // @exclude       http://*youtube.com/my_videos_edit*
  10. // @exclude       http://*youtube.com/my_subscribers*
  11. // @exclude       https://*youtube.com/my_videos_edit*
  12. // @exclude       https://*youtube.com/my_subscribers*
  13. // @copyright     JoeSimmons
  14. // @version       1.1.0
  15. // @license       GPL version 3 or any later version; http://www.gnu.org/copyleft/gpl.html
  16. // @require       https://greasyfork.org/scripts/1884-gm-config/code/GM_config.js?version=4836
  17. // @require       https://greasyfork.org/scripts/1885-joesimmons-library/code/JoeSimmons'%20Library.js?version=4838
  18. // @require       https://greasyfork.org/scripts/2817-jsl-ajax-plugin/code/JSL%20-%20AJAX%20plugin.js?version=7911
  19. // @grant         GM_getValue
  20. // @grant         GM_registerMenuCommand
  21. // @grant         GM_setValue
  22. // @grant         GM_xmlhttpRequest
  23. // ==/UserScript==
  24.  
  25.  
  26. /* CHANGELOG -------------------------------------------------------------------------------------------
  27.  
  28. 1.1.0 (4/8/2014)
  29.     - fixed thumbnail previews sometimes not displaying the right video's thumbnail
  30.  
  31. 1.0.94 (2/25/2014)
  32.     - fixed problem with thumbnails appearing under the masthead
  33.  
  34. 1.0.93 (11/18/2013)
  35.     - removed fading, too inconsistent & laggy
  36.  
  37. 1.0.92 (10/8/2013)
  38.     - re-write of the entire script for readability and efficiency
  39.     - added some minor fade effects
  40.     - instead of making the video black when hovering over a thumbnail,
  41.         the script will now keep showing the video
  42.     - previews open in the opposite corner of where your mouse is
  43.     - more reliable HQ image getting
  44.     - only the hovered over thumbnail is animated, not all the images now
  45.  
  46. 1.0.91
  47.     - Added a new option that allows animated thumbnails only on hovered images
  48.  
  49. 1.0.90
  50.     - Moved the options button to inside the YouTube dropdown menu
  51.  
  52. 1.0.89
  53.     - Added compatibility for Opera & Chrome
  54.  
  55. ------------------------------------------------------------------------------------------------------ */
  56.  
  57.  
  58. (function () {
  59.     'use strict';
  60.  
  61.     var rVi = /[a-z0-9-]+\.ytimg\.com\/vi\/([^\/]+)\//i,
  62.         rYtimgUrl = /[a-z0-9-]+\.ytimg\.com\/vi\//i,
  63.         rWhichImage = /(vi\/[a-z0-9-_]+\/)(1|3|mqdefault)(\.jpg)/i,
  64.         x = 0, y = 0,
  65.         isHoverEnabled, thumbSize, isAnimationEnabled, animationSpeed,
  66.         menulist, __preview_timeout, __animation_interval, stillOnThumb;
  67.  
  68.     var preview = {
  69.         // clears the timeout and hides the hover preview
  70.         hide : function () {
  71.             window.clearInterval(__preview_timeout);
  72.             JSL('#hover_img').hide().find('img').attribute('src', '');
  73.         },
  74.         show : function () {
  75.             // sets the timeout to show the hover preview
  76.             __preview_timeout = window.setTimeout(function () {
  77.                 JSL('#hover_img').show('block');
  78.             }, 400);
  79.         }
  80.     };
  81.  
  82.     function getNextImage(currentImage) {
  83.         var imagesInOrder = ['1', 'mqdefault', '3'],
  84.             indexOfNextImage = imagesInOrder.indexOf(currentImage) + 1;
  85.  
  86.         if ( indexOfNextImage > (imagesInOrder.length - 1) ) {
  87.             // if it's on the last one, go back to the first
  88.             return imagesInOrder[0];
  89.         } else {
  90.             // if it's not on the last one, show the next one
  91.             return imagesInOrder[indexOfNextImage];
  92.         }
  93.     }
  94.  
  95.     function handleHoverLogic(urlIdPrefix) {
  96.         var box = JSL('#hover_img'),
  97.             hori, vert;
  98.  
  99.         preview.hide();
  100.  
  101.         // set the previews for this thumbnail
  102.         JSL('#hover_img_1').attribute('src', urlIdPrefix + '1.jpg');
  103.         JSL('#hover_img_2').attribute('src', urlIdPrefix + 'mqdefault.jpg');
  104.         JSL('#hover_img_3').attribute('src', urlIdPrefix + '3.jpg');
  105.  
  106.         // check for a higher quality preview while we
  107.         // wait for the image to display
  108.         JSL.ajax([
  109.             urlIdPrefix + 'maxresdefault.jpg',
  110.             urlIdPrefix + 'hqdefault.jpg'
  111.         ], {
  112.             method : 'HEAD',
  113.             onload : function (resp) {
  114.                 var img2 = JSL('#hover_img_2');
  115.  
  116.                 // check for a 200 (OK) status
  117.                 // & that we're showing the correct thumbnail
  118.                 if ( resp.status === 200 && resp.url.getMatch(rVi, 1) === img2.attribute('src').getMatch(rVi, 1) ) {
  119.                     img2.attribute('src', resp.url);
  120.                     JSL.ajaxClear();
  121.                 }
  122.             }
  123.         });
  124.  
  125.         vert = !(y < (window.innerHeight / 2) ) ? 'top' : 'bottom'; // should the preview be on the top or bottom
  126.         hori = !(x < ( (window.innerWidth - 15) / 2) ) ? 'left' : 'right'; // should the preview be on the left or right
  127.  
  128.         // set the vertical align style property of each of the 3 preview images
  129.         JSL('#hover_img img').css('vertical-align', vert);
  130.  
  131.         // reset the position of the hover box
  132.         box.css('top', 'auto').css('right', 'auto').css('bottom', 'auto').css('left', 'auto');
  133.  
  134.         // set the corner it will appear in
  135.         box.css(vert, '0').css(hori, '0');
  136.  
  137.         // set a delay for the previews to show
  138.         preview.show();
  139.     }
  140.  
  141.     function handleAnimationLogic(elem) {
  142.         __animation_interval = JSL.setInterval(function () {
  143.             var currentImage = elem.attribute('src').getMatch(rWhichImage, 2),
  144.                 nextImage = getNextImage(currentImage);
  145.  
  146.             elem.attribute( 'src', elem.attribute('src').replace(rWhichImage, '$1' + nextImage + '$3') );
  147.         }, animationSpeed);
  148.     }
  149.  
  150.     function show(event) {
  151.         var elem = JSL(event.target),
  152.             id = elem.attribute('src').getMatch(rVi, 1),
  153.             urlIdPrefix = 'http://' + elem.attribute('src').getMatch(rYtimgUrl) + id + '/';
  154.  
  155.         // filter out non-thumbnails
  156.         if ( elem.is('img') && elem.isnt('#hover_img, img[id^="hover_img_"]') && urlIdPrefix.getMatch(rVi) ) {
  157.             if (isHoverEnabled) {
  158.                 handleHoverLogic(urlIdPrefix);
  159.             }
  160.             
  161.             if (isAnimationEnabled) {
  162.                 handleAnimationLogic(elem);
  163.             }
  164.         }
  165.     }
  166.  
  167.     function hide(event) {
  168.         var elem = JSL(event.target),
  169.             id = elem.attribute('src').getMatch(rVi, 1),
  170.             urlIdPrefix = 'http://' + elem.attribute('src').getMatch(rYtimgUrl) + id + '/';
  171.  
  172.         // clear the last HQ thumbnail request
  173.         JSL.ajaxClear();
  174.  
  175.         // don't hide the preview if the mouse goes over it
  176.         if ( elem.isnt('#hover_img, img[id^="hover_img_"]') ) {
  177.             preview.hide();
  178.         }
  179.  
  180.         // stop animating the current thumbnail
  181.         if ( elem.is('img') && elem.isnt('#hover_img, img[id^="hover_img_"]') && elem.attribute('src').getMatch(rWhichImage) ) {
  182.             JSL.clearInterval(__animation_interval); // stop the animation
  183.             elem.attribute( 'src', elem.attribute('src').replace(rWhichImage, '$1mqdefault$3') ); // reset the thumbnail
  184.         }
  185.     }
  186.  
  187.     function trackMouse(event) {
  188.         x = event.pageX - window.pageXOffset;
  189.         y = event.pageY - window.pageYOffset;
  190.     }
  191.  
  192.     function GM_config_open() {
  193.         GM_config.open();
  194.     }
  195.  
  196.     // Make sure the page is not in a frame
  197.     if (window.self !== window.top) { return; }
  198.  
  199.     // String.prototype.getMatch by JoeSimmons
  200.     // e.g., 'foobar'.getMatch(/foo(bar)/, 1) ==> 'bar'
  201.     Object.defineProperty(String.prototype, 'getMatch', {
  202.         value : function (regex, index) {
  203.             var match = this.match(regex) || ['', '', '', '', '', '', '', '', '', ''];
  204.  
  205.             if (typeof index === 'number' && index > -1) {
  206.                 return match[index];
  207.             }
  208.  
  209.             return match[0];
  210.         }
  211.     });
  212.  
  213.     GM_config.init('YouTube Animated Thumbnails Options', {
  214.         hoverimages : {
  215.             section : ['Hover Options'],
  216.             label : 'Enable Hover Images?',
  217.             type : 'checkbox',
  218.             'default' : true,
  219.             title : 'Hovering over a thumbnail shows 3 preview images.'
  220.         },
  221.         thumbSize : {
  222.             label : 'Hover Thumbnail Size',
  223.             type : 'select',
  224.             options : {
  225.                 '90' : 'Small',
  226.                 '216' : 'Medium',
  227.                 '432' : 'Large'
  228.             },
  229.             'default' : '432',
  230.             'title' : 'Choose the size of the hovering thumbnails'
  231.         },
  232.         animatedthumbnails : {
  233.             section : ['Animated Thumbs Options'],
  234.             label : 'Enable Animated Thumbnails?',
  235.             type : 'checkbox',
  236.             'default' : true,
  237.             title : 'Thumbnails cycle through the 3 images while hovering.'
  238.         },
  239.         animationspeed : {
  240.             label : 'Animation (Cycle) Speed',
  241.             type : 'select',
  242.             options : {
  243.                 '1200' : 'Super Slow',
  244.                 '800' : 'Slow',
  245.                 '600' : 'Medium',
  246.                 '400' : 'Fast',
  247.                 '200' : 'Super Fast'
  248.             },
  249.             'default' : '600',
  250.             title : 'Set the speed of the cycled images'
  251.         }
  252.     });
  253.  
  254.     JSL.runAt('interactive', function () {
  255.         isHoverEnabled = GM_config.get('hoverimages') === true;
  256.         thumbSize = GM_config.get('thumbSize');
  257.         isAnimationEnabled = GM_config.get('animatedthumbnails') === true;
  258.         animationSpeed = parseInt(GM_config.get('animationspeed'), 10);
  259.  
  260.         JSL.addStyle('' +
  261.             '#hover_img { ' +
  262.                 'position: fixed; ' +
  263.                 'z-index: 999999999999; ' +
  264.                 'background: #000000; ' +
  265.                 'border: 1px solid #000000; ' +
  266.                 'outline: 1px solid #CCCCCC; ' +
  267.             '}' +
  268.             '#hover_img img { ' +
  269.                 'max-height: ' + thumbSize + 'px; ' +
  270.             '}' +
  271.  
  272.             // fix for images showing under the youtube player
  273.             '#hover_img img { ' +
  274.                 'background-color: #000000; ' +
  275.             '}' +
  276.             '#yt_at_ops { ' +
  277.                 'display: inline-block; ' +
  278.                 'padding: 6px; ' +
  279.             '}' +
  280.             '#GM_config { ' +
  281.                 'z-index: 999999999999 !important; ' + // 999,999,999,999
  282.             '}' +
  283.         '');
  284.  
  285.         JSL(document.body).append('' +
  286.             '<div id="hover_img" style="display: none;">' +
  287.                 '<img src="" alt="" id="hover_img_1" />' +
  288.                 '<img src="" alt="" id="hover_img_2" />' +
  289.                 '<img src="" alt="" id="hover_img_3" />' +
  290.             '</div>' +
  291.         '');
  292.         
  293.         // Add a user script command for the options menu
  294.         if (typeof GM_registerMenuCommand === 'function') {
  295.             GM_registerMenuCommand('YouTube Animated Thumbnails Options', GM_config.open);
  296.         }
  297.  
  298.         // Add an options button to the page
  299.         JSL('#masthead-expanded-menu-list, #footer-main').append('' +
  300.             '<li id="yt_at_ops" class="masthead-expanded-menu-item">' +
  301.                 '<a href="javascript: void(0);" class="yt-uix-sessionlink">Animated Thumbnails Options</a>' +
  302.             '</li>' +
  303.         '');
  304.         JSL('#yt_at_ops a').addEvent('click', GM_config.open);
  305.  
  306.         if (isHoverEnabled) {
  307.             JSL.addEvent(window, 'mousemove', trackMouse);
  308.             JSL.addEvent(window, 'click', preview.hide);
  309.         }
  310.         JSL.addEvent(window, 'mouseover', show);
  311.         JSL.addEvent(window, 'mouseout', hide);
  312.     });
  313.  
  314. })();