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

updating video elements (fixes bugs with positions and points)

Browse source
This commit is contained in:
rlx 2011-09-17 07:09:17 +00:00
parent 3c419d3ee7
commit 3f90e96c3a
6 changed files with 44 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
source/Ox.UI/js/Form/Ox.Select.js
View file

@ -38,8 +38,8 @@ Ox.Select = function(options, self) {
size: 'medium',
title: '',
type: 'text', // can be 'text' or 'image'
width: 'auto',
value: [],
width: 'auto'
})
// fixme: make default selection restorable
// or allow for extra action items below options

5
source/Ox.UI/js/Video/Ox.BlockVideoTimeline.js
View file

@ -199,9 +199,10 @@ Ox.BlockVideoTimeline = function(options, self) {
}
function setPositionMarker() {
var position = Math.round(self.options.position);
self.$positionMarker.css({
left: (self.options.position % self.options.width) - 1 + 'px',
top: (parseInt(self.options.position / self.options.width) *
left: (position % self.options.width) - 1 + 'px',
top: (parseInt(position / self.options.width) *
(self.height + self.margin) + 2) + 'px'
});
}

10
source/Ox.UI/js/Video/Ox.LargeVideoTimeline.js
View file

@ -37,7 +37,7 @@ Ox.LargeVideoTimeline = function(options, self) {
drag: drag
});
$.extend(self, {
Ox.extend(self, {
$cuts: [],
$pointMarker: {},
$tiles: {},
@ -95,9 +95,9 @@ Ox.LargeVideoTimeline = function(options, self) {
setPosition();
function click(event, e) {
self.options.position = Ox.limit(
self.options.position = Ox.round(Ox.limit(
getPosition(e), 0, self.options.duration
);
), 3);
setPosition();
triggerPositionEvent();
}
@ -107,10 +107,10 @@ Ox.LargeVideoTimeline = function(options, self) {
}
function drag(event, e) {
self.options.position = Ox.limit(
self.options.position = Ox.round(Ox.limit(
self.options.position + (self.drag.x - e.clientX) / self.fps,
0, self.options.duration
);
), 3);
self.drag.x = e.clientX;
setPosition();
triggerPositionEvent();

16
source/Ox.UI/js/Video/Ox.VideoEditor.js
View file

@ -135,7 +135,7 @@ Ox.VideoEditor = function(options, self) {
}
});
$.extend(self, {
Ox.extend(self, {
$player: [],
$timeline: [],
controlsHeight: 16,
@ -659,7 +659,7 @@ Ox.VideoEditor = function(options, self) {
});
}
function changeTimelineLarge(event, data) {
function changeTimelineLarge(data) {
self.options.position = data.position;
self.$player[0].options({
position: data.position
@ -667,9 +667,12 @@ Ox.VideoEditor = function(options, self) {
self.$timeline[1].options({
position: data.position
});
that.triggerEvent('position', {
position: self.options.position
});
}
function changeTimelineSmall(event, data) {
function changeTimelineSmall(data) {
self.options.position = data.position;
self.$player[0].options({
position: data.position
@ -677,6 +680,9 @@ Ox.VideoEditor = function(options, self) {
self.$timeline[0].options({
position: data.position
});
that.triggerEvent('position', {
position: self.options.position
});
}
function find(query) {
@ -906,6 +912,10 @@ Ox.VideoEditor = function(options, self) {
if (self.options['in'] > self.options.out) {
setPoint(point == 'in' ? 'out' : 'in', position);
}
that.triggerEvent('points', {
'in': self.options['in'],
out: self.options.out
});
}
function setPosition(position) {

5
source/Ox.UI/js/Video/Ox.VideoPanelPlayer.js
View file

@ -17,11 +17,12 @@ Ox.VideoPanelPlayer = function(options, self) {
annotationsSize: 256,
duration: 0,
height: 0,
'in': 0,
loop: false,
muted: false,
out: 0,
paused: false,
playInToOut: false,
points: [0, 0],
position: 0,
poster: '',
scaleToFill: false,
@ -70,7 +71,9 @@ Ox.VideoPanelPlayer = function(options, self) {
enableKeyboard: true,
enableMouse: true,
height: getPlayerHeight(),
'in': self.options['in'],
muted: self.options.muted,
out: self.options.out,
paused: true,
position: self.options.position,
scaleToFill: self.options.scaleToFill,

28
source/Ox.UI/js/Video/Ox.VideoPlayer.js
View file

@ -42,7 +42,7 @@ Ox.VideoPlayer <f> Generic Video Player
poster <s|''> Poster URL
posterFrame <n|-1> Position of poster frame (sec)
preload <s|'auto'> 'auto', 'metadata' or 'none'
out <n|-1> Out point (sec)
out <n> Out point (sec)
resolution <n|0> resolution
scaleToFill <b|false> If true, scale to fill (otherwise, scale to fit)
showControlsOnLoad <b|false> If true, show controls on load
@ -150,7 +150,7 @@ Ox.VideoPlayer = function(options, self) {
self.options.duration = self.out - self['in'];
} else {
self['in'] = 0;
self.out = self.options.duration || 86399;
self.out = self.options.duration || 86399; // fixme: ugly
}
self.options.position = Ox.limit(self.options.position, self['in'], self.out);
@ -1446,12 +1446,20 @@ Ox.VideoPlayer = function(options, self) {
self.$video
.one({
load: function() {
Ox.print('IMAGE LOADED', self.options.video(self.options.position, self.options.width))
hideLoadingIcon();
}
})
.attr({
src: self.options.video(self.options.position, self.options.width)
src: self.options.video(
// fixme: this keeps the frame from being beyond the end,
// but what should be avoided is setting position to a point
// beyond the beginning of the last frame
Math.min(
self.options.position,
Math.floor(self.options.duration * self.options.fps) / self.options.fps
),
self.options.width
)
});
}
@ -1473,9 +1481,8 @@ Ox.VideoPlayer = function(options, self) {
marker.css(self.posterMarkerCSS[position]);
});
self.out = self.options.playInToOut &&
self.out < self.$video.duration() ?
self.out : self.$video.duration();
self.out = self.options.playInToOut && self.out < self.$video.duration()
? self.out : self.$video.duration();
self.options.duration = self.out - self['in'];
Ox.print('---------------------------------------- POS', self.options.position)
//self.options.position = Ox.limit(self.options.position, self['in'], self.out);
@ -1533,14 +1540,14 @@ Ox.VideoPlayer = function(options, self) {
function playing() {
self.options.position = self.$video.currentTime();
if (
(self.options.playInToOut || self.playInToOut || self.isPlaylist) &&
self.options.position >= self.out
(self.playInToOut && self.options.position >= self.options.out)
|| (self.options.playInToOut && self.options.position >= self.out)
) {
if (self.isPlaylist) {
self.$video.playNext();
} else {
togglePaused();
setPosition(self.out/*, 'video'*/);
setPosition(self.playInToOut ? self.options.out : self.out/*, 'video'*/);
//ended();
self.playInToOut = false;
}
@ -1554,7 +1561,6 @@ Ox.VideoPlayer = function(options, self) {
function playInToOut() {
if (self.options.out > self.options['in']) {
Ox.print('inToOut', self.options['in'])
self.playInToOut = true;
setPosition(self.options['in']);
self.options.paused && togglePaused();