`;
+ // clear & show the thumbnail selection input
+ thumbnailSelectionInput.value = '';
+ thumbnailSelectionTool.hidden = false;
}
+ // hide the drop zone
+ primaryDropzone.setAttribute('class', 'hidden');
+ publishForm.setAttribute('class', 'row')
// set the name input value to the image name if none is set yet
if (nameInput.value === "") {
var filename = selectedFile.name.substring(0, selectedFile.name.indexOf('.'))
@@ -67,27 +53,46 @@ function previewAndStageFile(selectedFile){
stagedFiles = [selectedFile];
}
-// Validate the publish submission and then trigger publishing.
-function publishSelectedImage(event) {
- var claimName = document.getElementById('claim-name-input').value;
- var channelName = document.getElementById('channel-name-select').value;
+// Validate the publish submission and then trigger upload
+function publishStagedFile(event) {
// prevent default so this script can handle submission
event.preventDefault();
+ // declare variables
+ const claimName = document.getElementById('claim-name-input').value;
+ let channelName = document.getElementById('channel-name-select').value;
+ const fileSelectionInputError = document.getElementById('input-error-file-selection');
+ const claimNameError = document.getElementById('input-error-claim-name');
+ const channelSelectError = document.getElementById('input-error-channel-select');
+ const publishSubmitError = document.getElementById('input-error-publish-submit');
+ let anonymousOrInChannel;
+ // replace channelName with 'anonymous' if appropriate
+ const radios = document.getElementsByName('anonymous-or-channel');
+ for (let i = 0; i < radios.length; i++) {
+ if (radios[i].checked) {
+ // do whatever you want with the checked radio
+ anonymousOrInChannel = radios[i].value;
+ // only one radio can be logically checked, don't check the rest
+ break;
+ }
+ }
+ if (anonymousOrInChannel === 'anonymous') {
+ channelName = null;
+ };
// validate, submit, and handle response
validateFilePublishSubmission(stagedFiles, claimName, channelName)
.then(() => {
- uploader.submitFiles(stagedFiles);
+ uploader.submitFiles(stagedFiles);
})
.catch(error => {
if (error.name === 'FileError') {
- showError(document.getElementById('input-error-file-selection'), error.message);
+ showError(fileSelectionInputError, error.message);
} else if (error.name === 'NameError') {
- showError(document.getElementById('input-error-claim-name'), error.message);
+ showError(claimNameError, error.message);
} else if (error.name === 'ChannelNameError'){
console.log(error);
- showError(document.getElementById('input-error-channel-select'), error.message);
+ showError(channelSelectError, error.message);
} else {
- showError(document.getElementById('input-error-publish-submit'), error.message);
+ showError(publishSubmitError, error.message);
}
return;
})
diff --git a/public/assets/js/showFunctions.js b/public/assets/js/showFunctions.js
new file mode 100644
index 00000000..94047cd3
--- /dev/null
+++ b/public/assets/js/showFunctions.js
@@ -0,0 +1,23 @@
+function playOrPause(video){
+ if (video.paused == true) {
+ video.play();
+ }
+ else{
+ video.pause();
+ }
+}
+
+// if a video player is present, set the listeners
+const video = document.getElementById('video-player');
+if (video) {
+ // add event listener for click
+ video.addEventListener('click', ()=> {
+ playOrPause(video);
+ });
+ // add event listener for space bar
+ document.body.onkeyup = (event) => {
+ if (event.keyCode == 32) {
+ playOrPause(video);
+ }
+ };
+}
\ No newline at end of file
diff --git a/public/assets/js/validationFunctions.js b/public/assets/js/validationFunctions.js
index 7d4f2e00..e8204776 100644
--- a/public/assets/js/validationFunctions.js
+++ b/public/assets/js/validationFunctions.js
@@ -1,47 +1,56 @@
-
-
// validation function which checks the proposed file's type, size, and name
function validateFile(file) {
- if (!file) {
- throw new Error('no file provided');
- }
- if (/'/.test(file.name)) {
- throw new Error('apostrophes are not allowed in the file name');
- }
- // validate size and type
- switch (file.type) {
- case 'image/jpeg':
- case 'image/jpg':
- case 'image/png':
- case 'image/gif':
- if (file.size > 50000000){
- throw new Error('Sorry, images are limited to 50 megabytes.');
- }
- break;
- case 'video/mp4':
- if (file.size > 50000000){
- throw new Error('Sorry, videos are limited to 50 megabytes.');
- }
- break;
- default:
- throw new Error(file.type + ' is not a supported file type. Only, .jpeg, .png, .gif, and .mp4 files are currently supported.')
- }
+ if (!file) {
+ console.log('no file found');
+ throw new Error('no file provided');
+ }
+ if (/'/.test(file.name)) {
+ console.log('file name had apostrophe in it');
+ throw new Error('apostrophes are not allowed in the file name');
+ }
+ // validate size and type
+ switch (file.type) {
+ case 'image/jpeg':
+ case 'image/jpg':
+ case 'image/png':
+ if (file.size > 10000000){
+ console.log('file was too big');
+ throw new Error('Sorry, images are limited to 10 megabytes.');
+ }
+ break;
+ case 'image/gif':
+ if (file.size > 50000000){
+ console.log('file was too big');
+ throw new Error('Sorry, .gifs are limited to 50 megabytes.');
+ }
+ break;
+ case 'video/mp4':
+ if (file.size > 50000000){
+ console.log('file was too big');
+ throw new Error('Sorry, videos are limited to 50 megabytes.');
+ }
+ break;
+ default:
+ console.log('file type is not supported');
+ throw new Error(file.type + ' is not a supported file type. Only, .jpeg, .png, .gif, and .mp4 files are currently supported.')
+ }
}
+
// validation function that checks to make sure the claim name is valid
function validateClaimName (name) {
- // ensure a name was entered
- if (name.length < 1) {
- throw new NameError("You must enter a name for your url");
- }
- // validate the characters in the 'name' field
- const invalidCharacters = /[^A-Za-z0-9,-]/g.exec(name);
- if (invalidCharacters) {
- throw new NameError('"' + invalidCharacters + '" characters are not allowed in the url.');
- }
+ // ensure a name was entered
+ if (name.length < 1) {
+ throw new NameError("You must enter a name for your url");
+ }
+ // validate the characters in the 'name' field
+ const invalidCharacters = /[^A-Za-z0-9,-]/g.exec(name);
+ if (invalidCharacters) {
+ throw new NameError('"' + invalidCharacters + '" characters are not allowed');
+ }
}
function validateChannelName (name) {
- name = name.substring(name.indexOf('@') + 1);
+ name = name.substring(name.indexOf('@') + 1);
// ensure a name was entered
if (name.length < 1) {
throw new ChannelNameError("You must enter a name for your channel");
@@ -49,7 +58,7 @@ function validateChannelName (name) {
// validate the characters in the 'name' field
const invalidCharacters = /[^A-Za-z0-9,-,@]/g.exec(name);
if (invalidCharacters) {
- throw new ChannelNameError('"' + invalidCharacters + '" characters are not allowed in the channel name.');
+ throw new ChannelNameError('"' + invalidCharacters + '" characters are not allowed');
}
}
@@ -60,9 +69,9 @@ function validatePassword (password) {
}
function cleanseClaimName(name) {
- name = name.replace(/\s+/g, '-'); // replace spaces with dashes
- name = name.replace(/[^A-Za-z0-9-]/g, ''); // remove all characters that are not A-Z, a-z, 0-9, or '-'
- return name;
+ name = name.replace(/\s+/g, '-'); // replace spaces with dashes
+ name = name.replace(/[^A-Za-z0-9-]/g, ''); // remove all characters that are not A-Z, a-z, 0-9, or '-'
+ return name;
}
// validation functions to check claim & channel name eligibility as the inputs change
@@ -99,14 +108,13 @@ function checkAvailability(name, successDisplayElement, errorDisplayElement, val
// check to make sure it is available
isNameAvailable(name, apiUrl)
.then(result => {
- console.log('result:', result)
- if (result === true) {
+ if (result === true) {
hideError(errorDisplayElement);
showSuccess(successDisplayElement)
- } else {
+ } else {
hideSuccess(successDisplayElement);
showError(errorDisplayElement, errorMessage);
- }
+ }
})
.catch(error => {
hideSuccess(successDisplayElement);
@@ -119,58 +127,68 @@ function checkAvailability(name, successDisplayElement, errorDisplayElement, val
}
function checkClaimName(name){
- const successDisplayElement = document.getElementById('input-success-claim-name');
- const errorDisplayElement = document.getElementById('input-error-claim-name');
- checkAvailability(name, successDisplayElement, errorDisplayElement, validateClaimName, isNameAvailable, 'Sorry, that url ending has been taken by another user', '/api/isClaimAvailable/');
+ const successDisplayElement = document.getElementById('input-success-claim-name');
+ const errorDisplayElement = document.getElementById('input-error-claim-name');
+ checkAvailability(name, successDisplayElement, errorDisplayElement, validateClaimName, isNameAvailable, 'Sorry, that ending is already taken', '/api/isClaimAvailable/');
}
function checkChannelName(name){
const successDisplayElement = document.getElementById('input-success-channel-name');
const errorDisplayElement = document.getElementById('input-error-channel-name');
name = `@${name}`;
- checkAvailability(name, successDisplayElement, errorDisplayElement, validateChannelName, isNameAvailable, 'Sorry, that Channel has been taken by another user', '/api/isChannelAvailable/');
+ checkAvailability(name, successDisplayElement, errorDisplayElement, validateChannelName, isNameAvailable, 'Sorry, that name is already taken', '/api/isChannelAvailable/');
}
// validation function which checks all aspects of the publish submission
function validateFilePublishSubmission(stagedFiles, claimName, channelName){
- return new Promise(function (resolve, reject) {
- // 1. make sure only 1 file was selected
- if (!stagedFiles) {
- return reject(new FileError("Please select a file"));
- } else if (stagedFiles.length > 1) {
- return reject(new FileError("Only one file is allowed at a time"));
- }
- // 2. validate the file's name, type, and size
- try {
- validateFile(stagedFiles[0]);
- } catch (error) {
- return reject(error);
- }
- // 3. validate that a channel was chosen
- if (channelName === 'new' || channelName === 'login') {
- return reject(new ChannelNameError("Please select a valid channel"));
+ return new Promise(function (resolve, reject) {
+ // 1. make sure 1 file was staged
+ if (!stagedFiles) {
+ reject(new FileError("Please select a file"));
+ return;
+ } else if (stagedFiles.length > 1) {
+ reject(new FileError("Only one file is allowed at a time"));
+ return;
+ }
+ // 2. validate the file's name, type, and size
+ try {
+ validateFile(stagedFiles[0]);
+ } catch (error) {
+ reject(error);
+ return;
+ }
+ // 3. validate that a channel was chosen
+ if (channelName === 'new' || channelName === 'login') {
+ reject(new ChannelNameError("Please log in to a channel"));
+ return;
};
- // 4. validate the claim name
- try {
- validateClaimName(claimName);
- } catch (error) {
- return reject(error);
- }
- // if all validation passes, check availability of the name
- isNameAvailable(claimName, '/api/isClaimAvailable/')
- .then(() => {
- resolve();
- })
- .catch(error => {
- reject(error);
- });
- });
+ // 4. validate the claim name
+ try {
+ validateClaimName(claimName);
+ } catch (error) {
+ reject(error);
+ return;
+ }
+ // if all validation passes, check availability of the name (note: do we need to re-validate channel name vs. credentials as well?)
+ return isNameAvailable(claimName, '/api/isClaimAvailable/')
+ .then(result => {
+ if (result) {
+ resolve();
+ } else {
+ reject(new NameError('Sorry, that ending is already taken'));
+ }
+ })
+ .catch(error => {
+ reject(error);
+ });
+ });
}
-// validation function which checks all aspects of the publish submission
-function validateNewChannelSubmission(channelName, password){
+// validation function which checks all aspects of a new channel submission
+function validateNewChannelSubmission(userName, password){
+ const channelName = `@${userName}`;
return new Promise(function (resolve, reject) {
- // 1. validate name
+ // 1. validate name
try {
validateChannelName(channelName);
} catch (error) {
@@ -184,13 +202,35 @@ function validateNewChannelSubmission(channelName, password){
}
// 3. if all validation passes, check availability of the name
isNameAvailable(channelName, '/api/isChannelAvailable/') // validate the availability
- .then(() => {
- console.log('channel is avaliable');
- resolve();
+ .then(result => {
+ if (result) {
+ resolve();
+ } else {
+ reject(new ChannelNameError('Sorry, that name is already taken'));
+ }
})
.catch( error => {
- console.log('error: channel is not avaliable');
+ console.log('error evaluating channel name availability', error);
reject(error);
});
});
+}
+// validation function which checks all aspects of a new channel login
+function validateNewChannelLogin(userName, password){
+ const channelName = `@${userName}`;
+ return new Promise(function (resolve, reject) {
+ // 1. validate name
+ try {
+ validateChannelName(channelName);
+ } catch (error) {
+ return reject(error);
+ }
+ // 2. validate password
+ try {
+ validatePassword(password);
+ } catch (error) {
+ return reject(error);
+ }
+ resolve();
+ });
}
\ No newline at end of file
diff --git a/public/assets/vendors/imagesloaded/imagesloaded.pkgd.min.js b/public/assets/vendors/imagesloaded/imagesloaded.pkgd.min.js
new file mode 100644
index 00000000..0854d63e
--- /dev/null
+++ b/public/assets/vendors/imagesloaded/imagesloaded.pkgd.min.js
@@ -0,0 +1,7 @@
+/*!
+ * imagesLoaded PACKAGED v4.1.3
+ * JavaScript is all like "You images are done yet or what?"
+ * MIT License
+ */
+
+!function(e,t){"function"==typeof define&&define.amd?define("ev-emitter/ev-emitter",t):"object"==typeof module&&module.exports?module.exports=t():e.EvEmitter=t()}("undefined"!=typeof window?window:this,function(){function e(){}var t=e.prototype;return t.on=function(e,t){if(e&&t){var i=this._events=this._events||{},n=i[e]=i[e]||[];return-1==n.indexOf(t)&&n.push(t),this}},t.once=function(e,t){if(e&&t){this.on(e,t);var i=this._onceEvents=this._onceEvents||{},n=i[e]=i[e]||{};return n[t]=!0,this}},t.off=function(e,t){var i=this._events&&this._events[e];if(i&&i.length){var n=i.indexOf(t);return-1!=n&&i.splice(n,1),this}},t.emitEvent=function(e,t){var i=this._events&&this._events[e];if(i&&i.length){var n=0,o=i[n];t=t||[];for(var r=this._onceEvents&&this._onceEvents[e];o;){var s=r&&r[o];s&&(this.off(e,o),delete r[o]),o.apply(this,t),n+=s?0:1,o=i[n]}return this}},t.allOff=t.removeAllListeners=function(){delete this._events,delete this._onceEvents},e}),function(e,t){"use strict";"function"==typeof define&&define.amd?define(["ev-emitter/ev-emitter"],function(i){return t(e,i)}):"object"==typeof module&&module.exports?module.exports=t(e,require("ev-emitter")):e.imagesLoaded=t(e,e.EvEmitter)}("undefined"!=typeof window?window:this,function(e,t){function i(e,t){for(var i in t)e[i]=t[i];return e}function n(e){var t=[];if(Array.isArray(e))t=e;else if("number"==typeof e.length)for(var i=0;i
+
+
+ Drag & drop image or video here to publish
+OR
+CHOOSE FILE
+
+
+ Drop it.
+About Spee.ch
-Spee.ch is a single-serving site that reads and publishes images to and from the LBRY blockchain.
-Spee.ch is an image hosting service, but with the added benefit that it stores your images on a decentralized network of computers -- the LBRY network. This means that your images are stored in multiple locations without a single point of failure.
- {{> examples}} - {{> documentation}} - {{> bugs}} -