From 3f90e96c3a2fcb6c43d38a7edd5207b84b02af41 Mon Sep 17 00:00:00 2001 From: rlx <0x0073@0x2620.org> Date: Sat, 17 Sep 2011 07:09:17 +0000 Subject: [PATCH] updating video elements (fixes bugs with positions and points) --- source/Ox.UI/js/Form/Ox.Select.js | 2 +- .../Ox.UI/js/Video/Ox.BlockVideoTimeline.js | 5 ++-- .../Ox.UI/js/Video/Ox.LargeVideoTimeline.js | 10 +++---- source/Ox.UI/js/Video/Ox.VideoEditor.js | 16 ++++++++-- source/Ox.UI/js/Video/Ox.VideoPanelPlayer.js | 5 +++- source/Ox.UI/js/Video/Ox.VideoPlayer.js | 30 +++++++++++-------- 6 files changed, 44 insertions(+), 24 deletions(-) diff --git a/source/Ox.UI/js/Form/Ox.Select.js b/source/Ox.UI/js/Form/Ox.Select.js index af4c88f0..653dcd92 100644 --- a/source/Ox.UI/js/Form/Ox.Select.js +++ b/source/Ox.UI/js/Form/Ox.Select.js @@ -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 diff --git a/source/Ox.UI/js/Video/Ox.BlockVideoTimeline.js b/source/Ox.UI/js/Video/Ox.BlockVideoTimeline.js index 44f89bb3..87d6ecb2 100644 --- a/source/Ox.UI/js/Video/Ox.BlockVideoTimeline.js +++ b/source/Ox.UI/js/Video/Ox.BlockVideoTimeline.js @@ -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' }); } diff --git a/source/Ox.UI/js/Video/Ox.LargeVideoTimeline.js b/source/Ox.UI/js/Video/Ox.LargeVideoTimeline.js index 6b667027..0fdfa1f6 100644 --- a/source/Ox.UI/js/Video/Ox.LargeVideoTimeline.js +++ b/source/Ox.UI/js/Video/Ox.LargeVideoTimeline.js @@ -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(); diff --git a/source/Ox.UI/js/Video/Ox.VideoEditor.js b/source/Ox.UI/js/Video/Ox.VideoEditor.js index 2ed45799..d6e48d71 100644 --- a/source/Ox.UI/js/Video/Ox.VideoEditor.js +++ b/source/Ox.UI/js/Video/Ox.VideoEditor.js @@ -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) { diff --git a/source/Ox.UI/js/Video/Ox.VideoPanelPlayer.js b/source/Ox.UI/js/Video/Ox.VideoPanelPlayer.js index 1b02f689..69238fd9 100644 --- a/source/Ox.UI/js/Video/Ox.VideoPanelPlayer.js +++ b/source/Ox.UI/js/Video/Ox.VideoPanelPlayer.js @@ -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, diff --git a/source/Ox.UI/js/Video/Ox.VideoPlayer.js b/source/Ox.UI/js/Video/Ox.VideoPlayer.js index b4a8053b..35bf0048 100644 --- a/source/Ox.UI/js/Video/Ox.VideoPlayer.js +++ b/source/Ox.UI/js/Video/Ox.VideoPlayer.js @@ -42,7 +42,7 @@ Ox.VideoPlayer Generic Video Player poster Poster URL posterFrame Position of poster frame (sec) preload 'auto', 'metadata' or 'none' - out Out point (sec) + out Out point (sec) resolution resolution scaleToFill If true, scale to fill (otherwise, scale to fit) showControlsOnLoad 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();