From e8bb5b6b3a1e4c2aeab368f01cc5092d8478b893 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Wed, 21 Apr 2021 09:46:55 +0200 Subject: Fix context menu when watching a playlist --- .../src/assets/player/peertube-player-manager.ts | 110 +++++++++++++++------ .../src/assets/player/peertube-videojs-typings.ts | 9 +- client/src/assets/player/utils.ts | 6 +- 3 files changed, 89 insertions(+), 36 deletions(-) (limited to 'client/src/assets') diff --git a/client/src/assets/player/peertube-player-manager.ts b/client/src/assets/player/peertube-player-manager.ts index ed82e0496..689e70fb5 100644 --- a/client/src/assets/player/peertube-player-manager.ts +++ b/client/src/assets/player/peertube-player-manager.ts @@ -35,7 +35,7 @@ import { VideoJSPluginOptions } from './peertube-videojs-typings' import { TranslationsManager } from './translations-manager' -import { buildVideoOrPlaylistEmbed, buildVideoLink, getRtcConfig, isSafari, isIOS } from './utils' +import { buildVideoOrPlaylistEmbed, buildVideoLink, getRtcConfig, isSafari, isIOS, buildPlaylistLink } from './utils' import { copyToClipboard } from '../../root-helpers/utils' // Change 'Playback Rate' to 'Speed' (smaller for our settings menu) @@ -87,6 +87,8 @@ export interface CommonOptions extends CustomizationOptions { hasPreviousVideo?: () => boolean playlist?: PlaylistPluginOptions + playlistEmbedUrl?: string + playlistEmbedTitle?: string videoDuration: number enableHotkeys: boolean @@ -167,7 +169,13 @@ export class PeertubePlayerManager { PeertubePlayerManager.alreadyPlayed = true }) - self.addContextMenu(mode, player, options.common.embedUrl, options.common.embedTitle) + self.addContextMenu({ + mode, + player, + videoEmbedUrl: options.common.embedUrl, + videoEmbedTitle: options.common.embedTitle, + playlist: options.common.playlist + }) player.bezels() @@ -205,7 +213,13 @@ export class PeertubePlayerManager { videojs(newVideoElement, videojsOptions, function (this: videojs.Player) { const player = this - self.addContextMenu(mode, player, options.common.embedUrl, options.common.embedTitle) + self.addContextMenu({ + mode, + player, + videoEmbedUrl: options.common.embedUrl, + videoEmbedTitle: options.common.embedTitle, + playlist: options.common.playlist + }) PeertubePlayerManager.onPlayerChange(player) }) @@ -239,7 +253,7 @@ export class PeertubePlayerManager { } } - if (commonOptions.playlist) { + if (commonOptions.playlist?.createComponent === true) { plugins.playlist = commonOptions.playlist } @@ -497,37 +511,71 @@ export class PeertubePlayerManager { return children } - private static addContextMenu (mode: PlayerMode, player: videojs.Player, videoEmbedUrl: string, videoEmbedTitle: string) { + private static addContextMenu (options: { + mode: PlayerMode + player: videojs.Player + videoEmbedUrl: string + videoEmbedTitle: string + playlist?: PlaylistPluginOptions + }) { + const { mode, player, videoEmbedUrl, videoEmbedTitle, playlist } = options + const content = () => { - const isLoopEnabled = player.options_['loop'] - const items = [ - { - icon: 'repeat', - label: player.localize('Play in loop') + (isLoopEnabled ? '' : ''), - listener: function () { - player.options_['loop'] = !isLoopEnabled - } - }, - { - label: player.localize('Copy the video URL'), - listener: function () { - copyToClipboard(buildVideoLink()) - } - }, - { - label: player.localize('Copy the video URL at the current time'), - listener: function (this: videojs.Player) { - copyToClipboard(buildVideoLink({ startTime: this.currentTime() })) + let items: { icon?: string, label: string, listener: Function }[] = [] + + if (!playlist) { + const isLoopEnabled = player.options_['loop'] + items = items.concat([ + { + icon: 'repeat', + label: player.localize('Play in loop') + (isLoopEnabled ? '' : ''), + listener: function () { + player.options_['loop'] = !isLoopEnabled + } + }, + { + label: player.localize('Copy the video URL'), + listener: function () { + copyToClipboard(buildVideoLink()) + } + }, + { + label: player.localize('Copy the video URL at the current time'), + listener: function (this: videojs.Player) { + copyToClipboard(buildVideoLink({ startTime: this.currentTime() })) + } } - }, - { - icon: 'code', - label: player.localize('Copy embed code'), - listener: () => { - copyToClipboard(buildVideoOrPlaylistEmbed(videoEmbedUrl, videoEmbedTitle)) + ]) + } else { + items = items.concat([ + { + label: player.localize('Copy the playlist URL'), + listener: function () { + copyToClipboard(buildPlaylistLink()) + } + }, + { + label: player.localize('Copy the playlist URL at current video position'), + listener: function (this: videojs.Player) { + copyToClipboard(buildPlaylistLink({ playlistPosition: playlist.getCurrentPosition() })) + } + }, + { + label: player.localize('Copy the playlist embed code'), + listener: function (this: videojs.Player) { + copyToClipboard(buildVideoOrPlaylistEmbed(playlist.embedUrl, playlist.embedTitle)) + } } + ]) + } + + items = items.concat({ + icon: 'code', + label: player.localize('Copy video embed code'), + listener: () => { + copyToClipboard(buildVideoOrPlaylistEmbed(videoEmbedUrl, videoEmbedTitle)) } - ] + }) if (mode === 'webtorrent') { items.push({ diff --git a/client/src/assets/player/peertube-videojs-typings.ts b/client/src/assets/player/peertube-videojs-typings.ts index 4a6c80247..a48ff2cd0 100644 --- a/client/src/assets/player/peertube-videojs-typings.ts +++ b/client/src/assets/player/peertube-videojs-typings.ts @@ -113,13 +113,18 @@ type PeerTubePluginOptions = { } type PlaylistPluginOptions = { - elements: VideoPlaylistElement[] + createComponent: boolean + + elements?: VideoPlaylistElement[] playlist: VideoPlaylist getCurrentPosition: () => number - onItemClicked: (element: VideoPlaylistElement) => void + embedUrl: string + embedTitle: string + + onItemClicked?: (element: VideoPlaylistElement) => void } type NextPreviousVideoButtonOptions = { diff --git a/client/src/assets/player/utils.ts b/client/src/assets/player/utils.ts index d7451fa1d..136b69b4f 100644 --- a/client/src/assets/player/utils.ts +++ b/client/src/assets/player/utils.ts @@ -94,9 +94,8 @@ function buildVideoLink (options: { function buildPlaylistLink (options: { baseUrl?: string - - playlistPosition: number -}) { + playlistPosition?: number +} = {}) { const { baseUrl } = options const url = baseUrl @@ -106,6 +105,7 @@ function buildPlaylistLink (options: { const params = generateParams(window.location.search) if (options.playlistPosition) params.set('playlistPosition', '' + options.playlistPosition) + else params.delete('playlistPosition') return buildUrl(url, params) } -- cgit v1.2.3