Video player modal + provider match

client/js/components/editor-video.js

@@ -0,0 +1,49 @@
+
+const videoRules = {
+	'youtube': new RegExp(/(?:(?:youtu\.be\/|v\/|vi\/|u\/\w\/|embed\/)|(?:(?:watch)?\?v(?:i)?=|\&v(?:i)?=))([^#\&\?]*).*/, 'i'),
+	'vimeo': new RegExp(/vimeo.com\/(?:channels\/(?:\w+\/)?|groups\/(?:[^\/]*)\/videos\/|album\/(?:\d+)\/video\/|)(\d+)(?:$|\/|\?)/, 'i'),
+	'dailymotion': new RegExp(/(?:dailymotion\.com(?:\/embed)?(?:\/video|\/hub)|dai\.ly)\/([0-9a-z]+)(?:[\-_0-9a-zA-Z]+(?:#video=)?([a-z0-9]+)?)?/, 'i')
+};
+
+// Vue Video instance
+
+let vueVideo = new Vue({
+	el: '#modal-editor-video',
+	data: {
+		link: ''
+	},
+	methods: {
+		open: (ev) => {
+			$('#modal-editor-video').addClass('is-active');
+			$('#modal-editor-video input').focus();
+		},
+		cancel: (ev) => {
+			mdeModalOpenState = false;
+			$('#modal-editor-video').removeClass('is-active');
+			vueVideo.link = '';
+		},
+		insertVideo: (ev) => {
+
+			if(mde.codemirror.doc.somethingSelected()) {
+				mde.codemirror.execCommand('singleSelection');
+			}
+
+			// Guess video type
+
+			let videoType = _.findKey(videoRules, (vr) => {
+				return vr.test(vueVideo.link);
+			});
+			if(_.isNil(videoType)) {
+				videoType = 'video';
+			}
+
+			// Insert video tag
+
+			let videoText = '[video](' + vueVideo.link + '){.' + videoType + '}\n';
+
+			mde.codemirror.doc.replaceSelection(videoText);
+			vueVideo.cancel();
+
+		}
+	}
+});