Slight UI update

.gitignore

@@ -0,0 +1,27 @@
+.sass-cache
+styles/*.css
+
+# OS generated files #
+######################
+.DS_Store
+.DS_Store?
+._*
+.Spotlight-V100
+.Trashes
+Icon?
+ehthumbs.db
+Thumbs.db
+
+# FRAMEWORKS #
+.zfproject.xml
+
+# IDE #
+######################
+.idea/
+netbeans/
+nbproject/
+.komodoproject/
+*.iml
+
+#Node JS#
+node_modules/

app/collections/library.js

@@ -1,33 +1,39 @@
-/**
- * Microsoft Video Editor
- *
- * @namespace collections
- * @name media
- * @author Thierry M.P. Kleist <thierry@codedazur.nl>
- * @date: 4/24/13
- */
-/*global views, console, $, $$, TweenLite, TweenMax, TimelineLite, TimelineMax, Ease, Linear, Power0, Power1, Power2, Power3, Power4, Quad, Cubic, Quart, Strong, Back, Bounce, Circ, Elastic, Expo, Sine, SlowMo  */
-
-define(['backbone',
-        'underscore',
-        'app/models/media'], function (Backbone, _, Media) {
+/* Microsoft Video Editor
+ * @author: T.M.P. Kleist / Code D'azur <thierry@codedazur.nl>
+ * ============================================================================== */
+
+/*global views, console, $, define  */
+
+define(['app/models/library'], function (Model) {
 
     'use strict';
 
     return Backbone.Collection.extend({
 
-        model: Media,
-
+        model: Model,
+
+        initialize: function () {
+            this.on('layer', function (model) {
+
+                window.App.timeline.collection.add({
+                    type: model.get('type'),
+                    media: model
+                });    
+
+
+            });
+        },
+
         add: function (model) {
             var exist = 0;
-            _.each(this.models, function (m) {                        
+            _.each(this.models, function (m) {
                 if (model.get('file').name === m.get('file').name && model.get('file').size === m.get('file').size && model.get('file').type === m.get('file').type) {
                     exist += 1;
-//                    this.trigger('add', m);
+                    //                    this.trigger('add', m);
                 }
             }, this);
-            
-            if(exist === 0) {
+
+            if (exist === 0) {
                 Backbone.Collection.prototype.add.apply(this, arguments);
             }
         }

app/collections/timeline.js

@@ -1,37 +1,59 @@
-/**
- * Microsoft Video Editor
- *
- * @namespace collections
- * @name media
- * @author Thierry M.P. Kleist <thierry@codedazur.nl>
- * @date: 4/24/13
- */
-/*global views, console, $, $$, TweenLite, TweenMax, TimelineLite, TimelineMax, Ease, Linear, Power0, Power1, Power2, Power3, Power4, Quad, Cubic, Quart, Strong, Back, Bounce, Circ, Elastic, Expo, Sine, SlowMo  */
-
-define(['backbone', 'underscore', 'app/models/clip'], function (Backbone, _, Model) {
+/* Microsoft Video Editor
+ * @author: T.M.P. Kleist / Code D'azur <thierry@codedazur.nl>
+ * ============================================================================== */
+
+/*global views, console, $, define  */
+
+define(['app/models/layer', 'app/filters'], function (Model, Filter) {
 
     'use strict';
 
     return Backbone.Collection.extend({
 
         model: Model,
+        totalFrames: 5000,
 
-        initialize: function () {
+        getActive: function () {
 
-        },
+            var targetModel = [],
+                position = 99999;
 
-        getActive: function () {
+            _.each(this.where({type:'video'}), function (model) {
 
-            var targetModel;
+                if (model.get('status') === 'playing' || model.get('status') === 'seeking') {
 
-            _.each(this.models, function (model) {
-                if (model.get('status') === 'playing') {
-                    targetModel = model;
-                }
+                    targetModel.push(model);
+
+                } 
+
             }, this);
 
             return targetModel;
 
+        },
+
+        getFilter: function (frame) {
+            var effects, len, x, trim, offset, endEffect, startEffect;
+            effects = this.where({type: 'effect'});
+            len = effects.length;
+            if (len === 0) {
+                return null;
+            }
+            for (x = 0; x < len; x = x += 1) {
+
+                trim = effects[x].get('trim');
+                offset = effects[x].get('offset');
+                endEffect = effects[x].get('frames') + offset - trim.end;
+                startEffect = trim.start + offset;
+                if (frame >= startEffect && frame <= endEffect) {
+                    return Filter[effects[x].get('name')];
+                }
+                if (x === (len - 1)) {
+                    return null;
+                }
+
+            }
+            return null;
         }
 
     });

app/controllers/timeline.js

@@ -1,105 +1,123 @@
-/**
- * Microsoft Video Editor
- *
- * @namespace controllers
- * @name timeline
- * @author Thierry M.P. Kleist <thierry@codedazur.nl>
- * @date: 4/24/13
- */
-/*global views, console, $, $$, TweenLite, TweenMax, TimelineLite, TimelineMax, Ease, Linear, Power0, Power1, Power2, Power3, Power4, Quad, Cubic, Quart, Strong, Back, Bounce, Circ, Elastic, Expo, Sine, SlowMo  */
-
-define(['backbone', 'underscore'], function (Backbone, _) {
+/* Microsoft Video Editor
+ * @author: T.M.P. Kleist / Code D'azur <thierry@codedazur.nl>
+ * ============================================================================== */
 
-    'use strict';
+/*global views, console, $, define  */
 
-    var Timeline = function (collection) {
+define(['app/collections/timeline', 'app/filters'], function (Collection, Filter) {
 
-        this.initialize(collection);
+    'use strict';
 
+    var Timeline = function () {
+        this.initialize();
     };
 
     Timeline.prototype = {
 
-        totalTime: 1000,
-        seek: 0,
+        _frame: 0,
         playing: false,
 
-        initialize: function (collection) {
+        initialize: function () {
 
             this.layers = [];
             this.videos = [];
             this.filter = null;
-            this.collection = collection;
+            this.collection = new Collection();
+
+            this.collection.on('trim:start', function (model) {
+                window.App.player.setSource([model]);
+            }, this);
+
+            this.collection.on('change:trim', this.seek, this);
 
             _.bindAll(this, 'addEventListeners', 'changeFilter', 'play', 'stop', 'frame');
 
             this.addEventListeners();
         },
 
         addEventListeners: function () {
-
-            //   this.collection.initTime();
-            this.collection.on('play', this.play);
-            this.collection.on('stop', this.stop);
-            //  App.Views.interface.effects.on('change', this.changeFilter);
-
+            document.querySelector('header').addEventListener('click', this.play);
         },
 
         changeFilter: function (filter) {
 
             switch (filter) {
-            case 'gray':
-                this.filter = Filters.grayscale;
-                break;
-            case 'thres':
-                this.filter = Filters.threshold;
-                break;
-            case 'pixel':
-                this.filter = Filters.pixelize;
-                break;
-            default:
-                this.filter = null;
+                case 'gray':
+                    this.filter = Filters.grayscale;
+                    break;
+                case 'thres':
+                    this.filter = Filters.threshold;
+                    break;
+                case 'pixel':
+                    this.filter = Filters.pixelize;
+                    break;
+                default:
+                    this.filter = null;
             }
 
         },
 
         play: function () {
 
             if (this.playing) {
+                this.playing = false;
+
+                window.clearInterval(this.timer);
+                this.collection.trigger('pause');
+
+                this.trigger('pause', 'pause');
+
                 return;
             }
 
+            this.trigger('play', 'play');
             this.playing = true;
             this.timer = window.setInterval(this.frame, 40);
 
         },
 
-        /*
-         * Syncs all the layers and sends the current layer to the Player API
-         */
+
+        /* Scrubs/Seek to frame 
+         * ---------------------------------------------------------------------- */
+
+        seek: function (frame) {
+            if (this.playing) {
+                this.stop();
+            }
+            this._frame = !isNaN(frame) ? frame : this._frame;
+            this.collection.trigger('seek', this._frame, this.collection.totalFrames);
+            window.App.player.setSource(this.collection.getActive());
+            window.App.filter = window.App.timeline.collection.getFilter(this._frame);
+        },
+
+
+        /* Syncs all the layers and sends the current layer to the Player API
+         * ---------------------------------------------------------------------- */
 
         frame: function () {
 
-            this.collection.trigger('frame-sync', this.seek);
+            this.collection.trigger('frame-sync', this._frame, this.collection.totalFrames);
             window.App.player.setSource(this.collection.getActive());
+            //window.App.player.setSource([this.collection.models[0], this.collection.models[1]]);
 
-            if (this.seek === this.totalTime) {
-                this.stopTimeline();
+            if (this._frame === this.collection.totalFrames) {
+                this.stop();
             } else {
-                this.seek += 1;
+                this._frame += 1;
             }
-
+            window.App.filter = window.App.timeline.collection.getFilter(this._frame);
         },
 
         stop: function () {
 
             this.playing = false;
+            this.trigger('stop', 'stop');
 
             window.clearInterval(this.timer);
             window.App.player.setSource();
 
-            this.seek = 0;
-            this.collection.trigger('kill');
+            this._frame = 0;
+            this.collection.trigger('kill', 0);
 
         }