diff options
Diffstat (limited to 'client/src/assets/player')
-rw-r--r-- | client/src/assets/player/peertube-player-manager.ts | 110 | ||||
-rw-r--r-- | client/src/assets/player/peertube-videojs-typings.ts | 9 | ||||
-rw-r--r-- | client/src/assets/player/utils.ts | 6 |
3 files changed, 36 insertions, 89 deletions
diff --git a/client/src/assets/player/peertube-player-manager.ts b/client/src/assets/player/peertube-player-manager.ts index 689e70fb5..ed82e0496 100644 --- a/client/src/assets/player/peertube-player-manager.ts +++ b/client/src/assets/player/peertube-player-manager.ts | |||
@@ -35,7 +35,7 @@ import { | |||
35 | VideoJSPluginOptions | 35 | VideoJSPluginOptions |
36 | } from './peertube-videojs-typings' | 36 | } from './peertube-videojs-typings' |
37 | import { TranslationsManager } from './translations-manager' | 37 | import { TranslationsManager } from './translations-manager' |
38 | import { buildVideoOrPlaylistEmbed, buildVideoLink, getRtcConfig, isSafari, isIOS, buildPlaylistLink } from './utils' | 38 | import { buildVideoOrPlaylistEmbed, buildVideoLink, getRtcConfig, isSafari, isIOS } from './utils' |
39 | import { copyToClipboard } from '../../root-helpers/utils' | 39 | import { copyToClipboard } from '../../root-helpers/utils' |
40 | 40 | ||
41 | // Change 'Playback Rate' to 'Speed' (smaller for our settings menu) | 41 | // Change 'Playback Rate' to 'Speed' (smaller for our settings menu) |
@@ -87,8 +87,6 @@ export interface CommonOptions extends CustomizationOptions { | |||
87 | hasPreviousVideo?: () => boolean | 87 | hasPreviousVideo?: () => boolean |
88 | 88 | ||
89 | playlist?: PlaylistPluginOptions | 89 | playlist?: PlaylistPluginOptions |
90 | playlistEmbedUrl?: string | ||
91 | playlistEmbedTitle?: string | ||
92 | 90 | ||
93 | videoDuration: number | 91 | videoDuration: number |
94 | enableHotkeys: boolean | 92 | enableHotkeys: boolean |
@@ -169,13 +167,7 @@ export class PeertubePlayerManager { | |||
169 | PeertubePlayerManager.alreadyPlayed = true | 167 | PeertubePlayerManager.alreadyPlayed = true |
170 | }) | 168 | }) |
171 | 169 | ||
172 | self.addContextMenu({ | 170 | self.addContextMenu(mode, player, options.common.embedUrl, options.common.embedTitle) |
173 | mode, | ||
174 | player, | ||
175 | videoEmbedUrl: options.common.embedUrl, | ||
176 | videoEmbedTitle: options.common.embedTitle, | ||
177 | playlist: options.common.playlist | ||
178 | }) | ||
179 | 171 | ||
180 | player.bezels() | 172 | player.bezels() |
181 | 173 | ||
@@ -213,13 +205,7 @@ export class PeertubePlayerManager { | |||
213 | videojs(newVideoElement, videojsOptions, function (this: videojs.Player) { | 205 | videojs(newVideoElement, videojsOptions, function (this: videojs.Player) { |
214 | const player = this | 206 | const player = this |
215 | 207 | ||
216 | self.addContextMenu({ | 208 | self.addContextMenu(mode, player, options.common.embedUrl, options.common.embedTitle) |
217 | mode, | ||
218 | player, | ||
219 | videoEmbedUrl: options.common.embedUrl, | ||
220 | videoEmbedTitle: options.common.embedTitle, | ||
221 | playlist: options.common.playlist | ||
222 | }) | ||
223 | 209 | ||
224 | PeertubePlayerManager.onPlayerChange(player) | 210 | PeertubePlayerManager.onPlayerChange(player) |
225 | }) | 211 | }) |
@@ -253,7 +239,7 @@ export class PeertubePlayerManager { | |||
253 | } | 239 | } |
254 | } | 240 | } |
255 | 241 | ||
256 | if (commonOptions.playlist?.createComponent === true) { | 242 | if (commonOptions.playlist) { |
257 | plugins.playlist = commonOptions.playlist | 243 | plugins.playlist = commonOptions.playlist |
258 | } | 244 | } |
259 | 245 | ||
@@ -511,71 +497,37 @@ export class PeertubePlayerManager { | |||
511 | return children | 497 | return children |
512 | } | 498 | } |
513 | 499 | ||
514 | private static addContextMenu (options: { | 500 | private static addContextMenu (mode: PlayerMode, player: videojs.Player, videoEmbedUrl: string, videoEmbedTitle: string) { |
515 | mode: PlayerMode | ||
516 | player: videojs.Player | ||
517 | videoEmbedUrl: string | ||
518 | videoEmbedTitle: string | ||
519 | playlist?: PlaylistPluginOptions | ||
520 | }) { | ||
521 | const { mode, player, videoEmbedUrl, videoEmbedTitle, playlist } = options | ||
522 | |||
523 | const content = () => { | 501 | const content = () => { |
524 | let items: { icon?: string, label: string, listener: Function }[] = [] | 502 | const isLoopEnabled = player.options_['loop'] |
525 | 503 | const items = [ | |
526 | if (!playlist) { | 504 | { |
527 | const isLoopEnabled = player.options_['loop'] | 505 | icon: 'repeat', |
528 | items = items.concat([ | 506 | label: player.localize('Play in loop') + (isLoopEnabled ? '<span class="vjs-icon-tick-white"></span>' : ''), |
529 | { | 507 | listener: function () { |
530 | icon: 'repeat', | 508 | player.options_['loop'] = !isLoopEnabled |
531 | label: player.localize('Play in loop') + (isLoopEnabled ? '<span class="vjs-icon-tick-white"></span>' : ''), | ||
532 | listener: function () { | ||
533 | player.options_['loop'] = !isLoopEnabled | ||
534 | } | ||
535 | }, | ||
536 | { | ||
537 | label: player.localize('Copy the video URL'), | ||
538 | listener: function () { | ||
539 | copyToClipboard(buildVideoLink()) | ||
540 | } | ||
541 | }, | ||
542 | { | ||
543 | label: player.localize('Copy the video URL at the current time'), | ||
544 | listener: function (this: videojs.Player) { | ||
545 | copyToClipboard(buildVideoLink({ startTime: this.currentTime() })) | ||
546 | } | ||
547 | } | 509 | } |
548 | ]) | 510 | }, |
549 | } else { | 511 | { |
550 | items = items.concat([ | 512 | label: player.localize('Copy the video URL'), |
551 | { | 513 | listener: function () { |
552 | label: player.localize('Copy the playlist URL'), | 514 | copyToClipboard(buildVideoLink()) |
553 | listener: function () { | 515 | } |
554 | copyToClipboard(buildPlaylistLink()) | 516 | }, |
555 | } | 517 | { |
556 | }, | 518 | label: player.localize('Copy the video URL at the current time'), |
557 | { | 519 | listener: function (this: videojs.Player) { |
558 | label: player.localize('Copy the playlist URL at current video position'), | 520 | copyToClipboard(buildVideoLink({ startTime: this.currentTime() })) |
559 | listener: function (this: videojs.Player) { | 521 | } |
560 | copyToClipboard(buildPlaylistLink({ playlistPosition: playlist.getCurrentPosition() })) | 522 | }, |
561 | } | 523 | { |
562 | }, | 524 | icon: 'code', |
563 | { | 525 | label: player.localize('Copy embed code'), |
564 | label: player.localize('Copy the playlist embed code'), | 526 | listener: () => { |
565 | listener: function (this: videojs.Player) { | 527 | copyToClipboard(buildVideoOrPlaylistEmbed(videoEmbedUrl, videoEmbedTitle)) |
566 | copyToClipboard(buildVideoOrPlaylistEmbed(playlist.embedUrl, playlist.embedTitle)) | ||
567 | } | ||
568 | } | 528 | } |
569 | ]) | ||
570 | } | ||
571 | |||
572 | items = items.concat({ | ||
573 | icon: 'code', | ||
574 | label: player.localize('Copy video embed code'), | ||
575 | listener: () => { | ||
576 | copyToClipboard(buildVideoOrPlaylistEmbed(videoEmbedUrl, videoEmbedTitle)) | ||
577 | } | 529 | } |
578 | }) | 530 | ] |
579 | 531 | ||
580 | if (mode === 'webtorrent') { | 532 | if (mode === 'webtorrent') { |
581 | items.push({ | 533 | items.push({ |
diff --git a/client/src/assets/player/peertube-videojs-typings.ts b/client/src/assets/player/peertube-videojs-typings.ts index a48ff2cd0..4a6c80247 100644 --- a/client/src/assets/player/peertube-videojs-typings.ts +++ b/client/src/assets/player/peertube-videojs-typings.ts | |||
@@ -113,18 +113,13 @@ type PeerTubePluginOptions = { | |||
113 | } | 113 | } |
114 | 114 | ||
115 | type PlaylistPluginOptions = { | 115 | type PlaylistPluginOptions = { |
116 | createComponent: boolean | 116 | elements: VideoPlaylistElement[] |
117 | |||
118 | elements?: VideoPlaylistElement[] | ||
119 | 117 | ||
120 | playlist: VideoPlaylist | 118 | playlist: VideoPlaylist |
121 | 119 | ||
122 | getCurrentPosition: () => number | 120 | getCurrentPosition: () => number |
123 | 121 | ||
124 | embedUrl: string | 122 | onItemClicked: (element: VideoPlaylistElement) => void |
125 | embedTitle: string | ||
126 | |||
127 | onItemClicked?: (element: VideoPlaylistElement) => void | ||
128 | } | 123 | } |
129 | 124 | ||
130 | type NextPreviousVideoButtonOptions = { | 125 | type NextPreviousVideoButtonOptions = { |
diff --git a/client/src/assets/player/utils.ts b/client/src/assets/player/utils.ts index 136b69b4f..d7451fa1d 100644 --- a/client/src/assets/player/utils.ts +++ b/client/src/assets/player/utils.ts | |||
@@ -94,8 +94,9 @@ function buildVideoLink (options: { | |||
94 | 94 | ||
95 | function buildPlaylistLink (options: { | 95 | function buildPlaylistLink (options: { |
96 | baseUrl?: string | 96 | baseUrl?: string |
97 | playlistPosition?: number | 97 | |
98 | } = {}) { | 98 | playlistPosition: number |
99 | }) { | ||
99 | const { baseUrl } = options | 100 | const { baseUrl } = options |
100 | 101 | ||
101 | const url = baseUrl | 102 | const url = baseUrl |
@@ -105,7 +106,6 @@ function buildPlaylistLink (options: { | |||
105 | const params = generateParams(window.location.search) | 106 | const params = generateParams(window.location.search) |
106 | 107 | ||
107 | if (options.playlistPosition) params.set('playlistPosition', '' + options.playlistPosition) | 108 | if (options.playlistPosition) params.set('playlistPosition', '' + options.playlistPosition) |
108 | else params.delete('playlistPosition') | ||
109 | 109 | ||
110 | return buildUrl(url, params) | 110 | return buildUrl(url, params) |
111 | } | 111 | } |