From 99eddfb8068ffa74a94b80e515ee5bff69bbd58d Mon Sep 17 00:00:00 2001
From: rlx <0x0073@0x2620.org>
Date: Sun, 14 Jul 2013 18:58:31 +0000
Subject: [PATCH] add status bar text to edit

---
 source/Ox.UI/js/Video/ClipPanel.js      | 24 ++++++++++++++++++++----
 source/Ox.UI/js/Video/VideoEditPanel.js |  2 ++
 2 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/source/Ox.UI/js/Video/ClipPanel.js b/source/Ox.UI/js/Video/ClipPanel.js
index 2977cbb2..48e7670e 100644
--- a/source/Ox.UI/js/Video/ClipPanel.js
+++ b/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]);
diff --git a/source/Ox.UI/js/Video/VideoEditPanel.js b/source/Ox.UI/js/Video/VideoEditPanel.js
index 7a838c4f..ea22958f 100644
--- a/source/Ox.UI/js/Video/VideoEditPanel.js
+++ b/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,