diff options
-rw-r--r-- | client/src/app/+videos/+video-watch/video-watch.component.ts | 1 | ||||
-rw-r--r-- | client/src/app/shared/shared-share-modal/video-share.component.html | 4 | ||||
-rw-r--r-- | client/src/app/shared/shared-share-modal/video-share.component.ts | 6 | ||||
-rw-r--r-- | client/src/assets/player/peertube-player-manager.ts | 1 | ||||
-rw-r--r-- | client/src/assets/player/types/manager-options.ts | 2 | ||||
-rw-r--r-- | client/src/sass/player/control-bar.scss | 4 | ||||
-rw-r--r-- | client/src/standalone/videos/embed.ts | 9 | ||||
-rw-r--r-- | shared/core-utils/common/url.ts | 6 | ||||
-rw-r--r-- | 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 { | |||
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) | |||
49 | player.pause() | 49 | player.pause() |
50 | ``` | 50 | ``` |
51 | 51 | ||
52 | # URL parameters | ||
53 | |||
54 | You can customize PeerTube player by specifying URL query parameters. | ||
55 | 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` | ||
56 | |||
57 | ## start | ||
58 | |||
59 | Start the video at a specific time. | ||
60 | Value must be raw seconds or a duration (`3m4s`) | ||
61 | |||
62 | ## stop | ||
63 | |||
64 | Stop the video at a specific time. | ||
65 | Value must be raw seconds or a duration (`54s`) | ||
66 | |||
67 | ## controls | ||
68 | |||
69 | Mimics video HTML element `controls` attribute, meaning that all controls (including big play button, control bar, etc.) will be removed. | ||
70 | It can be useful if you want to have a full control of the PeerTube player. | ||
71 | |||
72 | Value must be `0` or `1`. | ||
73 | |||
74 | ## controlBar | ||
75 | |||
76 | Hide control bar when the video is played. | ||
77 | |||
78 | Value must be `0` or `1`. | ||
79 | |||
80 | ## peertubeLink | ||
81 | |||
82 | Hide PeerTube link in control bar. | ||
83 | |||
84 | Value must be `0` or `1`. | ||
85 | |||
86 | ## muted | ||
87 | |||
88 | Mute the video by default. | ||
89 | |||
90 | Value must be `0` or `1`. | ||
91 | |||
92 | ## loop | ||
93 | |||
94 | Automatically start again the video when it ends. | ||
95 | |||
96 | Value must be `0` or `1`. | ||
97 | |||
98 | ## subtitle | ||
99 | |||
100 | Auto select a subtitle by default. | ||
101 | |||
102 | Value 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>` |