From 6c013ebc921c7dfb37d3ba21cdb6ec25987c8fab Mon Sep 17 00:00:00 2001
From: j <j@mailb.org>
Date: Thu, 15 Sep 2016 15:20:24 +0000
Subject: [PATCH] first version of new upload interface

---
 pandora/config.indiancinema.jsonc  |   1 +
 pandora/config.padma.jsonc         |   1 +
 pandora/config.pandora.jsonc       |   1 +
 static/js/addFilesDialog.js        | 177 ++++++++++++++++++++++
 static/js/addItemDialog.js         | 233 +++++++++++++++++++++++++++++
 static/js/allItems.js              |  10 +-
 static/js/deleteItemDialog.js      |  41 -----
 static/js/deleteItemsDialog.js     |  55 +++++++
 static/js/editItemDialog.js        |  12 ++
 static/js/infoView.0xdb.js         |   4 +-
 static/js/infoView.indiancinema.js |   9 +-
 static/js/infoView.js              |   4 +-
 static/js/infoView.padma.js        |   4 +-
 static/js/list.js                  |   8 +-
 static/js/mainMenu.js              |  70 +++++++--
 static/js/mediaExistsDialog.js     |  80 ++++++++++
 static/js/mediaView.js             |   4 +-
 static/js/tasksDialog.js           | 230 ++++++++++++++++++++++++----
 static/js/uploadButton.js          |  27 ++++
 static/js/utils.js                 |  97 +++++++++++-
 20 files changed, 966 insertions(+), 102 deletions(-)
 create mode 100644 static/js/addFilesDialog.js
 create mode 100644 static/js/addItemDialog.js
 delete mode 100644 static/js/deleteItemDialog.js
 create mode 100644 static/js/deleteItemsDialog.js
 create mode 100644 static/js/editItemDialog.js
 create mode 100644 static/js/mediaExistsDialog.js
 create mode 100644 static/js/uploadButton.js

