External audiotrack support

This works as voice over if video also has audio, changing video volume to 0.3.

Also improve autoplay by playing videos muted and unmute on first page click.

There is no mute if you use Firefox and allow autoplay on page (navigator.getAutoplayPolicy check).

3 files changed, 55 insertions, 5 deletions

diff --git a/src/client/players/Iframe.hx b/src/client/players/Iframe.hx
index e07f814..56cf319 100644
--- a/src/client/players/Iframe.hx
+++ b/src/client/players/Iframe.hx
@@ -34,7 +34,8 @@ class Iframe implements IPlayer {
 
 	function isValidIframe(iframe:Element):Bool {
 		if (iframe.children.length != 1) return false;
-		return (iframe.firstChild.nodeName == "IFRAME" || iframe.firstChild.nodeName == "OBJECT");
+		return (iframe.firstChild.nodeName == "IFRAME"
+			|| iframe.firstChild.nodeName == "OBJECT");
 	}
 
 	public function loadVideo(item:VideoItem):Void {
@@ -66,6 +67,10 @@ class Iframe implements IPlayer {
 
 	public function pause():Void {}
 
+	public function isPaused():Bool {
+		return false;
+	}
+
 	public function getTime():Float {
 		return 0;
 	}
@@ -77,4 +82,12 @@ class Iframe implements IPlayer {
 	}
 
 	public function setPlaybackRate(rate:Float):Void {}
+
+	public function getVolume():Float {
+		return 1;
+	}
+
+	public function setVolume(volume:Float) {}
+
+	public function unmute():Void {}
 }
diff --git a/src/client/players/Raw.hx b/src/client/players/Raw.hx
index 3f69958..5c5b7a4 100644
--- a/src/client/players/Raw.hx
+++ b/src/client/players/Raw.hx
@@ -67,7 +67,7 @@ class Raw implements IPlayer {
 			callback({
 				duration: video.duration,
 				title: title,
-				subs: subs
+				subs: subs,
 			});
 		}
 		Utils.prepend(playerEl, video);
@@ -115,6 +115,7 @@ class Raw implements IPlayer {
 			}
 			video.onpause = player.onPause;
 			video.onratechange = player.onRateChange;
+			if (!main.isAutoplayAllowed()) video.muted = true;
 			playerEl.appendChild(video);
 		}
 		if (isHls) initHlsSource(video, url);
@@ -185,6 +186,10 @@ class Raw implements IPlayer {
 		video.pause();
 	}
 
+	public function isPaused():Bool {
+		return video.paused;
+	}
+
 	public function getTime():Float {
 		return video.currentTime;
 	}
@@ -200,4 +205,16 @@ class Raw implements IPlayer {
 	public function setPlaybackRate(rate:Float):Void {
 		video.playbackRate = rate;
 	}
+
+	public function getVolume():Float {
+		return video.volume;
+	}
+
+	public function setVolume(volume:Float):Void {
+		video.volume = volume;
+	}
+
+	public function unmute():Void {
+		video.muted = false;
+	}
 }
diff --git a/src/client/players/Youtube.hx b/src/client/players/Youtube.hx
index cde2ef8..3ad9030 100644
--- a/src/client/players/Youtube.hx
+++ b/src/client/players/Youtube.hx
@@ -86,10 +86,11 @@ class Youtube implements IPlayer {
 				final duration = convertTime(duration);
 				// duration is PT0S for streams
 				if (duration == 0) {
+					final mute = main.isAutoplayAllowed() ? "" : "&mute=1";
 					callback({
 						duration: 99 * 60 * 60,
 						title: title,
-						url: '<iframe src="https://www.youtube.com/embed/$id" frameborder="0"
+						url: '<iframe src="https://www.youtube.com/embed/$id?autoplay=1$mute" frameborder="0"
 							allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
 							allowfullscreen></iframe>',
 						isIframe: true
@@ -211,13 +212,14 @@ class Youtube implements IPlayer {
 			videoId: extractVideoId(item.url),
 			playerVars: {
 				autoplay: 1,
+				// play videos inline instead of fullscreen on iOS
 				playsinline: 1,
-				modestbranding: 1,
+				// related videos only from same channel
 				rel: 0,
-				showinfo: 0
 			},
 			events: {
 				onReady: e -> {
+					if (!main.isAutoplayAllowed()) e.target.mute();
 					isLoaded = true;
 					youtube.pauseVideo();
 				},
@@ -271,6 +273,7 @@ class Youtube implements IPlayer {
 		info.formats ??= [];
 		info.adaptiveFormats ??= [];
 		final formats = info.adaptiveFormats.concat(info.formats);
+		trace(formats);
 		final qPriority = [1080, 720, 480, 360, 240];
 		for (q in qPriority) {
 			final quality = '${q}p';
@@ -304,6 +307,10 @@ class Youtube implements IPlayer {
 		youtube.pauseVideo();
 	}
 
+	public function isPaused():Bool {
+		return youtube.getPlayerState() == PAUSED;
+	}
+
 	public function getTime():Float {
 		return youtube.getCurrentTime();
 	}
@@ -319,4 +326,17 @@ class Youtube implements IPlayer {
 	public function setPlaybackRate(rate:Float):Void {
 		youtube.setPlaybackRate(rate);
 	}
+
+	public function getVolume():Float {
+		if (youtube.isMuted()) return 0;
+		return youtube.getVolume() / 100;
+	}
+
+	public function setVolume(volume:Float):Void {
+		youtube.setVolume(Std.int(volume * 100));
+	}
+
+	public function unmute():Void {
+		youtube.unMute();
+	}
 }