From 56674bb9f81775ff85115e7daa7d9be0db95c001 Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Wed, 5 Aug 2020 11:41:22 +0200
Subject: Handle unavailable videos in embed playlists

---
 .../assets/player/playlist/playlist-menu-item.ts   | 45 ++++++++++++++++------
 client/src/assets/player/playlist/playlist-menu.ts | 14 ++++++-
 2 files changed, 45 insertions(+), 14 deletions(-)

(limited to 'client/src/assets/player/playlist')

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 {
       innerHTML: ''
     }) as HTMLElement
 
+    if (!options.element.video) {
+      li.classList.add('vjs-disabled')
+    }
+
     const positionBlock = super.createEl('div', {
       className: 'item-position-block'
-    })
+    }) as HTMLElement
 
     const position = super.createEl('div', {
       className: 'item-position',
       innerHTML: options.element.position
     })
 
+    positionBlock.appendChild(position)
+    li.appendChild(positionBlock)
+
+    if (options.element.video) {
+      this.buildAvailableVideo(li, positionBlock, options)
+    } else {
+      this.buildUnavailableVideo(li)
+    }
+
+    return li
+  }
+
+  setSelected (selected: boolean) {
+    if (selected) this.addClass('vjs-selected')
+    else this.removeClass('vjs-selected')
+  }
+
+  getElement () {
+    return this.element
+  }
+
+  private buildAvailableVideo (li: HTMLElement, positionBlock: HTMLElement, options: PlaylistItemOptions) {
     const player = super.createEl('div', {
       className: 'item-player'
     })
 
-    positionBlock.appendChild(position)
     positionBlock.appendChild(player)
 
-    li.appendChild(positionBlock)
-
     const thumbnail = super.createEl('img', {
       src: window.location.origin + options.element.video.thumbnailPath
     })
@@ -67,17 +90,15 @@ class PlaylistMenuItem extends Component {
 
     li.append(thumbnail)
     li.append(infoBlock)
-
-    return li
   }
 
-  setSelected (selected: boolean) {
-    if (selected) this.addClass('vjs-selected')
-    else this.removeClass('vjs-selected')
-  }
+  private buildUnavailableVideo (li: HTMLElement) {
+    const block = super.createEl('div', {
+      className: 'item-unavailable',
+      innerHTML: this.player().localize('Unavailable video')
+    })
 
-  getElement () {
-    return this.element
+    li.appendChild(block)
   }
 
   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 {
   constructor (player: videojs.Player, options?: PlaylistPluginOptions) {
     super(player, options as any)
 
-    this.player().on('userinactive', () => {
-      this.close()
+    const self = this
+
+    function userInactiveHandler () {
+      self.close()
+    }
+
+    this.el().addEventListener('mouseenter', () => {
+      this.player().off('userinactive', userInactiveHandler)
+    })
+
+    this.el().addEventListener('mouseleave', () => {
+      this.player().one('userinactive', userInactiveHandler)
     })
 
     this.player().on('click', event => {
-- 
cgit v1.2.3