From 60f013e1031871b7e0913c724f0bd2e569721c8e Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Fri, 20 May 2022 09:59:53 +0200 Subject: Add control bar option for peertube player --- .../+videos/+video-watch/video-watch.component.ts | 1 + .../shared-share-modal/video-share.component.html | 4 +- .../shared-share-modal/video-share.component.ts | 6 +-- .../src/assets/player/peertube-player-manager.ts | 1 + client/src/assets/player/types/manager-options.ts | 2 + client/src/sass/player/control-bar.scss | 4 ++ client/src/standalone/videos/embed.ts | 9 ++++ shared/core-utils/common/url.ts | 6 +++ support/doc/api/embeds.md | 53 ++++++++++++++++++++++ 9 files changed, 81 insertions(+), 5 deletions(-) diff --git a/client/src/app/+videos/+video-watch/video-watch.component.ts b/client/src/app/+videos/+video-watch/video-watch.component.ts index 61b440859..5fa31ec63 100644 --- a/client/src/app/+videos/+video-watch/video-watch.component.ts +++ b/client/src/app/+videos/+video-watch/video-watch.component.ts @@ -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, diff --git a/client/src/app/shared/shared-share-modal/video-share.component.html b/client/src/app/shared/shared-share-modal/video-share.component.html index 7ff62e128..67ca56516 100644 --- a/client/src/app/shared/shared-share-modal/video-share.component.html +++ b/client/src/app/shared/shared-share-modal/video-share.component.html @@ -250,8 +250,8 @@
diff --git a/client/src/app/shared/shared-share-modal/video-share.component.ts b/client/src/app/shared/shared-share-modal/video-share.component.ts index 6c0d4a039..e0c98008c 100644 --- a/client/src/app/shared/shared-share-modal/video-share.component.ts +++ b/client/src/app/shared/shared-share-modal/video-share.component.ts @@ -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 diff --git a/client/src/assets/player/peertube-player-manager.ts b/client/src/assets/player/peertube-player-manager.ts index 1b2a67c77..b24b6966e 100644 --- a/client/src/assets/player/peertube-player-manager.ts +++ b/client/src/assets/player/peertube-player-manager.ts @@ -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() diff --git a/client/src/assets/player/types/manager-options.ts b/client/src/assets/player/types/manager-options.ts index 456ef115e..a6f00876f 100644 --- a/client/src/assets/player/types/manager-options.ts +++ b/client/src/assets/player/types/manager-options.ts @@ -21,6 +21,8 @@ export interface CustomizationOptions { stopTime: number | string controls?: boolean + controlBar?: boolean + muted?: boolean loop?: boolean subtitle?: string diff --git a/client/src/sass/player/control-bar.scss b/client/src/sass/player/control-bar.scss index 9b35c6cb2..56102d3fb 100644 --- a/client/src/sass/player/control-bar.scss +++ b/client/src/sass/player/control-bar.scss @@ -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; diff --git a/client/src/standalone/videos/embed.ts b/client/src/standalone/videos/embed.ts index c0af1dfb3..1fc8e229b 100644 --- a/client/src/standalone/videos/embed.ts +++ b/client/src/standalone/videos/embed.ts @@ -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, diff --git a/shared/core-utils/common/url.ts b/shared/core-utils/common/url.ts index 8020d9b28..fd54e7594 100644 --- a/shared/core-utils/common/url.ts +++ b/shared/core-utils/common/url.ts @@ -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') diff --git a/support/doc/api/embeds.md b/support/doc/api/embeds.md index d64615764..bc3b5304c 100644 --- a/support/doc/api/embeds.md +++ b/support/doc/api/embeds.md @@ -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` -- cgit v1.2.3