Basic non-responsive onebox for youtube

misago/static/misago/css/misago/markup.less

@@ -3,6 +3,86 @@
 // --------------------------------------------------
 
 
+// Markup elements
+//
+//==
 .misago-markup {
 
 }
+
+
+// Media
+//
+//==
+.misago-markup {
+  .post-media {
+    background-color: @gray-darker;
+    margin: (@line-height-computed / 2) 0px;
+    overflow: hidden;
+    text-align: center;
+  }
+
+  .media-border {
+    background-color: @gray-darker;
+    .box-shadow(0px 0px 8px #000);
+    display: inline-block;
+    overflow: hidden;
+    margin: 0px;
+    padding: 0px;
+    margin-bottom: -5px;
+
+    iframe {
+      margin: 0px;
+      margin-bottom: -5px;
+    }
+
+    .media-thumbnail {
+      background-color: @gray-darker;
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      width: 853px;
+      height: 480px;
+
+      text-align: center;
+
+      a {
+        background-color: fadeOut(@gray-darker, 20%);
+        border-radius: @border-radius-base;
+        display: inline-block;
+        margin-top: 159px;
+        padding: @font-size-base (@font-size-base * 1.5);
+
+        color: @gray-lighter;
+        text-align: center;
+        text-shadow: 0px 1px 1px @gray-darker;
+
+        &:hover, &:active {
+          color: @gray-lighter;
+          text-decoration: none;
+          text-shadow: 0px 0px 5px @gray-lighter,
+                       0px 1px 1px @gray-darker;
+        }
+
+        .fa {
+          display: block;
+          clear: both;
+
+          font-size: @font-size-base * 8;
+          text-decoration: none;
+        }
+
+        &.movie-title {
+          margin-top: 164px - @font-size-base - 4px;
+
+          strong {
+            display: block;
+            margin-top: 6px;
+
+            font-size: @font-size-large;
+          }
+        }
+      }
+    }
+  }
+}

misago/static/misago/js/misago-onebox.js

@@ -1,9 +1,116 @@
 $(function() {
 
+  YouTubeOnebox = function(href, movie_id, startfrom) {
+
+    var _this = this;
+
+    if (startfrom !== undefined) {
+      player_url = '//www.youtube.com/embed/' + movie_id + '?start=' + startfrom + '&autoplay=1';
+    } else {
+      player_url = '//www.youtube.com/embed/' + movie_id + '?autoplay=1';
+    }
+
+    this.$element = $('<div class="post-media"><div class="media-border youtube-player" data-movieid="' + movie_id + '"><div class="media-thumbnail" style="background-image: url(\'//img.youtube.com/vi/' + movie_id + '/0.jpg\');"><a href="' + href + '" class="play-link" data-playerurl="' + player_url + '"><i class="fa fa-youtube-play"></i><strong>' + lang_play_media + '</strong></a></div></div></div>');
+    this.$element.find('.play-link').click(function() {
+      $(this).parent().replaceWith('<iframe width="853" height="480" src="' + $(this).data('playerurl') + '" frameborder="0" allowfullscreen></iframe>');
+      return false;
+    });
+
+    // Fetch title, author name and thumbnail
+    $.getJSON("//gdata.youtube.com/feeds/api/videos/" + movie_id + "?v=2&alt=json",
+      function(data, textStatus, jqXHR) {
+
+        // Movie details
+        var movie_title = data.entry.title.$t;
+        var movie_author = data.entry.author['0'].name.$t
+        _this.$element.find('.play-link').addClass('movie-title');
+        _this.$element.find('.play-link strong').text(movie_title);
+        _this.$element.find('.play-link').append(lang_media_author.replace('{author}', movie_author));
+
+        // Movie thumbnail
+        var thumb = {height: 90, url: '//img.youtube.com/vi/' + movie_id + '/0.jpg'};
+        $(data.entry['media$group']['media$thumbnail']).each(function(key, yt_image) {
+          if (thumb.height < yt_image.height) {
+            thumb = yt_image;
+          }
+        });
+
+        _this.$element.find('.media-thumbnail').css('background-image', "url('" + thumb.url + "')");
+
+    });
+
+    this.activate = function($element) {
+      $element.replaceWith(this.$element);
+    }
+
+  }
+
   MisagoOnebox = function() {
 
+    this.boxes = {}
+
+    var _this = this;
+
+    this.youtube = function(href) {
+
+      // Youtube link
+      var re = /watch\?v=((\w|-)+)/;
+      if (re.test(href)) {
+        var media_url = href.match(re);
+        return new YouTubeOnebox(href, media_url[1]);
+      }
+
+      // Youtube feature=embed
+      var re = /watch\?feature=player_embedded&v=((\w|-)+)/;
+      if (re.test(href)) {
+        var media_url = href.match(re);
+        return new YouTubeOnebox(href, media_url[1]);
+      }
+
+      // Youtube embed with start time
+      var re = /youtu.be\/((\w|-)+)\?t=([A-Za-z0-9]+)/;
+      if (re.test(href)) {
+        var media_url = href.match(re);
+        var media_minutes = media_url[2].match(/([0-9]+)m/);
+        var media_seconds = media_url[2].match(/([0-9]+)s/);
+        media_url[2] = 0;
+        if (media_minutes) { media_url[2] += (media_minutes[1] - 0) * 60; }
+        if (media_seconds) { media_url[2] += (media_seconds[1] - 0); }
+        return new YouTubeOnebox(href, media_url[1], media_url[2]);
+      }
+
+      // Youtube embed
+      var re = /youtu.be\/(([A-Za-z0-9]|_|-)+)/;
+      if (re.test(href)) {
+        var media_url = href.match(re);
+        return new YouTubeOnebox(href, media_url[1]);
+      }
+
+      return false;
+    }
+
+    this.oneboxes = [this.youtube];
+
     this.activate = function($element) {
 
+      $element.find('a').each(function() {
+
+        var href = $.trim($element.text());
+        if (_this.boxes[href] === undefined) {
+          $.each(_this.oneboxes, function(i, onebox) {
+            _this.boxes[href] = _this.youtube(href);
+            if (_this.boxes[href] != false) {
+              return true;
+            }
+          })
+        }
+
+        if (_this.boxes[href] !== false) {
+          _this.boxes[href].activate($(this));
+        }
+
+      });
+
     }
 
   };

misago/templates/misago/base.html

@@ -35,6 +35,8 @@
     <script lang="JavaScript">
       var is_authenticated = {{ user.is_authenticated|yesno:"true,false" }};
 
+      var lang_play_media = "{% trans "Play media" %}";
+      var lang_media_author = "{% trans "uploaded by {author}" %}";
       var lang_time_units = "{% trans "smhd" %}";
       var lang_dismiss_editor = "{% trans "Are you sure you want to abandon your message?" %}";
 

misago/templates/misago/thread/post.html

@@ -37,7 +37,7 @@
       </div>
       <div class="panel-body">
         {% if post.is_valid %}
-        <article class="misago-markup">
+        <article class="post-body misago-markup">
           {{ post.parsed|safe }}
         <article>
         {% else %}

misago/templates/misago/thread/replies.html

@@ -118,6 +118,12 @@
 
 {% block javascripts %}
 {{ block.super }}
+<script lang="JavaScript">
+  $(function() {
+    Misago.Onebox.activate($('.post-body'));
+  });
+</script>
+
 {% if user.is_authenticated %}
   {% include "misago/thread/actions_js.html" %}
   {% if forum.acl.can_hide_events %}