forked from 0x2620/pandora
update clips view
This commit is contained in:
rolux
parent
f97524cda7
commit
55f1dda921
4 changed files with 99 additions and 30 deletions
|
|
@ -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({
|
||||
|
|
|
|||
90
static/js/pandora/ui/itemClips.js
Normal file
90
static/js/pandora/ui/itemClips.js
Normal 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;
|
||||
|
||||
};
|
||||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
Loading…
Reference in a new issue