video autopsy fix: moving the event handler on creation

Signed-off-by: Valerio Virgillito <valerio@motorola.com>

2 files changed, 23 insertions, 14 deletions

diff --git a/js/controllers/elements/video-controller.js b/js/controllers/elements/video-controller.js
index 44ba5aa1..c36752f5 100755
--- a/js/controllers/elements/video-controller.js
+++ b/js/controllers/elements/video-controller.js
@@ -28,19 +28,6 @@ exports.VideoController = Montage.create(ElementController, {
         value: function(el, p, value) {
             switch(p) {
                 case "src":
-                        
-                        //TODO: Move this to the location where the element is created
-                        el.addEventListener('canplay', function(e) {
-                                                //TODO: Figure out why the video must be seeked to the end before pausing
-                                                var time = Math.ceil(this.duration);
-                                                //Trying to display the last frame (doing minus 2 seconds if long video)
-                                                if (time > 2) this.currentTime = time - 2;
-                                                else if (time > 1) this.currentTime = time - 1;
-                                                else this.currentTime = time || 0;
-                                                //Pauing video
-                                                this.pause();
-                                        }, false);
-                                        
                     el.setAttribute(p, value);
                     break;
                 case "poster":
diff --git a/js/tools/TagTool.js b/js/tools/TagTool.js
index 31918f92..27665ee6 100755
--- a/js/tools/TagTool.js
+++ b/js/tools/TagTool.js
@@ -86,11 +86,15 @@ exports.TagTool = Montage.create(DrawingTool, {
             // Create the element
             if(this.options.selectedElement === "custom") {
                 element = document.application.njUtils.make(this.options.customName.value, null, this.application.ninja.currentDocument);
-
             } else {
                 element = document.application.njUtils.make(this.options.selectedElement, null, this.application.ninja.currentDocument);
             }
 
+            // Adding a canplay event to videos to pause them and prevent autoplay on stage
+            if(this.options.selectedElement === "video") {
+                element.addEventListener("canplay", this, false);
+            }
+
             // Create the styles
             styles = document.application.njUtils.stylesFromDraw(element, ~~drawData.width, ~~drawData.height, drawData);
 
@@ -109,6 +113,24 @@ exports.TagTool = Montage.create(DrawingTool, {
             // Add the element and styles
             this.application.ninja.elementMediator.addElements(element, styles);
         }
+    },
+
+    handleCanplay: {
+        value: function(event) {
+            //TODO: Figure out why the video must be seeked to the end before pausing
+            var time = Math.ceil(this.duration);
+            //Trying to display the last frame (doing minus 2 seconds if long video)
+            if (time > 2) {
+                this.currentTime = time - 2;
+            } else if (time > 1) {
+                this.currentTime = time - 1;
+            } else {
+                this.currentTime = time || 0;
+            }
+            //Pauing video
+            event.target.pause();
+        }
     }
+
 });