Add UI to support video upload without Firefogg, fixes #1351; split encoding/upload into two 100% progress steps, fixes #1453

static/js/pandora/filesView.js

@@ -76,7 +76,7 @@ pandora.ui.filesView = function(options, self) {
             columns: [
                 {
                     clickable: function(data) {
-                        return true;
+                        return !data.encoding;
                     },
                     format: function(value, data) {
                         return $('<img>')
@@ -99,7 +99,9 @@ pandora.ui.filesView = function(options, self) {
                     title: 'Status',
                     titleImage: 'check',
                     tooltip: function (data) {
-                        return data.instances.filter(function(i) {return i.ignore; }).length > 0
+                        return data.encoding
+                            ? 'Processing video on server'
+                            : data.instances.filter(function(i) {return i.ignore; }).length > 0
                             ? 'Use this file'
                             : 'Dont use this file';
                     },

static/js/pandora/importAnnotations.js

@@ -14,7 +14,7 @@ pandora.ui.importAnnotations = function(data) {
         importButton,
         selectLayer,
         selectFile,
-        that = pandora.ui.iconDialog({
+        that = Ox.Dialog({
             buttons: [
                 Ox.Button({
                     id: 'close',
@@ -36,11 +36,13 @@ pandora.ui.importAnnotations = function(data) {
                 })
             ],
             closeButton: true,
-            text: content,
+            content: content,
             keys: {
                 'escape': 'close'
             },
+            height: 128,
             removeOnClose: true,
+            width: 368,
             title: 'Import Annotations'
         })
         .bindEvent({
@@ -77,7 +79,9 @@ pandora.ui.importAnnotations = function(data) {
                 layer: layer
             }, function(result) {
                 if (result.data.taskId) {
-                    setStatus('Waiting for server to import annotations...');
+                    $status.html('').append(Ox.LoadingScreen({
+                        text: 'Importing ' + srt.length + ' annotations...'
+                    }));
                     pandora.wait(result.data.taskId, function(result) {
                         if(result.data.status == 'SUCCESS') {
                             setStatus(annotations.length + ' annotations imported.');

static/js/pandora/upload.js

@@ -1,180 +0,0 @@
-// vi:si:et:sw=4:sts=4:ts=4
-'use strict';
-
-pandora.ui.upload = function(oshash, file) {
-    var self = {},
-        chunkSize = 1024*1024,
-        chunkUrl,
-        format = pandora.site.video.formats[0],
-        maxRetry = -1,
-        resolution = Ox.max(pandora.site.video.resolutions),
-        retries = 0,
-        that = Ox.Element(),
-        uploadData = {},
-        uploadUrl = '/api/upload/?profile='+resolution+'p.'+format+'&id=' + oshash;
-
-    initUpload();
-
-    function done() {
-        that.triggerEvent('done', {
-            status: that.status,
-            progress: that.progress,
-            responseText: that.responseText
-        });
-    }
-
-    function initUpload() {
-        //request upload slot from server
-        that.status = 'requesting chunk upload';
-        that.progress = 0;
-        self.req = new XMLHttpRequest();
-        self.req.addEventListener('load', function (evt) {
-            var response = {};
-            that.responseText = evt.target.responseText;
-            try {
-                response = JSON.parse(evt.target.responseText);
-            } catch(e) {
-                response = {};
-                that.status = 'failed to parse response';
-                that.progress = -1;
-                done();
-            }
-            if (response.status && response.status.code != 200) {
-                that.status = response.status.text;
-                that.progress = -1;
-                done();
-                response = {};
-            }
-            if (response.maxRetry) {
-                maxRetry = response.maxRetry;
-            }
-            chunkUrl = response.uploadUrl;
-            if (chunkUrl) {
-                if (document.location.protocol == 'https:') {
-                    chunkUrl = chunkUrl.replace(/http:\/\//, 'https://');
-                }
-                that.status = 'uploading';
-                that.progress = 0.0;
-                //start upload
-                uploadChunk(0);
-            } else {
-                that.status = 'upload failed, no upload url provided';
-                that.progress = -1;
-                done();
-            }
-        }, false);
-        self.req.addEventListener('error', function (evt) {
-            that.status = 'uplaod failed';
-            that.progress = -1;
-            that.responseText = evt.target.responseText;
-            done();
-        }, false);
-        self.req.addEventListener('abort', function (evt) {
-            that.status = 'aborted';
-            that.progress = -1;
-            done();
-        }, false);
-        var formData = new FormData();
-        Ox.forEach(uploadData, function(value, key) {
-            formData.append(key, value);
-        });
-        self.req.open('POST', uploadUrl);
-        self.req.send(formData);
-    }
-
-    function progress(p) {
-        that.progress = p;
-        that.triggerEvent('progress', {
-            progress: that.progress
-        });
-    }
-
-    function uploadChunk(chunkId) {
-        var bytesAvailable = file.size,
-            chunk,
-            chunkOffset = chunkId * chunkSize;
-
-        if (file.mozSlice) {
-            chunk = file.mozSlice(chunkOffset, chunkOffset+chunkSize, file.type);
-        } else if (file.webkitSlice) {
-            chunk = file.webkitSlice(chunkOffset, chunkOffset+chunkSize, file.type);
-        }
-
-        progress(parseFloat(chunkOffset)/bytesAvailable);
-
-        self.req = new XMLHttpRequest();
-        self.req.addEventListener('load', function (evt) {
-            var response;
-            that.responseText = evt.target.responseText;
-            try {
-                response = JSON.parse(evt.target.responseText);
-            } catch(e) {
-                response = {};
-            }
-            if (response.done == 1) {
-                //upload finished
-                that.resultUrl = response.resultUrl;
-                that.progress = 1;
-                that.status = 'done';
-                done();
-            } else if (response.result == 1) {
-                //reset retry counter
-                retries = 0;
-                //start uploading next chunk
-                uploadChunk(chunkId + 1);
-            } else {
-                //failed to upload, try again in 5 second
-                retries++;
-                if (maxRetry > 0 && retries > maxRetry) {
-                    that.status = 'uplaod failed';
-                    that.progress = -1;
-                    done();
-                } else {
-                    setTimeout(function() {
-                        uploadChunk(chunkId);
-                    }, 5000);
-                }
-            }
-        }, false);
-        self.req.addEventListener('error', function (evt) {
-            //failed to upload, try again in 3 second
-            retries++;
-            if (maxRetry > 0 && retries > maxRetry) {
-                that.status = 'uplaod failed';
-                that.progress = -1;
-                done();
-            } else {
-                setTimeout(function() {
-                    uploadChunk(chunkId);
-                }, 3000);
-            }
-        }, false);
-        self.req.upload.addEventListener('progress', function (evt) {
-            if (evt.lengthComputable) {
-                progress(parseFloat(chunkOffset + evt.loaded) / bytesAvailable);
-            }
-        }, false);
-        self.req.addEventListener('abort', function (evt) {
-            that.status = 'aborted';
-            that.progress = -1;
-            done();
-        }, false);
-
-        var formData = new FormData();
-        formData.append('chunkId', chunkId);
-        if (bytesAvailable <= chunkOffset + chunkSize) {
-            formData.append('done', 1);
-        }
-        formData.append('chunk', chunk);
-        self.req.open('POST', chunkUrl, true);
-        self.req.send(formData);
-    }
-
-    that.abort = function() {
-        if (self.req) {
-            self.req.abort();
-            self.req = null;
-        }
-    };
-    return that;
-};

static/js/pandora/uploadDialog.js

@@ -5,6 +5,7 @@ pandora.ui.uploadDialog = function(data) {
 
     var cancelled = false,
         file,
+        hasFirefogg = !(typeof Firefogg == 'undefined'),
         selectFile,
         $actionButton,
         $closeButton,
@@ -18,12 +19,22 @@ pandora.ui.uploadDialog = function(data) {
                 $closeButton = Ox.Button({
                     id: 'close',
                     title: 'Close'
+                }).css({
+                    float: 'left'
                 }).bindEvent({
                     click: function() {
+                        if ($closeButton.options('title') == 'Cancel') {
+                            cancelled = true;
+                            pandora.firefogg && pandora.firefogg.cancel();
+                            pandora.$ui.upload && pandora.$ui.upload.abort();
+                            $closeButton.options('title', 'Close');
+                            $actionButton.show();
+                        } else {
                             that.triggerEvent('close');
                         }
+                    }
                 }),
-                $actionButton = Ox.Button({
+                $actionButton = hasFirefogg ? Ox.Button({
                     id: 'action',
                     title: 'Select Video'
                 }).bindEvent({
@@ -39,11 +50,24 @@ pandora.ui.uploadDialog = function(data) {
                             $actionButton.options('title', 'Select Video');
                             $closeButton.show();
                         } else {
-                            $actionButton.options('title', 'Cancel');
+                            $closeButton.options('title', 'Cancel');
-                            $closeButton.hide();
+                            $actionButton.hide().options('title', 'Select Video');
                             encode();
                         }
                     }
+                }) : Ox.FileButton({
+                    id: 'action',
+                    title: 'Select Video',
+                    maxFiles: 1,
+                    width: 96
+                }).bindEvent({
+                    click: function(data) {
+                        if(data.files.length) {
+                            $actionButton.hide();
+                            $closeButton.options('title', 'Cancel');
+                            upload(data.files[0]);
+                        }
+                    }
                 })
             ],
             content: $content,
@@ -62,9 +86,6 @@ pandora.ui.uploadDialog = function(data) {
             }
         });
 
-    // FIXME: is this necessary?
-    pandora._status = $status;
-    pandora._info = $info;
     if (!pandora.site.itemRequiresVideo && !pandora.user.ui.item) {
         $info.html(
             'You can only upload a video to an existing '
@@ -74,44 +95,6 @@ pandora.ui.uploadDialog = function(data) {
             + ' you want to upload exists and create otherwise.'
         );
         $actionButton.hide();
-    } else if (typeof Firefogg == 'undefined') {
-        /*
-        selectFile = $('<input>')
-            .attr({
-                type: 'file'
-            })
-            .css({
-                padding: '8px'
-            })
-            .on({
-                change: function(event) {
-                    if (this.files.length) {
-                        file = this.files[0];
-                        if (file.type == 'video/webm') {
-                            $status.html('');
-                            uploadButton.options({
-                                disabled: false
-                            });
-                        } else {
-                            $status.html('Currently only WebM files are supported.  (<a href="/help/encoding">Help encoding video</a>)');
-                        }
-                    } else {
-                        uploadButton.options({
-                            disabled: true
-                        });
-                    }
-                }
-            })
-            .appendTo($content);
-        */
-        $info.html(
-            'Currently, video upload is only supported in '
-            + '<a target="_new" href="http://mozilla.org/firefox/">Firefox</a>, with '
-            + '<a target="_new" href="http://firefogg.org/">Firefogg</a> installed.<br><br>'
-            + 'Alternatively, you can use '
-            + '<a target="_new" href="https://wiki.0x2620.org/wiki/pandora_client">pandora_client</a>.'
-        );
-        $actionButton.hide();
     }
     $content.append($info);
     $content.append($status);
@@ -138,14 +121,14 @@ pandora.ui.uploadDialog = function(data) {
         };
     }
 
-    function resetProgress() {
+    function resetProgress(status) {
         $progress = Ox.Progressbar({
             progress: 0,
             showPercent: true,
             showTime: true,
             width: 304
         });
-        $status.html('').append($progress);
+        $status.html(status || '').append($progress);
     }
 
     function encode() {
@@ -153,6 +136,7 @@ pandora.ui.uploadDialog = function(data) {
             info = JSON.parse(pandora.firefogg.sourceInfo),
             item,
             oshash = info.oshash;
+        $info.html('<b>' + filename + '</b><br>encoding...');
         resetProgress();
         pandora.api.addMedia({
             filename: filename,
@@ -171,13 +155,26 @@ pandora.ui.uploadDialog = function(data) {
                         return;
                     }
                     setTimeout(function() {
-                        //$status.html('uploading... ');
+                        $info.html('<b>' + filename + '</b><br>uploading...');
-                        pandora.$ui.upload = pandora.ui.upload(oshash, file)
+                        uploadStream(item, oshash, file);
-                            .bindEvent({
+                    });
-                                progress: function(data) {
-                                    var progress = data.progress || 0;
-                                    $progress.options({progress: 0.5 + progress / 2});
                 },
+                function(progress) {
+                    progress = JSON.parse(progress).progress || 0;
+                    $progress.options({progress: progress});
+                }
+            );
+        });
+    }
+
+    function uploadStream(item, oshash, file) {
+        var format = pandora.site.video.formats[0],
+            resolution = Ox.max(pandora.site.video.resolutions);
+        pandora.$ui.upload = pandora.chunkupload({
+            file: file,
+            url: '/api/upload/?profile=' + resolution + 'p.' + format + '&id=' + oshash,
+            data: {}
+        }).bindEvent({
             done: function(data) {
                 if (data.progress == 1) {
                     Ox.Request.clearCache();
@@ -199,15 +196,56 @@ pandora.ui.uploadDialog = function(data) {
                         line: 1
                     });
                 }
-                               }
-                            });
-                    });
             },
-                function(progress) {
+            progress: function(data) {
-                    progress = JSON.parse(progress).progress || 0;
+                $progress.options({progress: data.progress || 0});
-                    $progress.options({progress: progress / 2});
+            },
+        });
     }
-            );
+
+    function upload(file) {
+        resetProgress();
+        $info.html('Uploading ' + file.name);
+        Ox.oshash(file, function(oshash) {
+            pandora.api.addMedia({
+                filename: file.name,
+                id: oshash,
+                item: pandora.site.itemRequiresVideo ? undefined : pandora.user.ui.item
+            }, function(result) {
+                var item = result.data.item;
+                pandora.$ui.upload = pandora.chunkupload({
+                    file: file,
+                    url: '/api/upload/direct/',
+                    data: {
+                        id: oshash
+                    }
+                }).bindEvent({
+                    done: function(data) {
+                        if (data.progress == 1) {
+                            Ox.Request.clearCache();
+                            if (pandora.user.ui.item == item && pandora.user.ui.itemView == 'files') {
+                                pandora.$ui.item.reload();
+                            } else {
+                                pandora.UI.set({
+                                    item: item,
+                                    itemView: 'files'
+                                });
+                            }
+                            that.close();
+                        } else {
+                            $status.html(cancelled ? 'Upload cancelled.' : 'Upload failed.');
+                            !cancelled && pandora.api.log({
+                                text: data.responseText,
+                                url: '/' + item,
+                                line: 1
+                            });
+                        }
+                    },
+                    progress: function(data) {
+                        $progress.options({progress: data.progress || 0});
+                    }
+                });
+            });
         });
     }