Unverified Commit b32c8443 authored by cmrd Senya's avatar cmrd Senya Committed by Benjamin Neff
Browse files

Support for embedding HTML5 media links 

Use markdown-it-html5-embed plugin so user can embed audio and
video using the markdown link syntax []() in the HTML5 way.
parent 258b502c

Gemfile

+2 −0
Original line number Diff line number Diff line
@@ -122,6 +122,8 @@ source "https://rails-assets.org" do 
  gem "rails-assets-perfect-scrollbar",                   "0.6.16"

end



gem "markdown-it-html5-embed", "1.0.0"



# Localization



gem "http_accept_language", "2.1.1"

Gemfile.lock

+2 −0
Original line number Diff line number Diff line
@@ -368,6 +368,7 @@ GEM 
      systemu (~> 2.6.2)

    mail (2.6.6)

      mime-types (>= 1.16, < 4)

    markdown-it-html5-embed (1.0.0)

    markerb (1.1.0)

    memoizable (0.4.2)

      thread_safe (~> 0.3, >= 0.3.1)
@@ -816,6 +817,7 @@ DEPENDENCIES 
  json-schema-rspec (= 0.0.4)

  leaflet-rails (= 1.2.0)

  logging-rails (= 0.6.0)

  markdown-it-html5-embed (= 1.0.0)

  markerb (= 1.1.0)

  mini_magick (= 4.8.0)

  minitest

app/assets/javascripts/app/helpers/text_formatter.js

+29 −0
Original line number Diff line number Diff line 
// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-v3-or-Later



(function(){

  app.helpers.allowedEmbedsMime = function(mimetype) {

    var v = document.createElement(mimetype[1]);

    return v.canPlayType && v.canPlayType(mimetype[0]) !== "";

  };



  app.helpers.textFormatter = function(text, mentions) {

    mentions = mentions ? mentions : [];
@@ -83,6 +88,30 @@ 


    // Bootstrap table markup

    md.renderer.rules.table_open = function () { return "<table class=\"table table-striped\">\n"; };



    var html5medialPlugin = window.markdownitHTML5Embed;

    md.use(html5medialPlugin, {html5embed: {

      inline: false,

      autoAppend: true,

      renderFn: function handleBarsRenderFn(parsed, mediaAttributes) {

        var attributes = mediaAttributes[parsed.mediaType];

        return HandlebarsTemplates["media-embed_tpl"]({

          mediaType: parsed.mediaType,

          attributes: attributes,

          mimetype: parsed.mimeType,

          sourceURL: parsed.url,

          title: parsed.title,

          fallback: parsed.fallback,

          needsCover: parsed.mediaType === "video"

        });

      },

      attributes: {

        "audio": "controls preload=none",

        "video": "preload=none"

      },

      isAllowedMimeType: app.helpers.allowedEmbedsMime

    }});



    return md.render(text);

  };

})();

app/assets/javascripts/app/views/content_view.js

+24 −0
Original line number Diff line number Diff line
@@ -63,7 +63,29 @@ app.views.Content = app.views.Base.extend({ 
    }

  },



  // This function is called when user clicks cover for HTML5 embedded video

  onVideoThumbClick: function(evt) {

    var clickedThumb;

    if ($(evt.target).hasClass("thumb")) {

      clickedThumb = $(evt.target);

    } else {

      clickedThumb = $(evt.target).parent(".thumb");

    }

    clickedThumb.find(".video-overlay").addClass("hidden");

    clickedThumb.parents(".collapsed").children(".expander").click();

    var video = clickedThumb.find("video");

    video.attr("controls", "");

    video.get(0).load();

    video.get(0).play();

    clickedThumb.unbind("click");

  },



  bindMediaEmbedThumbClickEvent: function() {

    this.$(".media-embed .thumb").bind("click", this.onVideoThumbClick);

  },



  postRenderTemplate : function(){

    this.bindMediaEmbedThumbClickEvent();

    _.defer(_.bind(this.collapseOversized, this));



    // run collapseOversized again after all contained images are loaded
@@ -93,6 +115,8 @@ app.views.StatusMessage = app.views.Content.extend({ 


app.views.ExpandedStatusMessage = app.views.StatusMessage.extend({

  postRenderTemplate : function(){

    this.bindMediaEmbedThumbClickEvent();



    var photoAttachments = this.$(".photo-attachments");

    if(photoAttachments.length > 0) {

      new app.views.Gallery({ el: photoAttachments });

app/assets/javascripts/main.js

+1 −0
Original line number Diff line number Diff line
@@ -26,6 +26,7 @@ 
//= require markdown-it-sanitizer

//= require markdown-it-sub

//= require markdown-it-sup

//= require markdown-it-html5-embed

//= require highlightjs

//= require clear-form

//= require corejs-typeahead