aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/assets/player
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/assets/player')
-rw-r--r--client/src/assets/player/playlist/playlist-menu-item.ts45
-rw-r--r--client/src/assets/player/playlist/playlist-menu.ts14
2 files changed, 45 insertions, 14 deletions
diff --git a/client/src/assets/player/playlist/playlist-menu-item.ts b/client/src/assets/player/playlist/playlist-menu-item.ts
index 916c6338f..21a7f8046 100644
--- a/client/src/assets/player/playlist/playlist-menu-item.ts
+++ b/client/src/assets/player/playlist/playlist-menu-item.ts
@@ -26,24 +26,47 @@ class PlaylistMenuItem extends Component {
26 innerHTML: '' 26 innerHTML: ''
27 }) as HTMLElement 27 }) as HTMLElement
28 28
29 if (!options.element.video) {
30 li.classList.add('vjs-disabled')
31 }
32
29 const positionBlock = super.createEl('div', { 33 const positionBlock = super.createEl('div', {
30 className: 'item-position-block' 34 className: 'item-position-block'
31 }) 35 }) as HTMLElement
32 36
33 const position = super.createEl('div', { 37 const position = super.createEl('div', {
34 className: 'item-position', 38 className: 'item-position',
35 innerHTML: options.element.position 39 innerHTML: options.element.position
36 }) 40 })
37 41
42 positionBlock.appendChild(position)
43 li.appendChild(positionBlock)
44
45 if (options.element.video) {
46 this.buildAvailableVideo(li, positionBlock, options)
47 } else {
48 this.buildUnavailableVideo(li)
49 }
50
51 return li
52 }
53
54 setSelected (selected: boolean) {
55 if (selected) this.addClass('vjs-selected')
56 else this.removeClass('vjs-selected')
57 }
58
59 getElement () {
60 return this.element
61 }
62
63 private buildAvailableVideo (li: HTMLElement, positionBlock: HTMLElement, options: PlaylistItemOptions) {
38 const player = super.createEl('div', { 64 const player = super.createEl('div', {
39 className: 'item-player' 65 className: 'item-player'
40 }) 66 })
41 67
42 positionBlock.appendChild(position)
43 positionBlock.appendChild(player) 68 positionBlock.appendChild(player)
44 69
45 li.appendChild(positionBlock)
46
47 const thumbnail = super.createEl('img', { 70 const thumbnail = super.createEl('img', {
48 src: window.location.origin + options.element.video.thumbnailPath 71 src: window.location.origin + options.element.video.thumbnailPath
49 }) 72 })
@@ -67,17 +90,15 @@ class PlaylistMenuItem extends Component {
67 90
68 li.append(thumbnail) 91 li.append(thumbnail)
69 li.append(infoBlock) 92 li.append(infoBlock)
70
71 return li
72 } 93 }
73 94
74 setSelected (selected: boolean) { 95 private buildUnavailableVideo (li: HTMLElement) {
75 if (selected) this.addClass('vjs-selected') 96 const block = super.createEl('div', {
76 else this.removeClass('vjs-selected') 97 className: 'item-unavailable',
77 } 98 innerHTML: this.player().localize('Unavailable video')
99 })
78 100
79 getElement () { 101 li.appendChild(block)
80 return this.element
81 } 102 }
82 103
83 private handleKeyDown (event: KeyboardEvent) { 104 private handleKeyDown (event: KeyboardEvent) {
diff --git a/client/src/assets/player/playlist/playlist-menu.ts b/client/src/assets/player/playlist/playlist-menu.ts
index 7d7d9e12f..37284fb44 100644
--- a/client/src/assets/player/playlist/playlist-menu.ts
+++ b/client/src/assets/player/playlist/playlist-menu.ts
@@ -11,8 +11,18 @@ class PlaylistMenu extends Component {
11 constructor (player: videojs.Player, options?: PlaylistPluginOptions) { 11 constructor (player: videojs.Player, options?: PlaylistPluginOptions) {
12 super(player, options as any) 12 super(player, options as any)
13 13
14 this.player().on('userinactive', () => { 14 const self = this
15 this.close() 15
16 function userInactiveHandler () {
17 self.close()
18 }
19
20 this.el().addEventListener('mouseenter', () => {
21 this.player().off('userinactive', userInactiveHandler)
22 })
23
24 this.el().addEventListener('mouseleave', () => {
25 this.player().one('userinactive', userInactiveHandler)
16 }) 26 })
17 27
18 this.player().on('click', event => { 28 this.player().on('click', event => {