☰

YouTube - add video ID text field

Usable for copying a video ID to a clipboard for downloading via youtube-dl. By default it also prefixes the ID with "--" if it starts with a dash (this can be disabled).

  1. // ==UserScript==
  2. // @name        YouTube - add video ID text field
  3. // @namespace   monnef.tk
  4. // @description Usable for copying a video ID to a clipboard for downloading via youtube-dl. By default it also prefixes the ID with "--" if it starts with a dash (this can be disabled).
  5. // @include     http://www.youtube.com/watch*
  6. // @include     https://www.youtube.com/watch*
  7. // @version     4
  8. // @grant       none
  9. // @require     http://code.jquery.com/jquery-2.1.3.min.js
  10. // ==/UserScript==
  11.  
  12. // if you don't want prefixing, replace the word "true" with "false" on the next line
  13. var prefixEnabled = true;
  14. var textId = "textId";
  15.  
  16. function textFieldClicked() {
  17.   var e = $(this);
  18.   e.select();
  19. }
  20.  
  21. function updateLinkValue(value) {
  22.   var e = $("#" + textId);
  23.   if (e.length == 0) {
  24.     console.log("Critical, can't find my text field!");
  25.   } else {
  26.     e.attr("value", value);
  27.   }
  28. }
  29.  
  30. function getLinkMatchFromLocation() {
  31.   return window.location.href.match(/^.*watch(\?v=([^&]+)|\?(.*)).*$/);
  32. }
  33.  
  34. function getLinkFromLocation() {
  35.   var urlMatch = getLinkMatchFromLocation();
  36.   if (urlMatch.length >= 2) {
  37.     var link = urlMatch[2];
  38.     if (prefixEnabled && link[0] === '-') link = "-- " + link;
  39.     return link;
  40.   }
  41.   return "";
  42. }
  43.  
  44. function getVideoElement() {
  45.   return $("video.video-stream");
  46. }
  47.  
  48. function insertInput() {
  49.   $("#watch-header").each(function() {
  50.     var e = $(this);
  51.     var link = getLinkFromLocation();
  52.     if (link) {
  53.       e.before($("<input />").attr("type", "text").css("margin", "5px 0 5px").css("border", "0").css("box-shadow", "0px 1px 2px rgba(0, 0, 0, 0.1)").css("font-size", "200%").attr("id", textId).click(textFieldClicked));
  54.       updateLinkValue(link);
  55.     }
  56.   });
  57. }
  58.  
  59. function refreshTextLink() {
  60.   var link = getLinkFromLocation();
  61.   console.log("refreshing text link: " + link);
  62.   if (link) updateLinkValue(link);
  63. }
  64.  
  65. // beacuse mutation observers are broken in GreaseMonkey :(
  66. function installDomEventListener() {
  67.   var videoElem = getVideoElement();
  68.   if (videoElem.length == 0) {
  69.     console.log("Can't find video element!");
  70.   } else {
  71.     videoElem.each(function() {
  72.       this.parentNode.addEventListener("DOMNodeInserted", function(e) {
  73.         console.log("modified (insertion): src=" + getVideoElement().attr("src"));
  74.         refreshTextLink();
  75.         installDomEventListener();
  76.       }, false);
  77.     });
  78.   }
  79. }
  80.  
  81. function installRedStripWatching() {
  82.   $('body').on('transitionend', function(event) {
  83.     //console.log("transitionend: " + event.target.id);
  84.     if (event.target.id != 'progress') return false;
  85.     console.log("Detected red strip change.");
  86.     refreshTextLink();
  87.   });
  88. }
  89.  
  90. insertInput();
  91. installDomEventListener();
  92. installRedStripWatching();
  93. refreshTextLink();