Add editors for CSS and JS

channel.js

@@ -75,6 +75,9 @@ var Channel = function(name) {
         time: "00:00"
     };
 
+    this.css = "";
+    this.js = "";
+
     Database.loadChannel(this);
     if(this.registered) {
         this.loadDump();
@@ -152,6 +155,9 @@ Channel.prototype.loadDump = function() {
             for(var i = 0; i < this.chatbuffer.length; i++) {
                 this.sendAll("chatMsg", this.chatbuffer[i]);
             }
+            this.css = data.css || "";
+            this.js = data.js || "";
+            this.sendAll("channelCSSJS", {css: this.css, js: this.js});
             setTimeout(function() { incrementalDump(this); }, 300000);
         }
         catch(e) {
@@ -175,7 +181,9 @@ Channel.prototype.saveDump = function() {
         motd: this.motd,
         logins: this.logins,
         openqueue: this.openqueue,
-        chatbuffer: this.chatbuffer
+        chatbuffer: this.chatbuffer,
+        css: this.css,
+        js: this.js
     };
     var text = JSON.stringify(dump);
     fs.writeFileSync("chandump/" + this.name, text);
@@ -378,6 +386,7 @@ Channel.prototype.userJoin = function(user) {
     user.socket.emit("queueLock", {locked: !this.openqueue});
     this.sendUserlist(user);
     this.sendRecentChat(user);
+    user.socket.emit("channelCSSJS", {css: this.css, js: this.js});
     if(this.poll) {
         user.socket.emit("newPoll", this.poll.packUpdate());
     }
@@ -1225,6 +1234,38 @@ Channel.prototype.tryUpdateOptions = function(user, data) {
     this.broadcastOpts();
 }
 
+Channel.prototype.trySetCSS = function(user, data) {
+    if(!Rank.hasPermission(user, "setcss")) {
+        return;
+    }
+
+    var css = data.css || "";
+    if(css.length > 20000) {
+        css = css.substring(0, 20000);
+    }
+    this.css = css;
+    this.sendAll("channelCSSJS", {
+        css: this.css,
+        js: this.js
+    });
+}
+
+Channel.prototype.trySetJS = function(user, data) {
+    if(!Rank.hasPermission(user, "setjs")) {
+        return;
+    }
+
+    var js = data.js || "";
+    if(js.length > 20000) {
+        js = js.substring(0, 20000);
+    }
+    this.js = js;
+    this.sendAll("channelCSSJS", {
+        css: this.css,
+        js: this.js
+    });
+}
+
 Channel.prototype.updateMotd = function(motd) {
     var html = motd.replace(/\n/g, "<br>");
     //html = this.filterMessage(html);

package.json

@@ -2,7 +2,7 @@
     "author": "Calvin Montgomery",
     "name": "CyTube",
     "description": "Online media synchronizer and chat",
-    "version": "1.7.4",
+    "version": "1.7.5",
     "repository": {
         "url": "http://github.com/calzoneman/sync"
     },

rank.js

@@ -21,6 +21,8 @@ var permissions = {
     registerChannel : exports.Owner,
     acl             : exports.Owner,
     chatFilter      : exports.Owner,
+    setcss          : exports.Owner,
+    setjs           : exports.Owner,
     queue           : exports.Moderator,
     assignLeader    : exports.Moderator,
     kick            : exports.Moderator,

server.js

@@ -9,7 +9,7 @@ The above copyright notice and this permission notice shall be included in all c
 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */
 
-const VERSION = "1.7.4";
+const VERSION = "1.7.5";
 
 var fs = require("fs");
 var Logger = require("./logger.js");

user.js

@@ -323,6 +323,18 @@ User.prototype.initCallbacks = function() {
         }
     }.bind(this));
 
+    this.socket.on("setChannelCSS", function(data) {
+        if(this.channel != null) {
+            this.channel.trySetCSS(this, data);
+        }
+    }.bind(this));
+
+    this.socket.on("setChannelJS", function(data) {
+        if(this.channel != null) {
+            this.channel.trySetJS(this, data);
+        }
+    }.bind(this));
+
     this.socket.on("chatFilter", function(data) {
         if(this.channel != null) {
             this.channel.tryChangeFilter(this, data);

www/assets/css/ytsync.css

@@ -202,10 +202,14 @@ html, body {
     text-align: center;
 }
 
-#motdtext {
+#motdtext, #csstext, #jstext {
     width: 100%;
 }
 
+#csstext, #jstext {
+    font-family: Monospace;
+}
+
 #queue_next, #queue_end, #library_search, #youtube_search {
     width: 50%;
 }

www/assets/js/callbacks.js

@@ -227,6 +227,29 @@ Callbacks = {
         rebuildPlaylist();
     },
 
+    channelCSSJS: function(data) {
+        console.log("recv cssjs", data);
+        $("#chancss").remove();
+        $("#chanjs").remove();
+
+        $("#csstext").val(data.css);
+        $("#jstext").val(data.js);
+
+        if(data.css) {
+            $("<style/>").attr("type", "text/css")
+                .attr("id", "chancss")
+                .text(data.css)
+                .appendTo($("head"));
+        }
+
+        if(data.js) {
+            $("<script/>").attr("type", "text/javascript")
+                .attr("id", "chanjs")
+                .text(data.js)
+                .appendTo($("body"));
+        }
+    },
+
     banlist: function(data) {
         var entries = data.entries;
         var tbl = $("#banlist table");

www/assets/js/client.js

@@ -413,6 +413,36 @@ $("#show_motdeditor").click(function() {
     $("#motdeditor").show();
 });
 
+$("#show_csseditor").click(function() {
+    $("#modnav li").each(function() {
+        $(this).removeClass("active");
+    });
+    $(".modonly").hide();
+    $("#show_csseditor").parent().addClass("active");
+    $("#csseditor").show();
+});
+
+$("#updatecss").click(function() {
+    socket.emit("setChannelCSS", {
+        css: $("#csstext").val()
+    });
+});
+
+$("#show_jseditor").click(function() {
+    $("#modnav li").each(function() {
+        $(this).removeClass("active");
+    });
+    $(".modonly").hide();
+    $("#show_jseditor").parent().addClass("active");
+    $("#jseditor").show();
+});
+
+$("#updatejs").click(function() {
+    socket.emit("setChannelJS", {
+        js: $("#jstext").val()
+    });
+});
+
 $("#show_filtereditor").click(function() {
     if(RANK >= Rank.Owner) {
         $("#modnav li").each(function() {

www/assets/js/functions.js

@@ -654,6 +654,14 @@ function handleRankChange() {
         $("#clearplaylist").css("display", "none");
         $("#shuffleplaylist").css("display", "none");
     }
+    if(RANK >= Rank.Owner) {
+        $("#show_jseditor").parent().css("display", "");
+        $("#show_csseditor").parent().css("display", "");
+    }
+    else {
+        $("#show_jseditor").parent().css("display", "none");
+        $("#show_csseditor").parent().css("display", "none");
+    }
     if(RANK >= 10) {
         $("#drop_channel").parent().css("display", "");
     }

www/assets/js/media.js

@@ -54,7 +54,6 @@ Media.prototype.nullPlayer = function() {
 
 Media.prototype.initYouTube = function() {
     this.removeOld();
-    console.log("init YouTube");
     this.player = new YT.Player("ytapiplayer", {
         height: VHEIGHT,
         width: VWIDTH,

www/channel.html

@@ -134,6 +134,12 @@
                     <li>
                         <a href="javascript:void(0)" id="show_motdeditor">MOTD</a>
                     </li>
+                    <li style="display: none">
+                        <a href="javascript:void(0)" id="show_csseditor">CSS Editor</a>
+                    </li>
+                    <li style="display: none">
+                        <a href="javascript:void(0)" id="show_jseditor">JS Editor</a>
+                    </li>
                     <li>
                         <a href="javascript:void(0)" id="show_filtereditor">Chat Filters</a>
                     </li>
@@ -242,6 +248,20 @@
                 <button class="btn btn-primary" id="updatemotd">Update</button>
             </div>
         </div>
+        <div class="row modonly" id="csseditor" style="display: none;">
+            <div class="span12">
+                <p>Max 20KB.  If you need more CSS, host the file somewhere and use the External CSS channel option</p>
+                <textarea rows="10" id="csstext"></textarea>
+                <button class="btn btn-primary" id="updatecss">Update</button>
+            </div>
+        </div>
+        <div class="row modonly" id="jseditor" style="display: none;">
+            <div class="span12">
+                <p>Max 20KB.  If you need more JS, host the file somewhere and use the External JS channel option</p>
+                <textarea rows="10" id="jstext"></textarea>
+                <button class="btn btn-primary" id="updatejs">Update</button>
+            </div>
+        </div>
         <div class="row modonly" id="filtereditor" style="display: none;">
             <div class="span12">
                 <p><strong>Note:</strong> if you just want simple word replacement, like emoticons, put the word in the Regex field, use <code>ig</code> for the flags, and put the replacement in the Replacement field.</p>