Load local video.js

5 years ago · ab0826b80d
6 changed files with 255 additions and 17 deletions
--- a/frontend/app-config/webpack.config.js
+++ b/frontend/app-config/webpack.config.js
@ -212,26 +212,29 @@ module.exports = function (env) {
                patterns: [
                  { from: './node_modules/simplemde/dist', to: 'dependencies/simplemde' },

-                  { from: './node_modules/tinymce/icons/default/icons.min.js', to: 'dependencies/tinymce/icons/default/icons.min.js' },
-                  { from: './node_modules/tinymce/plugins/advlist', to: 'dependencies/tinymce/plugins/advlist' },
-                  { from: './node_modules/tinymce/plugins/code', to: 'dependencies/tinymce/plugins/code' },
-                  { from: './node_modules/tinymce/plugins/image', to: 'dependencies/tinymce/plugins/image' },
-                  { from: './node_modules/tinymce/plugins/link', to: 'dependencies/tinymce/plugins/link' },
-                  { from: './node_modules/tinymce/plugins/lists', to: 'dependencies/tinymce/plugins/lists' },
-                  { from: './node_modules/tinymce/plugins/media', to: 'dependencies/tinymce/plugins/media' },
-                  { from: './node_modules/tinymce/plugins/paste', to: 'dependencies/tinymce/plugins/paste' },
+                  { from: './node_modules/tinymce/icons/default/icons.min.js', to: 'dependencies/tinymce/icons/default' },
+                  { from: './node_modules/tinymce/plugins/advlist', to: 'dependencies/tinymce/plugins' },
+                  { from: './node_modules/tinymce/plugins/code', to: 'dependencies/tinymce/plugins' },
+                  { from: './node_modules/tinymce/plugins/image', to: 'dependencies/tinymce/plugins' },
+                  { from: './node_modules/tinymce/plugins/link', to: 'dependencies/tinymce/plugins' },
+                  { from: './node_modules/tinymce/plugins/lists', to: 'dependencies/tinymce/plugins' },
+                  { from: './node_modules/tinymce/plugins/media', to: 'dependencies/tinymce/plugins' },
+                  { from: './node_modules/tinymce/plugins/paste', to: 'dependencies/tinymce/plugins' },
                  { from: './node_modules/tinymce/skins', to: 'dependencies/tinymce/skins' },
                  { from: './node_modules/tinymce/themes/silver', to: 'dependencies/tinymce/themes/silver' },
-                  { from: './node_modules/tinymce/tinymce.min.js', to: 'dependencies/tinymce/tinymce.min.js' },
+                  { from: './node_modules/tinymce/tinymce.min.js', to: 'dependencies/tinymce' },

                  { from: './node_modules/ace-builds/src-min/ace.js', to: 'dependencies/ace/ace.js' },
-                  { from: './node_modules/ace-builds/src-min/mode-javascript.js', to: 'dependencies/ace/mode-javascript.js' },
-                  { from: './node_modules/ace-builds/src-min/worker-javascript.js', to: 'dependencies/ace/worker-javascript.js' },
+                  { from: './node_modules/ace-builds/src-min/mode-*.js', to: 'dependencies/ace' },
+                  { from: './node_modules/ace-builds/src-min/worker-*.js', to: 'dependencies/ace' },

-                  { from: './node_modules/font-awesome/css/font-awesome.min.css', to: 'dependencies/font-awesome/css/font-awesome.min.css' },
+                  { from: './node_modules/video.js/dist/video.min.js', to: 'dependencies/videojs' },
+                  { from: './node_modules/video.js/dist/video-js.min.css', to: 'dependencies/videojs' },
+
+                  { from: './node_modules/font-awesome/css/font-awesome.min.css', to: 'dependencies/font-awesome/css' },
                  { from: './node_modules/font-awesome/fonts', to: 'dependencies/font-awesome/fonts' },

-                  { from: './node_modules/vis-network/standalone/umd/vis-network.min.js', to: 'dependencies/vis-network.min.js' },
+                  { from: './node_modules/vis-network/standalone/umd/vis-network.min.js', to: 'dependencies' },
                ],
              }),
        ],
