diff options
author | Chocobozzz <me@florianbigard.com> | 2020-08-05 11:41:22 +0200 |
---|---|---|
committer | Chocobozzz <chocobozzz@cpy.re> | 2020-08-07 08:58:29 +0200 |
commit | 56674bb9f81775ff85115e7daa7d9be0db95c001 (patch) | |
tree | 06f74dd3a0d1a39b8e1272c54794604c3a5f6ef2 /client/src/assets/player/playlist | |
parent | a950e4c82bd458e924b00698a77c06275a64a46c (diff) | |
download | PeerTube-56674bb9f81775ff85115e7daa7d9be0db95c001.tar.gz PeerTube-56674bb9f81775ff85115e7daa7d9be0db95c001.tar.zst PeerTube-56674bb9f81775ff85115e7daa7d9be0db95c001.zip |
Handle unavailable videos in embed playlists
Diffstat (limited to 'client/src/assets/player/playlist')
-rw-r--r-- | client/src/assets/player/playlist/playlist-menu-item.ts | 45 | ||||
-rw-r--r-- | client/src/assets/player/playlist/playlist-menu.ts | 14 |
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 => { |