diff --git a/pandora/config.indiancinema.jsonc b/pandora/config.indiancinema.jsonc
index 2eacde6f..f276ffe7 100644
--- a/pandora/config.indiancinema.jsonc
+++ b/pandora/config.indiancinema.jsonc
@@ -852,6 +852,7 @@
     The plug-in architecture is not yet finalized, documentation forthcoming.
     */
     "menuExtras": [
+        "upload",
         "user",
         //"locale",
         "reload"
diff --git a/pandora/config.padma.jsonc b/pandora/config.padma.jsonc
index 1105efe2..a14f73f0 100644
--- a/pandora/config.padma.jsonc
+++ b/pandora/config.padma.jsonc
@@ -738,6 +738,7 @@
     The plug-in architecture is not yet finalized, documentation forthcoming.
     */
     "menuExtras": [
+        "upload",
         "user",
         //"locale",
         "reload"
diff --git a/pandora/config.pandora.jsonc b/pandora/config.pandora.jsonc
index af2f358a..3a29ae96 100644
--- a/pandora/config.pandora.jsonc
+++ b/pandora/config.pandora.jsonc
@@ -672,6 +672,7 @@ examples (config.SITENAME.jsonc) that are part of this pan.do/ra distribution.
     The plug-in architecture is not yet finalized, documentation forthcoming.
     */
     "menuExtras": [
+        "upload",
         "user",
         // "locale",
         "reload"
diff --git a/static/js/addFilesDialog.js b/static/js/addFilesDialog.js
new file mode 100644
index 00000000..c7966b71
--- /dev/null
+++ b/static/js/addFilesDialog.js
@@ -0,0 +1,177 @@
+'use strict';
+
+pandora.ui.addFilesDialog = function(options) {
+
+    var $button = Ox.Button({
+        id: 'add',
+        title: Ox._(Ox.toTitleCase(options.action))
+    }).bindEvent({
+        click: function() {
+            $button.options({disabled: true});
+            (options.action == 'upload' ? uploadVideos : importVideos)(function() {
+                that.close();
+                pandora.ui.tasksDialog({
+                    tasks: options.action == 'import' ? 'all' : 'uploads'
+                }).open();
+            });
+        }
+    });
+
+    var $list = Ox.TableList({
+        columns: [
+            {
+                id: 'id',
+                title: Ox._('ID')
+            },
+            {
+                id: 'index',
+                title: Ox._('Index')
+            },
+            {
+                format: function(value) {
+                    return Ox.encodeHTMLEntities(value);
+                },
+                id: 'title',
+                title: Ox._('Title'),
+                visible: true,
+                width: 256
+            },
+            {
+                format: function(value, data) {
+                    return data.width && data.height
+                        ? data.width + ' × ' + data.height + ' px'
+                        : Ox._('unknown')
+                },
+                id: 'resolution',
+                title: Ox._('Resolution'),
+                align: 'right',
+                visible: true,
+                width: 128
+            },
+            {
+                format: function(value) {
+                    return value ? Ox.formatDuration(value) : Ox._('unknown');
+                },
+                id: 'duration',
+                title: Ox._('Duration'),
+                align: 'right',
+                visible: true,
+                width: 128
+            },
+            {
+                format: function(value) {
+                    return value ? Ox.formatValue(value, 'B') : Ox._('unknown');
+                },
+                id: 'size',
+                title: Ox._('Size'),
+                align: 'right',
+                visible: true,
+                width: 128
+            },
+            {
+                id: 'width',
+                title: Ox._('Width')
+            },
+            {
+                id: 'height',
+                title: Ox._('Height')
+            }
+        ],
+        columnsResizable: true,
+        columnsVisible: true,
+        items: options.items.map(function(value, index) {
+            return Ox.extend(value, {index: index})
+        }),
+        scrollbarsVisible: true,
+        sort: [{key: 'index', operator: '+'}],
+        sortable: true
+    }).css({
+        height: '320px',
+        width: '640px'
+    });
+
+    var that = Ox.Dialog({
+        buttons: [$button],
+        closeButton: true,
+        content: $list,
+        height: 320,
+        removeOnClose: true,
+        title: Ox._('{0} Video Files', [Ox.toTitleCase(options.action)]),
+        width: 640
+    });
+
+    var $select = Ox.Select({
+        items: [
+            {
+                id: 'one',
+                title: Ox._(
+                    'Create one {0} with multiple parts',
+                    [pandora.site.itemName.singular.toLowerCase()]
+                )
+            },
+            {
+                id: 'multiple',
+                title: Ox._(
+                    'Create multiple {0}',
+                    [pandora.site.itemName.plural.toLowerCase()]
+                )
+            }
+        ],
+        width: 256
+    }).css({
+        display: options.items.length > 1 ? 'block' : 'none',
+        margin: '4px'
+    });
+    $($select.find('.OxButton')[0]).css({margin: '-1px'});
+    $button.parent().parent().append($select);
+
+    function importVideos(callback) {
+        var id;
+        Ox.serialForEach(options.items, function(item, index, items, callback) {
+            var isNewItem = index == 0 || $select.value() == 'multiple';
+            (isNewItem ? pandora.api.add : Ox.noop)({
+                title: item.title
+            }, function(result) {
+                if (isNewItem) {
+                    id = result.data.id;
+                }
+                (isNewItem ? pandora.api.edit : Ox.noop)(Ox.extend(
+                    Ox.filter(item, function(value, key) {
+                        return key != 'title';
+                    }),
+                    {'id': id}
+                ), function(result) {
+                    pandora.api.addMediaUrl({
+                        url: item.url,
+                        item: id
+                    }, callback);
+                });
+            });            
+        }, callback);
+    }
+
+    function uploadVideos(callback) {
+        var id;
+        Ox.serialForEach(options.items, function(item, index, items, callback) {
+            var isNewItem = index == 0 || $select.value() == 'multiple';
+            var title = items[$select.value() == 'one' ? 0 : index].title;
+            (isNewItem ? pandora.api.add : Ox.noop)({
+                title: title
+            }, function(result) {
+                if (isNewItem) {
+                    id = result.data.id;
+                }
+                pandora.uploadQueue.add(Ox.extend(item, {
+                    item: {
+                        id: id,
+                        title: title
+                    } 
+                }));
+                callback();
+            });            
+        }, callback);
+    }
+
+    return that;
+
+};
diff --git a/static/js/addItemDialog.js b/static/js/addItemDialog.js
new file mode 100644
index 00000000..d0a1fafc
--- /dev/null
+++ b/static/js/addItemDialog.js
@@ -0,0 +1,233 @@
+'use strict';
+
+pandora.ui.addItemDialog = function(options) {
+    options = options || {};
+
+    var input = '';
+
+    var selected = options.selected ? options.selected : 'upload';
+
+    var $button;
+
+    var $panel = Ox.TabPanel({
+        content: function(id) {
+            var $content = Ox.Element().css({padding: '8px'});
+            var $input = Ox.Input({
+                changeOnKeypress: true,
+                disabled: id == 'upload',
+                label: Ox._(id == 'add' ? 'Title' : id == 'upload' ? 'File': 'URL'),
+                labelWidth: 64,
+                placeholder: id == 'import' ? Ox._('YouTube, Vimeo, etc.') : '',
+                width: 512
+            }).css({
+                margin: '8px'
+            }).bindEvent({
+                change: function(data) {
+                    $button.options({disabled: !data.value});
+                    input = data.value;
+                }
+            }).appendTo($content);
+            return $content;
+        },
+        tabs: [
+            {
+                id: 'add',
+                title: Ox._('Add {0}', [pandora.site.itemName.singular]),
+                disabled: pandora.site.itemRequiresVideo,
+                selected: selected == 'add'
+            },
+            {
+                id: 'upload',
+                title: Ox._('Upload Video Files'),
+                selected: selected == 'upload'
+            },
+            {
+                id: 'import',
+                title: Ox._('Import Video Files'),
+                disabled: !pandora.site.capabilities.canImportItems[pandora.user.level],
+                selected: selected == 'import'
+            }
+        ]
+    }).bindEvent({
+        change: function(data) {
+            selected = data.selected;
+            that.options({buttons: [createButton()]});
+        }
+    });
+
+    var $screen = Ox.LoadingScreen({
+        size: 16
+    });
+
+    var that = Ox.Dialog({
+        buttons: [createButton()],
+        closeButton: true,
+        content: $panel,
+        height: 72,
+        removeOnClose: true,
+        title: Ox._('Add {0}', [pandora.site.itemName.singular]),
+        width: 544
+    });
+
+    function createButton() {
+        $button = Ox[selected == 'upload' ? 'FileButton' : 'Button']({
+            disabled: selected != 'upload',
+            id: selected,
+            title: selected == 'add'
+                ? Ox._('Add {0} Without Video Files', [pandora.site.itemName.singular])
+                : selected == 'upload' ? Ox._('Select Video Files')
+                : Ox._('Import Video Files'),
+            width: selected == 'add' ? 192 : 128
+        }).bindEvent({
+            click: function(data) {
+                if (selected == 'add') {
+                    that.options({content: $screen.start()});
+                    $button.options({disabled: true});
+                    pandora.api.add({title: input}, function(result) {
+                        Ox.Request.clearCache('find');
+                        $screen.stop();
+                        that.close();
+                        pandora.UI.set({
+                            item: result.data.id,
+                            itemView: 'info'
+                        });
+                    });
+                } else if (selected == 'upload' && data.files.length > 0) {
+                    that.options({content: $screen.start()});
+                    $button.options({disabled: true});
+                    Ox.serialMap(data.files, function(file, index, files, callback) {
+                        getFileInfo(file, function(info) {
+                            callback(Ox.extend(info, {file: file}));
+                        });
+                    }, onInfo);
+                } else {
+                    that.options({content: $screen.start()});
+                    $button.options({disabled: true});
+                    pandora.api.getMediaUrlInfo({
+                        url: input
+                    }, function(result) {
+                        onInfo(result.data.items);
+                    });
+                }
+            }
+        });
+        return $button;
+    }
+
+    function getFileInfo(file, callback) {
+        Ox.oshash(file, function(oshash) {
+            var $video = $('<video>'),
+                url = URL.createObjectURL(file),
+                info = {
+                    audio: [],
+                    direct: false,
+                    oshash: oshash,
+                    name: file.name,
+                    size: file.size,
+                    title: file.name.split('.').slice(0, -1).join('.'),
+                    video: []
+                };
+            $video.one('error', function(event) {
+                callback(info);
+            });
+            $video.one('loadedmetadata', function(event) {
+                info.duration = $video[0].duration;
+                if ($video[0].videoHeight > 0) {
+                    info.width = $video[0].videoWidth;
+                    info.height = $video[0].videoHeight;
+                }
+                if (info.duration) {
+                    info.bitrate = info.size * 8 / info.duration / 1000;
+                }
+                callback(info);
+            });
+            $video[0].src = url;
+        });
+    }
+
+    function getVideoInfo(info) {
+        var values = Ox.map(pandora.site.importMetadata, function(value, key) {
+            var isArray = Ox.isArray(
+                Ox.getObjectById(pandora.site.itemKeys, key).type
+            );
+            if (isArray && value == '{tags}') {
+                value = info.tags;
+            } else {
+                [
+                    'date', 'description', 'id', 'tags',
+                    'title', 'uploader', 'url'
+                ].forEach(function(infoKey) {
+                    var infoValue = info[infoKey] || '';
+                    if (key == 'year' && infoKey == 'date') {
+                        infoValue = infoValue.substr(0, 4);
+                    }
+                    if (infoKey == 'tags') {
+                        infoValue = infoValue.join(', ');
+                    }
+                    value = value.replace(
+                        new RegExp('\{' + infoKey + '\}', 'g'), infoValue
+                    );
+                });
+                // For example: director -> uploader
+                if (isArray) {
+                    value = [value];
+                }
+            }
+            return value;
+        });
+    }
+
+    function onInfo(items) {
+        // FIXME: what about pending/aborted uploads
+        pandora.api.findMedia({
+            keys: ['id', 'item', 'url'],
+            query: {
+                conditions: selected == 'upload' ? items.map(function(item) {
+                    return {key: 'oshash', operator: '==', value: item.oshash};
+                }) : items.map(function(item) {
+                    return {key: 'url', operator: '==', value: item.url};
+                }),
+                operator: '|'
+            }
+        }, function(result) {
+            if (result.data.items.length) {
+                Ox.serialMap(result.data.items, function(item, index, items, callback) {
+                    pandora.api.get({
+                        id: item.item,
+                        keys: ['id', 'title']
+                    }, function(result) {
+                        callback(Ox.extend(item, {
+                            itemID: result.data.id,
+                            itemTitle: result.data.title
+                        }));
+                    })
+                }, function(media) {
+                    media = media.map(function(media) {
+                        return Ox.extend(media, Ox.getObject(
+                            items,
+                            selected == 'upload' ? 'oshash' : 'url',
+                            media[selected == 'upload' ? 'id' : 'url']
+                        ));
+                    });
+                    $screen.stop();
+                    that.close();
+                    pandora.ui.mediaExistsDialog({
+                        action: selected,
+                        media: media,
+                        items: items
+                    }).open();
+                });
+            } else {
+                $screen.stop();
+                that.close();
+                pandora.ui.addFilesDialog({
+                    action: selected,
+                    items: items
+                }).open();
+            }
+        })
+    }
+
+    return that;
+
+};
diff --git a/static/js/allItems.js b/static/js/allItems.js
index 11fee5d7..68e275e5 100644
--- a/static/js/allItems.js
+++ b/static/js/allItems.js
@@ -67,7 +67,11 @@ pandora.ui.allItems = function(section) {
             .css({opacity: canAddItems ? 1 : 0.25})
             .hide()
             .bindEvent({
-                click: pandora.addItem
+                click: function() {
+                    pandora.$ui.addItemDialog = pandora.ui.addItemDialog({
+                        selected: 'add'
+                    }).open();
+                }
             })
             .appendTo(that);
         $buttons[1] = Ox.Button({
@@ -80,7 +84,9 @@ pandora.ui.allItems = function(section) {
             .hide()
             .bindEvent({
                 click: function() {
-                    pandora.$ui.uploadVideoDialog = pandora.ui.uploadVideoDialog().open();
+                    pandora.$ui.addItemDialog = pandora.ui.addItemDialog({
+                        selected: 'upload'
+                    }).open();
                 }
             })
             .appendTo(that);
diff --git a/static/js/deleteItemDialog.js b/static/js/deleteItemDialog.js
deleted file mode 100644
index 65d7ccdf..00000000
--- a/static/js/deleteItemDialog.js
+++ /dev/null
@@ -1,41 +0,0 @@
-// vim: et:ts=4:sw=4:sts=4:ft=javascript
-'use strict';
-
-pandora.ui.deleteItemDialog = function(item) {
-
-    var that = pandora.ui.iconDialog({
-            buttons: [
-                Ox.Button({
-                    id: 'keep',
-                    title: Ox._('Keep {0}', [Ox._(pandora.site.itemName.singular)])
-                }).bindEvent({
-                    click: function() {
-                        that.close();
-                    }
-                }),
-                Ox.Button({
-                    id: 'delete',
-                    title: Ox._('Delete {0}', [Ox._(pandora.site.itemName.singular)])
-                }).bindEvent({
-                    click: function() {
-                        that.close();
-                        pandora.api.remove({
-                            id: item.id
-                        }, function(result) {
-                            Ox.Request.clearCache();
-                            pandora.UI.set({item: ''});
-                        });
-                    }
-                })
-            ],
-            content: Ox._('Are you sure you want to delete the {0} "{1}"?'
-                + '<br><br>All data will be removed.',
-                [Ox._(pandora.site.itemName.singular), item.title]),
-            keys: {enter: 'delete', escape: 'keep'},
-            title: Ox._('Delete {0}', [Ox._(pandora.site.itemName.singular)])
-        });
-
-    return that;
-
-};
-
diff --git a/static/js/deleteItemsDialog.js b/static/js/deleteItemsDialog.js
new file mode 100644
index 00000000..9283fc1f
--- /dev/null
+++ b/static/js/deleteItemsDialog.js
@@ -0,0 +1,55 @@
+// vim: et:ts=4:sw=4:sts=4:ft=javascript
+'use strict';
+
+pandora.ui.deleteItemsDialog = function(options) {
+    options = Ox.extend({
+        items: []
+    }, options || {});
+
+    var that = pandora.ui.iconDialog({
+            buttons: [
+                Ox.Button({
+                    id: 'keep',
+                    title: Ox._('Keep {0}', [Ox._(pandora.site.itemName[options.items.length == 1 ? 'singular':'plural'])])
+                }).bindEvent({
+                    click: function() {
+                        that.close();
+                    }
+                }),
+                Ox.Button({
+                    id: 'delete',
+                    title: Ox._('Delete {0}', [Ox._(pandora.site.itemName[options.items.length == 1 ? 'singular':'plural'])])
+                }).bindEvent({
+                    click: function() {
+                        that.close();
+                        Ox.serialForEach(options.items, function(item, index, items, callback) {
+                            pandora.api.remove({
+                                id: item.id
+                            }, function(result) {
+                                callback();
+                            });
+                        }, function() {
+                            Ox.Request.clearCache();
+                            if (pandora.user.ui.item) {
+                                pandora.UI.set({item: ''});
+                            } else {
+                                pandora.UI.set({listSelection: []});
+                                pandora.reloadList();
+                            }
+                        });
+                    }
+                })
+            ],
+            content: options.items.length == 1 ? Ox._('Are you sure you want to delete the {0} "{1}"?'
+                    + '<br><br>All data will be removed.',
+                    [Ox._(pandora.site.itemName.singular), options.items[0].title])
+                : Ox._('Are you sure you want to delete {0} {1}?'
+                        + '<br><br>All data will be removed.',
+                        [options.items.length, Ox._(pandora.site.itemName.plural)]),
+            keys: {enter: 'delete', escape: 'keep'},
+            title: Ox._('Delete {0}', [Ox._(pandora.site.itemName[options.items.length == 1 ? 'singular':'plural'])])
+        });
+
+    return that;
+
+};
diff --git a/static/js/editItemDialog.js b/static/js/editItemDialog.js
new file mode 100644
index 00000000..e35a122f
--- /dev/null
+++ b/static/js/editItemDialog.js
@@ -0,0 +1,12 @@
+'use strict';
+
+pandora.ui.editItemDialog = function() {
+    var that = Ox.Dialog({
+        closeButton: true,
+        content: Ox.Element().html('HERE WILL BE DRAGONS').css({'text-align': 'center', 'margin-top': '16px'}),
+        height: 72,
+        title: Ox._('Edit {0}', [pandora.site.itemName.singular]),
+        width: 544
+    });
+    return that;
+}
diff --git a/static/js/infoView.0xdb.js b/static/js/infoView.0xdb.js
index 5f1582ef..a9610326 100644
--- a/static/js/infoView.0xdb.js
+++ b/static/js/infoView.0xdb.js
@@ -64,7 +64,9 @@ pandora.ui.infoView = function(data) {
                     if (data_.id == 'update') {
                         updateMetadata();
                     } else if (data_.id == 'delete') {
-                        pandora.$ui.deleteItemDialog = pandora.ui.deleteItemDialog(data).open();
+                        pandora.$ui.deleteItemsDialog = pandora.ui.deleteItemsDialog({
+                            items: [data]
+                        }).open();
                     }
                 }
             })
diff --git a/static/js/infoView.indiancinema.js b/static/js/infoView.indiancinema.js
index cafaacdd..e71c5857 100644
--- a/static/js/infoView.indiancinema.js
+++ b/static/js/infoView.indiancinema.js
@@ -91,9 +91,14 @@ pandora.ui.infoView = function(data) {
                     } else if (data_.id == 'metadata') {
                         pandora.$ui.metadataDialog = pandora.ui.metadataDialog(data).open();
                     } else if (data_.id == 'upload') {
-                        pandora.$ui.uploadVideoDialog = pandora.ui.uploadVideoDialog(data).open();
+                        pandora.$ui.addItemDialog = pandora.ui.addItemDialog({
+                            item: pandora.user.ui.item,
+                            selected: 'upload'
+                        }).open();
                     } else if (data_.id == 'delete') {
-                        pandora.$ui.deleteItemDialog = pandora.ui.deleteItemDialog(data).open();
+                        pandora.$ui.deleteItemsDialog = pandora.ui.deleteItemsDialog({
+                            items: [data]
+                        }).open();
                     }
                 }
             })
diff --git a/static/js/infoView.js b/static/js/infoView.js
index a23f81bb..4bf04bce 100644
--- a/static/js/infoView.js
+++ b/static/js/infoView.js
@@ -61,7 +61,9 @@ pandora.ui.infoView = function(data) {
             .bindEvent({
                 click: function(data_) {
                     if (data_.id == 'delete') {
-                        pandora.$ui.deleteItemDialog = pandora.ui.deleteItemDialog(data).open();
+                        pandora.$ui.deleteItemsDialog = pandora.ui.deleteItemsDialog({
+                            items: [data]
+                        }).open();
                     }
                 }
             })
diff --git a/static/js/infoView.padma.js b/static/js/infoView.padma.js
index 1cd03a89..c1c51ee3 100644
--- a/static/js/infoView.padma.js
+++ b/static/js/infoView.padma.js
@@ -61,7 +61,9 @@ pandora.ui.infoView = function(data) {
             .bindEvent({
                 click: function(data_) {
                     if (data_.id == 'delete') {
-                        pandora.$ui.deleteItemDialog = pandora.ui.deleteItemDialog(data).open();
+                        pandora.$ui.deleteItemsDialog = pandora.ui.deleteItemsDialog({
+                            items: [data]
+                        }).open();
                     }
                 }
             })
diff --git a/static/js/list.js b/static/js/list.js
index a522842b..edb3cd65 100644
--- a/static/js/list.js
+++ b/static/js/list.js
@@ -85,7 +85,7 @@ pandora.ui.list = function() {
                 //Ox.Log('', 'data, pandora.Query.toObject', data, pandora.Query.toObject())
                 pandora.api.find(Ox.extend(data, {
                     query: ui.find,
-                    keys: data.keys ? ['modified'].concat(data.keys) : void 0
+                    keys: data.keys ? ['editable', 'modified'].concat(data.keys) : void 0
                 }), callback);
                 return Ox.clone(data, true);
             },
@@ -165,7 +165,7 @@ pandora.ui.list = function() {
                 }), callback);
                 return Ox.clone(data, true);
             },
-            keys: ['id', 'modified', 'posterRatio'].concat(pandora.site.itemTitleKeys),
+            keys: ['id', 'editable', 'modified', 'posterRatio'].concat(pandora.site.itemTitleKeys),
             selected: ui.listSelection,
             size: 128,
             sort: ui.listSort,
@@ -241,7 +241,7 @@ pandora.ui.list = function() {
                 });
                 return Ox.clone(data, true);
             },
