feat(video): Added the feature to embed basic video and use video.js to support in multiple places.

Author: ritz078

src/embed.es6

@@ -19,9 +19,6 @@
 //OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 //SOFTWARE.
 
-
-// require('./modules/vendor/runtime'); // required at runtime for supporting ES7
-
 import utils      from './modules/utils.es6';
 import Emoji      from './modules/emoticons/emoji.es6';
 import Smiley     from './modules/emoticons/smiley.es6';
@@ -31,6 +28,7 @@ import Video      from './modules/video/video.es6';
 import Twitter    from './modules/twitter/twitter.es6';
 import Audio      from './modules/audio/audio.es6';
 import Image      from './modules/image/image.es6';
+import BasicVideo from './modules/video/basic.es6';
 
 import helper from './modules/video/helper.es6';
 
@@ -45,6 +43,8 @@ import helper from './modules/video/helper.es6';
         emoji           : true,
         fontIcons       : true,
         highlightCode   : true,
+        videoJS         : false,
+        videojsOptions  : {},
         tweetsEmbed     : true,
         tweetOptions    : {
             maxWidth   : 550,
@@ -81,7 +81,8 @@ import helper from './modules/video/helper.es6';
         beforeEmbedJSApply : function(){},
         afterEmbedJSApply  : function(){},
         onVideoShow        : function(){},
-        onTweetsLoad       : function(){}
+        onTweetsLoad       : function(){},
+        videojsCallback    : function(){}
     };
 
     class EmbedJS {
@@ -122,13 +123,17 @@ import helper from './modules/video/helper.es6';
         render(result) {
             this.options.element.innerHTML = result;
 
-            //Load twitter data with styling
-            twttr.widgets.load(this.options.element);
+            if(twttr){
+               //Load twitter data with styling
+                twttr.widgets.load(this.options.element);
+
+                //Execute the function after the widget is loaded
+                twttr.events.bind('loaded', ()=>{
+                    this.options.onTweetsLoad();
+                });
+            }
 
-            //Execute the function after the widget is loaded
-            twttr.events.bind('loaded', ()=>{
-            this.options.onTweetsLoad();
-            })
+            BasicVideo.postProcess(this.options);
 
             helper.play('ejs-video-thumb', this.options);
             this.options.afterEmbedJSApply();

src/modules/twitter/twitter.es6

@@ -2,10 +2,10 @@ import utils from '../utils.es6';
 
 class Twitter {
     constructor(input, options, embeds) {
-        this.input = input;
+        this.input   = input;
         this.options = options;
-        this.embeds = embeds;
-        this.regex = /https:\/\/twitter\.com\/\w+\/\w+\/\d+/gi;
+        this.embeds  = embeds;
+        this.regex   = /https:\/\/twitter\.com\/\w+\/\w+\/\d+/gi;
     }
 
     /**
@@ -14,8 +14,8 @@ class Twitter {
      * @return {object}     data containing the tweet info
      */
     async tweetData(url) {
-        let config = this.options.tweetOptions;
-        let apiUrl = `https://api.twitter.com/1/statuses/oembed.json?omit_script=true&url=${url}&maxwidth=${config.maxWidth}&hide_media=${config.hideMedia}&hide_thread=${config.hideThread}&align=${config.align}&lang=${config.lang}`;
+        let config   = this.options.tweetOptions;
+        let apiUrl   = `https://api.twitter.com/1/statuses/oembed.json?omit_script=true&url=${url}&maxwidth=${config.maxWidth}&hide_media=${config.hideMedia}&hide_thread=${config.hideThread}&align=${config.align}&lang=${config.lang}`;
         let response = await fetchJsonp(apiUrl, {
             credentials: 'include'
         });

src/modules/video/basic.es6

@@ -0,0 +1,38 @@
+import utils from '../utils.es6';
+import Base from '../base.es6';
+
+class BasicVideo extends Base {
+	constructor(input, options, embeds) {
+		super(input, options, embeds);
+		this.regex = /(?:https?):\/\/\S*\.(?:ogv|webm|mp4)/gi;
+	}
+
+	template(match) {
+		var template =
+		`<div class="ejs-video">
+		<div class="ejs-video-player">
+		<div class="ejs-player">
+		<video src="${match}" class="ejs-basic-video video-js" controls></video>
+		</div>
+		</div>
+		</div>`;
+		return template;
+	}
+
+	static postProcess(options) {
+let dimensions=utils.dimensions(options);
+options.videojsOptions.width = dimensions.width;
+options.videojsOptions.height = dimensions.height;
+		if (options.videoJS) {
+			if (!window.videojs) {
+				throw new ReferenceError("You have enabled videojs but you haven't loaded the library.Find it at http://videojs.com/");
+			}
+			var elements = options.element.getElementsByClassName('ejs-basic-video');
+			for(var i=0;i<elements.length;i++){
+				videojs(elements[i], options.videojsOptions, () => options.videojsCallback());
+			}
+		}
+	}
+}
+
+module.exports = BasicVideo;

src/modules/video/liveleak.es6

@@ -1,7 +1,7 @@
 import utils from '../utils.es6';
-import base from '../base.es6';
+import Base from '../base.es6';
 
-class LiveLeak extends base{
+class LiveLeak extends Base{
 	constructor(input,options, embeds){
 		super(input, options, embeds);
 		this.regex = /liveleak.com\/view\?i=[a-zA-Z0-9_]+/gi;

src/modules/video/video.es6

@@ -7,6 +7,7 @@ import LiveLeak    from './liveleak.es6';
 import Vine        from './vine.es6';
 import Youtube     from './youtube.es6';
 import Vimeo       from './vimeo.es6';
+import BasicVideo  from './basic.es6';
 
 class Video {
     constructor(input, output, options, embeds) {
@@ -24,6 +25,7 @@ class Video {
         embeds = utils.ifEmbed(this.options, 'dailymotion') ? (new Dailymotion(input, this.options, embeds).process()) : output;
         embeds = utils.ifEmbed(this.options, 'ustream') ? (new Ustream(input, this.options, embeds).process()) : output;
         embeds = utils.ifEmbed(this.options, 'liveleak') ? (new LiveLeak(input, this.options, embeds).process()) : output;
+        embeds = utils.ifEmbed(this.options, 'basic-video') ? (new BasicVideo(input, this.options, embeds).process()) : output;
         embeds = utils.ifEmbed(this.options, 'vine') ? (new Vine(input, this.options, embeds).process()) : output;
         embeds = utils.ifEmbed(this.options, 'youtube') ? await (new Youtube(input, this.options, embeds).process()) : output;
         embeds = utils.ifEmbed(this.options, 'vimeo') ? await (new Vimeo(input, this.options, embeds).process()) : output;