Timeline: updated livePreview to timeline play. Hide canvas and draw red outline

- Changed the play button to a toggle button
- livePreview code in stage activated via bindings
- Draw a red outline of the canvas when in play

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

9 files changed, 173 insertions, 128 deletions

diff --git a/js/mediators/keyboard-mediator.js b/js/mediators/keyboard-mediator.js
index f71356b6..a323b9c3 100755
--- a/js/mediators/keyboard-mediator.js
+++ b/js/mediators/keyboard-mediator.js
@@ -98,20 +98,6 @@ exports.KeyboardMediator = Montage.create(Component, {
         value: function() {
             document.addEventListener("keydown", this, false);
             document.addEventListener("keyup", this, false);
-
-            this.addPropertyChangeListener("appModel.livePreview", this.handleLivePreview, false);
-        }
-    },
-
-    handleLivePreview: {
-        value: function() {
-            if(this.appModel.livePreview) {
-                document.removeEventListener("keydown", this, false);
-                document.removeEventListener("keyup", this, false);
-            } else {
-                document.addEventListener("keydown", this, false);
-                document.addEventListener("keyup", this, false);
-            }
         }
     },
 
diff --git a/js/models/app-model.js b/js/models/app-model.js
index 52e298a5..1351921b 100755
--- a/js/models/app-model.js
+++ b/js/models/app-model.js
@@ -34,19 +34,6 @@ var Montage = require("montage/core/core").Montage,
 
 exports.AppModel = Montage.create(Component, {
 
-    _livePreview: {
-        value: false
-    },
-
-    livePreview: {
-        get: function() {
-            return this._livePreview;
-        },
-        set: function(value) {
-            this._livePreview = value;
-        }
-    },
-
     _layoutView: {
         value: "layoutAll"
     },
diff --git a/js/ninja.reel/ninja.html b/js/ninja.reel/ninja.html
index 4f40a3f8..fbbfd066 100755
--- a/js/ninja.reel/ninja.html
+++ b/js/ninja.reel/ninja.html
@@ -268,7 +268,8 @@ POSSIBILITY OF SUCH DAMAGE.
                 "timeline": {
                     "prototype": "js/panels/Timeline/TimelinePanel.reel",
                     "properties": {
-                        "element": {"#": "timelinePanelComponent"}
+                        "element": {"#": "timelinePanelComponent"},
+                        "stage": {"@": "stage"}
                     },
                     "bindings": {
                         "currentDocument": {"<-": "@documentList.selectedObjects.0"}
diff --git a/js/ninja.reel/ninja.js b/js/ninja.reel/ninja.js
index 42d15d8b..24e47612 100755
--- a/js/ninja.reel/ninja.js
+++ b/js/ninja.reel/ninja.js
@@ -379,7 +379,6 @@ exports.Ninja = Montage.create(Component, {
             this.eventManager.addEventListener("selectSubTool", this, false);
             this.eventManager.addEventListener("executePreview", this, false);
 
-            this.addPropertyChangeListener("appModel.livePreview", this.executeLivePreview, false);
             this.addPropertyChangeListener("appModel.debug", this.toggleDebug, false);
         }
     },
@@ -535,42 +534,18 @@ exports.Ninja = Montage.create(Component, {
         }
     },
 
-    executeLivePreview: {
-        value: function() {
-            var transitionStopRule;
-//            this.stage.hideCanvas(this.appModel.livePreview);
-
-            if(this.appModel.livePreview) {
-                transitionStopRule = "nj-css-garbage-selector";
-                this.stage.bindingView.hide = true;
-            } else {
-                transitionStopRule = "*"
-                this.stage.bindingView.hide = false;
-            }
-
-            this.application.ninja.stylesController._stageStylesheet.rules[0].selectorText = transitionStopRule;
-
-            this._toggleWebGlAnimation(this.appModel.livePreview);
-        }
-    },
-
-    // Turn on WebGL animation during preview
-    _toggleWebGlAnimation: {
-        value: function(inLivePreview) {
-            var glCanvases = this.currentDocument.model.views.design.iframe.contentWindow.document.querySelectorAll('[data-RDGE-id]'),
-                glShapeModel;
-            if(glCanvases) {
-                for(var i = 0, len = glCanvases.length; i<len; i++) {
-                    glShapeModel = glCanvases[i].elementModel.shapeModel;
-                    if(inLivePreview) {
-                        glShapeModel.GLWorld._previewAnimation = true;
-                        glShapeModel.GLWorld.restartRenderLoop();
-                    } else if (!glShapeModel.animate ) {
-                        glShapeModel.GLWorld._previewAnimation = false;
-                        glShapeModel.GLWorld._canvas.task.stop();
-                    }
+    // Turn on WebGL animation on/off
+    toggleWebGlAnimation: {
+        value: function(animate) {
+            Array.prototype.slice.call(elt.querySelectorAll('[data-RDGE-id]'),0).forEach(function(glCanvas) {
+                if(animate) {
+                    glCanvas.elementModel.shapeModel.GLWorld._previewAnimation = true;
+                    glCanvas.elementModel.shapeModel.GLWorld.restartRenderLoop();
+                } else if (!glCanvas.elementModel.shapeModel.animate ) {
+                    glCanvas.elementModel.shapeModel.GLWorld._previewAnimation = false;
+                    glCanvas.elementModel.shapeModel.GLWorld._canvas.task.stop();
                 }
-            }
+            });
         }
     },
 
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
index c287e68e..0d769c23 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
@@ -54,7 +54,6 @@ POSSIBILITY OF SUCH DAMAGE.
                         "playheadmarker": {"#": "playhead_marker"},
                         "timetext" : {"#": "time_text"},
                         "timebar" : {"#": "time_bar"},
-                        "container_tracks" : {"#" : "container-tracks"},
                         "end_hottext" : {"@" : "endHottext"},
                         "container_layers" : {"#" : "container-layers"},
                         "container_tracks" : {"#" : "container-tracks"},
@@ -62,8 +61,23 @@ POSSIBILITY OF SUCH DAMAGE.
                         "checkable_animated" : {"#" : "checkable_animated"},
                         "tl_configbutton" : {"#" : "tl-configbutton"},
                         "checkable_lock" : {"#" : "checkable_lock"},
-                        "checkable_visible":{"#" : "checkable_visible"},
-                        "play_button" : {"#" : "play_button"}
+                        "checkable_visible":{"#" : "checkable_visible"}
+
+                    }
+                },
+
+                "playButton": {
+                    "prototype": "montage/ui/toggle-button.reel",
+                    "properties": {
+                        "element": {"#": "play_button"},
+                        "identifier": "playButton",
+                        "pressedClass": "pausebutton",
+                        "pressedLabel": "",
+                        "unpressedLabel": "",
+                        "pressed": false
+                    },
+                    "bindings": {
+                        "pressed": {"<->": "@owner.stage.timelinePlay"}
                     }
                 },
 
@@ -190,7 +204,7 @@ POSSIBILITY OF SUCH DAMAGE.
                     <div data-montage-id="leftpane_inside" class="leftinside">
                         <div data-montage-id="timeline_controller" class="timelinecontroller">
                             <div data-montage-id="timeline_controls" class="timelinecontrols">
-                                <div data-montage-id="play_button" class="playbutton"></div>
+                                <button data-montage-id="play_button" class="playbutton"></button>
                                 <div data-montage-id="time_text" class="timetext">00:00:00</div>
                             </div>
                         </div>
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index 4e9771d4..521c315d 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -36,6 +36,21 @@ var Montage = require("montage/core/core").Montage,
 
 var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
 
+    _stage: {
+        value: null
+    },
+
+    stage: {
+        get: function() {
+            return this._stage;
+        },
+        set: function(value) {
+            if(value) {
+                this._stage = value;
+            }
+        }
+    },
+
     /* === BEGIN: Models === */
         _user_layers: {
                 value: null
@@ -1015,7 +1030,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             this.eventManager.addEventListener("updatedID", this.handleLayerIdUpdate.bind(this), false);