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/.babelrc

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

frontend/packages/vjs-plugin/LICENSE

@@ -0,0 +1,201 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

frontend/packages/vjs-plugin/README.md

@@ -0,0 +1 @@
+# mediacms-vjs-plugin

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")
+];

frontend/packages/vjs-plugin/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "mediacms-vjs-plugin",
+  "version": "0.9.0",
+  "description": "",
+  "author": "",
+  "license": "Apache-2.0",
+  "keywords": [
+    "mediacms",
+    "videojs",
+    "videojs-plugin"
+  ],
+  "engines": {
+    "node": ">=14.17.0"
+  },
+  "main": "./dist/mediacms-vjs-plugin.js",
+  "module": "./src/",
+  "browser": "./dist/mediacms-vjs-plugin.js",
+  "files": [
+    "dist"
+  ],
+  "browserslist": [
+    "defaults"
+  ],
+  "scripts": {
+    "start": "npx rollup -w -c config/rollup.config.js",
+    "build": "npm run clean: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-font-icons": "file:../vjs-plugin-font-icons"
+  },
+  "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",
+    "compass-mixins": "^0.12.10",
+    "core-js": "^3.14.0",
+    "global": "^4.4.0",
+    "minami": "^1.2.3",
+    "node-sass": "^6.0.0",
+    "postcss": "^8.3.2",
+    "rimraf": "^3.0.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"
+  }
+}

frontend/packages/vjs-plugin/scripts/rmrf.js

@@ -0,0 +1,22 @@
+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/vjs-plugin/src/inc/components.js

@@ -0,0 +1,119 @@
+export const videojsComponent = videojs.getComponent('Component');
+export const videojsClickableComponent = videojs.getComponent('ClickableComponent');
+export const videojsComponentButton = videojs.getComponent('Button');
+
+export const __MediaCMSComponent__ =  videojs.extend(videojsComponent, {
+    constructor() {
+        videojsComponent.apply(this, arguments);
+        this.setAttribute('class', this.buildCSSClass());
+    },
+    buildCSSClass() {
+        return '';
+    },
+});
+
+export const __MediaCMSButtonClickableComponent__ =  videojs.extend(videojsClickableComponent, {
+    buildCSSClass() {
+        return '';
+    },
+});
+
+export const __SettingsPanelComponent__ = composeAndExtendCustomComp( 'vjs-settings-panel' );
+export const __SettingsPanelInnerComponent__ = composeAndExtendCustomComp( 'vjs-settings-panel-inner' );
+export const __SettingsPanelTitleComponent__ = composeAndExtendCustomComp( 'vjs-setting-panel-title');
+export const __SettingsMenuComponent__ = composeAndExtendCustomComp( 'vjs-settings-menu' );
+export const __SettingsMenuItemComponent__ = videojsComposeAndExtendCustomComp( __MediaCMSButtonClickableComponent__, 'vjs-settings-menu-item' );
+export const __SettingsMenuItemLabelComponent__ = composeAndExtendCustomComp( 'vjs-setting-menu-item-label' );
+export const __SettingsMenuItemContentComponent__ = composeAndExtendCustomComp( 'vjs-setting-menu-item-content' );
+
+function composeCustomCompMethods(ret, extnd, innerHtml, extraCSSClass, htmlAttr){
+
+    var innerHtmlIsHTMLElement = !! innerHtml && innerHtml.nodeType === 1;
+
+    if( ! innerHtmlIsHTMLElement ){
+        switch( typeof innerHtml ){
+            case 'string':
+                innerHtml = innerHtml.trim();
+                innerHtml = '' === innerHtml ? null : innerHtml;
+                break;
+            case 'number':
+                innerHtml = innerHtml.toString();
+                break;
+            default:
+                innerHtml = null;
+        }
+    }
+
+    switch( typeof extraCSSClass ){
+        case 'string':
+            extraCSSClass = extraCSSClass.trim();
+            extraCSSClass = '' === extraCSSClass ? null : extraCSSClass;
+            break;
+        default:
+            extraCSSClass = null;
+    }
+
+    if( ! htmlAttr || ! Object.keys( htmlAttr ).length ){
+        htmlAttr = null;
+    }
+
+    if( innerHtml || htmlAttr ){
+        ret.constructor = function(){
+
+            extnd.apply(this, arguments);
+
+            let k;
+
+            if( innerHtml ){
+
+                if( innerHtmlIsHTMLElement ){
+                    this.el_.appendChild( innerHtml );
+                }
+                else{
+                    this.el_.innerHTML = innerHtml;
+                }
+            }
+
+            if( htmlAttr ){
+                for(k in htmlAttr){
+                    if( htmlAttr.hasOwnProperty(k) ){
+                        this.el_.setAttribute( k, htmlAttr[k] );   
+                    }
+                }
+            }
+        };
+    }
+
+    if( extraCSSClass ){
+        ret.buildCSSClass = function(){
+            return extraCSSClass + ' ' + extnd.prototype.buildCSSClass.call(this);
+        };
+    }
+}
+
+function videosjsExtendCustomComp( parent, methods ){
+    return videojs.extend( parent, methods );
+}
+
+function videosjsFormatExtendObj( parent, methods ){
+    return {
+        extend: parent,
+        methods: methods
+    };
+}
+
+export function videojsComposeAndExtendCustomComp( extnd, extraCSSClass, innerHtml, htmlAttr ){
+    const ret = {};
+    composeCustomCompMethods(ret, extnd, innerHtml, extraCSSClass, htmlAttr);
+    return videosjsExtendCustomComp( extnd, ret );
+}
+
+export function composeCustomComp( extnd, extraCSSClass, innerHtml, htmlAttr ){
+    const ret = {};
+    composeCustomCompMethods(ret, extnd, innerHtml, extraCSSClass, htmlAttr);
+    return videosjsFormatExtendObj( extnd, ret );    
+}
+
+export function composeAndExtendCustomComp( extraCSSClass, innerHtml, htmlAttr ){
+    return videojsComposeAndExtendCustomComp( __MediaCMSComponent__, extraCSSClass, innerHtml, htmlAttr );
+}

frontend/packages/vjs-plugin/src/inc/functions-helpers.js

