mirror of https://github.com/Chocobozzz/PeerTube
Add next video button to the player
This commit is contained in:
parent
c5c09c1e50
commit
1dc240a948
|
@ -642,6 +642,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
|
||||||
const options: PeertubePlayerManagerOptions = {
|
const options: PeertubePlayerManagerOptions = {
|
||||||
common: {
|
common: {
|
||||||
autoplay: this.isAutoplay(),
|
autoplay: this.isAutoplay(),
|
||||||
|
nextVideo: () => this.zone.run(() => this.autoplayNext()),
|
||||||
|
|
||||||
playerElement: this.playerElement,
|
playerElement: this.playerElement,
|
||||||
onPlayerElementChange: (element: HTMLVideoElement) => this.playerElement = element,
|
onPlayerElementChange: (element: HTMLVideoElement) => this.playerElement = element,
|
||||||
|
|
|
@ -0,0 +1,4 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg width="24px" height="24px" viewBox="0 0 36 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<path fill="white" d="M 12,24 20.5,18 12,12 V 24 z M 22,12 v 12 h 2 V 12 h -2 z"></path>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 283 B |
|
@ -8,6 +8,7 @@ import 'videojs-contrib-quality-levels'
|
||||||
import './upnext/upnext-plugin'
|
import './upnext/upnext-plugin'
|
||||||
import './bezels/bezels-plugin'
|
import './bezels/bezels-plugin'
|
||||||
import './peertube-plugin'
|
import './peertube-plugin'
|
||||||
|
import './videojs-components/next-video-button'
|
||||||
import './videojs-components/peertube-link-button'
|
import './videojs-components/peertube-link-button'
|
||||||
import './videojs-components/resolution-menu-button'
|
import './videojs-components/resolution-menu-button'
|
||||||
import './videojs-components/settings-menu-button'
|
import './videojs-components/settings-menu-button'
|
||||||
|
@ -62,6 +63,7 @@ export interface CommonOptions extends CustomizationOptions {
|
||||||
onPlayerElementChange: (element: HTMLVideoElement) => void
|
onPlayerElementChange: (element: HTMLVideoElement) => void
|
||||||
|
|
||||||
autoplay: boolean
|
autoplay: boolean
|
||||||
|
nextVideo?: Function
|
||||||
videoDuration: number
|
videoDuration: number
|
||||||
enableHotkeys: boolean
|
enableHotkeys: boolean
|
||||||
inactivityTimeout: number
|
inactivityTimeout: number
|
||||||
|
@ -233,7 +235,8 @@ export class PeertubePlayerManager {
|
||||||
children: this.getControlBarChildren(mode, {
|
children: this.getControlBarChildren(mode, {
|
||||||
captions: commonOptions.captions,
|
captions: commonOptions.captions,
|
||||||
peertubeLink: commonOptions.peertubeLink,
|
peertubeLink: commonOptions.peertubeLink,
|
||||||
theaterButton: commonOptions.theaterButton
|
theaterButton: commonOptions.theaterButton,
|
||||||
|
nextVideo: commonOptions.nextVideo
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -329,7 +332,8 @@ export class PeertubePlayerManager {
|
||||||
private static getControlBarChildren (mode: PlayerMode, options: {
|
private static getControlBarChildren (mode: PlayerMode, options: {
|
||||||
peertubeLink: boolean
|
peertubeLink: boolean
|
||||||
theaterButton: boolean,
|
theaterButton: boolean,
|
||||||
captions: boolean
|
captions: boolean,
|
||||||
|
nextVideo?: Function
|
||||||
}) {
|
}) {
|
||||||
const settingEntries = []
|
const settingEntries = []
|
||||||
const loadProgressBar = mode === 'webtorrent' ? 'peerTubeLoadProgressBar' : 'loadProgressBar'
|
const loadProgressBar = mode === 'webtorrent' ? 'peerTubeLoadProgressBar' : 'loadProgressBar'
|
||||||
|
@ -340,7 +344,18 @@ export class PeertubePlayerManager {
|
||||||
settingEntries.push('resolutionMenuButton')
|
settingEntries.push('resolutionMenuButton')
|
||||||
|
|
||||||
const children = {
|
const children = {
|
||||||
'playToggle': {},
|
'playToggle': {}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (options.nextVideo) {
|
||||||
|
Object.assign(children, {
|
||||||
|
'nextVideoButton': {
|
||||||
|
handler: options.nextVideo
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
Object.assign(children, {
|
||||||
'currentTimeDisplay': {},
|
'currentTimeDisplay': {},
|
||||||
'timeDivider': {},
|
'timeDivider': {},
|
||||||
'durationDisplay': {},
|
'durationDisplay': {},
|
||||||
|
@ -370,7 +385,7 @@ export class PeertubePlayerManager {
|
||||||
},
|
},
|
||||||
entries: settingEntries
|
entries: settingEntries
|
||||||
}
|
}
|
||||||
}
|
})
|
||||||
|
|
||||||
if (options.peertubeLink === true) {
|
if (options.peertubeLink === true) {
|
||||||
Object.assign(children, {
|
Object.assign(children, {
|
||||||
|
|
|
@ -0,0 +1,36 @@
|
||||||
|
import { VideoJSComponentInterface, videojsUntyped } from '../peertube-videojs-typings'
|
||||||
|
// FIXME: something weird with our path definition in tsconfig and typings
|
||||||
|
// @ts-ignore
|
||||||
|
import { Player } from 'video.js'
|
||||||
|
|
||||||
|
const Button: VideoJSComponentInterface = videojsUntyped.getComponent('Button')
|
||||||
|
|
||||||
|
class NextVideoButton extends Button {
|
||||||
|
|
||||||
|
constructor (player: Player, options: any) {
|
||||||
|
super(player, options)
|
||||||
|
}
|
||||||
|
|
||||||
|
createEl () {
|
||||||
|
const button = videojsUntyped.dom.createEl('button', {
|
||||||
|
className: 'vjs-next-video'
|
||||||
|
})
|
||||||
|
const nextIcon = videojsUntyped.dom.createEl('span', {
|
||||||
|
className: 'icon icon-next'
|
||||||
|
})
|
||||||
|
button.appendChild(nextIcon)
|
||||||
|
|
||||||
|
button.title = this.player_.localize('Next video')
|
||||||
|
|
||||||
|
return button
|
||||||
|
}
|
||||||
|
|
||||||
|
handleClick () {
|
||||||
|
this.options_.handler()
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
NextVideoButton.prototype.controlText_ = 'Next video'
|
||||||
|
|
||||||
|
NextVideoButton.registerComponent('NextVideoButton', NextVideoButton)
|
|
@ -223,7 +223,8 @@ body {
|
||||||
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-size: $font-size;
|
font-size: $font-size;
|
||||||
margin-right: 5px;
|
margin-left: 1em;
|
||||||
|
width: 3em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.vjs-time-control {
|
.vjs-time-control {
|
||||||
|
@ -233,6 +234,7 @@ body {
|
||||||
font-size: $font-size;
|
font-size: $font-size;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
margin-left: .5em;
|
||||||
|
|
||||||
.vjs-current-time-display {
|
.vjs-current-time-display {
|
||||||
line-height: calc(#{$control-bar-height} + 1px);
|
line-height: calc(#{$control-bar-height} + 1px);
|
||||||
|
@ -262,6 +264,7 @@ body {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
line-height: $control-bar-height;
|
line-height: $control-bar-height;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
|
margin-right: 6px;
|
||||||
|
|
||||||
.vjs-peertube-displayed {
|
.vjs-peertube-displayed {
|
||||||
display: block;
|
display: block;
|
||||||
|
@ -280,16 +283,6 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon {
|
.icon {
|
||||||
display: inline-block;
|
|
||||||
width: 15px;
|
|
||||||
height: 15px;
|
|
||||||
background-size: contain;
|
|
||||||
vertical-align: middle;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
margin-right: 6px;
|
|
||||||
position: relative;
|
|
||||||
top: -1px;
|
|
||||||
|
|
||||||
&.icon-download {
|
&.icon-download {
|
||||||
background-image: url('#{$assets-path}/player/images/arrow-down.svg');
|
background-image: url('#{$assets-path}/player/images/arrow-down.svg');
|
||||||
}
|
}
|
||||||
|
@ -300,6 +293,34 @@ body {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.vjs-next-video {
|
||||||
|
line-height: $control-bar-height;
|
||||||
|
text-align: right;
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
&.icon-next {
|
||||||
|
mask-image: url('#{$assets-path}/player/images/next.svg');
|
||||||
|
background-color: white;
|
||||||
|
mask-size: cover;
|
||||||
|
transform: scale(2.2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.vjs-peertube,
|
||||||
|
.vjs-next-video {
|
||||||
|
.icon {
|
||||||
|
display: inline-block;
|
||||||
|
width: 15px;
|
||||||
|
height: 15px;
|
||||||
|
background-size: contain;
|
||||||
|
vertical-align: middle;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
position: relative;
|
||||||
|
top: -1px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.vjs-playback-rate {
|
.vjs-playback-rate {
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
width: 37px !important;
|
width: 37px !important;
|
||||||
|
|
Loading…
Reference in New Issue