smaller fixes (tooltip corner cases, block timeline)
This commit is contained in:
parent
1086be2686
commit
9650a29a90
4 changed files with 21 additions and 15 deletions
|
@ -1738,7 +1738,7 @@ Miscellaneous
|
||||||
padding: 1px 2px 1px 2px;
|
padding: 1px 2px 1px 2px;
|
||||||
font-size: 9px;
|
font-size: 9px;
|
||||||
//opacity: 0;
|
//opacity: 0;
|
||||||
z-index: 12;
|
z-index: 1001;
|
||||||
-moz-border-radius: 4px;
|
-moz-border-radius: 4px;
|
||||||
-webkit-border-radius: 4px;
|
-webkit-border-radius: 4px;
|
||||||
}
|
}
|
||||||
|
|
|
@ -31,6 +31,7 @@ Ox.SmallVideoTimelineImage = function(options, self) {
|
||||||
self.height = self.options.type == 'player' ? 16 : 24;
|
self.height = self.options.type == 'player' ? 16 : 24;
|
||||||
self.imageHeight = self.options.type == 'player' ? 16 : 18;
|
self.imageHeight = self.options.type == 'player' ? 16 : 18;
|
||||||
self.imageTop = self.options.type == 'player' ? 0 : 3;
|
self.imageTop = self.options.type == 'player' ? 0 : 3;
|
||||||
|
self.timelineTop = self.options.type == 'player' ? 0 : 4;
|
||||||
|
|
||||||
that.css({
|
that.css({
|
||||||
height: self.height + 'px'
|
height: self.height + 'px'
|
||||||
|
@ -43,9 +44,9 @@ Ox.SmallVideoTimelineImage = function(options, self) {
|
||||||
})
|
})
|
||||||
.css({
|
.css({
|
||||||
position: 'absolute',
|
position: 'absolute',
|
||||||
top: self.imageTop + 'px',
|
top: self.timelineTop + 'px',
|
||||||
width: self.options.width + 'px',
|
width: self.options.width + 'px',
|
||||||
height: self.imageHeight + 'px',
|
height: '16px'
|
||||||
})
|
})
|
||||||
.appendTo(that.$element);
|
.appendTo(that.$element);
|
||||||
} else {
|
} else {
|
||||||
|
@ -57,9 +58,9 @@ Ox.SmallVideoTimelineImage = function(options, self) {
|
||||||
.css({
|
.css({
|
||||||
position: 'absolute',
|
position: 'absolute',
|
||||||
left: (i * 3600) + 'px',
|
left: (i * 3600) + 'px',
|
||||||
top: self.imageTop + 'px',
|
top: self.timelineTop + 'px',
|
||||||
width: (i == self.images - 1 ? self.imageWidth % 3600 : 3600) + 'px',
|
width: (i == self.images - 1 ? self.imageWidth % 3600 : 3600) + 'px',
|
||||||
height: self.imageHeight + 'px',
|
height: '16px'
|
||||||
})
|
})
|
||||||
.appendTo(that.$element);
|
.appendTo(that.$element);
|
||||||
});
|
});
|
||||||
|
|
|
@ -635,8 +635,13 @@ Ox.VideoPlayer = function(options, self) {
|
||||||
.bind({
|
.bind({
|
||||||
click: function() {
|
click: function() {
|
||||||
if (!self.options.paused) {
|
if (!self.options.paused) {
|
||||||
self.wasPlaying = true;
|
self.playOnSubmit = true;
|
||||||
togglePaused(true);
|
togglePaused(true);
|
||||||
|
} else if (self.playOnLoad) {
|
||||||
|
// if clicked during resolution switch,
|
||||||
|
// don't play on load
|
||||||
|
self.playOnLoad = false;
|
||||||
|
self.playOnSubmit = true;
|
||||||
}
|
}
|
||||||
self.$position.hide();
|
self.$position.hide();
|
||||||
self.$positionInput
|
self.$positionInput
|
||||||
|
@ -758,7 +763,7 @@ Ox.VideoPlayer = function(options, self) {
|
||||||
},
|
},
|
||||||
mouseleave: function() {
|
mouseleave: function() {
|
||||||
$(this).css({
|
$(this).css({
|
||||||
background: 'rgba(64, 64, 64, 0.25)'
|
background: 'rgba(32, 32, 32, 0.5)'
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
@ -1713,10 +1718,10 @@ Ox.VideoPlayer = function(options, self) {
|
||||||
self.$positionInput.hide();
|
self.$positionInput.hide();
|
||||||
self.$position.html('').show();
|
self.$position.html('').show();
|
||||||
setPosition(parsePositionInput(self.$positionInput.options('value')), true);
|
setPosition(parsePositionInput(self.$positionInput.options('value')), true);
|
||||||
if (self.wasPlaying) {
|
if (self.playOnSubmit) {
|
||||||
togglePaused(true);
|
togglePaused(true);
|
||||||
self.video.play();
|
self.video.play();
|
||||||
self.wasPlaying = false;
|
self.playOnSubmit = false;
|
||||||
}
|
}
|
||||||
if (self.focus == 'mouseenter' && !self.mouseHasLeft) {
|
if (self.focus == 'mouseenter' && !self.mouseHasLeft) {
|
||||||
that.gainFocus();
|
that.gainFocus();
|
||||||
|
@ -1732,12 +1737,12 @@ Ox.VideoPlayer = function(options, self) {
|
||||||
}
|
}
|
||||||
|
|
||||||
function toggleFullscreen(toggleButton) {
|
function toggleFullscreen(toggleButton) {
|
||||||
var parentOffset, wasPlaying;
|
var parentOffset, playOnFullscreen;
|
||||||
self.options.fullscreen = !self.options.fullscreen;
|
self.options.fullscreen = !self.options.fullscreen;
|
||||||
if (!self.options.paused) {
|
if (!self.options.paused) {
|
||||||
// video won't keep playing accross detach/append
|
// video won't keep playing accross detach/append
|
||||||
self.video.pause();
|
self.video.pause();
|
||||||
wasPlaying = true;
|
playOnFullscreen = true;
|
||||||
}
|
}
|
||||||
if (self.options.fullscreen) {
|
if (self.options.fullscreen) {
|
||||||
self.$parent = that.parent();
|
self.$parent = that.parent();
|
||||||
|
@ -1755,7 +1760,7 @@ Ox.VideoPlayer = function(options, self) {
|
||||||
})
|
})
|
||||||
.appendTo(Ox.UI.$body);
|
.appendTo(Ox.UI.$body);
|
||||||
setSizes(function() {
|
setSizes(function() {
|
||||||
wasPlaying && self.video.play();
|
playOnFullscreen && self.video.play();
|
||||||
that.bind({
|
that.bind({
|
||||||
mousemove: function() {
|
mousemove: function() {
|
||||||
if (!self.mouseIsInControls) {
|
if (!self.mouseIsInControls) {
|
||||||
|
@ -1793,7 +1798,7 @@ Ox.VideoPlayer = function(options, self) {
|
||||||
zIndex: 1
|
zIndex: 1
|
||||||
})
|
})
|
||||||
.appendTo(self.$parent);
|
.appendTo(self.$parent);
|
||||||
wasPlaying && self.video.play();
|
playOnFullscreen && self.video.play();
|
||||||
self.options.enableKeyboard && that.gainFocus();
|
self.options.enableKeyboard && that.gainFocus();
|
||||||
//showInterface();
|
//showInterface();
|
||||||
});
|
});
|
||||||
|
|
|
@ -55,8 +55,8 @@ Ox.Tooltip = function(options, self) {
|
||||||
that.appendTo(Ox.UI.$body);
|
that.appendTo(Ox.UI.$body);
|
||||||
width = that.width();
|
width = that.width();
|
||||||
height = that.height();
|
height = that.height();
|
||||||
left = Ox.limit(x - width / 2, 0, Ox.UI.$document.width() - width);
|
left = Ox.limit(x - width / 2, 0, window.innerWidth - width);
|
||||||
top = y > Ox.UI.$document.height() - height - 16 ? y - 32 : y + 16;
|
top = y > window.innerHeight - height - 16 ? y - 16 - height : y + 16;
|
||||||
that.css({
|
that.css({
|
||||||
left: left + 'px',
|
left: left + 'px',
|
||||||
top: top + 'px'
|
top: top + 'px'
|
||||||
|
|
Loading…
Reference in a new issue