embed youtube videos in practice comments

Author: ornicar

public/stylesheets/practice.css

@@ -97,6 +97,9 @@ div.game_control {
 .underboard .feedback .comment {
   display: block;
 }
+.underboard .feedback .comment iframe {
+  margin: 10px 0;
+}
 
 #practice_app .section {
   width: 742px;

ui/analyse/src/study/practice/studyPracticeCtrl.js

@@ -7,25 +7,32 @@ var readOnlyProp = function(value) {
   };
 };
 
+var commentYoutubeRegex = /(?:https?:\/\/)(?:www\.)(?:youtube\.com|youtu\.be)\/(?:watch)?(?:\?v=)?([^"&?\/ ]{11})/gi;
+
 module.exports = function(root, studyData, data) {
 
   var goal = m.prop();
   var comment = m.prop();
   var nbMoves = m.prop(0);
   var won = m.prop(false);
 
+  var makeComment = function(treeRoot) {
+    if (!treeRoot.comments) return;
+    var c = m.trust(treeRoot.comments[0].text.replace(commentYoutubeRegex, function(m, id) {
+      return '<iframe width="472" height="300" src="https://www.youtube.com/embed/' + id + '" frameborder="0" allowfullscreen></iframe>';
+    }));
+    delete treeRoot.comments;
+    return c;
+  };
+
   var onLoad = function() {
     root.vm.showAutoShapes = readOnlyProp(true);
     root.vm.showGauge = readOnlyProp(true);
     root.vm.showComputer = readOnlyProp(true);
     goal(root.data.practiceGoal);
     nbMoves(0);
     won(false);
-    var r = root.tree.root;
-    if (r.comments) {
-      comment(r.comments[0].text);
-      delete r.comments;
-    }
+    comment(makeComment(root.tree.root));
   };
   onLoad();