diff options
author | Chocobozzz <me@florianbigard.com> | 2020-08-07 13:43:48 +0200 |
---|---|---|
committer | Chocobozzz <me@florianbigard.com> | 2020-08-07 13:43:48 +0200 |
commit | 951b582f52d0694865f020f0e53ccfad2d2d6033 (patch) | |
tree | e82f6eaf08a2add25a7807135a5b2351819ab3a0 /client/src/assets/player | |
parent | 4891e4c77b72ac5a2f9d3d761a71eebe26d81357 (diff) | |
download | PeerTube-951b582f52d0694865f020f0e53ccfad2d2d6033.tar.gz PeerTube-951b582f52d0694865f020f0e53ccfad2d2d6033.tar.zst PeerTube-951b582f52d0694865f020f0e53ccfad2d2d6033.zip |
Add ability to share playlists in modal
Diffstat (limited to 'client/src/assets/player')
-rw-r--r-- | client/src/assets/player/peertube-player-manager.ts | 4 | ||||
-rw-r--r-- | client/src/assets/player/utils.ts | 59 |
2 files changed, 46 insertions, 17 deletions
diff --git a/client/src/assets/player/peertube-player-manager.ts b/client/src/assets/player/peertube-player-manager.ts index c71b43415..15b2f420b 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 { buildVideoEmbed, buildVideoLink, copyToClipboard, getRtcConfig, isIOS, isSafari } from './utils' | 38 | import { buildVideoOrPlaylistEmbed, buildVideoLink, copyToClipboard, getRtcConfig, isIOS, isSafari } from './utils' |
39 | 39 | ||
40 | // Change 'Playback Rate' to 'Speed' (smaller for our settings menu) | 40 | // Change 'Playback Rate' to 'Speed' (smaller for our settings menu) |
41 | (videojs.getComponent('PlaybackRateMenuButton') as any).prototype.controlText_ = 'Speed' | 41 | (videojs.getComponent('PlaybackRateMenuButton') as any).prototype.controlText_ = 'Speed' |
@@ -492,7 +492,7 @@ export class PeertubePlayerManager { | |||
492 | { | 492 | { |
493 | label: player.localize('Copy embed code'), | 493 | label: player.localize('Copy embed code'), |
494 | listener: () => { | 494 | listener: () => { |
495 | copyToClipboard(buildVideoEmbed(videoEmbedUrl)) | 495 | copyToClipboard(buildVideoOrPlaylistEmbed(videoEmbedUrl)) |
496 | } | 496 | } |
497 | } | 497 | } |
498 | ] | 498 | ] |
diff --git a/client/src/assets/player/utils.ts b/client/src/assets/player/utils.ts index 115fdfa49..ce7a7fe6c 100644 --- a/client/src/assets/player/utils.ts +++ b/client/src/assets/player/utils.ts | |||
@@ -43,20 +43,20 @@ function isMobile () { | |||
43 | } | 43 | } |
44 | 44 | ||
45 | function buildVideoLink (options: { | 45 | function buildVideoLink (options: { |
46 | baseUrl?: string, | 46 | baseUrl?: string |
47 | 47 | ||
48 | startTime?: number, | 48 | startTime?: number |
49 | stopTime?: number, | 49 | stopTime?: number |
50 | 50 | ||
51 | subtitle?: string, | 51 | subtitle?: string |
52 | 52 | ||
53 | loop?: boolean, | 53 | loop?: boolean |
54 | autoplay?: boolean, | 54 | autoplay?: boolean |
55 | muted?: boolean, | 55 | muted?: boolean |
56 | 56 | ||
57 | // Embed options | 57 | // Embed options |
58 | title?: boolean, | 58 | title?: boolean |
59 | warningTitle?: boolean, | 59 | warningTitle?: boolean |
60 | controls?: boolean | 60 | controls?: boolean |
61 | peertubeLink?: boolean | 61 | peertubeLink?: boolean |
62 | } = {}) { | 62 | } = {}) { |
@@ -66,10 +66,7 @@ function buildVideoLink (options: { | |||
66 | ? baseUrl | 66 | ? baseUrl |
67 | : window.location.origin + window.location.pathname.replace('/embed/', '/watch/') | 67 | : window.location.origin + window.location.pathname.replace('/embed/', '/watch/') |
68 | 68 | ||
69 | const params = new URLSearchParams(window.location.search) | 69 | const params = generateParams(window.location.search) |
70 | // Remove these unused parameters when we are on a playlist page | ||
71 | params.delete('videoId') | ||
72 | params.delete('resume') | ||
73 | 70 | ||
74 | if (options.startTime) { | 71 | if (options.startTime) { |
75 | const startTimeInt = Math.floor(options.startTime) | 72 | const startTimeInt = Math.floor(options.startTime) |
@@ -91,6 +88,28 @@ function buildVideoLink (options: { | |||
91 | if (options.controls === false) params.set('controls', '0') | 88 | if (options.controls === false) params.set('controls', '0') |
92 | if (options.peertubeLink === false) params.set('peertubeLink', '0') | 89 | if (options.peertubeLink === false) params.set('peertubeLink', '0') |
93 | 90 | ||
91 | return buildUrl(url, params) | ||
92 | } | ||
93 | |||
94 | function buildPlaylistLink (options: { | ||
95 | baseUrl?: string | ||
96 | |||
97 | playlistPosition: number | ||
98 | }) { | ||
99 | const { baseUrl } = options | ||
100 | |||
101 | const url = baseUrl | ||
102 | ? baseUrl | ||
103 | : window.location.origin + window.location.pathname.replace('/video-playlists/embed/', '/videos/watch/playlist/') | ||
104 | |||
105 | const params = generateParams(window.location.search) | ||
106 | |||
107 | if (options.playlistPosition) params.set('playlistPosition', '' + options.playlistPosition) | ||
108 | |||
109 | return buildUrl(url, params) | ||
110 | } | ||
111 | |||
112 | function buildUrl (url: string, params: URLSearchParams) { | ||
94 | let hasParams = false | 113 | let hasParams = false |
95 | params.forEach(() => hasParams = true) | 114 | params.forEach(() => hasParams = true) |
96 | 115 | ||
@@ -99,6 +118,15 @@ function buildVideoLink (options: { | |||
99 | return url | 118 | return url |
100 | } | 119 | } |
101 | 120 | ||
121 | function generateParams (url: string) { | ||
122 | const params = new URLSearchParams(window.location.search) | ||
123 | // Unused parameters in embed | ||
124 | params.delete('videoId') | ||
125 | params.delete('resume') | ||
126 | |||
127 | return params | ||
128 | } | ||
129 | |||
102 | function timeToInt (time: number | string) { | 130 | function timeToInt (time: number | string) { |
103 | if (!time) return 0 | 131 | if (!time) return 0 |
104 | if (typeof time === 'number') return time | 132 | if (typeof time === 'number') return time |
@@ -140,7 +168,7 @@ function secondsToTime (seconds: number, full = false, symbol?: string) { | |||
140 | return time | 168 | return time |
141 | } | 169 | } |
142 | 170 | ||
143 | function buildVideoEmbed (embedUrl: string) { | 171 | function buildVideoOrPlaylistEmbed (embedUrl: string) { |
144 | return '<iframe width="560" height="315" ' + | 172 | return '<iframe width="560" height="315" ' + |
145 | 'sandbox="allow-same-origin allow-scripts allow-popups" ' + | 173 | 'sandbox="allow-same-origin allow-scripts allow-popups" ' + |
146 | 'src="' + embedUrl + '" ' + | 174 | 'src="' + embedUrl + '" ' + |
@@ -203,8 +231,9 @@ export { | |||
203 | timeToInt, | 231 | timeToInt, |
204 | secondsToTime, | 232 | secondsToTime, |
205 | isWebRTCDisabled, | 233 | isWebRTCDisabled, |
234 | buildPlaylistLink, | ||
206 | buildVideoLink, | 235 | buildVideoLink, |
207 | buildVideoEmbed, | 236 | buildVideoOrPlaylistEmbed, |
208 | videoFileMaxByResolution, | 237 | videoFileMaxByResolution, |
209 | videoFileMinByResolution, | 238 | videoFileMinByResolution, |
210 | copyToClipboard, | 239 | copyToClipboard, |