Add control bar option for peertube player

pull/5004/head
Chocobozzz 2022-05-20 09:59:53 +02:00
parent a871d2a273
commit 60f013e103
No known key found for this signature in database
GPG Key ID: 583A612D890159BE
9 changed files with 81 additions and 5 deletions

View File

@ -602,6 +602,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
startTime,
stopTime: urlOptions.stopTime,
controlBar: urlOptions.controlBar,
controls: urlOptions.controls,
muted: urlOptions.muted,
loop: urlOptions.loop,

View File

@ -250,8 +250,8 @@
<div class="form-group">
<my-peertube-checkbox
inputName="controls" [(ngModel)]="customizations.controls"
i18n-labelText labelText="Display player controls"
inputName="controlBar" [(ngModel)]="customizations.controlBar"
i18n-labelText labelText="Display player control bar"
></my-peertube-checkbox>
</div>

View File

@ -27,7 +27,7 @@ type Customizations = {
onlyEmbedUrl: boolean
title: boolean
warningTitle: boolean
controls: boolean
controlBar: boolean
peertubeLink: boolean
}
@ -88,7 +88,7 @@ export class VideoShareComponent {
onlyEmbedUrl: false,
title: true,
warningTitle: true,
controls: true,
controlBar: true,
peertubeLink: true
}, {
set: (target, prop, value) => {
@ -190,7 +190,7 @@ export class VideoShareComponent {
? {
title: this.customizations.title,
warningTitle: this.customizations.warningTitle,
controls: this.customizations.controls,
controlBar: this.customizations.controlBar,
peertubeLink: this.customizations.peertubeLink,
// If using default value, we don't need to specify it

View File

@ -110,6 +110,7 @@ export class PeertubePlayerManager {
if (isMobile()) player.peertubeMobile()
if (options.common.enableHotkeys === true) player.peerTubeHotkeysPlugin()
if (options.common.controlBar === false) player.controlBar.addClass('control-bar-hidden')
player.bezels()

View File

@ -21,6 +21,8 @@ export interface CustomizationOptions {
stopTime: number | string
controls?: boolean
controlBar?: boolean
muted?: boolean
loop?: boolean
subtitle?: string

View File

@ -4,6 +4,10 @@
@use './_player-variables' as *;
.video-js.vjs-peertube-skin .vjs-control-bar {
&.control-bar-hidden {
display: none !important;
}
z-index: 100;
height: $control-bar-height;

View File

@ -37,7 +37,10 @@ export class PeerTubeEmbed {
api: PeerTubeEmbedApi = null
autoplay: boolean
controls: boolean
controlBar: boolean
muted: boolean
loop: boolean
subtitle: string
@ -295,7 +298,10 @@ export class PeerTubeEmbed {
const params = new URL(window.location.toString()).searchParams
this.autoplay = this.getParamToggle(params, 'autoplay', false)
this.controls = this.getParamToggle(params, 'controls', true)
this.controlBar = this.getParamToggle(params, 'controlBar', true)
this.muted = this.getParamToggle(params, 'muted', undefined)
this.loop = this.getParamToggle(params, 'loop', false)
this.title = this.getParamToggle(params, 'title', true)
@ -539,7 +545,10 @@ export class PeerTubeEmbed {
common: {
// Autoplay in playlist mode
autoplay: alreadyHadPlayer ? true : this.autoplay,
controls: this.controls,
controlBar: this.controlBar,
muted: this.muted,
loop: this.loop,

View File

@ -48,7 +48,10 @@ function decorateVideoLink (options: {
// Embed options
title?: boolean
warningTitle?: boolean
controls?: boolean
controlBar?: boolean
peertubeLink?: boolean
p2p?: boolean
}) {
@ -73,7 +76,10 @@ function decorateVideoLink (options: {
if (options.muted === true) params.set('muted', '1')
if (options.title === false) params.set('title', '0')
if (options.warningTitle === false) params.set('warningTitle', '0')
if (options.controls === false) params.set('controls', '0')
if (options.controlBar === false) params.set('controlBar', '0')
if (options.peertubeLink === false) params.set('peertubeLink', '0')
if (options.p2p !== undefined) params.set('p2p', options.p2p ? '1' : '0')

View File

@ -49,6 +49,59 @@ player.seek(32)
player.pause()
```
# URL parameters
You can customize PeerTube player by specifying URL query parameters.
For example `https://my-instance.example.com/videos/embed/52a10666-3a18-4e73-93da-e8d3c12c305a??start=1s&stop=18s&loop=1&autoplay=1&muted=1&warningTitle=0&controlBar=0&peertubeLink=0&p2p=0`
## start
Start the video at a specific time.
Value must be raw seconds or a duration (`3m4s`)
## stop
Stop the video at a specific time.
Value must be raw seconds or a duration (`54s`)
## controls
Mimics video HTML element `controls` attribute, meaning that all controls (including big play button, control bar, etc.) will be removed.
It can be useful if you want to have a full control of the PeerTube player.
Value must be `0` or `1`.
## controlBar
Hide control bar when the video is played.
Value must be `0` or `1`.
## peertubeLink
Hide PeerTube link in control bar.
Value must be `0` or `1`.
## muted
Mute the video by default.
Value must be `0` or `1`.
## loop
Automatically start again the video when it ends.
Value must be `0` or `1`.
## subtitle
Auto select a subtitle by default.
Value must be a valid subtitle ISO code (`fr`, `en`, etc.).
# Methods
## `play() : Promise<void>`