Add control bar option for peertube player

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 @@
 
             <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>
 
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<void>`