0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

Ox.VideoPreview, make timeline optional, fix width/height if not scale to fit

Browse source
This commit is contained in:
j 2012-05-31 20:15:44 +02:00
parent f8ab51fa40
commit ac82c3b30e
1 changed files with 11 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
source/Ox.UI/js/Video/VideoPreview.js
View file

@ -35,7 +35,7 @@ Ox.VideoPreview = function(options, self) {
stopLoading(); stopLoading();
self.$frame.attr({src: self.options.getFrame()}) self.$frame.attr({src: self.options.getFrame()})
.css(getFrameCSS()); .css(getFrameCSS());
self.$timeline.css({width: self.options.width + 'px'}); self.$timeline && self.$timeline.css({width: self.options.width + 'px'});
} }
}) })
.addClass('OxVideoPreview') .addClass('OxVideoPreview')
@ -56,11 +56,13 @@ Ox.VideoPreview = function(options, self) {
.css(getFrameCSS()) .css(getFrameCSS())
.appendTo(self.$frameElement); .appendTo(self.$frameElement);
self.$timeline = $('<img>') if(self.options.timeline) {
.addClass('OxTimeline') self.$timeline = $('<img>')
.attr({src: self.options.timeline}) .addClass('OxTimeline')
.css({width: self.options.width + 'px'}) .attr({src: self.options.timeline})
.appendTo(that.$element); .css({width: self.options.width + 'px'})
.appendTo(that.$element);
}
self.$interface = Ox.Element({ self.$interface = Ox.Element({
tooltip: function(event) { tooltip: function(event) {
@ -103,7 +105,7 @@ Ox.VideoPreview = function(options, self) {
function getFrameCSS() { function getFrameCSS() {
var css = {}, var css = {},
elementWidth = self.options.width, elementWidth = self.options.width,
elementHeight = self.options.height - 16, elementHeight = self.options.height - (self.options.timeline ? 16 : 0),
elementRatio = elementWidth / elementHeight, elementRatio = elementWidth / elementHeight,
frameRatio = self.options.frameRatio, frameRatio = self.options.frameRatio,
frameIsWider = frameRatio > elementRatio; frameIsWider = frameRatio > elementRatio;
@ -115,8 +117,8 @@ Ox.VideoPreview = function(options, self) {
} else { } else {
css.width = frameIsWider ? elementWidth : elementHeight * frameRatio; css.width = frameIsWider ? elementWidth : elementHeight * frameRatio;
css.height = frameIsWider ? elementWidth / frameRatio : elementHeight; css.height = frameIsWider ? elementWidth / frameRatio : elementHeight;
css.marginLeft = frameIsWider ? 0 : (css.width - elementWidth) / 2; css.marginLeft = frameIsWider ? 0 : (elementWidth - css.width) / 2;
css.marginTop = frameIsWider ? (css.height - elementHeight) / 2 : 0; css.marginTop = frameIsWider ? (elementHeight - css.height) / 2 : 0;
} }
return Ox.map(css, function(value) { return Ox.map(css, function(value) {
return Math.round(value) + 'px'; return Math.round(value) + 'px';