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

Add Play Next VJS component

Browse source
This commit is contained in:
saltrafael 2021-08-24 08:53:44 -03:00 committed by zeppi
parent 10087891f4
commit ec6f9c8a7f
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-next.js Normal file
View file

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

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

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

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

@ -132,6 +132,24 @@
}
}
.vjs-button--play-next.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-forward'%3e%3cpolygon points='5 4 15 12 5 20 5 4'%3e%3c/polygon%3e%3cline x1='19' y1='5' x2='19' y2='19'%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-forward'%3e%3cpolygon points='5 4 15 12 5 20 5 4'%3e%3c/polygon%3e%3cline x1='19' y1='5' x2='19' y2='19'%3e%3c/line%3e%3c/svg%3e");
}
}
.button--link {
color: var(--color-link);
transition: color 0.2s;