Refactoring wave/caption

audiogram/draw-frames.js

@@ -1,23 +1,29 @@
 var fs = require("fs"),
     path = require("path"),
+    Canvas = require("canvas"),
     queue = require("d3").queue;
 
 function drawFrames(renderer, options, cb) {
 
-  var frameQueue = queue(10);
+  var frameQueue = queue(10),
+      canvas = new Canvas(options.width, options.height),
+      context = canvas.getContext("2d");
 
   for (var i = 0; i < options.numFrames; i++) {
-
     frameQueue.defer(drawFrame, i);
-
   }
 
   frameQueue.awaitAll(cb);
 
   function drawFrame(frameNumber, frameCallback) {
 
-    renderer.drawFrame(frameNumber);
-    fs.writeFile(path.join(options.frameDir, zeropad(frameNumber + 1, 6) + ".png"), renderer.context.canvas.toBuffer(), function(err) {
+    renderer.drawFrame(context, {
+      caption: options.caption,
+      waveform: options.waveform[frameNumber],
+      frame: frameNumber
+    });
+
+    fs.writeFile(path.join(options.frameDir, zeropad(frameNumber + 1, 6) + ".png"), canvas.toBuffer(), function(err) {
       if (err) {
         return frameCallback(err);
       }

audiogram/index.js

@@ -115,8 +115,12 @@ Audiogram.prototype.drawFrames = function(cb) {
     self.status("frames");
 
     drawFrames(renderer, {
+      width: self.settings.width,
+      height: self.settings.height,
       numFrames: self.numFrames,
       frameDir: self.frameDir,
+      caption: self.settings.caption,
+      waveform: self.settings.waveform,
       tick: function() {
         transports.incrementField(self.id, "framesComplete");
       }

audiogram/initialize-canvas.js

@@ -1,25 +1,19 @@
 var fs = require("fs"),
     path = require("path"),
     Canvas = require("canvas"),
-    getRenderer = require("../renderer/"),
-    serverSettings = require("../settings/");
+    getRenderer = require("../renderer/");
 
-function initializeCanvas(options, cb) {
+function initializeCanvas(theme, cb) {
 
   // Fonts pre-registered in bin/worker
+  var renderer = getRenderer(theme);
 
-  var canvas = new Canvas(options.width, options.height),
-      context = canvas.getContext("2d"),
-      renderer = getRenderer(context).update(options);
-
-  renderer.caption = options.caption;
-
-  if (!options.backgroundImage) {
+  if (!theme.backgroundImage) {
     return cb(null, renderer);
   }
 
   // Load background image from file (done separately so renderer code can work in browser too)
-  fs.readFile(path.join(__dirname, "..", "settings", "backgrounds", options.backgroundImage), function(err, raw){
+  fs.readFile(path.join(__dirname, "..", "settings", "backgrounds", theme.backgroundImage), function(err, raw){
 
     if (err) {
       return cb(err);
@@ -27,7 +21,7 @@ function initializeCanvas(options, cb) {
 
     var bg = new Canvas.Image;
     bg.src = raw;
-    renderer.backgroundImage = bg;
+    renderer.backgroundImage(bg);
 
     return cb(null, renderer);
 

client/preview.js

@@ -2,12 +2,12 @@ var d3 = require("d3"),
     audio = require("./audio.js"),
     video = require("./video.js"),
     minimap = require("./minimap.js"),
+    sampleWave = require("./sample-wave.js"),
+    getRenderer = require("../renderer/"),
     getWaveform = require("./waveform.js");
 
 var context = d3.select("canvas").node().getContext("2d");
 
-var renderer = require("../renderer/")(context);
-
 var theme,
     caption,
     file,
@@ -74,10 +74,15 @@ function redraw() {
 
   video.kill();
 
-  renderer.update(theme);
-  renderer.caption = caption;
-  renderer.backgroundImage = theme.backgroundImageFile || null;
-  renderer.drawFrame(0);
+  var renderer = getRenderer(theme);
+
+  renderer.backgroundImage(theme.backgroundImageFile || null);
+
+  renderer.drawFrame(context, {
+    caption: caption,
+    waveform: sampleWave,
+    frame: 0
+  });
 
 }
 

renderer/index.js

@@ -1,63 +1,71 @@
 var d3 = require("d3"),
     patterns = require("./patterns.js"),
-    sample = require("./sample-wave.js"),
     textWrapper = require("./text-wrapper.js");
 
-module.exports = function(context) {
+module.exports = function(t) {
 
-  context.patternQuality = "best";
+  var renderer = {},
+      backgroundImage,
+      wrapText,
+      theme;
 
-  var renderer = {};
+  renderer.backgroundImage = function(_) {
+    if (!arguments.length) return backgroundImage;
+    backgroundImage = _;
+    return this;
+  };
 
-  renderer.context = context;
+  renderer.theme = function(_) {
+    if (!arguments.length) return theme;
 
-  renderer.update = function(options) {
+    theme = _;
 
-    // TODO cleaner defaults
-    options.backgroundColor = options.backgroundColor || "#fff";
-    options.waveColor = options.waveColor || options.foregroundColor || "#000";
-    options.captionColor = options.captionColor || options.foregroundColor || "#000";
+    // Default colors
+    theme.backgroundColor = theme.backgroundColor || "#fff";
+    theme.waveColor = theme.waveColor || theme.foregroundColor || "#000";
+    theme.captionColor = theme.captionColor || theme.foregroundColor || "#000";
 
-    if (typeof options.waveTop !== "number") options.waveTop = 0;
-    if (typeof options.waveBottom !== "number") options.waveBottom = options.height;
-    if (typeof options.waveLeft !== "number") options.waveLeft = 0;
-    if (typeof options.waveRight !== "number") options.waveRight = options.width;
+    // Default wave dimensions
+    if (typeof theme.waveTop !== "number") theme.waveTop = 0;
+    if (typeof theme.waveBottom !== "number") theme.waveBottom = theme.height;
+    if (typeof theme.waveLeft !== "number") theme.waveLeft = 0;
+    if (typeof theme.waveRight !== "number") theme.waveRight = theme.width;
 
-    this.wrapText = textWrapper(context, options);
-    this.options = options;
-    this.waveform = options.waveform || [sample.slice(0, options.samplesPerFrame)];
-    return this;
-  };
+    wrapText = textWrapper(theme);
 
-  // Get the waveform data for this frame
-  renderer.getWaveform = function(frameNumber) {
-    return this.waveform[Math.min(this.waveform.length - 1, frameNumber)];
+    return this;
   };
 
   // Draw the frame
-  renderer.drawFrame = function(frameNumber) {
+  renderer.drawFrame = function(context, options){
+
+    context.patternQuality = "best";
 
     // Draw the background image and/or background color
-    context.clearRect(0, 0, this.options.width, this.options.height);
+    context.clearRect(0, 0, theme.width, theme.height);
 
-    context.fillStyle = this.options.backgroundColor;
-    context.fillRect(0, 0, this.options.width, this.options.height);
+    context.fillStyle = theme.backgroundColor;
+    context.fillRect(0, 0, theme.width, theme.height);
 
-    if (this.backgroundImage) {
-      context.drawImage(this.backgroundImage, 0, 0, this.options.width, this.options.height);
+    if (backgroundImage) {
+      context.drawImage(backgroundImage, 0, 0, theme.width, theme.height);
     }
 
-    patterns[this.options.pattern || "wave"](context, this.getWaveform(frameNumber), this.options);
+    patterns[theme.pattern || "wave"](context, options.waveform, theme);
 
     // Write the caption
-    if (this.caption) {
-      this.wrapText(this.caption);
+    if (options.caption) {
+      wrapText(context, options.caption);
     }
 
     return this;
 
   };
 
+  if (t) {
+    renderer.theme(t);
+  }
+
   return renderer;
 
 }

renderer/text-wrapper.js

@@ -1,16 +1,12 @@
 var smartquotes = require("smartquotes").string;
 
-module.exports = function(context, options) {
-
-  context.font = options.captionFont;
-  context.textBaseline = "top";
-  context.textAlign = options.captionAlign || "center";
+module.exports = function(theme) {
 
   // Do some typechecking
-  var left = ifNumeric(options.captionLeft, 0),
-      right = ifNumeric(options.captionRight, options.width),
-      bottom = ifNumeric(options.captionBottom, null),
-      top = ifNumeric(options.captionTop, null);
+  var left = ifNumeric(theme.captionLeft, 0),
+      right = ifNumeric(theme.captionRight, theme.width),
+      bottom = ifNumeric(theme.captionBottom, null),
+      top = ifNumeric(theme.captionTop, null);
 
   if (bottom === null && top === null) {
     top = 0;
@@ -18,7 +14,7 @@ module.exports = function(context, options) {
 
   var captionWidth = right - left;
 
-  return function(caption) {
+  return function(context, caption) {
 
     if (!caption) {
       return;
@@ -28,6 +24,10 @@ module.exports = function(context, options) {
         maxWidth = 0,
         words = smartquotes(caption + "").trim().replace(/\s\s+/g, " \n").split(/ /g);
 
+    context.font = theme.captionFont;
+    context.textBaseline = "top";
+    context.textAlign = theme.captionAlign || "center";
+
     // Check whether each word exceeds the width limit
     // Wrap onto next line as needed
     words.forEach(function(word,i){
@@ -50,10 +50,10 @@ module.exports = function(context, options) {
 
     });
 
-    var totalHeight = lines.length * options.captionLineHeight + (lines.length - 1) * options.captionLineSpacing;
+    var totalHeight = lines.length * theme.captionLineHeight + (lines.length - 1) * theme.captionLineSpacing;
 
     // horizontal alignment
-    var x = options.captionAlign === "left" ? left : options.captionAlign === "right" ? right : (left + right) / 2;
+    var x = theme.captionAlign === "left" ? left : theme.captionAlign === "right" ? right : (left + right) / 2;
 
     // Vertical alignment
     var y;
@@ -69,9 +69,9 @@ module.exports = function(context, options) {
       y = top;
     }
 
-    context.fillStyle = options.captionColor;
+    context.fillStyle = theme.captionColor;
     lines.forEach(function(line, i){
-      context.fillText(line.join(" "), x, y + i * (options.captionLineHeight + options.captionLineSpacing));
+      context.fillText(line.join(" "), x, y + i * (theme.captionLineHeight + theme.captionLineSpacing));
     });
 
  };