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

Add Play Previous VJS Component

Browse source
This commit is contained in:
saltrafael 2021-08-24 08:57:30 -03:00 • committed by zeppi
parent b26255bf53
commit 73722a4f00
3 changed files with 44 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
ui/component/viewers/videoViewer/internal/play-previous.js Normal file
View file

@ -0,0 +1,25 @@
// @flow
import type { Player } from './videojs';
import videojs from 'video.js';
class PlayPreviousButton extends videojs.getComponent('Button') {
constructor(player, options = {}) {
super(player, options);
this.addClass('vjs-button--play-previous');
this.controlText('Play Previous');
}
}
export function addPlayPreviousButton(player: Player, playPreviousURI: () => void) {
const controlBar = player.getChild('controlBar');
const playPrevious = new PlayPreviousButton(player, {
name: __('PlayPreviousButton'),
text: __('Play Previous'),
clickHandler: () => {
playPreviousURI();
},
});
controlBar.addChild(playPrevious, {}, 0);
}

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

@ -346,6 +346,7 @@ export default React.memo<Props>(function VideoJs(props: Props) {
.getChild('TheaterModeButton')
.controlText(videoTheaterMode ? __('Default Mode (t)') : __('Theater Mode (t)'));
controlBar.getChild('PlayNextButton').controlText(__('Play Next (SHIFT+N)'));
controlBar.getChild('PlayPreviousButton').controlText(__('Play Previous (SHIFT+P)'));
break;
default:
if (isDev) throw Error('Unexpected: ' + e.type);

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

@ -132,6 +132,24 @@
}
}
.vjs-button--play-previous.vjs-button {
@media (min-width: $breakpoint-medium) {
display: block;
order: 0;
background-repeat: no-repeat;
background-position: center;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='18' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' class='feather feather-skip-back'%3e%3cpolygon points='19 20 9 12 19 4 19 20'%3e%3c/polygon%3e%3cline x1='5' y1='19' x2='5' y2='5'%3e%3c/line%3e%3c/svg%3e");
}
&:focus:not(:focus-visible) {
display: block;
order: 0;
background-repeat: no-repeat;
background-position: center;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='18' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' class='feather feather-skip-back'%3e%3cpolygon points='19 20 9 12 19 4 19 20'%3e%3c/polygon%3e%3cline x1='5' y1='19' x2='5' y2='5'%3e%3c/line%3e%3c/svg%3e");
}
}
.vjs-button--play-next.vjs-button {
@media (min-width: $breakpoint-medium) {
display: block;