enable timeline types

source/Ox.UI/js/Video/BlockVideoTimeline.js

@@ -36,6 +36,7 @@ Ox.BlockVideoTimeline = function(options, self) {
             results: setResults,
             subtitles: setSubtitles,
             state: setState,
+            type: setType,
             width: setWidth
         })
         .addClass('OxBlockVideoTimeline')
@@ -69,19 +70,7 @@ Ox.BlockVideoTimeline = function(options, self) {
 
     setCSS();
 
-    self.$image = Ox.SmallVideoTimelineImage({
+    self.$image = getImage();
-        duration: self.options.duration,
-        editing: self.options.editing,
-        imageURL: self.options.getImageURL,
-        'in': self.options['in'],
-        mode: 'editor',
-        out: self.options.out,
-        results: self.options.results,
-        state: self.options.state,
-        subtitles: self.options.subtitles,
-        type: self.options.type,
-        width: Math.round(self.options.duration)
-    });
 
     Ox.loop(self.lines, function(i) {
         addLine(i);
@@ -155,6 +144,22 @@ Ox.BlockVideoTimeline = function(options, self) {
         }
     }
 
+    function getImage() {
+        return Ox.SmallVideoTimelineImage({
+            duration: self.options.duration,
+            editing: self.options.editing,
+            imageURL: self.options.getImageURL,
+            'in': self.options['in'],
+            mode: 'editor',
+            out: self.options.out,
+            results: self.options.results,
+            state: self.options.state,
+            subtitles: self.options.subtitles,
+            type: self.options.type,
+            width: Math.round(self.options.duration)
+        });
+    }
+
     function getLines() {
         return Math.ceil(self.options.duration / self.options.width);
     }
@@ -270,6 +275,19 @@ Ox.BlockVideoTimeline = function(options, self) {
         updateTimelines();
     }
 
+    function setType() {
+        self.$image = getImage();
+        self.$images.forEach(function($image, i) {
+            self.$images[i].replaceWith(
+                self.$images[i] = self.$image.clone()
+                    .css({
+                        position: 'absolute',
+                        marginLeft: -i * self.options.width + 'px'
+                    })
+            );
+        });
+    }
+
     function setWidth() {
         self.lines = getLines();
 		setCSS();
@@ -303,11 +321,10 @@ Ox.BlockVideoTimeline = function(options, self) {
     function updateTimelines() {
         self.$lines.forEach(function($line, i) {
             $($line.children()[0]).replaceWith(
-                self.$images[i] = self.$image.clone()
+                self.$images[i] = self.$image.clone().css({
-                    .css({
+                    position: 'absolute',
-                        position: 'absolute',
+                    marginLeft: (-i * self.options.width) + 'px'
-                        marginLeft: (-i * self.options.width) + 'px'
+                })
-                    })
             );
         });
     }

source/Ox.UI/js/Video/LargeVideoTimeline.js

@@ -35,6 +35,7 @@ Ox.LargeVideoTimeline = function(options, self) {
                 },
                 position: setPosition,
                 subtitles: setSubtitles,
+                type: setType,
                 width: setWidth
             })
             .addClass('OxLargeVideoTimeline')
@@ -46,56 +47,42 @@ Ox.LargeVideoTimeline = function(options, self) {
                 drag: drag
             });
 
-    Ox.extend(self, {
+    self.$cuts = [];
-        $cuts: [],
+    self.$pointMarker = {};
-        $pointMarker: {},
+    self.$tiles = {};
-        $tiles: {},
+    self.$tooltip = Ox.Tooltip({animate: false});
-        $tooltip: Ox.Tooltip({
+    self.center = Math.floor(self.options.width / 2);
-            animate: false
+    self.fps = 25;
-        }),
+    self.height = 64;
-        center: Math.floor(self.options.width / 2),
+    self.tileWidth = 150;
-        element: that.$element[0],
-        fps: 25,
-        height: 64,
-        tileWidth: 1500
-    });
     self.tiles = self.options.duration * self.fps / self.tileWidth;
 
     self.$timeline = $('<div>')
-        .css({
+        .css({left: self.center + 'px'})
-            left: self.center + 'px'
+        .appendTo(that)
-        })
-        .appendTo(that.$element)
 
     setSubtitles();
 
     self.options.cuts.forEach(function(v, i) {
         self.$cuts[i] = $('<img>')
             .addClass('OxCut')
-            .attr({
+            .attr({src: Ox.UI.getImageURL('markerCut')})
-                src: Ox.UI.getImageURL('markerCut')
+            .css({left: (v * self.fps) + 'px'})
-            })
-            .css({
-                left: (v * self.fps) + 'px'
-            })
             .appendTo(self.$timeline)
     });
 
     self.$markerPosition = $('<img>')
         .addClass('OxMarkerPosition')
-        .attr({
+        .attr({src: Ox.UI.getImageURL('markerPosition')})
-            src: Ox.UI.getImageURL('markerPosition')
+        .appendTo(that);
-        })
+
-        .appendTo(that.$element);
     setMarker();
 
     ['in', 'out'].forEach(function(point) {
         var titlecase = Ox.toTitleCase(point);
         self.$pointMarker[point] = $('<img>')
             .addClass('OxMarkerPoint' + titlecase)
-            .attr({
+            .attr({src: Ox.UI.getImageURL('marker' + titlecase)})
-                src: Ox.UI.getImageURL('marker' + titlecase)
-            })
             .appendTo(self.$timeline);
         setPointMarker(point);
     });
@@ -126,7 +113,9 @@ Ox.LargeVideoTimeline = function(options, self) {
     }
 
     function getPosition(e) {
-        return self.options.position + (e.clientX - that.offset().left - self.center - 1) / self.fps;
+        return self.options.position + (
+            e.clientX - that.offset().left - self.center - 1
+        ) / self.fps;
     }
 
     function mouseleave(e) {
@@ -142,9 +131,7 @@ Ox.LargeVideoTimeline = function(options, self) {
     }
 
     function setMarker() {
-        self.$markerPosition.css({
+        self.$markerPosition.css({left: self.center + 'px'});
-            left: self.center + 'px'
-        });
     }
 
     function setPointMarker(point) {
@@ -198,6 +185,12 @@ Ox.LargeVideoTimeline = function(options, self) {
         });
     }
 
+    function setType() {
+        Ox.forEach(self.$tiles, function($tile, i) {
+            $tile.attr({src: self.options.getImageURL(self.options.type, i)});
+        });
+    }
+
     function setWidth() {
         self.center = Math.floor(self.options.width / 2);
         that.css({
@@ -210,9 +203,7 @@ Ox.LargeVideoTimeline = function(options, self) {
     }
 
     function triggerPositionEvent() {
-        that.triggerEvent('position', {
+        that.triggerEvent('position', {position: self.options.position});
-            position: self.options.position
-        });
     }
 
     function updateTooltip() {

source/Ox.UI/js/Video/SmallVideoTimelineImage.js

@@ -97,7 +97,7 @@ Ox.SmallVideoTimelineImage = function(options, self) {
                 width: self.options.width + 'px',
                 height: '16px'
             })
-            .appendTo(that.$element);
+            .appendTo(that);
     } else {
         Ox.loop(self.images, function(i) {
             $('<img>')
@@ -111,7 +111,7 @@ Ox.SmallVideoTimelineImage = function(options, self) {
                     width: (i == self.images - 1 ? self.imageWidth % 3600 : 3600) + 'px',
                     height: '16px'
                 })
-                .appendTo(that.$element);
+                .appendTo(that);
         });
     }
 
@@ -239,10 +239,6 @@ Ox.SmallVideoTimelineImage = function(options, self) {
         return canvas.toDataURL();
     }
 
-    function getPosition() {
-        
-    }
-
     return that;
 
 };

source/Ox.UI/js/Video/VideoEditor.js

@@ -89,6 +89,10 @@ Ox.VideoEditor = function(options, self) {
                 showAnnotations: function() {
                     that.$element.toggle(1);
                 },
+                timeline: function() {
+                    self.$menuButton.checkItem(self.options.timeline);
+                    updateTimelines();
+                },
                 width: setSizes
             })
             .bindEvent({
@@ -495,8 +499,7 @@ Ox.VideoEditor = function(options, self) {
                         self.options.timelines,
                         function(timeline) {
                             return Ox.extend({
-                                checked: timeline.id == self.options.timeline,
+                                checked: timeline.id == self.options.timeline
-                                disabled: true
                             }, timeline);
                         }
                     )},
@@ -564,7 +567,11 @@ Ox.VideoEditor = function(options, self) {
                 } else if (id == 'subtitles') {
                     toggleSubtitles();
                 } else if (id == 'timeline') {
-                    // data.checked[0].id
+                    self.options.timeline = data.checked[0].id;
+                    updateTimelines();
+                    that.triggerEvent('timeline', {
+                        timeline: self.options.timeline
+                    });
                 }
             },
             hide: function() {
@@ -1367,6 +1374,11 @@ Ox.VideoEditor = function(options, self) {
         });
     }
 