--- a/frontend/app/framework/angular/video-player.component.scss
+++ b/frontend/app/framework/angular/video-player.component.scss
@ -11,3 +11,7 @@ $color-video: #000;
 :host {
    background: $color-video;
 }
+
+.hidden {
+    display: none !important;
+}
--- a/frontend/app/framework/angular/video-player.component.ts
+++ b/frontend/app/framework/angular/video-player.component.ts
@ -50,15 +50,15 @@ export class VideoPlayerComponent implements AfterViewInit, OnDestroy, OnChanges

    public ngAfterViewInit(): void {
        Promise.all([
-            this.resourceLoader.loadScript('https://vjs.zencdn.net/7.10.2/video.min.js'),
-            this.resourceLoader.loadStyle('https://vjs.zencdn.net/7.10.2/video-js.css')
+            this.resourceLoader.loadLocalScript('dependencies/videojs/video.min.js'),
+            this.resourceLoader.loadLocalStyle('dependencies/videojs/video-js.min.css')
        ]).then(() => {
+            this.renderer.removeClass(this.video.nativeElement, 'hidden');
+
            this.player = videojs(this.video.nativeElement, {
                fluid: true
            });

-            this.renderer.removeClass(this.video.nativeElement, 'hidden');
-
            this.ngOnChanges();
        });
    }
--- a/frontend/app/shared/components/assets/asset-dialog.component.scss
+++ b/frontend/app/shared/components/assets/asset-dialog.component.scss
@ -57,4 +57,5 @@ sqx-video-player {

 ngx-doc-viewer {
    @include absolute(0, 0, 0, 0);
+    height: auto !important;
 }
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@ -412,6 +412,23 @@
      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.12.5.tgz",
      "integrity": "sha512-FVM6RZQ0mn2KCf1VUED7KepYeUWoVShczewOCfm3nzoBybaih51h+sYVVGthW9M6lPByEPTQf+xm27PBdlpwmQ=="
    },
+    "@babel/runtime": {
+      "version": "7.12.5",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.12.5.tgz",
+      "integrity": "sha512-plcc+hbExy3McchJCEQG3knOsuh3HH+Prx1P6cLIkET/0dLuQDEnrT+s27Axgc9bqfsmNUNHfscgMUdBpC9xfg==",
+      "dev": true,
+      "requires": {
+        "regenerator-runtime": "^0.13.4"
+      },
+      "dependencies": {
+        "regenerator-runtime": {
+          "version": "0.13.7",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz",
+          "integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew==",
+          "dev": true
+        }
+      }
+    },
    "@babel/template": {
      "version": "7.10.4",
      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.10.4.tgz",
@ -781,6 +798,56 @@
        }
      }
    },
+    "@videojs/http-streaming": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/@videojs/http-streaming/-/http-streaming-2.2.4.tgz",
+      "integrity": "sha512-gzT46RpAEegOhMId/zZ6uXCVGDMPOv8qmoTykBuvd6/4lVM3lZ1ZJCq0kytAkisDuDKipy93gP46oZEtonlc/Q==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "@videojs/vhs-utils": "^2.2.1",
+        "aes-decrypter": "3.1.0",
+        "global": "^4.3.2",
+        "m3u8-parser": "4.5.0",
+        "mpd-parser": "0.14.0",
+        "mux.js": "5.6.7",
+        "video.js": "^6 || ^7"
+      }
+    },
+    "@videojs/vhs-utils": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@videojs/vhs-utils/-/vhs-utils-2.3.0.tgz",
+      "integrity": "sha512-ThSmm91S7tuIJ757ON50K4y7S/bvKN4+B0tu303gCOxaG57PoP1UvPfMQZ90XGhxwNgngexVojOqbBHhTvXVHQ==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "global": "^4.3.2",
+        "url-toolkit": "^2.1.6"
+      }
+    },
+    "@videojs/xhr": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@videojs/xhr/-/xhr-2.5.1.tgz",
+      "integrity": "sha512-wV9nGESHseSK+S9ePEru2+OJZ1jq/ZbbzniGQ4weAmTIepuBMSYPx5zrxxQA0E786T5ykpO8ts+LayV+3/oI2w==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "global": "~4.4.0",
+        "is-function": "^1.0.1"
+      },
+      "dependencies": {
+        "global": {
+          "version": "4.4.0",
+          "resolved": "https://registry.npmjs.org/global/-/global-4.4.0.tgz",
+          "integrity": "sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==",
+          "dev": true,
+          "requires": {
+            "min-document": "^2.19.0",
+            "process": "^0.11.10"
+          }
+        }
+      }
+    },
    "@webassemblyjs/ast": {
      "version": "1.9.0",
      "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.9.0.tgz",
@ -1018,6 +1085,18 @@
      "integrity": "sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==",
      "dev": true
    },
