support per clip volume

source/UI/js/Video/ClipPanel.js

@@ -175,6 +175,21 @@ Ox.ClipPanel = function(options, self) {
             visible: true,
             width: 90
         },
+        {
+            align: 'right',
+            editable: self.options.editable,
+            format: function(value, data) {
+                return Ox.formatNumber(value, 2);
+            },
+            id: 'volume',
+            operator: '+',
+            sort: function(value, data) {
+                return data.sort;
+            },
+            title: Ox._('Volume'),
+            visible: false,
+            width: 45
+        },
         {
             addable: false,
             id: 'sort',
@@ -491,23 +506,34 @@ Ox.ClipPanel = function(options, self) {
             },
             submit: function(data) {
                 var value = self.$list.value(data.id);
-                data.value = Ox.parseDuration(data.value);
+                if (data.key == 'volume') {
-                if (
+                    data.value = parseFloat(data.value);
-                    (data.key == 'in' && data.value < value.out)
+                    if (data.value >= 1 || Ox.isNaN(data.value)) {
-                    || (data.key == 'out' && data.value > value['in'])
+                        data.value = 1;
-                    || (data.key == 'duration' && data.value > 0)
+                    } else if (data.value < 0) {
-                ) {
+                        data.value = 0;
-                    self.$list.value(data.id, data.key, data.value);
-                    if (data.key == 'in') {
-                        self.$list.value(data.id, 'duration', value.out - data.value);
-                    } else if (data.key == 'out') {
-                        self.$list.value(data.id, 'duration', data.value - value['in']);
-                    } else if (data.key == 'duration') {
-                        self.$list.value(data.id, 'out', value['in'] + data.value);
                     }
+                    self.$list.value(data.id, data.key, data.value);
                     that.triggerEvent('edit', data);
                 } else {
-                    self.$list.value(data.id, data.key, value[data.key]);
+                    data.value = Ox.parseDuration(data.value);
+                    if (
+                        (data.key == 'in' && data.value < value.out)
+                        || (data.key == 'out' && data.value > value['in'])
+                        || (data.key == 'duration' && data.value > 0)
+                    ) {
+                        self.$list.value(data.id, data.key, data.value);
+                        if (data.key == 'in') {
+                            self.$list.value(data.id, 'duration', value.out - data.value);
+                        } else if (data.key == 'out') {
+                            self.$list.value(data.id, 'duration', data.value - value['in']);
+                        } else if (data.key == 'duration') {
+                            self.$list.value(data.id, 'out', value['in'] + data.value);
+                        }
+                        that.triggerEvent('edit', data);
+                    } else {
+                        self.$list.value(data.id, data.key, value[data.key]);
+                    }
                 }
             }
         });

source/UI/js/Video/VideoAnnotationPanel.js

@@ -147,6 +147,11 @@ Ox.VideoAnnotationPanel = function(options, self) {
                     self.$menuButton.checkItem('timelines_' + self.options.timeline);
                     updateTimelines();
                 },
+                volume: function() {
+                    self.$player[0].options({
+                        volume: self.options.volume
+                    });
+                },
                 width: setSizes
             })
             .bindEvent({

source/UI/js/Video/VideoEditPanel.js

@@ -140,6 +140,11 @@ Ox.VideoEditPanel = function(options, self) {
                     cuts: self.cuts
                 });
             },
+            volume: function() {
+                self.$video.options({
+                    volume: self.options.volume
+                });
+            },
             width: function() {
                 self.$video.options({width: getPlayerWidth()});
                 self.$timeline.options({width: getTimelineWidth()});

source/UI/js/Video/VideoElement.js

@@ -101,6 +101,7 @@ Ox.VideoElement = function(options, self) {
     self.$videos = [getVideo(), getVideo()];
     self.$video = self.$videos[self.currentVideo];
     self.video = self.$video[0];
+    self.volume = 1;
     self.$brightness = $('<div>').css({
             width: '100%',
             height: '100%',
@@ -204,6 +205,15 @@ Ox.VideoElement = function(options, self) {
         return $(video);
     };
 
+    function getVolume() {
+        var volume = 1;
+        if (self.items[self.currentItem] && Ox.isNumber(self.items[self.currentItem].volume)) {
+            volume = self.items[self.currentItem].volume;
+        }
+        return self.volume * volume;
+    }
+
+
     function isReady($video, callback) {
         if ($video[0].seeking) {
             that.triggerEvent('seeking');
@@ -320,7 +330,6 @@ Ox.VideoElement = function(options, self) {
     function setCurrentVideo(callback) {
         var css = {},
             muted = false,
-            volume = 1,
             item = self.items[self.currentItem],
             next;
         Ox.Log('Video', 'sCV', item);
@@ -332,7 +341,6 @@ Ox.VideoElement = function(options, self) {
         if (self.video) {
             self.$videos[self.currentVideo].hide();
             self.video.pause();
-            volume = self.video.volume;
             muted = self.video.muted;
         }
         self.currentVideo = Ox.mod(self.currentVideo + 1, self.$videos.length);
@@ -343,7 +351,7 @@ Ox.VideoElement = function(options, self) {
             self.video.src = item.src;
             self.video.preload = 'auto';
         }
-        self.video.volume = volume;
+        self.video.volume = getVolume();
         self.video.muted = muted;
         self.video.playbackRate = self.options.playbackRate;
         self.$video.css(css);
@@ -557,7 +565,13 @@ Ox.VideoElement = function(options, self) {
     volume <f> get/set volume
     @*/
     that.volume = function(value) {
-        return getset('volume', arguments[0]);
+        if (Ox.isUndefined(value)) {
+            value = self.volume
+        } else {
+            self.volume = value;
+            self.video.volume = getVolume());
+        }
+        return value;
     };
 
     return that;

source/UI/js/Video/VideoPlayerPanel.js

@@ -123,6 +123,11 @@ Ox.VideoPlayerPanel = function(options, self) {
             timeline: function() {
                 self.$timeline.options({type: self.options.timeline});
             },
+            volume: function() {
+                self.$video.options({
+                    volume: self.options.volume
+                });
+            },
             width: function() {
                 self.$video.options({width: getPlayerWidth()});
                 self.$timeline.options({width: getTimelineWidth()});

source/UI/js/Video/VideoTimelinePlayer.js

@@ -57,6 +57,11 @@ Ox.VideoTimelinePlayer = function(options, self) {
                 self.$menuButton.checkItem('timelines_' + self.options.timeline);
                 updateTimeline();
             },
+            volume: function() {
+                self.$video.options({
+                    volume: self.options.volume
+                });
+            },
             width: setWidth
         });