Improve media player:

- Always show overlay if the user is using it.
- Pause the video during seeking for easier access.

assets/site.js

@@ -213,32 +213,52 @@ class XMediaPlayer {
 		this._controls.appendChild(this._controlFullscreen);
 
 		// Now begin listening to all events that are relevant.
-		for (let event of ["Abort", "CanPlay", "CanPlayThrough", "DurationChange", "Emptied", "Encrypted", "Ended", "Error", "LoadedData", "LoadedMetaData", "LoadStart", "Pause", "Play", "Playing", "Progress", "RateChange", "Seeked", "Seeking", "Stalled", "Suspend", "TimeUpdate", "VolumeChange", "Waiting", "DblClick", "Click", "KeyDown"]) {
+		for (let event of [
-			this._media.addEventListener(event.toLowerCase(), (ev) => { this[`_on${event}`](ev); });
+			"Abort",
-		}
+			"CanPlay",
-		for (let event of ["FullscreenChange", "FullscreenError", "KeyDown", "MouseEnter", "MouseLeave", "MouseMove", "Wheel"]) {
+			"CanPlayThrough",
-			this._container.addEventListener(event.toLowerCase(), (ev) => { this[`_on${event}`](ev); });
+			"Click",
-		}
+			"DblClick",
-		for (let event of ["Click", "KeyDown"]) {
+			"DurationChange",
-			this._controlPlay.addEventListener(event.toLowerCase(), (ev) => { this[`_on${event}`](ev); });
+			"Emptied",
-		}
+			"Encrypted",
-		for (let event of ["Input", "KeyDown", "Wheel"]) {
+			"Ended",
-			this._controlProgress.addEventListener(event.toLowerCase(), (ev) => { this[`_on${event}`](ev); });
+			"Error",
-		}
+			"FullscreenChange",
-		for (let event of ["Click", "KeyDown"]) {
+			"FullscreenError",
-			this._controlMute.addEventListener(event.toLowerCase(), (ev) => { this[`_on${event}`](ev); });
+			"Input",
-		}
+			"KeyDown",
-		for (let event of ["Input", "KeyDown", "Wheel"]) {
+			"LoadedData",
-			this._controlVolume.addEventListener(event.toLowerCase(), (ev) => { this[`_on${event}`](ev); });
+			"LoadedMetaData",
-		}
+			"LoadStart",
-		for (let event of ["Input"]) {
+			"MouseEnter",
-			this._variants.addEventListener(event.toLowerCase(), (ev) => { this[`_on${event}`](ev); });
+			"MouseLeave",
-		}
+			"MouseMove",
-		for (let event of ["Click", "KeyDown"]) {
+			"MouseDown",
-			this._controlVariant.addEventListener(event.toLowerCase(), (ev) => { this[`_on${event}`](ev); });
+			"MouseUp",
-		}
+			"Pause",
-		for (let event of ["Click", "KeyDown"]) {
+			"Play",
-			this._controlFullscreen.addEventListener(event.toLowerCase(), (ev) => { this[`_on${event}`](ev); });
+			"Playing",
+			"Progress",
+			"RateChange",
+			"Seeked",
+			"Seeking",
+			"Stalled",
+			"Suspend",
+			"TimeUpdate",
+			"VolumeChange",
+			"Waiting",
+			"Wheel"
+		]) {
+			for (let element of [this._media, this._container, this._controlPlay, this._controlProgress, this._controlMute, this._controlVolume, this._variants, this._controlVariant, this._controlFullscreen]) {
+				element.addEventListener(event.toLocaleLowerCase(), (ev) => {
+					try {
+						this[`_on${event}`](ev);
+					} catch (ex) {
+						console.error(`Event '${event}' handler encountered exception: ${ex}`);
+					}
+				})
+			}
 		}
 
 		// And update all controls once.
@@ -372,7 +392,31 @@ class XMediaPlayer {
 		this.showOverlay();
 	}
 	_onMouseLeave(ev) { }
+	_onMouseDown(ev) {
+		this.showOverlay();
+
+		if (ev.target == this._controlProgress) {
+			if ((ev.button == 0) && (!this._isSeeking)) {
+				this._isSeeking = true;
+				this._isSeekingPaused = this._media.paused;
+				this._media.pause();
+			}
+		}
+	}
+	_onMouseUp(ev) {
+		this.showOverlay();
+
+		if (ev.target == this._controlProgress) {
+			if ((ev.button == 0) && (this._isSeeking)) {
+				if (!this._isSeekingPaused) // Resume playback after dragging the dot.
+					this._media.play();
+				this._isSeeking = false;
+			}
+		}
+	}
 	_onKeyDown(ev) {
+		this.showOverlay();
+
 		// Ignore IME compositing.
 		if (ev.isComposing || ev.keyCode === 229) {
 			return;
@@ -421,10 +465,12 @@ class XMediaPlayer {
 		}
 
 		// Prevent default behavior and stop propagation.
-		this.showOverlay();
 		ev.preventDefault();
 		ev.stopPropagation();
 	}
+	_onWheel(ev) {
+		this.showOverlay();
+	}
 	_onInput(ev) {
 		this.toggleVariants(false);
 		if (ev.target == this._controlProgress) {
@@ -496,10 +542,14 @@ class XMediaPlayer {
 
 	// Control Functions
 	togglePlayPause() {
-		if (this._media.paused) {
+		if (this._isSeeking) {
-			this._media.play();
+			this._isSeekingPaused = !this._isSeekingPaused;
 		} else {
-			this._media.pause();
+			if (this._media.paused) {
+				this._media.play();
+			} else {
+				this._media.pause();
+			}
 		}
 	}
 
@@ -539,11 +589,21 @@ class XMediaPlayer {
 			clearTimeout(this._overlayTimeout);
 		}
 
-		if (!this._media.paused && !this._media.ended && !this._media.error) {
+		// Prevent overlay from hiding during special operations.
-			this._container.classList.add("hide");
+		if (
+			this._media.paused ||
+			this._media.ended ||
+			this._media.error ||
+			(this._media.readyState !== 4) ||
+			(!this._variants.classList.contains("hide")) ||
+			this._isSeeking) {
+			this.showOverlay();
+			return;
 		}
-	}
 
+		// In all other cases, just continue.
+		this._container.classList.add("hide");
+	}
 }
 
 (function () {