Iframe items

4 files changed, 113 insertions, 7 deletions

diff --git a/src/client/Buttons.hx b/src/client/Buttons.hx
index 31f1e86..dec8f04 100644
--- a/src/client/Buttons.hx
+++ b/src/client/Buttons.hx
@@ -133,11 +133,18 @@ class Buttons {
 
 		final showMediaUrl = ge("#showmediaurl");
 		showMediaUrl.onclick = e -> {
-			ge("#showmediaurl").classList.toggle("collapsed");
-			ge("#showmediaurl").classList.toggle("active");
+			showMediaUrl.classList.toggle("collapsed");
+			showMediaUrl.classList.toggle("active");
 			ge("#addfromurl").classList.toggle("collapse");
 		}
 
+		final showCustomEmbed = ge("#showcustomembed");
+		showCustomEmbed.onclick = e -> {
+			showCustomEmbed.classList.toggle("collapsed");
+			showCustomEmbed.classList.toggle("active");
+			ge("#customembed").classList.toggle("collapse");
+		}
+
 		window.onresize = onVideoResize;
 		initSplit();
 	}
diff --git a/src/client/Main.hx b/src/client/Main.hx
index 9d9b90d..f32a80c 100644
--- a/src/client/Main.hx
+++ b/src/client/Main.hx
@@ -113,9 +113,20 @@ class Main {
 
 		ge("#queue_next").onclick = e -> addVideoUrl(false);
 		ge("#queue_end").onclick = e -> addVideoUrl(true);
-		ge("#mediaurl").onkeydown = function(e:KeyboardEvent) {
+		ge("#mediaurl").onkeydown = (e:KeyboardEvent) -> {
 			if (e.keyCode == 13) addVideoUrl(true);
 		}
+
+		ge("#ce_queue_next").onclick = e -> addIframe(false);
+		ge("#ce_queue_end").onclick = e -> addIframe(true);
+		ge("#customembed-title").onkeydown = (e:KeyboardEvent) -> {
+			if (e.keyCode == 13) {
+				addIframe(true);
+				e.preventDefault();
+			}
+		}
+		ge("#customembed-content").onkeydown =
+			ge("#customembed-title").onkeydown;
 	}
 
 	public inline function isUser():Bool {
@@ -178,7 +189,8 @@ class Main {
 						title: data.title,
 						author: personal.name,
 						duration: data.duration,
-						isTemp: isTemp
+						isTemp: isTemp,
+						isIframe: false
 					},
 					atEnd: atEnd
 			}});
@@ -186,6 +198,30 @@ class Main {
 		});
 	}
 
+	function addIframe(atEnd:Bool):Void {
+		final iframeCode:InputElement = cast ge("#customembed-content");
+		final iframe = iframeCode.value;
+		if (iframe.length == 0) return;
+		iframeCode.value = "";
+		final mediaName:InputElement = cast ge("#customembed-title");
+		final name = mediaName.value.length == 0 ? "Custom Media" : mediaName.value;
+		mediaName.value = "";
+		final checkbox:InputElement = cast ge("#customembed").querySelector(".add-temp");
+		final isTemp = checkbox.checked;
+		send({
+			type: AddVideo, addVideo: {
+				item: {
+					url: iframe,
+					title: name,
+					author: personal.name,
+					duration: 99 * 60 * 60,
+					isTemp: isTemp,
+					isIframe: true
+				},
+				atEnd: atEnd
+		}});
+	}
+
 	public function toggleVideoElement():Bool {
 		if (player.hasVideo()) player.removeVideo();
 		else if (!player.isListEmpty()) {
diff --git a/src/client/Player.hx b/src/client/Player.hx
index 443c14f..7088580 100644
--- a/src/client/Player.hx
+++ b/src/client/Player.hx
@@ -5,6 +5,7 @@ import js.Browser.document;
 import client.Main.ge;
 import client.players.Raw;
 import client.players.Youtube;
+import client.players.Iframe;
 import Types.VideoData;
 import Types.VideoItem;
 using StringTools;
@@ -93,7 +94,9 @@ class Player {
 	public function setVideo(i:Int):Void {
 		if (!main.isSyncActive) return;
 		final item = items[i];
-		if (Youtube.isYoutube(item.url)) {
+		if (item.isIframe) {
+			setPlayer(new Iframe(main, this));
+		} else if (Youtube.isYoutube(item.url)) {
 			setPlayer(new Youtube(main, this));
 		} else {
 			setPlayer(new Raw(main, this));
@@ -156,12 +159,13 @@ class Player {
 	}
 
 	public function addVideoItem(item:VideoItem, atEnd:Bool):Void {
+		final url = item.url.htmlEscape(true);
 		final itemEl = nodeFromString(
 			'<li class="queue_entry pluid-0" title="${Lang.get("addedBy")}: ${item.author}">
-				<a class="qe_title" href="${item.url}" target="_blank">${item.title.htmlEscape()}</a>
+				<a class="qe_title" href="$url" target="_blank">${item.title.htmlEscape()}</a>
 				<span class="qe_time">${duration(item.duration)}</span>
 				<div class="qe_clear"></div>
-				<div class="btn-group" style="display: inline-block;">
+				<div class="btn-group">
 					<button class="btn btn-xs btn-default qbtn-play">
 						<span class="glyphicon glyphicon-play"></span>${Lang.get("play")}
 					</button>
diff --git a/src/client/players/Iframe.hx b/src/client/players/Iframe.hx
new file mode 100644
index 0000000..37d2fe6
--- /dev/null
+++ b/src/client/players/Iframe.hx
@@ -0,0 +1,59 @@
+package client.players;
+
+import haxe.Timer;
+import js.html.Element;
+import js.html.VideoElement;
+import js.Browser.document;
+import client.Main.ge;
+import Types.VideoData;
+import Types.VideoItem;
+
+class Iframe implements IPlayer {
+
+	final main:Main;
+	final player:Player;
+	final playerEl:Element = ge("#ytapiplayer");
+	var video:Element;
+
+	public function new(main:Main, player:Player) {
+		this.main = main;
+		this.player = player;
+	}
+
+	public function getVideoData(url:String, callback:(data:VideoData)->Void):Void {
+		callback({
+			duration: 99 * 60 * 60,
+			title: "Custom Media"
+		});
+	}
+
+	public function loadVideo(item:VideoItem):Void {
+		video = document.createDivElement();
+		video.id = "videoplayer";
+		video.innerHTML = item.url;
+		if (video.firstChild.nodeName != "IFRAME"
+			&& video.firstChild.nodeName != "OBJECT") {
+			// TODO move to getVideoData too
+			video = null;
+			return;
+		}
+		playerEl.appendChild(video);
+	}
+
+	public function removeVideo():Void {
+		if (video == null) return;
+		playerEl.removeChild(video);
+		video = null;
+	}
+
+	public function play():Void {}
+
+	public function pause():Void {}
+
+	public function getTime():Float {
+		return 0;
+	}
+
+	public function setTime(time:Float):Void {}
+
+}