forked from 0x2620/pandora
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:
parent
bb2cc3ff16
commit
b047c0e9c9
4 changed files with 127 additions and 263 deletions
|
@ -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';
|
||||||
},
|
},
|
||||||
|
|
|
@ -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.');
|
||||||
|
|
|
@ -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;
|
|
||||||
};
|
|
|
@ -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,
|
||||||
|
|
Loading…
Reference in a new issue