Better colorthief handling

- Moved colorthief handling to api, making it easier to controll where the requests comes from

server/handlers/io.js

@@ -48,12 +48,6 @@ module.exports = function() {
             }
         });
 
-        socket.on('color', function(msg) {
-            if(msg.hasOwnProperty("id")) {
-                List.sendColor(false, socket, msg.id);
-            }
-        });
-
         socket.on("logout", function() {
             Functions.removeSessionAdminPass(Functions.getSession(socket), coll, function() {})
         });

server/handlers/list.js

@@ -633,7 +633,7 @@ function send_play(coll, socket, broadcast) {
     });
 }
 
-function sendColor(coll, socket, id) {
+function sendColor(coll, socket, id, ajax, res) {
     if(coll != undefined && typeof(coll) == "string") {
         coll = coll.replace(/ /g,'');
     }
@@ -641,11 +641,17 @@ function sendColor(coll, socket, id) {
     Jimp.read(url).then(function (image) {
 
         var c = ColorThief.getColor(image);
+        if(ajax) {
+            res.header({"Content-Type": "application/json"});
+            res.status(200).send(c);
+            return;
+        } else {
             if(socket) {
                 socket.emit("color", {color: c, only: true});
             } else {
                 io.to(coll).emit("color", {color: c, only: false});
             }
+        }
     });
 }
 

server/public/assets/js/channel.js

@@ -547,7 +547,6 @@ var Channel = {
             socket.removeEventListener("suggested");
             socket.removeEventListener("color");
             socket.removeEventListener("chat_history");
-            socket.removeEventListener("color");
             $.ajax({
                 url: "/",
                 success: function(e){

server/public/assets/js/functions.js

@@ -21,6 +21,22 @@ function removeAllListeners() {
     socket.removeEventListener(id);
 }
 
+function getColor(id) {
+    $.ajax({
+        type: "POST",
+        url: "/api/color",
+        async: true,
+        data: {
+            id: id
+        },
+        success: function(c) {
+            if(typeof(c) == "object") {
+                Player.setBGimage({color:c, only:true});
+            }
+        },
+    });
+}
+
 function hide_native(way) {
     if(way == 1){
         if(!$('.castButton').hasClass('castButton-white-active')) {
@@ -453,9 +469,9 @@ function setup_chat_listener(){
 }
 
 function setup_list_listener(){
-    //if(!client) {
+    if(!offline) {
         socket.on("color", Player.setBGimage);
-    //}
+    }
     socket.on("channel", List.channel_function);
 }
 
@@ -524,6 +540,7 @@ function change_offline(enabled, already_offline){
         }
 
         if(window.location.pathname != "/"){
+            socket.removeEventListener("color");
             $("#controls").on("mouseenter", function(e){
                 if($("#seekToDuration").hasClass("hide")){
                     $("#seekToDuration").removeClass("hide");
@@ -592,6 +609,7 @@ function change_offline(enabled, already_offline){
         $("#controls").off("click", Channel.seekToClick);
         $("#seekToDuration").remove();
         if(window.location.pathname != "/"){
+            socket.on("color", Player.setBGimage);
             socket.emit("pos", {channel: chan.toLowerCase()});
             var add = "";
             if(private_channel) add = Crypt.getCookie("_uI") + "_";

server/public/assets/js/player.js

@@ -405,7 +405,8 @@ var Player = {
             Player.player.loadVideoById({'videoId': id, 'startSeconds': s, 'endSeconds': e});
         }
         if(offline) {
-            socket.emit("color", {id: id});
+            getColor(id);
+            //socket.emit("color", {id: id});
         }
     },
 

server/routing/client/api.js

@@ -1093,6 +1093,20 @@ function incrementToken(token) {
     });
 }
 
+router.route('/api/color').post(function(req, res) {
+    var origin = req.get("origin").replace("https://", "").replace("http://", "");
+    var allowed = ["client.localhost", "localhost", "zoff.me", "client.zoff.me", "zoff.no", "client.zoff.no"];
+    if(allowed.indexOf(origin) < 0) {
+        res.sendStatus(403);
+        return;
+    }
+    if(!req.body.hasOwnProperty("id") || typeof(req.body.id) != "string") {
+        res.sendStatus(400);
+        return;
+    }
+    List.sendColor(false, undefined, req.body.id, true, res);
+});
+
 router.route('/api/imageblob').post(function(req, res) {
     var Jimp = require("jimp");
     var origin = req.get("origin").replace("https://", "").replace("http://", "");