Added ability to upload custom theme

audiogram/draw-frames.js

@@ -9,7 +9,7 @@ function drawFrames(renderer, options, cb) {
       canvases = [];
 
   for (var i = 0; i < 10; i++) {
-    canvases.push(new Canvas(options.width, options.height));
+    canvases.push(Canvas.createCanvas(options.width, options.height));
   }
 
   for (var i = 0; i < options.numFrames; i++) {

audiogram/initialize-canvas.js

@@ -19,7 +19,8 @@ function initializeCanvas(theme, cb) {
       return cb(err);
     }
 
-    var bg = new Canvas.Image;
+    const canvas = Canvas.createCanvas();
+    var bg = canvas.Image;
     bg.src = raw;
     renderer.backgroundImage(bg);
 

client/index.js

@@ -2,7 +2,8 @@ var d3 = require("d3"),
     $ = require("jquery"),
     preview = require("./preview.js"),
     video = require("./video.js"),
-    audio = require("./audio.js");
+    audio = require("./audio.js"),
+    newTheme = null;
 
 d3.json("/settings/themes.json", function(err, themes){
 
@@ -90,6 +91,73 @@ function submitted() {
 
 }
 
+function uploadTheme() {
+  var formData = new FormData();
+  var file = preview.newTheme();
+
+  formData.append("newTheme", file);
+
+  var newCaption = preview.newCaption();
+  console.log('new theme', newCaption);
+  formData.append("newCaption", newCaption);
+  console.log(formData);
+  $.ajax({
+    url: "/theme/upload",
+    type: "POST",
+    data: formData,
+    contentType: false,
+    cache: false,
+    processData: false,
+    success: function () {
+      d3.json("/settings/themes.json", function(err, themes){
+
+        var errorMessage;
+
+        // Themes are missing or invalid
+        if (err || !d3.keys(themes).filter(function(d){ return d !== "default"; }).length) {
+          if (err instanceof SyntaxError) {
+            errorMessage = "Error in settings/themes.json:<br/><code>" + err.toString() + "</code>";
+          } else if (err instanceof ProgressEvent) {
+            errorMessage = "Error: no settings/themes.json.";
+          } else if (err) {
+            errorMessage = "Error: couldn't load settings/themes.json.";
+          } else {
+            errorMessage = "No themes found in settings/themes.json.";
+          }
+          d3.select("#loading-bars").remove();
+          d3.select("#loading-message").html(errorMessage);
+          if (err) {
+            throw err;
+          }
+          return;
+        }
+
+        for (var key in themes) {
+          themes[key] = $.extend({}, themes.default, themes[key]);
+        }
+
+        preloadImages(themes);
+
+        d3.select("#input-theme")
+          .selectAll("option")
+          .each(function (d) {
+            if (d.name === newCaption) {
+              this["selected"] = "selected";
+              d3.select("#input-new-theme").property("value", "");
+              d3.select("#input-new-caption").property("value", "");
+              return;
+            }
+          });
+
+      });
+    },
+    error: function (error) {
+      console.log('error', error);
+    }
+  });
+
+}
+
 function poll(id) {
 
   setTimeout(function(){
@@ -180,6 +248,12 @@ function initialize(err, themesWithImages) {
     setClass(null);
   });
 
+  d3.select("#btn-new-theme").on("click", uploadTheme);
+
+  d3.select("#input-new-theme").on("change", updateNewThemeFile).each(updateNewThemeFile);
+
+  d3.select("#input-new-caption").on("change keyup", updateNewCaption).each(updateNewCaption);
+
   d3.select("#submit").on("click", submitted);
 
 }
@@ -218,6 +292,22 @@ function updateAudioFile() {
 
 }
 
+function updateNewThemeFile() {
+  if (!this.files || !this.files[0]) {
+    preview.newTheme(null);
+    return true;
+  }
+
+  newTheme = this.files[0];
+  preview.loadNewTheme(newTheme, function (err) {
+    if (err) {
+      setClass("error", "Error updating new theme file");
+    } else {
+      setClass(null);
+    }
+  });
+}
+
 function updateCaption() {
   preview.caption(this.value);
 }
@@ -226,6 +316,10 @@ function updateTheme() {
   preview.theme(d3.select(this.options[this.selectedIndex]).datum());
 }
 
+function updateNewCaption() {
+  preview.newCaption(this.value);
+}
+
 function preloadImages(themes) {
 
   // preload images

client/preview.js

@@ -11,7 +11,9 @@ var context = d3.select("canvas").node().getContext("2d");
 var theme,
     caption,
     file,
-    selection;
+    selection,
+    newTheme,
+    newCaption;
 
 function _file(_) {
   return arguments.length ? (file = _) : file;
@@ -29,6 +31,14 @@ function _selection(_) {
   return arguments.length ? (selection = _) : selection;
 }
 
+function _newTheme(_) {
+  return arguments.length ? (newTheme = _) : newTheme;
+}
+
+function _newCaption(_) {
+  return arguments.length ? (newCaption = _) : newCaption;
+}
+
 minimap.onBrush(function(extent){
 
   var duration = audio.duration();
@@ -106,10 +116,28 @@ function loadAudio(f, cb) {
 
 }
 
+function loadNewTheme(f, cb) {
+  d3.queue()
+  .await(function(err, data){
+
+      if (err) {
+        return cb(err);
+      }
+
+      newTheme = f;
+
+      cb(err);
+
+    });
+}
+
 module.exports = {
   caption: _caption,
   theme: _theme,
   file: _file,
   selection: _selection,
-  loadAudio: loadAudio
+  loadAudio: loadAudio,
+  newTheme: _newTheme,
+  newCaption: _newCaption,
+  loadNewTheme: loadNewTheme
 };

editor/index.html

@@ -36,6 +36,27 @@
           </label>
           <input id="input-caption" name="caption" type="text" autocomplete="off" placeholder="Add a caption" />
         </div>
+
+        <div class="row form-row">
+          <hr>
+        </div>
+        <div class="row form-row" id="row-new-theme">
+          <label for="input-new-theme">New theme</label>
+          <input id="input-new-theme" name="new-theme" type="file" />
+        </div>
+        <div class="row form-row" id="row-caption">
+          <label for="input-caption">
+            Name
+          </label>
+          <input id="input-new-caption" name="new-caption" type="text" autocomplete="off" placeholder="Add a new theme name" />
+        </div>
+        <div class="row form-row">
+          <button class="btn btn-outline-primary" name="btn-new-theme" id="btn-new-theme">Add</button>
+        </div>
+        <div class="row form-row">
+          <hr>
+        </div>
+
         <div id="preview">
           <div style="background-color: black;">
             <div id="canvas">

package.json

@@ -25,12 +25,12 @@
   "dependencies": {
     "aws-sdk": "^2.2.39",
     "browserify": "^13.0.0",
-    "canvas": "git+https://github.com/chearon/node-canvas.git#12971f64a66b",
+    "canvas": "^2.6.1",
     "compression": "^1.6.1",
     "d3": "4.10.0",
     "dotenv": "^2.0.0",
     "express": "^4.13.3",
-    "jquery": "^2.2.1",
+    "jquery": "^3.4.1",
     "mkdirp": "^0.5.1",
     "morgan": "^1.7.0",
     "multer": "^1.1.0",
@@ -44,7 +44,7 @@
     "winston": "^2.2.0"
   },
   "devDependencies": {
-    "supertest": "^1.2.0",
+    "supertest": "^4.0.0",
     "tape": "^4.6.0",
     "watchify": "^3.7.0"
   }

server/index.js

@@ -11,7 +11,8 @@ var logger = require("../lib/logger/"),
     render = require("./render.js"),
     status = require("./status.js"),
     fonts = require("./fonts.js"),
-    errorHandlers = require("./error.js");
+    errorHandlers = require("./error.js"),
+    fs = require("fs");;
 
 // Settings
 var serverSettings = require("../lib/settings/");
@@ -38,15 +39,59 @@ var fileOptions = {
   })
 };
 
+var newThemeFileOptions = {
+  storage: multer.diskStorage({
+    destination: function(req, file, cb) {
+
+      var dir = path.join(serverSettings.themeStoragePath);
+
+      mkdirp(dir, function(err) {
+        return cb(err, dir);
+      });
+    },
+    filename: function(req, file, cb) {
+      cb(null, file.originalname);
+    }
+  })
+};
+
 if (serverSettings.maxUploadSize) {
   fileOptions.limits = {
     fileSize: +serverSettings.maxUploadSize
   };
+  newThemeFileOptions.limits = {
+    fileSize: +serverSettings.maxUploadSize
+  };
 }
 
 // On submission, check upload, validate input, and start generating a video
 app.post("/submit/", [multer(fileOptions).single("audio"), render.validate, render.route]);
 
+// Upload new theme
+app.post("/theme/upload/", [multer(newThemeFileOptions).single("newTheme"), function (req, res) {
+  var themesFile = path.join(serverSettings.settingsPath, "themes.json");
+  fs.readFile(themesFile, "utf8", function readFileCallback(err, data) {
+    if (err) {
+      console.log('err', err);
+      return null;
+    } else {
+      var caption = req.body.newCaption;
+      var themes = JSON.parse(data);
+      themes[caption] = {
+        "backgroundImage": req.file.filename
+      };
+      var jt = JSON.stringify(themes);
+      fs.writeFile(themesFile, jt, "utf8", function (err) {
+        if (err) {
+          console.log(err);
+          return null;
+        }
+      });
+    }
+  });
+  res.end();
+}]);
+
 // If not using S3, serve videos locally
 if (!serverSettings.s3Bucket) {
   app.use("/video/", express.static(path.join(serverSettings.storagePath, "video")));

settings/index.js

@@ -21,6 +21,8 @@ var path = require("path");
 module.exports = {
   workingDirectory: path.join(__dirname, "..", "tmp"),
   storagePath: path.join(__dirname, "..", "media"),
+  themeStoragePath: path.join(__dirname, "backgrounds"),
+  settingsPath: path.join(__dirname, "..", "settings"),
   fonts: [
     { family: "Source Sans Pro", file: path.join(__dirname, "fonts", "SourceSansPro-Regular.ttf") },
     { family: "Source Sans Pro", file: path.join(__dirname, "fonts", "SourceSansPro-Light.ttf"), weight: 300 },

test/frame-test.js

@@ -71,7 +71,7 @@ tape.test("Square frame", tester({
 
 function checkFrame(test, options) {
 
-  var testCanvas = new Canvas(options.width, options.height),
+  var testCanvas = Canvas.createCanvas(options.width, options.height),
       context = testCanvas.getContext("2d");
 
   d3.queue()
@@ -81,7 +81,8 @@ function checkFrame(test, options) {
 
       test.error(e);
 
-      var img = new Canvas.Image;
+      const canvas = Canvas.createCanvas();
+      var img = canvas.Image;
       img.src = f1;
 
       var bg = getColor(options.backgroundColor || "#fff"),