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: [
{
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';
},

View file

@ -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.');

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,
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.hide();
$closeButton.options('title', 'Cancel');
$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... ');
pandora.$ui.upload = pandora.ui.upload(oshash, file)
.bindEvent({
progress: function(data) {
var progress = data.progress || 0;
$progress.options({progress: 0.5 + progress / 2});
$info.html('<b>' + filename + '</b><br>uploading...');
uploadStream(item, oshash, file);
});
},
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 = JSON.parse(progress).progress || 0;
$progress.options({progress: progress / 2});
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});
}
});
});
});
}