update clips view

static/js/pandora/ui/clipList.js

@@ -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({

static/js/pandora/ui/itemClips.js

@@ -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;
+
+};

static/js/pandora/ui/list.js

@@ -217,35 +217,13 @@ pandora.ui.list = function() {
                         width: Math.round(ratio >= 1 ? size : size * ratio)
                     },
                     info: {
-                        css: {height: '192px'},
+                        element: pandora.ui.itemClips,
-                        element: Ox.IconList,
                         id: data.id,
                         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'
                         }
                     }
                 };

static/json/pandora.json

@@ -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",