diff --git a/src/components/VideoPlayer.vue b/src/components/VideoPlayer.vue index 1e41125c..b3650093 100644 --- a/src/components/VideoPlayer.vue +++ b/src/components/VideoPlayer.vue @@ -40,6 +40,14 @@ +
+ + + +
@@ -95,6 +103,8 @@ export default { showSpeedModal: false, showCurrentSpeed: false, hideCurrentSpeed: null, + showCurrentVolume: false, + hideCurrentVolume: null, playbackSpeedInput: null, currentTime: 0, seekbarPadding: 2, @@ -167,11 +177,11 @@ export default { e.preventDefault(); break; case "up": - videoEl.volume = Math.min(videoEl.volume + 0.05, 1); + self.adjustPlaybackVolume(videoEl.volume + 0.05); e.preventDefault(); break; case "down": - videoEl.volume = Math.max(videoEl.volume - 0.05, 0); + self.adjustPlaybackVolume(videoEl.volume - 0.05); e.preventDefault(); break; case "left": @@ -693,6 +703,14 @@ export default { this.showCurrentSpeed = true; this.hideCurrentSpeed = window.setTimeout(() => (this.showCurrentSpeed = false), 1500); }, + adjustPlaybackVolume(newVolume) { + const normalizedVolume = Math.min(1, Math.max(0, newVolume)); + this.$refs.videoEl.volume = normalizedVolume; + if (this.hideCurrentVolume) window.clearTimeout(this.hideCurrentVolume); + this.showCurrentVolume = false; + this.showCurrentVolume = true; + this.hideCurrentVolume = window.setTimeout(() => (this.showCurrentVolume = false), 1500); + }, setSpeedFromInput() { try { const newSpeed = Number(this.playbackSpeedInput);