normalize and fix youtube embeds - with support for start - closes lichess-org#2630

Author: ornicar

public/javascripts/embed-analyse.js

@@ -2,14 +2,13 @@ $(function() {
 
   var studyRegex = /lichess\.org\/study\/(?:embed\/)?(\w{8})\/(\w{8})(#\d+)?\b/;
   var gameRegex = /lichess\.org\/(?:embed\/)?(\w{8})(?:(?:\/(white|black))|\w{4}|)(#\d+)?\b/;
-  var youtubeRegex = /(?:https?:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch)?(?:\?v=)?([^"&?\/ ]{11})(?:[^\s]*)/i;
   var notGames = ['training', 'analysis', 'insights', 'practice'];
 
   var parseLink = function(a) {
-    var matches = a.href.match(youtubeRegex);
-    if (matches) return {
+    var yt = lichess.toYouTubeEmbedUrl(a.href);
+    if (yt) return {
       type: 'youtube',
-      src: 'https://www.youtube.com/embed/' + matches[1]
+      src: yt
     };
     var matches = a.href.match(studyRegex);
     if (matches && matches[2] && a.text.match(studyRegex)) return {

public/javascripts/util.js

@@ -380,6 +380,23 @@ lichess.escapeHtml = function(html) {
   div.appendChild(document.createTextNode(html));
   return div.innerHTML;
 };
+lichess.toYouTubeEmbedUrl = function(url) {
+  var m = url.match(/(?:https?:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch)?(?:\?v=)?([^"&?\/ ]{11})(?:\?|&|)(\S*)/i);
+  if (!m) return;
+  var start = 1;
+  m[2].split('&').forEach(function(p) {
+    var s = p.split('=');
+    if (s[0] === 't' || s[0] === 'start') {
+      if (s[1].match(/^\d+$/)) start = parseInt(s[1]);
+      else {
+        var n = s[1].match(/(?:(\d+)h)?(?:(\d+)m)?(?:(\d+)s)?/);
+        start = (parseInt(n[1]) || 0) * 3600 + (parseInt(n[2]) || 0) * 60 + (parseInt(n[3]) || 0);
+      }
+    }
+  });
+  var params = 'modestbranding=1&rel=0&controls=2&iv_load_policy=3&start=' + start;
+  return 'https://www.youtube.com/embed/' + m[1] + '?' + params;
+};
 $.spreadNumber = function(el, nbSteps, getDuration, previous) {
   var previous = previous,
     displayed;

public/stylesheets/study.css

@@ -123,6 +123,7 @@ div.underboard .notif.error {
   margin-bottom: 10px;
 }
 .study_comments .text {
+  width: 100%;
   overflow: hidden;
   word-wrap: break-word;
 }

ui/analyse/src/study/studyComments.js

@@ -15,11 +15,13 @@ function authorText(author) {
   return author.name;
 }
 
-var commentYoutubeRegex = /(?:https?:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch)?(?:\?v=)?([^"&?\/ ]{11})(?:[^\s]*)/gi;
+var commentYoutubeRegex = /(?:https?:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch)?(?:\?v=)?(?:[^"&?\/ ]{11})\S*/gi;
 
 function embedYoutube(text) {
-  return m.trust(lichess.escapeHtml(text).replace(commentYoutubeRegex, function(m, id) {
-    return '<iframe width="100%" height="300" src="https://www.youtube.com/embed/' + id + '" frameborder="0" allowfullscreen></iframe>';
+  return m.trust(lichess.escapeHtml(text).replace(commentYoutubeRegex, function(found) {
+    var url = lichess.toYouTubeEmbedUrl(found);
+    if (!url) return found;
+    return '<iframe width="100%" height="300" src="' + url + '" frameborder=0 allowfullscreen></iframe>';
   }));
 }
 
@@ -54,7 +56,7 @@ module.exports = {
           m('span.node', nodeFullName(node))
         ] : null,
         ': ',
-        m('span.text', embedYoutube(comment.text))
+        m('div.text', embedYoutube(comment.text))
       ]);
     }));
   }