Frontent dev env (#247)

* Added frontend development files/environment

* More items-categories related removals

* Improvements in pages templates (inc. static pages)

* Improvements in video player

* Added empty home page message + cta

* Updates in media, playlist and management pages

* Improvements in material icons font loading

* Replaced media & playlists links in frontend dev-env

* frontend package version update

* chnaged frontend dev url port

* static files update

* Changed default position of theme switcher

* enabled frontend docker container

frontend/packages/player/.babelrc

@@ -0,0 +1,3 @@
+{
+	"presets": ["@babel/preset-env"]
+}

frontend/packages/player/.editorconfig

@@ -0,0 +1,18 @@
+# editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = tab
+indent_size = 1
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[package.json]
+indent_style = space
+indent_size = 2
+
+[*.md]
+insert_final_newline = true
+trim_trailing_whitespace = false

frontend/packages/player/.modernizrrc

@@ -0,0 +1,8 @@
+{
+  "minify": true,
+  "options": [],
+  "feature-detects": [
+    "css/transforms",
+    "test/storage/localstorage"
+  ]
+}

frontend/packages/player/README.md

@@ -0,0 +1 @@
+# mediacms-player

frontend/packages/player/config/includes/rollup_builds.js

@@ -0,0 +1,113 @@
+import gzip from 'rollup-plugin-gzip';
+import postcss from 'rollup-plugin-postcss';
+import babel from 'rollup-plugin-babel';
+import cleanup from 'rollup-plugin-cleanup';
+// import { uglify } from "rollup-plugin-uglify";
+import commonjs from '@rollup/plugin-commonjs';
+import resolve from '@rollup/plugin-node-resolve';
+import visualizer from 'rollup-plugin-visualizer';
+import json from '@rollup/plugin-json';
+
+export default function rollup_builds(input_file, output_folder, pkg) {
+	const package_name = pkg.name;
+
+	const dependencies = pkg.dependencies;
+	const dependencies_names = !!dependencies ? Object.keys(pkg.dependencies) : [];
+
+	const esm_format = 'es';
+	const browser_format = 'umd';
+	const commonjs_format = 'cjs';
+
+	const postcss_config = {
+		extract: true,
+		modules: false, // Avoid adding prefixes to classnames (etc).
+		extensions: ['.css', '.sss', '.pcss', '.scss'],
+	};
+
+	const postcss_plugin = postcss(postcss_config);
+	const postcss_plugin_minimized = postcss({ ...postcss_config, minimize: true });
+
+	const commonjs_resolve_config = {
+		// pass custom options to the resolve plugin
+		customResolveOptions: { moduleDirectory: 'node_modules' },
+	};
+
+	function beautify_plugin() {
+		return cleanup(/*{
+            maxEmptyLines: 1,
+            sourcemap: false,
+        }*/);
+	}
+
+	function visualizer_plugin(name) {
+		return visualizer({
+			title: name,
+			filename: output_folder + '/visualizer/' + name + '.html',
+		});
+	}
+
+	function es_build(filename, visualize, bundle) {
+		const plugins = [postcss_plugin, json(), beautify_plugin()];
+
+		if (!!visualize) {
+			plugins.push(visualizer_plugin(filename));
+		}
+
+		return {
+			input: input_file,
+			external: !!bundle ? {} : dependencies_names,
+			output: [{ format: esm_format, file: filename }],
+			plugins: plugins,
+		};
+	}
+
+	function commonjs_build(filename, visualize, bundle) {
+		const plugins = [postcss_plugin, json(), resolve(commonjs_resolve_config), beautify_plugin()];
+
+		if (!!visualize) {
+			plugins.push(visualizer_plugin(filename));
+		}
+
+		return {
+			input: input_file,
+			external: !!bundle ? {} : dependencies_names,
+			output: [{ format: commonjs_format, file: filename }],
+			plugins: plugins,
+		};
+	}
+
+	function browser_build(filename, visualize, minimize, compact) {
+		const plugins = [
+			!!minimize ? postcss_plugin_minimized : postcss_plugin,
+			json(),
+			babel(),
+			resolve(),
+			commonjs(),
+			beautify_plugin(),
+		];
+
+		if (!!minimize) {
+			// plugins.push( uglify() );
+
+			if (!!compact) {
+				plugins.push(gzip());
+			}
+		}
+
+		if (!!visualize) {
+			plugins.push(visualizer_plugin(filename));
+		}
+
+		return {
+			input: input_file,
+			output: { name: package_name, format: browser_format, file: filename },
+			plugins: plugins,
+		};
+	}
+
+	return Object.freeze({
+		es: es_build,
+		browser: browser_build,
+		commonjs: commonjs_build,
+	});
+}

frontend/packages/player/config/rollup.config.build.js

@@ -0,0 +1,11 @@
+import rollup_builds from './includes/rollup_builds';
+import pckg from '../package.json';
+
+const dists = rollup_builds('./src/index.js', './out', pckg);
+
+export default [
+	dists.browser('./dist/mediacms-player.js'),
+	// dists.browser("./dist/mediacms-player.js", true),
+	// dists.browser("./dist/mediacms-player.min.js", true, true),
+	// dists.browser("./dist/mediacms-player.min.js", true, true, true)
+];

frontend/packages/player/config/rollup.config.js

@@ -0,0 +1,6 @@
+import rollup_builds from './includes/rollup_builds';
+import pckg from '../package.json';
+
+const dists = rollup_builds('./src/index.js', './out', pckg);
+
+export default [dists.browser('./dist/mediacms-player.js')];

frontend/packages/player/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "mediacms-player",
+  "version": "0.9.0",
+  "description": "",
+  "author": "",
+  "license": "",
+  "engines": {
+    "node": ">=14.17.0"
+  },
+  "keywords": [
+    "mediacms",
+    "media player",
+    "videojs"
+  ],
+  "main": "./dist/mediacms-player.js",
+  "module": "./src/",
+  "browser": "./dist/mediacms-player.js",
+  "files": [
+    "dist"
+  ],
+  "browserslist": [
+    "defaults"
+  ],
+  "scripts": {
+    "start": "npx rollup -w -c config/rollup.config.js",
+    "build": "npx rollup -c config/rollup.config.build.js",
+    "clean:build": "node ./scripts/rmrf.js ./dist"
+  },
+  "peerDependencies": {
+    "video.js": "^7.12.3"
+  },
+  "dependencies": {
+    "mediacms-vjs-plugin": "file:../vjs-plugin"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.14.5",
+    "@babel/preset-env": "^7.14.5",
+    "@rollup/plugin-commonjs": "^19.0.0",
+    "@rollup/plugin-json": "^4.1.0",
+    "@rollup/plugin-node-resolve": "^13.0.0",
+    "ajv": "^8.6.0",
+    "babel-core": "^6.26.3",
+    "babel-loader": "^8.2.2",
+    "babel-polyfill": "^6.26.0",
+    "babel-preset-env": "^1.7.0",
+    "core-js": "^3.14.0",
+    "css-loader": "^5.2.6",
+    "global": "^4.4.0",
+    "json-loader": "^0.5.7",
+    "node-sass": "^6.0.0",
+    "postcss": "^8.3.2",
+    "rollup": "^2.51.2",
+    "rollup-plugin-babel": "^4.3.3",
+    "rollup-plugin-cleanup": "^3.2.1",
+    "rollup-plugin-gzip": "^2.5.0",
+    "rollup-plugin-postcss": "^4.0.0",
+    "rollup-plugin-visualizer": "^5.5.0",
+    "sass-loader": "^12.1.0",
+    "style-loader": "^2.0.0",
+    "trim-newlines": "^4.0.2"
+  }
+}

