From bfb5c3d3ef49ecf6fdadab89f13c3bc05eedf71f Mon Sep 17 00:00:00 2001 From: j Date: Sat, 15 Apr 2017 13:45:01 +0200 Subject: [PATCH] support per clip volume --- source/UI/js/Video/ClipPanel.js | 54 ++++++++++++++++------ source/UI/js/Video/VideoAnnotationPanel.js | 5 ++ source/UI/js/Video/VideoEditPanel.js | 5 ++ source/UI/js/Video/VideoElement.js | 22 +++++++-- source/UI/js/Video/VideoPlayerPanel.js | 5 ++ source/UI/js/Video/VideoTimelinePlayer.js | 5 ++ 6 files changed, 78 insertions(+), 18 deletions(-) diff --git a/source/UI/js/Video/ClipPanel.js b/source/UI/js/Video/ClipPanel.js index e5095210..d61f79dc 100644 --- a/source/UI/js/Video/ClipPanel.js +++ b/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 == '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); + if (data.key == 'volume') { + data.value = parseFloat(data.value); + if (data.value >= 1 || Ox.isNaN(data.value)) { + data.value = 1; + } else if (data.value < 0) { + data.value = 0; } + 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]); + } } } }); diff --git a/source/UI/js/Video/VideoAnnotationPanel.js b/source/UI/js/Video/VideoAnnotationPanel.js index e9d1d2c6..9f35eea6 100644 --- a/source/UI/js/Video/VideoAnnotationPanel.js +++ b/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({ diff --git a/source/UI/js/Video/VideoEditPanel.js b/source/UI/js/Video/VideoEditPanel.js index fb1e64f7..4dc06243 100644 --- a/source/UI/js/Video/VideoEditPanel.js +++ b/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()}); diff --git a/source/UI/js/Video/VideoElement.js b/source/UI/js/Video/VideoElement.js index 62c16857..225610c7 100644 --- a/source/UI/js/Video/VideoElement.js +++ b/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 = $('
').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 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; diff --git a/source/UI/js/Video/VideoPlayerPanel.js b/source/UI/js/Video/VideoPlayerPanel.js index 64d88182..d59d4862 100644 --- a/source/UI/js/Video/VideoPlayerPanel.js +++ b/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()}); diff --git a/source/UI/js/Video/VideoTimelinePlayer.js b/source/UI/js/Video/VideoTimelinePlayer.js index aca17467..73887e92 100644 --- a/source/UI/js/Video/VideoTimelinePlayer.js +++ b/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 });