Add UI for custom embeds

www/assets/css/ytsync.css

@@ -327,3 +327,7 @@ html, body {
 #channelsettingswrap3 {
     margin-top: 20px;
 }
+
+#customembed_code {
+    font-family: Monospace;
+}

www/assets/js/player.js

@@ -635,8 +635,9 @@ Player.prototype.initCustom = function() {
     $("#ytapiplayer").remove();
     div.append(this.id);
 
-    this.player = div.find("iframe") || div.find("object")
-        || div.find("embed") || div;
+    this.player = div.find("iframe")
+    if(this.player.length === 0) this.player = div.find("object");
+    if(this.player.length === 0) this.player = div;
     this.player.attr("id", "ytapiplayer");
     this.player.attr("width", VWIDTH);
     this.player.attr("height", VHEIGHT);

www/assets/js/ui.js

@@ -228,6 +228,15 @@ $("#queue").sortable({
 $("#queue").disableSelection();
 
 function queue(pos) {
+    if($("#customembed_code").val()) {
+        socket.emit("queue", {
+            id: $("#customembed_code").val(),
+            type: "cu",
+            pos: pos
+        });
+        $("#customembed_code").val("");
+        return;
+    }
     var links = $("#mediaurl").val().split(",");
     if(pos == "next") {
         links = links.reverse();
@@ -286,6 +295,13 @@ $("#voteskip").click(function() {
     $("#voteskip").attr("disabled", true);
 });
 
+$("#customembed_btn").click(function () {
+    if($("#customembed_entry").css("display") == "none")
+        $("#customembed_entry").show("blind");
+    else
+        $("#customembed_entry").hide("blind");
+});
+
 $("#getplaylist").click(function() {
     var callback = function(data) {
         PLAYER.hide();

www/assets/js/util.js

@@ -874,6 +874,11 @@ function handlePermissionChange() {
 
     setVisible("#clearplaylist", hasPermission("playlistclear"));
     setVisible("#shuffleplaylist", hasPermission("playlistshuffle"));
+    setVisible("#customembed_btn", hasPermission("playlistaddcustom"));
+    if(!hasPermission("playlistaddcustom")) {
+        $("#customembed_entry").hide();
+        $("#customembed_code").val("");
+    }
 
 
     setVisible("#newpollbtn", hasPermission("pollctl"));
@@ -1371,6 +1376,7 @@ function genPermissionsEditor() {
     makeOption("Temp/untemp playlist item", "settemp", standard, CHANNEL.perms.settemp+"");
     makeOption("Shuffle playlist", "playlistshuffle", standard, CHANNEL.perms.playlistshuffle+"");
     makeOption("Clear playlist", "playlistclear", standard, CHANNEL.perms.playlistclear+"");
+    makeOption("Embed custom media", "playlistaddcustom", standard, CHANNEL.perms.playlistaddcustom + "");
 
     addDivider("Polls");
     makeOption("Open/Close poll", "pollctl", modleader, CHANNEL.perms.pollctl+"");

www/channel.html

@@ -174,6 +174,12 @@
                       <button class="btn" id="queue_next">Next</button>
                       <button class="btn" id="queue_end">End</button>
                     </div>
+                    <button id="customembed_btn" class="btn btn-block" style="display: none">Custom Embed</button>
+                    <div id="customembed_entry" style="display: none;">
+                        Paste the embed code below and hit Next or End.  Acceptable embed codes are <code>&lt;iframe&gt;</code> and <code>&lt;object&gt;</code> tags.
+                        <textarea rows="3" class="input-block-level" id="customembed_code"></textarea>
+                    </div>
+                    <br>
                     <div id="extended_controls" class="span12">
                       <button class="btn btn-danger btn-block" id="qlockbtn">Unlock Queue</button>
                       <button class="btn btn-block" id="clearplaylist">Clear Playlist</button>