aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/assets
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2022-01-11 11:26:35 +0100
committerChocobozzz <me@florianbigard.com>2022-01-11 11:26:35 +0100
commitf1a0555a88db9ade2b073a2e4dc73c4a6176c8a0 (patch)
treee1f73376527152fb9ac92447a826bccc9e8f0dd5 /client/src/assets
parentba9eef5f628764aed6183135e669b17741d24d7a (diff)
downloadPeerTube-f1a0555a88db9ade2b073a2e4dc73c4a6176c8a0.tar.gz
PeerTube-f1a0555a88db9ade2b073a2e4dc73c4a6176c8a0.tar.zst
PeerTube-f1a0555a88db9ade2b073a2e4dc73c4a6176c8a0.zip
Add player controls on mobile
Diffstat (limited to 'client/src/assets')
-rw-r--r--client/src/assets/player/bezels/pause-bezel.ts4
-rw-r--r--client/src/assets/player/mobile/peertube-mobile-buttons.ts42
-rw-r--r--client/src/assets/player/mobile/peertube-mobile-plugin.ts16
-rw-r--r--client/src/assets/player/peertube-player-manager.ts6
-rw-r--r--client/src/assets/player/peertube-plugin.ts7
-rw-r--r--client/src/assets/player/peertube-videojs-typings.ts2
-rw-r--r--client/src/assets/player/videojs-components/next-previous-video-button.ts1
7 files changed, 75 insertions, 3 deletions
diff --git a/client/src/assets/player/bezels/pause-bezel.ts b/client/src/assets/player/bezels/pause-bezel.ts
index 886574380..315964311 100644
--- a/client/src/assets/player/bezels/pause-bezel.ts
+++ b/client/src/assets/player/bezels/pause-bezel.ts
@@ -1,4 +1,5 @@
1import videojs from 'video.js' 1import videojs from 'video.js'
2import { isMobile } from '../utils'
2 3
3function getPauseBezel () { 4function getPauseBezel () {
4 return ` 5 return `
@@ -37,6 +38,9 @@ class PauseBezel extends Component {
37 constructor (player: videojs.Player, options?: videojs.ComponentOptions) { 38 constructor (player: videojs.Player, options?: videojs.ComponentOptions) {
38 super(player, options) 39 super(player, options)
39 40
41 // Hide bezels on mobile since we already have our mobile overlay
42 if (isMobile()) return
43
40 player.on('pause', (_: any) => { 44 player.on('pause', (_: any) => {
41 if (player.seeking() || player.ended()) return 45 if (player.seeking() || player.ended()) return
42 this.container.innerHTML = getPauseBezel() 46 this.container.innerHTML = getPauseBezel()
diff --git a/client/src/assets/player/mobile/peertube-mobile-buttons.ts b/client/src/assets/player/mobile/peertube-mobile-buttons.ts
new file mode 100644
index 000000000..d6f8f35e3
--- /dev/null
+++ b/client/src/assets/player/mobile/peertube-mobile-buttons.ts
@@ -0,0 +1,42 @@
1import videojs from 'video.js'
2
3import debug from 'debug'
4
5const logger = debug('peertube:player:mobile')
6
7const Component = videojs.getComponent('Component')
8class PeerTubeMobileButtons extends Component {
9
10 createEl () {
11 const container = super.createEl('div', {
12 className: 'vjs-mobile-buttons-overlay'
13 }) as HTMLDivElement
14
15 container.addEventListener('click', () => {
16 logger('Set user as inactive')
17
18 this.player_.userActive(false)
19 })
20
21 const mainButton = super.createEl('div', {
22 className: 'main-button'
23 }) as HTMLDivElement
24
25 mainButton.addEventListener('click', e => {
26 e.stopPropagation()
27
28 if (this.player_.paused() || this.player_.ended()) {
29 this.player_.play()
30 return
31 }
32
33 this.player_.pause()
34 })
35
36 container.appendChild(mainButton)
37
38 return container
39 }
40}
41
42videojs.registerComponent('PeerTubeMobileButtons', PeerTubeMobileButtons)
diff --git a/client/src/assets/player/mobile/peertube-mobile-plugin.ts b/client/src/assets/player/mobile/peertube-mobile-plugin.ts
new file mode 100644
index 000000000..b3834e20d
--- /dev/null
+++ b/client/src/assets/player/mobile/peertube-mobile-plugin.ts
@@ -0,0 +1,16 @@
1import videojs from 'video.js'
2import './peertube-mobile-buttons'
3
4const Plugin = videojs.getPlugin('plugin')
5
6class PeerTubeMobilePlugin extends Plugin {
7
8 constructor (player: videojs.Player, options: videojs.PlayerOptions) {
9 super(player, options)
10
11 player.addChild('PeerTubeMobileButtons')
12 }
13}
14
15videojs.registerPlugin('peertubeMobile', PeerTubeMobilePlugin)
16export { PeerTubeMobilePlugin }
diff --git a/client/src/assets/player/peertube-player-manager.ts b/client/src/assets/player/peertube-player-manager.ts
index ac8134fa8..6b6c1e581 100644
--- a/client/src/assets/player/peertube-player-manager.ts
+++ b/client/src/assets/player/peertube-player-manager.ts
@@ -21,6 +21,7 @@ import './videojs-components/settings-panel'
21import './videojs-components/settings-panel-child' 21import './videojs-components/settings-panel-child'
22import './videojs-components/theater-button' 22import './videojs-components/theater-button'
23import './playlist/playlist-plugin' 23import './playlist/playlist-plugin'
24import './mobile/peertube-mobile-plugin'
24import videojs from 'video.js' 25import videojs from 'video.js'
25import { HlsJsEngineSettings } from '@peertube/p2p-media-loader-hlsjs' 26import { HlsJsEngineSettings } from '@peertube/p2p-media-loader-hlsjs'
26import { PluginsManager } from '@root-helpers/plugins-manager' 27import { PluginsManager } from '@root-helpers/plugins-manager'
@@ -43,7 +44,7 @@ import {
43 VideoJSPluginOptions 44 VideoJSPluginOptions
44} from './peertube-videojs-typings' 45} from './peertube-videojs-typings'
45import { TranslationsManager } from './translations-manager' 46import { TranslationsManager } from './translations-manager'
46import { buildVideoOrPlaylistEmbed, getRtcConfig, isIOS, isSafari } from './utils' 47import { buildVideoOrPlaylistEmbed, getRtcConfig, isIOS, isMobile, isSafari } from './utils'
47 48
48// Change 'Playback Rate' to 'Speed' (smaller for our settings menu) 49// Change 'Playback Rate' to 'Speed' (smaller for our settings menu)
49(videojs.getComponent('PlaybackRateMenuButton') as any).prototype.controlText_ = 'Speed' 50(videojs.getComponent('PlaybackRateMenuButton') as any).prototype.controlText_ = 'Speed'
@@ -189,7 +190,10 @@ export class PeertubePlayerManager {
189 videoEmbedTitle: options.common.embedTitle 190 videoEmbedTitle: options.common.embedTitle
190 }) 191 })
191 192
193 if (isMobile()) player.peertubeMobile()
194
192 player.bezels() 195 player.bezels()
196
193 player.stats({ 197 player.stats({
194 videoUUID: options.common.videoUUID, 198 videoUUID: options.common.videoUUID,
195 videoIsLive: options.common.isLive, 199 videoIsLive: options.common.isLive,
diff --git a/client/src/assets/player/peertube-plugin.ts b/client/src/assets/player/peertube-plugin.ts
index 451b4a161..272f5353d 100644
--- a/client/src/assets/player/peertube-plugin.ts
+++ b/client/src/assets/player/peertube-plugin.ts
@@ -12,6 +12,9 @@ import {
12import { PeerTubePluginOptions, UserWatching, VideoJSCaption } from './peertube-videojs-typings' 12import { PeerTubePluginOptions, UserWatching, VideoJSCaption } from './peertube-videojs-typings'
13import { isMobile } from './utils' 13import { isMobile } from './utils'
14import { SettingsButton } from './videojs-components/settings-menu-button' 14import { SettingsButton } from './videojs-components/settings-menu-button'
15import debug from 'debug'
16
17const logger = debug('peertube:player:peertube')
15 18
16const Plugin = videojs.getPlugin('plugin') 19const Plugin = videojs.getPlugin('plugin')
17 20
@@ -233,7 +236,7 @@ class PeerTubePlugin extends Plugin {
233 } 236 }
234 237
235 private alterInactivity () { 238 private alterInactivity () {
236 if (this.menuOpened || this.mouseInSettings || this.mouseInControlBar || this.isTouchEnabled()) { 239 if (this.menuOpened || this.mouseInSettings || this.mouseInControlBar) {
237 this.setInactivityTimeout(0) 240 this.setInactivityTimeout(0)
238 return 241 return
239 } 242 }
@@ -245,6 +248,8 @@ class PeerTubePlugin extends Plugin {
245 private setInactivityTimeout (timeout: number) { 248 private setInactivityTimeout (timeout: number) {
246 (this.player as any).cache_.inactivityTimeout = timeout 249 (this.player as any).cache_.inactivityTimeout = timeout
247 this.player.options_.inactivityTimeout = timeout 250 this.player.options_.inactivityTimeout = timeout
251
252 logger('Set player inactivity to ' + timeout)
248 } 253 }
249 254
250 private isTouchEnabled () { 255 private isTouchEnabled () {
diff --git a/client/src/assets/player/peertube-videojs-typings.ts b/client/src/assets/player/peertube-videojs-typings.ts
index f97d7a208..e4013d815 100644
--- a/client/src/assets/player/peertube-videojs-typings.ts
+++ b/client/src/assets/player/peertube-videojs-typings.ts
@@ -42,6 +42,8 @@ declare module 'video.js' {
42 42
43 bezels (): void 43 bezels (): void
44 44
45 peertubeMobile (): void
46
45 stats (options?: StatsCardOptions): StatsForNerdsPlugin 47 stats (options?: StatsCardOptions): StatsForNerdsPlugin
46 48
47 textTracks (): TextTrackList & { 49 textTracks (): TextTrackList & {
diff --git a/client/src/assets/player/videojs-components/next-previous-video-button.ts b/client/src/assets/player/videojs-components/next-previous-video-button.ts
index 228231a22..fe17ce2ce 100644
--- a/client/src/assets/player/videojs-components/next-previous-video-button.ts
+++ b/client/src/assets/player/videojs-components/next-previous-video-button.ts
@@ -40,7 +40,6 @@ class NextPreviousVideoButton extends Button {
40 40
41 update () { 41 update () {
42 const disabled = this.nextPreviousVideoButtonOptions.isDisabled() 42 const disabled = this.nextPreviousVideoButtonOptions.isDisabled()
43 console.log(disabled)
44 43
45 if (disabled) this.addClass('vjs-disabled') 44 if (disabled) this.addClass('vjs-disabled')
46 else this.removeClass('vjs-disabled') 45 else this.removeClass('vjs-disabled')