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