frontend/packages/player/scripts/rmrf.js

@@ -0,0 +1,21 @@
+var fs = require('fs');
+var path = require('path');
+var rimraf = require('rimraf');
+
+var cliArgs = process.argv.slice(2);
+
+function rmdir_callback(err) {
+	if (err) {
+		throw err;
+	}
+}
+
+var i, dir;
+
+for (i = 0; i < cliArgs.length; i++) {
+	dir = path.resolve(cliArgs[i]);
+
+	if (fs.existsSync(dir)) {
+		rimraf.sync(dir, {}, rmdir_callback);
+	}
+}

frontend/packages/player/src/MediaPlayer.js

@@ -0,0 +1,453 @@
+import 'mediacms-vjs-plugin/dist/mediacms-vjs-plugin.js';
+import 'mediacms-vjs-plugin/dist/mediacms-vjs-plugin.css';
+
+function isString(v) {
+	return 'string' === typeof v || v instanceof String;
+}
+
+function isArray(v) {
+	return !Array.isArray ? '[object Array]' === Object.prototype.toString.call(v) : Array.isArray(v);
+}
+
+function isBoolean(v) {
+	return 'boolean' === typeof v || v instanceof Boolean;
+}
+
+function ifBooleanElse(bol, els) {
+	return isBoolean(bol) ? bol : els;
+}
+
+const defaults = {
+	options: {
+		sources: [],
+		keyboardControls: !0,
+		enabledTouchControls: !0,
+		nativeDimensions: !1,
+		suppressNotSupportedError: !0,
+		poster: '',
+		loop: !1,
+		controls: !0,
+		preload: 'auto',
+		autoplay: !1,
+		bigPlayButton: !0,
+		liveui: !1,
+		controlBar: {
+			bottomBackground: !0,
+			progress: !0,
+			play: !0,
+			next: !1,
+			previous: !1,
+			volume: !0,
+			pictureInPicture: !0, // @link: https://docs.videojs.com/control-bar_picture-in-picture-toggle.js.html
+			fullscreen: !0,
+			theaterMode: !0,
+			time: !0,
+		},
+		cornerLayers: {
+			topLeft: null,
+			topRight: null,
+			bottomLeft: null,
+			bottomRight: null,
+		},
+		videoPreviewThumb: {},
+		subtitles: {
+			on: false,
+			default: null,
+			languages: [],
+		},
+	},
+};
+
+/**
+ * Filter plugin options values.
+ * @param  {Object} opt Options object.
+ * @return {Object}     Filtered/Validated options object.
+ */
+function filterPlayerOptions(domPlayer, opt) {
+	let k, x, j, i;
+
+	opt.sources = isArray(opt.sources) && opt.sources.length ? opt.sources : [];
+	opt.loop = ifBooleanElse(opt.loop, defaults.options.loop);
+	opt.controls = ifBooleanElse(opt.controls, defaults.options.controls);
+
+	if (opt.subtitles && opt.subtitles instanceof Object) {
+		opt.subtitles.default = void 0 !== opt.subtitles.default ? opt.subtitles.default : defaults.options.subtitles.default;
+		opt.subtitles.languages = isArray(opt.subtitles.languages)
+			? opt.subtitles.languages
+			: defaults.options.subtitles.languages;
+		opt.subtitles.on = ifBooleanElse(opt.subtitles.on, defaults.options.subtitles.on);
+	} else {
+		opt.subtitles.default = defaults.options.subtitles;
+	}
+
+	opt.autoplay =
+		'any' === opt.autoplay || 'play' === opt.autoplay || 'muted' === opt.autoplay
+			? opt.autoplay
+			: ifBooleanElse(opt.autoplay, defaults.options.autoplay);
+
+	// console.log(opt.autoplay);
+
+	opt.bigPlayButton = ifBooleanElse(opt.bigPlayButton, defaults.options.bigPlayButton);
+	opt.poster = isString(opt.poster) && '' !== opt.poster.trim() ? opt.poster : defaults.options.poster;
+	opt.preload =
+		isString(opt.preload) && -1 < ['auto', 'metadata', 'none'].indexOf(opt.preload.trim())
+			? opt.preload
+			: defaults.options.preload;
+
+	// Control bar options.
+	if (opt.controlBar && opt.controlBar instanceof Object && Object.keys(opt.controlBar).length) {
+		for (k in opt.controlBar) {
+			if (opt.controlBar.hasOwnProperty(k)) {
+				opt.controlBar[k] = ifBooleanElse(opt.controlBar[k], defaults.options.controlBar[k]);
+			}
+		}
+	}
+
+	// Corner layers.
+	if (opt.cornerLayers && opt.cornerLayers instanceof Object && Object.keys(opt.cornerLayers).length) {
+		for (k in opt.cornerLayers) {
+			if (opt.cornerLayers.hasOwnProperty(k)) {
+				if ('string' === typeof opt.cornerLayers[k]) {
+					opt.cornerLayers[k] = '' !== opt.cornerLayers[k] ? opt.cornerLayers[k] : defaults.options.cornerLayers[k];
+				} else if (Node.prototype.isPrototypeOf(opt.cornerLayers[k]) || !isNaN(opt.cornerLayers[k])) {
+					opt.cornerLayers[k] = opt.cornerLayers[k];
+				} else {
+					opt.cornerLayers[k] = opt.cornerLayers[k] || defaults.options.cornerLayers[k];
+				}
+			} else {
+				opt.cornerLayers[k] = defaults.options.cornerLayers[k];
+			}
+		}
+	}
+
+	opt.previewSprite = 'object' === typeof opt.previewSprite ? opt.previewSprite : {};
+
+	// Include HTML sources.
+
+	let obj;
+	let sources_el = domPlayer.querySelectorAll('source');
+
+	i = 0;
+	while (i < sources_el.length) {
+		if (void 0 !== sources_el[i].attributes.src) {
+			obj = {
+				src: sources_el[i].src,
+			};
+
+			if (void 0 !== sources_el[i].attributes.type) {
+				obj.type = sources_el[i].type;
+			}
+
+			x = 0;
+			while (x < opt.sources.length && obj.src !== opt.sources[x].src) {
+				x += 1;
+			}
+
+			if (x >= opt.sources.length) {
+				opt.sources.push(obj);
+			}
+		}
+
+		i += 1;
+	}
+
+	// Include HTML subtitle tracks.
+
+	let subs_el = domPlayer.querySelectorAll('track[kind="subtitles"]');
+
+	const subtitles_options = {
+		on: opt.subtitles.on,
+		default: null,
+		languages: [],
+	};
+
+	const languages = {};
+
+	function addSubtitle(track) {
+		track.src = void 0 !== track.src && null !== track.src ? track.src.toString().trim() : '';
+		track.srclang = void 0 !== track.srclang && null !== track.srclang ? track.srclang.toString().trim() : '';
+
+		if (track.src.length && track.srclang.length) {
+			track.label = void 0 !== track.label && null !== track.label ? track.label.toString().trim() : track.srclang;
+
+			if (void 0 !== languages[track.srclang]) {
+				languages[track.srclang].src = track.src;
+				languages[track.srclang].label = track.label;
+			} else {
+				subtitles_options.languages.push({
+					label: track.label,
+					src: track.src,
+					srclang: track.srclang,
+				});
+
+				languages[track.srclang] = subtitles_options.languages[subtitles_options.languages.length - 1];
+			}
+
+			if (void 0 !== track.default && null !== track.default) {
+				track.default = track.default.toString().trim();
+
+				if (!track.default.length || '1' === track.default || 'true' === track.default) {
+					subtitles_options.default = track.srclang;
+				}
+			}
+		}
+	}
+
+	i = 0;
+	while (i < subs_el.length) {
+		addSubtitle({
+			src: subs_el[i].getAttribute('src'),
+			srclang: subs_el[i].getAttribute('srclang'),
+			default: subs_el[i].getAttribute('default'),
+			label: subs_el[i].getAttribute('label'),
+		});
+
+		i += 1;
+	}
+
+	if (opt.subtitles.languages.length) {
+		i = 0;
+
+		while (i < opt.subtitles.languages.length) {
+			addSubtitle({
+				src: opt.subtitles.languages[i].src,
+				srclang: opt.subtitles.languages[i].srclang,
+				default: opt.subtitles.languages[i].default,
+				label: opt.subtitles.languages[i].label,
+			});
+
+			i += 1;
+		}
+	}
+
+	if (null !== opt.subtitles.default && void 0 !== languages[opt.subtitles.default]) {
+		subtitles_options.default = opt.subtitles.default;
+	}
+
+	if (null === subtitles_options.default && opt.subtitles.languages.length) {
+		subtitles_options.default = opt.subtitles.languages[0].srclang;
+	}
+
+	opt.subtitles = subtitles_options;
+
+	return opt;
+}
+
+/**
+ * Construct VideoJs options by player options.
+ * @param  {Object} opt   Plugin options.
+ * @param  {Object} vjopt Initial VideoJs object.
+ * @return {Object}       Final VideoJs object.
+ */
+function constructVideojsOptions(opt, vjopt) {
+	// {
+	//     /*autoplay: false,
+	//     controls: true,
+	//     preload: "auto", // preload: "metadata",
+	//     loop: false,
+	//     bigPlayButton: true,*/
+	//     // poster: "",
+	//     // width: "",
+	//     // height: "",
+	//     // children: {}
+	//     controlBar: {
+	//         children: [],
+	//         // children: {
+	//         //     bottomGradientComponent: true,
+	//         //     progressControl: true, // (hidden during live playback)
+	//         //     leftControls: true,
+	//         //     // playbackRateMenuButton: true, // (hidden, unless playback tech supports rate changes)
+	//         //     // chaptersButton: true, // (hidden, unless there are relevant tracks)
+	//         //     // descriptionsButton: true, // (hidden, unless there are relevant tracks)
+	//         //     // subtitlesButton: true, // (hidden, unless there are relevant tracks)
+	//         //     // captionsButton: true, // (hidden, unless there are relevant tracks)
+	//         //     // audioTrackButton: true, // (hidden, unless there are relevant tracks)
+	//         // }
+	//         // seekBar: false,
+	//         // loadProgressBar: false,
+	//         // mouseTimeDisplay: false,
+	//         // playProgressBar: false,
+	//         // liveDisplay: false, // (hidden during VOD playback)
+	//         // remainingTimeDisplay: false,
+	//         // customControlSpacer: false, // (has no UI)
+	//         // playbackRateMenuButton: true, // (hidden, unless playback tech supports rate changes)
+	//         // chaptersButton: true, // (hidden, unless there are relevant tracks)
+	//         // descriptionsButton: true, // (hidden, unless there are relevant tracks)
+	//         // subtitlesButton: true, // (hidden, unless there are relevant tracks)
+	//         // captionsButton: true, // (hidden, unless there are relevant tracks)
+	//         // audioTrackButton: true, // (hidden, unless there are relevant tracks)
+	//     }
+	// }
+
+	vjopt.sources = opt.sources;
+	vjopt.loop = opt.loop;
+	vjopt.controls = opt.controls;
+	vjopt.autoplay = opt.autoplay;
+	vjopt.bigPlayButton = opt.bigPlayButton;
+	vjopt.poster = opt.poster;
+	vjopt.preload = opt.preload;
+	vjopt.suppressNotSupportedError = opt.suppressNotSupportedError;
+
+	// console.log( vjopt );
+	// console.log( opt );
+
+	return vjopt;
+}
+
+/**
+ * A wrapper/container class of MediaCMS VideoJs player.
+ * @param {DOM Node} domPlayer                 The video element in html.
+ * @param {Object} pluginOptions             Plugin (genral player's) options.
+ * @param {Object} pluginState               Plugin initial state values.
+ * @param {Function} pluginStateUpdateCallback The function will be called on plugin's state values update.
+ */
+export function MediaPlayer(
+	domPlayer,
+	pluginOptions,
+	pluginState,
+	videoResolutions,
+	videoPlaybackSpeeds,
+	pluginStateUpdateCallback,
+	onNextButtonClick,
+	onPrevButtonClick
+) {
+	if (!Node.prototype.isPrototypeOf(domPlayer)) {
+		console.error('Invalid player DOM element', domPlayer); // TODO: Validate that element is <video> or <audio>.
+		return null;
+	}
+
+	function sourcesSrcs(urls) {
+		const ret = [];
+		let i = 0;
+		while (i < urls.length) {
+			if (!!urls[i]) {
+				ret.push(urls[i]); // @todo: Validate url file extension.
+			}
+			i += 1;
+		}
+		return ret;
+	}
+
+	function sourcesFormats(formats) {
+		const ret = [];
+		let i = 0;
+		while (i < formats.length) {
+			if (!!formats[i]) {
+				ret.push(formats[i]); // @todo: Validate format.
+			}
+			i += 1;
+		}
+		return ret;
+	}
+
+	let k,
+		i,
+		pluginVideoResolutions = {},
+		pluginVideoPlaybackSpeeds = {};
+
+	if (!!videoResolutions) {
+		for (k in videoResolutions) {
+			if (videoResolutions.hasOwnProperty(k)) {
+				if (
+					isArray(videoResolutions[k].url) &&
+					videoResolutions[k].url.length &&
+					isArray(videoResolutions[k].format) &&
+					videoResolutions[k].format.length
+				) {
+					pluginVideoResolutions[k] = {
+						title: k,
+						src: sourcesSrcs(videoResolutions[k].url),
+						format: sourcesFormats(videoResolutions[k].format),
+					};
+				}
+			}
+		}
+	}
+
+	if (!!videoPlaybackSpeeds) {
+		k = 0;
+		while (k < videoPlaybackSpeeds.length) {
+			pluginVideoPlaybackSpeeds[k] = {
+				title: 1 === videoPlaybackSpeeds[k] ? 'Normal' : videoPlaybackSpeeds[k],
+				speed: videoPlaybackSpeeds[k].toString(),
+			};
+
+			k += 1;
+		}
+	}
+	/*
+	 * Filter options value.
+	 */
+
+	// console.log( '####################' );
+	// console.log( domPlayer );
+	// console.log( defaults.options );
+	// console.log( Object.keys(pluginOptions) );
+
+	pluginOptions = filterPlayerOptions(
+		domPlayer,
+		videojs.mergeOptions(
+			defaults.options,
+			pluginOptions && pluginOptions instanceof Object && Object.keys(pluginOptions).length ? pluginOptions : {}
+		)
+	);
+
+	// console.log( pluginOptions );
+	// console.log( '####################' );
+
+	/*
+	 * Filter state value.
+	 */
+
+	// console.log( '####################' );
+	// console.log( pluginState );
+
+	// console.warn( pluginOptions.subtitles );
+	// console.log( pluginState );
+	if (null !== pluginOptions.subtitles.default && pluginOptions.subtitles.on) {
+		pluginState.theSelectedSubtitleOption = pluginOptions.subtitles.default;
+	}
+	// console.log( pluginState );
+
+	// console.log( pluginState );
+	// console.log( '####################' );
+
+	/*
+	 * Initialize videojs player.
+	 */
+
+	const passOptions = constructVideojsOptions(pluginOptions, {
+		controlBar: {
+			children: [],
+		},
+	});
+
+	this.player = videojs(domPlayer, passOptions);
+
+	/*
+	 * Call plugin.
+	 */
+
+	this.player.mediaCmsVjsPlugin(
+		domPlayer,
+		pluginOptions,
+		pluginState,
+		pluginVideoResolutions,
+		pluginVideoPlaybackSpeeds,
+		pluginStateUpdateCallback,
+		onNextButtonClick,
+		onPrevButtonClick
+	);
+
+	/*
+	 * Public methods.
+	 */
+
+	this.isEnded = this.player.mediaCmsVjsPlugin().isEnded;
+	this.isFullscreen = this.player.mediaCmsVjsPlugin().isFullscreen;
+	this.isTheaterMode = this.player.mediaCmsVjsPlugin().isTheaterMode;
+
+	if (void 0 !== typeof window) {
+		window.HELP_IMPROVE_VIDEOJS = false;
+	}
+}

frontend/packages/player/src/index.js

@@ -0,0 +1,3 @@
+import { MediaPlayer } from './MediaPlayer';
+
+export default MediaPlayer;