From 5a06413d5e6ce3e67cc0b141369f62f5e8b07017 Mon Sep 17 00:00:00 2001 From: rlx <0x0073@0x2620.org> Date: Tue, 18 Jan 2011 04:07:33 +0000 Subject: [PATCH] make small timeline work in player view --- build/js/ox.ui.js | 114 ++++++++++++++++++++++++++++++---------------- 1 file changed, 75 insertions(+), 39 deletions(-) diff --git a/build/js/ox.ui.js b/build/js/ox.ui.js index c5b5ff95..8b716b25 100644 --- a/build/js/ox.ui.js +++ b/build/js/ox.ui.js @@ -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 = $('') + .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();