LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

add quality selector to transcoded videos

Browse source
This commit is contained in:
Sean Yesmunt 2021-01-14 14:43:16 -05:00
parent ee0bdf3a82
commit 80a7cbe16f
5 changed files with 174 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -200,7 +200,9 @@
"unist-util-visit": "^1.4.1",
"uuid": "^8.3.0",
"video.js": "^7.10.1",
"videojs-contrib-quality-levels": "^2.0.9",
"videojs-event-tracking": "^1.0.1",
"videojs-hls-quality-selector": "^1.1.4",
"villain-react": "^1.0.9",
"wavesurfer.js": "^2.2.1",
"webpack": "^4.28.4",

21
ui/component/viewers/videoViewer/internal/videojs.jsx
View file

@ -8,6 +8,8 @@ import 'video.js/dist/alt/video-js-cdn.min.css';
import eventTracking from 'videojs-event-tracking';
import * as OVERLAY from './overlays';
import './plugins/videojs-mobile-ui/plugin';
import qualitySelector from 'videojs-hls-quality-selector';
import qualityLevels from 'videojs-contrib-quality-levels';
import isUserTyping from 'util/detect-typing';
const isDev = process.env.NODE_ENV !== 'production';
@ -66,7 +68,12 @@ const VIDEO_JS_OPTIONS: VideoJSOptions = {
playbackRates: videoPlaybackRates,
responsive: true,
controls: true,
html5: { nativeControlsForTouch: IS_IOS },
html5: {
nativeControlsForTouch: IS_IOS,
hls: {
overrideNative: true,
},
},
};
const F11_KEYCODE = 122;
@ -90,6 +97,14 @@ if (!Object.keys(videojs.getPlugins()).includes('eventTracking')) {
videojs.registerPlugin('eventTracking', eventTracking);
}
if (!Object.keys(videojs.getPlugins()).includes('hlsQualitySelector')) {
videojs.registerPlugin('hlsQualitySelector', qualitySelector);
}
if (!Object.keys(videojs.getPlugins()).includes('qualityLevels')) {
videojs.registerPlugin('qualityLevels', qualityLevels);
}
// ****************************************************************************
// LbryVolumeBarClass
// ****************************************************************************
@ -332,6 +347,10 @@ export default React.memo<Props>(function VideoJs(props: Props) {
}
});
player.hlsQualitySelector({
displayCurrentQuality: true,
});
window.player = player;
// fixes #3498 (https://github.com/lbryio/lbry-desktop/issues/3498)

5
ui/scss/component/_button.scss
View file

@ -107,6 +107,7 @@
width: 1.25rem;
height: 1.25rem;
margin-top: 0.3rem;
margin-left: 0.3rem;
background-repeat: no-repeat;
background-position: center;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='14' viewBox='0 -2 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-monitor'%3E%3Crect x='2' y='3' width='20' height='14' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='8' y1='21' x2='16' y2='21'%3E%3C/line%3E%3Cline x1='12' y1='17' x2='12' y2='21'%3E%3C/line%3E%3C/svg%3E");
@ -118,10 +119,6 @@
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='14' viewBox='0 -2 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-monitor'%3E%3Crect x='2' y='3' width='20' height='14' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='8' y1='21' x2='16' y2='21'%3E%3C/line%3E%3Cline x1='12' y1='17' x2='12' y2='21'%3E%3C/line%3E%3C/svg%3E")
no-repeat center;
}
.vjs-icon-placeholder {
display: none;
}
}
.button--link {

5
ui/scss/component/_file-render.scss
View file

@ -593,6 +593,11 @@ video::-internal-media-controls-overlay-cast-button {
display: none;
}
}
.vjs-menu-item-text,
.vjs-icon-placeholder {
text-transform: capitalize;
}
}
// ****************************************************************************

148
yarn.lock
View file

