added channel validation

helpers/publishHelpers.js

@@ -135,7 +135,6 @@ module.exports = {
       // find any records where the name is used
       db.User.findAll({ where: { channelName: name } })
         .then(result => {
-          logger.debug('sequelize result:', result);
           if (result.length >= 1) {
             return resolve(false);
           }

public/assets/js/generalFunctions.js

@@ -35,26 +35,6 @@ function createProgressBar(element, size){
 	setInterval(addOne, 300);
 }
 
-function dataURItoBlob(dataURI) {
-    // convert base64/URLEncoded data component to raw binary data held in a string
-    var byteString;
-    if (dataURI.split(',')[0].indexOf('base64') >= 0)
-        byteString = atob(dataURI.split(',')[1]);
-    else
-        byteString = unescape(dataURI.split(',')[1]);
-
-    // separate out the mime component
-    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
-
-    // write the bytes of the string to a typed array
-    var ia = new Uint8Array(byteString.length);
-    for (var i = 0; i < byteString.length; i++) {
-        ia[i] = byteString.charCodeAt(i);
-    }
-
-    return new Blob([ia], {type:mimeString});
-}
-
 // Create new error objects, that prototypically inherit from the Error constructor
 function FileError(message) {
   this.name = 'FileError';
@@ -71,3 +51,11 @@ function NameError(message) {
 }
 NameError.prototype = Object.create(Error.prototype);
 NameError.prototype.constructor = NameError;
+
+function ChannelError(message) {
+    this.name = 'ChannelError';
+    this.message = message || 'Default Message';
+    this.stack = (new Error()).stack;
+}
+ChannelError.prototype = Object.create(Error.prototype);
+ChannelError.prototype.constructor = ChannelError;

public/assets/js/publishFunctions.js

@@ -19,7 +19,7 @@ function previewAndStageFile(selectedFile){
 		showError('input-error-file-selection', error.message);
 		return;
 	}
-	// set the image preview, if a preview was provided
+	// set the image preview, if an image was provided
 	if (selectedFile.type !== 'video/mp4') {
 		previewReader.readAsDataURL(selectedFile);
 		previewReader.onloadend = function () {
@@ -41,18 +41,22 @@ function previewAndStageFile(selectedFile){
 // Validate the publish submission and then trigger publishing.
 function publishSelectedImage(event) {
 	event.preventDefault();
-	var name = document.getElementById('claim-name-input').value;
+	var claimName = document.getElementById('claim-name-input').value;
-	validateSubmission(stagedFiles, name)
+    var channelName = document.getElementById('channel-name-select').value;
+	validateSubmission(stagedFiles, claimName, channelName)
 		.then(function() {
 			uploader.submitFiles(stagedFiles); 
 		})
 		.catch(function(error) {
 			if (error.name === 'FileError') {
-				showError('input-error-file-selection', error.message);
+                showError(document.getElementById('input-error-file-selection'), error.message);
 			} else if (error.name === 'NameError') {
-				showError('input-error-claim-name', error.message);
+				showError(document.getElementById('input-error-claim-name'), error.message);
+            } else if (error.name === 'ChannelError'){
+				console.log(error);
+                showError(document.getElementById('input-error-channel-select'), error.message);
 			} else {
-				showError('input-error-publish-submit', error.message);
+				showError(document.getElementById('input-error-publish-submit'), error.message);
 			}
 			return;
 		})

public/assets/js/validationFunctions.js

@@ -113,39 +113,44 @@ function checkAvailability(name, successDisplayElement, errorDisplayElement, isN
 }
 
 function checkClaimName(name){
-	const successDisplayElement = document.getElementById('claim-name-success');
+	const successDisplayElement = document.getElementById('input-success-claim-name');
-	const errorDisplayElement = document.getElementById('claim-name-error');
+	const errorDisplayElement = document.getElementById('input-error-claim-name');
 	checkAvailability(name, successDisplayElement, errorDisplayElement, isNameAvailable, '/api/isClaimAvailable/');
 }
 
 function checkChannelName(name){
-    const successDisplayElement = document.getElementById('channel-name-success');
+    const successDisplayElement = document.getElementById('input-success-channel-name');
-    const errorDisplayElement = document.getElementById('channel-name-error');
+    const errorDisplayElement = document.getElementById('input-error-channel-name');
     checkAvailability(name, successDisplayElement, errorDisplayElement, isNameAvailable, '/api/isChannelAvailable/');
 }
 
 // validation function which checks all aspects of the publish submission
-function validateSubmission(stagedFiles, name){
+function validateSubmission(stagedFiles, claimName, channelName){
 	return new Promise(function (resolve, reject) {
-		// make sure only 1 file was selected
+		// 1. make sure only 1 file was selected
 		if (!stagedFiles) {
 			reject(new FileError("Please select a file"));
 		} else if (stagedFiles.length > 1) {
 			reject(new FileError("Only one file is allowed at a time"));
 		}
-		// validate the file's name, type, and size
+		// 2. validate the file's name, type, and size
 		try {
 			validateFile(stagedFiles[0]);
 		} catch (error) {
 			reject(error);
 		}
-		// make sure the claim name has not already been used
+		// 3. validate that a channel was chosen
+		if (channelName === 'new') {
+			reject(new ChannelError("Please select a valid channel"));
+        };
+		// 4. validate the claim name
 		try {
-			validateClaimName(name);
+			validateClaimName(claimName); // validate the formatting
 		} catch (error) {
 			reject(error);
 		}
-		isNameAvailable(name)
+		console.log(claimName);
+		isNameAvailable(claimName, '/api/isClaimAvailable/')  // validate the availability
 			.then(function() {
 				resolve();
 			})

views/index.handlebars

@@ -24,12 +24,14 @@
 		var description = document.getElementById('publish-description').value;
 		var license = document.getElementById('publish-license').value;
 		var nsfw = document.getElementById('publish-nsfw').checked;
+		var channel = document.getElementById('channel-name-select').value;
 		event.file.meta.name = name;
 		event.file.meta.title = title;
 		event.file.meta.description = description;
 		event.file.meta.license = license;
 		event.file.meta.nsfw = nsfw;
 		event.file.meta.type = stagedFiles[0].type;
+        event.file.meta.channel = channel;
 		// re-set the html in the publish area
 		document.getElementById('publish-active-area').innerHTML = '<div id="publish-status"></div><div id="progress-bar"></div>';
 		// start a progress animation
@@ -54,7 +56,7 @@
 	});
 	socket.on('publish-complete', function(msg){
 		var publishResults;
-		var showUrl = msg.name + '/' + msg.result.claim_id;
+		var showUrl = msg.result.claim_id + "/" + msg.name;
 		// build new publish area
 		publishResults = '<p>Your publish is complete! You are being redirected to it now.</p>';
 		publishResults += '<p><a target="_blank" href="' + showUrl + '">If you do not get redirected, click here.</a></p>';

views/partials/publishChannel.handlebars

@@ -1,8 +1,8 @@
 <div id="claim-channel-input-area">
-
+    <span id="input-error-channel-select" class="info-message info-message--failure"></span>
     <p>
-        <label for="publish-channel">Channel:</label></td>
+        <label for="channel-name-select">Channel:</label>
-        <select type="text" id="publish-channel" name="channel" value="channel" onclick="check(event)">
+        <select type="text" id="channel-name-select" name="channel" value="channel" onclick="check(event)">
             {{#if user}}
                 <option value="@{{user.channelName}}" >@{{user.channelName}}</option>
             {{/if}}
@@ -12,23 +12,19 @@
     </p>
 
     <div id="channel-create-details" hidden="true">
-
+        <span id="input-error-channel-name" class="info-message info-message--failure"></span>
-        <span id="channel-name-error" class="info-message info-message--failure"></span>
         <p>
             <label for="channelName">Channel Name: </label>
-            @<input type="text" id="channel-name-input" class="input-text input-text--primary" placeholder="exampleChannel" oninput="checkChannelName(event.target.value)">
+            @<input type="text" id="channel-name-input" class="input-text input-text--primary" placeholder="exampleChannel" value=""; oninput="checkChannelName(event.target.value)">
-            <span id="channel-name-success" class="info-message info-message--success"></span>
+            <span id="input-success-channel-name" class="info-message info-message--success"></span>
             <br/>
 
             <label for="password" >Password: </label>
-            <input type="password" id="password" placeholder="" class="input-text input-text--primary">
+            <input type="password" id="password" placeholder="" value="" class="input-text input-text--primary">
             <br/>
         </p>
-
             <button >create</button>
-
     </div>
-
 </div>
 
 <script type="text/javascript">
@@ -36,14 +32,13 @@
  const createChannelTool = document.getElementById('channel-create-details');
  function check(event) {
      const selectedOption = event.target.selectedOptions[0].value;
-     console.log(selectedOption);
+     if (selectedOption != 'new') {
-     if (selectedOption === 'new') {
-         createChannelTool.hidden = false;
-     } else {
          createChannelTool.hidden = true;
+         hideError(document.getElementById('input-error-channel-select'));
+     } else {
+         createChannelTool.hidden = false;
      }
  }
-
  function createChannel() {
 
  }

views/partials/publishForm.handlebars

@@ -4,7 +4,7 @@
 		<div class="col-left" id="file-selection-area">
 			<div id="drop-zone" ondrop="drop_handler(event);" ondragover="dragover_handler(event);" ondragend="dragend_handler(event)">
 				<p>Drag and drop your file here, or choose your file below.</p>
-				<div class="input-error" id="input-error-file-selection" hidden="true"></div>
+                <span class="info-message info-message--failure" id="input-error-file-selection" hidden="true"></span><br/>
 				<input type="file" id="siofu_input" name="file" accept="video/*,image/*" onchange="previewAndStageFile(event.target.files[0])" enctype="multipart/form-data"/>
 			</div>
 			<div id="asset-preview-holder"></div>
@@ -12,11 +12,11 @@
 		<div class="col-right">
 			<div id="publish-active-area">
 				<div class="stop-float">
-                    <span id="claim-name-error" class="info-message info-message--failure"  hidden="true"></span>
+                    <span id="input-error-claim-name" class="info-message info-message--failure"  hidden="true"></span>
 					<p>
                         Spee.ch/
                         <input type="text" id="claim-name-input" class="input-text input-text--primary" placeholder="your-url-here" oninput="checkClaimName(event.target.value)">
-                        <span id="claim-name-success" class="info-message info-message--success"></span>
+                        <span id="input-success-claim-name" class="info-message info-message--success"></span>
                     </p>
 				</div>
                 <div class="stop-float">
@@ -55,6 +55,6 @@
 		document.getElementById('input-error-file-selection').innerHTML = '';
 		document.getElementById('input-error-claim-name').innerHTML = '';
 		document.getElementById('input-error-publish-submit').innerHTML = '';
-		document.getElementById('claim-name-success').hidden = true;
+		document.getElementById('input-success-claim-name').hidden = true;
 	}
 </script>