Live load themes

client/index.js

@@ -1,11 +1,22 @@
 var d3 = require("d3"),
     $ = require("jquery"),
-    themes = require("../settings/themes.json"),
     preview = require("./preview.js"),
     video = require("./video.js"),
     audio = require("./audio.js");
 
-preloadImages();
+d3.json("/settings/themes.json", function(err, themes){
+
+  if (err) {
+    throw err;
+  }
+
+  for (var key in themes) {
+    themes[key] = $.extend({}, themes.default, themes[key]);
+  }
+
+  preloadImages(themes);
+
+});
 
 function submitted() {
 
@@ -192,11 +203,11 @@ function updateCaption() {
 }
 
 function updateTheme() {
-  var extended = $.extend({}, themes.default, d3.select(this.options[this.selectedIndex]).datum());
+  var extended = d3.select(this.options[this.selectedIndex]).datum();
   preview.theme(extended);
 }
 
-function preloadImages() {
+function preloadImages(themes) {
 
   // preload images
   var imageQueue = d3.queue();
@@ -215,22 +226,22 @@ function preloadImages() {
 
   imageQueue.awaitAll(initialize);
 
-  function getImage(theme,cb) {
+  function getImage(theme, cb) {
 
     if (!theme.backgroundImage) {
-      return cb(null,theme);
+      return cb(null, theme);
     }
 
     theme.backgroundImageFile = new Image();
     theme.backgroundImageFile.onload = function(){
-      return cb(null,theme);
+      return cb(null, theme);
     };
     theme.backgroundImageFile.onerror = function(e){
       console.warn(e);
-      return cb(null,theme);
+      return cb(null, theme);
     };
 
-    theme.backgroundImageFile.src = "img/" + theme.backgroundImage;
+    theme.backgroundImageFile.src = "/settings/backgrounds/" + theme.backgroundImage;
 
   }
 

server/index.js

@@ -62,8 +62,20 @@ if (!serverSettings.s3Bucket) {
 // Check the status of a current video
 app.get("/status/:id/", status);
 
-// Serve background images and everything else statically
-app.use("/img/", express.static(path.join(__dirname, "..", "settings", "backgrounds")));
+
+// Serve background images and themes JSON statically
+app.use("/settings/", function(req, res, next) {
+
+  // Keep server settings off limits
+  if (req.url.match(/\.js$/i)) {
+    return res.status(404).send("Cannot GET " + path.join("/settings", req.url));
+  }
+
+  next();
+
+}, express.static(path.join(__dirname, "..", "settings")));
+
+// Serve editor files statically
 app.use(express.static(path.join(__dirname, "..", "editor")));
 
 app.use(errorHandlers);