Move vendored dependencies to npm, build with webpack and babel

Fixes https://github.com/nextcloud/files_videoplayer/issues/71

Signed-off-by: Christoph Wurst <christoph@winzerhof-wurst.at>

4 files changed, 217 insertions, 0 deletions

diff --git a/src/viewer.js b/src/viewer.js
new file mode 100755
index 0000000..0a8715e
--- /dev/null
+++ b/src/viewer.js
@@ -0,0 +1,163 @@
+/*
+ * @copyright 2018 Christoph Wurst <christoph@winzerhof-wurst.at>
+ *
+ * @author 2018 Christoph Wurst <christoph@winzerhof-wurst.at>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import $ from 'jquery';
+import _ from 'underscore';
+
+__webpack_nonce__ = btoa(OC.requestToken)
+__webpack_public_path__ = OC.filePath('files_videoplayer', '', 'js/')
+
+const loadVideoJSOnce = _.once(() => {
+	return import(/* webpackChunkName: "videojs" */ 'video.js');
+});
+
+var videoViewer = {
+	UI: {
+		playerTemplate: '<video id="my_video_1" class="video-js vjs-sublime-skin" controls preload="auto" width="100%" height="100%" poster="' + OC.filePath('files_videoplayer', '', 'img') + '/poster.png" data-setup=\'{"techOrder": ["html5"]}\'>' +
+			'<source type="%type%" src="%src%" />' +
+			'</video>',
+		show: function () {
+			// insert HTML
+			var playerView = videoViewer.UI.playerTemplate
+				.replace(/%src%/g, escapeHTML(videoViewer.location));
+			if (videoViewer.mime) {
+				playerView = playerView.replace(/%type%/g, escapeHTML(videoViewer.mime));
+			} else {
+				playerView = playerView.replace(/type="%type%"/g, '');
+			}
+			if (videoViewer.inline === null) {
+				var overlay = $('<div id="videoplayer_overlay" style="display:none;"><div id="videoplayer_outer_container"><div id="videoplayer_container"><div id="videoplayer"></div></div></div></div>');
+				overlay.appendTo('body');
+				$(playerView).prependTo('#videoplayer');
+				// close when clicking on the overlay
+				overlay.on("click", function (e) {
+					if (e.target === this) {
+						videoViewer.hidePlayer();
+					}
+				});
+				// show elements
+				overlay.fadeIn('fast');
+			} else {
+				var wrapper = $('<div id="videoplayer_view"></div>');
+				wrapper.append(playerView);
+				$(videoViewer.inline).html(wrapper);
+			}
+			// initialize player
+			videojs("my_video_1").ready(function () {
+				videoViewer.player = this;
+				if (videoViewer.inline === null) {
+					// append close button to video element
+					var closeButton = $('<a class="icon-view-close" id="box-close" href="#"></a>').click(videoViewer.hidePlayer);
+					$("#my_video_1").append(closeButton);
+				}
+				// autoplay
+				videoViewer.player.play();
+			});
+
+		},
+		hide: function () {
+			$('#videoplayer_overlay').fadeOut('fast', function () {
+				$('#videoplayer_overlay').remove();
+			});
+		}
+	},
+	mime: null,
+	file: null,
+	location: null,
+	player: null,
+	inline: null,
+	mimeTypes: [
+		'video/mp4',
+		'video/x-m4v',
+		'video/webm',
+		'video/x-flv',
+		'video/ogg',
+		'video/quicktime',
+		'video/x-matroska'
+	],
+	mimeTypeAliasses: {
+		'video/x-matroska': 'video/webm' // mkv support for Chrome. webm uses the same container format
+	},
+	onView: function (file, data) {
+		videoViewer.file = file;
+		videoViewer.dir = data.dir;
+		videoViewer.location = data.fileList.getDownloadUrl(file, videoViewer.dir);
+		videoViewer.mime = data.$file.attr('data-mime');
+		if (videoViewer.mimeTypeAliasses.hasOwnProperty(videoViewer.mime)) {
+			videoViewer.mime = videoViewer.mimeTypeAliasses[videoViewer.mime];
+		}
+		videoViewer.showPlayer();
+	},
+	onViewInline: function (element, file, mime) {
+		videoViewer.location = file;
+		videoViewer.mime = mime;
+		if (videoViewer.mimeTypeAliasses.hasOwnProperty(videoViewer.mime)) {
+			videoViewer.mime = videoViewer.mimeTypeAliasses[videoViewer.mime];
+		}
+		videoViewer.inline = element;
+		videoViewer.showPlayer();
+	},
+	showPlayer: function () {
+		loadVideoJSOnce().then(() => {
+			videoViewer.UI.show();
+		});
+	},
+	hidePlayer: function () {
+		if (videoViewer.player !== null && videoViewer.player !== false && videoViewer.inline === null) {
+			videoViewer.player.dispose();
+			videoViewer.player = false;
+			videoViewer.UI.hide();
+		}
+	},
+	log: function (message) {
+		console.log(message);
+	}
+};
+
+$(document).ready(function () {
+
+	// add event to ESC key
+	$(document).keyup(function (e) {
+		if (e.keyCode === 27) {
+			videoViewer.hidePlayer();
+		}
+	});
+
+	var isSupportedMimetype = false;
+	var mimetype = $('#mimetype').val();
+
+	if (typeof FileActions !== 'undefined') {
+		for (var i = 0; i < videoViewer.mimeTypes.length; ++i) {
+			var mime = videoViewer.mimeTypes[i];
+			OCA.Files.fileActions.register(mime, 'View', OC.PERMISSION_READ, '', videoViewer.onView);
+			OCA.Files.fileActions.setDefault(mime, 'View');
+			if (mime === mimetype) {
+				isSupportedMimetype = true;
+			}
+		}
+	}
+
+	if ($('#body-public').length && $('#imgframe').length && isSupportedMimetype) {
+		var videoUrl = window.location + '/download';
+		videoViewer.onViewInline($('#imgframe'), videoUrl, mimetype);
+	}
+
+});
diff --git a/src/webpack.common.js b/src/webpack.common.js
new file mode 100644
index 0000000..1f2e411
--- /dev/null
+++ b/src/webpack.common.js
@@ -0,0 +1,40 @@
+const path = require('path');
+
+module.exports = {
+	entry: path.join(__dirname, 'viewer.js'),
+	output: {
+		path: path.resolve(__dirname, '../js'),
+		publicPath: '/js/',
+	},
+	module: {
+		rules: [
+			{
+				test: /\.css$/,
+				use: ['css-loader', 'style-loader']
+			},
+			{
+				test: /\.js$/,
+				loader: 'babel-loader',
+				exclude: /node_modules/
+			},
+			{
+				test: /\.(png|jpg|gif)$/,
+				loader: 'file-loader',
+				options: {
+					name: '[name].[ext]?[hash]'
+				}
+			},
+			{
+				test: /\.(svg)$/i,
+				use: [
+					{
+						loader: 'url-loader'
+					}
+				]
+			}
+		]
+	},
+	resolve: {
+		extensions: ['*', '.js']
+	}
+};
\ No newline at end of file
diff --git a/src/webpack.dev.js b/src/webpack.dev.js
new file mode 100644
index 0000000..da0084b
--- /dev/null
+++ b/src/webpack.dev.js
@@ -0,0 +1,7 @@
+const merge = require('webpack-merge');
+const common = require('./webpack.common.js');
+
+module.exports = merge(common, {
+  mode: 'development',
+  devtool: 'source-map',
+})
diff --git a/src/webpack.prod.js b/src/webpack.prod.js
new file mode 100644
index 0000000..8e5e2f8
--- /dev/null
+++ b/src/webpack.prod.js
@@ -0,0 +1,7 @@
+const merge = require('webpack-merge')
+const common = require('./webpack.common.js')
+
+module.exports = merge(common, {
+  mode: 'production',
+  devtool: 'source-map'
+})