@@ -0,0 +1,797 @@
+import {
+	composeCustomComp,
+	videojsComponent,
+	videojsComponentButton,
+	__MediaCMSComponent__,
+	__MediaCMSButtonClickableComponent__,
+	__SettingsPanelComponent__,
+	__SettingsPanelInnerComponent__,
+	__SettingsPanelTitleComponent__,
+	__SettingsMenuComponent__,
+	__SettingsMenuItemComponent__,
+	__SettingsMenuItemLabelComponent__,
+	__SettingsMenuItemContentComponent__
+} from './components';
+
+export function generateControlBarComponents(pluginInstanceRef) {
+
+    function childrenGen( parentKey, child, allComps, parentsConn, level ){
+
+        var k, addedChild = false;
+
+        allComps[level]= void 0 === allComps[level] ? [] : allComps[level];
+
+        for( k in child ){
+        	
+            if( child.hasOwnProperty(k) ){
+
+                if( child[k] && child[k].children ){
+
+                    if( childrenGen( k, child[k].children, allComps, parentsConn, level + 1 ) ){
+                        addedChild = true;
+                        allComps[level].push(k);
+                        parentsConn[k] = parentKey;
+                    }
+                }
+                else {
+
+                    addedChild = true;
+                    allComps[level].push(k);
+                    parentsConn[k] = parentKey;
+                }
+            }
+        }
+
+        return addedChild;
+    }
+
+    function gen(parent, ControlBar) {
+        const componentsToAppend = [], parentsConnections = {}, appendedComponents = {};
+        let i, j, prnt, customCompKey, customCompName;
+        if( parent.children ){
+
+            childrenGen( 'controlBar', parent.children, componentsToAppend, parentsConnections, 0 );
+
+            /*console.log( componentsToAppend );
+            console.log( parentsConnections );*/
+
+            i = 0;
+            while(i<componentsToAppend.length){
+                j = 0;
+                while(j < componentsToAppend[i].length){
+                    prnt = 0 === i ? pluginInstanceRef.player.getChild( parentsConnections[ componentsToAppend[i][j] ] ) : appendedComponents[ parentsConnections[ componentsToAppend[i][j] ] ];
+                    prnt.addChild(componentsToAppend[i][j], {});
+                    appendedComponents[ componentsToAppend[i][j] ] = prnt.getChild( componentsToAppend[i][j] );
+                    j++;
+                }
+                i++;
+            }
+        }
+    }
+
+    return gen;
+}
+
+export function generateTouchControlComponents(pluginInstanceRef, options) {
+
+	if( options.enabledTouchControls ){
+
+		let TouchControls, 
+			TouchControlsInner,
+			TouchPrevious,
+			TouchPlay,
+			TouchNext;
+
+		const previousButton = composeCustomComp( videojsComponentButton, 'vjs-icon-previous-item' );
+		const playButton = composeCustomComp( videojsComponentButton, 'vjs-icon-play' );
+    	const nextButton = composeCustomComp( videojsComponentButton, 'vjs-icon-next-item' );
+
+    	playButton.methods.handleClick = function(ev){
+    		if( this.player_.paused() ){
+    			this.player_.play();
+    			setTimeout( (function(){
+    				this.player_.userActive(false);
+    			}).bind(this), 250 );
+	        }
+	        else{
+	        	this.player_.pause();
+	        }
+    	};
+
+    	if( options.controlBar.next ){ nextButton.methods.handleClick = function(ev){ this.player_.trigger('clicked_next_button');  }; }
+    	if( options.controlBar.previous ){ previousButton.methods.handleClick = function(ev){ this.player_.trigger('clicked_previous_button'); }; }
+
+		videojs.registerComponent( 'TouchControls', videojs.extend( __MediaCMSComponent__ , composeCustomComp( __MediaCMSComponent__, 'vjs-touch-controls' ).methods ) );
+        videojs.registerComponent( 'TouchControlsInner', videojs.extend( __MediaCMSComponent__ , composeCustomComp( __MediaCMSComponent__ ).methods ) );
+
+        videojs.registerComponent( 'TouchPreviousButton', videojs.extend( previousButton.extend , previousButton.methods) );
+		videojs.registerComponent( 'TouchPlayButton', videojs.extend( playButton.extend , playButton.methods) );
+    	videojs.registerComponent( 'TouchNextButton', videojs.extend( nextButton.extend , nextButton.methods) );
+    	
+    	videojs.registerComponent( 'TouchPlay', videojs.extend( __MediaCMSComponent__ , composeCustomComp( __MediaCMSComponent__, 'vjs-touch-play-button' ).methods ) );
+
+    	if( options.controlBar.next || options.controlBar.previous ){
+    		videojs.registerComponent( 'TouchPrevious', videojs.extend( __MediaCMSComponent__ , composeCustomComp( __MediaCMSComponent__, 'vjs-touch-previous-button' + ( ! options.controlBar.previous ? ' vjs-touch-disabled-button' : '' ) ).methods ) );
+	    	videojs.registerComponent( 'TouchNext', videojs.extend( __MediaCMSComponent__ , composeCustomComp( __MediaCMSComponent__, 'vjs-touch-next-button' + ( ! options.controlBar.next ? ' vjs-touch-disabled-button' : '' ) ).methods ) );
+    	}
+    	else{
+    		videojs.registerComponent( 'TouchPrevious', videojs.extend( __MediaCMSComponent__ , composeCustomComp( __MediaCMSComponent__, 'vjs-touch-previous-button' + ( ! options.controlBar.previous ? ' vjs-touch-hidden-button' : '' ) ).methods ) );
+    		videojs.registerComponent( 'TouchNext', videojs.extend( __MediaCMSComponent__ , composeCustomComp( __MediaCMSComponent__, 'vjs-touch-next-button' + ( ! options.controlBar.next ? ' vjs-touch-hidden-button' : '' ) ).methods ) );
+    	}
+
+        pluginInstanceRef.player.addChild( 'TouchControls' );
+
+        TouchControls = pluginInstanceRef.player.getChild('TouchControls');
+        
+        TouchControls.addChild( 'TouchControlsInner' );
+
+        TouchControlsInner = TouchControls.getChild('TouchControlsInner');
+		
+		TouchControlsInner.addChild( 'TouchPrevious' );
+		TouchControlsInner.addChild( 'TouchPlay' );
+		TouchControlsInner.addChild( 'TouchNext' );
+
+        TouchPrevious = TouchControlsInner.getChild( 'TouchPrevious' );
+    	TouchPlay = TouchControlsInner.getChild( 'TouchPlay' );
+		TouchNext = TouchControlsInner.getChild( 'TouchNext' );
+
+		TouchPrevious.addChild( 'TouchPreviousButton' );
+		TouchPlay.addChild( 'TouchPlayButton' );
+		TouchNext.addChild( 'TouchNextButton' );
+	}	
+}
+
+export function generateCornerLayersComponents(pluginInstanceRef, options) {
+
+	const layers = {};
+	const compPrefix = 'CornerLayer_';
+	let k;
+
+    if( options.cornerLayers.topLeft ){
+	    layers.topLeft = {
+	        className: 'vjs-corner-layer vjs-corner-top-left',
+	        parent: pluginInstanceRef.player,
+	        content: options.cornerLayers.topLeft,
+	    };
+	}
+
+    if( options.cornerLayers.topRight ){
+	    layers.topRight = {
+	        className: 'vjs-corner-layer vjs-corner-top-right',
+	        parent: pluginInstanceRef.player,
+	        content: options.cornerLayers.topRight,
+	    };
+	}
+
+    if( options.cornerLayers.bottomLeft ){
+	    layers.bottomLeft = {
+	        className: 'vjs-corner-layer vjs-corner-bottom-left',
+	        parent: pluginInstanceRef.player,
+	        content: options.cornerLayers.bottomLeft,
+	    };
+	}
+
+    if( options.cornerLayers.bottomRight ){
+	    layers.bottomRight = {
+	        className: 'vjs-corner-layer vjs-corner-bottom-right',
+	        parent: pluginInstanceRef.player,
+	        content: options.cornerLayers.bottomRight,
+	    };
+	}
+
+    for(k in layers){
+    	if( layers.hasOwnProperty(k) ){
+    		if( layers[k].content ){
+
+	    		videojs.registerComponent( compPrefix + k, videojs.extend( __MediaCMSComponent__ , composeCustomComp( __MediaCMSComponent__, layers[k].className, layers[k].content ).methods ) );
+	    		
+	    		layers[k].parent.addChild( compPrefix + k );
+	    	}
+    	}
+    }
+}
+
+export function generateActionsAnimationsComponents(pluginInstanceRef){
+	videojs.registerComponent( 'ActionsAnimations', videojs.extend( __MediaCMSComponent__ , composeCustomComp( __MediaCMSComponent__, 'vjs-actions-anim', '<span></span>' ).methods ) );
+	pluginInstanceRef.player.addChild( 'ActionsAnimations' );
+}
+
+export function generateLoadingSpinnerComponent(pluginInstanceRef){
+
+	pluginInstanceRef.player.removeChild('LoadingSpinner');
+
+	videojs.registerComponent(
+		'LoadingSpinner',
+		videojs.extend(
+			__MediaCMSComponent__ ,
+			composeCustomComp(
+				__MediaCMSComponent__,
+				'vjs-loading-spinner',
+				'<div class="spinner">\
+				    <div class="spinner-container">\
+				        <div class="spinner-rotator">\
+				            <div class="spinner-left"><div class="spinner-circle"></div></div>\
+				            <div class="spinner-right"><div class="spinner-circle"></div></div>\
+				        </div>\
+				    </div>\
+				</div>'
+			).methods
+		)
+	);
+
+	pluginInstanceRef.player.addChild( 'LoadingSpinner' );
+}
+
+function initComponents(pluginInstanceRef, which, struct, args){
+	let k;
+	let tmp;
+	switch(which){
+		case 'bottomBackground':
+			struct.bottomBackground = null;
+	        videojs.registerComponent("BottomBackground", videojs.extend( __MediaCMSComponent__ , composeCustomComp( __MediaCMSComponent__, 'vjs-bottom-bg' ).methods));
+			break;
+		case 'progressControl':
+			struct.progressControl = null;
+			break;
+		case '__settings':
+
+			struct.settingsPanel = {
+	            children: {
+	                settingsPanelInner: {
+	                    children: {
+	                        settingsMenu: { children:{} },
+	                    },
+	                },
+	            },
+	        };
+
+	        tmp = composeCustomComp( __SettingsPanelComponent__, 'vjs-settings-root');
+
+	        tmp.methods.constructor = function() {
+
+		        videojsComponent.apply(this, arguments);
+
+		        this.setAttribute('class', this.buildCSSClass());
+
+		        const that = this;
+
+		        function onFocusout(ev){
+		        	if (that.el_.contains(ev.relatedTarget)) {
+				        return;
+				    }
+				    that.player_.trigger('focusoutSettingsPanel');
+		        }
+
+		        pluginInstanceRef.on(this.player_, ['updatedSettingsPanelsVisibility'], function(){
+		        	videojs.dom[ this.state.isOpenSettingsOptions ? 'addClass' : 'removeClass' ]( that.el_, 'vjs-visible-panel' );
+		        });
+
+		        pluginInstanceRef.on(this.player_, ['openedSettingsPanel'], function( ev, openedFromKeyboard ){
+		        	that.el_.setAttribute('tabindex', '-1');
+		        	that.el_.addEventListener('focusout', onFocusout );
+		        	if( !!openedFromKeyboard ){
+		        		that.el_.querySelector('.vjs-settings-menu-item').focus();
+		        	}
+		        	else{
+		        		that.el_.focus();
+		        	}
+		        });
+
+		        pluginInstanceRef.on(this.player_, ['closedSettingsPanel'], function( ev, closedFromKeyboard ){
+		        	that.el_.removeAttribute('tabindex');
+		        	that.el_.removeEventListener('focusout', onFocusout );
+		        	if( !!closedFromKeyboard ){
+		        		that.el_.querySelector('.vjs-settings-menu-item').focus();
+		        	}
+		        });
+		    };
+
+		    videojs.registerComponent('SettingsPanel', videojs.extend( tmp.extend , tmp.methods));
+	        
+	        videojs.registerComponent('SettingsPanelInner', videojs.extend( __SettingsPanelInnerComponent__, composeCustomComp( __SettingsPanelInnerComponent__ ).methods));
+
+	        videojs.registerComponent('SettingsMenu', videojs.extend( __SettingsMenuComponent__, composeCustomComp( __SettingsMenuComponent__ ).methods));
+
+		    if( args.enabledPlaybackSpeedPanel ){
+
+		        struct.settingsPanel.children.settingsPanelInner.children.settingsMenu.children.selectedPlaybackSpeed = {
+		        	children: {
+		        		selectedPlaybackSpeedLabel: null,
+		        		selectedPlaybackSpeedContent: null,
+		        	}
+		        };
+
+		        tmp = composeCustomComp( __SettingsMenuItemComponent__, 'vjs-selected-speed' );
+
+		        tmp.methods.handleClick = function(ev){
+		            this.player_.trigger('openPlaybackSpeedOptions', ! ev.screenX && ! ev.screenY );
+		        };
+
+		        videojs.registerComponent('SelectedPlaybackSpeed', videojs.extend( tmp.extend , tmp.methods));
+		        videojs.registerComponent('SelectedPlaybackSpeedLabel', videojs.extend( __SettingsMenuItemLabelComponent__, composeCustomComp( __SettingsMenuItemLabelComponent__, null, 'Playback speed' ).methods));
+
+		        tmp = composeCustomComp( __SettingsMenuItemContentComponent__, null, args.selectedPlaybackSpeed );
+
+		        tmp.methods.constructor = function() {
+			        videojsComponent.apply(this, arguments);
+			        const that = this;
+			        that.el_.innerHTML = pluginInstanceRef.selectedPlaybackSpeedTitle();
+			        this.setAttribute('class', this.buildCSSClass());
+			        pluginInstanceRef.on(this.player_, ['updatedSelectedPlaybackSpeed'], function(){
+			        	that.el_.innerHTML = this.selectedPlaybackSpeedTitle();
+			        });
+			    };
+
+			    videojs.registerComponent('SelectedPlaybackSpeedContent', videojs.extend( tmp.extend , tmp.methods));
+		    }
+
+	        if( args.enabledResolutionsPanel ){
+
+		        struct.settingsPanel.children.settingsPanelInner.children.settingsMenu.children.selectedResolution = {
+		        	children: {
+		        		selectedResolutionLabel: null,
+		        		selectedResolutionContent: null,
+		        	}
+		        };
+
+		        tmp = composeCustomComp( __SettingsMenuItemComponent__, 'vjs-selected-quality' );
+
+		        tmp.methods.handleClick = function(ev){
+		            this.player_.trigger('openQualityOptions', ! ev.screenX && ! ev.screenY );
+		        };
+
+		        videojs.registerComponent('SelectedResolution', videojs.extend( tmp.extend , tmp.methods));
+		        videojs.registerComponent('SelectedResolutionLabel', videojs.extend( __SettingsMenuItemLabelComponent__, composeCustomComp( __SettingsMenuItemLabelComponent__, null, 'Quality' ).methods));
+
+		        tmp = composeCustomComp( __SettingsMenuItemContentComponent__, null, args.selectedResolution );
+
+		        tmp.methods.constructor = function() {
+			        videojsComponent.apply(this, arguments);
+			        const that = this;
+			        that.el_.innerHTML = args.selectedResolution;
+			        this.setAttribute('class', this.buildCSSClass());
+			        pluginInstanceRef.on(this.player_, ['updatedSelectedQuality'], function(){
+			        	that.el_.innerHTML = this.selectedQualityTitle();
+			        });
+			    };
+
+			    videojs.registerComponent('SelectedResolutionContent', videojs.extend( tmp.extend , tmp.methods));
+		    }
+
+			break;
+		case '__resolution':
+
+	        struct.resolutionsPanel = {
+	            children: {
+	                resolutionsPanelInner: {
+	                    children: {
+	                        resolutionsMenuTitle: {
+	                        	children: {
+	                        		resolutionsMenuBackButton: null
+		                        }
+		                    },
+	                        resolutionsMenu: { children: {} }
+	                    }
+	                }
+	            }
+	        };
+
+	        tmp = composeCustomComp( __SettingsPanelComponent__, 'vjs-resolutions-panel');
+
+	        tmp.methods.constructor = function() {
+
+		        videojsComponent.apply(this, arguments);
+
+		        this.setAttribute('class', this.buildCSSClass());
+
+		        const that = this;
+
+		        function onFocusout(ev){
+		        	if (that.el_.contains(ev.relatedTarget)) {
+				        return;
+				    }
+				    that.player_.trigger('focusoutResolutionsPanel');
+		        }
+
+		        pluginInstanceRef.on(this.player_, ['updatedSettingsPanelsVisibility'], function(){
+		        	videojs.dom[ this.state.isOpenQualityOptions ? 'addClass' : 'removeClass' ]( that.el_, 'vjs-visible-panel' );
+		        });
+
+		        pluginInstanceRef.on(this.player_, ['openedQualities'], function(ev, openedFromKeyboard){
+		        	that.el_.setAttribute('tabindex', '-1');
+		        	that.el_.addEventListener('focusout', onFocusout);
+		        	if( !!openedFromKeyboard ){
+		        		that.el_.querySelector('.vjs-setting-panel-title > *[role="button"]').focus();
+		        	}
+		        	else{
+		        		that.el_.focus();
+		        	}
+		        });
+
+		        pluginInstanceRef.on(this.player_, ['closedQualities'], function(ev, closedFromKeyboard){
+		        	that.el_.removeAttribute('tabindex');
+		        	that.el_.removeEventListener('focusout', onFocusout);
+		        	if( !!closedFromKeyboard ){
+		        		that.el_.querySelector('.vjs-settings-menu-item').focus();
+		        	}
+		        });
+		    };
+
+		    videojs.registerComponent('ResolutionsPanel', videojs.extend( tmp.extend , tmp.methods));
+
+	        videojs.registerComponent('ResolutionsPanelInner', videojs.extend( __SettingsPanelInnerComponent__, composeCustomComp( __SettingsPanelInnerComponent__ ).methods));
+
+	        videojs.registerComponent('ResolutionsMenu', videojs.extend( __SettingsMenuComponent__, composeCustomComp( __SettingsMenuComponent__ ).methods));
+
+	        videojs.registerComponent('ResolutionsMenuTitle', videojs.extend( __SettingsPanelTitleComponent__ , composeCustomComp( __SettingsPanelTitleComponent__, 'vjs-settings-back' ).methods));
+
+	        tmp = composeCustomComp( __MediaCMSButtonClickableComponent__, null, 'Quality' );
+	        tmp.methods.handleClick = function(ev){
+	            this.player_.trigger('closeQualityOptions', ! ev.screenX && ! ev.screenY );
+
+	        };
+
+	        videojs.registerComponent('ResolutionsMenuBackButton', videojs.extend( tmp.extend , tmp.methods));
+
+	        const resolutionKeys = (function(){
+
+	        	let i;
+	        	const ret = [];
+	        	const keys = Object.keys( args.resolutions );
+	        	const stringKeys = [];
+		        const numericKeys = [];
+
+		        i = 0;
+		        while( i < keys.length ){
+
+		            if( isNaN( 0 + keys[i] ) ){
+		                stringKeys.push( keys[i] );
+		            }
+		            else{
+		                numericKeys.push( [ parseFloat( keys[i] ), keys[i] ] );
+		            }
+		            i += 1;
+		        }
+
+		        numericKeys.sort( (a, b) => b[0] - a[0] );
+
+		        i = 0;
+		        while( i < numericKeys.length ){
+		            ret.push( numericKeys[i][1] );
+		            i += 1;
+		        }
+
+		        i = 0;
+		        while( i < stringKeys.length ){
+		            ret.push( stringKeys[i] );
+		            i += 1;
+		        }
+
+		        return ret;
+	        }());
+
+	        let i = 0;
+	        while( i < resolutionKeys.length ){
+
+	            k = resolutionKeys[i];
+
+	            struct.resolutionsPanel.children.resolutionsPanelInner.children.resolutionsMenu.children[ 'resolutionOption_' + k ] = {
+        			children: {
+		        		['resolutionOption_' + k + '_content'] : null
+		        	}
+        		};
+
+        		(function( key, title ){
+
+	                tmp = composeCustomComp( __SettingsMenuItemComponent__, key.toString() === pluginInstanceRef.state.theSelectedQuality.toString() ? 'vjs-selected-menu-item' : null, null/*, { 'data-opt': key }*/ );
+
+	                tmp.methods.constructor = function(){
+	                	__SettingsMenuItemComponent__.apply(this, arguments);
+	                	const that = this;
+	                	this.qualityKey = key;
+	                	this.setAttribute('data-opt', key);
+	                	pluginInstanceRef.on(this.player_, ['updatedSelectedQuality'], function(){
+				        	videojs.dom[ that.qualityKey === this.state.theSelectedQuality ? 'addClass' : 'removeClass' ]( that.el_, 'vjs-selected-menu-item' );
+				        });
+	                };
+
+	                tmp.methods.handleClick = function(){
+			            this.player_.trigger('selectedQuality', this.el_.getAttribute('data-opt'));
+			        };
+
+			        videojs.registerComponent('ResolutionOption_' + key, videojs.extend( tmp.extend , tmp.methods));
+
+			        tmp = composeCustomComp( __SettingsMenuItemContentComponent__, null, title );
+			        videojs.registerComponent('ResolutionOption_' + key + '_content', videojs.extend( tmp.extend , tmp.methods));
+
+	            }( k, args.resolutions[k].title || k ));
+	        	
+	        	i += 1;
+	        }
+
+			break;
+		case '__playbackSpeed':
+
+	        struct.playbackSpeedsPanel = {
+	            children: {
+	                playbackSpeedsPanelInner: {
+	                    children: {
+	                        playbackSpeedsMenuTitle: {
+	                        	children: {
+	                        		playbackSpeedsMenuBackButton: null
+		                        }
+		                    },
+	                        playbackSpeedsMenu: { children: {} }
+	                    }
+	                }
+	            }
+	        };
+
+	        tmp = composeCustomComp( __SettingsPanelComponent__, 'vjs-playback-speed-panel');
+
+	        tmp.methods.constructor = function() {
+
+		        videojsComponent.apply(this, arguments);
+
+		        this.setAttribute('class', this.buildCSSClass());
+
+		        const that = this;
+
+		        function onFocusout(ev){
+		        	if (that.el_.contains(ev.relatedTarget)) {
+				        return;
+				    }
+				    that.player_.trigger('focusoutPlaybackSpeedsPanel');
+		        }
+
+		        pluginInstanceRef.on(this.player_, ['updatedSettingsPanelsVisibility'], function(){
+		        	videojs.dom[ this.state.isOpenPlaybackSpeedOptions ? 'addClass' : 'removeClass' ]( that.el_, 'vjs-visible-panel' );
+		        });
+
+		        pluginInstanceRef.on(this.player_, ['openedPlaybackSpeeds'], function(ev, openedFromKeyboard){
+		        	that.el_.setAttribute('tabindex', '-1');
+		        	that.el_.addEventListener('focusout', onFocusout);
+		        	if( !!openedFromKeyboard ){
+		        		that.el_.querySelector('.vjs-setting-panel-title > *[role="button"]').focus();
+		        	}
+		        	else{
+		        		that.el_.focus();
+		        	}
+		        });
+
+		        pluginInstanceRef.on(this.player_, ['closedPlaybackSpeeds'], function(ev, closedFromKeyboard){
+		        	that.el_.removeAttribute('tabindex');
+		        	that.el_.removeEventListener('focusout', onFocusout);
+		        	if( !!closedFromKeyboard ){
+		        		that.el_.querySelector('.vjs-settings-menu-item').focus();
+		        	}
+		        });
+
+		    };
+
+		    videojs.registerComponent('PlaybackSpeedsPanel', videojs.extend( tmp.extend , tmp.methods));
+
+	        videojs.registerComponent('PlaybackSpeedsPanelInner', videojs.extend( __SettingsPanelInnerComponent__, composeCustomComp( __SettingsPanelInnerComponent__ ).methods));
+
+	        videojs.registerComponent('PlaybackSpeedsMenu', videojs.extend( __SettingsMenuComponent__, composeCustomComp( __SettingsMenuComponent__ ).methods));
+
+	        videojs.registerComponent('PlaybackSpeedsMenuTitle', videojs.extend( __SettingsPanelTitleComponent__ , composeCustomComp( __SettingsPanelTitleComponent__, 'vjs-settings-back' ).methods));
+
+	        tmp = composeCustomComp( __MediaCMSButtonClickableComponent__, null, 'Playback speed' );
+	        tmp.methods.handleClick = function(ev){
+	            this.player_.trigger('closePlaybackSpeedOptions', ! ev.screenX && ! ev.screenY );
+
+	        };
+
+	        videojs.registerComponent('PlaybackSpeedsMenuBackButton', videojs.extend( tmp.extend , tmp.methods));
+
+	        for(k in args.playbackSpeeds){
+
+	        	if( args.playbackSpeeds.hasOwnProperty(k) ){
+
+	        		struct.playbackSpeedsPanel.children.playbackSpeedsPanelInner.children.playbackSpeedsMenu.children[ 'playbackSpeedOption_' + args.playbackSpeeds[k].speed ] = {
+	        			children: {
+			        		['playbackSpeedOption_' + args.playbackSpeeds[k].speed + '_content'] : null
+			        	}
+	        		};
+
+	        		(function( key, title ){
+
+		                tmp = composeCustomComp( __SettingsMenuItemComponent__, key.toString() === pluginInstanceRef.state.theSelectedPlaybackSpeed.toString() ? 'vjs-selected-menu-item' : null, null/*, { 'data-opt': key }*/ );
+
+		                tmp.methods.constructor = function(){
+		                	__SettingsMenuItemComponent__.apply(this, arguments);
+		                	const that = this;
+		                	this.playbackSpeedKey = key;
+		                	this.setAttribute('data-opt', key);
+		                	pluginInstanceRef.on(this.player_, ['updatedSelectedPlaybackSpeed'], function(){
+					        	videojs.dom[ that.playbackSpeedKey === this.state.theSelectedPlaybackSpeed ? 'addClass' : 'removeClass' ]( that.el_, 'vjs-selected-menu-item' );
+					        });
+		                };
+
+		                tmp.methods.handleClick = function(){
+				            this.player_.trigger('selectedPlaybackSpeed', this.el_.getAttribute('data-opt'));
+				        };
+
+				        videojs.registerComponent('PlaybackSpeedOption_' + key, videojs.extend( tmp.extend , tmp.methods));
+
+				        tmp = composeCustomComp( __SettingsMenuItemContentComponent__, null, title );
+				        videojs.registerComponent('PlaybackSpeedOption_' + key + '_content', videojs.extend( tmp.extend , tmp.methods));
+
+		            }( args.playbackSpeeds[k].speed, args.playbackSpeeds[k].title || k ));
+	        	}
+	        }
+
+			break;
+		case '__leftControls':
+	        struct.leftControls = { children: {} };
+
+	        if( args.options.controlBar.previous ){
+
+	            tmp = composeCustomComp( videojsComponentButton, 'vjs-previous-button' );
+
+	            tmp.methods.handleClick = function(ev){
+	            	this.player_.trigger('clicked_previous_button');
+		        };
+
+	            videojs.registerComponent("PreviousButton", videojs.extend( tmp.extend , tmp.methods));
+
+	            struct.leftControls.children.previousButton = null;
+	        }
+
+	        if( args.options.controlBar.play ){
+	            struct.leftControls.children.playToggle = null;
+	        }
+
+	        if( args.options.controlBar.next ){
+
+	            tmp = composeCustomComp( videojsComponentButton, 'vjs-next-button' );
+
+	            tmp.methods.handleClick = function(ev){
+	            	this.player_.trigger('clicked_next_button');
+		        };
+
+	            videojs.registerComponent("NextButton", videojs.extend( tmp.extend , tmp.methods));
+
+	            struct.leftControls.children.nextButton = null;
+	        }
+
+	        /*if( args.options.controlBar.previous ){
+
+	            struct.leftControls.children.previous = null;
+	        }
+
+	        if( args.options.controlBar.next ){
+	        	// videojs.registerComponent("Next", videojs.extend( __MediaCMSComponent__ , composeCustomComp( __MediaCMSComponent__, 'vjs-bottom-bg' ).methods));
+	        	videojs.registerComponent("Next", videojs.extend( __MediaCMSComponent__ , composeCustomComp( __MediaCMSComponent__, 'vjs-bottom-bg' ).methods));
+
+	            struct.leftControls.children.next = null;
+	        }*/
+
+	        if( args.options.controlBar.volume ){
+	            struct.leftControls.children.volumePanel = null;
+	        }
+
+	        if( args.options.controlBar.time ){
+	            struct.leftControls.children.currentTimeDisplay = null;
+	            struct.leftControls.children.timeDivider = null;
+	            struct.leftControls.children.durationDisplay = null;
+	        }
+
+	        /*console.log( struct.leftControls.children );*/
+
+	        videojs.registerComponent("LeftControls", videojs.extend( __MediaCMSComponent__ , composeCustomComp( __MediaCMSComponent__, 'vjs-left-controls' ).methods));
+
+			break;
+		case '__rightControls':
+			struct.rightControls = { children: {} };
+
+	        if( args.enabledSettingsPanel ){
+	            struct.rightControls.children.settingsToggle = null;
+	        }
+
+	        if( args.options.controlBar.theaterMode ){
+	            struct.rightControls.children.theaterModeToggle = null;
+	        }
+
+	        if( args.options.controlBar.pictureInPicture ){
+	            struct.rightControls.children.pictureInPictureToggle = null;
+	        }
+
+	        if( args.options.controlBar.fullscreen ){
+	            struct.rightControls.children.fullscreenToggle = null;
+	        }
+
+	        videojs.registerComponent("RightControls", videojs.extend( __MediaCMSComponent__ , composeCustomComp( __MediaCMSComponent__, 'vjs-right-controls' ).methods));
+
+	        if( args.enabledSettingsPanel ){
+
+		        tmp = composeCustomComp( videojsComponentButton, 'vjs-settings-control vjs-icon-cog' );
+
+		        tmp.methods.handleClick = function(ev){
+		        	this.player_.trigger( pluginInstanceRef.state.isOpenSettingsOptions ? 'closeSettingsPanel' : 'openSettingsPanel', ! ev.screenX && ! ev.screenY );
+		        };
+
+	            videojs.registerComponent("SettingsToggle", videojs.extend( tmp.extend , tmp.methods));
+		    }
+
+	        if( args.options.controlBar.theaterMode ){
+
+	            tmp = composeCustomComp( videojsComponentButton, 'vjs-theater-mode-control' );
+
+	            tmp.methods.handleClick = function(){
+	                this.player_.trigger('theatermodechange');
+	                this.updateControlText();
+	            };
+
+	            tmp.methods.updateControlText = function(){
+	                this.controlText(this.player_.localize(pluginInstanceRef.isTheaterMode() ? 'Default mode' : 'Theater mode'));
+	            };
+
+	            videojs.registerComponent("TheaterModeToggle", videojs.extend( tmp.extend , tmp.methods));
+	        }
+			break;
+	}
+}
+
+export function controlBarComponentsStructs( pluginInstanceRef, options ){
+
+	let struct = {};
+
+    const enabledResolutionsPanel = void 0 !== options.resolutions && void 0 !== options.resolutions.options && !!Object.keys( options.resolutions.options ).length;
+    const enabledPlaybackSpeedPanel = void 0 !== options.playbackSpeeds && void 0 !== options.playbackSpeeds.options && !!Object.keys( options.playbackSpeeds.options ).length;
+
+    const enabledSettingsPanel = enabledResolutionsPanel || enabledPlaybackSpeedPanel;   // @note: At the moment the only setting option is video resolution.
+
+    if( options.controlBar.bottomBackground ){
+    	initComponents(pluginInstanceRef, 'bottomBackground', struct);
+    }
+
+    if( options.controlBar.progress ){
+    	initComponents(pluginInstanceRef, 'progressControl', struct);
+    }
+
+    if( enabledResolutionsPanel ){
+    	initComponents(pluginInstanceRef, '__resolution', struct, { resolutions: options.resolutions.options } );
+    }
+
+    if( enabledPlaybackSpeedPanel ){
+    	initComponents(pluginInstanceRef, '__playbackSpeed', struct, { playbackSpeeds: options.playbackSpeeds.options } );
+    }
+
+    if( enabledSettingsPanel ){
+
+    	if( enabledResolutionsPanel && enabledPlaybackSpeedPanel ){
+
+	    	initComponents(pluginInstanceRef, '__settings', struct, {
+	    		enabledResolutionsPanel: enabledResolutionsPanel,
+	    		selectedResolution: enabledResolutionsPanel ? options.resolutions.default : null,
+	    		enabledPlaybackSpeedPanel: enabledPlaybackSpeedPanel,
+	    		selectedPlaybackSpeed: enabledPlaybackSpeedPanel ? options.playbackSpeeds.default : null,
+	    	});
+    	}
+    	else if( enabledResolutionsPanel ){
+	    	initComponents(pluginInstanceRef, '__settings', struct, {
+	    		enabledResolutionsPanel: enabledResolutionsPanel,
+	    		selectedResolution: enabledResolutionsPanel ? options.resolutions.default : null,
+	    	});
+    	}
+    	else if( enabledPlaybackSpeedPanel ){
+
+	    	initComponents(pluginInstanceRef, '__settings', struct, {
+	    		enabledPlaybackSpeedPanel: enabledPlaybackSpeedPanel,
+	    		selectedPlaybackSpeed: enabledPlaybackSpeedPanel ? options.playbackSpeeds.default : null,
+	    	});
+    	}
+    }
+
+    if( options.controlBar.play || options.controlBar.previous || options.controlBar.next || options.controlBar.volume || options.controlBar.time ){
+    	initComponents(pluginInstanceRef, '__leftControls', struct, { options: options } );
+    }
+
+    if( enabledSettingsPanel || options.controlBar.theaterMode || options.controlBar.fullscreen || options.controlBar.pictureInPictureToggle ){
+    	initComponents(pluginInstanceRef, '__rightControls', struct, { options: options, enabledSettingsPanel: enabledSettingsPanel } );
+    }
+
+    return { children: struct };
+}