-            keys: ['clips', 'duration', 'id', 'modified', 'posterRatio', 'videoRatio'].concat(pandora.site.itemTitleKeys),
+            keys: ['clips', 'duration', 'editable', 'id', 'modified', 'posterRatio', 'videoRatio'].concat(pandora.site.itemTitleKeys),
             selected: ui.listSelection,
             size: 192,
             sort: ui.listSort,
@@ -358,7 +358,7 @@ pandora.ui.list = function() {
                 }} : {})), callback);
                 return Ox.clone(data, true);
             },
-            keys: ['clips', 'duration', 'id', 'modified', 'posterRatio', 'rendered'].concat(pandora.site.itemTitleKeys),
+            keys: ['clips', 'duration', 'editable', 'id', 'modified', 'posterRatio', 'rendered'].concat(pandora.site.itemTitleKeys),
             selected: ui.listSelection,
             size: 192,
             sort: ui.listSort,
diff --git a/static/js/mainMenu.js b/static/js/mainMenu.js
index 659e6590..a7a9b1eb 100644
--- a/static/js/mainMenu.js
+++ b/static/js/mainMenu.js
@@ -13,7 +13,9 @@ pandora.ui.mainMenu = function() {
         lists = {},
         that = Ox.MainMenu({
             extras: pandora.site.menuExtras.map(function(menuExtra) {
-                if (menuExtra == 'user') {
+                if (menuExtra == 'upload') {
+                    return pandora.$ui.uploadButton = pandora.ui.uploadButton();
+                } else if (menuExtra == 'user') {
                     return pandora.$ui.userButton = pandora.ui.userButton();
                 } else if (menuExtra == 'locale') {
                     return pandora.$ui.localeButton = pandora.ui.localeButton();
@@ -42,6 +44,7 @@ pandora.ui.mainMenu = function() {
                         { id: 'username', title: Ox._('User: {0}', [isGuest ? 'not signed in' : Ox.encodeHTMLEntities(pandora.user.username)]), disabled: true },
                         {},
                         { id: 'preferences', title: Ox._('Preferences...'), disabled: isGuest, keyboard: 'control ,' },
+                        { id: 'tasks', title: Ox._('Tasks...'), disabled: isGuest },
                         { id: 'archives', title: Ox._('Archives...'), disabled: /*isGuest*/ true },
                         {},
                         { id: 'signup', title: Ox._('Sign Up...'), disabled: !isGuest },
@@ -367,6 +370,8 @@ pandora.ui.mainMenu = function() {
                     })
                 ), data.id)) {
                     pandora.UI.set({page: data.id});
+                } else if (data.id == 'tasks') {
+                    pandora.ui.tasksDialog().open();
                 } else if (Ox.contains([
                     'newlist', 'newlistfromselection', 'newsmartlist', 'newsmartlistfromresults'
                 ], data.id)) {
@@ -384,11 +389,9 @@ pandora.ui.mainMenu = function() {
                 } else if (data.id == 'editlist') {
                     pandora.ui.listDialog().open();
                 } else if (data.id == 'add') {
-                    pandora.addItem();
-                } else if (data.id == 'upload') {
-                    pandora.$ui.uploadVideoDialog = pandora.ui.uploadVideoDialog().open();
-                } else if (data.id == 'import') {
-                    pandora.$ui.importMediaDialog = pandora.ui.importMediaDialog().open();
+                    pandora.$ui.addItemDialog = pandora.ui.addItemDialog().open();
+                } else if (data.id == 'edit') {
+                    pandora.ui.editItemDialog().open();
                 } else if (data.id == 'deletelist') {
                     pandora.ui.deleteListDialog().open();
                 } else if (data.id == 'print') {
@@ -465,10 +468,27 @@ pandora.ui.mainMenu = function() {
                     pandora.clipboard.clear();
                 } else if (data.id == 'delete') {
                     if (ui.section == 'items') {
-                        pandora.doHistory('delete', ui.listSelection, ui._list, function() {
-                            pandora.UI.set({listSelection: []});
-                            pandora.reloadList();
-                        });
+                        if (ui._list) {
+                            pandora.doHistory('delete', ui.listSelection, ui._list, function() {
+                                pandora.UI.set({listSelection: []});
+                                pandora.reloadList();
+                            });
+                        } else {
+                            pandora.api.find({
+                                query: {
+                                    conditions: ui.listSelection.map(function(id) {
+                                        return {key: 'id', value: id, operator: '=='}
+                                    }),
+                                    operator: '|'
+                                },
+                                keys: ['id', 'title'],
+                                range: [0, ui.listSelection.length]
+                            }, function(result) {
+                                pandora.$ui.deleteItemsDialog = pandora.ui.deleteItemsDialog({
+                                    items: result.data.items
+                                }).open();
+                            });
+                        }
                     } else if (ui.section == 'edits') {
                         var clips = pandora.$ui.editPanel.getSelectedClips();
                         pandora.doHistory('delete', clips, ui.edit, function(result) {
@@ -987,6 +1007,7 @@ pandora.ui.mainMenu = function() {
 
     function getItemMenu() {
         var listData = pandora.getListData(),
+            deleteVerb = ui._list ? Ox._('Remove') : Ox._('Delete'),
             isEditable = listData.editable && listData.type == 'static',
             isClipView = pandora.isClipView()
                 && pandora.$ui.clipList
@@ -999,7 +1020,9 @@ pandora.ui.mainMenu = function() {
             isEditView = ui.section == 'edits' && ui.edit
                 && ui.editView != 'annotations', // FIXME: focus
             listName = isVideoView || isClipView ? ''
-                : ui.section == 'items' ? Ox._('from List')
+                : ui.section == 'items' ? (
+                    ui._list ? Ox._('from List') : Ox._('from Archive')
+                )
                 : Ox._('from Edit'),
             listItemsName = Ox._(
                 ui.section == 'edits' || isVideoView || isClipView ? 'Clips'
@@ -1026,6 +1049,24 @@ pandora.ui.mainMenu = function() {
                     : clipboardType == 'clip' ? (clipboardItems == 1 ? 'Clip' : 'Clips')
                     : ''
                 ),
+            canEdit = pandora.site.capabilities.canEditMedia[pandora.user.level] || (
+                ui.section == 'items' && (
+                    ui.item || (
+                        Ox.contains(['list', 'grid', 'clips', 'timelines'], ui.listView)
+                        && ui.listSelection.length == 1
+                    )
+                ) && pandora.$ui.list.value(ui.listSelection[0], 'editable')
+            ),
+            canDelete = pandora.site.capabilities.canRemoveItems[pandora.user.level] || (
+                ui.section == 'items' && (
+                    ui.item || (
+                        Ox.contains(['list', 'grid', 'clips', 'timelines'], ui.listView)
+                        && ui.listSelection.length
+                    )
+                ) && ui.listSelection.every(function(item) {
+                    return pandora.$ui.list.value(item, 'editable');
+                })
+            ),
             canSelect = isListView || isClipView || isEditView,
             canCopy = isListView ? ui.listSelection.length
                 : isClipView ? pandora.$ui.clipList.options('selected').length
@@ -1042,9 +1083,8 @@ pandora.ui.mainMenu = function() {
             undoText = pandora.history.undoText(),
             redoText = pandora.history.redoText();
         return { id: 'itemMenu', title: Ox._('Item'), items: [
-            { id: 'add', title: Ox._('Add {0}', [Ox._(pandora.site.itemName.singular)]), disabled: pandora.site.itemRequiresVideo || !pandora.site.capabilities.canAddItems[pandora.user.level] },
-            { id: 'upload', title: Ox._('Upload Video...'), disabled: !pandora.site.capabilities.canAddItems[pandora.user.level] },
-            { id: 'import', title: Ox._('Import Video...'), disabled: !pandora.site.capabilities.canImportItems[pandora.user.level] },
+            { id: 'add', title: Ox._('Add {0}...', [Ox._(pandora.site.itemName.singular)]), disabled: !pandora.site.capabilities.canAddItems[pandora.user.level] },
+            { id: 'edit', title: Ox._('Edit {0}...', [Ox._(pandora.site.itemName.singular)]), disabled: true /*fixme: !canEdit */ },
             {},
             { id: 'selectall', title: Ox._('Select All {0}', [listItemsName]), disabled: !canSelect, keyboard: 'control a' },
             { id: 'selectnone', title: Ox._('Select None'), disabled: !canSelect, keyboard: 'shift control a' },
@@ -1057,7 +1097,7 @@ pandora.ui.mainMenu = function() {
             { id: 'paste', title: clipboardItems == 0 ? Ox._('Paste') : Ox._('Paste {0}', [clipboardItemName]), disabled: !canPaste, keyboard: 'control v' },
             { id: 'clearclipboard', title: Ox._('Clear Clipboard'), disabled: !clipboardItems},
             {},
-            { id: 'delete', title: Ox._('Delete {0} {1}', [selectionItemName, listName]), disabled: !canCut, keyboard: 'delete' },
+            { id: 'delete', title: Ox._('{0} {1} {2}', [deleteVerb, selectionItemName, listName]), disabled: !canDelete, keyboard: 'delete' },
             {},
             { id: 'undo', title: undoText ? Ox._('Undo {0}', [undoText]) : Ox._('Undo'), disabled: !undoText, keyboard: 'control z' },
             { id: 'redo', title: redoText ? Ox._('Redo {0}', [redoText]) : Ox._('Redo'), disabled: !redoText, keyboard: 'shift control z' },
diff --git a/static/js/mediaExistsDialog.js b/static/js/mediaExistsDialog.js
new file mode 100644
index 00000000..1c91be18
--- /dev/null
+++ b/static/js/mediaExistsDialog.js
@@ -0,0 +1,80 @@
+'use strict';
+
+pandora.ui.mediaExistsDialog = function(options) {
+
+    var title = options.media.length == 1 ? 'File Exists' : 'Files Exist';
+
+    var $content = Ox.Element().addClass('OxText').css({
+        margin: '16px',
+        overflow: 'auto'
+    }).html(
+        '<p>' + (
+            options.media.length == 1 && options.items.length == 1
+            ? Ox._('The video file already exists:')
+            : options.media.length == options.items.length
+            ? Ox._(
+                'All {0} video files already exist:',
+                [options.media.length]
+            )
+            : Ox._(
+                '{0} of the {1} video files already exist:',
+                [options.media.length, options.items.length])
+        ) + '</p>' + options.media.map(function(media) {
+            return media[options.action == 'upload' ? 'name' : 'title']
+                + ': <a href="/' + media.itemID + '" target="_blank">'
+                + media.itemTitle + '</a>';
+        }).join('<br/>')
+    )
+
+    var $buttons = options.media.length == options.items.length ? [
+        Ox.Button({
+            id: 'close',
+            title: Ox._('Close')
+        }).bindEvent({
+            click: function() {
+                that.close();
+            }
+        })
+    ] : [
+        Ox.Button({
+            id: 'cancel',
+            title: Ox._('Don\'t {0}', [Ox.toTitleCase(options.action)])
+        }).bindEvent({
+            click: function() {
+                that.close();
+            }
+        }),
+        Ox.Button({
+            id: 'continue',
+            title: Ox._(Ox.toTitleCase(options.action)) + ' '
+            + (options.items.length - options.media.length) + ' '
+            + Ox._(options.items.length - options.media.length == 1 ? 'File' : 'Files')
+        }).bindEvent({
+            click: function() {
+                var existing = options.media.map(function(item) {
+                        return item.id;
+                    }),
+                    items = options.items.filter(function(item) {
+                        return existing.indexOf(item.oshash) == -1;
+                    });
+                pandora.ui.addFilesDialog({
+                    action: options.action,
+                    items: items
+                }).open();
+            }
+        })
+    ];
+
+    var that = Ox.Dialog({
+        buttons: $buttons,
+        closeButton: true,
+        content: $content,
+        height: 256,
+        removeOnClose: true,
+        title: title,
+        width: 512,
+    });
+
+    return that;
+
+};
diff --git a/static/js/mediaView.js b/static/js/mediaView.js
index 3da11c0b..12478184 100644
--- a/static/js/mediaView.js
+++ b/static/js/mediaView.js
@@ -518,7 +518,9 @@ pandora.ui.mediaView = function(options) {
             id: pandora.user.ui.item,
             keys: ['id', 'title']
         },function(result) {
-            pandora.ui.deleteItemDialog(result.data).open();
+            pandora.$ui.deleteItemsDialog = pandora.ui.deleteItemsDialog({
+                items: [result.data]
+            }).open();
         });
     }
 
diff --git a/static/js/tasksDialog.js b/static/js/tasksDialog.js
index 4e1059ef..c1111763 100644
--- a/static/js/tasksDialog.js
+++ b/static/js/tasksDialog.js
@@ -1,10 +1,15 @@
 'use strict';
 
-pandora.ui.tasksDialog = function() {
+pandora.ui.tasksDialog = function(options) {
+    options = Ox.extend({
+        tasks: 'all'
+    }, options || {});
 
     var canceling = [],
 
-        timeout,
+        clientItems = [], serverItems = [], listItems = [],
+
+        clientTimeout, serverTimeout,
 
         $list = Ox.TableList({
             columns: [
@@ -13,6 +18,16 @@ pandora.ui.tasksDialog = function() {
                     title: Ox._('ID'),
                     visible: false
                 },
+                {
+                    format: function(value) {
+                        return Ox.encodeHTMLEntities(value);
+                    },
+                    id: 'user',
+                    operator: '+',
+                    title: Ox._('User'),
+                    visible: false,
+                    width: 144
+                },
                 {
                     format: function(value) {
                         return Ox.encodeHTMLEntities(value);
@@ -21,7 +36,7 @@ pandora.ui.tasksDialog = function() {
                     operator: '+',
                     title: Ox._('Title'),
                     visible: true,
-                    width: 256
+                    width: 288
                 },
                 {
                     format: function(value) {
@@ -49,62 +64,129 @@ pandora.ui.tasksDialog = function() {
                     width: 144
                 },
                 {
-                    format: function(value) {
-                        return Ox.toTitleCase(value);
+                    format: function(value, data) {
+                        return {
+                            'pending': 'Uploading (Queued)',
+                            'uploading': 'Uploading' + (
+                                data.progress === void 0 ? '' : ' (' + (
+                                    data.progress === 0 ? 'Queued'
+                                    : data.progress + '%'
+                                ) + ')'
+                            ),
+                            'queued': $tasksSelect.value() == 'all'
+                                ? 'Processing (Queued)'
+                                : 'Finished',
+                            'processing': 'Processing',
+                            'canceled': 'Canceled',
+                            'failed': 'Failed',
+                            'finished': 'Finished'
+                        }[value] || value;
                     },
                     id: 'status',
                     operator: '+',
                     sort: function(value) {
                         return [
-                            'queued', 'uploading', 'importing', 'processing',
+                            'pending', 'uploading', 'queued', 'processing',
                             'canceled', 'failed', 'finished'
                         ].indexOf(value);
                     },
                     title: Ox._('Status'),
                     visible: true,
-                    width: 96
+                    width: 176
+                },
+                {
+                    id: 'progress',
+                    title: Ox._('Progress'),
+                    visible: false
                 }
+                
             ],
             columnsVisible: true,
-            items: [],
+            items: listItems,
             sort: [{key: 'ended', operator: '-'}],
             unique: 'id'
         }).bindEvent({
-            select: updateButton
+            select: updateButton,
+            open: function(data) {
+                var item;
+                if (data.ids.length == 1) {
+                    item = listItems.filter(function(item) {
+                        return item.id == data.ids[0];
+                    })[0];
+                    if (item && item.item) {
+                        that.close();
+                        pandora.UI.set({
+                            item: item.item,
+                            itemView: 'info'
+                        });
+                    }
+                }
+            }
         }),
 
         $sidebar = Ox.Element().css({
             margin: '4px'
         }),
 
-        $checkbox = Ox.Checkbox({
-            title: Ox._('Show All Tasks')
+        $tasksSelect = Ox.Select({
+            items: [
+                {id: 'uploads', title: Ox._('Show Uploads')},
+                {id: 'all', title: Ox._('Show All Tasks')}
+            ],
+            value: options.tasks,
+            width: 128
         }).css({
-            display: true || pandora.site.capabilities.canSeeAllTasks[
-                pandora.user.level
-            ] ? 'block' : 'none',
             margin: '4px'
         }).bindEvent({
-            change: getItems
+            change: updateList
+        })
+        .appendTo($sidebar),
+
+        $usersSelect = Ox.Select({
+            items: [
+                {id: 'my', title: Ox._('Show My Tasks')},
+                {id: 'all', title: Ox._('Show All Users')}
+            ],
+            width: 128
+        }).css({
+            display: pandora.site.capabilities.canSeeAllTasks[
+                pandora.user.level
+            ] ? 'block' : 'none',
+            margin: '8px 4px 4px 4px'
+        }).bindEvent({
+            change: function(data) {
+                $list[data.value == 'all' ? 'addColumn' : 'removeColumn']('user');
+                $list.resizeColumn('title', data.value == 'all' ? 144 : 288);
+                setTimeout(updateList);
+            }
         })
         .appendTo($sidebar),
 
         $button = Ox.Button({
             disabled: true,
             title: Ox._('Cancel Task'),
-            width: 112
+            width: 128
         }).css({
             margin: '4px',
         }).bindEvent({
             click: function() {
+                $button.options({disabled: true});
                 var ids = $list.options('selected').filter(canBeCanceled);
                 canceling.push(ids);
-                $button.options({disabled: true});
+                ids.forEach(function(id) {
+                    if (Ox.contains(
+                        ['pending', 'uploading'], $list.value(id, 'status')
+                    )) {
+                        pandora.uploadQueue.remove(id);
+                    }
+                })
                 pandora.api.cancelTask({
                     id: ids
                 }, function() {
-                    canceling = [];
-                    getItems();
+                    canceling = canceling.filter(function(id) {
+                        return !Ox.contains(ids, id);
+                    });
+                    getServerItems();
                 });
             }
         }).appendTo($sidebar),
@@ -113,7 +195,7 @@ pandora.ui.tasksDialog = function() {
             elements: [
                 {
                     element: $list,
-                    size: 640
+                    size: 752
                 },
                 {
                     element: $sidebar,
@@ -137,13 +219,16 @@ pandora.ui.tasksDialog = function() {
             content: $panel,
             height: 384,
             title: Ox._('Tasks'),
-            width: 768
+            width: 896
         })
         .bindEvent({
             close: function() {
-                clearTimeout(timeout);
+                clientTimeout && clearTimeout(clientTimeout);
             },
-            open: getItems
+            open: function() {
+                getClientItems();
+                getServerItems();
+            }
         });
 
     function canBeCanceled(id) {
@@ -153,15 +238,77 @@ pandora.ui.tasksDialog = function() {
         ) && !Ox.contains(canceling, id);
     }
 
-    function getItems() {
-        clearTimeout(timeout);
-        pandora.api.getTasks($checkbox.value() ? {} : {
+    function getClientItems(callback) {
+        clearTimeout(clientTimeout);
+        var uploads = pandora.uploadQueue.get();
+        var uploadsById = {};
+        uploads.forEach(function(upload) {
+            uploadsById[upload.item.id] = (
+                uploadsById[upload.item.id] || []
+            ).concat(upload);
+        });
+        clientItems = []
+        Ox.forEach(uploadsById, function(uploads, id) {
+            // FIXME: include upload.file.size
+            var progress = Math.round(Ox.sum(uploads.map(function(upload) {
+                return upload.data.progress / uploads.length;
+            })) * 100);
+            var status = uploads.map(function(upload) {
+                return upload.data.status;
+            });
+            clientItems.push({
+                ended: uploads.every(function(upload) {
+                    return upload.data.ended;
+                }) ? Ox.max(uploads.map(function(upload) {
+                    return upload.data.ended;
+                })) : '',
+                id: id,
+                progress: progress,
+                started: Ox.min(uploads.map(function(upload) {
+                    return upload.data.started;
+                })),
+                status: Ox.contains(status, 'uploading') ? 'uploading'
+                    : Ox.contains(status, 'pending') ? 'pending'
+                    : Ox.contains(status, 'canceled') ? 'canceled'
+                    : 'queued',
+                title: uploads[0].item.title,
+                user: pandora.user.username
+            });
+        });
+        clientTimeout = setTimeout(getClientItems, 1000);
+        updateValues();
+        callback && callback();
+    }
+
+    function getListItems() {
+        var allTasks = $tasksSelect.value() == 'all',
+            uploading = allTasks
+                ? ['pending', 'uploading']
+                : ['pending', 'uploading', 'queued'],
+            items = clientItems.filter(function(item) {
+                return Ox.contains(uploading, item.status);
+            }),
+        items = serverItems.filter(function(item) {
+            return allTasks ? (
+                Ox.getIndex(items, 'id', item.item) == -1
+                || item.user != pandora.user.username
+            ) : (
+                Ox.getIndex(items, 'id', item.item) == -1
+                && Ox.getIndex(clientItems, 'id', item.item) > -1
+            );
+        }).concat(items);
+        return items;
+    }
+
+    function getServerItems(callback) {
+        clearTimeout(serverTimeout);
+        pandora.api.getTasks($usersSelect.value() == 'all' ? {} : {
             user: pandora.user.username
         }, function(result) {
-            $list.options({items: result.data.items})
-            updateButton()
+            serverItems = result.data.items;
+            serverTimeout = setTimeout(getServerItems, 10000);
+            getClientItems(callback);
         });
-        timeout = setTimeout(getItems, 15000);
     }
 
     function updateButton() {
@@ -172,6 +319,31 @@ pandora.ui.tasksDialog = function() {
         });
     }
 
+    function updateList() {
+        getServerItems(function() {
+            listItems= getListItems();
+            $list.options({items: listItems});
+            updateButton();
+        });
+    }
+
+    function updateValues() {
+        var currentListItems = getListItems(),
+            hasNewItems = currentListItems.length != listItems.length;
+        !hasNewItems && currentListItems.forEach(function(item) {
+            if (Ox.getIndexById(listItems, item.id) == -1) {
+                hasNewItems = true;
+            } else if (!hasNewItems) {
+                $list.value(item.id, 'progress', item.progress);
+                $list.value(item.id, 'status', item.status);
+                if (item.ended) {
+                    $list.value(item.id, 'ended', item.ended);
+                }
+            }
+        });
+        hasNewItems && updateList();
+    }
+
     return that;
   
 };
diff --git a/static/js/uploadButton.js b/static/js/uploadButton.js
new file mode 100644
index 00000000..2f2a0247
--- /dev/null
+++ b/static/js/uploadButton.js
@@ -0,0 +1,27 @@
+'use strict';
+
+pandora.ui.uploadButton = function() {
+
+    var that = Ox.Button({
+        style: 'symbol',
+        title: 'upload',
+        type: 'image'
+    }).css({
+        display: 'none'
+    }).bindEvent({
+        click: function() {
+            pandora.ui.tasksDialog({
+                tasks: 'uploads'
+            }).open();
+        }
+    });
+
+    that.update = function() {
+        that.css({
+            display: pandora.uploadQueue.uploading ? 'block' : 'none'
+        });
+    };
+
+    return that;
+
+};
diff --git a/static/js/utils.js b/static/js/utils.js
index d02d9446..4a3f6d46 100644
--- a/static/js/utils.js
+++ b/static/js/utils.js
@@ -2,13 +2,15 @@
 
 'use strict';
 
-pandora.addItem = function() {
-    pandora.api.add(function(result) {
+pandora.addItem = function(title, callback) {
+    // unused
+    pandora.api.add({title: title || 'Untitled'}, function(result) {
         Ox.Request.clearCache('find');
         pandora.UI.set({
             item: result.data.id,
             itemView: 'info'
         });
+        callback && callback();
     });
 };
 
@@ -257,6 +259,12 @@ pandora.beforeUnloadWindow = function() {
             + 'Are you sure that you want to leave this page?'
         );
     }
+    if (pandora.uploadQueue.uploading) {
+        return Ox._(
+            'You still have active uploads. '
+            + 'Are you sure that you want to leave this page?'
+        );
+    }
     // Prevent error dialogs on unload
     pandora.isUnloading = true;
 };
@@ -2272,9 +2280,11 @@ pandora.reloadList = function() {
                 // (but then it's also unlikely they'll have to be reloaded)
                 var folder = listData.status != 'featured'
                     ? 'personal' : 'featured';
-                pandora.$ui.folderList[folder].value(
-                    listData.id, 'items', data.items
-                );
+                if (!Ox.isEmpty(listData)) {
+                    pandora.$ui.folderList[folder].value(
+                        listData.id, 'items', data.items
+                    );
+                }
             }
         })
         .bindEventOnce({
@@ -2639,12 +2649,89 @@ pandora.updateStatus = function(item) {
         return ui.item == item && [
             'info', 'player', 'editor', 'timeline'
         ].indexOf(ui.itemView) > -1 && !(
+            // fixme: still wrong
             pandora.$ui.uploadVideoDialog
             && pandora.$ui.uploadVideoDialog.is('::visible')
         );
     }
 };
 
+pandora.uploadQueue = (function() {
+    var that = {
+        uploading: false
+    };
+    var queue = [];
+    var index = -1;
+    var uploader;
+
+    function upload() {
+        if (index == queue.length - 1) {
+            that.uploading = false;
+            pandora.$ui.uploadButton && pandora.$ui.uploadButton.update();
+            return;
+        }
+        index++;
+        if (queue[index].data.status == 'canceled') {
+            upload();
+            return;
+        }
+        that.uploading = true;
+        queue[index].data.status = 'uploading';
+        pandora.$ui.uploadButton && pandora.$ui.uploadButton.update();
+        pandora.api.addMedia({
+            filename: queue[index].file.name,
+            id: queue[index].oshash,
+            item: queue[index].item.id
+        }, function(result) {
+            uploader = pandora.chunkupload({
+                data: {id: queue[index].oshash},
+                file: queue[index].file,
+                url: '/api/upload/direct/'
+            }).bindEvent({
+                done: function(data) {
+                    queue[index].data.ended = +new Date();
+                    queue[index].data.status = data.progress == 1 ? 'queued' : 'failed';
+                    queue[index].data.progress = data.progress;
+                    upload();
+                },
+                progress: function(data) {
+                    queue[index].data.progress = data.progress;
+                }
+            });
+            that.uploading = queue[index].item.id;
+        });
+    }
+    that.add = function(items) {
+        items = Ox.isArray(items) ? items : [items];
+        queue = queue.concat(items.map(function(item) {
+            return Ox.extend(item, {
+                data: {
+                    progress: 0,
+                    started: +new Date(),
+                    status: 'pending'
+                }
+            });
+        }));
+        !that.uploading && upload();
+    };
+    that.get = function() {
+        return queue;
+    };
+    that.remove = function(id) {
+        queue.forEach(function(item, index) {
+            if (item.item.id == id) {
+                queue[index].data.status = 'canceled';
+            }
+        });
+        if (that.uploading == id) {
+            uploader.abort();
+            upload();
+        }
+    };
+
+    return that;
+}());
+
 pandora.wait = function(id, callback, timeout) {
     var task = {};
     timeout = timeout || 5000;