spee.ch/views/index.handlebars

164 lines
7.3 KiB
Handlebars
Raw Normal View History

<div class="row row--full-height row--wide">
2017-10-11 22:33:56 +02:00
<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>
2017-10-04 18:05:35 +02:00
<div id="primary-dropzone-wrapper">
2017-10-11 22:33:56 +02:00
<div id="primary-dropzone" class="dropzone" 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)">
2017-10-12 22:10:44 +02:00
<div id="primary-dropzone-instructions" class="align-content-vcenter-hcenter">
<div class="info-message-placeholder align-content-center">
<div class="info-message info-message--failure" id="input-error-file-selection" hidden="true"></div>
2017-10-12 18:24:03 +02:00
</div>
2017-10-03 19:05:09 +02:00
<div class="row">
2017-10-16 21:04:02 +02:00
<p class="instructions-text--large">Drag & drop image or video here to publish</p>
2017-10-03 19:05:09 +02:00
<p>OR</p>
2017-10-16 21:04:02 +02:00
<p class="instructions-text--large"><label class="input-file-label instructions-text--large">CHOOSE FILE</label></p>
2017-10-03 19:05:09 +02:00
</div>
2017-10-02 20:47:12 +02:00
</div>
</div>
2017-09-29 23:24:53 +02:00
</div>
2017-10-02 20:47:12 +02:00
<div id="publish-form-wrapper" hidden="true">
2017-10-03 02:36:25 +02:00
<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...">
2017-10-03 02:36:25 +02:00
</div>
2017-10-04 01:26:43 +02:00
<div class="column column--5 column--med-10 align-content-top" >
2017-10-03 02:36:25 +02:00
<!-- preview -->
<div class="row">
2017-10-10 20:52:34 +02:00
<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)">
2017-10-03 23:52:50 +02:00
<div id="asset-preview-target"></div>
2017-10-12 22:10:44 +02:00
<div id="preview-dropzone-instructions" class="align-content-vcenter-hcenter" hidden="true">
2017-10-03 23:52:50 +02:00
<div class="row">
<p>Drag & drop image or video here</p>
<p>OR</p>
2017-10-11 22:33:56 +02:00
<label class="input-file-label">CHOOSE FILE</label>
2017-10-03 23:52:50 +02:00
</div>
</div>
</div>
2017-10-03 02:36:25 +02:00
</div>
2017-10-04 01:26:43 +02:00
</div><div class="column column--5 column--med-10 align-content-top">
2017-10-10 19:14:43 +02:00
<div id="publish-active-area">
{{> publishForm-Channel}}
{{> publishForm-Url}}
{{> publishForm-Thumbnail}}
{{> publishForm-Details}}
{{> publishForm-Submit}}
</div>
2017-09-30 00:56:13 +02:00
</div>
2017-09-29 23:24:53 +02:00
</div>
2017-10-12 22:10:44 +02:00
<div class="align-content-vcenter-hcenter">
<div id="publish-status" class="row align-content-center" hidden="true"></div>
<div id="publish-progress-bar" class="row align-content-center" hidden="true"></div>
<div id="upload-percent" class="row align-content-center" hidden="true"></div>
</div>
2017-09-29 23:24:53 +02:00
</div>
2017-06-10 01:46:57 +02:00
2017-10-02 20:47:12 +02:00
2017-06-10 01:46:57 +02:00
<script src="/socket.io/socket.io.js"></script>
<script src="/siofu/client.js"></script>
<script typ="text/javascript">
2017-10-03 23:52:50 +02:00
checkCookie();
2017-10-12 22:10:44 +02:00
const socket = io();
const uploader = new SocketIOFileUpload(socket);
let stagedFiles = null;
const publishFormWrapper = document.getElementById('publish-form-wrapper');
const publishStatus = document.getElementById('publish-status');
const publishProgressBar = document.getElementById('publish-progress-bar');
const uploadPercent = document.getElementById('upload-percent');
2017-10-03 19:05:09 +02:00
/* socketio-file-upload listeners */
uploader.addEventListener('start', function(event){
2017-10-10 03:29:40 +02:00
console.log('starting upload');
2017-10-12 22:10:44 +02:00
addInputValuesToFileMetaData(event)
// hide the publish tool
hidePublishTools();
2017-09-30 00:56:13 +02:00
// show the progress status and animation
2017-10-12 22:10:44 +02:00
showPublishStatus();
updatePublishStatus('File is loading to server')
showPublishProgressBar();
showUploadPercent();
});
uploader.addEventListener('progress', function(event){
var percent = event.bytesLoaded / event.file.size * 100;
2017-10-12 22:10:44 +02:00
updateUploadPercent(`${percent.toFixed(2)} %`)
});
/* socket.io message listeners */
socket.on('publish-status', function(msg){
updatePublishStatus(msg);
2017-10-16 21:04:02 +02:00
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){
2017-10-12 22:10:44 +02:00
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){
2017-10-12 22:10:44 +02:00
const showUrl = msg.result.claim_id + "/" + msg.name;
2017-09-30 00:56:13 +02:00
// 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>');
2017-10-12 22:10:44 +02:00
hidePublishProgressBar();
hideUploadPercent();
2017-09-30 00:56:13 +02:00
// redirect the user
window.location.href = showUrl;
});
2017-10-12 22:10:44 +02:00
function hidePublishTools() {
publishFormWrapper.hidden = true;
}
// publish status functions
function showPublishStatus() {
publishStatus.hidden = false;
}
function updatePublishStatus(msg){
publishStatus.innerHTML = msg;
}
// progress bar functions
function showPublishProgressBar(){
publishProgressBar.hidden = false;
createProgressBar(publishProgressBar, 12);
}
function hidePublishProgressBar(){
publishProgressBar.hidden = true;
}
// upload percent functions
function showUploadPercent(){
uploadPercent.hidden = false;
}
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>