LBRYCommunity/spee.ch
1
0
Fork 0
Code Issues 95 Pull requests 2 Projects Releases 4 Packages Wiki Activity

updated publish process to show in flexboxes

Browse source
This commit is contained in:
bill bittner 2017-10-23 15:10:49 -07:00
parent 552e2f4965
commit bccbb8f4b1
5 changed files with 32 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
public/assets/css/general.css
View file

@ -33,6 +33,7 @@ body, .flex-container {
.flex-container--center {
justify-content: center;
}
.hidden {
display: none;
}
@ -460,6 +461,7 @@ table {
.dropzone {
border: 2px dashed #9b9b9b;
text-align: center;
position: relative;
}
.dropzone:hover, .dropzone--drag-over {
@ -468,8 +470,12 @@ table {
background-color: #FCFCFC;
}
.dropzone-instructions {
flex: 0 1 auto;
.position-absolute {
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
}
#asset-preview-holder {

4
public/assets/js/dropzoneFunctions.js
View file

@ -1,10 +1,10 @@
function showInstructions () {
document.getElementById('preview-dropzone-instructions').hidden = false;
document.getElementById('preview-dropzone-instructions').setAttribute('class', 'flex-container flex-container--center position-absolute');
document.getElementById('asset-preview').style.opacity = 0.3;
}
function hideInstructions () {
document.getElementById('preview-dropzone-instructions').hidden = true;
document.getElementById('preview-dropzone-instructions').setAttribute('class', 'hidden');
document.getElementById('asset-preview').style.opacity = 1;
}

1
public/assets/js/publishFileFunctions.js
View file

@ -81,7 +81,6 @@ function publishStagedFile(event) {
if (anonymousOrInChannel === 'anonymous') {
channelName = null;
};
console.log('channel name:', channelName);
// validate, submit, and handle response
validateFilePublishSubmission(stagedFiles, claimName, channelName)
.then(() => {

2
routes/sockets-routes.js
View file

@ -34,7 +34,7 @@ module.exports = (app, siofu, hostedContentPath) => {
uploader.on('saved', ({ file }) => {
if (file.success) {
logger.debug(`Client successfully uploaded ${file.name}`);
socket.emit('publish-status', 'File upload successfully completed. Your image is being published to LBRY (this might take a second)...');
socket.emit('publish-update', 'File upload successfully completed. Your image is being published to LBRY (this might take a second)...');
// /*
// NOTE: need to validate that client has the credentials to the channel they chose
// otherwise they could circumvent security.

43
views/index.handlebars
View file

@ -4,12 +4,12 @@
</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 dropzone-instructions">
<div class="info-message-placeholder">
<div class="info-message info-message--failure" id="input-error-file-selection" hidden="true"></div>
</div>
<p class="dropzone-instructions">Drag & drop image or video here to publish</p>
<p>Drag & drop image or video here to publish</p>
<p>OR</p>
<p class="dropzone-instructions"><label class="input-file-label">CHOOSE FILE</label></p>
<p><label class="input-file-label">CHOOSE FILE</label></p>
</div>
</div>
<div id="publish-form" class="hidden">
@ -22,15 +22,13 @@
<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="flex-container" hidden="true">
<div class="dropzone-instructions">
<div id="preview-dropzone-instructions" class="hidden">
<p>Drag & drop image or video here</p>
<p>OR</p>
<label class="input-file-label">CHOOSE FILE</label>
</div>
</div>
</div>
</div>
</div><div class="column column--5 column--med-10 align-content-top">
<div id="publish-active-area">
{{> publishForm-Channel}}
@ -42,10 +40,10 @@
</div>
</div>
<div class="hidden">
<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 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>
@ -62,6 +60,7 @@
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');
@ -73,17 +72,16 @@
hidePublishTools();
// show the progress status and animation
showPublishStatus();
updatePublishStatus('File is loading to server')
showPublishProgressBar();
showUploadPercent();
});
uploader.addEventListener('progress', function(event){
var percent = event.bytesLoaded / event.file.size * 100;
updateUploadPercent(`${percent.toFixed(2)} %`)
updatePublishStatus('<p>File is loading to server</p>')
updateUploadPercent(`<p>${percent.toFixed(2)}%</p>`)
});
/* socket.io message listeners */
socket.on('publish-status', function(msg){
updatePublishStatus(msg);
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){
@ -94,35 +92,30 @@
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><p><a target="_blank" href="' + showUrl + '">If you do not get redirected, click here.</a></p>');
hidePublishProgressBar();
hideUploadPercent();
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.hidden = true;
publishFormWrapper.setAttribute('class', 'hidden');
}
// publish status functions
function showPublishStatus() {
publishStatus.hidden = false;
publishStatus.setAttribute('class', 'row row--tall flex-container flex-container--center');
}
function updatePublishStatus(msg){
publishStatus.innerHTML = msg;
publishUpdate.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;
}