Added caption and subtitle fonts edits

client/preview.js

@@ -105,8 +105,14 @@ function redraw() {
   });
 
   if (location.pathname === "/theme") {
-    const tf = (theme.noPattern === undefined) ? false : theme.noPattern;
-    d3.select("#chkNoPattern").property("checked", tf);
+    const noPattern = (theme.noPattern === undefined) ? false : theme.noPattern;
+    d3.select("#chkNoPattern").property("checked", noPattern);
+    const font = theme.subtitleFont;
+    if (font !== undefined) {
+      var fontName = font.substring(font.indexOf("'"));
+      fontName = fontName.substring(1, fontName.length-1);
+      d3.select("#input-font").property("value", fontName);
+    }
   }
 
 }

client/theme-editor.js

@@ -1,6 +1,9 @@
 var d3 = require("d3"),
     $ = require("jquery"),
-    preview = require("./preview.js");
+    preview = require("./preview.js"),
+    fonts = [{name: "Neue Haas Grotesk Text Pro"},
+      {name: "Source Sans Pro"}],
+    AColorPicker = require("a-color-picker");
 
 function _initialize() {
     d3.select("#btn-new-theme").on("click", uploadTheme);
@@ -8,6 +11,21 @@ function _initialize() {
   	d3.select("#input-new-caption").on("change keyup", updateNewCaption).each(updateNewCaption);
   	d3.select("#btn-delete-theme").on("click", deleteTheme);
     d3.select("#chkNoPattern").on("change", setNoPattern);
+
+    d3.select("#input-font")
+    .on("change", updateFont)
+    .selectAll("option")
+    .data(fonts)
+    .enter()
+    .append("option")
+      .text(function(d){
+        return d.name;
+      });
+
+    AColorPicker.from('.picker')
+    .on('change', (picker, color) => {
+      console.log(color);
+    });
 }
 
 function setClass(cl, msg) {
@@ -184,6 +202,21 @@ function setNoPattern() {
   saveTheme();
 }
 
+function updateFont() {
+  var font = d3.select("#input-font").property("value");
+  if (theme.captionFont) {
+    theme.captionFont = "300 52px '" + font + "'";
+  } else {
+    theme['captionFont'] = "300 52px '" + font + "'";
+  }
+  if (theme.subtitleFont) {
+    theme.subtitleFont = "300 44px '" + font + "'";
+  } else {
+    theme['subtitleFont'] = "300 44px '" + font + "'";
+  }
+  saveTheme();
+}
+
 module.exports = {
 	initialize: _initialize
 };

editor/css/editor.css

@@ -301,3 +301,8 @@ g.time line {
     -webkit-transform: scaleY(1.0);
   }
 }
+
+.picker {
+  display: inline-block;
+  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.16), 0 0 0 1px rgba(3, 1, 1, 0.08);
+}

editor/theme.html

@@ -68,6 +68,32 @@
           </div>
         </div>
 
+        <div class="row form-row" id="row-font">
+          <label for="input-font">Font</label>
+          <select id="input-font" name="font"></select>
+        </div>
+
+        <div class="row form-row">
+          <input type="checkbox" class="form-check-input" id="chkNoPattern">
+          <label class="form-check-label" for="chkNoPattern">No pattern</label>
+        </div>
+
+        <div class="row form-row">
+          <label for="captionColor">
+            Caption color
+          </label>
+          <div class="picker" acp-color="#EFE9E7" id="captionColor" name="captionColor">
+          </div>
+        </div>
+
+        <div class="row form-row">
+          <label for="captionColor">
+            Subtitle color
+          </label>
+          <div class="picker" acp-color="#EFE9E7" id="subtitleColor" name="subtitleColor">
+          </div>
+        </div>
+
         <div class="row form-row" style="padding: 20px 0 10px 0">
           <p>
             Please note: Theme assets can be only of png or jpeg file format
@@ -86,11 +112,6 @@
           <input id="input-new-caption" name="new-caption" type="text" autocomplete="off" placeholder="Add a new theme name" />
         </div>
 
-        <div class="row form-row">
-          <input type="checkbox" class="form-check-input" id="chkNoPattern">
-          <label class="form-check-label" for="chkNoPattern">No pattern</label>
-        </div>
-
         <div class="row form-row">
           <button type="button" id="btn-new-theme" class="left"><i class="fa fa-arrow-circle-up"></i>Add</button>
         </div>

package-lock.json

@@ -13,6 +13,14 @@
         "through": ">=2.2.7 <3"
       }
     },
+    "a-color-picker": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/a-color-picker/-/a-color-picker-1.2.1.tgz",
+      "integrity": "sha512-aMCUKd2zTDWK2YWnjz0k3YhFc9XL0jZlPIywF6XkP6i3wdq2iHTEnl1BFPZkOVDV89M12t+zeZ8m23cfzn57/Q==",
+      "requires": {
+        "is-plain-object": "^2.0.4"
+      }
+    },
     "abbrev": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
@@ -3121,7 +3129,6 @@
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",
       "integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==",
-      "dev": true,
       "requires": {
         "isobject": "^3.0.1"
       }
@@ -3182,8 +3189,7 @@
     "isobject": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
-      "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=",
-      "dev": true
+      "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8="
     },
     "isstream": {
       "version": "0.1.2",

package.json

@@ -24,6 +24,7 @@
   },
   "license": "MIT",
   "dependencies": {
+    "a-color-picker": "^1.2.1",
     "aws-sdk": "^2.2.39",
     "browserify": "^13.0.0",
     "canvas": "^2.6.1",

renderer/index.js

@@ -24,6 +24,7 @@ module.exports = function(t) {
     theme.backgroundColor = theme.backgroundColor || "#fff";
     theme.waveColor = theme.waveColor || theme.foregroundColor || "#000";
     theme.captionColor = theme.captionColor || theme.foregroundColor || "#000";
+    theme.subtitleColor = theme.subtitleColor || theme.foregroundColor || "#000";
 
     // Default wave dimensions
     if (typeof theme.waveTop !== "number") theme.waveTop = 0;

renderer/text-wrapper.js

@@ -65,7 +65,7 @@ function wrapSubtitleText(theme, context, subtitle) {
     y = top;
   }
 
-  // context.fillStyle = theme.subtitleColor;
+  context.fillStyle = theme.subtitleColor;
   lines.forEach(function(line, i){
     context.fillText(line.join(" "), x, y + i * (theme.subtitleLineHeight + theme.subtitleLineSpacing));
   });