config/development.json

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

config/production.json

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

public/assets/js/dropzoneFunctions.js

@@ -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);
         }
     }
 }

public/assets/js/publishFileFunctions.js

@@ -1,77 +1,68 @@
-/* publish functions */
+var stagedFiles = null;
-
-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 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.
+                    console.log('publish complete!');
-                    showFilePublishComplete(xhr.responseText);
+                    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;
-}

public/assets/js/validationFunctions.js

@@ -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");

routes/api-routes.js

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

views/index.handlebars

@@ -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>

views/partials/publishForm-Submit.handlebars

@@ -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>