Theme Editor

.gitignore

@@ -7,3 +7,4 @@ junk/
 media/
 *.log
 .jobs
+settings/backgrounds/

.python-version

@@ -0,0 +1 @@
+2.7.13

Dockerfile

@@ -1,22 +1,39 @@
 FROM ubuntu:16.04
 
 # Install dependencies
-RUN apt-get update --yes && apt-get upgrade --yes
-RUN apt-get install git nodejs npm \
-libcairo2-dev libjpeg8-dev libpango1.0-dev libgif-dev libpng-dev build-essential g++ \
-ffmpeg \
-redis-server --yes
+RUN apt-get --yes update && \
+    apt-get --yes upgrade
+RUN apt-get --yes install git \
+                          nodejs \
+                          npm \
+                          libcairo2-dev \
+                          libjpeg8-dev \
+                          libpango1.0-dev \
+                          libgif-dev \
+                          libpng-dev \
+                          build-essential \
+                          g++ \
+                          ffmpeg \
+                          redis-server
 
-RUN ln -s `which nodejs` /usr/bin/node
+RUN update-alternatives --install /usr/bin/node node $(which nodejs) 50
 
 # Non-privileged user
-RUN useradd -m audiogram
+ARG UID=1000
+RUN useradd --create-home \
+            --no-log-init \
+            --shell /bin/false \
+            --uid $UID \
+            audiogram
 USER audiogram
 WORKDIR /home/audiogram
 
 # Clone repo
-RUN git clone https://github.com/nypublicradio/audiogram.git
+RUN : breakcache0
+RUN git clone https://github.com/brizandrew/audiogram.git
 WORKDIR /home/audiogram/audiogram
+#VOLUME /home/audiogram/audiogram
 
 # Install dependencies
 RUN npm install
+CMD npm start

INSTALL.md

@@ -111,26 +111,25 @@ Installing these dependencies on Windows is an uphill battle.  If you're running
 
 If you use [Docker](https://www.docker.com/products/docker), you can build an image from the included Dockerfile.
 
-In addition to installing Docker, you'll need to install Git.  You can do this by installing [GitHub Desktop](https://desktop.github.com/).
+In addition to installing Docker, you may need to install Git.  You can do this by installing [GitHub Desktop](https://desktop.github.com/).
 
-You can clone the repo and build an image, or build it directly from the repo:
-
-```sh
-git clone https://github.com/nypublicradio/audiogram.git
-cd audiogram
-docker build -t audiogram .
-```
+Some operating systems e.g. Ubuntu provide a permission group "docker. You can join this group like `sudo usermod -aG docker $USER` and then it's not necessary to prepend every docker command with `sudo`. It's necessary to log out of the desktop session for this permission group change to take effect.
 
-or
+You can clone the repo and build an image, or build it directly from the repo:
 
+An ephemeral container image can be built and run like
 ```sh
-docker build -t audiogram https://github.com/nypublicradio/audiogram.git
+docker build -t audiogram https://github.com/brizandrew/audiogram.git
+docker run -p 8888:8888 audiogram
 ```
 
-Now you can run Audiogram in a container using that image:
+or you can clone the source code to obtain the service file for docker compose and run these commands once in order to always have the container running in the background and available at http://localhost:8888.
 
 ```sh
-docker run -p 8888:8888 -t -i audiogram
+git clone https://github.com/brizandrew/audiogram.git
+cd audiogram
+docker build -t audiogram .
+docker-compose up
 ```
 
 ## AWS installation

audiogram/combine-frames.js

@@ -4,7 +4,7 @@ function combineFrames(options, cb) {
 
   // Raw ffmpeg command with standard mp4 setup
   // Some old versions of ffmpeg require -strict for the aac codec
-  var cmd = "ffmpeg -r " + options.framesPerSecond + " -i \"" + options.framePath + "\" -i \"" + options.audioPath + "\" -c:v libx264 -c:a aac -strict experimental -shortest -pix_fmt yuv420p \"" + options.videoPath + "\"";
+  var cmd = "ffmpeg -r " + options.framesPerSecond + " -i \"" + options.framePath + "\" -i \"" + options.audioPath + "\" -c:v libx264 -c:a aac -strict experimental -shortest -pix_fmt yuv420p -vf 'scale=trunc(iw/2)*2:trunc(ih/2)*2' \"" + options.videoPath + "\"";
 
   exec(cmd, cb);
 

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"),
+    themeEditor = require("./themeEditor.js");
 
 d3.json("/settings/themes.json", function(err, themes){
 
@@ -27,6 +28,9 @@ d3.json("/settings/themes.json", function(err, themes){
     return;
   }
 
+  if(themeEditor.isEditor())
+    themeEditor.initializeThemes(themes);
+
   for (var key in themes) {
     themes[key] = $.extend({}, themes.default, themes[key]);
   }
@@ -138,7 +142,11 @@ function initialize(err, themesWithImages) {
 
   // Populate dropdown menu
   d3.select("#input-theme")
-    .on("change", updateTheme)
+    .on("change.a", updateTheme)
+    .on("change.b", function(){
+      if(themeEditor.isActive())
+        themeEditor.populateThemeFields();
+    })
     .selectAll("option")
     .data(themesWithImages)
     .enter()
@@ -182,6 +190,20 @@ function initialize(err, themesWithImages) {
 
   d3.select("#submit").on("click", submitted);
 
+  d3.select("#theme-edit").on("click", function(){
+    var activeTheme = d3.select('#input-theme').property('value');
+    var url = window.location.origin + window.location.pathname + 'themes.html?t=' + activeTheme;
+    window.location = url;
+  });
+
+  d3.select("#new-theme").on("click", function(){
+    var url = window.location.origin + window.location.pathname + 'themes.html?t=default'
+    window.location = url;
+  });
+
+  if(themeEditor.isEditor())
+    themeEditor.initialize();
+
 }
 
 function updateAudioFile() {

client/preview.js

@@ -47,8 +47,12 @@ minimap.onBrush(function(extent){
 // Resize video and preview canvas to maintain aspect ratio
 function resize(width, height) {
 
-  var widthFactor = 640 / width,
-      heightFactor = 360 / height,
+  var containerWidth = document.querySelector('#preview').clientWidth,
+      aspectRatio = height/width;
+  containerWidth = containerWidth > 0 ? containerWidth : 640;
+
+  var widthFactor = containerWidth / width,
+      heightFactor = containerWidth * aspectRatio / height,
       factor = Math.min(widthFactor, heightFactor);
 
   d3.select("canvas")
@@ -69,7 +73,6 @@ function resize(width, height) {
 }
 
 function redraw() {
-
   resize(theme.width, theme.height);
 
   video.kill();
@@ -111,5 +114,6 @@ module.exports = {
   theme: _theme,
   file: _file,
   selection: _selection,
-  loadAudio: loadAudio
+  loadAudio: loadAudio,
+  redraw: redraw
 };