☰

Reddit Inline YouTube Viewer

Add an inline expand button for YouTube links like RES does for images.

当前为 2014-07-28 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name           Reddit Inline YouTube Viewer
  3. // @namespace      reddit_youtube_expando
  4. // @description    Add an inline expand button for YouTube links like RES does for images.
  5. // @include        http://*.reddit.com/*
  6. // @include        https://*.reddit.com/*
  7. // @match          http://*.reddit.com/*
  8. // @match          https://*.reddit.com/*
  9. // @version        1.2
  10. // ==/UserScript==
  11.  
  12. // This work is licensed under the Creative Commons Attribution 2.0 Generic License.
  13. // To view a copy of this license, visit http://creativecommons.org/licenses/by/2.0/.
  14.  
  15. // This version of the regex can scrub some technicaly invalid links into valid ones, but I'm not sure
  16. // the list of video ID characters is correct.
  17. var youtubeLinkRegex = new RegExp("(?:^https?://(?:www\\.)?youtube\\.com/watch\\?(?:.*&)*v=([a-zA-Z0-9\\-_]+)(?:#t=(.*$))?)|(?:^http://youtu.be/([a-zA-Z0-9\\-_]+))")
  18.  
  19. /*
  20.  // Flash Embed
  21.  var starTimeRegex = new RegExp("(?:(\\d+)m)?(\\d+)s")
  22.  function addYouTubeEmbed(videoID, startTime) {
  23.  var videoURL = "http://www.youtube.com/v/" + videoID
  24.  if (startTime) {
  25.  starTimeResult = starTimeRegex.exec(startTime)
  26.  if (starTimeResult) {
  27.  minutes = parseInt(starTimeResult[1])
  28.  if (!minutes) {
  29.  minutes = 0
  30.  }
  31.  seconds = parseInt(starTimeResult[2])
  32.  seconds += minute * 60
  33.  videoURL = videoURL + "&start=" + seconds
  34.  }
  35.  }
  36.  
  37.  var embedDiv = document.createElement("div")
  38.  var embedObject = document.createElement("object")
  39.  embedObject.setAttribute("type",  "application/x-shockwave-flash")
  40.  embedObject.setAttribute("style", "width:450px; height:366px; float: left")
  41.  embedObject.setAttribute("data", videoURL)
  42.  var paramElm = document.createElement("param")
  43.  paramElm.setAttribute("name",  "movie")
  44.  paramElm.setAttribute("value", videoURL)
  45.  embedObject.appendChild(paramElm)
  46.  embedDiv.appendChild(embedObject)
  47.  
  48.  return embedDiv
  49.  }
  50.  */
  51.  
  52.  
  53. // IFrame Embed
  54. function addYouTubeEmbed(videoID, startTime) {
  55.     var embedDiv = document.createElement("div")
  56.     var embedObject = document.createElement("iframe")
  57.     embedObject.setAttribute("class",  "youtube-player")
  58.     embedObject.setAttribute("type",   "text/html")
  59.     embedObject.setAttribute("width",  "450")
  60.     embedObject.setAttribute("height", "366")
  61.     if (startTime) {
  62.         embedObject.setAttribute("src",    "http://www.youtube.com/embed/" + videoID + "#t=" + startTime)
  63.     }
  64.     else {
  65.         embedObject.setAttribute("src",    "http://www.youtube.com/embed/" + videoID)
  66.     }
  67.     embedObject.setAttribute("frameborder", "0")
  68.     embedDiv.appendChild(embedObject)
  69.     
  70.     return embedDiv
  71. }
  72.  
  73. var commentExpandoStyle = "vertical-align:top !important; float: none; width: 23px; height: 23px;" +
  74. "max-width: 23px; max-height: 23px; display: inline-block;" +
  75. "margin-right: 6px; cursor: pointer;  padding: 0px;"
  76.  
  77. function addButtons(postDiv) {
  78.     var innerLinks = Array.prototype.slice.call(postDiv.getElementsByTagName("a"));
  79.     for (var j in innerLinks) {
  80.         //innerLinks[j].className += " youtubeScanned"
  81.         linkResult = youtubeLinkRegex.exec(innerLinks[j].href)
  82.         if (linkResult) {
  83.             innerLinks[j].className = innerLinks[j].className + " youtubeLinkFound"
  84.             
  85.             function genClickFunc() {
  86.                 // Capture these values with closure for the button function
  87.                 var theDiv = document.createElement("div")
  88.                 var embedObject = null
  89.                 // videoID from a youtube.com link || from a youtu.be link
  90.                 var videoID = linkResult[1] || linkResult[3]
  91.                 var startTime = linkResult[2]
  92.                 
  93.                 theDiv.setAttribute("class", "expando-button collapsed video")
  94.                 theDiv.setAttribute("style", commentExpandoStyle)
  95.                 
  96.                 var clickFunc = function () {
  97.                     if(theDiv.className.indexOf("collapsed") != -1) {
  98.                         theDiv.setAttribute("class", "expando-button expanded video")
  99.                         if (!embedObject) {
  100.                             embedObject = addYouTubeEmbed(videoID, startTime)
  101.                         }
  102.                         theDiv.parentNode.insertBefore(embedObject, theDiv.nextSibling)
  103.                     }
  104.                     else {
  105.                         theDiv.setAttribute("class", "expando-button collapsed video")
  106.                         theDiv.parentNode.removeChild(embedObject)
  107.                     }
  108.                 }
  109.                 
  110.                 innerLinks[j].parentNode.insertBefore(theDiv, innerLinks[j].nextSibling)
  111.                 theDiv.addEventListener('click', clickFunc, true)
  112.             }
  113.             
  114.             genClickFunc()
  115.         }
  116.     }
  117. }
  118.  
  119. var mdElements = document.getElementsByClassName("md")
  120.  
  121. // Find all user created comment sections
  122. for (var i in mdElements) {
  123.     if (mdElements[i].tagName == 'DIV') {
  124.         addButtons(mdElements[i]);
  125.     }
  126. }
  127.  
  128. // hasClass, stolen from the Reddit Enhancement Suite
  129. function hasClass(ele,cls) {
  130.   if ((typeof(ele) == 'undefined') || (ele == null)) {
  131.     console.log(arguments.callee.caller);
  132.     return false;
  133.   }
  134.   return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
  135. }
  136.  
  137. // Add a listener for the DOMNodeInserted event so we can expand emotes in new comments
  138. // created by either a reply or by clicking "load more comments" in large threads.
  139. function handleInsertion( event ) {
  140.     // The actual even we see will be the insertion of the outer "thing" div
  141.     if ((event.target.tagName == 'DIV') && (hasClass(event.target, "thing"))) {
  142.         var mdElements = event.target.getElementsByClassName("md")
  143.         for (var i in mdElements) {
  144.             if (mdElements[i].tagName == 'DIV') {
  145.                 addButtons(mdElements[i]);
  146.             }
  147.         }
  148.     }
  149. }
  150.  
  151. document.body.addEventListener('DOMNodeInserted', handleInsertion, false);