select poster frame

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)
+            i['frames'] = []
-                           for p in range(0, len(self.poster_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)]
 

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
 

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(
+                            $('<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;
+
+};

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"
 ]