select poster frame
This commit is contained in:
j
parent
41ae23a62f
commit
5e331c6d31
4 changed files with 141 additions and 7 deletions
|
|
@ -395,8 +395,23 @@ class Item(models.Model):
|
|||
if not keys or 'posters' in keys:
|
||||
i['posters'] = self.get_posters()
|
||||
if not keys or 'frames' in keys:
|
||||
i['frames'] = ['/%s/frame/poster/%d.jpg' %(self.itemId, p)
|
||||
for p in range(0, len(self.poster_frames()))]
|
||||
i['frames'] = []
|
||||
frames = self.poster_frames()
|
||||
if frames:
|
||||
pos = self.poster_frame
|
||||
if pos < 0:
|
||||
pos = 0
|
||||
p = 0
|
||||
for f in frames:
|
||||
i['frames'].append({
|
||||
'id': p,
|
||||
'position': f['position'],
|
||||
'selected': p == pos,
|
||||
'url': '/%s/frame/poster/%d.jpg' %(self.itemId, p),
|
||||
'height': f['height'],
|
||||
'width': f['width']
|
||||
})
|
||||
p += 1
|
||||
if keys:
|
||||
info = {}
|
||||
for key in keys:
|
||||
|
|
@ -863,17 +878,26 @@ class Item(models.Model):
|
|||
|
||||
def poster_frames(self):
|
||||
frames = []
|
||||
offset = 0
|
||||
for f in self.main_videos():
|
||||
for ff in f.frames.all():
|
||||
frames.append(ff.frame.path)
|
||||
frames.append({
|
||||
'position': offset + ff.position,
|
||||
'path': ff.frame.path,
|
||||
'width': ff.frame.width,
|
||||
'height': ff.frame.height
|
||||
})
|
||||
offset += f.duration
|
||||
return frames
|
||||
|
||||
def get_poster_frame_path(self):
|
||||
frames = self.poster_frames()
|
||||
if self.poster_frame >= 0:
|
||||
if frames:
|
||||
return frames[int(self.poster_frame)]['path']
|
||||
size = int(settings.VIDEO_PROFILE.split('.')[0][:-1])
|
||||
return self.frame(self.poster_frame, size)
|
||||
|
||||
frames = self.poster_frames()
|
||||
if frames:
|
||||
return frames[int(len(frames)/2)]
|
||||
|
||||
|
|
|
|||
|
|
@ -560,9 +560,8 @@ def poster_frame(request, id, position):
|
|||
item = get_object_or_404(models.Item, itemId=id)
|
||||
position = int(position)
|
||||
frames = item.poster_frames()
|
||||
print frames, position
|
||||
if frames and len(frames) > position:
|
||||
frame = frames[position]
|
||||
frame = frames[position]['path']
|
||||
return HttpFileResponse(frame, content_type='image/jpeg')
|
||||
raise Http404
|
||||
|
||||
|
|
|
|||
110
static/js/pandora/ui/framesDialog.js
Normal file
110
static/js/pandora/ui/framesDialog.js
Normal file
|
|
@ -0,0 +1,110 @@
|
|||
pandora.ui.framesDialog = function(id) {
|
||||
|
||||
var height = Math.round(window.innerHeight * 0.9),
|
||||
width = Math.round(window.innerWidth * 0.5),
|
||||
listWidth = 144 + Ox.UI.SCROLLBAR_SIZE,
|
||||
previewWidth = width - listWidth,
|
||||
previewHeight = height - 48,
|
||||
previewRatio = previewWidth / previewHeight,
|
||||
$preview = Ox.Element(),
|
||||
$panel = Ox.SplitPanel({
|
||||
elements: [
|
||||
{
|
||||
element: Ox.Element(),
|
||||
size: listWidth
|
||||
},
|
||||
{
|
||||
element: $preview
|
||||
}
|
||||
],
|
||||
orientation: 'horizontal'
|
||||
}),
|
||||
that = Ox.Dialog({
|
||||
buttons: [
|
||||
Ox.Button({
|
||||
id: 'done',
|
||||
title: 'Done'
|
||||
}).bindEvent({
|
||||
click: function() {
|
||||
that.close();
|
||||
}
|
||||
})
|
||||
],
|
||||
content: $panel,
|
||||
height: height,
|
||||
padding: 0,
|
||||
title: 'Manage Posters',
|
||||
width: width
|
||||
});
|
||||
|
||||
pandora.api.get({
|
||||
id: id,
|
||||
keys: ['frames']
|
||||
}, function(result) {
|
||||
var frames = result.data.frames,
|
||||
selected = [frames.filter(function(frame) {
|
||||
return frame.selected;
|
||||
})[0]['position']],
|
||||
$list = Ox.IconList({
|
||||
item: function(data, sort, size) {
|
||||
console.log(data)
|
||||
var ratio = data.width / data.height;
|
||||
size = size || 128;
|
||||
return {
|
||||
height: ratio <= 1 ? size : size / ratio,
|
||||
id: data['id'],
|
||||
title: Ox.formatDuration(data['position'], 'short'),
|
||||
info: '',
|
||||
url: data.url,
|
||||
width: ratio >= 1 ? size : size * ratio
|
||||
};
|
||||
},
|
||||
items: frames,
|
||||
keys: ['id', 'position', 'width', 'height', 'url'],
|
||||
max: 1,
|
||||
min: 1,
|
||||
orientation: 'vertical',
|
||||
selected: selected,
|
||||
size: 128,
|
||||
sort: [{key: 'position', operator: '+'}],
|
||||
unique: 'id'
|
||||
})
|
||||
.css({background: 'rgb(16, 16, 16)'})
|
||||
.bindEvent({
|
||||
select: function(event) {
|
||||
var position = event.ids[0],
|
||||
frame = frames.filter(function(frame) {
|
||||
return frame.id == position;
|
||||
})[0],
|
||||
frameRatio = frame.width / frame.height,
|
||||
frameWidth = frameRatio > previewRatio ? previewWidth : previewHeight * frameRatio,
|
||||
frameHeight = frameRatio < previewRatio ? previewHeight : previewWidth / frameRatio;
|
||||
$preview.html(
|
||||
$('<img>')
|
||||
.attr({
|
||||
src: frame.url
|
||||
})
|
||||
.css({
|
||||
position: 'absolute',
|
||||
left: 0,
|
||||
top: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
width: frameWidth + 'px',
|
||||
height: frameHeight + 'px',
|
||||
margin: 'auto'
|
||||
})
|
||||
);
|
||||
pandora.api.setPosterFrame({
|
||||
id: id,
|
||||
position: position
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
$panel.replaceElement(0, $list);
|
||||
});
|
||||
|
||||
return that;
|
||||
|
||||
};
|
||||
|
|
@ -40,5 +40,6 @@
|
|||
"js/pandora/ui/appPanel.js",
|
||||
"js/pandora/ui/flipbook.js",
|
||||
"js/pandora/ui/editor.js",
|
||||
"js/pandora/ui/postersDialog.js"
|
||||
"js/pandora/ui/postersDialog.js",
|
||||
"js/pandora/ui/framesDialog.js"
|
||||
]
|
||||
|
|
|
|||
Loading…
Reference in a new issue