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; } } }