Add control bar option for peertube player

7 files changed, 22 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,