Disable auto resolution on HTTP fallback

4 files changed, 30 insertions, 9 deletions

diff --git a/client/src/assets/player/peertube-videojs-plugin.ts b/client/src/assets/player/peertube-videojs-plugin.ts
index fc07c35d6..208105d3c 100644
--- a/client/src/assets/player/peertube-videojs-plugin.ts
+++ b/client/src/assets/player/peertube-videojs-plugin.ts
@@ -57,6 +57,7 @@ class PeerTubePlugin extends Plugin {
   private renderer
   private fakeRenderer
   private autoResolution = true
+  private forbidAutoResolution = false
   private isAutoResolutionObservation = false
 
   private videoViewInterval
@@ -304,11 +305,17 @@ class PeerTubePlugin extends Plugin {
     this.trigger('autoResolutionUpdate')
   }
 
-  disableAutoResolution () {
+  disableAutoResolution (forbid = false) {
+    if (forbid === true) this.forbidAutoResolution = true
+
     this.autoResolution = false
     this.trigger('autoResolutionUpdate')
   }
 
+  isAutoResolutionForbidden () {
+    return this.forbidAutoResolution === true
+  }
+
   getCurrentVideoFile () {
     return this.currentVideoFile
   }
@@ -509,6 +516,8 @@ class PeerTubePlugin extends Plugin {
   }
 
   private fallbackToHttp (done?: Function, play = true) {
+    this.disableAutoResolution(true)
+
     this.flushVideoFile(this.currentVideoFile, true)
     this.torrent = null
 
@@ -555,7 +564,7 @@ class PeerTubePlugin extends Plugin {
     this.player.controlBar.on('mouseenter', () => disableInactivity())
     settingsDialog.on('mouseenter', () => disableInactivity())
     this.player.controlBar.on('mouseleave', () => enableInactivity())
-    settingsDialog.on('mouseleave', () => enableInactivity())
+    // settingsDialog.on('mouseleave', () => enableInactivity())
   }
 
   private pickAverageVideoFile () {
diff --git a/client/src/assets/player/resolution-menu-button.ts b/client/src/assets/player/resolution-menu-button.ts
index d317a5efc..e30074173 100644
--- a/client/src/assets/player/resolution-menu-button.ts
+++ b/client/src/assets/player/resolution-menu-button.ts
@@ -12,6 +12,7 @@ class ResolutionMenuButton extends MenuButton {
     this.player = player
 
     player.peertube().on('videoFileUpdate', () => this.updateLabel())
+    player.peertube().on('autoResolutionUpdate', () => this.updateLabel())
   }
 
   createEl () {
diff --git a/client/src/assets/player/resolution-menu-item.ts b/client/src/assets/player/resolution-menu-item.ts
index 3fe1d8f0f..0ab0f53b5 100644
--- a/client/src/assets/player/resolution-menu-item.ts
+++ b/client/src/assets/player/resolution-menu-item.ts
@@ -19,6 +19,8 @@ class ResolutionMenuItem extends MenuItem {
   }
 
   handleClick (event) {
+    if (this.id === -1 && this.player_.peertube().isAutoResolutionForbidden()) return
+
     super.handleClick(event)
 
     // Auto resolution
@@ -32,6 +34,15 @@ class ResolutionMenuItem extends MenuItem {
   }
 
   updateSelection () {
+    // Check if auto resolution is forbidden or not
+    if (this.id === -1) {
+      if (this.player_.peertube().isAutoResolutionForbidden()) {
+        this.addClass('disabled')
+      } else {
+        this.removeClass('disabled')
+      }
+    }
+
     if (this.player_.peertube().isAutoResolutionOn()) {
       this.selected(this.id === -1)
       return
diff --git a/client/src/sass/player/settings-menu.scss b/client/src/sass/player/settings-menu.scss
index f95123f52..0c064c182 100644
--- a/client/src/sass/player/settings-menu.scss
+++ b/client/src/sass/player/settings-menu.scss
@@ -99,8 +99,11 @@ $setting-transition-easing: ease-out;
         transition: all $setting-transition-duration $setting-transition-easing;
 
         .vjs-menu-item {
+          font-size: 1em;
+          text-transform: initial;
 
           &:hover {
+            cursor: pointer;
             background-color: rgba(255, 255, 255, 0.2);
           }
 
@@ -111,14 +114,11 @@ $setting-transition-easing: ease-out;
           &:last-child {
             margin-bottom: 5px;
           }
-        }
 
-        li {
-          font-size: 1em;
-          text-transform: initial;
-
-          &:hover {
-            cursor: pointer;
+          &.disabled {
+            opacity: 0.5;
+            cursor: default !important;
+            background-color: inherit !important;
           }
         }
       }