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

put all publish functions into an object

Browse source
This commit is contained in:
bill bittner 2017-11-02 15:12:26 -07:00
parent c658f67ec4
commit 934c0fedd1
8 changed files with 141 additions and 147 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
config/development.json
View file

@ -1,6 +1,6 @@
{
"WalletConfig": {
"DefaultChannel": "@speechDev",
"DefaultChannel": "@speechDev"
},
"AnalyticsConfig":{
"GoogleId": "UA-100747990-1"

2
config/production.json
View file

@ -1,6 +1,6 @@
{
"WalletConfig": {
"DefaultChannel": "@speech",
"DefaultChannel": "@speech"
},
"AnalyticsConfig":{
"GoogleId": "UA-60403362-3"

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

@ -6,7 +6,7 @@ function drop_handler(event) {
if (dt.items) {
if (dt.items[0].kind == 'file') {
var droppedFile = dt.items[0].getAsFile();
previewAndStageFile(droppedFile);
publishFileFunctions.previewAndStageFile(droppedFile);
}
}
}

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

@ -1,77 +1,68 @@
/* publish functions */
let stagedFiles = null;
const previewReader = new FileReader();
function triggerFileChooser(fileInputId) {
document.getElementById(fileInputId).click();
}
function setImagePreview (selectedFile) {
const assetPreview = document.getElementById('asset-preview-target');
const thumbnailInput = document.getElementById('claim-thumbnail-input');
const thumbnailInputTool = document.getElementById('publish-thumbnail');
if (selectedFile.type !== 'video/mp4') {
if (selectedFile.type === 'image/gif') {
assetPreview.innerHTML = `<p>loading preview...</p>`
}
previewReader.readAsDataURL(selectedFile);
previewReader.onloadend = function () {
assetPreview.innerHTML = '<img id="asset-preview" src="' + previewReader.result + '" alt="image preview"/>';
};
// clear & hide the thumbnail selection input
thumbnailInput.value = '';
thumbnailInputTool.hidden = true;
} else {
assetPreview.innerHTML = `<img id="asset-preview" src="/assets/img/video_thumb_default.png"/>`;
// clear & show the thumbnail selection input
thumbnailInput.value = '';
thumbnailInputTool.hidden = false;
}
}
function hidePrimaryDropzone () {
const primaryDropzone = document.getElementById('primary-dropzone');
const publishForm = document.getElementById('publish-form');
primaryDropzone.setAttribute('class', 'hidden');
publishForm.setAttribute('class', 'row')
}
function updateClaimNameInputWithFileName (selectedFile) {
const nameInput = document.getElementById('claim-name-input');
if (nameInput.value === "") {
var filename = selectedFile.name.substring(0, selectedFile.name.indexOf('.'))
nameInput.value = cleanseClaimName(filename);
checkClaimName(nameInput.value);
}
}
function previewAndStageFile(selectedFile){
const fileSelectionInputError = document.getElementById('input-error-file-selection');
// When a file is selected for publish, validate that file and
// stage it so it will be ready when the publish button is clicked
try {
validateFile(selectedFile); // validate the file's name, type, and size
} catch (error) {
showError(fileSelectionInputError, error.message);
return;
}
// set image preview, if an image was provided
setImagePreview(selectedFile);
// hide the primary drop zone
hidePrimaryDropzone();
// set the name input value to the image name if none is set yet
updateClaimNameInputWithFileName(selectedFile);
// store the selected file for upload
stagedFiles = [selectedFile];
}
function cancelPublish () {
window.location.href = '/';
}
var stagedFiles = null;
var publishFileFunctions = {
triggerFileChooser: function (fileInputId) {
document.getElementById(fileInputId).click();
},
cancelPublish: function () {
window.location.href = '/';
},
previewAndStageFile: function (selectedFile) {
const fileSelectionInputError = document.getElementById('input-error-file-selection');
// When a file is selected for publish, validate that file and
// stage it so it will be ready when the publish button is clicked
try {
validateFile(selectedFile); // validate the file's name, type, and size
} catch (error) {
showError(fileSelectionInputError, error.message);
return;
}
// set image preview, if an image was provided
this.setImagePreview(selectedFile);
// hide the primary drop zone
this.hidePrimaryDropzone();
// set the name input value to the image name if none is set yet
this.updateClaimNameInputWithFileName(selectedFile);
// store the selected file for upload
stagedFiles = [selectedFile];
},
hidePrimaryDropzone: function () {
const primaryDropzone = document.getElementById('primary-dropzone');
const publishForm = document.getElementById('publish-form');
primaryDropzone.setAttribute('class', 'hidden');
publishForm.setAttribute('class', 'row')
},
updateClaimNameInputWithFileName: function (selectedFile) {
const nameInput = document.getElementById('claim-name-input');
if (nameInput.value === "") {
var filename = selectedFile.name.substring(0, selectedFile.name.indexOf('.'))
nameInput.value = cleanseClaimName(filename);
checkClaimName(nameInput.value);
}
},
setImagePreview: function (selectedFile) {
const assetPreview = document.getElementById('asset-preview-target');
const thumbnailInput = document.getElementById('claim-thumbnail-input');
const thumbnailInputTool = document.getElementById('publish-thumbnail');
if (selectedFile.type !== 'video/mp4') {
const previewReader = new FileReader();
if (selectedFile.type === 'image/gif') {
assetPreview.innerHTML = `<p>loading preview...</p>`
}
previewReader.readAsDataURL(selectedFile);
previewReader.onloadend = function () {
assetPreview.innerHTML = '<img id="asset-preview" src="' + previewReader.result + '" alt="image preview"/>';
};
// clear & hide the thumbnail selection input
thumbnailInput.value = '';
thumbnailInputTool.hidden = true;
} else {
assetPreview.innerHTML = `<img id="asset-preview" src="/assets/img/video_thumb_default.png"/>`;
// clear & show the thumbnail selection input
thumbnailInput.value = '';
thumbnailInputTool.hidden = false;
}
},
returnNullOrChannel: function () {
const channelInput = document.getElementById('channel-name-select');
const radios = document.getElementsByName('anonymous-or-channel');
@ -123,28 +114,30 @@ var publishFileFunctions = {
var uri = "/api/publish";
var xhr = new XMLHttpRequest();
var fd = this.appendDataToFormData(file, metadata);
var that = this;
xhr.upload.addEventListener("loadstart", function(e) {
showUploadStartedMessage();
that.showUploadStartedMessage();
})
xhr.upload.addEventListener("progress", function(e) {
if (e.lengthComputable) {
var percentage = Math.round((e.loaded * 100) / e.total);
console.log('progress:', percentage);
showUploadProgressMessage(percentage);
that.showUploadProgressMessage(percentage);
}
}, false);
xhr.upload.addEventListener("load", function(e){
console.log('loaded 100%');
showFilePublishUpdate("Your file has been loaded, and is now being published to the blockchain. Sit tight...")
that.showFilePublishUpdate("Your file has been loaded, and is now being published to the blockchain. Sit tight...")
}, false);
xhr.open("POST", uri, true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
alert(xhr.responseText); // handle response.
showFilePublishComplete(xhr.responseText);
console.log('publish complete!');
that.showFilePublishComplete(JSON.parse(xhr.response).message);
} else {
showFilePublishFailure(xhr.responseText);
console.log(xhr.response);
that.showFilePublishFailure(JSON.parse(xhr.response).message);
}
} else {
console.log('xhr.readyState', xhr.readyState, 'xhr.status', xhr.status);
@ -181,67 +174,67 @@ var publishFileFunctions = {
return;
})
},
showUploadStartedMessage: function (){
console.log('starting upload');
// hide the publish tool
this.hidePublishTools();
// show the progress status and animation
this.showPublishStatus();
this.showPublishProgressBar();
},
showUploadProgressMessage: function (percentage){
this.updatePublishStatus('<p>File is loading to server</p>');
this.updateUploadPercent('<p class="blue">' + percentage + '</p>');
},
showFilePublishUpdate: function (msg) {
this.updatePublishStatus('<p>' + msg + '</p>');
this.updateUploadPercent('<p>Curious what magic is happening here? <a class="link--primary" target="blank" href="https://lbry.io/faq/what-is-lbry">Learn more.</a></p>');
},
showFilePublishFailure: function (msg){
this.updatePublishStatus('<p>Something went wrong...</p><p>' + msg + '</p><strong>For help, post the above error text in the #speech channel on the <a class="link--primary" href="https://discord.gg/YjYbwhS" target="_blank">lbry discord</a></strong>');
this.hidePublishProgressBar();
this.hideUploadPercent();
},
showFilePublishComplete: function (msg) {
console.log('Publish complete!');
const showUrl = msg.lbryTx.claim_id + "/" + msg.name;
// update status
this.updatePublishStatus('<p>Your publish is complete! You are being redirected to it now.</p>');
this.updateUploadPercent('<p><a class="link--primary" target="_blank" href="' + showUrl + '">If you do not get redirected, click here.</a></p>')
// redirect the user
window.location.href = showUrl;
},
hidePublishTools: function () {
const publishFormWrapper = document.getElementById('publish-form');
publishFormWrapper.setAttribute('class', 'hidden');
},
// publish status functions
showPublishStatus: function () {
const publishStatus = document.getElementById('publish-status');
publishStatus.setAttribute('class', 'row row--tall flex-container--column flex-container--center-center');
},
updatePublishStatus: function (msg){
const publishUpdate = document.getElementById('publish-update');
publishUpdate.innerHTML = msg;
},
// progress bar functions
showPublishProgressBar: function (){
const publishProgressBar = document.getElementById('publish-progress-bar');
createProgressBar(publishProgressBar, 12);
},
hidePublishProgressBar: function (){
const publishProgressBar = document.getElementById('publish-progress-bar');
publishProgressBar.hidden = true;
},
// upload percent functions
updateUploadPercent: function (msg){
const uploadPercent = document.getElementById('upload-percent');
uploadPercent.innerHTML = msg;
},
hideUploadPercent: function (){
const uploadPercent = document.getElementById('upload-percent');
uploadPercent.hidden = true;
},
}
function showUploadStartedMessage (){
console.log('starting upload');
// hide the publish tool
hidePublishTools();
// show the progress status and animation
showPublishStatus();
showPublishProgressBar();
};
function showUploadProgressMessage (percentage){
updatePublishStatus('<p>File is loading to server</p>')
updateUploadPercent(`<p class="blue">${percentage}%</p>`)
};
function showFilePublishUpdate (msg) {
updatePublishStatus(`<p>${msg}</p>`);
updateUploadPercent(`<p>Curious what magic is happening here? <a class="link--primary" target="blank" href="https://lbry.io/faq/what-is-lbry">Learn more.</a></p>`);
};
function showFilePublishFailure (msg){
updatePublishStatus('<p> --(✖╭╮✖)→ </p><p>' + JSON.stringify(msg) + '</p><strong>For help, post the above error text in the #speech channel on the <a class="link--primary" href="https://discord.gg/YjYbwhS" target="_blank">lbry discord</a></strong>');
hidePublishProgressBar();
hideUploadPercent();
};
function showFilePublishComplete (msg) {
console.log('Publish complete! message:', 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 class="link--primary" target="_blank" href="\' + showUrl + \'">If you do not get redirected, click here.</a></p>')
// redirect the user
// window.location.href = showUrl;
};
function hidePublishTools() {
const publishFormWrapper = document.getElementById('publish-form');
publishFormWrapper.setAttribute('class', 'hidden');
}
// publish status functions
function showPublishStatus() {
const publishStatus = document.getElementById('publish-status');
publishStatus.setAttribute('class', 'row row--tall flex-container--column flex-container--center-center');
}
function updatePublishStatus(msg){
const publishUpdate = document.getElementById('publish-update');
publishUpdate.innerHTML = msg;
}
// progress bar functions
function showPublishProgressBar(){
const publishProgressBar = document.getElementById('publish-progress-bar');
createProgressBar(publishProgressBar, 12);
}
function hidePublishProgressBar(){
const publishProgressBar = document.getElementById('publish-progress-bar');
publishProgressBar.hidden = true;
}
// upload percent functions
function updateUploadPercent(msg){
const uploadPercent = document.getElementById('upload-percent');
uploadPercent.innerHTML = msg;
}
function hideUploadPercent(){
const uploadPercent = document.getElementById('upload-percent');
uploadPercent.hidden = true;
}

2
public/assets/js/validationFunctions.js
View file

@ -38,7 +38,7 @@ function validateFile(file) {
// validation function that checks to make sure the claim name is valid
function validateClaimName (name) {
console.log('claim name:', name);
console.log('validating the claim name');
// ensure a name was entered
if (name.length < 1) {
throw new NameError("You must enter a name for your url");

1
routes/api-routes.js
View file

@ -129,6 +129,7 @@ module.exports = (app) => {
res.status(200).json({
success: true,
message: {
name,
url : `spee.ch/${result.claim_id}/${name}`,
lbryTx: result,
},

6
views/index.handlebars
View file

@ -1,8 +1,8 @@
<div class="row row--tall flex-container--column">
<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"/>
<input class="input-file" type="file" id="siofu_input" name="siofu_input" accept="video/*,image/*" onchange="publishFileFunctions.previewAndStageFile(event.target.files[0])" enctype="multipart/form-data"/>
</form>
<div id="primary-dropzone" class="dropzone row row--margined row--padded row--tall flex-container--column flex-container--center-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--margined row--padded row--tall flex-container--column flex-container--center-center" ondrop="drop_handler(event);" ondragover="dragover_handler(event);" ondragend="dragend_handler(event)" ondragenter="dragenter_handler(event)" ondragleave="dragexit_handler(event)" onclick="publishFileFunctions.triggerFileChooser('siofu_input', event)">
<div id="primary-dropzone-instructions">
<p class="info-message-placeholder info-message--failure" id="input-error-file-selection" hidden="true"></p>
<p>Drag & drop image or video here to publish</p>
@ -22,7 +22,7 @@
<div class="column column--5 column--sml-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)" ondragenter="preview_onmouseenter_handler()" ondragleave="preview_onmouseleave_handler()" onmouseenter="preview_onmouseenter_handler()" onmouseleave="preview_onmouseleave_handler()" onclick="triggerFileChooser('siofu_input', event)">
<div id="asset-preview-holder" class="dropzone" ondrop="drop_handler(event);" ondragover="dragover_handler(event);" ondragend="dragend_handler(event)" ondragenter="preview_onmouseenter_handler()" ondragleave="preview_onmouseleave_handler()" onmouseenter="preview_onmouseenter_handler()" onmouseleave="preview_onmouseleave_handler()" onclick="publishFileFunctions.triggerFileChooser('siofu_input', event)">
<div id="asset-preview-dropzone-instructions" class="hidden">
<p>Drag & drop image or video here</p>
<p class="fine-print">OR</p>

2
views/partials/publishForm-Submit.handlebars
View file

@ -3,7 +3,7 @@
<button id="publish-submit" class="button--primary button--large" onclick="publishFileFunctions.publishStagedFile(event)">Upload</button>
</div>
<div class="row row--short align-content-center">
<button class="button--cancel" onclick="cancelPublish()">Cancel</button>
<button class="button--cancel" onclick="publishFileFunctions.cancelPublish()">Cancel</button>
</div>
<div class="row row--short align-content-center">
<p class="fine-print">By clicking 'Upload', you affirm that you have the rights to publish this content to the LBRY network, and that you understand the properties of publishing it to a decentralized, user-controlled network. <a class="link--primary" target="_blank" href="https://lbry.io/learn">Read more.</a></p>