aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2022-05-20 09:59:53 +0200
committerChocobozzz <me@florianbigard.com>2022-05-20 09:59:53 +0200
commit60f013e1031871b7e0913c724f0bd2e569721c8e (patch)
tree9a138d17223292d02ac25ec36392aef30d203d3c
parenta871d2a27324defde9a9ee6a998907886715f18e (diff)
downloadPeerTube-60f013e1031871b7e0913c724f0bd2e569721c8e.tar.gz
PeerTube-60f013e1031871b7e0913c724f0bd2e569721c8e.tar.zst
PeerTube-60f013e1031871b7e0913c724f0bd2e569721c8e.zip
Add control bar option for peertube player
-rw-r--r--client/src/app/+videos/+video-watch/video-watch.component.ts1
-rw-r--r--client/src/app/shared/shared-share-modal/video-share.component.html4
-rw-r--r--client/src/app/shared/shared-share-modal/video-share.component.ts6
-rw-r--r--client/src/assets/player/peertube-player-manager.ts1
-rw-r--r--client/src/assets/player/types/manager-options.ts2
-rw-r--r--client/src/sass/player/control-bar.scss4
-rw-r--r--client/src/standalone/videos/embed.ts9
-rw-r--r--shared/core-utils/common/url.ts6
-rw-r--r--support/doc/api/embeds.md53
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 {
602 602
603 startTime, 603 startTime,
604 stopTime: urlOptions.stopTime, 604 stopTime: urlOptions.stopTime,
605 controlBar: urlOptions.controlBar,
605 controls: urlOptions.controls, 606 controls: urlOptions.controls,
606 muted: urlOptions.muted, 607 muted: urlOptions.muted,
607 loop: urlOptions.loop, 608 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 @@
250 250
251 <div class="form-group"> 251 <div class="form-group">
252 <my-peertube-checkbox 252 <my-peertube-checkbox
253 inputName="controls" [(ngModel)]="customizations.controls" 253 inputName="controlBar" [(ngModel)]="customizations.controlBar"
254 i18n-labelText labelText="Display player controls" 254 i18n-labelText labelText="Display player control bar"
255 ></my-peertube-checkbox> 255 ></my-peertube-checkbox>
256 </div> 256 </div>
257 257
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 = {
27 onlyEmbedUrl: boolean 27 onlyEmbedUrl: boolean
28 title: boolean 28 title: boolean
29 warningTitle: boolean 29 warningTitle: boolean
30 controls: boolean 30 controlBar: boolean
31 peertubeLink: boolean 31 peertubeLink: boolean
32} 32}
33 33
@@ -88,7 +88,7 @@ export class VideoShareComponent {
88 onlyEmbedUrl: false, 88 onlyEmbedUrl: false,
89 title: true, 89 title: true,
90 warningTitle: true, 90 warningTitle: true,
91 controls: true, 91 controlBar: true,
92 peertubeLink: true 92 peertubeLink: true
93 }, { 93 }, {
94 set: (target, prop, value) => { 94 set: (target, prop, value) => {
@@ -190,7 +190,7 @@ export class VideoShareComponent {
190 ? { 190 ? {
191 title: this.customizations.title, 191 title: this.customizations.title,
192 warningTitle: this.customizations.warningTitle, 192 warningTitle: this.customizations.warningTitle,
193 controls: this.customizations.controls, 193 controlBar: this.customizations.controlBar,
194 peertubeLink: this.customizations.peertubeLink, 194 peertubeLink: this.customizations.peertubeLink,
195 195
196 // If using default value, we don't need to specify it 196 // 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 {
110 110
111 if (isMobile()) player.peertubeMobile() 111 if (isMobile()) player.peertubeMobile()
112 if (options.common.enableHotkeys === true) player.peerTubeHotkeysPlugin() 112 if (options.common.enableHotkeys === true) player.peerTubeHotkeysPlugin()
113 if (options.common.controlBar === false) player.controlBar.addClass('control-bar-hidden')
113 114
114 player.bezels() 115 player.bezels()
115 116
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 {
21 stopTime: number | string 21 stopTime: number | string
22 22
23 controls?: boolean 23 controls?: boolean
24 controlBar?: boolean
25
24 muted?: boolean 26 muted?: boolean
25 loop?: boolean 27 loop?: boolean
26 subtitle?: string 28 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 @@
4@use './_player-variables' as *; 4@use './_player-variables' as *;
5 5
6.video-js.vjs-peertube-skin .vjs-control-bar { 6.video-js.vjs-peertube-skin .vjs-control-bar {
7 &.control-bar-hidden {
8 display: none !important;
9 }
10
7 z-index: 100; 11 z-index: 100;
8 12
9 height: $control-bar-height; 13 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 {
37 api: PeerTubeEmbedApi = null 37 api: PeerTubeEmbedApi = null
38 38
39 autoplay: boolean 39 autoplay: boolean
40
40 controls: boolean 41 controls: boolean
42 controlBar: boolean
43
41 muted: boolean 44 muted: boolean
42 loop: boolean 45 loop: boolean
43 subtitle: string 46 subtitle: string
@@ -295,7 +298,10 @@ export class PeerTubeEmbed {
295 const params = new URL(window.location.toString()).searchParams 298 const params = new URL(window.location.toString()).searchParams
296 299
297 this.autoplay = this.getParamToggle(params, 'autoplay', false) 300 this.autoplay = this.getParamToggle(params, 'autoplay', false)
301
298 this.controls = this.getParamToggle(params, 'controls', true) 302 this.controls = this.getParamToggle(params, 'controls', true)
303 this.controlBar = this.getParamToggle(params, 'controlBar', true)
304
299 this.muted = this.getParamToggle(params, 'muted', undefined) 305 this.muted = this.getParamToggle(params, 'muted', undefined)
300 this.loop = this.getParamToggle(params, 'loop', false) 306 this.loop = this.getParamToggle(params, 'loop', false)
301 this.title = this.getParamToggle(params, 'title', true) 307 this.title = this.getParamToggle(params, 'title', true)
@@ -539,7 +545,10 @@ export class PeerTubeEmbed {
539 common: { 545 common: {
540 // Autoplay in playlist mode 546 // Autoplay in playlist mode
541 autoplay: alreadyHadPlayer ? true : this.autoplay, 547 autoplay: alreadyHadPlayer ? true : this.autoplay,
548
542 controls: this.controls, 549 controls: this.controls,
550 controlBar: this.controlBar,
551
543 muted: this.muted, 552 muted: this.muted,
544 loop: this.loop, 553 loop: this.loop,
545 554
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: {
48 // Embed options 48 // Embed options
49 title?: boolean 49 title?: boolean
50 warningTitle?: boolean 50 warningTitle?: boolean
51
51 controls?: boolean 52 controls?: boolean
53 controlBar?: boolean
54
52 peertubeLink?: boolean 55 peertubeLink?: boolean
53 p2p?: boolean 56 p2p?: boolean
54}) { 57}) {
@@ -73,7 +76,10 @@ function decorateVideoLink (options: {
73 if (options.muted === true) params.set('muted', '1') 76 if (options.muted === true) params.set('muted', '1')
74 if (options.title === false) params.set('title', '0') 77 if (options.title === false) params.set('title', '0')
75 if (options.warningTitle === false) params.set('warningTitle', '0') 78 if (options.warningTitle === false) params.set('warningTitle', '0')
79
76 if (options.controls === false) params.set('controls', '0') 80 if (options.controls === false) params.set('controls', '0')
81 if (options.controlBar === false) params.set('controlBar', '0')
82
77 if (options.peertubeLink === false) params.set('peertubeLink', '0') 83 if (options.peertubeLink === false) params.set('peertubeLink', '0')
78 if (options.p2p !== undefined) params.set('p2p', options.p2p ? '1' : '0') 84 if (options.p2p !== undefined) params.set('p2p', options.p2p ? '1' : '0')
79 85
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)
49player.pause() 49player.pause()
50``` 50```
51 51
52# URL parameters
53
54You can customize PeerTube player by specifying URL query parameters.
55For 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`
56
57## start
58
59Start the video at a specific time.
60Value must be raw seconds or a duration (`3m4s`)
61
62## stop
63
64Stop the video at a specific time.
65Value must be raw seconds or a duration (`54s`)
66
67## controls
68
69Mimics video HTML element `controls` attribute, meaning that all controls (including big play button, control bar, etc.) will be removed.
70It can be useful if you want to have a full control of the PeerTube player.
71
72Value must be `0` or `1`.
73
74## controlBar
75
76Hide control bar when the video is played.
77
78Value must be `0` or `1`.
79
80## peertubeLink
81
82Hide PeerTube link in control bar.
83
84Value must be `0` or `1`.
85
86## muted
87
88Mute the video by default.
89
90Value must be `0` or `1`.
91
92## loop
93
94Automatically start again the video when it ends.
95
96Value must be `0` or `1`.
97
98## subtitle
99
100Auto select a subtitle by default.
101
102Value must be a valid subtitle ISO code (`fr`, `en`, etc.).
103
104
52# Methods 105# Methods
53 106
54## `play() : Promise<void>` 107## `play() : Promise<void>`