From 72f204825ed137d0d3f0d38751b5971e6c94ca5a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kasper=20Rynning-T=C3=B8nnesen?= <kasper@kasperrt.no>
Date: Tue, 3 Apr 2018 16:40:34 +0200
Subject: [PATCH] Better colorthief handling - Moved colorthief handling to
 api, making it easier to controll where the requests comes from

---
 server/handlers/io.js                |  6 ------
 server/handlers/list.js              | 14 ++++++++++----
 server/public/assets/js/channel.js   |  1 -
 server/public/assets/js/functions.js | 22 ++++++++++++++++++++--
 server/public/assets/js/player.js    |  3 ++-
 server/routing/client/api.js         | 14 ++++++++++++++
 6 files changed, 46 insertions(+), 14 deletions(-)

diff --git a/server/handlers/io.js b/server/handlers/io.js
index 896656e4..d52f4c1d 100644
--- a/server/handlers/io.js
+++ b/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() {})
         });
diff --git a/server/handlers/list.js b/server/handlers/list.js
index 3eae7a5b..53241bd1 100644
--- a/server/handlers/list.js
+++ b/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,10 +641,16 @@ function sendColor(coll, socket, id) {
     Jimp.read(url).then(function (image) {
 
         var c = ColorThief.getColor(image);
-        if(socket) {
-            socket.emit("color", {color: c, only: true});
+        if(ajax) {
+            res.header({"Content-Type": "application/json"});
+            res.status(200).send(c);
+            return;
         } else {
-            io.to(coll).emit("color", {color: c, only: false});
+            if(socket) {
+                socket.emit("color", {color: c, only: true});
+            } else {
+                io.to(coll).emit("color", {color: c, only: false});
+            }
         }
     });
 }
diff --git a/server/public/assets/js/channel.js b/server/public/assets/js/channel.js
index dc4b86dc..1376aec9 100644
--- a/server/public/assets/js/channel.js
+++ b/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){
diff --git a/server/public/assets/js/functions.js b/server/public/assets/js/functions.js
index 41387ec3..e622b820 100644
--- a/server/public/assets/js/functions.js
+++ b/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") + "_";
diff --git a/server/public/assets/js/player.js b/server/public/assets/js/player.js
index 0bf4c2fe..d67bd61b 100755
--- a/server/public/assets/js/player.js
+++ b/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});
         }
     },
 
diff --git a/server/routing/client/api.js b/server/routing/client/api.js
index 2c665462..bb8ae38f 100644
--- a/server/routing/client/api.js
+++ b/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://", "");