diff --git a/pandora/item/models.py b/pandora/item/models.py index a1be0d10..97da1a39 100644 --- a/pandora/item/models.py +++ b/pandora/item/models.py @@ -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)] diff --git a/pandora/item/views.py b/pandora/item/views.py index 64e09beb..8eb6b8d4 100644 --- a/pandora/item/views.py +++ b/pandora/item/views.py @@ -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 diff --git a/static/js/pandora/ui/framesDialog.js b/static/js/pandora/ui/framesDialog.js new file mode 100644 index 00000000..53cf34da --- /dev/null +++ b/static/js/pandora/ui/framesDialog.js @@ -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( + $('') + .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; + +}; diff --git a/static/json/pandora.json b/static/json/pandora.json index 4b015ae8..1c28eedb 100644 --- a/static/json/pandora.json +++ b/static/json/pandora.json @@ -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" ]