Fix some issues with reused players

6 files changed, 54 insertions, 35 deletions

diff --git a/src/client/Buttons.hx b/src/client/Buttons.hx
index 8a1264e..a7dd4e1 100644
--- a/src/client/Buttons.hx
+++ b/src/client/Buttons.hx
@@ -262,8 +262,16 @@ class Buttons {
 		final swapLayoutBtn = ge("#swapLayoutBtn");
 		swapLayoutBtn.onclick = e -> {
 			final p = ge("#main");
-			p.insertBefore(p.children[2], p.children[0]);
-			p.insertBefore(p.children[2], p.children[1]);
+			if (ge("#main").firstElementChild == ge("#chatwrap")) {
+				// do not remove videowrap with insertBefore
+				// because this will recreate iframe-based players
+				p.appendChild(p.removeChild(p.children[1])); // gutter
+				p.appendChild(p.removeChild(p.children[0])); // chat
+				p.appendChild(p.removeChild(p.children[1])); // clear
+			} else {
+				p.insertBefore(p.children[2], p.children[0]);
+				p.insertBefore(p.children[2], p.children[1]);
+			}
 			final p = ge("#controlsrow");
 			p.insertBefore(p.children[1], p.children[0]);
 			final p = ge("#playlistrow");
diff --git a/src/client/IPlayer.hx b/src/client/IPlayer.hx
index a620567..4cdcb0b 100644
--- a/src/client/IPlayer.hx
+++ b/src/client/IPlayer.hx
@@ -8,6 +8,7 @@ interface IPlayer {
 	function getVideoData(url:String, callback:(data:VideoData)->Void):Void;
 	function loadVideo(item:VideoItem):Void;
 	function removeVideo():Void;
+	function isVideoLoaded():Bool;
 	function play():Void;
 	function pause():Void;
 	function getTime():Float;
diff --git a/src/client/Player.hx b/src/client/Player.hx
index d4ed854..c853464 100644
--- a/src/client/Player.hx
+++ b/src/client/Player.hx
@@ -21,7 +21,6 @@ class Player {
 	final videoItemsEl = ge("#queue");
 	final playerEl:Element = ge("#ytapiplayer");
 	var player:Null<IPlayer>;
-	var currentSrc = "";
 	var itemPos = 0;
 	var isLoaded = false;
 	var skipSetTime = false;
@@ -118,7 +117,6 @@ class Player {
 		itemPos = i;
 		childs[itemPos].classList.add("queue_active");
 
-		currentSrc = item.url;
 		isLoaded = false;
 		player.loadVideo(item);
 		JsApi.fireVideoChangeEvents(item);
@@ -127,7 +125,6 @@ class Player {
 
 	public function removeVideo():Void {
 		JsApi.fireVideoRemoveEvents(items[itemPos]);
-		currentSrc = "";
 		player.removeVideo();
 		ge("#currenttitle").textContent = Lang.get("nothingPlaying");
 	}
@@ -261,11 +258,12 @@ class Player {
 	}
 
 	public function setItems(list:Array<VideoItem>, ?pos:Int):Void {
+		final currentUrl = itemPos >= items.length ? "" : items[itemPos].url;
 		clearItems();
 		if (pos != null) itemPos = pos;
 		if (list.length == 0) return;
 		for (video in list) addVideoItem(video, true);
-		if (currentSrc != items[itemPos].url) setVideo(itemPos);
+		if (currentUrl != items[itemPos].url) setVideo(itemPos);
 		else videoItemsEl.children[itemPos].classList.add("queue_active");
 	}
 
@@ -321,43 +319,49 @@ class Player {
 		return playerEl.children.length != 0;
 	}
 
+	public function getDuration():Float {
+		if (itemPos >= items.length) return 0;
+		return items[itemPos].duration;
+	}
+
 	public function play():Void {
 		if (!main.isSyncActive) return;
 		if (player == null) return;
+		if (!player.isVideoLoaded()) return;
 		player.play();
 	}
 
 	public function pause():Void {
 		if (!main.isSyncActive) return;
 		if (player == null) return;
+		if (!player.isVideoLoaded()) return;
 		player.pause();
 	}
 
-	public function getDuration():Float {
-		if (itemPos >= items.length) return 0;
-		return items[itemPos].duration;
-	}
-
 	public function getTime():Float {
 		if (player == null) return 0;
+		if (!player.isVideoLoaded()) return 0;
 		return player.getTime();
 	}
 
 	public function setTime(time:Float, isLocal = true):Void {
 		if (!main.isSyncActive) return;
 		if (player == null) return;
+		if (!player.isVideoLoaded()) return;
 		skipSetTime = isLocal;
 		player.setTime(time);
 	}
 
 	public function getPlaybackRate():Float {
 		if (player == null) return 1;
+		if (!player.isVideoLoaded()) return 1;
 		return player.getPlaybackRate();
 	}
 
 	public function setPlaybackRate(rate:Float, isLocal = true):Void {
 		if (!main.isSyncActive) return;
 		if (player == null) return;
+		if (!player.isVideoLoaded()) return;
 		skipSetRate = isLocal;
 		player.setPlaybackRate(rate);
 	}
diff --git a/src/client/players/Iframe.hx b/src/client/players/Iframe.hx
index 1bb9855..3268a61 100644
--- a/src/client/players/Iframe.hx
+++ b/src/client/players/Iframe.hx
@@ -35,7 +35,7 @@ class Iframe implements IPlayer {
 		removeVideo();
 		video = document.createDivElement();
 		video.id = "videoplayer";
-		video.innerHTML = item.url;
+		video.innerHTML = item.url; // actually data
 		if (video.firstChild.nodeName != "IFRAME"
 			&& video.firstChild.nodeName != "OBJECT") {
 			// TODO move to getVideoData too
@@ -54,6 +54,10 @@ class Iframe implements IPlayer {
 		video = null;
 	}
 
+	public function isVideoLoaded():Bool {
+		return video != null;
+	}
+
 	public function play():Void {}
 
 	public function pause():Void {}
diff --git a/src/client/players/Raw.hx b/src/client/players/Raw.hx
index e3c2ed1..4fa000b 100644
--- a/src/client/players/Raw.hx
+++ b/src/client/players/Raw.hx
@@ -27,7 +27,7 @@ class Raw implements IPlayer {
 	}
 
 	public function getVideoData(url:String, callback:(data:VideoData)->Void):Void {
-		var title = url.substr(url.lastIndexOf('/') + 1);
+		var title = url.substr(url.lastIndexOf("/") + 1);
 		final matchName = ~/^(.+)\./;
 		if (matchName.match(title)) title = matchName.matched(1);
 		else title = Lang.get("rawVideo");
@@ -52,21 +52,13 @@ class Raw implements IPlayer {
 		final url = main.tryLocalIp(item.url);
 		if (video != null) {
 			video.src = url;
+			restartControlsHider();
 			return;
 		}
 		video = document.createVideoElement();
 		video.id = "videoplayer";
 		video.src = url;
-		video.controls = true;
-		if (controlsHider != null) controlsHider.stop();
-		if (!Utils.isTouch()) controlsHider = Timer.delay(() -> {
-			video.controls = false;
-		}, 3000);
-		video.onmousemove = e -> {
-			if (controlsHider != null) controlsHider.stop();
-			video.controls = true;
-			video.onmousemove = null;
-		}
+		restartControlsHider();
 		video.oncanplaythrough = player.onCanBePlayed;
 		video.onseeking = player.onSetTime;
 		video.onplay = e -> {
@@ -78,14 +70,31 @@ class Raw implements IPlayer {
 		playerEl.appendChild(video);
 	}
 
+	function restartControlsHider():Void {
+		if (Utils.isTouch()) return;
+		video.controls = true;
+		if (controlsHider != null) controlsHider.stop();
+		controlsHider = Timer.delay(() -> {
+			video.controls = false;
+		}, 3000);
+		video.onmousemove = e -> {
+			if (controlsHider != null) controlsHider.stop();
+			video.controls = true;
+			video.onmousemove = null;
+		}
+	}
+
 	public function removeVideo():Void {
 		if (video == null) return;
 		playerEl.removeChild(video);
 		video = null;
 	}
 
+	public function isVideoLoaded():Bool {
+		return video != null;
+	}
+
 	public function play():Void {
-		if (video == null) return;
 		if (!playAllowed) return;
 		final promise = video.play();
 		if (promise == null) return;
@@ -96,27 +105,22 @@ class Raw implements IPlayer {
 	}
 
 	public function pause():Void {
-		if (video == null) return;
 		video.pause();
 	}
 
 	public function getTime():Float {
-		if (video == null) return 0;
 		return video.currentTime;
 	}
 
 	public function setTime(time:Float):Void {
-		if (video == null) return;
 		video.currentTime = time;
 	}
 
 	public function getPlaybackRate():Float {
-		if (video == null) return 1;
 		return video.playbackRate;
 	}
 
 	public function setPlaybackRate(rate:Float):Void {
-		if (video == null) return;
 		video.playbackRate = rate;
 	}
 
diff --git a/src/client/players/Youtube.hx b/src/client/players/Youtube.hx
index 3ea0e72..0aa9f2b 100644
--- a/src/client/players/Youtube.hx
+++ b/src/client/players/Youtube.hx
@@ -235,33 +235,31 @@ class Youtube implements IPlayer {
 		video = null;
 	}
 
+	public function isVideoLoaded():Bool {
+		return isLoaded;
+	}
+
 	public function play():Void {
-		if (!isLoaded) return;
 		youtube.playVideo();
 	}
 
 	public function pause():Void {
-		if (!isLoaded) return;
 		youtube.pauseVideo();
 	}
 
 	public function getTime():Float {
-		if (!isLoaded) return 0;
 		return youtube.getCurrentTime();
 	}
 
 	public function setTime(time:Float):Void {
-		if (!isLoaded) return;
 		youtube.seekTo(time, true);
 	}
 
 	public function getPlaybackRate():Float {
-		if (!isLoaded) return 1;
 		return youtube.getPlaybackRate();
 	}
 
 	public function setPlaybackRate(rate:Float):Void {
-		if (!isLoaded) return;
 		youtube.setPlaybackRate(rate);
 	}