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

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

@ -1,10 +1,10 @@
function showInstructions () { 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; document.getElementById('asset-preview').style.opacity = 0.3;
} }
function hideInstructions () { function hideInstructions () {
document.getElementById('preview-dropzone-instructions').hidden = true; document.getElementById('preview-dropzone-instructions').setAttribute('class', 'hidden');
document.getElementById('asset-preview').style.opacity = 1; 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') { if (anonymousOrInChannel === 'anonymous') {
channelName = null; channelName = null;
}; };
console.log('channel name:', channelName);
// validate, submit, and handle response // validate, submit, and handle response
validateFilePublishSubmission(stagedFiles, claimName, channelName) validateFilePublishSubmission(stagedFiles, claimName, channelName)
.then(() => { .then(() => {

2
routes/sockets-routes.js
View file

@ -34,7 +34,7 @@ module.exports = (app, siofu, hostedContentPath) => {
uploader.on('saved', ({ file }) => { uploader.on('saved', ({ file }) => {
if (file.success) { if (file.success) {
logger.debug(`Client successfully uploaded ${file.name}`); 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 // NOTE: need to validate that client has the credentials to the channel they chose
// otherwise they could circumvent security. // otherwise they could circumvent security.

49
views/index.handlebars
View file

@ -4,12 +4,12 @@
</form> </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" 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 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 class="info-message info-message--failure" id="input-error-file-selection" hidden="true"></div>
</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>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> </div>
<div id="publish-form" class="hidden"> <div id="publish-form" class="hidden">
@ -22,12 +22,10 @@
<div class="row row--padded"> <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-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="asset-preview-target"></div>
<div id="preview-dropzone-instructions" class="flex-container" hidden="true"> <div id="preview-dropzone-instructions" class="hidden">
<div class="dropzone-instructions"> <p>Drag & drop image or video here</p>
<p>Drag & drop image or video here</p> <p>OR</p>
<p>OR</p> <label class="input-file-label">CHOOSE FILE</label>
<label class="input-file-label">CHOOSE FILE</label>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -42,10 +40,10 @@
</div> </div>
</div> </div>
<div class="hidden"> <div id="publish-status" class="hidden">
<div id="publish-status" class="row align-content-center" hidden="true"></div> <div id="publish-update" class="row align-content-center"></div>
<div id="publish-progress-bar" class="row align-content-center" hidden="true"></div> <div id="publish-progress-bar" class="row align-content-center"></div>
<div id="upload-percent" class="row align-content-center" hidden="true"></div> <div id="upload-percent" class="row align-content-center"></div>
</div> </div>
</div> </div>
@ -62,6 +60,7 @@
const publishFormWrapper = document.getElementById('publish-form'); const publishFormWrapper = document.getElementById('publish-form');
const publishStatus = document.getElementById('publish-status'); const publishStatus = document.getElementById('publish-status');
const publishUpdate = document.getElementById('publish-update');
const publishProgressBar = document.getElementById('publish-progress-bar'); const publishProgressBar = document.getElementById('publish-progress-bar');
const uploadPercent = document.getElementById('upload-percent'); const uploadPercent = document.getElementById('upload-percent');
@ -73,17 +72,16 @@
hidePublishTools(); hidePublishTools();
// show the progress status and animation // show the progress status and animation
showPublishStatus(); showPublishStatus();
updatePublishStatus('File is loading to server')
showPublishProgressBar(); showPublishProgressBar();
showUploadPercent();
}); });
uploader.addEventListener('progress', function(event){ uploader.addEventListener('progress', function(event){
var percent = event.bytesLoaded / event.file.size * 100; 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.io message listeners */
socket.on('publish-status', function(msg){ socket.on('publish-update', function(msg){
updatePublishStatus(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>`); 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){ socket.on('publish-failure', function(msg){
@ -94,35 +92,30 @@
socket.on('publish-complete', function(msg){ socket.on('publish-complete', function(msg){
const showUrl = msg.result.claim_id + "/" + msg.name; const showUrl = msg.result.claim_id + "/" + msg.name;
// update status // 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>'); updatePublishStatus('<p>Your publish is complete! You are being redirected to it now.</p>');
hidePublishProgressBar(); updateUploadPercent('<p><a target="_blank" href="\' + showUrl + \'">If you do not get redirected, click here.</a></p>')
hideUploadPercent();
// redirect the user // redirect the user
window.location.href = showUrl; window.location.href = showUrl;
}); });
function hidePublishTools() { function hidePublishTools() {
publishFormWrapper.hidden = true; publishFormWrapper.setAttribute('class', 'hidden');
} }
// publish status functions // publish status functions
function showPublishStatus() { function showPublishStatus() {
publishStatus.hidden = false; publishStatus.setAttribute('class', 'row row--tall flex-container flex-container--center');
} }
function updatePublishStatus(msg){ function updatePublishStatus(msg){
publishStatus.innerHTML = msg; publishUpdate.innerHTML = msg;
} }
// progress bar functions // progress bar functions
function showPublishProgressBar(){ function showPublishProgressBar(){
publishProgressBar.hidden = false;
createProgressBar(publishProgressBar, 12); createProgressBar(publishProgressBar, 12);
} }
function hidePublishProgressBar(){ function hidePublishProgressBar(){
publishProgressBar.hidden = true; publishProgressBar.hidden = true;
} }
// upload percent functions // upload percent functions
function showUploadPercent(){
uploadPercent.hidden = false;
}
function updateUploadPercent(msg){ function updateUploadPercent(msg){
uploadPercent.innerHTML = msg; uploadPercent.innerHTML = msg;
} }