+    function updateTimelines() {
+        self.$timeline[0].options({type: self.options.timeline});
+        self.$timeline[1].options({type: self.options.timeline});
+    }
+
     function updateWords(action) {
         // action can be 'add' or 'remove'
         var words = [];

source/Ox.UI/js/Video/VideoPanel.js

@@ -87,6 +87,9 @@ Ox.VideoPanel = function(options, self) {
                 showTimeline: function() {
                     self.$videoPanel.toggle(1);
                 },
+                timeline: function() {
+                    self.$timeline.options({type: self.options.timeline});
+                },
                 width: function() {
                     self.$video.options({width: getPlayerWidth()});
                     self.$timeline.options({width: getTimelineWidth()});

source/Ox.UI/js/Video/VideoTimelinePanel.js

@@ -53,9 +53,7 @@ Ox.VideoTimelinePanel = function(options, self) {
                     self.$player.options({height: self.options.height});
                 },
                 paused: function() {
-                    self.$player.options({
+                    self.$player.options({paused: self.options.paused});
-                        paused: self.options.paused
-                    });
                 },
                 position: function() {
                     setPosition(self.options.position);
@@ -63,6 +61,9 @@ Ox.VideoTimelinePanel = function(options, self) {
                 showAnnotations: function() {
                     that.$element.toggle(1);
                 },
+                timeline: function() {
+                    self.$player.options({timeline: self.options.timeline});
+                },
                 width: function() {
                     self.$player.options({width: getPlayerWidth()});
                 }

source/Ox.UI/js/Video/VideoTimelinePlayer.js

@@ -45,6 +45,10 @@ Ox.VideoTimelinePlayer = function(options, self) {
                 togglePaused();
             },
             position: setPosition,
+            timeline: function() {
+                self.$menuButton.checkItem(self.options.timeline);
+                updateTimeline();
+            },
             width: setWidth
         });
 
@@ -73,8 +77,7 @@ Ox.VideoTimelinePlayer = function(options, self) {
                     self.options.timelines,
                     function(timeline) {
                         return Ox.extend({
-                            checked: timeline.id == self.options.timeline,
+                            checked: timeline.id == self.options.timeline
-                            disabled: true
                         }, timeline);
                     }
                 )},
@@ -95,7 +98,11 @@ Ox.VideoTimelinePlayer = function(options, self) {
             change: function(data) {
                 var id = data.id;
                 if (id == 'timeline') {
-                    // data.checked[0].id
+                    self.options.timeline = data.checked[0].id;
+                    updateTimeline();
+                    that.triggerEvent('timeline', {
+                        timeline: self.options.timeline
+                    });
                 } else if (id == 'followPlayer') {
                     self.options.followPlayer = data.checked;
                     if (!self.options.paused && self.options.followPlayer) {
@@ -268,7 +275,6 @@ Ox.VideoTimelinePlayer = function(options, self) {
 
     self.$lines = [];
     self.$timelines = [];
-    self.$interfaces = [];
 
     self.$timeline = renderTimeline();
     //setSubtitles();
@@ -277,7 +283,7 @@ Ox.VideoTimelinePlayer = function(options, self) {
     });
     Ox.last(self.$lines).css({
         height: self.tileHeight + 1.5 * self.margin + 'px'
-    });
+    });        
 
     self.$frameBox = $('<div>')
         .css({
@@ -397,12 +403,12 @@ Ox.VideoTimelinePlayer = function(options, self) {
             })
             .appendTo(self.$timelinePlayer);
         self.$timelines[i] = [
-            self.$timeline.clone()
+            self.$timeline.clone(true)
                 .css({
                     width: self.frame + self.videoWidth + 'px',
                     marginLeft: -i * self.contentWidth + 'px'
                 }),
-            self.$timeline.clone()
+            self.$timeline.clone(true)
                 .css({
                     marginLeft: -i * self.contentWidth + self.videoWidth - 1 + 'px'
                 })
@@ -581,30 +587,29 @@ Ox.VideoTimelinePlayer = function(options, self) {
                 height: self.tileHeight + self.margin + 'px',
                 overflow: 'hidden'
             });
-            Ox.loop(self.tiles, function(i) {
+        Ox.loop(self.tiles, function(i) {
-                $('<img>')
+            $('<img>')
-                    .attr({
+                .attr({
-                        src: self.options.getLargeTimelineURL(self.options.timeline, i)
+                    src: self.options.getLargeTimelineURL(self.options.timeline, i)
-                    })
+                })
-                    .css({
-                        position: 'absolute',
-                        left: i * self.tileWidth + 'px',
-                        top: self.margin / 2 + 'px'
-                    })
-                    .appendTo($timeline);
-            });
-            $('<div>')
-                .addClass('OxTimelineInterface')
                 .css({
                     position: 'absolute',
-                    left: 0,
+                    left: i * self.tileWidth + 'px',
-                    top: self.margin / 2 + 'px',
+                    top: self.margin / 2 + 'px'
-                    width: self.frames + 'px',
-                    height: self.tileHeight + 'px'
-                    //background: 'rgba(255, 0, 0, 0.5)'
                 })
+                .data({index: i})
                 .appendTo($timeline);
-            
+        });
+        $('<div>')
+            .addClass('OxTimelineInterface')
+            .css({
+                position: 'absolute',
+                left: 0,
+                top: self.margin / 2 + 'px',
+                width: self.frames + 'px',
+                height: self.tileHeight + 'px'
+            })
+            .appendTo($timeline);            
         return $timeline;
     }
 
@@ -715,6 +720,10 @@ Ox.VideoTimelinePlayer = function(options, self) {
         });
     }
 
+    function setTimeline() {
+        self.$timelinePlayer.empty();
+    }
+
     function setVolume() {
         self.$video.options({volume: self.options.volume});
         that.triggerEvent('volume', {
@@ -807,6 +816,17 @@ Ox.VideoTimelinePlayer = function(options, self) {
         }
     }
 
+    function updateTimeline() {
+        self.$timelinePlayer.find('img').each(function() {
+            var $this = $(this);
+            $this.attr({
+                src: self.options.getLargeTimelineURL(
+                    self.options.timeline, $this.data('index')
+                )
+            });
+        });
+    }
+
     /*@
     togglePaused <f> toggle paused 
         () -> <o>  toggle paused