Re-gen thumbnail on edit save. (mozilla-services#3282)

server/src/pages/shot/controller.js

@@ -3,6 +3,7 @@
 const sendEvent = require("../../browser-send-event.js");
 const page = require("./page").page;
 const { AbstractShot } = require("../../../shared/shot");
+const { createThumbnailUrl } = require("../../../shared/thumbnailGenerator");
 const { shotGaFieldForValue } = require("../../ab-tests.js");
 
 // This represents the model we are rendering:
@@ -120,32 +121,44 @@ exports.deleteShot = function(shot) {
 
 exports.saveEdit = function(shot, shotUrl) {
   var url = model.backend + "/api/save-edit";
-  var body = JSON.stringify({
+  let payload = {
     shotId: shot.id,
     _csrf: model.csrfToken,
     url: shotUrl
-  });
-  var req = new Request(url, {
-    method: 'POST',
-    credentials: 'include',
-    headers: new Headers({
-      'content-type': 'application/json'
-    }),
-    body
-  });
-  return fetch(req).then((resp) => {
-    if (!resp.ok) {
-      var errorMessage = "Error saving edited shot";
+  };
+
+  let postWith = body => {
+    var req = new Request(url, {
+      method: 'POST',
+      credentials: 'include',
+      headers: new Headers({
+        'content-type': 'application/json'
+      }),
+      body
+    });
+    return fetch(req).then((resp) => {
+      if (!resp.ok) {
+        var errorMessage = "Error saving edited shot";
+        window.alert(errorMessage);
+        window.Raven.captureException(new Error(`Error calling /api/save-edit: ${req.status} ${req.statusText}`));
+      } else {
+        location.reload();
+      }
+    }).catch((error) => {
+      var errorMessage = "Connection error";
       window.alert(errorMessage);
-      window.Raven.captureException(new Error(`Error calling /api/save-edit: ${req.status} ${req.statusText}`));
-    } else {
-      location.reload();
-    }
-  }).catch((error) => {
-    var errorMessage = "Connection error";
-    window.alert(errorMessage);
-    window.Raven.captureException(error);
-    throw error;
+      window.Raven.captureException(error);
+      throw error;
+    });
+  }
+
+  shot.getClip(shot.clipNames()[0]).image.url = shotUrl;
+
+  createThumbnailUrl(shot).then(thumbnail => {
+    payload.thumbnail = thumbnail;
+    return postWith(JSON.stringify(payload));
+  }).catch(() => {
+    return postWith(JSON.stringify(payload));
   });
 }
 

server/src/server.js

@@ -759,11 +759,15 @@ app.post("/api/save-edit", function(req, res) {
   }
   let id = vars.shotId;
   let url = vars.url;
+  let thumbnail = vars.thumbnail || null;
   if (!isValidClipImageUrl(url)) {
     sendRavenMessage(req, "Attempt to edit shot to set invalid clip url.");
     simpleResponse(res, "Invalid shot url.", 400);
     return;
   }
+  if (thumbnail && !isValidClipImageUrl(thumbnail)) {
+    thumbnail = null;
+  }
   Shot.get(req.backend, id, req.deviceId, req.accountId).then((shot) => {
     if (!shot) {
       sendRavenMessage(req, "Attempt to edit shot that does not exist");
@@ -772,6 +776,7 @@ app.post("/api/save-edit", function(req, res) {
     }
     let name = shot.clipNames()[0];
     shot.getClip(name).image.url = url;
+    shot.thumbnail = thumbnail;
     return shot.update();
   }).then((updated) => {
     simpleResponse(res, "Updated", 200);

shared/thumbnailGenerator.js

@@ -1,5 +1,6 @@
-// This is used in addon/webextension/background/takeshot.js
-// and ...  It is used in a browser environment.
+// This is used in addon/webextension/background/takeshot.js and
+// server/src/pages/shot/controller.js . It is used in a browser
+// environment.
 
 // Resize down 1/2 at a time produces better image quality.
 // Not quite as good as using a third-party filter (which will be