From 742bd3ebc08b244ae2f4035e98c3703a2300fad8 Mon Sep 17 00:00:00 2001 From: Harpreet Singh Date: Wed, 14 Feb 2024 18:19:37 +0100 Subject: [PATCH] Improvements: VideoPlayer added quality btn,skipbtns +15 -15 --- package.json | 1 + pnpm-lock.yaml | 272 +----------------- src/app/globals.css | 7 + src/components/QualitySelectorControllBar.ts | 71 +++++ src/components/VideoPlayer2.tsx | 17 ++ .../admin/ContentRendererClient.tsx | 4 +- 6 files changed, 111 insertions(+), 261 deletions(-) create mode 100644 src/components/QualitySelectorControllBar.ts diff --git a/package.json b/package.json index 2d52182c..7b7a199e 100644 --- a/package.json +++ b/package.json @@ -51,6 +51,7 @@ "video.js": "^8.6.1", "videojs-contrib-eme": "^3.11.1", "videojs-mobile-ui": "^1.1.1", + "videojs-seek-buttons": "^4.0.3", "videojs-sprite-thumbnails": "^2.1.1", "zod": "^3.22.4" }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ec207e12..66e4db65 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -95,9 +95,6 @@ dependencies: recoil: specifier: ^0.7.7 version: 0.7.7(react-dom@18.2.0)(react@18.2.0) - sharp: - specifier: ^0.33.2 - version: 0.33.2 sonner: specifier: ^1.4.0 version: 1.4.0(react-dom@18.2.0)(react@18.2.0) @@ -119,6 +116,9 @@ dependencies: videojs-mobile-ui: specifier: ^1.1.1 version: 1.1.1(video.js@8.10.0) + videojs-seek-buttons: + specifier: ^4.0.3 + version: 4.0.3(video.js@8.10.0) videojs-sprite-thumbnails: specifier: ^2.1.1 version: 2.2.1 @@ -375,14 +375,6 @@ packages: - utf-8-validate dev: false - /@emnapi/runtime@0.45.0: - resolution: {integrity: sha512-Txumi3td7J4A/xTTwlssKieHKTGl3j4A1tglBx72auZ49YK7ePY6XZricgIg9mnZT4xPfA+UPCUdnhRuEFDL+w==} - requiresBuild: true - dependencies: - tslib: 2.6.2 - dev: false - optional: true - /@eslint-community/eslint-utils@4.4.0(eslint@8.56.0): resolution: {integrity: sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} @@ -477,194 +469,6 @@ packages: resolution: {integrity: sha512-6EwiSjwWYP7pTckG6I5eyFANjPhmPjUX9JRLUSfNPC7FX7zK9gyZAfUEaECL6ALTpGX5AjnBq3C9XmVWPitNpw==} dev: true - /@img/sharp-darwin-arm64@0.33.2: - resolution: {integrity: sha512-itHBs1rPmsmGF9p4qRe++CzCgd+kFYktnsoR1sbIAfsRMrJZau0Tt1AH9KVnufc2/tU02Gf6Ibujx+15qRE03w==} - engines: {glibc: '>=2.26', node: ^18.17.0 || ^20.3.0 || >=21.0.0, npm: '>=9.6.5', pnpm: '>=7.1.0', yarn: '>=3.2.0'} - cpu: [arm64] - os: [darwin] - requiresBuild: true - optionalDependencies: - '@img/sharp-libvips-darwin-arm64': 1.0.1 - dev: false - optional: true - - /@img/sharp-darwin-x64@0.33.2: - resolution: {integrity: sha512-/rK/69Rrp9x5kaWBjVN07KixZanRr+W1OiyKdXcbjQD6KbW+obaTeBBtLUAtbBsnlTTmWthw99xqoOS7SsySDg==} - engines: {glibc: '>=2.26', node: ^18.17.0 || ^20.3.0 || >=21.0.0, npm: '>=9.6.5', pnpm: '>=7.1.0', yarn: '>=3.2.0'} - cpu: [x64] - os: [darwin] - requiresBuild: true - optionalDependencies: - '@img/sharp-libvips-darwin-x64': 1.0.1 - dev: false - optional: true - - /@img/sharp-libvips-darwin-arm64@1.0.1: - resolution: {integrity: sha512-kQyrSNd6lmBV7O0BUiyu/OEw9yeNGFbQhbxswS1i6rMDwBBSX+e+rPzu3S+MwAiGU3HdLze3PanQ4Xkfemgzcw==} - engines: {macos: '>=11', npm: '>=9.6.5', pnpm: '>=7.1.0', yarn: '>=3.2.0'} - cpu: [arm64] - os: [darwin] - requiresBuild: true - dev: false - optional: true - - /@img/sharp-libvips-darwin-x64@1.0.1: - resolution: {integrity: sha512-eVU/JYLPVjhhrd8Tk6gosl5pVlvsqiFlt50wotCvdkFGf+mDNBJxMh+bvav+Wt3EBnNZWq8Sp2I7XfSjm8siog==} - engines: {macos: '>=10.13', npm: '>=9.6.5', pnpm: '>=7.1.0', yarn: '>=3.2.0'} - cpu: [x64] - os: [darwin] - requiresBuild: true - dev: false - optional: true - - /@img/sharp-libvips-linux-arm64@1.0.1: - resolution: {integrity: sha512-bnGG+MJjdX70mAQcSLxgeJco11G+MxTz+ebxlz8Y3dxyeb3Nkl7LgLI0mXupoO+u1wRNx/iRj5yHtzA4sde1yA==} - engines: {glibc: '>=2.26', npm: '>=9.6.5', pnpm: '>=7.1.0', yarn: '>=3.2.0'} - cpu: [arm64] - os: [linux] - requiresBuild: true - dev: false - optional: true - - /@img/sharp-libvips-linux-arm@1.0.1: - resolution: {integrity: sha512-FtdMvR4R99FTsD53IA3LxYGghQ82t3yt0ZQ93WMZ2xV3dqrb0E8zq4VHaTOuLEAuA83oDawHV3fd+BsAPadHIQ==} - engines: {glibc: '>=2.28', npm: '>=9.6.5', pnpm: '>=7.1.0', yarn: '>=3.2.0'} - cpu: [arm] - os: [linux] - requiresBuild: true - dev: false - optional: true - - /@img/sharp-libvips-linux-s390x@1.0.1: - resolution: {integrity: sha512-3+rzfAR1YpMOeA2zZNp+aYEzGNWK4zF3+sdMxuCS3ey9HhDbJ66w6hDSHDMoap32DueFwhhs3vwooAB2MaK4XQ==} - engines: {glibc: '>=2.28', npm: '>=9.6.5', pnpm: '>=7.1.0', yarn: '>=3.2.0'} - cpu: [s390x] - os: [linux] - requiresBuild: true - dev: false - optional: true - - /@img/sharp-libvips-linux-x64@1.0.1: - resolution: {integrity: sha512-3NR1mxFsaSgMMzz1bAnnKbSAI+lHXVTqAHgc1bgzjHuXjo4hlscpUxc0vFSAPKI3yuzdzcZOkq7nDPrP2F8Jgw==} - engines: {glibc: '>=2.26', npm: '>=9.6.5', pnpm: '>=7.1.0', yarn: '>=3.2.0'} - cpu: [x64] - os: [linux] - requiresBuild: true - dev: false - optional: true - - /@img/sharp-libvips-linuxmusl-arm64@1.0.1: - resolution: {integrity: sha512-5aBRcjHDG/T6jwC3Edl3lP8nl9U2Yo8+oTl5drd1dh9Z1EBfzUKAJFUDTDisDjUwc7N4AjnPGfCA3jl3hY8uDg==} - engines: {musl: '>=1.2.2', npm: '>=9.6.5', pnpm: '>=7.1.0', yarn: '>=3.2.0'} - cpu: [arm64] - os: [linux] - requiresBuild: true - dev: false - optional: true - - /@img/sharp-libvips-linuxmusl-x64@1.0.1: - resolution: {integrity: sha512-dcT7inI9DBFK6ovfeWRe3hG30h51cBAP5JXlZfx6pzc/Mnf9HFCQDLtYf4MCBjxaaTfjCCjkBxcy3XzOAo5txw==} - engines: {musl: '>=1.2.2', npm: '>=9.6.5', pnpm: '>=7.1.0', yarn: '>=3.2.0'} - cpu: [x64] - os: [linux] - requiresBuild: true - dev: false - optional: true - - /@img/sharp-linux-arm64@0.33.2: - resolution: {integrity: sha512-pz0NNo882vVfqJ0yNInuG9YH71smP4gRSdeL09ukC2YLE6ZyZePAlWKEHgAzJGTiOh8Qkaov6mMIMlEhmLdKew==} - engines: {glibc: '>=2.26', node: ^18.17.0 || ^20.3.0 || >=21.0.0, npm: '>=9.6.5', pnpm: '>=7.1.0', yarn: '>=3.2.0'} - cpu: [arm64] - os: [linux] - requiresBuild: true - optionalDependencies: - '@img/sharp-libvips-linux-arm64': 1.0.1 - dev: false - optional: true - - /@img/sharp-linux-arm@0.33.2: - resolution: {integrity: sha512-Fndk/4Zq3vAc4G/qyfXASbS3HBZbKrlnKZLEJzPLrXoJuipFNNwTes71+Ki1hwYW5lch26niRYoZFAtZVf3EGA==} - engines: {glibc: '>=2.28', node: ^18.17.0 || ^20.3.0 || >=21.0.0, npm: '>=9.6.5', pnpm: '>=7.1.0', yarn: '>=3.2.0'} - cpu: [arm] - os: [linux] - requiresBuild: true - optionalDependencies: - '@img/sharp-libvips-linux-arm': 1.0.1 - dev: false - optional: true - - /@img/sharp-linux-s390x@0.33.2: - resolution: {integrity: sha512-MBoInDXDppMfhSzbMmOQtGfloVAflS2rP1qPcUIiITMi36Mm5YR7r0ASND99razjQUpHTzjrU1flO76hKvP5RA==} - engines: {glibc: '>=2.28', node: ^18.17.0 || ^20.3.0 || >=21.0.0, npm: '>=9.6.5', pnpm: '>=7.1.0', yarn: '>=3.2.0'} - cpu: [s390x] - os: [linux] - requiresBuild: true - optionalDependencies: - '@img/sharp-libvips-linux-s390x': 1.0.1 - dev: false - optional: true - - /@img/sharp-linux-x64@0.33.2: - resolution: {integrity: sha512-xUT82H5IbXewKkeF5aiooajoO1tQV4PnKfS/OZtb5DDdxS/FCI/uXTVZ35GQ97RZXsycojz/AJ0asoz6p2/H/A==} - engines: {glibc: '>=2.26', node: ^18.17.0 || ^20.3.0 || >=21.0.0, npm: '>=9.6.5', pnpm: '>=7.1.0', yarn: '>=3.2.0'} - cpu: [x64] - os: [linux] - requiresBuild: true - optionalDependencies: - '@img/sharp-libvips-linux-x64': 1.0.1 - dev: false - optional: true - - /@img/sharp-linuxmusl-arm64@0.33.2: - resolution: {integrity: sha512-F+0z8JCu/UnMzg8IYW1TMeiViIWBVg7IWP6nE0p5S5EPQxlLd76c8jYemG21X99UzFwgkRo5yz2DS+zbrnxZeA==} - engines: {musl: '>=1.2.2', node: ^18.17.0 || ^20.3.0 || >=21.0.0, npm: '>=9.6.5', pnpm: '>=7.1.0', yarn: '>=3.2.0'} - cpu: [arm64] - os: [linux] - requiresBuild: true - optionalDependencies: - '@img/sharp-libvips-linuxmusl-arm64': 1.0.1 - dev: false - optional: true - - /@img/sharp-linuxmusl-x64@0.33.2: - resolution: {integrity: sha512-+ZLE3SQmSL+Fn1gmSaM8uFusW5Y3J9VOf+wMGNnTtJUMUxFhv+P4UPaYEYT8tqnyYVaOVGgMN/zsOxn9pSsO2A==} - engines: {musl: '>=1.2.2', node: ^18.17.0 || ^20.3.0 || >=21.0.0, npm: '>=9.6.5', pnpm: '>=7.1.0', yarn: '>=3.2.0'} - cpu: [x64] - os: [linux] - requiresBuild: true - optionalDependencies: - '@img/sharp-libvips-linuxmusl-x64': 1.0.1 - dev: false - optional: true - - /@img/sharp-wasm32@0.33.2: - resolution: {integrity: sha512-fLbTaESVKuQcpm8ffgBD7jLb/CQLcATju/jxtTXR1XCLwbOQt+OL5zPHSDMmp2JZIeq82e18yE0Vv7zh6+6BfQ==} - engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0, npm: '>=9.6.5', pnpm: '>=7.1.0', yarn: '>=3.2.0'} - cpu: [wasm32] - requiresBuild: true - dependencies: - '@emnapi/runtime': 0.45.0 - dev: false - optional: true - - /@img/sharp-win32-ia32@0.33.2: - resolution: {integrity: sha512-okBpql96hIGuZ4lN3+nsAjGeggxKm7hIRu9zyec0lnfB8E7Z6p95BuRZzDDXZOl2e8UmR4RhYt631i7mfmKU8g==} - engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0, npm: '>=9.6.5', pnpm: '>=7.1.0', yarn: '>=3.2.0'} - cpu: [ia32] - os: [win32] - requiresBuild: true - dev: false - optional: true - - /@img/sharp-win32-x64@0.33.2: - resolution: {integrity: sha512-E4magOks77DK47FwHUIGH0RYWSgRBfGdK56kIHSVeB9uIS4pPFr4N2kIVsXdQQo4LzOsENKV5KAhRlRL7eMAdg==} - engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0, npm: '>=9.6.5', pnpm: '>=7.1.0', yarn: '>=3.2.0'} - cpu: [x64] - os: [win32] - requiresBuild: true - dev: false - optional: true - /@isaacs/cliui@8.0.2: resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==} engines: {node: '>=12'} @@ -2278,21 +2082,6 @@ packages: /color-name@1.1.4: resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==} - /color-string@1.9.1: - resolution: {integrity: sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==} - dependencies: - color-name: 1.1.4 - simple-swizzle: 0.2.2 - dev: false - - /color@4.2.3: - resolution: {integrity: sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==} - engines: {node: '>=12.5.0'} - dependencies: - color-convert: 2.0.1 - color-string: 1.9.1 - dev: false - /combined-stream@1.0.8: resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==} engines: {node: '>= 0.8'} @@ -2405,11 +2194,6 @@ packages: engines: {node: '>=0.4.0'} dev: false - /detect-libc@2.0.2: - resolution: {integrity: sha512-UX6sGumvvqSaXgdKGUsgZWqcUyIXZ/vZTrlRT/iobiKhGL0zL4d3osHj3uqllWJK+i+sixDS/3COVEOFbupFyw==} - engines: {node: '>=8'} - dev: false - /detect-node-es@1.1.0: resolution: {integrity: sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==} dev: false @@ -2996,10 +2780,6 @@ packages: loose-envify: 1.4.0 dev: false - /is-arrayish@0.3.2: - resolution: {integrity: sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==} - dev: false - /is-binary-path@2.1.0: resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==} engines: {node: '>=8'} @@ -4313,36 +4093,6 @@ packages: engines: {node: '>=6.9'} dev: false - /sharp@0.33.2: - resolution: {integrity: sha512-WlYOPyyPDiiM07j/UO+E720ju6gtNtHjEGg5vovUk1Lgxyjm2LFO+37Nt/UI3MMh2l6hxTWQWi7qk3cXJTutcQ==} - engines: {libvips: '>=8.15.1', node: ^18.17.0 || ^20.3.0 || >=21.0.0} - requiresBuild: true - dependencies: - color: 4.2.3 - detect-libc: 2.0.2 - semver: 7.5.4 - optionalDependencies: - '@img/sharp-darwin-arm64': 0.33.2 - '@img/sharp-darwin-x64': 0.33.2 - '@img/sharp-libvips-darwin-arm64': 1.0.1 - '@img/sharp-libvips-darwin-x64': 1.0.1 - '@img/sharp-libvips-linux-arm': 1.0.1 - '@img/sharp-libvips-linux-arm64': 1.0.1 - '@img/sharp-libvips-linux-s390x': 1.0.1 - '@img/sharp-libvips-linux-x64': 1.0.1 - '@img/sharp-libvips-linuxmusl-arm64': 1.0.1 - '@img/sharp-libvips-linuxmusl-x64': 1.0.1 - '@img/sharp-linux-arm': 0.33.2 - '@img/sharp-linux-arm64': 0.33.2 - '@img/sharp-linux-s390x': 0.33.2 - '@img/sharp-linux-x64': 0.33.2 - '@img/sharp-linuxmusl-arm64': 0.33.2 - '@img/sharp-linuxmusl-x64': 0.33.2 - '@img/sharp-wasm32': 0.33.2 - '@img/sharp-win32-ia32': 0.33.2 - '@img/sharp-win32-x64': 0.33.2 - dev: false - /shebang-command@2.0.0: resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==} engines: {node: '>=8'} @@ -4357,12 +4107,6 @@ packages: resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==} engines: {node: '>=14'} - /simple-swizzle@0.2.2: - resolution: {integrity: sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==} - dependencies: - is-arrayish: 0.3.2 - dev: false - /slash@3.0.0: resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==} engines: {node: '>=8'} @@ -4843,6 +4587,16 @@ packages: video.js: 8.10.0 dev: false + /videojs-seek-buttons@4.0.3(video.js@8.10.0): + resolution: {integrity: sha512-LcaskoqIshE1Dy/yqVPRlt2qSYzDq/vT9iqYxyy+crKdBW4zBXW743GVA7G7kX8BF8U9EGgQTajRJQGBQMtQaQ==} + engines: {node: '>=14', npm: '>=6'} + peerDependencies: + video.js: ^8 + dependencies: + global: 4.4.0 + video.js: 8.10.0 + dev: false + /videojs-sprite-thumbnails@2.2.1: resolution: {integrity: sha512-xjK2Qqj8fNnBTRMSiNs7wVgZXhAkkA9ol3Z+5+DKepFHZ77mCRea07S1ApgGuAKRbzBeUbmSpH4GHGtaCT8JtQ==} engines: {node: '>=14', npm: '>=6'} diff --git a/src/app/globals.css b/src/app/globals.css index aa74b9b8..9c36ec26 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -60,3 +60,10 @@ .video-js .vjs-progress-control:hover .vjs-play-progress:after { display: none; } +.vjs-quality-selector .vjs-custom-dropup-menu { + bottom: 100%; + left: 50%; + transform: translateX(-50%); + +} + diff --git a/src/components/QualitySelectorControllBar.ts b/src/components/QualitySelectorControllBar.ts new file mode 100644 index 00000000..1109b9e3 --- /dev/null +++ b/src/components/QualitySelectorControllBar.ts @@ -0,0 +1,71 @@ +import videojs from 'video.js'; + +const changeVideoQuality = (quality: string) => { + const currentUrl = new URL(window.location.href); + currentUrl.searchParams.set('quality', quality); + window.location.href = currentUrl.href; +}; + +class QualitySelectorControllBar extends videojs.getComponent('Button') { + constructor(player: any, options?: any) { + super(player, options); + this.addClass('vjs-quality-selector flex justify-center items-center'); + + const iconElement = videojs.dom.createEl('i', { + className: 'vjs-icon-hd text-xl', + }); + this.el().appendChild(iconElement); + + const dropUpMenu = videojs.dom.createEl('div', { + className: 'vjs-custom-dropup-menu absolute hidden', + }); + + dropUpMenu.innerHTML = ` + + `; + + const dropUpMenuElement = this.el().appendChild(dropUpMenu) as HTMLElement; + + this.on('click', () => { + const isVisible = dropUpMenuElement.style.display === 'block'; + dropUpMenuElement.style.display = isVisible ? 'none' : 'block'; + }); + this.on('touchend', (e: any) => { + e.preventDefault(); + const isVisible = dropUpMenuElement.style.display === 'block'; + dropUpMenuElement.style.display = isVisible ? 'none' : 'block'; + }); + dropUpMenuElement.querySelectorAll('li').forEach((item) => { + item.addEventListener('click', (e: any) => { + const quality = e.target.getAttribute('data-quality'); + if (quality) { + changeVideoQuality(quality); + } + dropUpMenuElement.style.display = 'none'; + }); + item.addEventListener('touchend', (e: any) => { + const quality = e.target.getAttribute('data-quality'); + if (quality) { + changeVideoQuality(quality); + } + dropUpMenuElement.style.display = 'none'; + dropUpMenuElement.style.display = 'none'; + }); + }); + } +} + +if (typeof window !== 'undefined') { + // @ts-ignore + window.changeVideoQuality = changeVideoQuality; + videojs.registerComponent( + 'QualitySelectorControllBar', + QualitySelectorControllBar, + ); +} + +export default QualitySelectorControllBar; diff --git a/src/components/VideoPlayer2.tsx b/src/components/VideoPlayer2.tsx index 6e7795c4..c5da064b 100644 --- a/src/components/VideoPlayer2.tsx +++ b/src/components/VideoPlayer2.tsx @@ -5,10 +5,13 @@ import Player from 'video.js/dist/types/player'; import 'video.js/dist/video-js.css'; import 'videojs-contrib-eme'; import 'videojs-mobile-ui/dist/videojs-mobile-ui.css'; +import 'videojs-seek-buttons/dist/videojs-seek-buttons.css'; import 'videojs-mobile-ui'; import 'videojs-sprite-thumbnails'; +import 'videojs-seek-buttons'; import { handleMarkAsCompleted } from '@/lib/utils'; import { useSearchParams } from 'next/navigation'; +import './QualitySelectorControllBar'; // todo correct types interface VideoPlayerProps { @@ -223,6 +226,20 @@ export const VideoPlayer: FunctionComponent = ({ () => { player.mobileUi(); // mobile ui #https://github.com/mister-ben/videojs-mobile-ui player.eme(); // Initialize EME + player.seekButtons({ + forward: 15, + back: 15, + }); + + const qualitySelector = player.controlBar.addChild( + 'QualitySelectorControllBar', + ); + const controlBar = player.getChild('controlBar'); + const fullscreenToggle = controlBar.getChild('fullscreenToggle'); + + controlBar + .el() + .insertBefore(qualitySelector.el(), fullscreenToggle.el()); setPlayer(player); if (options.isComposite) { player.spriteThumbnails({ diff --git a/src/components/admin/ContentRendererClient.tsx b/src/components/admin/ContentRendererClient.tsx index abae412a..8fdd3198 100644 --- a/src/components/admin/ContentRendererClient.tsx +++ b/src/components/admin/ContentRendererClient.tsx @@ -1,6 +1,6 @@ 'use client'; import { useSearchParams, useRouter } from 'next/navigation'; -import { QualitySelector } from '../QualitySelector'; +// import { QualitySelector } from '../QualitySelector'; import { VideoPlayerSegment } from '@/components/VideoPlayerSegment'; import VideoContentChapters from '../VideoContentChapters'; import { useState } from 'react'; @@ -135,7 +135,7 @@ export const ContentRendererClient = ({
- + {/* */}
{metadata.slides ? (