119 lines
5 KiB
Handlebars
119 lines
5 KiB
Handlebars
<script src="/assets/js/generalFunctions.js"></script>
|
|
|
|
{{> topBar}}
|
|
<div class="row row--full-height">
|
|
<div id="publish-dropzone-wrapper">
|
|
<div id="publish-dropzone" class="align-content-center" ondrop="drop_handler(event);" ondragover="dragover_handler(event);" ondragend="dragend_handler(event)">
|
|
<div id="publish-dropzone-instructions">
|
|
<p>Drag & drop image or video here</p>
|
|
<p>OR</p>
|
|
<form>
|
|
<div class="info-message info-message--failure" id="input-error-file-selection" hidden="true"></div>
|
|
<label class="input-file-label" for="siofu_input">CHOOSE FILE</label>
|
|
<input class=" input-file" type="file" id="siofu_input" name="siofu_input" accept="video/*,image/*" onchange="previewAndStageFile(event.target.files[0])" enctype="multipart/form-data"/>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="publish-form-wrapper" hidden="true">
|
|
<div class="column column--4 align-content-top" >
|
|
<div id="asset-preview-holder" class="asset-show"></div>
|
|
</div><div class="column column--1" ></div><div class="column column--5 align-content-top">
|
|
<div id="publish-status" hidden="true"></div>
|
|
<div id="publish-progress-bar" hidden="true"></div>
|
|
<div id="publish-active-area">
|
|
{{> publishForm-Channel}}
|
|
{{> publishForm-Url}}
|
|
{{> publishForm-Details}}
|
|
{{> publishForm-Submit}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<script src="/socket.io/socket.io.js"></script>
|
|
<script src="/siofu/client.js"></script>
|
|
<script src="/assets/js/validationFunctions.js"></script>
|
|
<script src="/assets/js/publishFileFunctions.js"></script>
|
|
<script typ="text/javascript">
|
|
var socket = io();
|
|
var uploader = new SocketIOFileUpload(socket);
|
|
var stagedFiles = null;
|
|
/* drop zone functions */
|
|
function drop_handler(ev) {
|
|
ev.preventDefault();
|
|
// if dropped items aren't files, reject them
|
|
var dt = ev.dataTransfer;
|
|
if (dt.items) {
|
|
if (dt.items[0].kind == 'file') {
|
|
var droppedFile = dt.items[0].getAsFile();
|
|
previewAndStageFile(droppedFile);
|
|
}
|
|
}
|
|
}
|
|
function dragover_handler(ev) {
|
|
ev.preventDefault();
|
|
}
|
|
function dragend_handler(ev) {
|
|
var dt = ev.dataTransfer;
|
|
if (dt.items) {
|
|
for (var i = 0; i < dt.items.length; i++) {
|
|
dt.items.remove(i);
|
|
}
|
|
} else {
|
|
ev.dataTransfer.clearData();
|
|
}
|
|
}
|
|
/* socketio-file-upload listeners */
|
|
function updatePublishStatus(msg){
|
|
document.getElementById('publish-status').innerHTML = msg;
|
|
}
|
|
uploader.addEventListener('start', function(event){
|
|
var name = document.getElementById('claim-name-input').value;
|
|
var title = document.getElementById('publish-title').value;
|
|
var description = document.getElementById('publish-description').value;
|
|
var license = document.getElementById('publish-license').value;
|
|
var nsfw = document.getElementById('publish-nsfw').checked;
|
|
var channel = document.getElementById('channel-name-select').value;
|
|
event.file.meta.name = name;
|
|
event.file.meta.title = title;
|
|
event.file.meta.description = description;
|
|
event.file.meta.license = license;
|
|
event.file.meta.nsfw = nsfw;
|
|
event.file.meta.type = stagedFiles[0].type;
|
|
event.file.meta.channel = channel;
|
|
// hide the submit area
|
|
document.getElementById('publish-active-area').hidden = true;
|
|
// show the progress status and animation
|
|
document.getElementById('publish-status').hidden = false;
|
|
document.getElementById('publish-progress-bar').hidden = false;
|
|
createProgressBar(document.getElementById('publish-progress-bar'), 12);
|
|
// google analytics
|
|
ga('send', {
|
|
hitType: 'event',
|
|
eventCategory: 'publish',
|
|
eventAction: name
|
|
});
|
|
});
|
|
uploader.addEventListener('progress', function(event){
|
|
var percent = event.bytesLoaded / event.file.size * 100;
|
|
updatePublishStatus('File is ' + percent.toFixed(2) + '% loaded to the server');
|
|
});
|
|
/* socket.io message listeners */
|
|
socket.on('publish-status', function(msg){
|
|
updatePublishStatus(msg);
|
|
});
|
|
socket.on('publish-failure', function(msg){
|
|
updatePublishStatus('<p> --(✖╭╮✖)→ </p><p>' + JSON.stringify(msg) + '</p><strong>For help, post the above error text in the #speech channel on the <a href="https://lbry.slack.com/" target="_blank">lbry slack</a></strong>');
|
|
document.getElementById('publish-progress-bar').hidden = true;
|
|
});
|
|
socket.on('publish-complete', function(msg){
|
|
var showUrl = msg.result.claim_id + "/" + msg.name;
|
|
// update status
|
|
updatePublishStatus('<p>Your publish is complete! You are being redirected to it now.</p><p><a target="_blank" href="' + showUrl + '">If you do not get redirected, click here.</a></p>');
|
|
document.getElementById('publish-progress-bar').hidden = true;
|
|
// redirect the user
|
|
window.location.href = showUrl;
|
|
});
|
|
</script>
|