frontend/packages/vjs-plugin/src/inc/functions.js

@@ -0,0 +1,192 @@
+import {
+    generateControlBarComponents,
+    controlBarComponentsStructs,
+    generateCornerLayersComponents,
+    generateActionsAnimationsComponents,
+    generateLoadingSpinnerComponent,
+    generateTouchControlComponents
+} from './functions-helpers';
+
+export function setControlBarComponents(pluginInstncRef, options, player) {
+    if ( isDefined( options ) && isDefined( options.controlBar ) ) {
+        generateControlBarComponents(pluginInstncRef)( controlBarComponentsStructs(pluginInstncRef, options), player.getChild('controlBar') );
+    }
+}
+
+export function setCornerLayersComponents(pluginInstncRef, options) {
+    if ( isDefined( options ) ) {
+        generateCornerLayersComponents(pluginInstncRef, options);
+    }
+}
+
+export function setActionsAnimationsComponents(pluginInstncRef) {
+    generateActionsAnimationsComponents(pluginInstncRef);
+}
+
+export function replaceLoadingSpinnerComponent(pluginInstncRef) {
+    generateLoadingSpinnerComponent(pluginInstncRef);
+}
+
+export function setTouchControlComponents(pluginInstncRef, options) {
+    generateTouchControlComponents(pluginInstncRef, options);
+}
+
+export function removeClassname(el, cls) {
+    if (el.classList) {
+        el.classList.remove(cls);
+    } else {
+        el.className = el.className.replace(new RegExp('(^|\\b)' + cls.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
+    }
+}
+
+export function addClassname(el, cls) {
+    if (el.classList) {
+        el.classList.add(cls);
+    } else {
+        el.className += ' ' + cls;
+    }
+}
+
+export function centralizeBoxPosition(vw, vh, vr, pw, ph, pr) {
+
+    const ret = {};
+
+    const videoRatio = isDefined( vr ) && ! isNull( vr ) ? vr : vw / vh,
+        playerRatio = isDefined( pr ) && ! isNull( pr ) ? pr : pw / ph,
+        playerVerticalOrientation = 1 > playerRatio,
+        videoVerticalOrientation = 1 > videoRatio;
+
+    if (!playerVerticalOrientation) {
+
+        if (!videoVerticalOrientation) {
+
+            // Both ARE NOT "vertical";
+
+            if (videoRatio > playerRatio) {
+
+                if (vw >= pw) {
+                    ret.w = pw;
+                    ret.h = ret.w / videoRatio;
+                } else {
+                    ret.w = vw;
+                    ret.h = vh;
+                }
+
+            } else {
+                ret.h = vw >= pw ? ph : (vh >= ph ? ph : vh);
+                ret.w = ret.h * videoRatio;
+            }
+        } else {
+
+            // Video IS "vertical" and player IS NOT "vertical";
+
+            if (vh >= ph) {
+                ret.h = ph;
+                ret.w = ret.h * videoRatio;
+            } else {
+                ret.w = vw;
+                ret.h = vh;
+            }
+        }
+
+    } else if (!videoVerticalOrientation) {
+
+        // Player IS "vertical" and video IS NOT "vertical";
+
+        if (vw >= pw) {
+            ret.w = pw;
+            ret.h = ret.w / videoRatio;
+        } else {
+            ret.w = vw;
+            ret.h = vh;
+        }
+    } else {
+
+        // Both ARE "vertical";
+
+        if (videoRatio > playerRatio) {
+
+            if (vw >= pw) {
+                ret.w = pw;
+                ret.h = ret.w / videoRatio;
+
+            } else {
+                ret.w = vw;
+                ret.h = vh;
+            }
+
+        } else if (vw >= pw) {
+            ret.h = ph;
+            ret.w = ret.h * videoRatio;
+        } else if (vh >= ph) {
+            ret.h = ph;
+            ret.w = ret.h * videoRatio;
+        } else {
+            ret.w = vw;
+            ret.h = vh;
+        }
+    }
+
+    ret.t = (ph - ret.h) / 2;
+    ret.l = (pw - ret.w) / 2;
+
+    return ret;
+}
+
+export function isBoolean(v){
+    return "boolean" === typeof v || v instanceof Boolean;
+}
+
+export function isString(v){
+    return "string" === typeof v || v instanceof String;
+}
+
+export function isDefined(v){
+    return void 0 != v;
+}
+
+export function isNull(v){
+    return null === v;
+}
+
+export function isArray(v){
+    return ! Array.isArray ? '[object Array]' === Object.prototype.toString.call(v) : Array.isArray(v);
+}
+
+export function ifBooleanElse(bol, els){
+    return isBoolean(bol) ? bol : els;
+}
+
+export function applyCssTransform(elem, val){
+    val = val.replace(/ /g,""); // Remove all blank characters, otherwise doesn't work in IE.
+    elem.style.transform = val;
+    elem.style.msTransform = val;
+    elem.style.MozTransform = val;
+    elem.style.WebkitTransform = val;
+    elem.style.OTransform = val;
+}
+
+function browserSupports_csstransforms() {
+    var i, v, b = document.body || document.documentElement, s = b.style, p = 'transition';
+    if ( 'string' === typeof s[p] ) {
+        return true;
+    }
+    v = ['Moz', 'webkit', 'Webkit', 'Khtml', 'O', 'ms'];
+    p = p.charAt(0).toUpperCase() + p.substr(1);
+    i=0;
+    while(i<v.length){
+        if (  'string' === typeof s[v[i]+p] ) {
+            return true;
+        }
+        i+=1;
+    }
+    return false;
+}
+
+export function browserSupports(type){
+    switch(type){
+        case 'csstransforms':
+            return browserSupports_csstransforms();
+    }
+    return null;
+}

frontend/packages/vjs-plugin/src/inc/videoPreviewThumb.js

@@ -0,0 +1,174 @@
+function videoPreviewThumb(player, options){
+
+    player.getChild('ControlBar').getChild('ProgressControl').getChild('SeekBar').removeChild('MouseTimeDisplay');
+
+    var halfThumbWidth = -1;
+
+    var defaults = {
+        frame:{
+            width: 160,
+            height: 120,
+        }
+    };
+    
+    function extend() {
+        var args = Array.prototype.slice.call(arguments);
+        var target = args.shift() || {};
+        var i, obj, prop;
+        for (i in args) {
+            obj = args[i];
+            for (prop in obj) {
+                if (obj.hasOwnProperty(prop)) {
+                    target[prop] = 'object' === typeof obj[prop] ? extend(target[prop], obj[prop]) : obj[prop];
+                }
+            }
+        }
+        return target;
+    }
+    
+    function getAllComputedStyles(el) {
+        return window.getComputedStyle ? window.getComputedStyle(el) : el.currentStyle;
+    }
+
+    function getComputedStyle(el, pseudo) {
+        return function(prop) {
+            return window.getComputedStyle ? window.getComputedStyle(el, pseudo)[prop] : el.currentStyle[prop];
+        };
+    }
+
+    function offsetParent(el) {
+        return 'HTML' !== el.nodeName && 'static' === getComputedStyle(el)('position') ? offsetParent(el.offsetParent) : el;
+    }
+
+    function updateDimensions(){
+        if ( isFullscreen ){
+            halfThumbWidth = ( innerBorderWidth.left + innerBorderWidth.right + ( 1.5 * settings.frame.width ) ) / 2 ;
+            spriteDom.inner.style.height = ( innerBorderWidth.top + innerBorderWidth.bottom + ( 1.5 * settings.frame.height ) ) + 'px';
+            spriteDom.inner.style.width = ( innerBorderWidth.left + innerBorderWidth.right + ( 1.5 * settings.frame.width ) ) + 'px';
+        }
+        else {
+            halfThumbWidth = ( innerBorderWidth.left + innerBorderWidth.right + settings.frame.width ) / 2 ;
+            spriteDom.inner.style.height = ( innerBorderWidth.top + innerBorderWidth.bottom + settings.frame.height ) + 'px';
+            spriteDom.inner.style.width = ( innerBorderWidth.left + innerBorderWidth.right + settings.frame.width ) + 'px';
+        }
+        spriteDom.inner.style.left = ( -1 * halfThumbWidth ) + 'px';
+    }
+
+    var spriteDom = {
+        wrap: document.createElement('div'),
+        inner: document.createElement('div'),
+        img: document.createElement('img'),
+        timeDisplay: document.createElement('div'),
+        timeDisplayInner: document.createElement('div'),
+    };
+
+    var innerBorderWidth = {
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+    };
+
+    var progressControl = player.controlBar.childNameIndex_.ProgressControl;
+    var progressControlElem;
+
+    var seekBar = progressControl.childNameIndex_.SeekBar;
+
+    var duration = player.duration();
+    var isFullscreen = player.isFullscreen();
+
+    var settings = extend({}, defaults, options);
+
+    /*settings.frame.height = defaults.width / ( settings.frame.width / settings.frame.height );
+    settings.frame.width = defaults.width;*/
+
+    /*settings.frame.width = ( settings.frame.width / settings.frame.height ) * defaults.width;
+    settings.frame.height = defaults.height;*/
+
+    /*settings.frame.height = 192 / ( settings.frame.width / settings.frame.height );
+    settings.frame.width = 192;*/
+
+    spriteDom.wrap.className = 'vjs-preview-thumb';
+    spriteDom.inner.className = 'vjs-preview-thumb-inner';
+    spriteDom.inner.style.backgroundImage = 'url(' + settings.url + ')'
+    spriteDom.timeDisplay.className = 'vjs-preview-thumb-time-display';
+    spriteDom.timeDisplayInner.innerHTML = '0:00';
+
+    var spriteHeight = 0;
+
+    player.on('durationchange', function(e) { duration = player.duration(); }); // when the container is MP4.
+    player.on('loadedmetadata', function(e) { duration = player.duration(); }); // when the container is HLS.
+
+    player.on('fullscreenchange', function(e) {
+        setTimeout( function() {
+            isFullscreen = player.isFullscreen();
+            updateDimensions();
+        }, 100);
+    });
+
+    player.one( 'playing', function(e) {    // @note: Listener bind once.
+
+        updateDimensions();
+
+        player.addClass('vjs-enabled-preview-thumb');   // @note: Enable preview functionality.
+
+        spriteDom.img.onload = function() {
+
+            var innerStyles = getAllComputedStyles(spriteDom.inner);
+            
+            if( void 0 !== innerStyles ){
+                innerBorderWidth.top = parseFloat( innerStyles.borderTopWidth );
+                innerBorderWidth.left = parseFloat( innerStyles.borderLeftWidth );
+                innerBorderWidth.right = parseFloat( innerStyles.borderRightWidth );
+                innerBorderWidth.bottom = parseFloat( innerStyles.borderBottomWidth );
+            }
+
+            spriteHeight = this.naturalHeight;
+            
+            spriteDom.img = void 0; // Unset image element.
+
+            updateDimensions();
+        };
+        
+        spriteDom.img.src = settings.url;
+    });
+
+    function moveListener(event) {
+
+        progressControlElem = progressControlElem || progressControl.el();
+
+        var progressControlClientRect = offsetParent( progressControlElem ).getBoundingClientRect();
+
+        var pageXOffset = window.pageXOffset ? window.pageXOffset : document.documentElement.scrollLeft;
+        var pageX = event.changedTouches ? event.changedTouches[0].pageX : event.pageX;
+        
+        var left = ( pageX || ( event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft ) ) - ( progressControlClientRect.left + pageXOffset );
+        var right = ( progressControlClientRect.width || progressControlClientRect.right ) + pageXOffset;
+
+        var mouseTime = ! spriteHeight ? 0 : Math.min( ( ( spriteHeight / settings.frame.height ) * settings.frame.seconds ) - 1, Math.floor( ( left - progressControlElem.offsetLeft ) / progressControl.width() * duration ) );
+
+        spriteDom.timeDisplayInner.innerHTML = videojs.formatTime( duration * ( left / right ) );
+
+        if( left < halfThumbWidth ){
+            left = halfThumbWidth;
+        }
+        else if( left > right - halfThumbWidth ){
+            left = right - halfThumbWidth;
+        }
+
+        spriteDom.wrap.style.transform = 'translate(' + Math.min( right - halfThumbWidth, left ) + 'px, 0px)';
+
+        spriteDom.inner.style.backgroundPositionY = ( ( isFullscreen ? -1.5 : -1 ) * settings.frame.height * Math.floor( mouseTime / settings.frame.seconds ) ) + 'px';
+    }
+
+    progressControl.on('mouseover', moveListener);
+    progressControl.on('mousemove', moveListener);
+
+    spriteDom.timeDisplay.appendChild(spriteDom.timeDisplayInner);
+    spriteDom.inner.appendChild(spriteDom.timeDisplay);
+    spriteDom.wrap.appendChild(spriteDom.inner);
+
+    progressControl.el_.appendChild(spriteDom.wrap);
+}
+
+export default videoPreviewThumb;

frontend/packages/vjs-plugin/src/index.js

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