+    "aes-decrypter": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/aes-decrypter/-/aes-decrypter-3.1.0.tgz",
+      "integrity": "sha512-wL1NFwP2yNrJG4InpXYFhhYe9TfonnDyhyxMq2+K9/qt+SrZzUieOpviN6pkDly7GawTqw5feehk0rn5iYo00g==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "@videojs/vhs-utils": "^2.2.1",
+        "global": "^4.3.2",
+        "pkcs7": "^1.0.4"
+      }
+    },
    "after": {
      "version": "0.8.2",
      "resolved": "https://registry.npmjs.org/after/-/after-0.8.2.tgz",
@ -3905,6 +3984,12 @@
        }
      }
    },
+    "dom-walk": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.2.tgz",
+      "integrity": "sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w==",
+      "dev": true
+    },
    "domain-browser": {
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.2.0.tgz",
@ -5420,6 +5505,24 @@
        "is-glob": "^4.0.1"
      }
    },
+    "global": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/global/-/global-4.3.2.tgz",
+      "integrity": "sha1-52mJJopsdMOJCLEwWxD8DjlOnQ8=",
+      "dev": true,
+      "requires": {
+        "min-document": "^2.19.0",
+        "process": "~0.5.1"
+      },
+      "dependencies": {
+        "process": {
+          "version": "0.5.2",
+          "resolved": "https://registry.npmjs.org/process/-/process-0.5.2.tgz",
+          "integrity": "sha1-FjjYqONML0QKkduVq5rrZ3/Bhc8=",
+          "dev": true
+        }
+      }
+    },
    "global-modules": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/global-modules/-/global-modules-2.0.0.tgz",
@ -6286,6 +6389,12 @@
      "integrity": "sha1-gtwzbSMrkGIXnQWrMpOmYFn9Q10=",
      "dev": true
    },
+    "individual": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/individual/-/individual-2.0.0.tgz",
+      "integrity": "sha1-gzsJfa0jKU52EXqY+zjg2a1hu5c=",
+      "dev": true
+    },
    "infer-owner": {
      "version": "1.0.4",
      "resolved": "https://registry.npmjs.org/infer-owner/-/infer-owner-1.0.4.tgz",
@ -6585,6 +6694,12 @@
      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg=="
    },
+    "is-function": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-function/-/is-function-1.0.2.tgz",
+      "integrity": "sha512-lw7DUp0aWXYg+CBCN+JKkcE0Q2RayZnSvnZBlwgxHBQhqt5pZNVy4Ri7H9GmmXkdu7LUthszM+Tor1u/2iBcpQ==",
+      "dev": true
+    },
    "is-glob": {
      "version": "4.0.1",
      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz",
@ -7342,6 +7457,12 @@
      "resolved": "https://registry.npmjs.org/keycharm/-/keycharm-0.4.0.tgz",
      "integrity": "sha512-TyQTtsabOVv3MeOpR92sIKk/br9wxS+zGj4BG7CR8YbK4jM3tyIBaF0zhzeBUMx36/Q/iQLOKKOT+3jOQtemRQ=="
    },
