Merge branch 'live-load'

THEMES.md

@@ -75,10 +75,6 @@ Note that if you change `waveLeft` or `waveRight` to something other than full-w
 * `foregroundColor` - A convenience option for setting `waveColor` and `captionColor` to the same thing.
 * `maxDuration` - Maximum duration of an audiogram, in seconds (e.g. set this to `30` to enforce a 30-second time limit). The default is `300` (5 minutes).
 
-### Making changes
-
-After you've edited `settings/themes.json`, you'll want to run either `npm run rebuild` or `npm start` to rebundle the new themes for the editor.
-
 ### A note about fonts
 
 By default, Audiogram will already have access to fonts on your system.  This might be fine for local use, but it will become a problem on a server without the fonts you're used to, or if you want to use a specific font across lots of installations.

bin/worker

@@ -36,7 +36,7 @@ function render(settings) {
 
     if (err) {
       audiogram.status("error");
-      audiogram.set("error", err);
+      audiogram.set("error", err.toString());
       throw err;
     }
 

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() {
 
@@ -76,6 +87,8 @@ function poll(id) {
         if (result && result.status && result.status === "ready" && result.url) {
           video.update(result.url, preview.theme().name);
           setClass("rendered");
+        } else if (result.status === "error") {
+          error(result.error);
         } else {
           d3.select("#loading-message").text(statusMessage(result));
           poll(id);
@@ -97,6 +110,10 @@ function error(msg) {
     msg = JSON.stringify(msg);
   }
 
+  if (!msg) {
+    msg = "Unknown error";
+  }
+
   d3.select("#loading-message").text("Loading...");
   setClass("error", msg);
 
@@ -192,11 +209,10 @@ function updateCaption() {
 }
 
 function updateTheme() {
-  var extended = $.extend({}, themes.default, d3.select(this.options[this.selectedIndex]).datum());
-  preview.theme(extended);
+  preview.theme(d3.select(this.options[this.selectedIndex]).datum());
 }
 
-function preloadImages() {
+function preloadImages(themes) {
 
   // preload images
   var imageQueue = d3.queue();
@@ -215,22 +231,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) {
+
+  // Limit to themes.json and bg images
+  if (req.url.match(/^\/?themes.json$/i) || req.url.match(/^\/?backgrounds\/[^/]+$/i)) {
+    return next();
+  }
+
+  return res.status(404).send("Cannot GET " + path.join("/settings", req.url));
+
+}, express.static(path.join(__dirname, "..", "settings")));
+
+// Serve editor files statically
 app.use(express.static(path.join(__dirname, "..", "editor")));
 
 app.use(errorHandlers);

test/server-test.js

@@ -69,7 +69,7 @@ tape("404 2", function(test) {
 tape("Server static background", function(test) {
 
   request(server)
-    .get("/img/nyc.png")
+    .get("/settings/backgrounds/nyc.png")
     .expect(200)
     .expect("Content-Type", /image/)
     .end(function(err, res){