Change video and audio to media

Author: mervit

dist/ekko-lightbox.js

@@ -256,26 +256,33 @@ var Lightbox = (function ($) {
 				if (!type && this._getYoutubeId(src)) type = 'youtube';
 				if (!type && this._getVimeoId(src)) type = 'vimeo';
 				if (!type && this._getInstagramId(src)) type = 'instagram';
-				if (!type && this._isAudio(src)) type = 'audio';
-				if (!type && this._isVideo(src)) type = 'video';
-				if (!type || ['image', 'youtube', 'vimeo', 'instagram', 'video', 'url', 'audio'].indexOf(type) < 0) type = 'url';
+				if (type == 'audio' || type == 'video' || !type && this._isMedia(src)) type = 'media';
+				if (!type || ['image', 'youtube', 'vimeo', 'instagram', 'media', 'url'].indexOf(type) < 0) type = 'url';
 
 				return type;
 			}
+		}, {
+			key: '_getRemoteContentType',
+			value: function _getRemoteContentType(src) {
+				var response = $.ajax({
+					type: 'HEAD',
+					url: src,
+					async: false
+				});
+				console.log(response);
+				var contentType = response.getResponseHeader('Content-Type');
+				console.log(contentType);
+				return contentType;
+			}
 		}, {
 			key: '_isImage',
 			value: function _isImage(string) {
 				return string && string.match(/(^data:image\/.*,)|(\.(jp(e|g|eg)|gif|png|bmp|webp|svg)((\?|#).*)?$)/i);
 			}
 		}, {
-			key: '_isAudio',
-			value: function _isAudio(string) {
-				return string && string.match(/(^data:audio\/.*,)|(\.(mp3|ogg)((\?|#).*)?$)/i);
-			}
-		}, {
-			key: '_isVideo',
-			value: function _isVideo(string) {
-				return string && string.match(/(^data:audio\/.*,)|(\.(mp4|ogg)((\?|#).*)?$)/i);
+			key: '_isMedia',
+			value: function _isMedia(string) {
+				return string && string.match(/(\.(mp3|mp4|ogg|webm|wav)((\?|#).*)?$)/i);
 			}
 		}, {
 			key: '_containerToUse',
@@ -310,7 +317,7 @@ var Lightbox = (function ($) {
 				var currentRemote = this._$element.attr('data-remote') || this._$element.attr('href');
 				var currentType = this._detectRemoteType(currentRemote, this._$element.attr('data-type') || false);
 
-				if (['image', 'youtube', 'vimeo', 'instagram', 'video', 'url', 'audio'].indexOf(currentType) < 0) return this._error(this._config.strings.type);
+				if (['image', 'youtube', 'vimeo', 'instagram', 'media', 'url'].indexOf(currentType) < 0) return this._error(this._config.strings.type);
 
 				switch (currentType) {
 					case 'image':
@@ -326,11 +333,8 @@ var Lightbox = (function ($) {
 					case 'instagram':
 						this._showInstagramVideo(this._getInstagramId(currentRemote), $toUse);
 						break;
-					case 'video':
-						this._showHtml5Video(currentRemote, $toUse);
-						break;
-					case 'audio':
-						this._showHtml5Audio(currentRemote, $toUse);
+					case 'media':
+						this._showHtml5Media(currentRemote, $toUse);
 						break;
 					default:
 						// url
@@ -463,25 +467,23 @@ var Lightbox = (function ($) {
 				return this;
 			}
 		}, {
-			key: '_showHtml5Video',
-			value: function _showHtml5Video(url, $containerForElement) {
-				// should be used for videos only. for remote content use loadRemoteContent (data-type=url)
-				var width = this._$element.data('width') || 560;
-				var height = this._$element.data('height') || width / (560 / 315);
-				$containerForElement.html('<div class="embed-responsive embed-responsive-16by9"><video width="' + width + '" height="' + height + '" src="' + url + '" preload="auto" autoplay controls class="embed-responsive-item"></video></div>');
-				this._resize(width, height);
-				this._config.onContentLoaded.call(this);
-				if (this._$modalArrows) this._$modalArrows.css('display', 'none'); //hide the arrows when showing video
-				this._toggleLoading(false);
-				return this;
-			}
-		}, {
-			key: '_showHtml5Audio',
-			value: function _showHtml5Audio(url, $containerForElement) {
+			key: '_showHtml5Media',
+			value: function _showHtml5Media(url, $containerForElement) {
 				// should be used for videos only. for remote content use loadRemoteContent (data-type=url)
+				var contentType = this._getRemoteContentType(url);
+				console.log(contentType);
+				if (!contentType) {
+					return this._error(this._config.strings.type);
+				}
+				var mediaType = '';
+				if (contentType.indexOf('audio') > 0) {
+					mediaType = 'audio';
+				} else {
+					mediaType = 'video';
+				}
 				var width = this._$element.data('width') || 560;
 				var height = this._$element.data('height') || width / (560 / 315);
-				$containerForElement.html('<div class="embed-responsive embed-responsive-16by9"><audio width="' + width + '" height="' + height + '" src="' + url + '" preload="auto" autoplay controls class="embed-responsive-item"></audio></div>');
+				$containerForElement.html('<div class="embed-responsive embed-responsive-16by9"><' + mediaType + ' width="' + width + '" height="' + height + '" preload="auto" autoplay controls class="embed-responsive-item"><source src="' + url + '" type="' + contentType + '">' + this._config.strings.type + '</' + mediaType + '></div>');
 				this._resize(width, height);
 				this._config.onContentLoaded.call(this);
 				if (this._$modalArrows) this._$modalArrows.css('display', 'none'); //hide the arrows when showing video