From 9162fdd36300d2478f13d6ad346ec2c323f40faa Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Mon, 26 Jul 2021 14:12:39 +0200 Subject: Refactor video links building --- .../src/assets/player/peertube-player-manager.ts | 42 ++++++++++++++++---- .../src/assets/player/peertube-videojs-typings.ts | 5 +++ client/src/assets/player/utils.ts | 46 ++++++++++++++-------- .../videojs-components/peertube-link-button.ts | 18 ++++++--- 4 files changed, 83 insertions(+), 28 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 b071a0938..6f0b804cd 100644 --- a/client/src/assets/player/peertube-player-manager.ts +++ b/client/src/assets/player/peertube-player-manager.ts @@ -33,13 +33,14 @@ import { getStoredP2PEnabled } from './peertube-player-local-storage' import { NextPreviousVideoButtonOptions, P2PMediaLoaderPluginOptions, + PeerTubeLinkButtonOptions, PlaylistPluginOptions, UserWatching, VideoJSCaption, VideoJSPluginOptions } from './peertube-videojs-typings' import { TranslationsManager } from './translations-manager' -import { buildVideoLink, buildVideoOrPlaylistEmbed, getRtcConfig, isIOS, isSafari } from './utils' +import { buildVideoLink, buildVideoOrPlaylistEmbed, decorateVideoLink, getRtcConfig, isIOS, isSafari } from './utils' // Change 'Playback Rate' to 'Speed' (smaller for our settings menu) (videojs.getComponent('PlaybackRateMenuButton') as any).prototype.controlText_ = 'Speed' @@ -110,6 +111,7 @@ export interface CommonOptions extends CustomizationOptions { videoCaptions: VideoJSCaption[] videoUUID: string + videoShortUUID: string userWatching?: UserWatching @@ -175,7 +177,13 @@ export class PeertubePlayerManager { PeertubePlayerManager.alreadyPlayed = true }) - self.addContextMenu(mode, player, options.common.embedUrl, options.common.embedTitle) + self.addContextMenu({ + mode, + player, + videoShortUUID: options.common.videoShortUUID, + videoEmbedUrl: options.common.embedUrl, + videoEmbedTitle: options.common.embedTitle + }) player.bezels() player.stats({ @@ -218,7 +226,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, + videoShortUUID: options.common.videoShortUUID, + videoEmbedUrl: options.common.embedUrl, + videoEmbedTitle: options.common.embedTitle + }) PeertubePlayerManager.onPlayerChange(player) }) @@ -295,6 +309,8 @@ export class PeertubePlayerManager { controlBar: { children: this.getControlBarChildren(mode, { + videoShortUUID: commonOptions.videoShortUUID, + captions: commonOptions.captions, peertubeLink: commonOptions.peertubeLink, theaterButton: commonOptions.theaterButton, @@ -409,6 +425,8 @@ export class PeertubePlayerManager { } private static getControlBarChildren (mode: PlayerMode, options: { + videoShortUUID: string + peertubeLink: boolean theaterButton: boolean captions: boolean @@ -497,7 +515,7 @@ export class PeertubePlayerManager { if (options.peertubeLink === true) { Object.assign(children, { - 'peerTubeLinkButton': {} + 'peerTubeLinkButton': { shortUUID: options.videoShortUUID } as PeerTubeLinkButtonOptions }) } @@ -514,7 +532,15 @@ 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 + videoShortUUID: string + videoEmbedUrl: string + videoEmbedTitle: string + }) { + const { mode, player, videoEmbedTitle, videoEmbedUrl, videoShortUUID } = options + const content = () => { const isLoopEnabled = player.options_['loop'] const items = [ @@ -528,13 +554,15 @@ export class PeertubePlayerManager { { label: player.localize('Copy the video URL'), listener: function () { - copyToClipboard(buildVideoLink()) + copyToClipboard(buildVideoLink({ shortUUID: videoShortUUID })) } }, { label: player.localize('Copy the video URL at the current time'), listener: function (this: videojs.Player) { - copyToClipboard(buildVideoLink({ startTime: this.currentTime() })) + const url = buildVideoLink({ shortUUID: videoShortUUID }) + + copyToClipboard(decorateVideoLink({ url, startTime: this.currentTime() })) } }, { diff --git a/client/src/assets/player/peertube-videojs-typings.ts b/client/src/assets/player/peertube-videojs-typings.ts index 8afb424a7..d3c75990b 100644 --- a/client/src/assets/player/peertube-videojs-typings.ts +++ b/client/src/assets/player/peertube-videojs-typings.ts @@ -132,6 +132,10 @@ type NextPreviousVideoButtonOptions = { isDisabled: () => boolean } +type PeerTubeLinkButtonOptions = { + shortUUID: string +} + type WebtorrentPluginOptions = { playerElement: HTMLVideoElement @@ -225,5 +229,6 @@ export { VideoJSPluginOptions, LoadedQualityData, QualityLevelRepresentation, + PeerTubeLinkButtonOptions, QualityLevels } diff --git a/client/src/assets/player/utils.ts b/client/src/assets/player/utils.ts index 2bb70d1fa..eb9302493 100644 --- a/client/src/assets/player/utils.ts +++ b/client/src/assets/player/utils.ts @@ -1,4 +1,4 @@ -import { VideoFile } from '@shared/models' +import { Video, VideoFile, VideoPlaylist } from '@shared/models' import { escapeHTML } from '@shared/core-utils/renderer' function toTitleCase (str: string) { @@ -43,8 +43,24 @@ function isMobile () { return /iPhone|iPad|iPod|Android/i.test(navigator.userAgent) } -function buildVideoLink (options: { - baseUrl?: string +function buildPlaylistLink (playlist: Pick, base?: string) { + return (base ?? window.location.origin) + '/w/p/' + playlist.shortUUID +} + +function buildVideoLink (video: Pick, base?: string) { + return (base ?? window.location.origin) + '/w/' + video.shortUUID +} + +function buildPlaylistEmbedLink (playlist: Pick, base?: string) { + return (base ?? window.location.origin) + '/video-playlists/embed/' + playlist.uuid +} + +function buildVideoEmbedLink (video: Pick, base?: string) { + return (base ?? window.location.origin) + '/videos/embed/' + video.uuid +} + +function decorateVideoLink (options: { + url: string startTime?: number stopTime?: number @@ -60,12 +76,8 @@ function buildVideoLink (options: { warningTitle?: boolean controls?: boolean peertubeLink?: boolean -} = {}) { - const { baseUrl } = options - - const url = baseUrl - ? baseUrl - : window.location.origin + window.location.pathname.replace('/embed/', '/w/') +}) { + const { url } = options const params = generateParams(window.location.search) @@ -92,16 +104,12 @@ function buildVideoLink (options: { return buildUrl(url, params) } -function buildPlaylistLink (options: { - baseUrl?: string +function decoratePlaylistLink (options: { + url: string playlistPosition?: number }) { - const { baseUrl } = options - - const url = baseUrl - ? baseUrl - : window.location.origin + window.location.pathname.replace('/video-playlists/embed/', '/w/p/') + const { url } = options const params = generateParams(window.location.search) @@ -224,8 +232,14 @@ export { timeToInt, secondsToTime, isWebRTCDisabled, + buildPlaylistLink, buildVideoLink, + decorateVideoLink, + decoratePlaylistLink, + buildPlaylistEmbedLink, + buildVideoEmbedLink, + buildVideoOrPlaylistEmbed, videoFileMaxByResolution, videoFileMinByResolution, diff --git a/client/src/assets/player/videojs-components/peertube-link-button.ts b/client/src/assets/player/videojs-components/peertube-link-button.ts index e73c95900..f47c165d9 100644 --- a/client/src/assets/player/videojs-components/peertube-link-button.ts +++ b/client/src/assets/player/videojs-components/peertube-link-button.ts @@ -1,11 +1,13 @@ -import { buildVideoLink } from '../utils' import videojs from 'video.js' +import { PeerTubeLinkButtonOptions } from '../peertube-videojs-typings' +import { buildVideoLink, decorateVideoLink } from '../utils' const Button = videojs.getComponent('Button') class PeerTubeLinkButton extends Button { + private shortUUID: string - constructor (player: videojs.Player, options?: videojs.ComponentOptions) { - super(player, options) + constructor (player: videojs.Player, options?: PeerTubeLinkButtonOptions) { + super(player, options as any) } createEl () { @@ -13,7 +15,7 @@ class PeerTubeLinkButton extends Button { } updateHref () { - this.el().setAttribute('href', buildVideoLink({ startTime: this.player().currentTime() })) + this.el().setAttribute('href', this.buildLink()) } handleClick () { @@ -22,7 +24,7 @@ class PeerTubeLinkButton extends Button { private buildElement () { const el = videojs.dom.createEl('a', { - href: buildVideoLink(), + href: this.buildLink(), innerHTML: 'PeerTube', title: this.player().localize('Video page (new window)'), className: 'vjs-peertube-link', @@ -33,6 +35,12 @@ class PeerTubeLinkButton extends Button { return el as HTMLButtonElement } + + private buildLink () { + const url = buildVideoLink({ shortUUID: this.shortUUID }) + + return decorateVideoLink({ url, startTime: this.player().currentTime() }) + } } videojs.registerComponent('PeerTubeLinkButton', PeerTubeLinkButton) -- cgit v1.2.3