make small timeline work in player view
This commit is contained in:
rlx
parent
b64c66bad5
commit
5a06413d5e
1 changed files with 75 additions and 39 deletions
|
|
@ -121,7 +121,8 @@ requires
|
|||
/**
|
||||
Creates an App instance.
|
||||
*/
|
||||
Ox.App = function() {
|
||||
Ox.App = (function() {
|
||||
|
||||
return function(options) {
|
||||
|
||||
options = options || {};
|
||||
|
|
@ -206,6 +207,10 @@ requires
|
|||
}
|
||||
};
|
||||
|
||||
that.bindEvent = function() {
|
||||
|
||||
};
|
||||
|
||||
that.launch = function(callback) {
|
||||
var time = +new Date(),
|
||||
userAgent = getUserAgent(),
|
||||
|
|
@ -273,7 +278,7 @@ requires
|
|||
|
||||
};
|
||||
|
||||
}();
|
||||
}());
|
||||
|
||||
Ox.Clipboard = function() {
|
||||
var clipboard = {};
|
||||
|
|
@ -1532,7 +1537,7 @@ requires
|
|||
})
|
||||
*/
|
||||
.bindEvent({
|
||||
doubleclick: toggle,
|
||||
anyclick: toggle,
|
||||
dragstart: dragstart,
|
||||
drag: drag,
|
||||
dragend: dragend
|
||||
|
|
@ -1550,11 +1555,12 @@ requires
|
|||
|
||||
function dragstart(event, e) {
|
||||
if (self.options.resizable && !self.options.collapsed) {
|
||||
Ox.print('DRAGSTART')
|
||||
self.drag = {
|
||||
startPos: e[self.clientXY],
|
||||
startSize: self.options.size
|
||||
}
|
||||
}
|
||||
} else { Ox.print('NO DRAGSTART r !c', self.options.resizable, !self.options.collapsed) }
|
||||
}
|
||||
|
||||
function drag(event, e) {
|
||||
|
|
@ -7118,6 +7124,7 @@ requires
|
|||
loadPages(self.page);
|
||||
}
|
||||
}, 250);
|
||||
that.gainFocus();
|
||||
}
|
||||
|
||||
function scrollPageDown() {
|
||||
|
|
@ -10002,6 +10009,8 @@ requires
|
|||
|
||||
function setSizes(init) {
|
||||
self.options.elements.forEach(function(v, i) {
|
||||
// fixme: maybe we can add a conditional here, since init
|
||||
// is about elements that are collapsed splitpanels
|
||||
var edges = [
|
||||
(init && parseInt(that.$elements[i].css(self.edges[0]))) || 0,
|
||||
(init && parseInt(that.$elements[i].css(self.edges[1]))) || 0
|
||||
|
|
@ -10107,7 +10116,6 @@ requires
|
|||
|
||||
that.toggle = function(id) {
|
||||
// one can pass pos instead of id
|
||||
//Ox.print('toggle', id);
|
||||
var pos = Ox.isNumber(id) ? id : getPositionById(id),
|
||||
element = self.options.elements[pos],
|
||||
value = parseInt(that.css(self.edges[pos == 0 ? 0 : 1])) +
|
||||
|
|
@ -10115,8 +10123,7 @@ requires
|
|||
(element.collapsed ? 1 : -1),
|
||||
animate = {};
|
||||
animate[self.edges[pos == 0 ? 0 : 1]] = value;
|
||||
//Ox.print('animate', animate, self.resizebarElements)
|
||||
that.animate(animate, 200, function() {
|
||||
that.animate(animate, 200, function() { // fixme: 250?
|
||||
element.collapsed = !element.collapsed;
|
||||
element.element.triggerEvent('toggle', {
|
||||
'collapsed': element.collapsed
|
||||
|
|
@ -10761,12 +10768,14 @@ requires
|
|||
});
|
||||
|
||||
self.$line = $('<img>')
|
||||
.addClass('OxTimelineSmallImage')
|
||||
.attr({
|
||||
src: '/' + self.options.videoId + '/timelines/timeline.16.0.png'
|
||||
})
|
||||
.css({
|
||||
position: 'absolute',
|
||||
left: '4px',
|
||||
top: '4px',
|
||||
width: self.options.width,
|
||||
height: '16px'
|
||||
})
|
||||
|
|
@ -10799,8 +10808,7 @@ requires
|
|||
});
|
||||
|
||||
function getPosition(e) {
|
||||
//FIXME: this might still be broken in opera according to http://acko.net/blog/mouse-handling-and-absolute-positions-in-javascript
|
||||
return (e.offsetX ? e.offsetX : e.clientX - $(e.target).offset().left);
|
||||
return e.offsetX / self.options.width * self.options.duration;
|
||||
}
|
||||
|
||||
function getSubtitle(position) {
|
||||
|
|
@ -10863,8 +10871,10 @@ requires
|
|||
function setMarker() {
|
||||
self.$markerPosition
|
||||
.css({
|
||||
left: (self.options.position % self.options.width) + 'px',
|
||||
top: (parseInt(self.options.position / self.options.width) * (self.height + self.margin) + 2) + 'px',
|
||||
left: parseInt(
|
||||
self.options.position / self.options.duration * self.options.width
|
||||
) + 'px',
|
||||
top: '2px',
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -10883,10 +10893,8 @@ requires
|
|||
}
|
||||
|
||||
function setWidth() {
|
||||
self.lines = Math.ceil(self.options.duration / self.options.width);
|
||||
that.css({
|
||||
width: (self.options.width + self.margin) + 'px',
|
||||
height: (self.height + self.margin) + 'px'
|
||||
self.$line.css({
|
||||
width: self.options.width + 'px',
|
||||
});
|
||||
setMarker();
|
||||
setMarkerPoint(0);
|
||||
|
|
@ -11927,6 +11935,7 @@ requires
|
|||
poster: '',
|
||||
showAnnotations: true,
|
||||
showControls: true,
|
||||
subtitles: [],
|
||||
videoHeight: 0,
|
||||
videoSize: 'fit',
|
||||
videoWidth: 0,
|
||||
|
|
@ -11942,7 +11951,10 @@ requires
|
|||
resize: resizeElement
|
||||
});
|
||||
|
||||
self.videoCSS = getVideoCSS();
|
||||
$.extend(self, {
|
||||
fullscreen: false,
|
||||
videoCSS: getVideoCSS()
|
||||
});
|
||||
//alert(JSON.stringify([self.playerHeight, self.playerWidth, self.videoCSS]))
|
||||
|
||||
self.$player = new Ox.Element()
|
||||
|
|
@ -11995,15 +12007,6 @@ requires
|
|||
.bindEvent({
|
||||
click: self.$video.togglePlay
|
||||
}),
|
||||
playInToOut: new Ox.Button({
|
||||
id: 'playInToOut',
|
||||
title: 'PlayInToOut',
|
||||
tooltip: 'Play In to Out',
|
||||
type: 'image'
|
||||
})
|
||||
.bindEvent({
|
||||
click: playInToOut
|
||||
}),
|
||||
mute: new Ox.Button({
|
||||
id: 'mute',
|
||||
title: [
|
||||
|
|
@ -12034,6 +12037,20 @@ requires
|
|||
})
|
||||
.bindEvent({
|
||||
click: toggleSize
|
||||
}),
|
||||
fullscreen: new Ox.Button({
|
||||
id: 'size',
|
||||
title: [
|
||||
{id: 'grow', title: 'grow'},
|
||||
{id: 'shrink', title: 'shrink'}
|
||||
],
|
||||
tooltip: [
|
||||
'Enter Fullscreen', 'Exit Fullscreen'
|
||||
],
|
||||
type: 'image'
|
||||
})
|
||||
.bindEvent({
|
||||
click: toggleFullscreen
|
||||
})
|
||||
}
|
||||
var i = 0;
|
||||
|
|
@ -12056,6 +12073,7 @@ requires
|
|||
self.$timeline = {
|
||||
large: new Ox.LargeTimeline({
|
||||
duration: self.options.duration,
|
||||
subtitles: self.options.subtitles,
|
||||
videoId: self.options.videoId,
|
||||
width: getTimelineWidth()
|
||||
})
|
||||
|
|
@ -12063,17 +12081,19 @@ requires
|
|||
top: '4px'
|
||||
})
|
||||
.bindEvent({
|
||||
change: function(event, data) {
|
||||
self.$video.position(data.position);
|
||||
}
|
||||
change: changeLargeTimeline
|
||||
}),
|
||||
small: new Ox.SmallTimeline({
|
||||
duration: self.options.duration,
|
||||
subtitles: self.options.subtitles,
|
||||
videoId: self.options.videoId,
|
||||
width: getTimelineWidth()
|
||||
})
|
||||
.css({
|
||||
top: '80px'
|
||||
top: '76px'
|
||||
})
|
||||
.bindEvent({
|
||||
change: changeSmallTimeline
|
||||
})
|
||||
};
|
||||
$.each(self.$timeline, function(i, $timeline) {
|
||||
|
|
@ -12122,6 +12142,20 @@ requires
|
|||
orientation: 'horizontal'
|
||||
});
|
||||
|
||||
function changeLargeTimeline(event, data) {
|
||||
self.$video.position(data.position);
|
||||
self.$timeline.small.options({
|
||||
position: data.position
|
||||
});
|
||||
}
|
||||
|
||||
function changeSmallTimeline(event, data) {
|
||||
self.$video.position(data.position);
|
||||
self.$timeline.large.options({
|
||||
position: data.position
|
||||
});
|
||||
}
|
||||
|
||||
function getPlayerHeight() {
|
||||
return self.options.height -
|
||||
self.options.showControls * 104 - 1;
|
||||
|
|
@ -12129,13 +12163,13 @@ requires
|
|||
|
||||
function getPlayerWidth() {
|
||||
return self.options.width -
|
||||
self.options.showAnnotations *
|
||||
(self.options.showAnnotations && !self.fullscreen) *
|
||||
self.options.annotationsSize - 1;
|
||||
}
|
||||
|
||||
function getTimelineWidth() {
|
||||
return self.options.width -
|
||||
self.options.showAnnotations *
|
||||
(self.options.showAnnotations && !self.fullscreen) *
|
||||
self.options.annotationsSize - 40
|
||||
}
|
||||
|
||||
|
|
@ -12170,18 +12204,13 @@ requires
|
|||
|
||||
}
|
||||
|
||||
function play() {
|
||||
|
||||
}
|
||||
|
||||
function playing(event, data) {
|
||||
self.$timeline.large.options({
|
||||
position: data.position
|
||||
});
|
||||
}
|
||||
|
||||
function playInToOut() {
|
||||
|
||||
self.$timeline.small.options({
|
||||
position: data.position
|
||||
});
|
||||
}
|
||||
|
||||
function resizeAnnotations(event, data) {
|
||||
|
|
@ -12240,6 +12269,13 @@ requires
|
|||
});
|
||||
}
|
||||
|
||||
function toggleFullscreen() {
|
||||
self.fullscreen = !self.fullscreen;
|
||||
self.options.showAnnotations && that.$element.toggle(1);
|
||||
self.fullscreen && self.options.showControls && self.$panel.toggle(1);
|
||||
that.triggerEvent((self.fullscreen ? 'enter' : 'exit') + 'fullscreen', {});
|
||||
}
|
||||
|
||||
function toggleSize() {
|
||||
self.options.videoSize = self.options.videoSize == 'fit' ? 'fill' : 'fit';
|
||||
resizeVideo();
|
||||
|
|
|
|||
Loading…
Reference in a new issue