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/vjs-plugin/config/includes/rollup_builds.js

@@ -0,0 +1,111 @@
+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/vjs-plugin/config/jest.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+    "name": "",
+    "verbose": false,
+    "collectCoverage": true,
+    "collectCoverageFrom": ["./src/**"],
+    "coverageDirectory": "./out/coverage/",
+    "testPathIgnorePatterns": ["/__tests__/functions.js" ],
+};

frontend/packages/vjs-plugin/config/jsdoc.conf.json

@@ -0,0 +1,26 @@
+{
+    "plugins": [
+        "plugins/markdown",
+        "plugins/summarize"
+    ],
+    "recurseDepth": 10,
+    "source":
+    {
+        "includePattern": ".+\\.js(doc|x)?$",
+        "excludePattern": "(^|\\/|\\\\)_"
+    },
+    "sourceType": "module",
+    "tags":
+    {
+        "allowUnknownTags": true,
+        "dictionaries": ["jsdoc", "closure"]
+    },
+    "templates":
+    {
+        "cleverLinks": false,
+        "monospaceLinks": false
+    },
+    "opts": {
+      "template": "./node_modules/docdash-blue"
+    }
+}

frontend/packages/vjs-plugin/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-vjs-plugin.js"),
+    // dists.browser("./dist/mediacms-vjs-plugin.js", true),
+    // dists.browser("./dist/mediacms-vjs-plugin.min.js", true, true),
+    // dists.browser("./dist/mediacms-vjs-plugin.min.js", true, true, true)
+];

frontend/packages/vjs-plugin/config/rollup.config.js

@@ -0,0 +1,8 @@
+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-vjs-plugin.js")
+];