From 4ca5734a9d59265f741ea99ec96d2f0dc5843210 Mon Sep 17 00:00:00 2001 From: rolux Date: Tue, 17 May 2011 09:05:21 +0200 Subject: [PATCH] add close buttons to controls, better behaviour of mute vs volume 0, make range properly resizable, hide title overflow --- demos/video/js/video.js | 7 +- source/Ox.UI/js/Form/Ox.Range.js | 14 +++- .../js/Video/Ox.SmallVideoTimelineImage.js | 3 + source/Ox.UI/js/Video/Ox.VideoPlayer.js | 75 ++++++++++++------- 4 files changed, 68 insertions(+), 31 deletions(-) diff --git a/demos/video/js/video.js b/demos/video/js/video.js index c8b2cb7d..163b5da7 100644 --- a/demos/video/js/video.js +++ b/demos/video/js/video.js @@ -78,7 +78,11 @@ Ox.load('UI', { top: '16px' }), Ox.VideoPlayer({ - controlsBottom: ['play', 'playInToOut', 'mute', 'size', 'space', 'position'], + controlsTop: ['fullscreen', 'title', 'find'], + controlsBottom: ['play', 'playInToOut', 'volume', 'size', 'space', 'position'], + enableFind: true, + enableFullscreen: true, + enableVolume: true, externalControls: true, height: 192, 'in': 3128.725, @@ -87,6 +91,7 @@ Ox.load('UI', { showMilliseconds: 2, subtitles: 'srt/' + id + '.srt', timeline: timeline, + title: 'Brick - Rian Johnson - 2005', video: url + '?' + + Ox.random(1000000), width: 360 }) diff --git a/source/Ox.UI/js/Form/Ox.Range.js b/source/Ox.UI/js/Form/Ox.Range.js index e645ebec..29e17e76 100644 --- a/source/Ox.UI/js/Form/Ox.Range.js +++ b/source/Ox.UI/js/Form/Ox.Range.js @@ -36,7 +36,7 @@ Ox.Range = function(options, self) { min: 0, orientation: 'horizontal', step: 1, - size: 128, + size: 128, // fixme: shouldn't this be width? thumbSize: 16, thumbValue: false, trackColors: [], @@ -191,12 +191,18 @@ Ox.Range = function(options, self) { self.trackColorsStart = self.thumbSize / 2 / self.options.size; self.trackColorsStep = (self.options.size - self.thumbSize) / (self.trackColors - 1) / self.options.size; + that.css({ + width: self.options.size + 'px' + }); self.$track && self.$track.css({ width: (self.trackSize - 2) + 'px' }); - self.$thumb && self.$thumb.options({ - width: self.thumbSize - }); + if (self.$thumb) { + self.$thumb.options({ + width: self.thumbSize + }); + setThumb(); + } } function setThumb(animate) { diff --git a/source/Ox.UI/js/Video/Ox.SmallVideoTimelineImage.js b/source/Ox.UI/js/Video/Ox.SmallVideoTimelineImage.js index 4350b7e5..65a6175b 100644 --- a/source/Ox.UI/js/Video/Ox.SmallVideoTimelineImage.js +++ b/source/Ox.UI/js/Video/Ox.SmallVideoTimelineImage.js @@ -19,6 +19,9 @@ Ox.SmallVideoTimelineImage = function(options, self) { width: self.options.width + 'px' }); + // fixme: unless we do a block timeline, + // we can always use a single 1920 png + self.height = self.options.type == 'player' ? 16 : 24; self.imageHeight = self.options.type == 'player' ? 16 : 18; self.imageTop = self.options.type == 'player' ? 0 : 3; diff --git a/source/Ox.UI/js/Video/Ox.VideoPlayer.js b/source/Ox.UI/js/Video/Ox.VideoPlayer.js index 0adce8fa..f9b297ec 100644 --- a/source/Ox.UI/js/Video/Ox.VideoPlayer.js +++ b/source/Ox.UI/js/Video/Ox.VideoPlayer.js @@ -239,6 +239,7 @@ Ox.VideoPlayer = function(options, self) { self.$videoContainer = $('
') .css({ position: 'absolute', + top: self.options.externalControls && self.options.controlsTop ? '16px' : 0, background: 'rgb(0, 0, 0)', overflow: 'hidden' }) @@ -367,20 +368,6 @@ Ox.VideoPlayer = function(options, self) { .hide() .appendTo(that.$element); - self.$playResultsButton = Ox.Button({ - style: 'symbol', - title: 'PlayInToOut', - tooltip: 'Play Results', - type: 'image' - }) - .css({float: 'left', opacity: 0.25}) - .bindEvent({ - click: function() { - - } - }) - .appendTo(self.$find); - self.$results = $('
') .css({ float: 'left', @@ -479,6 +466,20 @@ Ox.VideoPlayer = function(options, self) { }) .appendTo(self.$find); //*/ + + self.$hideFindButton = Ox.Button({ + style: 'symbol', + title: 'close', + tooltip: 'Hide', + type: 'image' + }) + .css({float: 'left'}) + .bindEvent({ + click: function() { + self.$find.hide(); + } + }) + .appendTo(self.$find); } @@ -514,11 +515,8 @@ Ox.VideoPlayer = function(options, self) { self.$findButton = Ox.Button({ style: 'symbol', - title: [ - {id: 'find', title: 'find'}, - {id: 'close', title: 'close'} - ], - tooltip: ['Find', 'Close'], + title: 'find', + tooltip: 'Find', type: 'image' }) .css({float: 'left'}) @@ -736,7 +734,9 @@ Ox.VideoPlayer = function(options, self) { float: 'left', paddingTop: '1px', textAlign: 'center', - color: 'rgb(255, 255, 255)' + color: 'rgb(255, 255, 255)', + overflow: 'hidden', + textOverflow: 'ellipsis' }) .html(self.options.title) .appendTo(self['$controls' + titlecase].$element); @@ -783,6 +783,20 @@ Ox.VideoPlayer = function(options, self) { .hide() .appendTo(that.$element); + self.$hideVolumeButton = Ox.Button({ + style: 'symbol', + title: 'close', + tooltip: 'Hide', + type: 'image' + }) + .css({float: 'left'}) + .bindEvent({ + click: function() { + self.$volume.hide(); + } + }) + .appendTo(self.$volume); + self.$muteButton = Ox.Button({ style: 'symbol', title: [ @@ -1006,7 +1020,7 @@ Ox.VideoPlayer = function(options, self) { }; } else if (element == 'volume') { css = { - width: Math.min(168, self.width) + width: Math.min(184, self.width) }; } return css; @@ -1376,7 +1390,7 @@ Ox.VideoPlayer = function(options, self) { if (self.$volume) { self.$volume.animate(getCSS('volume'), ms); self.$volumeInput.options({ - width: Math.min(128, self.width - 40) + size: Math.min(128, self.width - 56) }); } } @@ -1394,11 +1408,16 @@ Ox.VideoPlayer = function(options, self) { function setVolume(data) { self.options.volume = data.value; + if (!!self.options.volume == self.options.muted) { + self.options.muted = !self.options.muted; + self.video.muted = self.options.muted; + self.$muteButton.toggleTitle(); + } + self.video.volume = self.options.volume; self.$volumeButton.attr({ src: getVolumeImageURL() }); self.$volumeValue.html(self.options.muted ? 0 : Math.round(self.options.volume * 100)); - self.video.volume = self.options.volume; } function showInterface() { @@ -1578,6 +1597,10 @@ Ox.VideoPlayer = function(options, self) { function toggleMuted(toggleButton) { self.options.muted = !self.options.muted; self.video.muted = self.options.muted; + if (!self.options.muted && !self.options.volume) { + self.options.volume = 1; + self.video.volume = 1; + } if (toggleButton && self.$muteButton) { self.$muteButton.toggleTitle(); } @@ -1587,9 +1610,9 @@ Ox.VideoPlayer = function(options, self) { self.$volumeInput && self.$volumeInput.options({ value: self.options.muted ? 0 : self.options.volume }); - self.$volumeValue && - self.$volumeValue.html(self.options.muted ? 0 : Math.round(self.options.volume * 100)); - + self.$volumeValue && self.$volumeValue.html( + self.options.muted ? 0 : Math.round(self.options.volume * 100) + ); } function togglePaused(toggleButton) {