Merge pull request #136 from spacedeck/fix-video-audio-processing

Fix video/audio conversion real-time progress and finalizing

helpers/artifact_converter.js

@@ -99,7 +99,7 @@ function convertVideo(fileName, filePath, codec, callback, progressCallback) {
   var newExt = codec == "mp4" ? "mp4" : "ogv";
   var convertedPath = filePath + "." + newExt;
 
-  console.log("converting", filePath, "to", convertedPath);
+  console.log("convertVideo", filePath, "to", convertedPath);
 
   var convertArgs = (codec == "mp4") ? [
     "-i", filePath,
@@ -229,7 +229,6 @@ function resizeAndUpload(a, size, max, fileName, localFilePath, callback) {
   }
 }
 
-
 var resizeAndUploadImage = function(a, mimeType, size, fileName, fileNameOrg, imageFilePath, originalFilePath, payloadCallback) {
   async.parallel({
     small: function(callback){
@@ -453,7 +452,6 @@ module.exports = {
           });
 
         } else if (convertableAudioTypes.indexOf(mimeType) > -1) {
-
           async.parallel({
             ogg: function(callback) {
               convertAudio(fileName, localFilePath, "ogg", function(err, file) {
@@ -471,18 +469,14 @@ module.exports = {
               convertAudio(fileName, localFilePath, "mp3", function(err, file) {
                 if (err) callback(err);
                 else {
-
                   createWaveform(fileName, file, function(err, filePath) {
-
                     var keyName = "s" + a.space_id.toString() + "/a" + a._id.toString() + "/" + fileName + "-" + (new Date().getTime()) + ".png";
                     uploader.uploadFile(keyName, "image/png", filePath, function(err, pngUrl) {
-
                       var keyName = "s" + a.space_id.toString() + "/a" + a._id.toString() + "/" + fileName + ".mp3" ;
                       uploader.uploadFile(keyName, "audio/mp3", file, function(err, mp3Url) {
                         if (err) callback(err);
                         else callback(null, {waveform: pngUrl, mp3: mp3Url});
                       });
-
                     });
                   });
                 }
@@ -499,7 +493,6 @@ module.exports = {
 
             if (err) payloadCallback(err, a);
             else {
-
               a.state = "idle";
               a.mime = mimeType;
               var stats = fs.statSync(localFilePath);
@@ -515,7 +508,6 @@ module.exports = {
               ];
 
               a.updated_at = new Date();
-
               db.packArtifact(a);
 
               a.save().then(function() {
@@ -559,5 +551,3 @@ module.exports = {
     });
   }
 };
-
-

middlewares/api_helpers.js

@@ -17,9 +17,15 @@ module.exports = (req, res, next) => {
     this.status(201).json(object);
   };
 
-  res['distributeUpdate'] = function(model, object) {
+  res['distributeUpdate'] = function(model, object, sendToSelf) {
     if (!object) return;
+    if (sendToSelf) {
+      // send this update to the initiating user, for example when
+      // a conversion task has finished
+      redis.sendMessage("update-self", model, object, req.channelId);
+    } else {
       redis.sendMessage("update", model, object, req.channelId);
+    }
     this.status(200).json(object);
   };
 

public/javascripts/spacedeck_sections.js

@@ -1602,12 +1602,8 @@ var SpacedeckSections = {
       if (this.guest_nickname) {
         new_item.editor_name = this.guest_nickname;
       }
-      // console.log("new artifact", new_item);
 
       save_artifact(new_item, function(saved_item) {
-
-        // console.log("saved artifact", saved_item);
-
         this.update_board_artifact_viewmodel(saved_item);
         this.active_space_artifacts.push(saved_item);
 

public/javascripts/spacedeck_websockets.js

@@ -40,7 +40,11 @@ SpacedeckWebsockets = {
             }
           } else console.log("artifact created in another space.");
         }
-        else if (msg.action == "update" && msg.object) {
+        else if ((msg.action == "update" || msg.action == "update-self") && msg.object) {
+          if (msg.action == "update-self") {
+            console.log(msg.object);
+          }
+
           if (this.active_space) {
             var o = msg.object;
             if (o && o._id) {
@@ -185,7 +189,7 @@ SpacedeckWebsockets = {
           return;
         }
 
-        if (msg.channel_id == channel_id) {
+        if (msg.channel_id == channel_id && !msg.action.match("-self")) {
           return;
         }
 
@@ -199,7 +203,7 @@ SpacedeckWebsockets = {
           this.handle_presenter_media_update(msg);
         }
 
-        if (msg.action == "update" || msg.action == "create" || msg.action == "delete"){
+        if (msg.action == "update" || msg.action == "update-self" || msg.action == "create" || msg.action == "delete") {
           this.handle_live_updates(msg);
         }
 

public/stylesheets/style.css

@@ -15350,7 +15350,8 @@ body:not(.present-mode) #space .artifact.selected {
     padding: 10px;
     background-color: #3d9ee9;
     opacity: 0.9;
-    text-align: center; }
+    text-align: center;
+    font-size: 14px; }
   .artifact.state-processing .progress-text, .artifact.state-uploading .progress-text {
     text-align: center;
     padding: 8px;

routes/api/space_artifacts.js

@@ -114,7 +114,7 @@ router.post('/', function(req, res, next) {
 });
 
 router.post('/:artifact_id/payload', function(req, res, next) {
-  if (req.spaceRole == "editor"  ||  req.spaceRole == "admin") {
+  if (req.spaceRole == "editor" || req.spaceRole == "admin") {
     var a = req.artifact;
 
     var fileName = (req.query.filename || "upload.bin").replace(/[^a-zA-Z0-9_\-\.]/g, '');
@@ -124,10 +124,21 @@ router.post('/:artifact_id/payload', function(req, res, next) {
     var stream = req.pipe(writeStream);
 
     var progressCallback = function(progressMsg) {
+      // merge progress message with any other changes (size/location)
+      db.Artifact.findOne({where: {
+        _id: a._id
+      }}).then(a => {
+        if (a) {
           a.description = progressMsg.toString();
           db.packArtifact(a);
           a.save();
-      redis.sendMessage("update", "Artifact", a, req.channelId);
+          db.unpackArtifact(a);
+          redis.sendMessage("update-self", "Artifact", a, req.channelId);
+        } else {
+          // artifact has been deleted
+          // TODO: stop conversion process!
+        }
+      });
     };
 
     stream.on('finish', function() {
@@ -135,7 +146,8 @@ router.post('/:artifact_id/payload', function(req, res, next) {
         if (error) res.status(400).json(error);
         else {
           db.Space.update({ updated_at: new Date() }, {where: {_id: req.space._id}});
-          res.distributeUpdate("Artifact", artifact);
+          db.unpackArtifact(artifact);
+          res.distributeUpdate("Artifact", artifact, true);
         }
       }, progressCallback);
     });

styles/artifact.scss

@@ -570,6 +570,7 @@ body:not(.present-mode) {
     background-color: $blue;
     opacity: 0.9;
     text-align: center;
+    font-size: 14px;
   }
   .progress-text {
     text-align: center;

views/partials/space.html

@@ -141,8 +141,8 @@
           <div class="progress" v-bind:style="{width: a.view.progress+'%'}"></div>
           <div class="progress-text">{{a.description}}</div>
 
-          <video v-if="a.mime == 'image/gif' && a.payload_alternatives && a.payload_alternatives.length > 0" preload autoplay loop>
+          <video v-if="a.mime == 'image/gif' && a.view.payload_alternatives && a.view.payload_alternatives.length > 0" preload autoplay loop>
-            <source v-for="rep in a.payload_alternatives" v-bind:src="rep.payload_uri" v-bind:type="rep.mime" />
+            <source v-for="rep in a.view.payload_alternatives" v-bind:src="rep.payload_uri" v-bind:type="rep.mime" />
           </video>
 
           <span v-if="a.view.link.length>0" class="link-wrapper">
@@ -151,10 +151,10 @@
         </div>
 
         <!-- video -->
-        <div v-if="a.view.major_type == 'video'" v-videoplayer="a" class="video" v-bind:style="a.view.inner_style + ';background-image: url('+a.view.thumbnail_uri+');'">
+        <div v-if="a.view.major_type == 'video'" v-videoplayer="a" class="video" v-bind:style="a.view.inner_style">
           <video preload="metadata" v-bind:poster="a.view.thumbnail_uri">
-            <source v-for="rep in a.payload_alternatives" v-bind:src="rep.payload_uri" v-bind:type="rep.mime" />
+            <source v-for="rep in a.view.payload_alternatives" v-bind:src="rep.payload_uri" v-bind:type="rep.mime" />
-            <source v-if="a.payload_uri && a.mime" v-bind:src="a.payload_uri" v-bind:type="a.mime" />
+            <source v-if="a.view.payload_uri && a.view.mime" v-bind:src="a.view.payload_uri" v-bind:type="a.view.mime" />
           </video>
 
           <div class="tl-controls">
@@ -181,11 +181,11 @@
         <div v-if="a.view.major_type == 'audio'" v-audioplayer="a" class="audio" v-bind:style="a.view.inner_style">
 
           <audio>
-            <source v-for="alt in a.payload_alternatives | orderBy 'mime' -1" v-bind:src="alt.payload_uri" v-bind:type="alt.mime"/>
+            <source v-for="alt in a.view.payload_alternatives | orderBy 'mime' -1" v-bind:src="alt.payload_uri" v-bind:type="alt.mime"/>
-            <source v-bind:src="a.payload_uri" v-bind:type="a.mime" v-if="a.payload_uri"/>
+            <source v-bind:src="a.view.payload_uri" v-bind:type="a.view.mime" v-if="a.view.payload_uri"/>
           </audio>
 
-          <div class="timeline" v-show="a.h>=64 && a.w>=170" v-bind:style="{'background-image': 'url(' + a.payload_thumbnail_web_uri +')'}">
+          <div class="timeline" v-show="a.h>=64 && a.w>=170" v-bind:style="{'background-image': 'url(' + a.view.thumbnail_uri +')'}">
             <div class="tl-current-time" v-bind:style="{width: a.player_view.current_time_float*100 + '%'}"></div>
             <div class="tl-inpoint" v-bind:style="{left: a.player_view.inpoint_float*100 + '%'}" v-if="a.player_view.inpoint_float>0.0"></div>
             <div class="tl-outpoint" v-bind:style="{left: a.player_view.outpoint_float*100 + '%'}"></div>