From 55f1dda9211bfe786ee932cb858e390d788e1147 Mon Sep 17 00:00:00 2001 From: rolux Date: Wed, 19 Oct 2011 10:47:33 +0000 Subject: [PATCH] update clips view --- static/js/pandora/ui/clipList.js | 4 +- static/js/pandora/ui/itemClips.js | 90 +++++++++++++++++++++++++++++++ static/js/pandora/ui/list.js | 32 ++--------- static/json/pandora.json | 3 +- 4 files changed, 99 insertions(+), 30 deletions(-) create mode 100644 static/js/pandora/ui/itemClips.js diff --git a/static/js/pandora/ui/clipList.js b/static/js/pandora/ui/clipList.js index d63a8fcbf..2e4c254a6 100644 --- a/static/js/pandora/ui/clipList.js +++ b/static/js/pandora/ui/clipList.js @@ -145,11 +145,11 @@ pandora.ui.clipList = function(videoRatio) { playInToOut: true, poster: '/' + item + '/' + height + 'p' + points[0] + '.jpg', rewind: true, - width: width, video: partsAndPoints.parts.map(function(i) { return '/' + item + '/96p' + (i + 1) + '.' + pandora.user.videoFormat; - }) + }), + width: width }) .addClass('OxTarget') .bindEvent({ diff --git a/static/js/pandora/ui/itemClips.js b/static/js/pandora/ui/itemClips.js new file mode 100644 index 000000000..473630e0a --- /dev/null +++ b/static/js/pandora/ui/itemClips.js @@ -0,0 +1,90 @@ +pandora.ui.itemClips = function(options) { + + var self = {}, + that = Ox.Element() + .css({ + height: '192px', + margin: '4px' + }) + .bindEvent({ + mousedown: mousedown + }); + + self.options = Ox.extend({ + clips: 5, + duration: 0, + id: '', + ratio: 8/5 + }, options); + + self.clips = pandora.getClipPoints(self.options.duration, self.options.clips); + self.size = 128; + self.width = self.options.ratio > 1 ? self.size : Math.round(self.size * self.options.ratio); + self.height = self.options.ratio > 1 ? Math.round(self.size / self.options.ratio) : self.size; + + self.clips.forEach(function(clip, i) { + var id = self.options.id + '/' + clip['in'], + url = '/' + self.options.id + '/' + self.height + 'p' + clip['in'] + '.jpg', + $item = Ox.IconItem({ + imageHeight: self.height, + imageWidth: self.width, + id: id, + info: Ox.formatDuration(clip['in']) + ' - ' + Ox.formatDuration(clip.out), + title: '', + url: url, + }) + .addClass('OxInfoIcon') + .css({ + float: 'left', + margin: '2px' + }) + .data({'in': clip['in'], out: clip.out}); + $item.$element.find('.OxTarget').addClass('OxSpecialTarget'); + that.append($item); + }); + + function mousedown(data) { + Ox.print('MOUSEDOWN', data) + var $img, $item, $target = $(data.target), $video, points; + if ($target.is('.OxSpecialTarget')) { + $item = $target.parent().parent(); + $img = $item.find('.OxIcon > img'); + $video = $item.find('.OxIcon > .OxVideoPlayer'); + points = [$item.data('in'), $item.data('out')]; + if ($img.length) { + pandora.api.get({id: self.options.id, keys: ['durations']}, function(result) { + var partsAndPoints = pandora.getVideoPartsAndPoints( + result.data.durations, points + ), + $player = Ox.VideoPlayer({ + height: self.height, + 'in': partsAndPoints.points[0], + out: partsAndPoints.points[1], + //paused: true, + playInToOut: true, + poster: '/' + self.options.id + '/' + self.height + 'p' + points[0] + '.jpg', + rewind: true, + video: partsAndPoints.parts.map(function(i) { + return '/' + self.options.id + '/96p' + (i + 1) + + '.' + pandora.user.videoFormat; + }), + width: self.width + }) + .addClass('OxTarget OxSpecialTarget') + .bindEvent({ + doubleclick: function() { + + }, + singleclick: function() { + $player.togglePaused(); + } + }); + $img.replaceWith($player.$element); + }); + } + } + } + + return that; + +}; \ No newline at end of file diff --git a/static/js/pandora/ui/list.js b/static/js/pandora/ui/list.js index a9cefc72e..0a385e353 100644 --- a/static/js/pandora/ui/list.js +++ b/static/js/pandora/ui/list.js @@ -217,35 +217,13 @@ pandora.ui.list = function() { width: Math.round(ratio >= 1 ? size : size * ratio) }, info: { - css: {height: '192px'}, - element: Ox.IconList, + element: pandora.ui.itemClips, id: data.id, options: { - item: function(data, sort, size) { - size = size || 128; // fixme: is this needed? - var width = data.videoRatio > 1 ? size : Math.round(size * data.videoRatio), - height = data.videoRatio > 1 ? Math.round(size / data.videoRatio) : size; - url = '/' + data.id.split('/')[0] + '/' + height + 'p' + data['in'] + '.jpg'; - return { - height: height, - id: data.id, - info: Ox.formatDuration(data['in']) + ' - ' + Ox.formatDuration(data.out), - title: '', - url: url, - width: width - }; - }, - items: pandora.getClipPoints(data.duration, 5).map(function(points) { - return Ox.extend(points, { - id: data.id + '/' + points['in'], - videoRatio: data.videoRatio - }); - }), - max: 1, - orientation: 'horizontal', - size: 128, - sort: [{key: 'in', operator: '+'}], - unique: 'id' + clips: 5, + duration: data.duration, + id: data.id, + ratio: data.videoRatio } } }; diff --git a/static/json/pandora.json b/static/json/pandora.json index 4389f04e1..92ec261f1 100644 --- a/static/json/pandora.json +++ b/static/json/pandora.json @@ -15,7 +15,6 @@ "js/pandora/ui/deleteListDialog.js", "js/pandora/ui/editor.js", "js/pandora/ui/eventsDialog.js", - "js/pandora/ui/namesDialog.js", "js/pandora/ui/titlesDialog.js", "js/pandora/ui/filter.js", "js/pandora/ui/filterDialog.js", @@ -31,12 +30,14 @@ "js/pandora/ui/info.js", "js/pandora/ui/infoView.js", "js/pandora/ui/item.js", + "js/pandora/ui/itemClips.js", "js/pandora/ui/leftPanel.js", "js/pandora/ui/list.js", "js/pandora/ui/listDialog.js", "js/pandora/ui/mainPanel.js", "js/pandora/ui/mediaView.js", "js/pandora/ui/menu.js", + "js/pandora/ui/namesDialog.js", "js/pandora/ui/navigationView.js", "js/pandora/ui/orderButton.js", "js/pandora/ui/placesDialog.js",