From a6d7a6f0694eecd7bbf2ba8d9f65767133926931 Mon Sep 17 00:00:00 2001 From: Nathan Date: Thu, 23 Sep 2021 19:43:28 +0200 Subject: [PATCH] test(video-player): Test that video player correcly plays HLS playlist --- e2e/.gitignore | 6 +- e2e/cypress/integration/01-upload.spec.js | 9 +- e2e/cypress/integration/03-playback.spec.js | 14 +- e2e/cypress/integration/04-video.spec.js | 23 + e2e/cypress/utils/constant.js | 1 + e2e/package-lock.json | 399 ++++++++++++++++++ e2e/package.json | 4 +- e2e/src/components/atoms/videoJS/index.tsx | 52 +++ .../organisms/video-player/index.tsx | 83 ++++ e2e/src/components/templates/grid/index.tsx | 2 + e2e/yarn.lock | 170 ++++++++ src/Video.ts | 3 +- 12 files changed, 749 insertions(+), 17 deletions(-) create mode 100644 e2e/cypress/integration/04-video.spec.js create mode 100644 e2e/src/components/atoms/videoJS/index.tsx create mode 100644 e2e/src/components/organisms/video-player/index.tsx diff --git a/e2e/.gitignore b/e2e/.gitignore index 17c11d5..522d6c6 100644 --- a/e2e/.gitignore +++ b/e2e/.gitignore @@ -26,9 +26,7 @@ yarn-error.log* # Cypress cypress.env.json - cypress/videos/**/*.mp4 - cypress/screenshots/**/*.png - -cypress/fixtures/upload-response.json \ No newline at end of file +cypress/fixtures/upload-response.json +cypress/fixtures/playback-url.json \ No newline at end of file diff --git a/e2e/cypress/integration/01-upload.spec.js b/e2e/cypress/integration/01-upload.spec.js index 9aa1e06..94ee9d9 100644 --- a/e2e/cypress/integration/01-upload.spec.js +++ b/e2e/cypress/integration/01-upload.spec.js @@ -5,7 +5,10 @@ describe('File upload', () => { it('Video.upload method', () => { cy.visit('/'); const filepath = 'video/video-sample.mp4'; - cy.get('input[type="file"]').attachFile(filepath); + cy.get('input[type="file"]').attachFile({ + filePath: filepath, + encoding: 'binary', + }); cy.get('[data-cy=submit]').click(); cy.intercept('/graphql', (req) => { @@ -28,7 +31,7 @@ describe('File upload', () => { expect(s3Put.response.statusCode).to.equal(200); cy.wait(1000); cy.get('[data-cy=pre-upload]') - .invoke('html') + .invoke('text') .then((response) => { cy.wrap(response).as('response'); }); @@ -46,7 +49,7 @@ describe('File upload', () => { cy.wait(1000); cy.get('[data-cy=pre-upload]') - .invoke('html') + .invoke('text') .then((content) => { const { data } = JSON.parse(content); expect(data).to.have.ownProperty('createVideoObject'); diff --git a/e2e/cypress/integration/03-playback.spec.js b/e2e/cypress/integration/03-playback.spec.js index 30ed5de..84f56f5 100644 --- a/e2e/cypress/integration/03-playback.spec.js +++ b/e2e/cypress/integration/03-playback.spec.js @@ -1,4 +1,4 @@ -import { RESPONSE_FILE_PATH } from '../utils/constant'; +import { RESPONSE_FILE_PATH, PLAYBACK_URL_FILE_PATH } from '../utils/constant'; import { aliasMutation } from '../utils/graphql-test-utils'; describe('Generate playback url', () => { @@ -19,13 +19,13 @@ describe('Generate playback url', () => { cy.wait('@getVodAsset').then(() => { cy.wait(1000); cy.get('[data-cy=pre-playback]') - .invoke('html') + .invoke('text') .then((content) => { const { data } = JSON.parse(content); expect(data).to.not.equal(null); - expect(data).to.have.ownProperty('playbackUrl') - if (data.token) - expect(data.token).to.include("?Policy=ey") + expect(data).to.have.ownProperty('playbackUrl'); + if (data.token) expect(data.token).to.include('?Policy=ey'); + cy.writeFile(PLAYBACK_URL_FILE_PATH, JSON.parse(content)); }); }); }); @@ -37,14 +37,14 @@ describe('Generate playback url', () => { cy.wait('@getVodAsset').then(() => { cy.wait(1000); cy.get('[data-cy=pre-playback]') - .invoke('html') + .invoke('text') .then((content) => { const { data } = JSON.parse(content); expect(data).to.not.equal(null); expect(data).to.have.ownProperty('playbackUrl'); expect(data).to.have.ownProperty('error'); expect(data.playbackUrl).to.equal(null); - expect(data.error).to.equal("Vod asset video ID not found"); + expect(data.error).to.equal('Vod asset video ID not found'); }); }); }); diff --git a/e2e/cypress/integration/04-video.spec.js b/e2e/cypress/integration/04-video.spec.js new file mode 100644 index 0000000..365297c --- /dev/null +++ b/e2e/cypress/integration/04-video.spec.js @@ -0,0 +1,23 @@ +import { PLAYBACK_URL_FILE_PATH } from '../utils/constant'; +import { aliasMutation } from '../utils/graphql-test-utils'; + +describe('Generate playback url', () => { + beforeEach(() => { + /* cy.intercept('/graphql', (req) => { + aliasMutation(req, 'getVodAsset'); + }); */ + }); + + it('should generate playback url with token property if signed url', () => { + let id = null; + cy.visit('/'); + cy.wait(12000); // WAIT FOR MEDIACONVERT JOB + cy.readFile(PLAYBACK_URL_FILE_PATH).then(({ data }) => { + cy.intercept(data.playbackUrl + data.token).as('HLS'); + cy.get('[data-cy=video-url-input]').type(data.playbackUrl); + cy.get('[data-cy=video-token-input]').type(data.token); + cy.get('[data-cy=player]').click(); + cy.wait('@HLS').its('response.statusCode').should('eq', 200) + }); + }); +}); diff --git a/e2e/cypress/utils/constant.js b/e2e/cypress/utils/constant.js index d48f38e..ff82c0d 100644 --- a/e2e/cypress/utils/constant.js +++ b/e2e/cypress/utils/constant.js @@ -1 +1,2 @@ export const RESPONSE_FILE_PATH = 'cypress/fixtures/upload-response.json'; +export const PLAYBACK_URL_FILE_PATH = 'cypress/fixtures/playback-url.json'; diff --git a/e2e/package-lock.json b/e2e/package-lock.json index 6c94c14..fcf0834 100644 --- a/e2e/package-lock.json +++ b/e2e/package-lock.json @@ -23,9 +23,11 @@ "react-dom": "^17.0.2", "react-scripts": "4.0.3", "typescript": "^4.1.2", + "video.js": "^7.15.4", "web-vitals": "^1.0.1" }, "devDependencies": { + "@types/video.js": "^7.3.26", "aws-amplify": "^4.2.9", "cypress": "^8.4.0", "cypress-file-upload": "^5.0.8", @@ -6283,6 +6285,12 @@ "source-map": "^0.6.1" } }, + "node_modules/@types/video.js": { + "version": "7.3.26", + "resolved": "https://registry.npmjs.org/@types/video.js/-/video.js-7.3.26.tgz", + "integrity": "sha512-RspjR7uqX6+zRXJLQ5NrsPPppxJ/jta2X7U/7E5LZDSztVMy9+AjB1SOWcC3td1JzoEo67f0ns1tZo36zBCUqQ==", + "dev": true + }, "node_modules/@types/webpack": { "version": "4.41.31", "resolved": "https://registry.npmjs.org/@types/webpack/-/webpack-4.41.31.tgz", @@ -6487,6 +6495,52 @@ "url": "https://opencollective.com/typescript-eslint" } }, + "node_modules/@videojs/http-streaming": { + "version": "2.10.2", + "resolved": "https://registry.npmjs.org/@videojs/http-streaming/-/http-streaming-2.10.2.tgz", + "integrity": "sha512-JTAlAUHzj0sTsge2WBh4DWKM2I5BDFEZYOvzxmsK/ySILmI0GRyjAHx9uid68ZECQ2qbEAIRmZW5lWp0R5PeNA==", + "dependencies": { + "@babel/runtime": "^7.12.5", + "@videojs/vhs-utils": "3.0.3", + "aes-decrypter": "3.1.2", + "global": "^4.4.0", + "m3u8-parser": "4.7.0", + "mpd-parser": "0.19.0", + "mux.js": "5.13.0", + "video.js": "^6 || ^7" + }, + "engines": { + "node": ">=8", + "npm": ">=5" + }, + "peerDependencies": { + "video.js": "^6 || ^7" + } + }, + "node_modules/@videojs/vhs-utils": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/@videojs/vhs-utils/-/vhs-utils-3.0.3.tgz", + "integrity": "sha512-bU7daxDHhzcTDbmty1cXjzsTYvx2cBGbA8hG5H2Gvpuk4sdfuvkZtMCwtCqL59p6dsleMPspyaNS+7tWXx2Y0A==", + "dependencies": { + "@babel/runtime": "^7.12.5", + "global": "^4.4.0", + "url-toolkit": "^2.2.1" + }, + "engines": { + "node": ">=8", + "npm": ">=5" + } + }, + "node_modules/@videojs/xhr": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/@videojs/xhr/-/xhr-2.6.0.tgz", + "integrity": "sha512-7J361GiN1tXpm+gd0xz2QWr3xNWBE+rytvo8J3KuggFaLg+U37gZQ2BuPLcnkfGffy2e+ozY70RHC8jt7zjA6Q==", + "dependencies": { + "@babel/runtime": "^7.5.5", + "global": "~4.4.0", + "is-function": "^1.0.1" + } + }, "node_modules/@webassemblyjs/ast": { "version": "1.9.0", "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.9.0.tgz", @@ -6644,6 +6698,14 @@ "@xtuc/long": "4.2.2" } }, + "node_modules/@xmldom/xmldom": { + "version": "0.7.5", + "resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.7.5.tgz", + "integrity": "sha512-V3BIhmY36fXZ1OtVcI9W+FxQqxVLsPKcNjWigIaa81dLC9IolJl5Mt4Cvhmr0flUnjSpTdrbMTSbXqYqV5dT6A==", + "engines": { + "node": ">=10.0.0" + } + }, "node_modules/@xtuc/ieee754": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz", @@ -6750,6 +6812,17 @@ "node": ">=8.9" } }, + "node_modules/aes-decrypter": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/aes-decrypter/-/aes-decrypter-3.1.2.tgz", + "integrity": "sha512-42nRwfQuPRj9R1zqZBdoxnaAmnIFyDi0MNyTVhjdFOd8fifXKKRfwIHIZ6AMn1or4x5WONzjwRTbTWcsIQ0O4A==", + "dependencies": { + "@babel/runtime": "^7.12.5", + "@videojs/vhs-utils": "^3.0.0", + "global": "^4.4.0", + "pkcs7": "^1.0.4" + } + }, "node_modules/agent-base": { "version": "6.0.2", "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz", @@ -10673,6 +10746,11 @@ "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1" } }, + "node_modules/dom-walk": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.2.tgz", + "integrity": "sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w==" + }, "node_modules/domain-browser": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.2.0.tgz", @@ -13315,6 +13393,15 @@ "node": ">= 6" } }, + "node_modules/global": { + "version": "4.4.0", + "resolved": "https://registry.npmjs.org/global/-/global-4.4.0.tgz", + "integrity": "sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==", + "dependencies": { + "min-document": "^2.19.0", + "process": "^0.11.10" + } + }, "node_modules/global-dirs": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/global-dirs/-/global-dirs-3.0.0.tgz", @@ -14274,6 +14361,11 @@ "resolved": "https://registry.npmjs.org/indexes-of/-/indexes-of-1.0.1.tgz", "integrity": "sha1-8w9xbI4r00bHtn0985FVZqfAVgc=" }, + "node_modules/individual": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/individual/-/individual-2.0.0.tgz", + "integrity": "sha1-gzsJfa0jKU52EXqY+zjg2a1hu5c=" + }, "node_modules/infer-owner": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/infer-owner/-/infer-owner-1.0.4.tgz", @@ -14573,6 +14665,11 @@ "node": ">=8" } }, + "node_modules/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==" + }, "node_modules/is-generator-fn": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/is-generator-fn/-/is-generator-fn-2.1.0.tgz", @@ -16707,6 +16804,11 @@ "resolved": "https://registry.npmjs.org/just-extend/-/just-extend-4.2.1.tgz", "integrity": "sha512-g3UB796vUFIY90VIv/WX3L2c8CS2MdWUww3CNrYmqza1Fg0DURc2K/O4YrnklBdQarSJ/y8JnJYDGc+1iumQjg==" }, + "node_modules/keycode": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/keycode/-/keycode-2.2.0.tgz", + "integrity": "sha1-PQr1bce4uOXLqNCpfxByBO7CKwQ=" + }, "node_modules/killable": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz", @@ -17176,6 +17278,16 @@ "lz-string": "bin/bin.js" } }, + "node_modules/m3u8-parser": { + "version": "4.7.0", + "resolved": "https://registry.npmjs.org/m3u8-parser/-/m3u8-parser-4.7.0.tgz", + "integrity": "sha512-48l/OwRyjBm+QhNNigEEcRcgbRvnUjL7rxs597HmW9QSNbyNvt+RcZ9T/d9vxi9A9z7EZrB1POtZYhdRlwYQkQ==", + "dependencies": { + "@babel/runtime": "^7.12.5", + "@videojs/vhs-utils": "^3.0.0", + "global": "^4.4.0" + } + }, "node_modules/magic-string": { "version": "0.25.7", "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.7.tgz", @@ -18019,6 +18131,14 @@ "node": ">=6" } }, + "node_modules/min-document": { + "version": "2.19.0", + "resolved": "https://registry.npmjs.org/min-document/-/min-document-2.19.0.tgz", + "integrity": "sha1-e9KC4/WELtKVu3SM3Z8f+iyCRoU=", + "dependencies": { + "dom-walk": "^0.1.0" + } + }, "node_modules/min-indent": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz", @@ -18247,6 +18367,20 @@ "rimraf": "bin.js" } }, + "node_modules/mpd-parser": { + "version": "0.19.0", + "resolved": "https://registry.npmjs.org/mpd-parser/-/mpd-parser-0.19.0.tgz", + "integrity": "sha512-FDLIXtZMZs99fv5iXNFg94quNFT26tobo0NUgHu7L3XgZvEq1NBarf5yxDFFJ1zzfbcmtj+NRaml6nYIxoPWvw==", + "dependencies": { + "@babel/runtime": "^7.12.5", + "@videojs/vhs-utils": "^3.0.2", + "@xmldom/xmldom": "^0.7.2", + "global": "^4.4.0" + }, + "bin": { + "mpd-to-m3u8-json": "bin/parse.js" + } + }, "node_modules/ms": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", @@ -18269,6 +18403,21 @@ "resolved": "https://registry.npmjs.org/multicast-dns-service-types/-/multicast-dns-service-types-1.1.0.tgz", "integrity": "sha1-iZ8R2WhuXgXLkbNdXw5jt3PPyQE=" }, + "node_modules/mux.js": { + "version": "5.13.0", + "resolved": "https://registry.npmjs.org/mux.js/-/mux.js-5.13.0.tgz", + "integrity": "sha512-PkmnzHcTQjUBEHp3KRPQAFoNkJtKlpCEvsYtXDfDrC+/WqbMuxHvoYfmAbHVAH7Sa/KliPVU0dT1ureO8wilog==", + "dependencies": { + "@babel/runtime": "^7.11.2" + }, + "bin": { + "muxjs-transmux": "bin/transmux.js" + }, + "engines": { + "node": ">=8", + "npm": ">=5" + } + }, "node_modules/nan": { "version": "2.15.0", "resolved": "https://registry.npmjs.org/nan/-/nan-2.15.0.tgz", @@ -19554,6 +19703,17 @@ "node": ">= 6" } }, + "node_modules/pkcs7": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/pkcs7/-/pkcs7-1.0.4.tgz", + "integrity": "sha512-afRERtHn54AlwaF2/+LFszyAANTCggGilmcmILUzEjvs3XgFZT+xE6+QWQcAGmu4xajy+Xtj7acLOPdx5/eXWQ==", + "dependencies": { + "@babel/runtime": "^7.5.5" + }, + "bin": { + "pkcs7": "bin/cli.js" + } + }, "node_modules/pkg-dir": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-3.0.0.tgz", @@ -22814,6 +22974,14 @@ "aproba": "^1.1.1" } }, + "node_modules/rust-result": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/rust-result/-/rust-result-1.0.0.tgz", + "integrity": "sha1-NMdbLm3Dn+WHXlveyFteD5FTb3I=", + "dependencies": { + "individual": "^2.0.0" + } + }, "node_modules/rxjs": { "version": "6.6.7", "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.6.7.tgz", @@ -22845,6 +23013,14 @@ } ] }, + "node_modules/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=", + "dependencies": { + "rust-result": "^1.0.0" + } + }, "node_modules/safe-regex": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/safe-regex/-/safe-regex-1.1.0.tgz", @@ -25759,6 +25935,11 @@ "requires-port": "^1.0.0" } }, + "node_modules/url-toolkit": { + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/url-toolkit/-/url-toolkit-2.2.3.tgz", + "integrity": "sha512-Da75SQoxsZ+2wXS56CZBrj2nukQ4nlGUZUP/dqUBG5E1su5GKThgT94Q00x81eVII7AyS1Pn+CtTTZ4Z0pLUtQ==" + }, "node_modules/url/node_modules/punycode": { "version": "1.3.2", "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.3.2.tgz", @@ -25902,6 +26083,39 @@ "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz", "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=" }, + "node_modules/video.js": { + "version": "7.15.4", + "resolved": "https://registry.npmjs.org/video.js/-/video.js-7.15.4.tgz", + "integrity": "sha512-hghxkgptLUvfkpktB4wxcIVF3VpY/hVsMkrjHSv0jpj1bW9Jplzdt8IgpTm9YhlB1KYAp07syVQeZcBFUBwhkw==", + "dependencies": { + "@babel/runtime": "^7.12.5", + "@videojs/http-streaming": "2.10.2", + "@videojs/vhs-utils": "^3.0.3", + "@videojs/xhr": "2.6.0", + "aes-decrypter": "3.1.2", + "global": "^4.4.0", + "keycode": "^2.2.0", + "m3u8-parser": "4.7.0", + "mpd-parser": "0.19.0", + "mux.js": "5.13.0", + "safe-json-parse": "4.0.0", + "videojs-font": "3.2.0", + "videojs-vtt.js": "^0.15.3" + } + }, + "node_modules/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==" + }, + "node_modules/videojs-vtt.js": { + "version": "0.15.3", + "resolved": "https://registry.npmjs.org/videojs-vtt.js/-/videojs-vtt.js-0.15.3.tgz", + "integrity": "sha512-5FvVsICuMRx6Hd7H/Y9s9GDeEtYcXQWzGMS+sl4UX3t/zoHp3y+isSfIPRochnTH7h+Bh1ILyC639xy9Z6kPag==", + "dependencies": { + "global": "^4.3.1" + } + }, "node_modules/vlq": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/vlq/-/vlq-1.0.1.tgz", @@ -32749,6 +32963,12 @@ "source-map": "^0.6.1" } }, + "@types/video.js": { + "version": "7.3.26", + "resolved": "https://registry.npmjs.org/@types/video.js/-/video.js-7.3.26.tgz", + "integrity": "sha512-RspjR7uqX6+zRXJLQ5NrsPPppxJ/jta2X7U/7E5LZDSztVMy9+AjB1SOWcC3td1JzoEo67f0ns1tZo36zBCUqQ==", + "dev": true + }, "@types/webpack": { "version": "4.41.31", "resolved": "https://registry.npmjs.org/@types/webpack/-/webpack-4.41.31.tgz", @@ -32878,6 +33098,41 @@ "eslint-visitor-keys": "^2.0.0" } }, + "@videojs/http-streaming": { + "version": "2.10.2", + "resolved": "https://registry.npmjs.org/@videojs/http-streaming/-/http-streaming-2.10.2.tgz", + "integrity": "sha512-JTAlAUHzj0sTsge2WBh4DWKM2I5BDFEZYOvzxmsK/ySILmI0GRyjAHx9uid68ZECQ2qbEAIRmZW5lWp0R5PeNA==", + "requires": { + "@babel/runtime": "^7.12.5", + "@videojs/vhs-utils": "3.0.3", + "aes-decrypter": "3.1.2", + "global": "^4.4.0", + "m3u8-parser": "4.7.0", + "mpd-parser": "0.19.0", + "mux.js": "5.13.0", + "video.js": "^6 || ^7" + } + }, + "@videojs/vhs-utils": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/@videojs/vhs-utils/-/vhs-utils-3.0.3.tgz", + "integrity": "sha512-bU7daxDHhzcTDbmty1cXjzsTYvx2cBGbA8hG5H2Gvpuk4sdfuvkZtMCwtCqL59p6dsleMPspyaNS+7tWXx2Y0A==", + "requires": { + "@babel/runtime": "^7.12.5", + "global": "^4.4.0", + "url-toolkit": "^2.2.1" + } + }, + "@videojs/xhr": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/@videojs/xhr/-/xhr-2.6.0.tgz", + "integrity": "sha512-7J361GiN1tXpm+gd0xz2QWr3xNWBE+rytvo8J3KuggFaLg+U37gZQ2BuPLcnkfGffy2e+ozY70RHC8jt7zjA6Q==", + "requires": { + "@babel/runtime": "^7.5.5", + "global": "~4.4.0", + "is-function": "^1.0.1" + } + }, "@webassemblyjs/ast": { "version": "1.9.0", "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.9.0.tgz", @@ -33035,6 +33290,11 @@ "@xtuc/long": "4.2.2" } }, + "@xmldom/xmldom": { + "version": "0.7.5", + "resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.7.5.tgz", + "integrity": "sha512-V3BIhmY36fXZ1OtVcI9W+FxQqxVLsPKcNjWigIaa81dLC9IolJl5Mt4Cvhmr0flUnjSpTdrbMTSbXqYqV5dT6A==" + }, "@xtuc/ieee754": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz", @@ -33118,6 +33378,17 @@ "regex-parser": "^2.2.11" } }, + "aes-decrypter": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/aes-decrypter/-/aes-decrypter-3.1.2.tgz", + "integrity": "sha512-42nRwfQuPRj9R1zqZBdoxnaAmnIFyDi0MNyTVhjdFOd8fifXKKRfwIHIZ6AMn1or4x5WONzjwRTbTWcsIQ0O4A==", + "requires": { + "@babel/runtime": "^7.12.5", + "@videojs/vhs-utils": "^3.0.0", + "global": "^4.4.0", + "pkcs7": "^1.0.4" + } + }, "agent-base": { "version": "6.0.2", "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz", @@ -36299,6 +36570,11 @@ "entities": "^2.0.0" } }, + "dom-walk": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.2.tgz", + "integrity": "sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w==" + }, "domain-browser": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.2.0.tgz", @@ -38298,6 +38574,15 @@ "is-glob": "^4.0.1" } }, + "global": { + "version": "4.4.0", + "resolved": "https://registry.npmjs.org/global/-/global-4.4.0.tgz", + "integrity": "sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==", + "requires": { + "min-document": "^2.19.0", + "process": "^0.11.10" + } + }, "global-dirs": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/global-dirs/-/global-dirs-3.0.0.tgz", @@ -39035,6 +39320,11 @@ "resolved": "https://registry.npmjs.org/indexes-of/-/indexes-of-1.0.1.tgz", "integrity": "sha1-8w9xbI4r00bHtn0985FVZqfAVgc=" }, + "individual": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/individual/-/individual-2.0.0.tgz", + "integrity": "sha1-gzsJfa0jKU52EXqY+zjg2a1hu5c=" + }, "infer-owner": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/infer-owner/-/infer-owner-1.0.4.tgz", @@ -39250,6 +39540,11 @@ "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==" + }, "is-generator-fn": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/is-generator-fn/-/is-generator-fn-2.1.0.tgz", @@ -40978,6 +41273,11 @@ "resolved": "https://registry.npmjs.org/just-extend/-/just-extend-4.2.1.tgz", "integrity": "sha512-g3UB796vUFIY90VIv/WX3L2c8CS2MdWUww3CNrYmqza1Fg0DURc2K/O4YrnklBdQarSJ/y8JnJYDGc+1iumQjg==" }, + "keycode": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/keycode/-/keycode-2.2.0.tgz", + "integrity": "sha1-PQr1bce4uOXLqNCpfxByBO7CKwQ=" + }, "killable": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz", @@ -41358,6 +41658,16 @@ "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.4.4.tgz", "integrity": "sha1-wNjq82BZ9wV5bh40SBHPTEmNOiY=" }, + "m3u8-parser": { + "version": "4.7.0", + "resolved": "https://registry.npmjs.org/m3u8-parser/-/m3u8-parser-4.7.0.tgz", + "integrity": "sha512-48l/OwRyjBm+QhNNigEEcRcgbRvnUjL7rxs597HmW9QSNbyNvt+RcZ9T/d9vxi9A9z7EZrB1POtZYhdRlwYQkQ==", + "requires": { + "@babel/runtime": "^7.12.5", + "@videojs/vhs-utils": "^3.0.0", + "global": "^4.4.0" + } + }, "magic-string": { "version": "0.25.7", "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.7.tgz", @@ -42097,6 +42407,14 @@ "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz", "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==" }, + "min-document": { + "version": "2.19.0", + "resolved": "https://registry.npmjs.org/min-document/-/min-document-2.19.0.tgz", + "integrity": "sha1-e9KC4/WELtKVu3SM3Z8f+iyCRoU=", + "requires": { + "dom-walk": "^0.1.0" + } + }, "min-indent": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz", @@ -42274,6 +42592,17 @@ } } }, + "mpd-parser": { + "version": "0.19.0", + "resolved": "https://registry.npmjs.org/mpd-parser/-/mpd-parser-0.19.0.tgz", + "integrity": "sha512-FDLIXtZMZs99fv5iXNFg94quNFT26tobo0NUgHu7L3XgZvEq1NBarf5yxDFFJ1zzfbcmtj+NRaml6nYIxoPWvw==", + "requires": { + "@babel/runtime": "^7.12.5", + "@videojs/vhs-utils": "^3.0.2", + "@xmldom/xmldom": "^0.7.2", + "global": "^4.4.0" + } + }, "ms": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", @@ -42293,6 +42622,14 @@ "resolved": "https://registry.npmjs.org/multicast-dns-service-types/-/multicast-dns-service-types-1.1.0.tgz", "integrity": "sha1-iZ8R2WhuXgXLkbNdXw5jt3PPyQE=" }, + "mux.js": { + "version": "5.13.0", + "resolved": "https://registry.npmjs.org/mux.js/-/mux.js-5.13.0.tgz", + "integrity": "sha512-PkmnzHcTQjUBEHp3KRPQAFoNkJtKlpCEvsYtXDfDrC+/WqbMuxHvoYfmAbHVAH7Sa/KliPVU0dT1ureO8wilog==", + "requires": { + "@babel/runtime": "^7.11.2" + } + }, "nan": { "version": "2.15.0", "resolved": "https://registry.npmjs.org/nan/-/nan-2.15.0.tgz", @@ -43303,6 +43640,14 @@ "node-modules-regexp": "^1.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==", + "requires": { + "@babel/runtime": "^7.5.5" + } + }, "pkg-dir": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-3.0.0.tgz", @@ -45873,6 +46218,14 @@ "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=", + "requires": { + "individual": "^2.0.0" + } + }, "rxjs": { "version": "6.6.7", "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.6.7.tgz", @@ -45887,6 +46240,14 @@ "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz", "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==" }, + "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=", + "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", @@ -48210,6 +48571,11 @@ "requires-port": "^1.0.0" } }, + "url-toolkit": { + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/url-toolkit/-/url-toolkit-2.2.3.tgz", + "integrity": "sha512-Da75SQoxsZ+2wXS56CZBrj2nukQ4nlGUZUP/dqUBG5E1su5GKThgT94Q00x81eVII7AyS1Pn+CtTTZ4Z0pLUtQ==" + }, "use": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz", @@ -48326,6 +48692,39 @@ } } }, + "video.js": { + "version": "7.15.4", + "resolved": "https://registry.npmjs.org/video.js/-/video.js-7.15.4.tgz", + "integrity": "sha512-hghxkgptLUvfkpktB4wxcIVF3VpY/hVsMkrjHSv0jpj1bW9Jplzdt8IgpTm9YhlB1KYAp07syVQeZcBFUBwhkw==", + "requires": { + "@babel/runtime": "^7.12.5", + "@videojs/http-streaming": "2.10.2", + "@videojs/vhs-utils": "^3.0.3", + "@videojs/xhr": "2.6.0", + "aes-decrypter": "3.1.2", + "global": "^4.4.0", + "keycode": "^2.2.0", + "m3u8-parser": "4.7.0", + "mpd-parser": "0.19.0", + "mux.js": "5.13.0", + "safe-json-parse": "4.0.0", + "videojs-font": "3.2.0", + "videojs-vtt.js": "^0.15.3" + } + }, + "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==" + }, + "videojs-vtt.js": { + "version": "0.15.3", + "resolved": "https://registry.npmjs.org/videojs-vtt.js/-/videojs-vtt.js-0.15.3.tgz", + "integrity": "sha512-5FvVsICuMRx6Hd7H/Y9s9GDeEtYcXQWzGMS+sl4UX3t/zoHp3y+isSfIPRochnTH7h+Bh1ILyC639xy9Z6kPag==", + "requires": { + "global": "^4.3.1" + } + }, "vlq": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/vlq/-/vlq-1.0.1.tgz", diff --git a/e2e/package.json b/e2e/package.json index 73f0595..a36198c 100644 --- a/e2e/package.json +++ b/e2e/package.json @@ -18,6 +18,7 @@ "react-dom": "^17.0.2", "react-scripts": "4.0.3", "typescript": "^4.1.2", + "video.js": "^7.15.4", "web-vitals": "^1.0.1" }, "scripts": { @@ -28,7 +29,7 @@ "build": "SKIP_PREFLIGHT_CHECK=true react-scripts build", "test": "start-server-and-test start:server http://localhost:3000 cy:run", "eject": "SKIP_PREFLIGHT_CHECK=true react-scripts eject", - "cy:open": "npx cypress open", + "cy:open": "npx cypress open", "cy:run": "cypress run" }, "eslintConfig": { @@ -50,6 +51,7 @@ ] }, "devDependencies": { + "@types/video.js": "^7.3.26", "aws-amplify": "^4.2.9", "cypress": "^8.4.0", "cypress-file-upload": "^5.0.8", diff --git a/e2e/src/components/atoms/videoJS/index.tsx b/e2e/src/components/atoms/videoJS/index.tsx new file mode 100644 index 0000000..dd9470f --- /dev/null +++ b/e2e/src/components/atoms/videoJS/index.tsx @@ -0,0 +1,52 @@ +import React, { MutableRefObject } from 'react'; +import videojs, { VideoJsPlayer } from 'video.js'; +import 'video.js/dist/video-js.css'; + +export const VideoJS = (props: any) => { + const videoRef = React.useRef() as MutableRefObject; + const playerRef = React.useRef() as MutableRefObject; + const { options, onReady } = props; + + React.useEffect(() => { + // make sure Video.js player is only initialized once + if (!playerRef.current) { + const videoElement = videoRef.current; + if (!videoElement) return; + + const player: any = (playerRef.current = videojs( + videoElement, + options, + () => { + console.log('player is ready'); + onReady && onReady(player); + }, + )); + } else { + // @ts-ignore + videojs.Vhs.xhr.beforeRequest = (reqOptions: any) => { + reqOptions.uri = `${reqOptions.uri}${options.token}`; + return reqOptions; + }; + const player: any = playerRef.current; + player.src(options.sources); + } + }, [options]); + + // Dispose the Video.js player when the functional component unmounts + React.useEffect(() => { + return () => { + if (playerRef.current) { + playerRef.current.dispose(); + playerRef.current = null; + } + }; + }, []); + + return ( +
+
+ ); +}; + +export default VideoJS; diff --git a/e2e/src/components/organisms/video-player/index.tsx b/e2e/src/components/organisms/video-player/index.tsx new file mode 100644 index 0000000..b25eaa9 --- /dev/null +++ b/e2e/src/components/organisms/video-player/index.tsx @@ -0,0 +1,83 @@ +import React, { + MouseEventHandler, + MutableRefObject, + ReactNode, + useState, +} from 'react'; +import VideoJS from 'components/atoms/videoJS'; +import Block from 'components/molecules/block'; +import Input from 'components/atoms/input'; + +interface Props { + children?: ReactNode; + className?: string; + title: string; + button?: string; + onClick?: MouseEventHandler; + callback?: any; +} + +const VideoPlayer = (props: Props) => { + const playerRef = React.useRef(null); + const urlInputRef = React.useRef() as MutableRefObject; + const tokenInputRef = React.useRef() as MutableRefObject; + const [videoJsOptions, setVideoJsOptions] = useState({ + autoplay: true, + controls: true, + responsive: true, + fluid: true, + }); + + const handleSubmit = async () => { + if (!urlInputRef.current.value || !tokenInputRef.current.value) return; + setVideoJsOptions({ + ...videoJsOptions, + token: tokenInputRef.current.value, + sources: [ + { + src: `${urlInputRef.current.value}`, + type: 'application/x-mpegURL', + }, + ], + }); + }; + + const handlePlayerReady = (player: any) => { + playerRef.current = player; + // you can handle player events here + player.on('waiting', () => { + console.log('player is waiting'); + }); + + player.on('dispose', () => { + console.log('player will dispose'); + }); + }; + + return ( + await handleSubmit()} + > + +

+ + +

+

+ + +

+ {props.children} + + ); +}; + +export default VideoPlayer; diff --git a/e2e/src/components/templates/grid/index.tsx b/e2e/src/components/templates/grid/index.tsx index c1e1bcf..b1dbd35 100644 --- a/e2e/src/components/templates/grid/index.tsx +++ b/e2e/src/components/templates/grid/index.tsx @@ -7,6 +7,7 @@ import UpdateMetadata from 'components/organisms/update-metadata'; import PlaybackUrl from 'components/organisms/generate-playback-url'; import './style.scss'; +import VideoPlayer from 'components/organisms/video-player'; const Grid = () => { const [result, setResult] = useState(null); @@ -79,6 +80,7 @@ const Grid = () => { : null} + ); }; diff --git a/e2e/yarn.lock b/e2e/yarn.lock index 1187161..da74500 100644 --- a/e2e/yarn.lock +++ b/e2e/yarn.lock @@ -3605,6 +3605,11 @@ dependencies: "source-map" "^0.6.1" +"@types/video.js@^7.3.26": + "integrity" "sha512-RspjR7uqX6+zRXJLQ5NrsPPppxJ/jta2X7U/7E5LZDSztVMy9+AjB1SOWcC3td1JzoEo67f0ns1tZo36zBCUqQ==" + "resolved" "https://registry.npmjs.org/@types/video.js/-/video.js-7.3.26.tgz" + "version" "7.3.26" + "@types/webpack-sources@*": "integrity" "sha512-Ft7YH3lEVRQ6ls8k4Ff1oB4jN6oy/XmU6tQISKdhfh+1mR+viZFphS6WL0IrtDOzvefmJg5a0s7ZQoRXwqTEFg==" "resolved" "https://registry.npmjs.org/@types/webpack-sources/-/webpack-sources-3.2.0.tgz" @@ -3758,6 +3763,38 @@ "@typescript-eslint/types" "4.31.1" "eslint-visitor-keys" "^2.0.0" +"@videojs/http-streaming@2.10.2": + "integrity" "sha512-JTAlAUHzj0sTsge2WBh4DWKM2I5BDFEZYOvzxmsK/ySILmI0GRyjAHx9uid68ZECQ2qbEAIRmZW5lWp0R5PeNA==" + "resolved" "https://registry.npmjs.org/@videojs/http-streaming/-/http-streaming-2.10.2.tgz" + "version" "2.10.2" + dependencies: + "@babel/runtime" "^7.12.5" + "@videojs/vhs-utils" "3.0.3" + "aes-decrypter" "3.1.2" + "global" "^4.4.0" + "m3u8-parser" "4.7.0" + "mpd-parser" "0.19.0" + "mux.js" "5.13.0" + "video.js" "^6 || ^7" + +"@videojs/vhs-utils@^3.0.0", "@videojs/vhs-utils@^3.0.2", "@videojs/vhs-utils@^3.0.3", "@videojs/vhs-utils@3.0.3": + "integrity" "sha512-bU7daxDHhzcTDbmty1cXjzsTYvx2cBGbA8hG5H2Gvpuk4sdfuvkZtMCwtCqL59p6dsleMPspyaNS+7tWXx2Y0A==" + "resolved" "https://registry.npmjs.org/@videojs/vhs-utils/-/vhs-utils-3.0.3.tgz" + "version" "3.0.3" + dependencies: + "@babel/runtime" "^7.12.5" + "global" "^4.4.0" + "url-toolkit" "^2.2.1" + +"@videojs/xhr@2.6.0": + "integrity" "sha512-7J361GiN1tXpm+gd0xz2QWr3xNWBE+rytvo8J3KuggFaLg+U37gZQ2BuPLcnkfGffy2e+ozY70RHC8jt7zjA6Q==" + "resolved" "https://registry.npmjs.org/@videojs/xhr/-/xhr-2.6.0.tgz" + "version" "2.6.0" + dependencies: + "@babel/runtime" "^7.5.5" + "global" "~4.4.0" + "is-function" "^1.0.1" + "@webassemblyjs/ast@1.9.0": "integrity" "sha512-C6wW5L+b7ogSDVqymbkkvuW9kruN//YisMED04xzeBBqjHa2FYnmvOlS6Xj68xWQRgWvI9cIglsjFowH/RJyEA==" "resolved" "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.9.0.tgz" @@ -3903,6 +3940,11 @@ "@webassemblyjs/wast-parser" "1.9.0" "@xtuc/long" "4.2.2" +"@xmldom/xmldom@^0.7.2": + "integrity" "sha512-V3BIhmY36fXZ1OtVcI9W+FxQqxVLsPKcNjWigIaa81dLC9IolJl5Mt4Cvhmr0flUnjSpTdrbMTSbXqYqV5dT6A==" + "resolved" "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.7.5.tgz" + "version" "0.7.5" + "@xtuc/ieee754@^1.2.0": "integrity" "sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==" "resolved" "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz" @@ -3989,6 +4031,16 @@ "loader-utils" "^2.0.0" "regex-parser" "^2.2.11" +"aes-decrypter@3.1.2": + "integrity" "sha512-42nRwfQuPRj9R1zqZBdoxnaAmnIFyDi0MNyTVhjdFOd8fifXKKRfwIHIZ6AMn1or4x5WONzjwRTbTWcsIQ0O4A==" + "resolved" "https://registry.npmjs.org/aes-decrypter/-/aes-decrypter-3.1.2.tgz" + "version" "3.1.2" + dependencies: + "@babel/runtime" "^7.12.5" + "@videojs/vhs-utils" "^3.0.0" + "global" "^4.4.0" + "pkcs7" "^1.0.4" + "agent-base@6": "integrity" "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==" "resolved" "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz" @@ -6567,6 +6619,11 @@ "domelementtype" "^2.0.1" "entities" "^2.0.0" +"dom-walk@^0.1.0": + "integrity" "sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w==" + "resolved" "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.2.tgz" + "version" "0.1.2" + "domain-browser@^1.1.1": "integrity" "sha512-jnjyiM6eRyZl2H+W8Q/zLMA481hzi0eszAaBUzIVnmYVDBbnLxVNnfu1HgEBvCbL+71FrxMl3E6lpKH7Ge3OXA==" "resolved" "https://registry.npmjs.org/domain-browser/-/domain-browser-1.2.0.tgz" @@ -7913,6 +7970,14 @@ "kind-of" "^6.0.2" "which" "^1.3.1" +"global@^4.3.1", "global@^4.4.0", "global@~4.4.0": + "integrity" "sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==" + "resolved" "https://registry.npmjs.org/global/-/global-4.4.0.tgz" + "version" "4.4.0" + dependencies: + "min-document" "^2.19.0" + "process" "^0.11.10" + "globals@^11.1.0": "integrity" "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==" "resolved" "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz" @@ -8491,6 +8556,11 @@ "resolved" "https://registry.npmjs.org/indexes-of/-/indexes-of-1.0.1.tgz" "version" "1.0.1" +"individual@^2.0.0": + "integrity" "sha1-gzsJfa0jKU52EXqY+zjg2a1hu5c=" + "resolved" "https://registry.npmjs.org/individual/-/individual-2.0.0.tgz" + "version" "2.0.0" + "infer-owner@^1.0.3", "infer-owner@^1.0.4": "integrity" "sha512-IClj+Xz94+d7irH5qRyfJonOdfTzuDaifE6ZPWfx0N0+/ATZCbuTPq2prFl526urkQd90WyUKIh1DfBQ2hMz9A==" "resolved" "https://registry.npmjs.org/infer-owner/-/infer-owner-1.0.4.tgz" @@ -8770,6 +8840,11 @@ "resolved" "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz" "version" "3.0.0" +"is-function@^1.0.1": + "integrity" "sha512-lw7DUp0aWXYg+CBCN+JKkcE0Q2RayZnSvnZBlwgxHBQhqt5pZNVy4Ri7H9GmmXkdu7LUthszM+Tor1u/2iBcpQ==" + "resolved" "https://registry.npmjs.org/is-function/-/is-function-1.0.2.tgz" + "version" "1.0.2" + "is-generator-fn@^2.0.0": "integrity" "sha512-cTIB4yPYL/Grw0EaSzASzg6bBy9gqCofvWN8okThAYIxKJZC+udlRAmGbM0XLeniEJSs8uEgHPGuHSe1XsOLSQ==" "resolved" "https://registry.npmjs.org/is-generator-fn/-/is-generator-fn-2.1.0.tgz" @@ -9681,6 +9756,11 @@ "resolved" "https://registry.npmjs.org/just-extend/-/just-extend-4.2.1.tgz" "version" "4.2.1" +"keycode@^2.2.0": + "integrity" "sha1-PQr1bce4uOXLqNCpfxByBO7CKwQ=" + "resolved" "https://registry.npmjs.org/keycode/-/keycode-2.2.0.tgz" + "version" "2.2.0" + "killable@^1.0.1": "integrity" "sha512-LzqtLKlUwirEUyl/nicirVmNiPvYs7l5n8wOPP7fyJVpUPkvCnW/vuiXGpylGUlnPDnB7311rARzAt3Mhswpjg==" "resolved" "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz" @@ -10030,6 +10110,15 @@ "resolved" "https://registry.npmjs.org/lz-string/-/lz-string-1.4.4.tgz" "version" "1.4.4" +"m3u8-parser@4.7.0": + "integrity" "sha512-48l/OwRyjBm+QhNNigEEcRcgbRvnUjL7rxs597HmW9QSNbyNvt+RcZ9T/d9vxi9A9z7EZrB1POtZYhdRlwYQkQ==" + "resolved" "https://registry.npmjs.org/m3u8-parser/-/m3u8-parser-4.7.0.tgz" + "version" "4.7.0" + dependencies: + "@babel/runtime" "^7.12.5" + "@videojs/vhs-utils" "^3.0.0" + "global" "^4.4.0" + "magic-string@^0.25.0", "magic-string@^0.25.7": "integrity" "sha512-4CrMT5DOHTDk4HYDlzmwu4FVCcIYI8gauveasrdCu2IKIFOJ3f0v/8MDGJCDL9oD2ppz/Av1b0Nj345H9M+XIA==" "resolved" "https://registry.npmjs.org/magic-string/-/magic-string-0.25.7.tgz" @@ -10509,6 +10598,13 @@ "resolved" "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz" "version" "2.1.0" +"min-document@^2.19.0": + "integrity" "sha1-e9KC4/WELtKVu3SM3Z8f+iyCRoU=" + "resolved" "https://registry.npmjs.org/min-document/-/min-document-2.19.0.tgz" + "version" "2.19.0" + dependencies: + "dom-walk" "^0.1.0" + "min-indent@^1.0.0": "integrity" "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==" "resolved" "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz" @@ -10644,6 +10740,16 @@ "rimraf" "^2.5.4" "run-queue" "^1.0.3" +"mpd-parser@0.19.0": + "integrity" "sha512-FDLIXtZMZs99fv5iXNFg94quNFT26tobo0NUgHu7L3XgZvEq1NBarf5yxDFFJ1zzfbcmtj+NRaml6nYIxoPWvw==" + "resolved" "https://registry.npmjs.org/mpd-parser/-/mpd-parser-0.19.0.tgz" + "version" "0.19.0" + dependencies: + "@babel/runtime" "^7.12.5" + "@videojs/vhs-utils" "^3.0.2" + "@xmldom/xmldom" "^0.7.2" + "global" "^4.4.0" + "ms@^2.1.1", "ms@2.1.2": "integrity" "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==" "resolved" "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz" @@ -10672,6 +10778,13 @@ "dns-packet" "^1.3.1" "thunky" "^1.0.2" +"mux.js@5.13.0": + "integrity" "sha512-PkmnzHcTQjUBEHp3KRPQAFoNkJtKlpCEvsYtXDfDrC+/WqbMuxHvoYfmAbHVAH7Sa/KliPVU0dT1ureO8wilog==" + "resolved" "https://registry.npmjs.org/mux.js/-/mux.js-5.13.0.tgz" + "version" "5.13.0" + dependencies: + "@babel/runtime" "^7.11.2" + "nan@^2.12.1", "nan@^2.13.2": "integrity" "sha512-8ZtvEnA2c5aYCZYd1cvgdnU6cqwixRoYg70xPLWUws5ORTa/lnw+u4amixRS/Ac5U5mQVgp9pnlSUnbNWFaWZQ==" "resolved" "https://registry.npmjs.org/nan/-/nan-2.15.0.tgz" @@ -11532,6 +11645,13 @@ dependencies: "node-modules-regexp" "^1.0.0" +"pkcs7@^1.0.4": + "integrity" "sha512-afRERtHn54AlwaF2/+LFszyAANTCggGilmcmILUzEjvs3XgFZT+xE6+QWQcAGmu4xajy+Xtj7acLOPdx5/eXWQ==" + "resolved" "https://registry.npmjs.org/pkcs7/-/pkcs7-1.0.4.tgz" + "version" "1.0.4" + dependencies: + "@babel/runtime" "^7.5.5" + "pkg-dir@^2.0.0": "integrity" "sha1-9tXREJ4Z1j7fQo4L1X4Sd3YVM0s=" "resolved" "https://registry.npmjs.org/pkg-dir/-/pkg-dir-2.0.0.tgz" @@ -13263,6 +13383,13 @@ dependencies: "aproba" "^1.1.1" +"rust-result@^1.0.0": + "integrity" "sha1-NMdbLm3Dn+WHXlveyFteD5FTb3I=" + "resolved" "https://registry.npmjs.org/rust-result/-/rust-result-1.0.0.tgz" + "version" "1.0.0" + dependencies: + "individual" "^2.0.0" + "rxjs@^6.6.7": "integrity" "sha512-hTdwr+7yYNIT5n4AMYp85KA6yw2Va0FLa3Rguvbpa4W3I5xynaBZo41cM3XM+4Q6fRMj3sBYIR1VAmZMXYJvRQ==" "resolved" "https://registry.npmjs.org/rxjs/-/rxjs-6.6.7.tgz" @@ -13297,6 +13424,13 @@ "resolved" "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz" "version" "5.1.2" +"safe-json-parse@4.0.0": + "integrity" "sha1-fA9XjPzNEtM6ccDgVBPi7KFx6qw=" + "resolved" "https://registry.npmjs.org/safe-json-parse/-/safe-json-parse-4.0.0.tgz" + "version" "4.0.0" + dependencies: + "rust-result" "^1.0.0" + "safe-regex@^1.1.0": "integrity" "sha1-QKNmnzsHfR6UPURinhV91IAjvy4=" "resolved" "https://registry.npmjs.org/safe-regex/-/safe-regex-1.1.0.tgz" @@ -14927,6 +15061,11 @@ "querystringify" "^2.1.1" "requires-port" "^1.0.0" +"url-toolkit@^2.2.1": + "integrity" "sha512-Da75SQoxsZ+2wXS56CZBrj2nukQ4nlGUZUP/dqUBG5E1su5GKThgT94Q00x81eVII7AyS1Pn+CtTTZ4Z0pLUtQ==" + "resolved" "https://registry.npmjs.org/url-toolkit/-/url-toolkit-2.2.3.tgz" + "version" "2.2.3" + "url@^0.11.0": "integrity" "sha1-ODjpfPxgUh63PFJajlW/3Z4uKPE=" "resolved" "https://registry.npmjs.org/url/-/url-0.11.0.tgz" @@ -15055,6 +15194,37 @@ "core-util-is" "1.0.2" "extsprintf" "^1.2.0" +"video.js@^6 || ^7", "video.js@^7.15.4": + "integrity" "sha512-hghxkgptLUvfkpktB4wxcIVF3VpY/hVsMkrjHSv0jpj1bW9Jplzdt8IgpTm9YhlB1KYAp07syVQeZcBFUBwhkw==" + "resolved" "https://registry.npmjs.org/video.js/-/video.js-7.15.4.tgz" + "version" "7.15.4" + dependencies: + "@babel/runtime" "^7.12.5" + "@videojs/http-streaming" "2.10.2" + "@videojs/vhs-utils" "^3.0.3" + "@videojs/xhr" "2.6.0" + "aes-decrypter" "3.1.2" + "global" "^4.4.0" + "keycode" "^2.2.0" + "m3u8-parser" "4.7.0" + "mpd-parser" "0.19.0" + "mux.js" "5.13.0" + "safe-json-parse" "4.0.0" + "videojs-font" "3.2.0" + "videojs-vtt.js" "^0.15.3" + +"videojs-font@3.2.0": + "integrity" "sha512-g8vHMKK2/JGorSfqAZQUmYYNnXmfec4MLhwtEFS+mMs2IDY398GLysy6BH6K+aS1KMNu/xWZ8Sue/X/mdQPliA==" + "resolved" "https://registry.npmjs.org/videojs-font/-/videojs-font-3.2.0.tgz" + "version" "3.2.0" + +"videojs-vtt.js@^0.15.3": + "integrity" "sha512-5FvVsICuMRx6Hd7H/Y9s9GDeEtYcXQWzGMS+sl4UX3t/zoHp3y+isSfIPRochnTH7h+Bh1ILyC639xy9Z6kPag==" + "resolved" "https://registry.npmjs.org/videojs-vtt.js/-/videojs-vtt.js-0.15.3.tgz" + "version" "0.15.3" + dependencies: + "global" "^4.3.1" + "vlq@^1.0.0": "integrity" "sha512-gQpnTgkubC6hQgdIcRdYGDSDc+SaujOdyesZQMv6JlfQee/9Mp0Qhnys6WxDWvQnL5WZdT7o2Ul187aSt0Rq+w==" "resolved" "https://registry.npmjs.org/vlq/-/vlq-1.0.1.tgz" diff --git a/src/Video.ts b/src/Video.ts index 2b250f8..65e3c81 100644 --- a/src/Video.ts +++ b/src/Video.ts @@ -59,7 +59,6 @@ export default class VideoClass extends VideoBase { }), await this.storage.put(params), ]); - console.log('responses', responses); const { createVideoObject } = responses[0].data; const { createVodAsset } = responses[1].data; const { key } = responses[2]; @@ -131,7 +130,7 @@ export default class VideoClass extends VideoBase { mutation: this.queries.getVodAsset, input: { id: vodAssetVideoId }, }); - if (!vodAssetResponse.getVodAsset) + if (!vodAssetResponse.data.getVodAsset) throw new NotFoundException('Vod asset video ID not found'); return vodAssetResponse; }