Bug 840057 - [MMS][User Story] Video playback from message

apps/sms/js/thread_ui.js

@@ -699,29 +699,29 @@ var ThreadUI = global.ThreadUI = {
 
   createMmsContent: function thui_createMmsContent(dataArray) {
     var container = document.createElement('div');
-    container.classList.add('mms-container');
+    container.className = 'mms-container';
     dataArray.forEach(function(attachment) {
-      var mediaElement, textElement, url;
+      var mediaElement, textElement;
 
       if (attachment.name && attachment.blob) {
         var type = Utils.typeFromMimeType(attachment.blob.type);
         if (type) {
           // we special case audio to display an image of an audio attachment
-          if (type === 'audio') {
-            type = 'img';
-            url = '/style/icons/audio_thumb.png';
+          // video currently falls through this path too, we should revisit this
+          // with #869244
+          if (type === 'audio' || type === 'video') {
+            mediaElement = document.createElement('div');
+            mediaElement.className = type + '-placeholder';
           } else {
-            url = URL.createObjectURL(attachment.blob);
+            mediaElement = document.createElement(type);
+            mediaElement.src = URL.createObjectURL(attachment.blob);
+            mediaElement.onload = function() {
+              URL.revokeObjectURL(this.src);
+            };
           }
-          mediaElement = document.createElement(type);
-          mediaElement.src = url;
-          mediaElement.onload = function() {
-            URL.revokeObjectURL(url);
-          };
           container.appendChild(mediaElement);
+          attachmentMap.set(mediaElement, attachment);
         }
-        attachmentMap.set(mediaElement, attachment);
-        container.appendChild(mediaElement);
       }
 
       if (attachment.text) {
@@ -837,7 +837,6 @@ var ThreadUI = global.ThreadUI = {
       if (message.delivery === 'not-downloaded') {
         // TODO: We need to handle the mms message with "not-downloaded" status
       } else {
-        pElement.classList.add('mms-bubble-content');
         SMIL.parse(message, function(slideArray) {
           pElement.appendChild(ThreadUI.createMmsContent(slideArray));
         });

apps/sms/style/sms.css

@@ -390,8 +390,32 @@ section[role="region"].new > header:first-child form {
   overflow: hidden;
 }
 
-.mms-bubble-content > img {
+.mms-container > img {
   display: block;
+  max-height: 10rem;
+  max-width: 100%;
+}
+
+.mms-container .video-placeholder {
+  display: block;
+  width: 10.7rem;
+  height: 8rem;
+  background-image: url('icons/video_thumb.png');
+}
+.mms-container .audio-placeholder {
+  display: block;
+  width: 6rem;
+  height: 6rem;
+  background-image: url('icons/audio_thumb.png');
+}
+
+.mms-container .video-placeholder:active,
+.mms-container .video-placeholder:hover {
+  background-position: 0 -8rem;
+}
+.mms-container .audio-placeholder:active ,
+.mms-container .audio-placeholder:hover {
+  background-position: 0 -6rem;
 }
 
 /*

apps/sms/test/unit/thread_ui_test.js

@@ -32,6 +32,7 @@ suite('thread_ui.js >', function() {
   var mocksHelper = mocksHelperForThreadUI;
   var testImageBlob;
   var testAudioBlob;
+  var testVideoBlob;
 
   suiteSetup(function(done) {
     mocksHelper.suiteSetup();
@@ -48,7 +49,7 @@ suite('thread_ui.js >', function() {
       req.responseType = 'blob';
       req.onload = function() {
         loadCallback(req.response);
-        if (--assetsNeeded) {
+        if (--assetsNeeded === 0) {
           done();
         }
       };
@@ -60,6 +61,9 @@ suite('thread_ui.js >', function() {
     getAsset('/test/unit/media/audio.oga', function(blob) {
       testAudioBlob = blob;
     });
+    getAsset('/test/unit/media/video.ogv', function(blob) {
+      testVideoBlob = blob;
+    });
   });
 
   suiteTeardown(function() {
@@ -486,7 +490,7 @@ suite('thread_ui.js >', function() {
       var messageContainer = ThreadUI.getMessageContainer(Date.now(), false);
       messageContainer.appendChild(output);
 
-      audio = output.querySelector('img');
+      audio = output.querySelector('.audio-placeholder');
     });
 
     test('MozActivity is called with the proper info on click', function() {
@@ -501,4 +505,35 @@ suite('thread_ui.js >', function() {
       assert.equal(call.data.blob, testAudioBlob);
     });
   });
+
+  suite('MMS video', function() {
+    var video;
+    setup(function() {
+      // create an image mms DOM Element:
+      var inputArray = [{
+        name: 'video.ogv',
+        blob: testVideoBlob
+      }];
+
+      // quick dirty creation of a thread with video:
+      var output = ThreadUI.createMmsContent(inputArray);
+      // need to get a container from ThreadUI because event is delegated
+      var messageContainer = ThreadUI.getMessageContainer(Date.now(), false);
+      messageContainer.appendChild(output);
+
+      video = output.querySelector('.video-placeholder');
+    });
+
+    test('MozActivity is called with the proper info on click', function() {
+      video.click();
+
+      // check that the MozActivity was called with the proper info
+      assert.equal(MockMozActivity.calls.length, 1);
+      var call = MockMozActivity.calls[0];
+      assert.equal(call.name, 'open');
+      assert.equal(call.data.type, 'video/ogg');
+      assert.equal(call.data.filename, 'video.ogv');
+      assert.equal(call.data.blob, testVideoBlob);
+    });
+  });
 });