aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/assets/player/videojs-components
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/assets/player/videojs-components')
-rw-r--r--client/src/assets/player/videojs-components/resolution-menu-button.ts41
-rw-r--r--client/src/assets/player/videojs-components/resolution-menu-item.ts48
-rw-r--r--client/src/assets/player/videojs-components/settings-menu-item.ts2
3 files changed, 28 insertions, 63 deletions
diff --git a/client/src/assets/player/videojs-components/resolution-menu-button.ts b/client/src/assets/player/videojs-components/resolution-menu-button.ts
index 98e7f56fc..8bd5b4f03 100644
--- a/client/src/assets/player/videojs-components/resolution-menu-button.ts
+++ b/client/src/assets/player/videojs-components/resolution-menu-button.ts
@@ -1,6 +1,4 @@
1import videojs from 'video.js' 1import videojs from 'video.js'
2
3import { LoadedQualityData } from '../peertube-videojs-typings'
4import { ResolutionMenuItem } from './resolution-menu-item' 2import { ResolutionMenuItem } from './resolution-menu-item'
5 3
6const Menu = videojs.getComponent('Menu') 4const Menu = videojs.getComponent('Menu')
@@ -13,9 +11,12 @@ class ResolutionMenuButton extends MenuButton {
13 11
14 this.controlText('Quality') 12 this.controlText('Quality')
15 13
16 player.tech(true).on('loadedqualitydata', (e: any, data: any) => this.buildQualities(data)) 14 player.peertubeResolutions().on('resolutionsAdded', () => this.buildQualities())
17 15
18 player.peertube().on('resolutionChange', () => setTimeout(() => this.trigger('updateLabel'), 0)) 16 // For parent
17 player.peertubeResolutions().on('resolutionChanged', () => {
18 setTimeout(() => this.trigger('labelUpdated'))
19 })
19 } 20 }
20 21
21 createEl () { 22 createEl () {
@@ -58,20 +59,8 @@ class ResolutionMenuButton extends MenuButton {
58 }) 59 })
59 } 60 }
60 61
61 private buildQualities (data: LoadedQualityData) { 62 private buildQualities () {
62 // The automatic resolution item will need other labels 63 for (const d of this.player().peertubeResolutions().getResolutions()) {
63 const labels: { [ id: number ]: string } = {}
64
65 data.qualityData.video.sort((a, b) => {
66 if (a.id > b.id) return -1
67 if (a.id === b.id) return 0
68 return 1
69 })
70
71 for (const d of data.qualityData.video) {
72 // Skip auto resolution, we'll add it ourselves
73 if (d.id === -1) continue
74
75 const label = d.label === '0p' 64 const label = d.label === '0p'
76 ? this.player().localize('Audio-only') 65 ? this.player().localize('Audio-only')
77 : d.label 66 : d.label
@@ -81,25 +70,11 @@ class ResolutionMenuButton extends MenuButton {
81 { 70 {
82 id: d.id, 71 id: d.id,
83 label, 72 label,
84 selected: d.selected, 73 selected: d.selected
85 callback: data.qualitySwitchCallback
86 }) 74 })
87 ) 75 )
88
89 labels[d.id] = d.label
90 } 76 }
91 77
92 this.menu.addChild(new ResolutionMenuItem(
93 this.player_,
94 {
95 id: -1,
96 label: this.player_.localize('Auto'),
97 labels,
98 callback: data.qualitySwitchCallback,
99 selected: true // By default, in auto mode
100 }
101 ))
102
103 for (const m of this.menu.children()) { 78 for (const m of this.menu.children()) {
104 this.addClickListener(m) 79 this.addClickListener(m)
105 } 80 }
diff --git a/client/src/assets/player/videojs-components/resolution-menu-item.ts b/client/src/assets/player/videojs-components/resolution-menu-item.ts
index c1f502600..6047f52f7 100644
--- a/client/src/assets/player/videojs-components/resolution-menu-item.ts
+++ b/client/src/assets/player/videojs-components/resolution-menu-item.ts
@@ -1,82 +1,72 @@
1import videojs from 'video.js' 1import videojs from 'video.js'
2import { AutoResolutionUpdateData, ResolutionUpdateData } from '../peertube-videojs-typings'
3 2
4const MenuItem = videojs.getComponent('MenuItem') 3const MenuItem = videojs.getComponent('MenuItem')
5 4
6export interface ResolutionMenuItemOptions extends videojs.MenuItemOptions { 5export interface ResolutionMenuItemOptions extends videojs.MenuItemOptions {
7 labels?: { [id: number]: string }
8 id: number 6 id: number
9 callback: (resolutionId: number, type: 'video') => void
10} 7}
11 8
12class ResolutionMenuItem extends MenuItem { 9class ResolutionMenuItem extends MenuItem {
13 private readonly resolutionId: number 10 private readonly resolutionId: number
14 private readonly label: string 11 private readonly label: string
15 // Only used for the automatic item
16 private readonly labels: { [id: number]: string }
17 private readonly callback: (resolutionId: number, type: 'video') => void
18 12
19 private autoResolutionPossible: boolean 13 private autoResolutionEnabled: boolean
20 private currentResolutionLabel: string 14 private autoResolutionChosen: string
21 15
22 constructor (player: videojs.Player, options?: ResolutionMenuItemOptions) { 16 constructor (player: videojs.Player, options?: ResolutionMenuItemOptions) {
23 options.selectable = true 17 options.selectable = true
24 18
25 super(player, options) 19 super(player, options)
26 20
27 this.autoResolutionPossible = true 21 this.autoResolutionEnabled = true
28 this.currentResolutionLabel = '' 22 this.autoResolutionChosen = ''
29 23
30 this.resolutionId = options.id 24 this.resolutionId = options.id
31 this.label = options.label 25 this.label = options.label
32 this.labels = options.labels
33 this.callback = options.callback
34 26
35 player.peertube().on('resolutionChange', (_: any, data: ResolutionUpdateData) => this.updateSelection(data)) 27 player.peertubeResolutions().on('resolutionChanged', () => this.updateSelection())
36 28
37 // We only want to disable the "Auto" item 29 // We only want to disable the "Auto" item
38 if (this.resolutionId === -1) { 30 if (this.resolutionId === -1) {
39 player.peertube().on('autoResolutionChange', (_: any, data: AutoResolutionUpdateData) => this.updateAutoResolution(data)) 31 player.peertubeResolutions().on('autoResolutionEnabledChanged', () => this.updateAutoResolution())
40 } 32 }
41 } 33 }
42 34
43 handleClick (event: any) { 35 handleClick (event: any) {
44 // Auto button disabled? 36 // Auto button disabled?
45 if (this.autoResolutionPossible === false && this.resolutionId === -1) return 37 if (this.autoResolutionEnabled === false && this.resolutionId === -1) return
46 38
47 super.handleClick(event) 39 super.handleClick(event)
48 40
49 this.callback(this.resolutionId, 'video') 41 this.player().peertubeResolutions().select({ id: this.resolutionId, byEngine: false })
50 } 42 }
51 43
52 updateSelection (data: ResolutionUpdateData) { 44 updateSelection () {
53 if (this.resolutionId === -1) { 45 const selectedResolution = this.player().peertubeResolutions().getSelected()
54 this.currentResolutionLabel = this.labels[data.id]
55 }
56 46
57 // Automatic resolution only 47 if (this.resolutionId === -1) {
58 if (data.auto === true) { 48 this.autoResolutionChosen = this.player().peertubeResolutions().getAutoResolutionChosen()?.label
59 this.selected(this.resolutionId === -1)
60 return
61 } 49 }
62 50
63 this.selected(this.resolutionId === data.id) 51 this.selected(this.resolutionId === selectedResolution.id)
64 } 52 }
65 53
66 updateAutoResolution (data: AutoResolutionUpdateData) { 54 updateAutoResolution () {
55 const enabled = this.player().peertubeResolutions().isAutoResolutionEnabeld()
56
67 // Check if the auto resolution is enabled or not 57 // Check if the auto resolution is enabled or not
68 if (data.possible === false) { 58 if (enabled === false) {
69 this.addClass('disabled') 59 this.addClass('disabled')
70 } else { 60 } else {
71 this.removeClass('disabled') 61 this.removeClass('disabled')
72 } 62 }
73 63
74 this.autoResolutionPossible = data.possible 64 this.autoResolutionEnabled = enabled
75 } 65 }
76 66
77 getLabel () { 67 getLabel () {
78 if (this.resolutionId === -1) { 68 if (this.resolutionId === -1) {
79 return this.label + ' <small>' + this.currentResolutionLabel + '</small>' 69 return this.label + ' <small>' + this.autoResolutionChosen + '</small>'
80 } 70 }
81 71
82 return this.label 72 return this.label
diff --git a/client/src/assets/player/videojs-components/settings-menu-item.ts b/client/src/assets/player/videojs-components/settings-menu-item.ts
index 1871d41f8..48fed0fd9 100644
--- a/client/src/assets/player/videojs-components/settings-menu-item.ts
+++ b/client/src/assets/player/videojs-components/settings-menu-item.ts
@@ -248,7 +248,7 @@ class SettingsMenuItem extends MenuItem {
248 } 248 }
249 249
250 build () { 250 build () {
251 this.subMenu.on('updateLabel', () => { 251 this.subMenu.on('labelUpdated', () => {
252 this.update() 252 this.update()
253 }) 253 })
254 this.subMenu.on('menuChanged', () => { 254 this.subMenu.on('menuChanged', () => {