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

Preview image thumbnails (#1514)

Browse source 
working example

use my forked package

touchups to presentation

Make progress bar thumbnail sprite pixel perfect

add vtt path

fix progress bar a bit

add a black background

use odysee team package

fix two issues for merge
This commit is contained in:
mayeaux 2022-05-18 18:02:02 +02:00 committed by GitHub
parent a53250395f
commit 0cf8c181df
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 48 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
package.json
View file

@ -81,7 +81,8 @@
"videojs-contrib-ads": "^6.9.0",
"videojs-ima": "^1.11.0",
"videojs-ima-player": "^0.5.6",
"videojs-logo": "^2.1.4"
"videojs-logo": "^2.1.4",
"videojs-vtt-thumbnails": "https://github.com/OdyseeTeam/videojs-vtt-thumbnails"
},
"devDependencies": {
"@babel/core": "^7.0.0",

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

@ -1,6 +1,7 @@
// @flow
import 'videojs-contrib-ads'; // must be loaded in this order
import 'videojs-ima'; // loads directly after contrib-ads
import 'videojs-vtt-thumbnails';
import 'video.js/dist/alt/video-js-cdn.min.css';
import './plugins/videojs-mobile-ui/plugin';
import '@silvermine/videojs-chromecast/dist/silvermine-videojs-chromecast.css';
@ -392,6 +393,14 @@ export default React.memo<Props>(function VideoJs(props: Props) {
if (response && response.redirected && response.url && response.url.endsWith('m3u8')) {
vjsPlayer.claimSrcVhs = { type: 'application/x-mpegURL', src: response.url };
vjsPlayer.src(vjsPlayer.claimSrcVhs);
const trimmedPath = response.url.substring(0, response.url.lastIndexOf('/'));
const thumbnailPath = trimmedPath + '/stream_sprite.vtt';
vjsPlayer.vttThumbnails({
src: thumbnailPath,
showTimestamp: true,
});
} else {
vjsPlayer.src(vjsPlayer.claimSrcOriginal);
}

31
ui/scss/component/_videojs.scss
View file

@ -36,11 +36,24 @@ $control-bar-icon-size: 0.8rem;
// Progress Bar
.vjs-progress-control.vjs-control {
position: absolute;
display: flex;
display: block;
align-items: center;
width: 100%;
height: 1rem;
bottom: 90%;
margin: 1px 23px !important;
max-width: 96.5%;
@media (max-width: $breakpoint-small) {
max-width: 94.5%;
}
.vjs-vtt-thumbnail-display {
margin-top: -122px;
border: 1px solid white;
background-color: black !important;
visibility: hidden;
}
// Circle play head
.vjs-play-progress::before {
@ -48,16 +61,24 @@ $control-bar-icon-size: 0.8rem;
transition: transform 0.1s;
}
.vjs-progress-holder {
margin: 0;
}
&:hover {
.vjs-play-progress::before {
transform: scale(1);
}
.vjs-progress-holder {
margin-top: -0.1em !important;
height: 0.4em !important;
}
}
// Progress Slider
.vjs-slider {
margin: 0 1rem;
}
//.vjs-slider {
// margin: 0 1rem;
//}
}
// Load progress color
@ -114,6 +135,8 @@ $control-bar-icon-size: 0.8rem;
.vjs-mouse-display .vjs-time-tooltip {
color: white;
white-space: nowrap;
top: -32px;
padding-top: 9px;
}
// Tooltip

12
yarn.lock
View file

@ -14705,7 +14705,7 @@ replace-ext@1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/replace-ext/-/replace-ext-1.0.0.tgz#de63128373fcbf7c3ccfa4de5a480c45a67958eb"
request@^2.79.0:
request@^2.79.0, request@^2.88.2:
version "2.88.2"
resolved "https://registry.yarnpkg.com/request/-/request-2.88.2.tgz#d73c918731cb5a87da047e207234146f664d12b3"
integrity sha512-MsvtOrfG9ZcrOwAW+Qi+F6HbD0CWXEh9ou77uOb7FM2WPhwT7smM833PzanhJLsgXjN89Ir6V2PczXNnMpwKhw==
@ -17235,7 +17235,7 @@ vfile@^2.0.0:
unist-util-stringify-position "^1.0.0"
vfile-message "^1.0.0"
"video.js@^6 || ^7", "video.js@^6.0.1 || ^7", video.js@^7.0.0, video.js@^7.18.1:
"video.js@^6 || ^7", "video.js@^6.0.1 || ^7", video.js@^7.0.0, video.js@^7.18.1, "video.js@^7.2.0 || ^6.6.0":
version "7.18.1"
resolved "https://registry.yarnpkg.com/video.js/-/video.js-7.18.1.tgz#d93cd4992710d4d95574a00e7d29a2518f9b30f7"
integrity sha512-mnXdmkVcD5qQdKMZafDjqdhrnKGettZaGSVkExjACiylSB4r2Yt5W1bchsKmjFpfuNfszsMjTUnnoIWSSqoe/Q==
@ -17310,6 +17310,14 @@ videojs-logo@^2.1.4:
global "^4.3.2"
video.js "^6 || ^7"
"videojs-vtt-thumbnails@https://github.com/OdyseeTeam/videojs-vtt-thumbnails":
version "0.0.13"
resolved "https://github.com/OdyseeTeam/videojs-vtt-thumbnails#260a63aa9679992adcd4c2bd42cb042595db9f4b"
dependencies:
global "^4.4.0"
request "^2.88.2"
video.js "^7.2.0 || ^6.6.0"
videojs-vtt.js@^0.15.3:
version "0.15.3"
resolved "https://registry.yarnpkg.com/videojs-vtt.js/-/videojs-vtt.js-0.15.3.tgz#84260393b79487fcf195d9372f812d7fab83a993"