markdown-it-html5-embed - npm Package Compare versions

Comparing version 0.1.0 to 0.2.0

bower.json

 {
   "name": "markdown-it-html5-embed",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "homepage": "https://github.com/cmrd-senya/markdown-it-html5-embed",
   "authors": [
-    "comrade Senya <[e-mail]>"
+    "comrade Senya <[e-mail]>",
+    "Phyo Arkar Lwin <[e-mail]>"
   ],
   "description": "This is a plugin for markdown-it which adds support for embedding audio/video in the HTML5 way using image embedding syntax ![](url). This is done by replacing standard image renderer of markdown-it.",
-  "main": "lib/index.js",
+  "main": "dist/markdown-it-html5-embed.js",
   "moduleType": [
@@ -11,0 +12,0 @@ "node"

lib/index.js

@@ -1,2 +0,2 @@
-/*! markdown-it-html5-embed https://github.com/cmrd-senya/markdown-it-html5-embed @license MIT */!function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var n;"undefined"!=typeof window?n=window:"undefined"!=typeof global?n=global:"undefined"!=typeof self&&(n=self),n.markdownitDiasporaMention=e()}}(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
+/*! markdown-it-html5-embed https://github.com/cmrd-senya/markdown-it-html5-embed @license MIT */
 // This is a plugin for markdown-it which adds support for embedding audio/video in the HTML5 way with ![](url) syntax.
@@ -7,27 +7,54 @@ // The code is originally taken from http://talk.commonmark.org/t/embedded-audio-and-video/441/16
 
-function html5_embed_renderer(tokens, idx, options, env, self, defaultRender) {
-  var audioRE = /^.*\.(ogg|mp3)$/gi;
-  var videoRE = /^.*\.(mp4|webm)$/gi;
+var Mimoza = require('mimoza');
+
+function clear_tokens(tokens, idx) {
+  for(var i = idx; i < tokens.length; i++) {
+    switch(tokens[i].type) {
+      case 'link_close':
+        tokens[i].hidden = true;
+        break;
+      case 'text':
+        tokens[i].content = '';
+        break;
+      default:
+        throw "Unexpected token: " + tokens[i].type;
+    }
+  }
+}
+
+function html5_embed_renderer(tokens, idx, options, env, renderer, defaultRender) {
   var token = tokens[idx];
+  var isLink;
   var aIndex = token.attrIndex('src');
+  if(aIndex < 0) {
+    aIndex = token.attrIndex('href');
+    isLink = true;
+  }
 //  console.log('aindex of idx' + idx);
 //  console.log(aIndex);
-  var matches_audio = audioRE.exec(token.attrs[aIndex][1]);
-  var matches_video = videoRE.exec(token.attrs[aIndex][1]);
-//  console.log(token.attrs[aIndex][1]);
-  if (matches_audio !== null) {
-//    console.log('matches audio')        
-    return ['<p><audio width="320" controls class="audioplayer"',
-      '<source type="audio/' + matches_audio[1] + '" src=' + matches_audio[0] + '></source>',
-      '</audio></p>'
+  if(typeof Mimoza === "undefined") {
+    Mimoza = require('mimoza');
+  }
+  var mimetype = Mimoza.getMimeType(token.attrs[aIndex][1]);
+  var RE = /^(audio|video)\/.*/gi;
+  var mimetype_matches = RE.exec(mimetype);
+
+  if(mimetype_matches !== null &&
+      (!options.html5embed.is_allowed_mime_type || options.html5embed.is_allowed_mime_type(mimetype_matches))) {
+    var media_type = mimetype_matches[1];
+    if(isLink) {
+      clear_tokens(tokens, idx+1);
+    }
+    if(typeof options.html5embed.attributes === "undefined"){
+      options.html5embed.attributes = {};
+    }
+    if(typeof options.html5embed.attributes[media_type] === "undefined") {
+      options.html5embed.attributes[media_type] = 'controls preload="metadata"';
+    }
+    return ['<' + media_type +' ' + options.html5embed.attributes[media_type] + '>',
+      '<source type="' + mimetype + '" src=' + token.attrs[aIndex][1] + '></source>',
+      '</' + media_type + '>'
     ].join('\n');
-  } else if (matches_video !== null) {
-//    console.log('matches video')
-    return ['<p><video width="320" height="240" class="audioplayer" controls>',
-  '<source type="video/' + matches_video[1] + '" src=' + matches_video[0] + '></source>',
-  '</video></p>'
-].join('\n');
   }else {
-//    console.log('matches img')
-    return defaultRender(tokens, idx, options, env, self);
+    return defaultRender(tokens, idx, options, env, renderer);
   }
@@ -38,9 +65,26 @@ }
 module.exports = function html5_embed_plugin(md, options) {
-  var defaultRender = md.renderer.rules.image;
-  md.renderer.rules.image = function(tokens, idx, opt, env, self) {
-    return html5_embed_renderer(tokens, idx, opt, env, self, defaultRender);
-  };
+  if(!options) {
+    options = { html5embed: {
+      use_image_syntax: true
+    } };
+  }
+
+  if(options.html5embed.use_image_syntax) {
+    var defaultRender = md.renderer.rules.image;
+    md.renderer.rules.image = function(tokens, idx, opt, env, self) {
+      opt.html5embed = options.html5embed;
+      return html5_embed_renderer(tokens, idx, opt, env, self, defaultRender);
+    }
+  }
+
+  if(options.html5embed.use_link_syntax) {
+    var defaultRender = md.renderer.rules.link_open || function(tokens, idx, options, env, self) {
+      return self.renderToken(tokens, idx, options);
+    };
+    md.renderer.rules.link_open = function(tokens, idx, opt, env, self) {
+      opt.html5embed = options.html5embed;
+      return html5_embed_renderer(tokens, idx, opt, env, self, defaultRender);
+    };
+  }
 };
 
-},{}]},{},[1])(1)
-});

