forked from 0x2620/pandora
update clips view
This commit is contained in:
parent
f97524cda7
commit
55f1dda921
4 changed files with 99 additions and 30 deletions
|
@ -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({
|
||||||
|
|
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)
|
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),
|
id: data.id,
|
||||||
height = data.videoRatio > 1 ? Math.round(size / data.videoRatio) : size;
|
ratio: data.videoRatio
|
||||||
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'
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
@ -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",
|
||||||
|
|
Loading…
Reference in a new issue