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

This commit is contained in:
j 2013-03-26 14:11:19 +00:00
parent bb2cc3ff16
commit b047c0e9c9
4 changed files with 127 additions and 263 deletions

View file

@ -76,7 +76,7 @@ pandora.ui.filesView = function(options, self) {
columns: [ columns: [
{ {
clickable: function(data) { clickable: function(data) {
return true; return !data.encoding;
}, },
format: function(value, data) { format: function(value, data) {
return $('<img>') return $('<img>')
@ -99,7 +99,9 @@ pandora.ui.filesView = function(options, self) {
title: 'Status', title: 'Status',
titleImage: 'check', titleImage: 'check',
tooltip: function (data) { 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' ? 'Use this file'
: 'Dont use this file'; : 'Dont use this file';
}, },

View file

@ -14,7 +14,7 @@ pandora.ui.importAnnotations = function(data) {
importButton, importButton,
selectLayer, selectLayer,
selectFile, selectFile,
that = pandora.ui.iconDialog({ that = Ox.Dialog({
buttons: [ buttons: [
Ox.Button({ Ox.Button({
id: 'close', id: 'close',
@ -36,11 +36,13 @@ pandora.ui.importAnnotations = function(data) {
}) })
], ],
closeButton: true, closeButton: true,
text: content, content: content,
keys: { keys: {
'escape': 'close' 'escape': 'close'
}, },
height: 128,
removeOnClose: true, removeOnClose: true,
width: 368,
title: 'Import Annotations' title: 'Import Annotations'
}) })
.bindEvent({ .bindEvent({
@ -77,7 +79,9 @@ pandora.ui.importAnnotations = function(data) {
layer: layer layer: layer
}, function(result) { }, function(result) {
if (result.data.taskId) { 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) { pandora.wait(result.data.taskId, function(result) {
if(result.data.status == 'SUCCESS') { if(result.data.status == 'SUCCESS') {
setStatus(annotations.length + ' annotations imported.'); setStatus(annotations.length + ' annotations imported.');

View file

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

View file

@ -5,6 +5,7 @@ pandora.ui.uploadDialog = function(data) {
var cancelled = false, var cancelled = false,
file, file,
hasFirefogg = !(typeof Firefogg == 'undefined'),
selectFile, selectFile,
$actionButton, $actionButton,
$closeButton, $closeButton,
@ -18,12 +19,22 @@ pandora.ui.uploadDialog = function(data) {
$closeButton = Ox.Button({ $closeButton = Ox.Button({
id: 'close', id: 'close',
title: 'Close' title: 'Close'
}).css({
float: 'left'
}).bindEvent({ }).bindEvent({
click: function() { click: function() {
that.triggerEvent('close'); 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', id: 'action',
title: 'Select Video' title: 'Select Video'
}).bindEvent({ }).bindEvent({
@ -39,11 +50,24 @@ pandora.ui.uploadDialog = function(data) {
$actionButton.options('title', 'Select Video'); $actionButton.options('title', 'Select Video');
$closeButton.show(); $closeButton.show();
} else { } else {
$actionButton.options('title', 'Cancel'); $closeButton.options('title', 'Cancel');
$closeButton.hide(); $actionButton.hide().options('title', 'Select Video');
encode(); 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, 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) { if (!pandora.site.itemRequiresVideo && !pandora.user.ui.item) {
$info.html( $info.html(
'You can only upload a video to an existing ' '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.' + ' you want to upload exists and create otherwise.'
); );
$actionButton.hide(); $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($info);
$content.append($status); $content.append($status);
@ -138,14 +121,14 @@ pandora.ui.uploadDialog = function(data) {
}; };
} }
function resetProgress() { function resetProgress(status) {
$progress = Ox.Progressbar({ $progress = Ox.Progressbar({
progress: 0, progress: 0,
showPercent: true, showPercent: true,
showTime: true, showTime: true,
width: 304 width: 304
}); });
$status.html('').append($progress); $status.html(status || '').append($progress);
} }
function encode() { function encode() {
@ -153,6 +136,7 @@ pandora.ui.uploadDialog = function(data) {
info = JSON.parse(pandora.firefogg.sourceInfo), info = JSON.parse(pandora.firefogg.sourceInfo),
item, item,
oshash = info.oshash; oshash = info.oshash;
$info.html('<b>' + filename + '</b><br>encoding...');
resetProgress(); resetProgress();
pandora.api.addMedia({ pandora.api.addMedia({
filename: filename, filename: filename,
@ -171,46 +155,100 @@ pandora.ui.uploadDialog = function(data) {
return; return;
} }
setTimeout(function() { 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});
},
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'
});
}
delete pandora.firefogg;
that.close();
} else {
$status.html('Upload Failed.');
pandora.api.log({
text: data.responseText,
url: '/' + item,
line: 1
});
}
}
});
}); });
}, },
function(progress) { function(progress) {
progress = JSON.parse(progress).progress || 0; progress = JSON.parse(progress).progress || 0;
$progress.options({progress: progress / 2}); $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();
if (pandora.user.ui.item == item && pandora.user.ui.itemView == 'files') {
pandora.$ui.item.reload();
} else {
pandora.UI.set({
item: item,
itemView: 'files'
});
}
delete pandora.firefogg;
that.close();
} else {
$status.html('Upload Failed.');
pandora.api.log({
text: data.responseText,
url: '/' + item,
line: 1
});
}
},
progress: function(data) {
$progress.options({progress: data.progress || 0});
},
});
}
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});
}
});
});
});
}
function getEncodingOptions(info) { function getEncodingOptions(info) {
var bpp = 0.17, var bpp = 0.17,
dar, dar,