package.json

 {
   "name": "markdown-it-html5-embed",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "This is a plugin for markdown-it which adds support for embedding audio/video in the HTML5 way using image embedding syntax ![](url). This is done by replacing standard image renderer of markdown-it.",
@@ -22,3 +22,6 @@ "main": "lib/index.js",
     "url": "https://github.com/cmrd-senya/markdown-it-html5-embed/issues"
+  },
+  "dependencies": {
+    "mimoza": "~1.0.0"
   }
 }

README.md

 # markdown-it-html5-embed
 This is a plugin for markdown-it which adds support for embedding audio/video in the HTML5 way
+
+## Install
+
+node.js, bower:
+
+```bash
+npm install markdown-it-html5-embed --save
+bower install markdown-it-html5-embed --save
+```
+
+## Use
+
+```js
+var md = require('markdown-it')()
+            .use(require('markdown-it-html5-embed'), {
+              html5embed: {
+                use_image_syntax: true, // Enables video/audio embed with ![]() syntax (default)
+                use_link_syntax: true   // Enables video/audio embed with []() syntax
+            }});
+
+md.render('![](http://example.com/file.webm)'); // => '<p><video width="320" height="240" class="audioplayer" controls>
+                                                //<source type="video/webm" src=http://example.com/file.webm></source>
+                                                //</video></p>'
+```
+
+### Options
+
+####use_image_syntax
+
+Boolean. Enables video/audio embed with ```![]()``` syntax (default)
+
+####use_link_syntax
+
+Boolean. Enables video/audio embed with ```[]()``` syntax
+
+####attributes
+
+Hash array. Attribute to pass to audio/video tag. Example:
+
+```
+    attributes: {
+      'audio': 'width="320" controls class="audioplayer"',
+      'video': 'width="320" height="240" class="audioplayer" controls'
+    }
+```
+
+If not specified, the default value of ```controls preload="metadata"``` is used.
+
+####is_allowed_mime_type
+
+Function. If specified, allows to decided basing on the MIME type, wheter to embed element or not. If not, all audio/video content is embedded. In a web browser you can use following code to embed only supported media type:
+```
+      is_allowed_mime_type: function(mimetype) {
+        var v = document.createElement(mimetype[1]);
+        return v.canPlayType && v.canPlayType(mimetype[0]) !== '';
+      }
+```
+This way, all unsupported media will be rendered with defualt renderer (e.g., as a link, if ```use_link_syntax``` is true).
+
+The argument is a result of regexp match, and has a structure similar to that one:
+```
+[ 'audio/mpeg',
+  'audio',
+  index: 0,
+  input: 'audio/mpeg' ]
+```
+
+## Credits
+
+Based on [the code](http://talk.commonmark.org/t/embedded-audio-and-video/441/16) written by @v3ss0n.

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

163402

increased by2030.4%

Number of package files

12

increased by100%

Lines of code

6891

increased by10033.82%

Number of lines in readme file

73

increased by2333.33%

Worsened metrics

Dependency count

1

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedmimoza@~1.0.0

• + Addedmime-db@1.53.0(transitive)

• + Addedmimoza@1.0.0(transitive)