add status bar text to edit

source/Ox.UI/js/Video/ClipPanel.js

@@ -6,6 +6,7 @@ Ox.ClipPanel = function(options, self) {
     var that = Ox.Element({}, self)
         .defaults({
             clips: [],
+            duration: 0,
             editable: false,
             'in': 0,
             out: 0,
@@ -24,7 +25,9 @@ Ox.ClipPanel = function(options, self) {
                     sort: self.options.sort,
                     sortable: isSortable()
                 });
+                updateStatus();
             },
+            duration: updateStatus,
             sort: function() {
                 updateSortElement();
                 self.$list.options({
@@ -129,6 +132,15 @@ Ox.ClipPanel = function(options, self) {
         size: 16
     });
 
+    self.$status = Ox.Element()
+        .css({
+            marginTop: '2px',
+            fontSize: '9px',
+            textAlign: 'center',
+            textOverflow: 'ellipsis'
+        })
+        .appendTo(self.$statusbar);
+
     that.setElement(
         self.$panel = Ox.SplitPanel({
             elements: [
@@ -148,9 +160,7 @@ Ox.ClipPanel = function(options, self) {
         })
     );
 
-    function cutClips() {
-        
-    }
+    updateStatus();
 
     function editClip(data) {
         var value = self.$list.value(data.id, data.key);
@@ -241,7 +251,6 @@ Ox.ClipPanel = function(options, self) {
             sortable: isSortable(),
             unique: 'id'
         }) : Ox.Element();
-
         $list.bindEvent({
             copy: function(data) {
                 that.triggerEvent('copy', data);
@@ -303,6 +312,13 @@ Ox.ClipPanel = function(options, self) {
         });
     }
 
+    function updateStatus() {
+        self.$status.html(
+            Ox.toTitleCase(Ox.formatCount(self.options.clips.length, 'Clip'))
+            + ', ' + Ox.formatDuration(self.options.duration, 3)
+        );
+    }
+
     that.updateItem = function(id, data) {
         ['in', 'out', 'duration'].forEach(function(key) {
             self.$list.value(id, key, data[key]);

source/Ox.UI/js/Video/VideoEditPanel.js

@@ -168,6 +168,7 @@ Ox.VideoEditPanel = function(options, self) {
                     self.$timeline = getTimeline()
                 );
                 setPosition(self.$video.options('position'), true);
+                self.$clipPanel.options({duration: self.options.duration});
             },
             fullscreen: function(data) {
                 self.options.fullscreen = data.fullscreen;
@@ -237,6 +238,7 @@ Ox.VideoEditPanel = function(options, self) {
 
     self.$clipPanel = Ox.ClipPanel({
             clips: Ox.clone(self.options.clips),
+            duration: self.options.duration,
             editable: self.options.editable,
             'in': self.options['in'],
             out: self.options.out,