aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/assets
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2021-07-26 15:04:37 +0200
committerChocobozzz <me@florianbigard.com>2021-07-26 15:04:37 +0200
commit15a7eafb892441957ba7dd6fcbf556086fe5b2b3 (patch)
tree0786bd1a96c7d168a097ffcf5893737db2ab578e /client/src/assets
parent9162fdd36300d2478f13d6ad346ec2c323f40faa (diff)
downloadPeerTube-15a7eafb892441957ba7dd6fcbf556086fe5b2b3.tar.gz
PeerTube-15a7eafb892441957ba7dd6fcbf556086fe5b2b3.tar.zst
PeerTube-15a7eafb892441957ba7dd6fcbf556086fe5b2b3.zip
Refactor video links builders
Diffstat (limited to 'client/src/assets')
-rw-r--r--client/src/assets/player/p2p-media-loader/p2p-media-loader-plugin.ts2
-rw-r--r--client/src/assets/player/peertube-player-manager.ts3
-rw-r--r--client/src/assets/player/peertube-plugin.ts12
-rw-r--r--client/src/assets/player/playlist/playlist-menu-item.ts2
-rw-r--r--client/src/assets/player/stats/stats-card.ts3
-rw-r--r--client/src/assets/player/utils.ts148
-rw-r--r--client/src/assets/player/videojs-components/peertube-link-button.ts2
-rw-r--r--client/src/assets/player/webtorrent/webtorrent-plugin.ts11
8 files changed, 19 insertions, 164 deletions
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'
2import { Events, Segment } from 'p2p-media-loader-core' 2import { Events, Segment } from 'p2p-media-loader-core'
3import { Engine, initHlsJsPlayer, initVideoJsContribHlsJsPlayer } from 'p2p-media-loader-hlsjs' 3import { Engine, initHlsJsPlayer, initVideoJsContribHlsJsPlayer } from 'p2p-media-loader-hlsjs'
4import videojs from 'video.js' 4import videojs from 'video.js'
5import { timeToInt } from '@shared/core-utils'
5import { P2PMediaLoaderPluginOptions, PlayerNetworkInfo } from '../peertube-videojs-typings' 6import { P2PMediaLoaderPluginOptions, PlayerNetworkInfo } from '../peertube-videojs-typings'
6import { timeToInt } from '../utils'
7import { registerConfigPlugin, registerSourceHandler } from './hls-plugin' 7import { registerConfigPlugin, registerSourceHandler } from './hls-plugin'
8 8
9registerConfigPlugin(videojs) 9registerConfigPlugin(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'
23import './playlist/playlist-plugin' 23import './playlist/playlist-plugin'
24import videojs from 'video.js' 24import videojs from 'video.js'
25import { PluginsManager } from '@root-helpers/plugins-manager' 25import { PluginsManager } from '@root-helpers/plugins-manager'
26import { buildVideoLink, decorateVideoLink } from '@shared/core-utils'
26import { isDefaultLocale } from '@shared/core-utils/i18n' 27import { isDefaultLocale } from '@shared/core-utils/i18n'
27import { VideoFile } from '@shared/models' 28import { VideoFile } from '@shared/models'
28import { copyToClipboard } from '../../root-helpers/utils' 29import { copyToClipboard } from '../../root-helpers/utils'
@@ -40,7 +41,7 @@ import {
40 VideoJSPluginOptions 41 VideoJSPluginOptions
41} from './peertube-videojs-typings' 42} from './peertube-videojs-typings'
42import { TranslationsManager } from './translations-manager' 43import { TranslationsManager } from './translations-manager'
43import { buildVideoLink, buildVideoOrPlaylistEmbed, decorateVideoLink, getRtcConfig, isIOS, isSafari } from './utils' 44import { buildVideoOrPlaylistEmbed, getRtcConfig, isIOS, isSafari } from './utils'
44 45
45// Change 'Playback Rate' to 'Speed' (smaller for our settings menu) 46// Change 'Playback Rate' to 'Speed' (smaller for our settings menu)
46(videojs.getComponent('PlaybackRateMenuButton') as any).prototype.controlText_ = 'Speed' 47(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 @@
1import videojs from 'video.js'
2import './videojs-components/settings-menu-button' 1import './videojs-components/settings-menu-button'
3import { 2import videojs from 'video.js'
4 PeerTubePluginOptions, 3import { timeToInt } from '@shared/core-utils'
5 ResolutionUpdateData,
6 UserWatching,
7 VideoJSCaption
8} from './peertube-videojs-typings'
9import { isMobile, timeToInt } from './utils'
10import { 4import {
11 getStoredLastSubtitle, 5 getStoredLastSubtitle,
12 getStoredMute, 6 getStoredMute,
@@ -16,6 +10,8 @@ import {
16 saveVideoWatchHistory, 10 saveVideoWatchHistory,
17 saveVolumeInStore 11 saveVolumeInStore
18} from './peertube-player-local-storage' 12} from './peertube-player-local-storage'
13import { PeerTubePluginOptions, ResolutionUpdateData, UserWatching, VideoJSCaption } from './peertube-videojs-typings'
14import { isMobile } from './utils'
19 15
20const Plugin = videojs.getPlugin('plugin') 16const Plugin = videojs.getPlugin('plugin')
21 17
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 @@
1import videojs from 'video.js' 1import videojs from 'video.js'
2import { secondsToTime } from '@shared/core-utils'
2import { VideoPlaylistElement } from '@shared/models' 3import { VideoPlaylistElement } from '@shared/models'
3import { PlaylistItemOptions } from '../peertube-videojs-typings' 4import { PlaylistItemOptions } from '../peertube-videojs-typings'
4import { secondsToTime } from '../utils'
5 5
6const Component = videojs.getComponent('Component') 6const Component = videojs.getComponent('Component')
7 7
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 @@
1import videojs from 'video.js' 1import videojs from 'video.js'
2import { secondsToTime } from '@shared/core-utils'
2import { PlayerNetworkInfo as EventPlayerNetworkInfo } from '../peertube-videojs-typings' 3import { PlayerNetworkInfo as EventPlayerNetworkInfo } from '../peertube-videojs-typings'
3import { bytes, secondsToTime } from '../utils' 4import { bytes } from '../utils'
4 5
5interface StatsCardOptions extends videojs.ComponentOptions { 6interface StatsCardOptions extends videojs.ComponentOptions {
6 videoUUID: string 7 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 @@
1import { Video, VideoFile, VideoPlaylist } from '@shared/models'
2import { escapeHTML } from '@shared/core-utils/renderer' 1import { escapeHTML } from '@shared/core-utils/renderer'
2import { VideoFile } from '@shared/models'
3 3
4function toTitleCase (str: string) { 4function toTitleCase (str: string) {
5 return str.charAt(0).toUpperCase() + str.slice(1) 5 return str.charAt(0).toUpperCase() + str.slice(1)
@@ -43,144 +43,9 @@ function isMobile () {
43 return /iPhone|iPad|iPod|Android/i.test(navigator.userAgent) 43 return /iPhone|iPad|iPod|Android/i.test(navigator.userAgent)
44} 44}
45 45
46function buildPlaylistLink (playlist: Pick<VideoPlaylist, 'shortUUID'>, base?: string) {
47 return (base ?? window.location.origin) + '/w/p/' + playlist.shortUUID
48}
49
50function buildVideoLink (video: Pick<Video, 'shortUUID'>, base?: string) {
51 return (base ?? window.location.origin) + '/w/' + video.shortUUID
52}
53
54function buildPlaylistEmbedLink (playlist: Pick<VideoPlaylist, 'uuid'>, base?: string) {
55 return (base ?? window.location.origin) + '/video-playlists/embed/' + playlist.uuid
56}
57
58function buildVideoEmbedLink (video: Pick<Video, 'uuid'>, base?: string) {
59 return (base ?? window.location.origin) + '/videos/embed/' + video.uuid
60}
61
62function decorateVideoLink (options: {
63 url: string
64
65 startTime?: number
66 stopTime?: number
67
68 subtitle?: string
69
70 loop?: boolean
71 autoplay?: boolean
72 muted?: boolean
73
74 // Embed options
75 title?: boolean
76 warningTitle?: boolean
77 controls?: boolean
78 peertubeLink?: boolean
79}) {
80 const { url } = options
81
82 const params = generateParams(window.location.search)
83
84 if (options.startTime !== undefined && options.startTime !== null) {
85 const startTimeInt = Math.floor(options.startTime)
86 params.set('start', secondsToTime(startTimeInt))
87 }
88
89 if (options.stopTime) {
90 const stopTimeInt = Math.floor(options.stopTime)
91 params.set('stop', secondsToTime(stopTimeInt))
92 }
93
94 if (options.subtitle) params.set('subtitle', options.subtitle)
95
96 if (options.loop === true) params.set('loop', '1')
97 if (options.autoplay === true) params.set('autoplay', '1')
98 if (options.muted === true) params.set('muted', '1')
99 if (options.title === false) params.set('title', '0')
100 if (options.warningTitle === false) params.set('warningTitle', '0')
101 if (options.controls === false) params.set('controls', '0')
102 if (options.peertubeLink === false) params.set('peertubeLink', '0')
103
104 return buildUrl(url, params)
105}
106
107function decoratePlaylistLink (options: {
108 url: string
109
110 playlistPosition?: number
111}) {
112 const { url } = options
113
114 const params = generateParams(window.location.search)
115
116 if (options.playlistPosition) params.set('playlistPosition', '' + options.playlistPosition)
117
118 return buildUrl(url, params)
119}
120
121function buildUrl (url: string, params: URLSearchParams) {
122 let hasParams = false
123 params.forEach(() => hasParams = true)
124
125 if (hasParams) return url + '?' + params.toString()
126
127 return url
128}
129
130function generateParams (url: string) {
131 const params = new URLSearchParams(window.location.search)
132 // Unused parameters in embed
133 params.delete('videoId')
134 params.delete('resume')
135
136 return params
137}
138
139function timeToInt (time: number | string) {
140 if (!time) return 0
141 if (typeof time === 'number') return time
142
143 const reg = /^((\d+)[h:])?((\d+)[m:])?((\d+)s?)?$/
144 const matches = time.match(reg)
145
146 if (!matches) return 0
147
148 const hours = parseInt(matches[2] || '0', 10)
149 const minutes = parseInt(matches[4] || '0', 10)
150 const seconds = parseInt(matches[6] || '0', 10)
151
152 return hours * 3600 + minutes * 60 + seconds
153}
154
155function secondsToTime (seconds: number, full = false, symbol?: string) {
156 let time = ''
157
158 if (seconds === 0 && !full) return '0s'
159
160 const hourSymbol = (symbol || 'h')
161 const minuteSymbol = (symbol || 'm')
162 const secondsSymbol = full ? '' : 's'
163
164 const hours = Math.floor(seconds / 3600)
165 if (hours >= 1) time = hours + hourSymbol
166 else if (full) time = '0' + hourSymbol
167
168 seconds %= 3600
169 const minutes = Math.floor(seconds / 60)
170 if (minutes >= 1 && minutes < 10 && full) time += '0' + minutes + minuteSymbol
171 else if (minutes >= 1) time += minutes + minuteSymbol
172 else if (full) time += '00' + minuteSymbol
173
174 seconds %= 60
175 if (seconds >= 1 && seconds < 10 && full) time += '0' + seconds + secondsSymbol
176 else if (seconds >= 1) time += seconds + secondsSymbol
177 else if (full) time += '00'
178
179 return time
180}
181
182function buildVideoOrPlaylistEmbed (embedUrl: string, embedTitle: string) { 46function buildVideoOrPlaylistEmbed (embedUrl: string, embedTitle: string) {
183 const title = escapeHTML(embedTitle) 47 const title = escapeHTML(embedTitle)
48
184 return '<iframe width="560" height="315" ' + 49 return '<iframe width="560" height="315" ' +
185 'sandbox="allow-same-origin allow-scripts allow-popups" ' + 50 'sandbox="allow-same-origin allow-scripts allow-popups" ' +
186 'title="' + title + '" ' + 51 'title="' + title + '" ' +
@@ -229,17 +94,8 @@ function getRtcConfig () {
229export { 94export {
230 getRtcConfig, 95 getRtcConfig,
231 toTitleCase, 96 toTitleCase,
232 timeToInt,
233 secondsToTime,
234 isWebRTCDisabled, 97 isWebRTCDisabled,
235 98
236 buildPlaylistLink,
237 buildVideoLink,
238 decorateVideoLink,
239 decoratePlaylistLink,
240 buildPlaylistEmbedLink,
241 buildVideoEmbedLink,
242
243 buildVideoOrPlaylistEmbed, 99 buildVideoOrPlaylistEmbed,
244 videoFileMaxByResolution, 100 videoFileMaxByResolution,
245 videoFileMinByResolution, 101 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 f47c165d9..9267b2ed4 100644
--- a/client/src/assets/player/videojs-components/peertube-link-button.ts
+++ b/client/src/assets/player/videojs-components/peertube-link-button.ts
@@ -1,6 +1,6 @@
1import videojs from 'video.js' 1import videojs from 'video.js'
2import { buildVideoLink, decorateVideoLink } from '@shared/core-utils'
2import { PeerTubeLinkButtonOptions } from '../peertube-videojs-typings' 3import { PeerTubeLinkButtonOptions } from '../peertube-videojs-typings'
3import { buildVideoLink, decorateVideoLink } from '../utils'
4 4
5const Button = videojs.getComponent('Button') 5const Button = videojs.getComponent('Button')
6class PeerTubeLinkButton extends Button { 6class PeerTubeLinkButton extends Button {
diff --git a/client/src/assets/player/webtorrent/webtorrent-plugin.ts b/client/src/assets/player/webtorrent/webtorrent-plugin.ts
index b648b29e8..17d369c10 100644
--- a/client/src/assets/player/webtorrent/webtorrent-plugin.ts
+++ b/client/src/assets/player/webtorrent/webtorrent-plugin.ts
@@ -1,9 +1,7 @@
1import videojs from 'video.js' 1import videojs from 'video.js'
2import * as WebTorrent from 'webtorrent' 2import * as WebTorrent from 'webtorrent'
3import { renderVideo } from './video-renderer' 3import { timeToInt } from '@shared/core-utils'
4import { LoadedQualityData, PlayerNetworkInfo, WebtorrentPluginOptions } from '../peertube-videojs-typings' 4import { VideoFile } from '@shared/models'
5import { getRtcConfig, timeToInt, videoFileMaxByResolution, videoFileMinByResolution, isIOS, isSafari } from '../utils'
6import { PeertubeChunkStore } from './peertube-chunk-store'
7import { 5import {
8 getAverageBandwidthInStore, 6 getAverageBandwidthInStore,
9 getStoredMute, 7 getStoredMute,
@@ -11,7 +9,10 @@ import {
11 getStoredVolume, 9 getStoredVolume,
12 saveAverageBandwidth 10 saveAverageBandwidth
13} from '../peertube-player-local-storage' 11} from '../peertube-player-local-storage'
14import { VideoFile } from '@shared/models' 12import { LoadedQualityData, PlayerNetworkInfo, WebtorrentPluginOptions } from '../peertube-videojs-typings'
13import { getRtcConfig, isIOS, videoFileMaxByResolution, videoFileMinByResolution } from '../utils'
14import { PeertubeChunkStore } from './peertube-chunk-store'
15import { renderVideo } from './video-renderer'
15 16
16const CacheChunkStore = require('cache-chunk-store') 17const CacheChunkStore = require('cache-chunk-store')
17 18