Added caption and subtitles colors

client/preview.js

@@ -4,7 +4,8 @@ var d3 = require("d3"),
     minimap = require("./minimap.js"),
     sampleWave = require("./sample-wave.js"),
     getRenderer = require("../renderer/"),
-    getWaveform = require("./waveform.js");
+    getWaveform = require("./waveform.js"),
+    $ = require("jquery");
 
 var context = d3.select("canvas").node().getContext("2d");
 
@@ -15,6 +16,8 @@ var theme,
     newTheme,
     newCaption,
     subtitle;
+    // captionColorPicker,
+    // subtitleColorPicker;
 
 function _file(_) {
   return arguments.length ? (file = _) : file;
@@ -113,10 +116,145 @@ function redraw() {
       fontName = fontName.substring(1, fontName.length-1);
       d3.select("#input-font").property("value", fontName);
     }
+    
+    const captionColor = (theme.captionColor === undefined) ? "#000" : theme.captionColor;
+    const subtitleColor = (theme.subtitleColor === undefined) ? "#000" : theme.subtitleColor;
+    
+    var container = document.querySelector(".captionColorPicker");
+
+    if (container.hasChildNodes()) {
+      while (container.firstChild) {
+        container.removeChild(container.firstChild);
+      }
+    }
+    var newElement = document.createElement('div');
+    container.appendChild(newElement);
+
+    var captionColorPicker = new Pickr({
+      el: newElement,
+      default: captionColor ? captionColor : '#fff',
+      theme: 'nano',
+      lockOpacity: true,
+
+      swatches: [
+        'rgba(244, 67, 54, 1)',
+        'rgba(233, 30, 99, 0.95)',
+        'rgba(156, 39, 176, 0.9)',
+        'rgba(103, 58, 183, 0.85)',
+        'rgba(63, 81, 181, 0.8)',
+        'rgba(33, 150, 243, 0.75)',
+        'rgba(3, 169, 244, 0.7)',
+        'rgba(0, 188, 212, 0.7)',
+        'rgba(0, 150, 136, 0.75)',
+        'rgba(76, 175, 80, 0.8)',
+        'rgba(139, 195, 74, 0.85)',
+        'rgba(205, 220, 57, 0.9)',
+        'rgba(255, 235, 59, 0.95)',
+        'rgba(255, 193, 7, 1)'
+      ],
+
+      components: {
+        preview: true,
+        opacity: true,
+        hue: true,
+
+        interaction: {
+          hex: true,
+          rgba: true,
+          hsva: true,
+          input: true,
+          clear: true,
+          save: true
+        }
+      }
+    });
+
+    captionColorPicker.on('save', (color, instance) => {
+      if (theme.captionColor) {
+        theme.captionColor = color.toHEXA().toString();
+      } else {
+        theme['captionColor'] = color.toHEXA().toString();
+      }
+      saveTheme();
+    });
+
+    container = document.querySelector(".subtitleColorPicker");
+
+    if (container.hasChildNodes()) {
+      while (container.firstChild) {
+        container.removeChild(container.firstChild);
+      }
+    }
+    newElement = document.createElement('div');
+    container.appendChild(newElement);
+
+    var subtitleColorPicker = new Pickr({
+      el: newElement,
+      default: subtitleColor ? subtitleColor : '#fff',
+      theme: 'nano',
+      lockOpacity: true,
+
+      swatches: [
+        'rgba(244, 67, 54, 1)',
+        'rgba(233, 30, 99, 0.95)',
+        'rgba(156, 39, 176, 0.9)',
+        'rgba(103, 58, 183, 0.85)',
+        'rgba(63, 81, 181, 0.8)',
+        'rgba(33, 150, 243, 0.75)',
+        'rgba(3, 169, 244, 0.7)',
+        'rgba(0, 188, 212, 0.7)',
+        'rgba(0, 150, 136, 0.75)',
+        'rgba(76, 175, 80, 0.8)',
+        'rgba(139, 195, 74, 0.85)',
+        'rgba(205, 220, 57, 0.9)',
+        'rgba(255, 235, 59, 0.95)',
+        'rgba(255, 193, 7, 1)'
+      ],
+
+      components: {
+        preview: true,
+        opacity: true,
+        hue: true,
+
+        interaction: {
+          hex: true,
+          rgba: true,
+          hsva: true,
+          input: true,
+          clear: true,
+          save: true
+        }
+      }
+    });
+
+    subtitleColorPicker.on('save', (color, instance) => {
+      if (theme.captionColor) {
+        theme.subtitleColor = color.toHEXA().toString();
+      } else {
+        theme['subtitleColor'] = color.toHEXA().toString();
+      }
+      saveTheme();
+    });
+
   }
 
 }
 
