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', size: 'medium',
title: '', title: '',
type: 'text', // can be 'text' or 'image' type: 'text', // can be 'text' or 'image'
width: 'auto',
value: [], value: [],
width: 'auto'
}) })
// fixme: make default selection restorable // fixme: make default selection restorable
// or allow for extra action items below options // 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() { function setPositionMarker() {
var position = Math.round(self.options.position);
self.$positionMarker.css({ self.$positionMarker.css({
left: (self.options.position % self.options.width) - 1 + 'px', left: (position % self.options.width) - 1 + 'px',
top: (parseInt(self.options.position / self.options.width) * top: (parseInt(position / self.options.width) *
(self.height + self.margin) + 2) + 'px' (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 drag: drag
}); });
$.extend(self, { Ox.extend(self, {
$cuts: [], $cuts: [],
$pointMarker: {}, $pointMarker: {},
$tiles: {}, $tiles: {},
@ -95,9 +95,9 @@ Ox.LargeVideoTimeline = function(options, self) {
setPosition(); setPosition();
function click(event, e) { function click(event, e) {
self.options.position = Ox.limit( self.options.position = Ox.round(Ox.limit(
getPosition(e), 0, self.options.duration getPosition(e), 0, self.options.duration
); ), 3);
setPosition(); setPosition();
triggerPositionEvent(); triggerPositionEvent();
} }
@ -107,10 +107,10 @@ Ox.LargeVideoTimeline = function(options, self) {
} }
function drag(event, e) { 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, self.options.position + (self.drag.x - e.clientX) / self.fps,
0, self.options.duration 0, self.options.duration
); ), 3);
self.drag.x = e.clientX; self.drag.x = e.clientX;
setPosition(); setPosition();
triggerPositionEvent(); 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: [], $player: [],
$timeline: [], $timeline: [],
controlsHeight: 16, controlsHeight: 16,
@ -659,7 +659,7 @@ Ox.VideoEditor = function(options, self) {
}); });
} }
function changeTimelineLarge(event, data) { function changeTimelineLarge(data) {
self.options.position = data.position; self.options.position = data.position;
self.$player[0].options({ self.$player[0].options({
position: data.position position: data.position
@ -667,9 +667,12 @@ Ox.VideoEditor = function(options, self) {
self.$timeline[1].options({ self.$timeline[1].options({
position: data.position position: data.position
}); });
that.triggerEvent('position', {
position: self.options.position
});
} }
function changeTimelineSmall(event, data) { function changeTimelineSmall(data) {
self.options.position = data.position; self.options.position = data.position;
self.$player[0].options({ self.$player[0].options({
position: data.position position: data.position
@ -677,6 +680,9 @@ Ox.VideoEditor = function(options, self) {
self.$timeline[0].options({ self.$timeline[0].options({
position: data.position position: data.position
}); });
that.triggerEvent('position', {
position: self.options.position
});
} }
function find(query) { function find(query) {
@ -906,6 +912,10 @@ Ox.VideoEditor = function(options, self) {
if (self.options['in'] > self.options.out) { if (self.options['in'] > self.options.out) {
setPoint(point == 'in' ? 'out' : 'in', position); setPoint(point == 'in' ? 'out' : 'in', position);
} }
that.triggerEvent('points', {
'in': self.options['in'],
out: self.options.out
});
} }
function setPosition(position) { 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, annotationsSize: 256,
duration: 0, duration: 0,
height: 0, height: 0,
'in': 0,
loop: false, loop: false,
muted: false, muted: false,
out: 0,
paused: false, paused: false,
playInToOut: false, playInToOut: false,
points: [0, 0],
position: 0, position: 0,
poster: '', poster: '',
scaleToFill: false, scaleToFill: false,
@ -70,7 +71,9 @@ Ox.VideoPanelPlayer = function(options, self) {
enableKeyboard: true, enableKeyboard: true,
enableMouse: true, enableMouse: true,
height: getPlayerHeight(), height: getPlayerHeight(),
'in': self.options['in'],
muted: self.options.muted, muted: self.options.muted,
out: self.options.out,
paused: true, paused: true,
position: self.options.position, position: self.options.position,
scaleToFill: self.options.scaleToFill, scaleToFill: self.options.scaleToFill,

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

@ -42,7 +42,7 @@ Ox.VideoPlayer <f> Generic Video Player
poster <s|''> Poster URL poster <s|''> Poster URL
posterFrame <n|-1> Position of poster frame (sec) posterFrame <n|-1> Position of poster frame (sec)
preload <s|'auto'> 'auto', 'metadata' or 'none' preload <s|'auto'> 'auto', 'metadata' or 'none'
out <n|-1> Out point (sec) out <n> Out point (sec)
resolution <n|0> resolution resolution <n|0> resolution
scaleToFill <b|false> If true, scale to fill (otherwise, scale to fit) scaleToFill <b|false> If true, scale to fill (otherwise, scale to fit)
showControlsOnLoad <b|false> If true, show controls on load 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']; self.options.duration = self.out - self['in'];
} else { } else {
self['in'] = 0; 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); self.options.position = Ox.limit(self.options.position, self['in'], self.out);
@ -1446,12 +1446,20 @@ Ox.VideoPlayer = function(options, self) {
self.$video self.$video
.one({ .one({
load: function() { load: function() {
Ox.print('IMAGE LOADED', self.options.video(self.options.position, self.options.width))
hideLoadingIcon(); hideLoadingIcon();
} }
}) })
.attr({ .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]); marker.css(self.posterMarkerCSS[position]);
}); });
self.out = self.options.playInToOut && self.out = self.options.playInToOut && self.out < self.$video.duration()
self.out < self.$video.duration() ? ? self.out : self.$video.duration();
self.out : self.$video.duration();
self.options.duration = self.out - self['in']; self.options.duration = self.out - self['in'];
Ox.print('---------------------------------------- POS', self.options.position) Ox.print('---------------------------------------- POS', self.options.position)
//self.options.position = Ox.limit(self.options.position, self['in'], self.out); //self.options.position = Ox.limit(self.options.position, self['in'], self.out);
@ -1533,14 +1540,14 @@ Ox.VideoPlayer = function(options, self) {
function playing() { function playing() {
self.options.position = self.$video.currentTime(); self.options.position = self.$video.currentTime();
if ( if (
(self.options.playInToOut || self.playInToOut || self.isPlaylist) && (self.playInToOut && self.options.position >= self.options.out)
self.options.position >= self.out || (self.options.playInToOut && self.options.position >= self.out)
) { ) {
if (self.isPlaylist) { if (self.isPlaylist) {
self.$video.playNext(); self.$video.playNext();
} else { } else {
togglePaused(); togglePaused();
setPosition(self.out/*, 'video'*/); setPosition(self.playInToOut ? self.options.out : self.out/*, 'video'*/);
//ended(); //ended();
self.playInToOut = false; self.playInToOut = false;
} }
@ -1554,7 +1561,6 @@ Ox.VideoPlayer = function(options, self) {
function playInToOut() { function playInToOut() {
if (self.options.out > self.options['in']) { if (self.options.out > self.options['in']) {
Ox.print('inToOut', self.options['in'])
self.playInToOut = true; self.playInToOut = true;
setPosition(self.options['in']); setPosition(self.options['in']);
self.options.paused && togglePaused(); self.options.paused && togglePaused();