From ab0826b80d19d16b9771783af69d7035e4c40105 Mon Sep 17 00:00:00 2001 From: Sebastian Date: Mon, 4 Jan 2021 18:02:24 +0100 Subject: [PATCH] Load local video.js --- frontend/app-config/webpack.config.js | 29 ++- .../angular/video-player.component.scss | 4 + .../angular/video-player.component.ts | 8 +- .../assets/asset-dialog.component.scss | 1 + frontend/package-lock.json | 229 ++++++++++++++++++ frontend/package.json | 1 + 6 files changed, 255 insertions(+), 17 deletions(-) diff --git a/frontend/app-config/webpack.config.js b/frontend/app-config/webpack.config.js index 4987a78f6..ad3204b85 100644 --- 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' }, ], }), ], diff --git a/frontend/app/framework/angular/video-player.component.scss b/frontend/app/framework/angular/video-player.component.scss index 8f1666fa2..e893319bc 100644 --- a/frontend/app/framework/angular/video-player.component.scss +++ b/frontend/app/framework/angular/video-player.component.scss @@ -10,4 +10,8 @@ $color-video: #000; :host { background: $color-video; +} + +.hidden { + display: none !important; } \ No newline at end of file diff --git a/frontend/app/framework/angular/video-player.component.ts b/frontend/app/framework/angular/video-player.component.ts index c2824bc37..aae187452 100644 --- 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(); }); } diff --git a/frontend/app/shared/components/assets/asset-dialog.component.scss b/frontend/app/shared/components/assets/asset-dialog.component.scss index e41317988..efd3600a9 100644 --- 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; } \ No newline at end of file diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 04d07c070..2383f89b7 100644 --- 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", diff --git a/frontend/package.json b/frontend/package.json index 98fb3b694..dd534cdc7 100644 --- 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",