improvements to editor (make video size sticky, make up/down work correctly if scrollbar is visible)
This commit is contained in:
rlx
parent
6b08f0dae4
commit
a24af97c0a
1 changed files with 99 additions and 88 deletions
|
|
@ -10941,13 +10941,87 @@ requires
|
|||
})
|
||||
.options(options || {})
|
||||
.addClass('OxEditor')
|
||||
/*.css({
|
||||
//height: self.options.height + 'px',
|
||||
overflowY: 'scroll',
|
||||
//width: self.options.width + 'px'
|
||||
});*/
|
||||
|
||||
that.click(that.gainFocus)
|
||||
.mousedown(function() {
|
||||
that.gainFocus();
|
||||
})
|
||||
.bindEvent({
|
||||
key_shift_0: function() {
|
||||
movePositionBy(-self.options.position);
|
||||
},
|
||||
key_alt_left: function() {
|
||||
},
|
||||
key_alt_right: function() {
|
||||
},
|
||||
key_alt_shift_left: function() {
|
||||
},
|
||||
key_alt_shift_right: function() {
|
||||
},
|
||||
key_backslash: function() {
|
||||
// select current cut
|
||||
},
|
||||
key_closebracket: function() {
|
||||
movePositionTo('cut', 1);
|
||||
},
|
||||
key_comma: function() {
|
||||
movePositionTo('subtitle', -1);
|
||||
},
|
||||
key_dot: function() {
|
||||
movePositionTo('subtitle', 1);
|
||||
},
|
||||
key_down: function() {
|
||||
movePositionBy(self.sizes.timeline[0].width);
|
||||
},
|
||||
key_i: function() {
|
||||
setPoint('in');
|
||||
},
|
||||
key_left: function() {
|
||||
movePositionBy(-1);
|
||||
},
|
||||
key_m: toggleMute,
|
||||
key_o: function() {
|
||||
setPoint('out');
|
||||
},
|
||||
key_openbracket: function() {
|
||||
movePositionTo('cut', -1);
|
||||
},
|
||||
key_p: playInToOut,
|
||||
key_right: function() {
|
||||
movePositionBy(1);
|
||||
},
|
||||
key_s: function() {
|
||||
// toggleSize
|
||||
},
|
||||
key_shift_comma: function() {
|
||||
movePositionTo('match', -1)
|
||||
},
|
||||
key_shift_dot: function() {
|
||||
movePositionTo('match', 1)
|
||||
},
|
||||
key_shift_down: function() {
|
||||
movePositionBy(self.options.duration);
|
||||
},
|
||||
key_shift_left: function() {
|
||||
movePositionBy(-0.04);
|
||||
//movePositionBy(-60);
|
||||
},
|
||||
key_shift_i: function() {
|
||||
goToPoint('in');
|
||||
},
|
||||
key_shift_o: function() {
|
||||
goToPoint('out');
|
||||
},
|
||||
key_shift_right: function() {
|
||||
movePositionBy(0.04);
|
||||
//movePositionBy(60);
|
||||
},
|
||||
key_shift_up: function() {
|
||||
movePositionBy(-self.options.duration);
|
||||
},
|
||||
key_space: togglePlay,
|
||||
key_up: function() {
|
||||
movePositionBy(-self.sizes.timeline[0].width);
|
||||
}
|
||||
});
|
||||
|
||||
$.extend(self, {
|
||||
$player: [],
|
||||
|
|
@ -10977,7 +11051,8 @@ requires
|
|||
top: self.sizes.player[i].top + 'px'
|
||||
})
|
||||
.bindEvent(type == 'play' ? {
|
||||
playing: playing
|
||||
playing: changePlayer,
|
||||
togglesize: toggleSize
|
||||
} : {
|
||||
change: function() {
|
||||
goToPoint(type);
|
||||
|
|
@ -10988,10 +11063,6 @@ requires
|
|||
})
|
||||
.appendTo(that);
|
||||
});
|
||||
self.$player[0].bindEvent({
|
||||
playing: changePlayer,
|
||||
togglesize: togglePlayerSize
|
||||
});
|
||||
|
||||
self.$timeline[0] = new Ox.LargeTimeline({
|
||||
cuts: self.options.cuts,
|
||||
|
|
@ -11032,72 +11103,6 @@ requires
|
|||
.bindEvent('change', changeTimelineSmall)
|
||||
.appendTo(that);
|
||||
|
||||
that.bindEvent({
|
||||
key_alt_left: function() {
|
||||
movePositionTo('cut', -1);
|
||||
},
|
||||
key_alt_right: function() {
|
||||
movePositionTo('cut', 1);
|
||||
},
|
||||
key_alt_shift_left: function() {
|
||||
},
|
||||
key_alt_shift_right: function() {
|
||||
},
|
||||
key_closebracket: function() {
|
||||
goToPoint('out');
|
||||
},
|
||||
key_comma: function() {
|
||||
movePositionTo('subtitle', -1);
|
||||
},
|
||||
key_dot: function() {
|
||||
movePositionTo('subtitle', 1);
|
||||
},
|
||||
key_down: function() {
|
||||
movePositionBy(self.options.width - 2 * self.margin);
|
||||
},
|
||||
key_i: function() {
|
||||
setPoint('in');
|
||||
},
|
||||
key_left: function() {
|
||||
movePositionBy(-1);
|
||||
},
|
||||
key_m: toggleMute,
|
||||
key_o: function() {
|
||||
setPoint('out');
|
||||
},
|
||||
key_openbracket: function() {
|
||||
goToPoint('in');
|
||||
},
|
||||
key_p: playInToOut,
|
||||
key_right: function() {
|
||||
movePositionBy(1);
|
||||
},
|
||||
key_shift_comma: function() {
|
||||
movePositionTo('match', -1)
|
||||
},
|
||||
key_shift_dot: function() {
|
||||
movePositionTo('match', 1)
|
||||
},
|
||||
key_shift_down: function() {
|
||||
movePositionBy(self.options.duration);
|
||||
},
|
||||
key_shift_left: function() {
|
||||
movePositionBy(-0.04);
|
||||
//movePositionBy(-60);
|
||||
},
|
||||
key_shift_right: function() {
|
||||
movePositionBy(0.04);
|
||||
//movePositionBy(60);
|
||||
},
|
||||
key_shift_up: function() {
|
||||
movePositionBy(-self.options.duration);
|
||||
},
|
||||
key_space: togglePlay,
|
||||
key_up: function() {
|
||||
movePositionBy(-(self.options.width - 2 * self.margin));
|
||||
}
|
||||
});
|
||||
|
||||
// that.gainFocus();
|
||||
|
||||
function changePlayer(event, data) {
|
||||
|
|
@ -11164,6 +11169,7 @@ requires
|
|||
//Ox.print('getSizes', scrollbarIsVisible)
|
||||
var scrollbarWidth = oxui.scrollbarSize,
|
||||
contentWidth = self.options.width - (scrollbarIsVisible ? scrollbarWidth : 0),
|
||||
height,
|
||||
lines,
|
||||
size = {
|
||||
player: [],
|
||||
|
|
@ -11214,11 +11220,12 @@ requires
|
|||
width: size.timeline[0].width
|
||||
}
|
||||
lines = Math.ceil(self.options.duration / size.timeline[1].width);
|
||||
height = getHeight();
|
||||
//Ox.print('lines', lines, getHeight(), self.options.height, (scrollbarIsVisible && getHeight() <= self.options.height) ? 'scroll' : 'auto')
|
||||
that.css({
|
||||
overflowY: (scrollbarIsVisible && getHeight() <= self.options.height) ? 'scroll' : 'auto'
|
||||
overflowY: (scrollbarIsVisible && height <= self.options.height) ? 'scroll' : 'auto'
|
||||
});
|
||||
return (!scrollbarIsVisible && getHeight() > self.options.height) ? getSizes(true) : size;
|
||||
return (!scrollbarIsVisible && height > self.options.height) ? getSizes(true) : size;
|
||||
function getHeight() {
|
||||
return size.player[0].height + self.controlsHeight +
|
||||
size.timeline[0].height + lines * 16 +
|
||||
|
|
@ -11250,10 +11257,6 @@ requires
|
|||
});
|
||||
}
|
||||
|
||||
function playing(event, data) {
|
||||
self.options.position = data.position;
|
||||
}
|
||||
|
||||
function playInToOut() {
|
||||
self.$player[0].playInToOut();
|
||||
}
|
||||
|
|
@ -11348,9 +11351,12 @@ requires
|
|||
self.$player[0].togglePlay();
|
||||
}
|
||||
|
||||
function togglePlayerSize() {
|
||||
self.options.videoSize = self.options.videoSize == 'large' ? 'small' : 'large';
|
||||
function toggleSize(event, data) {
|
||||
self.options.videoSize = data.size
|
||||
setSizes();
|
||||
that.triggerEvent('togglesize', {
|
||||
size: self.options.videoSize
|
||||
});
|
||||
}
|
||||
|
||||
self.onChange = function(key, value) {
|
||||
|
|
@ -11376,6 +11382,7 @@ requires
|
|||
points: [0, 0],
|
||||
position: 0,
|
||||
posterFrame: 0,
|
||||
size: 'small',
|
||||
subtitles: [],
|
||||
type: 'play',
|
||||
url: '',
|
||||
|
|
@ -11511,9 +11518,12 @@ requires
|
|||
.appendTo(self.$controls);
|
||||
self.$sizeButton = new Ox.Button({
|
||||
id: self.options.id + 'Size',
|
||||
title: [
|
||||
title: self.options.size == 'small' ? [
|
||||
{id: 'large', title: 'grow'},
|
||||
{id: 'small', title: 'shrink'}
|
||||
] : [
|
||||
{id: 'small', title: 'shrink'},
|
||||
{id: 'large', title: 'grow'}
|
||||
],
|
||||
tooltip: ['Larger', 'Smaller'],
|
||||
type: 'image'
|
||||
|
|
@ -11704,8 +11714,9 @@ requires
|
|||
}
|
||||
|
||||
function toggleSize(event, data) {
|
||||
self.options.size = data.id
|
||||
that.triggerEvent('togglesize', {
|
||||
size: data.id
|
||||
size: self.options.size
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue