154 lines
7 KiB
Handlebars
154 lines
7 KiB
Handlebars
<div class="row row--tall row--padded flex-container">
|
|
<form>
|
|
<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 id="primary-dropzone" class="dropzone row row--tall flex-container flex-container--center" ondrop="drop_handler(event);" ondragover="dragover_handler(event);" ondragend="dragend_handler(event)" ondragenter="dragenter_handler(event)" ondragleave="dragexit_handler(event)" onclick="triggerFileChooser('siofu_input', event)">
|
|
<div id="primary-dropzone-instructions">
|
|
<div class="info-message-placeholder">
|
|
<div class="info-message info-message--failure" id="input-error-file-selection" hidden="true"></div>
|
|
</div>
|
|
<p>Drag & drop image or video here to publish</p>
|
|
<p class="fine-print">OR</p>
|
|
<p class="blue-underlined-pointer">CHOOSE FILE</p>
|
|
</div>
|
|
<div id="dropbzone-dragover" class="hidden">
|
|
<p class="blue">Drop it.</p>
|
|
</div>
|
|
</div>
|
|
<div id="publish-form" class="hidden">
|
|
<div class="column column--10">
|
|
<!-- title input -->
|
|
<input type="text" id="publish-title" class="input-text input-text--large input-text--full-width" placeholder="Give your post a title...">
|
|
</div>
|
|
<div class="column column--5 column--med-10" >
|
|
<!-- preview -->
|
|
<div class="row row--padded">
|
|
<div id="asset-preview-holder" class="dropzone" ondrop="drop_handler(event);" ondragover="dragover_handler(event);" ondragend="dragend_handler(event)" onmouseenter="showInstructions()" onmouseleave="hideInstructions()" onclick="triggerFileChooser('siofu_input', event)">
|
|
<div id="asset-preview-target"></div>
|
|
<div id="preview-dropzone-instructions" class="hidden">
|
|
<p>Drag & drop image or video here</p>
|
|
<p class="fine-print">OR</p>
|
|
<p class="blue-underlined-pointer">CHOOSE FILE</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div><div class="column column--5 column--med-10 align-content-top">
|
|
<div id="publish-active-area">
|
|
{{> publishForm-Channel}}
|
|
{{> publishForm-Url}}
|
|
{{> publishForm-Thumbnail}}
|
|
{{> publishForm-Details}}
|
|
{{> publishForm-Submit}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="publish-status" class="hidden">
|
|
<div id="publish-update" class="row align-content-center"></div>
|
|
<div id="publish-progress-bar" class="row align-content-center"></div>
|
|
<div id="upload-percent" class="row align-content-center"></div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<script src="/socket.io/socket.io.js"></script>
|
|
<script src="/siofu/client.js"></script>
|
|
<script typ="text/javascript">
|
|
|
|
checkCookie();
|
|
|
|
const socket = io();
|
|
const uploader = new SocketIOFileUpload(socket);
|
|
let stagedFiles = null;
|
|
|
|
const publishFormWrapper = document.getElementById('publish-form');
|
|
const publishStatus = document.getElementById('publish-status');
|
|
const publishUpdate = document.getElementById('publish-update');
|
|
const publishProgressBar = document.getElementById('publish-progress-bar');
|
|
const uploadPercent = document.getElementById('upload-percent');
|
|
|
|
/* socketio-file-upload listeners */
|
|
uploader.addEventListener('start', function(event){
|
|
console.log('starting upload');
|
|
addInputValuesToFileMetaData(event)
|
|
// hide the publish tool
|
|
hidePublishTools();
|
|
// show the progress status and animation
|
|
showPublishStatus();
|
|
showPublishProgressBar();
|
|
});
|
|
uploader.addEventListener('progress', function(event){
|
|
var percent = event.bytesLoaded / event.file.size * 100;
|
|
updatePublishStatus('<p>File is loading to server</p>')
|
|
updateUploadPercent(`<p>${percent.toFixed(2)}%</p>`)
|
|
});
|
|
/* socket.io message listeners */
|
|
socket.on('publish-update', function(msg){
|
|
updatePublishStatus(`<p>${msg}</p>`);
|
|
updateUploadPercent(`<p>Curious what magic is happening here? <a target="blank" href="https://lbry.io/faq/what-is-lbry">learn more</a></p>`);
|
|
});
|
|
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>');
|
|
hidePublishProgressBar();
|
|
hideUploadPercent();
|
|
});
|
|
socket.on('publish-complete', function(msg){
|
|
const showUrl = msg.result.claim_id + "/" + msg.name;
|
|
// update status
|
|
updatePublishStatus('<p>Your publish is complete! You are being redirected to it now.</p>');
|
|
updateUploadPercent('<p><a target="_blank" href="\' + showUrl + \'">If you do not get redirected, click here.</a></p>')
|
|
// redirect the user
|
|
window.location.href = showUrl;
|
|
});
|
|
|
|
function hidePublishTools() {
|
|
publishFormWrapper.setAttribute('class', 'hidden');
|
|
}
|
|
// publish status functions
|
|
function showPublishStatus() {
|
|
publishStatus.setAttribute('class', 'row row--tall flex-container flex-container--center');
|
|
}
|
|
function updatePublishStatus(msg){
|
|
publishUpdate.innerHTML = msg;
|
|
}
|
|
// progress bar functions
|
|
function showPublishProgressBar(){
|
|
createProgressBar(publishProgressBar, 12);
|
|
}
|
|
function hidePublishProgressBar(){
|
|
publishProgressBar.hidden = true;
|
|
}
|
|
// upload percent functions
|
|
function updateUploadPercent(msg){
|
|
uploadPercent.innerHTML = msg;
|
|
}
|
|
function hideUploadPercent(){
|
|
uploadPercent.hidden = true;
|
|
}
|
|
|
|
function addInputValuesToFileMetaData(event) {
|
|
// get values from inputs
|
|
const name = document.getElementById('claim-name-input').value;
|
|
const title = document.getElementById('publish-title').value;
|
|
const description = document.getElementById('publish-description').value;
|
|
const license = document.getElementById('publish-license').value;
|
|
const nsfw = document.getElementById('publish-nsfw').checked;
|
|
const anonymous = document.getElementById('anonymous-select').checked;
|
|
const channel = document.getElementById('channel-name-select').value;
|
|
const thumbnail = document.getElementById('claim-thumbnail-input').value;
|
|
// set values on file meta data
|
|
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;
|
|
console.log('anonymous?', anonymous);
|
|
if (!anonymous) {
|
|
console.log('channel:', channel);
|
|
event.file.meta.channel = channel;
|
|
}
|
|
if (thumbnail && (thumbnail.trim !== '')){
|
|
event.file.meta.thumbnail = thumbnail;
|
|
}
|
|
}
|
|
</script>
|