Added theme editor

client/audio.js

@@ -44,6 +44,10 @@ function restart() {
 
 function update() {
 
+  if (!audio) {
+    return;
+  }
+
   if (audio.duration) {
 
     var pos = audio.currentTime / audio.duration;

client/index.js

@@ -3,7 +3,7 @@ var d3 = require("d3"),
     preview = require("./preview.js"),
     video = require("./video.js"),
     audio = require("./audio.js"),
-    newTheme = null,
+    editorEditor = require("./theme-editor.js"),
     subtitle = null;
 
 d3.json("/settings/themes.json", function(err, themes){
@@ -35,6 +35,10 @@ d3.json("/settings/themes.json", function(err, themes){
 
   preloadImages(themes);
 
+  if (location.pathname === '/theme') {
+    editorEditor.initialize();
+  }
+
 });
 
 function submitted() {
@@ -98,73 +102,6 @@ function submitted() {
 
 }
 
-function uploadTheme() {
-  var formData = new FormData();
-  var file = preview.newTheme();
-
-  formData.append("newTheme", file);
-
-  var newCaption = preview.newCaption();
-
-  formData.append("newCaption", newCaption);
-
-  $.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(){
@@ -257,12 +194,6 @@ 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("#input-subtitle").on("change", updateSubtitleFile).each(updateSubtitleFile);
 
   d3.select("#submit").on("click", submitted);
@@ -305,23 +236,6 @@ function updateAudioFile() {
 
 }
 
-function updateNewThemeFile() {
-  if (!this.files || !this.files[0]) {
-    preview.newTheme(null);
-    setClass(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 updateSubtitleFile() {
   if (!this.files || !this.files[0]) {
     preview.subtitle(null);
@@ -347,10 +261,6 @@ function updateTheme() {
   preview.theme(d3.select(this.options[this.selectedIndex]).datum());
 }
 
-function updateNewCaption() {
-  preview.newCaption(this.value);
-}
-
 function preloadImages(themes) {
 
   // preload images

client/theme-editor.js

@@ -0,0 +1,119 @@
+var d3 = require("d3"),
+    $ = require("jquery"),
+    preview = require("./preview.js");
+
+function _initialize() {
+    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("#btn-delete-theme").on("click", deleteTheme);
+}
+
+function setClass(cl, msg) {
+  d3.select("body").attr("class", cl || null);
+  d3.select("#error").text(msg || "");
+}
+
+function uploadTheme() {
+  var formData = new FormData();
+  var file = preview.newTheme();
+
+  formData.append("newTheme", file);
+
+  var newCaption = preview.newCaption();
+
+  formData.append("newCaption", newCaption);
+
+  $.ajax({
+    url: "/theme/upload",
+    type: "POST",
+    data: formData,
+    dataType: "json",
+    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;
+        }
+
+        location.reload();
+
+      });
+    },
+    error: function (error) {
+      console.log('error', error);
+    }
+  });
+
+}
+
+function updateNewThemeFile() {
+  if (!this.files || !this.files[0]) {
+    preview.newTheme(null);
+    setClass(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 updateNewCaption() {
+  preview.newCaption(this.value);
+}
+
+function deleteTheme() {
+	if(!confirm($("#btn-delete-theme").data("confirm"))){
+      d3.event.stopImmediatePropagation();
+      d3.event.preventDefault();
+      return;
+  }
+
+	var theme = d3.select("#input-theme").property("value");
+
+	$.ajax({
+    url: "/theme/delete",
+    type: "POST",
+    data: JSON.stringify({theme: theme}),
+    dataType: "json",
+    contentType: "application/json",
+    cache: false,
+    success: function () {
+    	location.reload();
+    },
+    error: function (error) {
+    	console.log('error', error);
+  	}
+	});
+
+}
+
+module.exports = {
+	initialize: _initialize
+};

client/video.js

@@ -4,6 +4,10 @@ var video = document.querySelector("video");
 
 function kill() {
 
+  if (!video) {
+    return;
+  }
+
   // Pause the video if it's playing
   if (!video.paused && !video.ended && 0 < video.currentTime) {
     video.pause();

editor/index.html

@@ -3,6 +3,8 @@
   <head>
     <title>Audiogram</title>
     <meta charset="utf-8" />
+    <meta name="robots" content="noindex, nofollow" />
+    <meta name="googlebot" content="noindex, nofollow" />
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
     <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,300,600" rel="stylesheet" type="text/css">
@@ -13,6 +15,9 @@
   <body class="loading">
     <div class="container">
       <h1>Audiogram</h1>
+      <div>
+        <a href="/theme">Go to theme editor</a>
+      </div>
       <div id="loading">
         <div id="loading-bars">
           <div class="r1"></div><div class="r2"></div><div class="r3"></div><div class="r4"></div><div class="r5"></div>
@@ -42,27 +47,6 @@
           </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">

editor/theme.html

@@ -1,8 +1,10 @@
-<html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
-    <title>Audiogram::Theme Editor</title>
+    <title>Audiogram / Theme Editor</title>
     <meta charset="utf-8" />
+    <meta name="robots" content="noindex, nofollow" />
+    <meta name="googlebot" content="noindex, nofollow" />
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
     <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,300,600" rel="stylesheet" type="text/css">
@@ -10,7 +12,89 @@
     <link href="/css/editor.css" rel="stylesheet" type="text/css">
     <link href="/fonts/fonts.css" rel="stylesheet" type="text/css">
   </head>
-  <body>
-  	
+  <body class="loading">
+
+    <div class="container">
+
+      <h1>Theme Editor</h1>
+      <div>
+        <a href="/">Go back</a>
+      </div>
+      <div id="loading">
+        <div id="loading-bars">
+          <div class="r1"></div><div class="r2"></div><div class="r3"></div><div class="r4"></div><div class="r5"></div>
+        </div>
+        <div id="loading-message">Loading...</div>
+      </div>
+
+      <div id="loaded">
+
+        <div class="row form-row" id="row-theme">
+          <label for="input-theme">Theme</label>
+          <select id="input-theme" name="theme"></select>
+        </div>
+
+        <div class="row form-row" style="padding-bottom: 40px">
+          <button type="button" id="btn-delete-theme" class="left" data-confirm="Are you sure you want to delete this theme?"><i class="fa fa-trash"></i>Delete</button>
+        </div>
+
+        <div id="preview">
+          <div style="background-color: black;">
+            <div id="canvas">
+              <canvas width="640" height="360"></canvas>
+              <div id="preview-label">Preview</div>
+            </div>
+          </div>
+          <div id="minimap" class="hidden">
+            <svg width="640" height="80" xmlns="http://www.w3.org/2000/svg">
+              <defs>
+                <clipPath id="clip">
+                  <rect height="80" width="640" x="0" y="0"></rect>
+                </clipPath>
+              </defs>
+              <g class="waveform background">
+                <line x1="0" x2="640" y1="40" y2="40"></line>
+                <path></path>
+              </g>
+              <g class="waveform foreground" clip-path="url(#clip)">
+                <line x1="0" x2="640" y1="40" y2="40"></line>
+                <path></path>
+              </g>
+              <g class="brush"></g>
+              <g class="time">
+                <line x1="0" x2="0" y1="0" y2="80"></line>
+              </g>
+            </svg>
+          </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
+          </p>
+        </div>
+
+        <div class="row form-row" id="row-new-theme" style="padding: 0 0 20px 0">
+          <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">
+            Theme 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 type="button" id="btn-new-theme" class="left"><i class="fa fa-arrow-circle-up"></i>Add</button>
+        </div>
+        
+
+      </div>
+
+    </div>
+
+    <script src="/js/bundle.js"></script>
+    <script src="/fonts/fonts.js"></script>
   </body>
-</html>
+</html>

server/index.js

@@ -16,10 +16,14 @@ var logger = require("../lib/logger/"),
 // Settings
 var serverSettings = require("../lib/settings/");
 
-var fs = require("fs");
+var fs = require("fs"),
+    bodyParser = require("body-parser");
 
 var app = express();
 
+var jsonParser = bodyParser.json();
+// var urlencodedParser = bodyParser.urlencoded({ extended: false });
+
 app.use(compression());
 app.use(logger.morgan());
 
@@ -72,13 +76,12 @@ const mt = multer(fileOptions).fields([{name: 'audio'}, {name: 'subtitle'}]);
 app.post("/submit/", [mt, 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;
+      res.send(JSON.stringify({status: 500, error: err}));
     } else {
       var caption = req.body.newCaption;
       var themes = JSON.parse(data);
@@ -89,14 +92,55 @@ app.post("/theme/upload/", [multer(newThemeFileOptions).single("newTheme"), func
       fs.writeFile(themesFile, jt, "utf8", function (err) {
         if (err) {
           console.log(err);
-          return null;
+          res.send(JSON.stringify({status: 500, error: err}));
         }
+        res.send(JSON.stringify({status: 200, success: "success"}));
       });
     }
   });
-  res.end();
 }]);
 
+// Delete theme
+app.post("/theme/delete/", jsonParser, 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);
+      res.send(JSON.stringify({status: 500, error: err}));
+    } else {
+      var theme = req.body.theme;
+      var themes = JSON.parse(data);
+      
+      if (themes[theme]) {
+        var background = themes[theme]["backgroundImage"];
+        if (background) {
+          var asset = path.join(serverSettings.themeStoragePath, background);
+          try {
+            fs.unlink(asset, function(err) {
+              if (err) {
+                console.log('err', error);
+                res.send(JSON.stringify({status: 500, error: err}));
+              }
+              delete themes[theme];
+              var jt = JSON.stringify(themes);
+              fs.writeFile(themesFile, jt, "utf8", function (err) {
+                if (err) {
+                  console.log(err);
+                  res.send(JSON.stringify({status: 500, error: err}));
+                }
+                res.send(JSON.stringify({status: 200, success: "success"}));
+              });
+            });
+          } catch (err) {
+            console.log(err);
+            res.send(JSON.stringify({status: 500, error: err}));
+          }  
+        }
+      }
+    }
+  });
+});
+
 // Theme editor
 app.use("/theme/", express.static(path.join(__dirname, "..", "editor/theme.html")));