+    "keycode": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/keycode/-/keycode-2.2.0.tgz",
+      "integrity": "sha1-PQr1bce4uOXLqNCpfxByBO7CKwQ=",
+      "dev": true
+    },
    "killable": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz",
@ -7591,6 +7712,17 @@
        "yallist": "^4.0.0"
      }
    },
+    "m3u8-parser": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/m3u8-parser/-/m3u8-parser-4.5.0.tgz",
+      "integrity": "sha512-RGm/1WVCX3o1bSWbJGmJUu4zTbtJy8lImtgHM4CESFvJRXYztr1j6SW/q9/ghYOrUjgH7radsIar+z1Leln0sA==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "@videojs/vhs-utils": "^2.2.1",
+        "global": "^4.3.2"
+      }
+    },
    "magic-string": {
      "version": "0.25.7",
      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.7.tgz",
@ -7802,6 +7934,15 @@
        "mime-db": "1.44.0"
      }
    },
+    "min-document": {
+      "version": "2.19.0",
+      "resolved": "https://registry.npmjs.org/min-document/-/min-document-2.19.0.tgz",
+      "integrity": "sha1-e9KC4/WELtKVu3SM3Z8f+iyCRoU=",
+      "dev": true,
+      "requires": {
+        "dom-walk": "^0.1.0"
+      }
+    },
    "mini-css-extract-plugin": {
      "version": "1.3.1",
      "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-1.3.1.tgz",
@ -7987,6 +8128,18 @@
        }
      }
    },
+    "mpd-parser": {
+      "version": "0.14.0",
+      "resolved": "https://registry.npmjs.org/mpd-parser/-/mpd-parser-0.14.0.tgz",
+      "integrity": "sha512-HqXQS3WLofcnYFcxv5oWdlciddUaEnN3NasXLVQ793mdnZRrinjz2Yk1DsUYPDYOUWf6ZBBqbFhaJT5LiT2ouA==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "@videojs/vhs-utils": "^2.2.1",
+        "global": "^4.3.2",
+        "xmldom": "^0.1.27"
+      }
+    },
    "ms": {
      "version": "2.1.2",
      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@ -8014,6 +8167,12 @@
      "integrity": "sha1-j7+rsKmKJT0xhDMfno3rc3L6xsA=",
      "dev": true
    },
+    "mux.js": {
+      "version": "5.6.7",
+      "resolved": "https://registry.npmjs.org/mux.js/-/mux.js-5.6.7.tgz",
+      "integrity": "sha512-YSr6B8MUgE4S18MptbY2XM+JKGbw9JDkgs7YkuE/T2fpDKjOhZfb/nD6vmsVxvLYOExWNaQn1UGBp6PGsnTtew==",
+      "dev": true
+    },
    "nan": {
      "version": "2.14.2",
      "resolved": "https://registry.npmjs.org/nan/-/nan-2.14.2.tgz",
@ -8942,6 +9101,15 @@
        "pinkie": "^2.0.0"
      }
    },
+    "pkcs7": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/pkcs7/-/pkcs7-1.0.4.tgz",
+      "integrity": "sha512-afRERtHn54AlwaF2/+LFszyAANTCggGilmcmILUzEjvs3XgFZT+xE6+QWQcAGmu4xajy+Xtj7acLOPdx5/eXWQ==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.5.5"
+      }
+    },
    "pkg-dir": {
      "version": "4.2.0",
      "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
@ -12359,6 +12527,15 @@
        "aproba": "^1.1.1"
      }
    },
+    "rust-result": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/rust-result/-/rust-result-1.0.0.tgz",
+      "integrity": "sha1-NMdbLm3Dn+WHXlveyFteD5FTb3I=",
+      "dev": true,
+      "requires": {
+        "individual": "^2.0.0"
+      }
+    },
    "rx-lite": {
      "version": "3.1.2",
      "resolved": "https://registry.npmjs.org/rx-lite/-/rx-lite-3.1.2.tgz",
@ -12455,6 +12632,15 @@
      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
    },