+function saveTheme() {
+  $.ajax({
+    url: "/theme/save",
+    type: "POST",
+    data: JSON.stringify({theme: theme}),
+    dataType: "json",
+    contentType: "application/json",
+    cache: false,
+    error: function (error) {
+      console.log('error', error);
+    }
+  });
+
+}
+
 function loadAudio(f, cb) {
 
   d3.queue()

client/theme-editor.js

@@ -2,8 +2,7 @@ var d3 = require("d3"),
     $ = require("jquery"),
     preview = require("./preview.js"),
     fonts = [{name: "Neue Haas Grotesk Text Pro"},
-      {name: "Source Sans Pro"}],
-    AColorPicker = require("a-color-picker");
+      {name: "Source Sans Pro"}];
 
 function _initialize() {
     d3.select("#btn-new-theme").on("click", uploadTheme);
@@ -22,10 +21,6 @@ function _initialize() {
         return d.name;
       });
 
-    AColorPicker.from('.picker')
-    .on('change', (picker, color) => {
-      console.log(color);
-    });
 }
 
 function setClass(cl, msg) {
@@ -182,7 +177,7 @@ function saveTheme() {
       preview.theme(theme);
     },
     error: function (error) {
-      console.log('error', error);
+      // console.log('error', error);
     }
   });
 
@@ -198,7 +193,6 @@ function setNoPattern() {
   } else {
     theme.noPattern = checked;
   }
-
   saveTheme();
 }
 

editor/theme.html

@@ -11,6 +11,9 @@
     <link href="/css/base.css" rel="stylesheet" type="text/css">
     <link href="/css/editor.css" rel="stylesheet" type="text/css">
     <link href="/fonts/fonts.css" rel="stylesheet" type="text/css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/themes/nano.min.css"/>
+    <script src="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/pickr.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/pickr.es5.min.js"></script>
   </head>
   <body class="loading">
 
@@ -74,23 +77,21 @@
         </div>
 
         <div class="row form-row">
+          <div style="padding-bottom: 7px">No pattern</div>
           <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 style="padding-bottom: 10px">Caption color</div>
+          <div style="border: thin solid; max-width: 40px">
+            <div class="captionColorPicker"></div>
           </div>
         </div>
 
         <div class="row form-row">
-          <label for="captionColor">
-            Subtitle color
-          </label>
-          <div class="picker" acp-color="#EFE9E7" id="subtitleColor" name="subtitleColor">
+          <div style="padding-bottom: 10px">Subtitle color</div>
+          <div style="border: thin solid; max-width: 40px">
+            <div class="subtitleColorPicker"></div>
           </div>
         </div>
 

package-lock.json

@@ -4,6 +4,15 @@
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
+    "@simonwep/pickr": {
+      "version": "1.7.4",
+      "resolved": "https://registry.npmjs.org/@simonwep/pickr/-/pickr-1.7.4.tgz",
+      "integrity": "sha512-fq7jgKJT21uWGC1mARBHvvd1JYlEf93o7SuVOB4Lr0x/2UPuNC9Oe9n/GzVeg4oVtqMDfh1wIEJpsdOJEZb+3g==",
+      "requires": {
+        "core-js": "^3.6.5",
+        "nanopop": "^2.1.0"
+      }
+    },
     "JSONStream": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/JSONStream/-/JSONStream-1.3.5.tgz",
@@ -13,14 +22,6 @@
         "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",
@@ -1024,6 +1025,11 @@
       "integrity": "sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=",
       "dev": true
     },
+    "core-js": {
+      "version": "3.6.5",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.6.5.tgz",
+      "integrity": "sha512-vZVEEwZoIsI+vPEuoF9Iqf5H7/M3eeQqWlQnYa8FSKKePuYTf5MWnxb5SDAzCa60b3JBRS5g9b+Dq7b1y/RCrA=="
+    },
     "core-util-is": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
@@ -3129,6 +3135,7 @@
       "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"
       }
@@ -3189,7 +3196,8 @@
     "isobject": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
-      "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8="
+      "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=",
+      "dev": true
     },
     "isstream": {
       "version": "0.1.2",
@@ -3542,6 +3550,11 @@
         "to-regex": "^3.0.1"
       }
     },
+    "nanopop": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/nanopop/-/nanopop-2.1.0.tgz",
+      "integrity": "sha512-jGTwpFRexSH+fxappnGQtN9dspgE2ipa1aOjtR24igG0pv6JCxImIAmrLRHX+zUF5+1wtsFVbKyfP51kIGAVNw=="
+    },
     "needle": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/needle/-/needle-2.4.0.tgz",

package.json

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