From 15a7eafb892441957ba7dd6fcbf556086fe5b2b3 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Mon, 26 Jul 2021 15:04:37 +0200 Subject: Refactor video links builders --- .../p2p-media-loader/p2p-media-loader-plugin.ts | 2 +- .../src/assets/player/peertube-player-manager.ts | 3 +- client/src/assets/player/peertube-plugin.ts | 12 +- .../assets/player/playlist/playlist-menu-item.ts | 2 +- client/src/assets/player/stats/stats-card.ts | 3 +- client/src/assets/player/utils.ts | 148 +-------------------- .../videojs-components/peertube-link-button.ts | 2 +- .../assets/player/webtorrent/webtorrent-plugin.ts | 11 +- 8 files changed, 19 insertions(+), 164 deletions(-) (limited to 'client/src/assets/player') diff --git a/client/src/assets/player/p2p-media-loader/p2p-media-loader-plugin.ts b/client/src/assets/player/p2p-media-loader/p2p-media-loader-plugin.ts index f1bd9f0c4..2eb849d2b 100644 --- a/client/src/assets/player/p2p-media-loader/p2p-media-loader-plugin.ts +++ b/client/src/assets/player/p2p-media-loader/p2p-media-loader-plugin.ts @@ -2,8 +2,8 @@ import * as Hlsjs from 'hls.js/dist/hls.light.js' import { Events, Segment } from 'p2p-media-loader-core' import { Engine, initHlsJsPlayer, initVideoJsContribHlsJsPlayer } from 'p2p-media-loader-hlsjs' import videojs from 'video.js' +import { timeToInt } from '@shared/core-utils' import { P2PMediaLoaderPluginOptions, PlayerNetworkInfo } from '../peertube-videojs-typings' -import { timeToInt } from '../utils' import { registerConfigPlugin, registerSourceHandler } from './hls-plugin' registerConfigPlugin(videojs) diff --git a/client/src/assets/player/peertube-player-manager.ts b/client/src/assets/player/peertube-player-manager.ts index 6f0b804cd..766ad203e 100644 --- a/client/src/assets/player/peertube-player-manager.ts +++ b/client/src/assets/player/peertube-player-manager.ts @@ -23,6 +23,7 @@ import './videojs-components/theater-button' import './playlist/playlist-plugin' import videojs from 'video.js' import { PluginsManager } from '@root-helpers/plugins-manager' +import { buildVideoLink, decorateVideoLink } from '@shared/core-utils' import { isDefaultLocale } from '@shared/core-utils/i18n' import { VideoFile } from '@shared/models' import { copyToClipboard } from '../../root-helpers/utils' @@ -40,7 +41,7 @@ import { VideoJSPluginOptions } from './peertube-videojs-typings' import { TranslationsManager } from './translations-manager' -import { buildVideoLink, buildVideoOrPlaylistEmbed, decorateVideoLink, getRtcConfig, isIOS, isSafari } from './utils' +import { buildVideoOrPlaylistEmbed, getRtcConfig, isIOS, isSafari } from './utils' // Change 'Playback Rate' to 'Speed' (smaller for our settings menu) (videojs.getComponent('PlaybackRateMenuButton') as any).prototype.controlText_ = 'Speed' diff --git a/client/src/assets/player/peertube-plugin.ts b/client/src/assets/player/peertube-plugin.ts index 07c7e33f6..919b7c239 100644 --- a/client/src/assets/player/peertube-plugin.ts +++ b/client/src/assets/player/peertube-plugin.ts @@ -1,12 +1,6 @@ -import videojs from 'video.js' import './videojs-components/settings-menu-button' -import { - PeerTubePluginOptions, - ResolutionUpdateData, - UserWatching, - VideoJSCaption -} from './peertube-videojs-typings' -import { isMobile, timeToInt } from './utils' +import videojs from 'video.js' +import { timeToInt } from '@shared/core-utils' import { getStoredLastSubtitle, getStoredMute, @@ -16,6 +10,8 @@ import { saveVideoWatchHistory, saveVolumeInStore } from './peertube-player-local-storage' +import { PeerTubePluginOptions, ResolutionUpdateData, UserWatching, VideoJSCaption } from './peertube-videojs-typings' +import { isMobile } from './utils' const Plugin = videojs.getPlugin('plugin') diff --git a/client/src/assets/player/playlist/playlist-menu-item.ts b/client/src/assets/player/playlist/playlist-menu-item.ts index 87a72b6a3..2519a34c7 100644 --- a/client/src/assets/player/playlist/playlist-menu-item.ts +++ b/client/src/assets/player/playlist/playlist-menu-item.ts @@ -1,7 +1,7 @@ import videojs from 'video.js' +import { secondsToTime } from '@shared/core-utils' import { VideoPlaylistElement } from '@shared/models' import { PlaylistItemOptions } from '../peertube-videojs-typings' -import { secondsToTime } from '../utils' const Component = videojs.getComponent('Component') diff --git a/client/src/assets/player/stats/stats-card.ts b/client/src/assets/player/stats/stats-card.ts index a93f59506..b271d0526 100644 --- a/client/src/assets/player/stats/stats-card.ts +++ b/client/src/assets/player/stats/stats-card.ts @@ -1,6 +1,7 @@ import videojs from 'video.js' +import { secondsToTime } from '@shared/core-utils' import { PlayerNetworkInfo as EventPlayerNetworkInfo } from '../peertube-videojs-typings' -import { bytes, secondsToTime } from '../utils' +import { bytes } from '../utils' interface StatsCardOptions extends videojs.ComponentOptions { videoUUID: string diff --git a/client/src/assets/player/utils.ts b/client/src/assets/player/utils.ts index eb9302493..f0a1b1aee 100644 --- a/client/src/assets/player/utils.ts +++ b/client/src/assets/player/utils.ts @@ -1,5 +1,5 @@ -import { Video, VideoFile, VideoPlaylist } from '@shared/models' import { escapeHTML } from '@shared/core-utils/renderer' +import { VideoFile } from '@shared/models' function toTitleCase (str: string) { return str.charAt(0).toUpperCase() + str.slice(1) @@ -43,144 +43,9 @@ function isMobile () { return /iPhone|iPad|iPod|Android/i.test(navigator.userAgent) } -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 - - subtitle?: string - - loop?: boolean - autoplay?: boolean - muted?: boolean - - // Embed options - title?: boolean - warningTitle?: boolean - controls?: boolean - peertubeLink?: boolean -}) { - const { url } = options - - const params = generateParams(window.location.search) - - if (options.startTime !== undefined && options.startTime !== null) { - const startTimeInt = Math.floor(options.startTime) - params.set('start', secondsToTime(startTimeInt)) - } - - if (options.stopTime) { - const stopTimeInt = Math.floor(options.stopTime) - params.set('stop', secondsToTime(stopTimeInt)) - } - - if (options.subtitle) params.set('subtitle', options.subtitle) - - if (options.loop === true) params.set('loop', '1') - if (options.autoplay === true) params.set('autoplay', '1') - if (options.muted === true) params.set('muted', '1') - if (options.title === false) params.set('title', '0') - if (options.warningTitle === false) params.set('warningTitle', '0') - if (options.controls === false) params.set('controls', '0') - if (options.peertubeLink === false) params.set('peertubeLink', '0') - - return buildUrl(url, params) -} - -function decoratePlaylistLink (options: { - url: string - - playlistPosition?: number -}) { - const { url } = options - - const params = generateParams(window.location.search) - - if (options.playlistPosition) params.set('playlistPosition', '' + options.playlistPosition) - - return buildUrl(url, params) -} - -function buildUrl (url: string, params: URLSearchParams) { - let hasParams = false - params.forEach(() => hasParams = true) - - if (hasParams) return url + '?' + params.toString() - - return url -} - -function generateParams (url: string) { - const params = new URLSearchParams(window.location.search) - // Unused parameters in embed - params.delete('videoId') - params.delete('resume') - - return params -} - -function timeToInt (time: number | string) { - if (!time) return 0 - if (typeof time === 'number') return time - - const reg = /^((\d+)[h:])?((\d+)[m:])?((\d+)s?)?$/ - const matches = time.match(reg) - - if (!matches) return 0 - - const hours = parseInt(matches[2] || '0', 10) - const minutes = parseInt(matches[4] || '0', 10) - const seconds = parseInt(matches[6] || '0', 10) - - return hours * 3600 + minutes * 60 + seconds -} - -function secondsToTime (seconds: number, full = false, symbol?: string) { - let time = '' - - if (seconds === 0 && !full) return '0s' - - const hourSymbol = (symbol || 'h') - const minuteSymbol = (symbol || 'm') - const secondsSymbol = full ? '' : 's' - - const hours = Math.floor(seconds / 3600) - if (hours >= 1) time = hours + hourSymbol - else if (full) time = '0' + hourSymbol - - seconds %= 3600 - const minutes = Math.floor(seconds / 60) - if (minutes >= 1 && minutes < 10 && full) time += '0' + minutes + minuteSymbol - else if (minutes >= 1) time += minutes + minuteSymbol - else if (full) time += '00' + minuteSymbol - - seconds %= 60 - if (seconds >= 1 && seconds < 10 && full) time += '0' + seconds + secondsSymbol - else if (seconds >= 1) time += seconds + secondsSymbol - else if (full) time += '00' - - return time -} - function buildVideoOrPlaylistEmbed (embedUrl: string, embedTitle: string) { const title = escapeHTML(embedTitle) + return '