+    "safe-json-parse": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/safe-json-parse/-/safe-json-parse-4.0.0.tgz",
+      "integrity": "sha1-fA9XjPzNEtM6ccDgVBPi7KFx6qw=",
+      "dev": true,
+      "requires": {
+        "rust-result": "^1.0.0"
+      }
+    },
    "safe-regex": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/safe-regex/-/safe-regex-1.1.0.tgz",
@ -14576,6 +14762,12 @@
        "requires-port": "^1.0.0"
      }
    },
+    "url-toolkit": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/url-toolkit/-/url-toolkit-2.2.1.tgz",
+      "integrity": "sha512-8+DzgrtDZYZGhHaAop5WGVghMdCfOLGbhcArsJD0qDll71FXa7EeKxi2hilPIscn2nwMz4PRjML32Sz4JTN0Xw==",
+      "dev": true
+    },
    "use": {
      "version": "3.1.1",
      "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz",
@ -14682,6 +14874,37 @@
        "extsprintf": "^1.2.0"
      }
    },
+    "video.js": {
+      "version": "7.10.2",
+      "resolved": "https://registry.npmjs.org/video.js/-/video.js-7.10.2.tgz",
+      "integrity": "sha512-kJTTrqcQn2MhPzWR8zQs6W3HPJWpowO/ZGZcKt2dcJeJdJT0dEDLYtiFdjV37SylCmu66V0flRnV8cipbthveQ==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.9.2",
+        "@videojs/http-streaming": "2.2.4",
+        "@videojs/xhr": "2.5.1",
+        "global": "4.3.2",
+        "keycode": "^2.2.0",
+        "safe-json-parse": "4.0.0",
+        "videojs-font": "3.2.0",
+        "videojs-vtt.js": "^0.15.2"
+      }
+    },
+    "videojs-font": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/videojs-font/-/videojs-font-3.2.0.tgz",
+      "integrity": "sha512-g8vHMKK2/JGorSfqAZQUmYYNnXmfec4MLhwtEFS+mMs2IDY398GLysy6BH6K+aS1KMNu/xWZ8Sue/X/mdQPliA==",
+      "dev": true
+    },
+    "videojs-vtt.js": {
+      "version": "0.15.2",
+      "resolved": "https://registry.npmjs.org/videojs-vtt.js/-/videojs-vtt.js-0.15.2.tgz",
+      "integrity": "sha512-kEo4hNMvu+6KhPvVYPKwESruwhHC3oFis133LwhXHO9U7nRnx0RiJYMiqbgwjgazDEXHR6t8oGJiHM6wq5XlAw==",
+      "dev": true,
+      "requires": {
+        "global": "^4.3.1"
+      }
+    },
    "vis-data": {
      "version": "7.1.1",
      "resolved": "https://registry.npmjs.org/vis-data/-/vis-data-7.1.1.tgz",
@ -16309,6 +16532,12 @@
      "integrity": "sha512-OyzrcFLL/nb6fMGHbiRDuPup9ljBycsdCypwuyg5AAHvyWzGfChJpCXMG88AGTIMFhGZ9RccFN1e6lhg3hkwKg==",
      "dev": true
    },
+    "xmldom": {
+      "version": "0.1.31",
+      "resolved": "https://registry.npmjs.org/xmldom/-/xmldom-0.1.31.tgz",
+      "integrity": "sha512-yS2uJflVQs6n+CyjHoaBmVSqIDevTAWrzMmjG1Gc7h1qQ7uVozNhEPJAwZXWyGQ/Gafo3fCwrcaokezLPupVyQ==",
+      "dev": true
+    },
    "xmlhttprequest-ssl": {
      "version": "1.5.5",
      "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-1.5.5.tgz",
--- a/frontend/package.json
+++ b/frontend/package.json
@ -127,6 +127,7 @@
    "typemoq": "2.1.0",
    "typescript": "4.0",
    "underscore": "1.11.0",
+    "video.js": "^7.10.2",
    "webpack": "4.44.2",
    "webpack-bundle-analyzer": "3.9.0",
    "webpack-cli": "3.3.12",