From c37f2cb15b90d7315e9580fee1ae7f6e0694052c Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Thu, 28 Jun 2012 16:50:46 -0700 Subject: Preventing video playback on open This stops all videos from playing on open file. The same fix needs to be applied when an users sets autoplay in the PI. --- js/document/mediators/template.js | 10 ---------- js/document/views/design.js | 25 ++++++++++++++++++++++--- 2 files changed, 22 insertions(+), 13 deletions(-) diff --git a/js/document/mediators/template.js b/js/document/mediators/template.js index f43b1a2c..015a50ff 100755 --- a/js/document/mediators/template.js +++ b/js/document/mediators/template.js @@ -220,14 +220,6 @@ exports.TemplateDocumentMediator = Montage.create(Component, { linktags = template.file.content.document.getElementsByTagName('link'), njtemplatetags = template.file.content.document.querySelectorAll('[data-ninja-template]'); - ////////////////////////////////////////////////// - //TODO: Remove, temp hack, this is to be fixed by Montage - var basetags = template.file.content.document.getElementsByTagName('base'); - for (var g in basetags) { - if (basetags[g].getAttribute && basetags[g].href && basetags[g].href.indexOf('chrome-extension://') !== -1) toremovetags.push(basetags[g]); - } - ////////////////////////////////////////////////// - //Adding to tags to be removed form template for (var f in njtemplatetags) { if (njtemplatetags[f].getAttribute) toremovetags.push(njtemplatetags[f]); @@ -284,8 +276,6 @@ exports.TemplateDocumentMediator = Montage.create(Component, { - - //TODO: Make proper CSS method diff --git a/js/document/views/design.js b/js/document/views/design.js index 6a60e1f9..fea607ef 100755 --- a/js/document/views/design.js +++ b/js/document/views/design.js @@ -285,7 +285,8 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, { userStyles, stags = this.document.getElementsByTagName('style'), ltags = this.document.getElementsByTagName('link'), i, orgNodes, - scripttags = this.document.getElementsByTagName('script'); + scripttags = this.document.getElementsByTagName('script'), + videotags = this.document.getElementsByTagName('video'); //Temporarily checking for disabled special case (we must enabled for Ninja to access styles) this.ninjaDisableAttribute(stags); this.ninjaDisableAttribute(ltags); @@ -308,10 +309,28 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, { } } } - + //Checking for video tags + if (videotags.length > 0) { + //Looping through all video tags + for (i = 0; i < videotags.length; i++) { + //Stopping all videos from playing + if (videotags[i].getAttribute && videotags[i].getAttribute('autoplay') !== null) { + //Stopping the video on open + videotags[i].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); + } + } + } // Assign the modelGenerator reference from the template to our own modelGenerator this.document.modelGenerator = ElementModel.modelGenerator; - //Checking for script tags then parsing check for montage and webgl if (scripttags.length > 0) { //Checking and initializing webGL -- cgit v1.2.3 From a859432f0cc5746e2855c16565a75391ea657772 Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Thu, 28 Jun 2012 18:17:22 -0700 Subject: Fixing video autoplay bug in PI Adding functionality to prevent autoplay on videos while in author-time. Fixes chrome preview issues. --- .../tools-properties/tag-properties.reel/tag-properties.js | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/js/components/tools-properties/tag-properties.reel/tag-properties.js b/js/components/tools-properties/tag-properties.reel/tag-properties.js index ab745049..f14183e0 100755 --- a/js/components/tools-properties/tag-properties.reel/tag-properties.js +++ b/js/components/tools-properties/tag-properties.reel/tag-properties.js @@ -54,6 +54,7 @@ var TagProperties = exports.TagProperties = Montage.create(ToolProperties, { this.divElement.addEventListener("click", this, false); this.imageElement.addEventListener("click", this, false); this.videoElement.addEventListener("click", this, false); + this.videoElement.addEventListener("canplay", this, false); this.canvasElement.addEventListener("click", this, false); this.customElement.addEventListener("click", this, false); } @@ -99,6 +100,19 @@ var TagProperties = exports.TagProperties = Montage.create(ToolProperties, { } } }, + + handleCanplay: { + value: 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(); + } + }, _selectedElement: { value: "div", enumerable: false -- cgit v1.2.3 From 4bfc0b9221734c75f305dbeefe8e49a9d73b766b Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Thu, 28 Jun 2012 18:39:07 -0700 Subject: Relocating code I added the fix in the wrong location before, this is more proper, still needs to be moved to where the video element is created or added to the DOM (in this spot the event is added every time src is changed). --- .../tools-properties/tag-properties.reel/tag-properties.js | 14 -------------- js/controllers/elements/video-controller.js | 13 +++++++++++++ 2 files changed, 13 insertions(+), 14 deletions(-) diff --git a/js/components/tools-properties/tag-properties.reel/tag-properties.js b/js/components/tools-properties/tag-properties.reel/tag-properties.js index f14183e0..ab745049 100755 --- a/js/components/tools-properties/tag-properties.reel/tag-properties.js +++ b/js/components/tools-properties/tag-properties.reel/tag-properties.js @@ -54,7 +54,6 @@ var TagProperties = exports.TagProperties = Montage.create(ToolProperties, { this.divElement.addEventListener("click", this, false); this.imageElement.addEventListener("click", this, false); this.videoElement.addEventListener("click", this, false); - this.videoElement.addEventListener("canplay", this, false); this.canvasElement.addEventListener("click", this, false); this.customElement.addEventListener("click", this, false); } @@ -100,19 +99,6 @@ var TagProperties = exports.TagProperties = Montage.create(ToolProperties, { } } }, - - handleCanplay: { - value: 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(); - } - }, _selectedElement: { value: "div", enumerable: false diff --git a/js/controllers/elements/video-controller.js b/js/controllers/elements/video-controller.js index c36752f5..44ba5aa1 100755 --- a/js/controllers/elements/video-controller.js +++ b/js/controllers/elements/video-controller.js @@ -28,6 +28,19 @@ 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": -- cgit v1.2.3 From 1b6202d3cd517480aebafdfe97e9b89600d715ce Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Thu, 28 Jun 2012 22:46:07 -0700 Subject: video autopsy fix: moving the event handler on creation Signed-off-by: Valerio Virgillito --- js/controllers/elements/video-controller.js | 13 ------------- js/tools/TagTool.js | 24 +++++++++++++++++++++++- 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(); + } } + }); -- cgit v1.2.3 From 54f95bf52f660f5d8bcb3180c203ffd6ce9b8557 Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Thu, 28 Jun 2012 23:27:38 -0700 Subject: Fixing reference to object --- js/tools/TagTool.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/js/tools/TagTool.js b/js/tools/TagTool.js index 27665ee6..80e6150d 100755 --- a/js/tools/TagTool.js +++ b/js/tools/TagTool.js @@ -118,14 +118,14 @@ exports.TagTool = Montage.create(DrawingTool, { handleCanplay: { value: function(event) { //TODO: Figure out why the video must be seeked to the end before pausing - var time = Math.ceil(this.duration); + var time = Math.ceil(event.target.duration); //Trying to display the last frame (doing minus 2 seconds if long video) if (time > 2) { - this.currentTime = time - 2; + event.target.currentTime = time - 2; } else if (time > 1) { - this.currentTime = time - 1; + event.target.currentTime = time - 1; } else { - this.currentTime = time || 0; + event.target.currentTime = time || 0; } //Pauing video event.target.pause(); -- cgit v1.2.3 From 8a9ac2255b9161102be21fca23ba892665fe75ab Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Fri, 29 Jun 2012 14:26:13 -0700 Subject: fixing some Signed-off-by: Valerio Virgillito --- js/document/views/design.js | 25 +++++++++++-------------- 1 file changed, 11 insertions(+), 14 deletions(-) diff --git a/js/document/views/design.js b/js/document/views/design.js index fea607ef..b7c50a7c 100755 --- a/js/document/views/design.js +++ b/js/document/views/design.js @@ -313,20 +313,17 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, { if (videotags.length > 0) { //Looping through all video tags for (i = 0; i < videotags.length; i++) { - //Stopping all videos from playing - if (videotags[i].getAttribute && videotags[i].getAttribute('autoplay') !== null) { - //Stopping the video on open - videotags[i].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); - } + //Stopping all videos from playing on open + videotags[i].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); } } // Assign the modelGenerator reference from the template to our own modelGenerator -- cgit v1.2.3