@ -2229,6 +2229,20 @@
mux.js "5.6.7"
video.js "^6 || ^7"
"@videojs/http-streaming@2.2.4":
version "2.2.4"
resolved "https://registry.yarnpkg.com/@videojs/http-streaming/-/http-streaming-2.2.4.tgz#c71bb63dbc4749e35193c4c334430bd8ce728ec0"
integrity sha512-gzT46RpAEegOhMId/zZ6uXCVGDMPOv8qmoTykBuvd6/4lVM3lZ1ZJCq0kytAkisDuDKipy93gP46oZEtonlc/Q==
dependencies:
"@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@^1.0.0", "@videojs/vhs-utils@^1.1.0":
version "1.3.0"
resolved "https://registry.yarnpkg.com/@videojs/vhs-utils/-/vhs-utils-1.3.0.tgz#04fe402f603af9a5df4b88881fabba0cf13814c2"
@ -2446,6 +2460,16 @@ aes-decrypter@3.0.2:
global "^4.3.2"
pkcs7 "^1.0.4"
aes-decrypter@3.1.0:
version "3.1.0"
resolved "https://registry.yarnpkg.com/aes-decrypter/-/aes-decrypter-3.1.0.tgz#fc0b1d703f97a64aa3f7b13528f4661971db68c4"
integrity sha512-wL1NFwP2yNrJG4InpXYFhhYe9TfonnDyhyxMq2+K9/qt+SrZzUieOpviN6pkDly7GawTqw5feehk0rn5iYo00g==
dependencies:
"@babel/runtime" "^7.5.5"
"@videojs/vhs-utils" "^2.2.1"
global "^4.3.2"
pkcs7 "^1.0.4"
agent-base@5:
version "5.1.1"
resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-5.1.1.tgz#e8fb3f242959db44d63be665db7a8e739537a32c"
@ -2556,6 +2580,11 @@ any-observable@^0.3.0:
version "0.3.0"
resolved "https://registry.yarnpkg.com/any-observable/-/any-observable-0.3.0.tgz#af933475e5806a67d0d7df090dd5e8bef65d119b"
any-promise@^1.0.0:
version "1.3.0"
resolved "https://registry.yarnpkg.com/any-promise/-/any-promise-1.3.0.tgz#abc6afeedcea52e809cdc0376aed3ce39635d17f"
integrity sha1-q8av7tzqUugJzcA3au0845Y10X8=
anymatch@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-2.0.0.tgz#bcb24b4f37934d9aa7ac17b4adaf89e7c76ef2eb"
@ -5752,6 +5781,17 @@ fs-copy-file-sync@^1.1.1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/fs-copy-file-sync/-/fs-copy-file-sync-1.1.1.tgz#11bf32c096c10d126e5f6b36d06eece776062918"
fs-extra@^0.26.5:
version "0.26.7"
resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-0.26.7.tgz#9ae1fdd94897798edab76d0918cf42d0c3184fa9"
integrity sha1-muH92UiXeY7at20JGM9C0MMYT6k=
dependencies:
graceful-fs "^4.1.2"
jsonfile "^2.1.0"
klaw "^1.0.0"
path-is-absolute "^1.0.0"
rimraf "^2.2.8"
fs-extra@^7.0.0:
version "7.0.1"
resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-7.0.1.tgz#4f189c44aa123b895f722804f55ea23eadc348e9"
@ -5785,6 +5825,16 @@ fs-minipass@^2.0.0:
dependencies:
minipass "^3.0.0"
fs-promise@^0.5.0:
version "0.5.0"
resolved "https://registry.yarnpkg.com/fs-promise/-/fs-promise-0.5.0.tgz#4347d6bf624655a7061a4319213c393276ad3ef3"
integrity sha1-Q0fWv2JGVacGGkMZITw5MnatPvM=
dependencies:
any-promise "^1.0.0"
fs-extra "^0.26.5"
mz "^2.3.1"
thenify-all "^1.6.0"
fs-write-stream-atomic@^1.0.8:
version "1.0.10"
resolved "https://registry.yarnpkg.com/fs-write-stream-atomic/-/fs-write-stream-atomic-1.0.10.tgz#b47df53493ef911df75731e70a9ded0189db40c9"
@ -6077,7 +6127,7 @@ got@^9.6.0:
to-readable-stream "^1.0.0"
url-parse-lax "^3.0.0"
graceful-fs@^4.1.10, graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.2:
graceful-fs@^4.1.10, graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.1.9, graceful-fs@^4.2.0, graceful-fs@^4.2.2:
version "4.2.4"
resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.4.tgz#2256bde14d3632958c465ebc96dc467ca07a29fb"
integrity sha512-WjKPNJF79dtJAVniUlGGWHYGz2jWxT6VhN/4m1NdkbZ2nOsEF+cI1Edgql5zCRhs/VsQYRvrXctxktVXZUkixw==
@ -7234,7 +7284,7 @@ json5@^2.1.2:
dependencies:
minimist "^1.2.5"
jsonfile@^2.2.3:
jsonfile@^2.1.0, jsonfile@^2.2.3:
version "2.4.0"
resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-2.4.0.tgz#3736a2b428b87bbda0cc83b53fa3d633a35c2ae8"
optionalDependencies:
@ -7278,6 +7328,14 @@ jszip@~2.5.0:
dependencies:
pako "~0.2.5"
karma-safaritechpreview-launcher@0.0.6:
version "0.0.6"
resolved "https://registry.yarnpkg.com/karma-safaritechpreview-launcher/-/karma-safaritechpreview-launcher-0.0.6.tgz#7a841105aeb7053940e33df850edcf220eed906a"
integrity sha512-2QMxAGXPQ37H3KoR9SCdh0OoktQZ5MyrxkvBiZ+VVOQfYVrcyOQXGrPea0/DKvf8qoQvrvP2FHcP/BxsuxuyHw==
dependencies:
fs-promise "^0.5.0"
marcosc-async "^3.0.4"
kebab-case@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/kebab-case/-/kebab-case-1.0.0.tgz#3f9e4990adcad0c686c0e701f7645868f75f91eb"
@ -7323,6 +7381,13 @@ kind-of@^6.0.0, kind-of@^6.0.2:
version "6.0.3"
resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.3.tgz#07c05034a6c349fa06e24fa35aa76db4580ce4dd"
klaw@^1.0.0:
version "1.3.1"
resolved "https://registry.yarnpkg.com/klaw/-/klaw-1.3.1.tgz#4088433b46b3b1ba259d78785d8e96f73ba02439"
integrity sha1-QIhDO0azsbolnXh4XY6W9zugJDk=
optionalDependencies:
graceful-fs "^4.1.9"
latest-version@^3.0.0:
version "3.1.0"
resolved "https://registry.yarnpkg.com/latest-version/-/latest-version-3.1.0.tgz#a205383fea322b33b5ae3b18abee0dc2f356ee15"
@ -7727,6 +7792,15 @@ m3u8-parser@4.4.3:
"@videojs/vhs-utils" "^1.1.0"
global "^4.3.2"
m3u8-parser@4.5.0:
version "4.5.0"
resolved "https://registry.yarnpkg.com/m3u8-parser/-/m3u8-parser-4.5.0.tgz#9c30b32c9b69cc3f81b5e6789717fa84b9fdb9aa"
integrity sha512-RGm/1WVCX3o1bSWbJGmJUu4zTbtJy8lImtgHM4CESFvJRXYztr1j6SW/q9/ghYOrUjgH7radsIar+z1Leln0sA==
dependencies:
"@babel/runtime" "^7.5.5"
"@videojs/vhs-utils" "^2.2.1"
global "^4.3.2"
macos-release@^2.2.0:
version "2.3.0"
resolved "https://registry.yarnpkg.com/macos-release/-/macos-release-2.3.0.tgz#eb1930b036c0800adebccd5f17bc4c12de8bb71f"
@ -7795,6 +7869,11 @@ map-visit@^1.0.0:
dependencies:
object-visit "^1.0.0"
marcosc-async@^3.0.4:
version "3.0.5"
resolved "https://registry.yarnpkg.com/marcosc-async/-/marcosc-async-3.0.5.tgz#41e6d56c656c811859d34b97a0a26093f71dc360"
integrity sha1-QebVbGVsgRhZ00uXoKJgk/cdw2A=
markdown-escapes@^1.0.0:
version "1.0.4"
resolved "https://registry.yarnpkg.com/markdown-escapes/-/markdown-escapes-1.0.4.tgz#c95415ef451499d7602b91095f3c8e8975f78535"
@ -8165,6 +8244,16 @@ mpd-parser@0.12.0:
global "^4.3.2"
xmldom "^0.1.27"
mpd-parser@0.14.0:
version "0.14.0"
resolved "https://registry.yarnpkg.com/mpd-parser/-/mpd-parser-0.14.0.tgz#f666a80c1e284e46c6f76f010fc4f5292a021148"
integrity sha512-HqXQS3WLofcnYFcxv5oWdlciddUaEnN3NasXLVQ793mdnZRrinjz2Yk1DsUYPDYOUWf6ZBBqbFhaJT5LiT2ouA==
dependencies:
"@babel/runtime" "^7.5.5"
"@videojs/vhs-utils" "^2.2.1"
global "^4.3.2"
xmldom "^0.1.27"
ms@2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
@ -8203,6 +8292,15 @@ mux.js@5.6.7:
resolved "https://registry.yarnpkg.com/mux.js/-/mux.js-5.6.7.tgz#d39fc85cded5a1257de9f6eeb5cf1578c4a63eb8"
integrity sha512-YSr6B8MUgE4S18MptbY2XM+JKGbw9JDkgs7YkuE/T2fpDKjOhZfb/nD6vmsVxvLYOExWNaQn1UGBp6PGsnTtew==
mz@^2.3.1:
version "2.7.0"
resolved "https://registry.yarnpkg.com/mz/-/mz-2.7.0.tgz#95008057a56cafadc2bc63dde7f9ff6955948e32"
integrity sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==
dependencies:
any-promise "^1.0.0"
object-assign "^4.0.1"
thenify-all "^1.0.0"
nan@^2.12.1:
version "2.14.0"
resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.0.tgz#7818f722027b2459a86f0295d434d1fc2336c52c"
@ -11302,6 +11400,20 @@ text-table@^0.2.0:
version "0.2.0"
resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
thenify-all@^1.0.0, thenify-all@^1.6.0:
version "1.6.0"
resolved "https://registry.yarnpkg.com/thenify-all/-/thenify-all-1.6.0.tgz#1a1918d402d8fc3f98fbf234db0bcc8cc10e9726"
integrity sha1-GhkY1ALY/D+Y+/I02wvMjMEOlyY=
dependencies:
thenify ">= 3.1.0 < 4"
"thenify@>= 3.1.0 < 4":
version "3.3.1"
resolved "https://registry.yarnpkg.com/thenify/-/thenify-3.3.1.tgz#8932e686a4066038a016dd9e2ca46add9838a95f"
integrity sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==
dependencies:
any-promise "^1.0.0"
three-full@^17.1.0:
version "17.2.0"
resolved "https://registry.yarnpkg.com/three-full/-/three-full-17.2.0.tgz#b6086360a9429e733e080093c25d02a3171ba1cc"
@ -12001,6 +12113,28 @@ video.js@^7.10.1:
videojs-font "3.2.0"
videojs-vtt.js "^0.15.2"
video.js@^7.5.5:
version "7.10.2"
resolved "https://registry.yarnpkg.com/video.js/-/video.js-7.10.2.tgz#5156aabad7820e726d72ea6c32324059c68885a4"
integrity sha512-kJTTrqcQn2MhPzWR8zQs6W3HPJWpowO/ZGZcKt2dcJeJdJT0dEDLYtiFdjV37SylCmu66V0flRnV8cipbthveQ==
dependencies:
"@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-contrib-quality-levels@^2.0.9:
version "2.0.9"
resolved "https://registry.yarnpkg.com/videojs-contrib-quality-levels/-/videojs-contrib-quality-levels-2.0.9.tgz#b5d533d5092a6fc7d29eae1b43e4597d89bd527b"
integrity sha512-HJeaJJQdSufi9Y5T7jlyyhkeq+mWPCog86q6ypoTi66boBMMJTo2abiOSHS9KaOGAJjH72gfvrjVY5FRdjlxYA==
dependencies:
global "^4.3.2"
video.js "^6 || ^7"
videojs-event-tracking@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/videojs-event-tracking/-/videojs-event-tracking-1.0.1.tgz#382e8b1293d32021f3bac65c4310ee454a659bcf"
@ -12013,6 +12147,16 @@ videojs-font@3.2.0:
resolved "https://registry.yarnpkg.com/videojs-font/-/videojs-font-3.2.0.tgz#212c9d3f4e4ec3fa7345167d64316add35e92232"
integrity sha512-g8vHMKK2/JGorSfqAZQUmYYNnXmfec4MLhwtEFS+mMs2IDY398GLysy6BH6K+aS1KMNu/xWZ8Sue/X/mdQPliA==
videojs-hls-quality-selector@^1.1.4:
version "1.1.4"
resolved "https://registry.yarnpkg.com/videojs-hls-quality-selector/-/videojs-hls-quality-selector-1.1.4.tgz#281b78c6653137b08c544e806aa9c91b71d16989"
integrity sha512-wWAjlLQui02gp//t9KHGd3XnbYO7wdOptskh3ZYCrbl/5Lbkveqb9yBVjH4e0zIQBPvGdWPMcOeDukf8iuYeBw==
dependencies:
global "^4.3.2"
karma-safaritechpreview-launcher "0.0.6"
video.js "^7.5.5"
videojs-contrib-quality-levels "^2.0.9"
videojs-logo@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/videojs-logo/-/videojs-logo-2.0.0.tgz#2d954100b540060309853559b9b6d59c519057f7"