update clips view

This commit is contained in:
rolux 2011-10-19 10:47:33 +00:00
parent f97524cda7
commit 55f1dda921
4 changed files with 99 additions and 30 deletions

View file

@ -145,11 +145,11 @@ pandora.ui.clipList = function(videoRatio) {
playInToOut: true, playInToOut: true,
poster: '/' + item + '/' + height + 'p' + points[0] + '.jpg', poster: '/' + item + '/' + height + 'p' + points[0] + '.jpg',
rewind: true, rewind: true,
width: width,
video: partsAndPoints.parts.map(function(i) { video: partsAndPoints.parts.map(function(i) {
return '/' + item + '/96p' + (i + 1) return '/' + item + '/96p' + (i + 1)
+ '.' + pandora.user.videoFormat; + '.' + pandora.user.videoFormat;
}) }),
width: width
}) })
.addClass('OxTarget') .addClass('OxTarget')
.bindEvent({ .bindEvent({

View file

@ -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;
};

View file

@ -217,35 +217,13 @@ pandora.ui.list = function() {
width: Math.round(ratio >= 1 ? size : size * ratio) width: Math.round(ratio >= 1 ? size : size * ratio)
}, },
info: { info: {
css: {height: '192px'}, element: pandora.ui.itemClips,
element: Ox.IconList,
id: data.id, id: data.id,
options: { options: {
item: function(data, sort, size) { clips: 5,
size = size || 128; // fixme: is this needed? duration: data.duration,
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, id: data.id,
info: Ox.formatDuration(data['in']) + ' - ' + Ox.formatDuration(data.out), ratio: data.videoRatio
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'
} }
} }
}; };

View file

@ -15,7 +15,6 @@
"js/pandora/ui/deleteListDialog.js", "js/pandora/ui/deleteListDialog.js",
"js/pandora/ui/editor.js", "js/pandora/ui/editor.js",
"js/pandora/ui/eventsDialog.js", "js/pandora/ui/eventsDialog.js",
"js/pandora/ui/namesDialog.js",
"js/pandora/ui/titlesDialog.js", "js/pandora/ui/titlesDialog.js",
"js/pandora/ui/filter.js", "js/pandora/ui/filter.js",
"js/pandora/ui/filterDialog.js", "js/pandora/ui/filterDialog.js",
@ -31,12 +30,14 @@
"js/pandora/ui/info.js", "js/pandora/ui/info.js",
"js/pandora/ui/infoView.js", "js/pandora/ui/infoView.js",
"js/pandora/ui/item.js", "js/pandora/ui/item.js",
"js/pandora/ui/itemClips.js",
"js/pandora/ui/leftPanel.js", "js/pandora/ui/leftPanel.js",
"js/pandora/ui/list.js", "js/pandora/ui/list.js",
"js/pandora/ui/listDialog.js", "js/pandora/ui/listDialog.js",
"js/pandora/ui/mainPanel.js", "js/pandora/ui/mainPanel.js",
"js/pandora/ui/mediaView.js", "js/pandora/ui/mediaView.js",
"js/pandora/ui/menu.js", "js/pandora/ui/menu.js",
"js/pandora/ui/namesDialog.js",
"js/pandora/ui/navigationView.js", "js/pandora/ui/navigationView.js",
"js/pandora/ui/orderButton.js", "js/pandora/ui/orderButton.js",
"js/pandora/ui/placesDialog.js", "js/pandora/ui/placesDialog.js",