☰

YouTube Popout Button [mashup]

Provides a button to pop out the YouTube video in a separate window.

  1. // ==UserScript==
  2. // @name           YouTube Popout Button [mashup]
  3. // @description    Provides a button to pop out the YouTube video in a separate window.
  4. // @version        2.0.3
  5. // @author         joeytwiddle
  6. // @contributor    Alek_T, tehnicallyrite
  7. // @license        ISC
  8. // @include        http://*.youtube.com/watch*
  9. // @include        http://youtube.com/watch*
  10. // @include        https://*.youtube.com/watch*
  11. // @include        https://youtube.com/watch*
  12. // @grant          none
  13. // @namespace      https://greasyfork.org/users/8615
  14. // ==/UserScript==
  15.  
  16. // This is a combination of two scripts I found:
  17. // - http://userscripts-mirror.org/scripts/show/75815#YouTube:_Pop-out_Video
  18. // - http://userscripts-mirror.org/scripts/show/69687#YouTube_Popout
  19. // For a while I think I hosted it here (but it never got mirrored):
  20. // - http://userscripts.org/scripts/show/150631#YouTube_Popout_Button
  21.  
  22. // Known issues:
  23. // - The popout window displays the location bar.  I have been unable to hide it.
  24.  
  25. let numAttempts = 0;
  26.  
  27. function tryToAdd() {
  28.     numAttempts++;
  29.  
  30.     var divWatchHeadline = document.querySelector('.ytp-right-controls');
  31.     var settingsButton = document.querySelector('.ytp-miniplayer-button');
  32.  
  33.     if (!divWatchHeadline || !settingsButton) {
  34.         if (numAttempts >= 50) {
  35.             console.warn('[YoUTube Popout Button] Giving up. Never found the divWatchHeadline or the settingsButton.');
  36.             return;
  37.         }
  38.         setTimeout(tryToAdd, 250 * 1.05 ** numAttempts);
  39.         return;
  40.     }
  41.  
  42.     var buttonPopout = document.createElement("button");
  43.     buttonPopout.setAttribute('aria-label', "Pop-out Video");
  44.     buttonPopout.title = "Pop-out Video";
  45.  
  46.     buttonPopout.className = 'ytp-popout-button ytp-button';
  47.     buttonPopout.style.padding = '0 4px';
  48.     buttonPopout.innerHTML = `<svg viewBox="0 0 36 36" height="100%" width="100%"><path d="M 27.020989,25.020001 H 9.0209895 v -14.05 L 20.278056,10.969089 20.27853,8.9999999 H 8.9544297 c -1.0730594,0 -1.9334402,0.9 -1.9334402,2.0000001 v 14 c 0,1.1 0.8603808,2 1.9334402,2 H 27.045569 c 1.063393,0 1.97421,-0.885891 1.968683,-1.985877 l 0.0018,-7.014124 h -1.991386 z m -4.80902,-16.0200011 -0.01053,1.9774681 3.525926,-0.0018 -9.547729,9.854341 1.363076,1.41 9.481183,-9.799226 v 3.59 l 1.993516,-0.0095 0.0039,-7.0250141 z" fill="#fff" /></svg>`;
  49.  
  50.     divWatchHeadline.insertBefore(buttonPopout, settingsButton);
  51.  
  52.     buttonPopout.addEventListener("click", popOutVideo, false);
  53.  
  54.     function popOutVideo() {
  55.         // Grabbing Video Id
  56.         function gup(name) {
  57.             name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
  58.             var regexS = "[\\?&]" + name + "=([^&#]*)";
  59.             var regex = new RegExp(regexS);
  60.             var results = regex.exec(window.location.href);
  61.             return results && results[1];
  62.         }
  63.  
  64.         var ytvidid = gup('v');
  65.  
  66.         if (ytvidid) {
  67.             //var link = "http://www.youtube.com/watch_popup?v=";
  68.             //var flink = link+ytvidid;
  69.             // The above URL gets redirected to https://www.youtube.com/embed/bNcWVUfwmS4&autoplay=1#at=6
  70.             // And the redirect causes autoplay to not work.  So let's go directly to the target URL.
  71.             var flink = "https://www.youtube.com/embed/" + ytvidid + "?autoplay=1";
  72.             var lcheck = location.href;
  73.             // I think this used to prevent infinite loops when the script was auto-forwarding
  74.             if (lcheck !== flink) {
  75.                 try {
  76.                     var player = window.document.getElementById('movie_player');
  77.                     if (player) {
  78.                         // If we are in Greasemonkey's sandbox, we need to get out!
  79.                         if (player.wrappedJSObject) {
  80.                             player = player.wrappedJSObject;
  81.                         }
  82.                         player.pauseVideo();
  83.                         var time = player.getCurrentTime();
  84.                         flink += "#at=" + (time | 0);
  85.                     }
  86.                 } catch (e) {
  87.                     console.error("" + e);
  88.                 }
  89.  
  90.                 // window.location = flink;
  91.                 // Change "YoutubePopout" to "_blank" if you want new popouts to appear in a separate window from the existing popout.
  92.                 window.open(flink, "YoutubePopout", "popup=yes,menubar=no,location=no,resizable=yes,status=no,toolbar=no,personalbar=no");
  93.             }
  94.         }
  95.     }
  96. }
  97.  
  98. tryToAdd();