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

rearranged preview code

Browse source
This commit is contained in:
bill bittner 2017-10-03 10:05:09 -07:00
parent 3a3ad9926b
commit bed72b7e94
9 changed files with 65 additions and 105 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
helpers/errorHandlers.js
View file

@ -26,14 +26,7 @@ module.exports = {
res.status(400).send(error);
}
},
handlePublishError (error) {
logger.error('Publish Error:', useObjectPropertiesIfNoKeys(error));
if (error.code === 'ECONNREFUSED') {
return 'Connection refused. The daemon may not be running.';
} else if (error.response.data.error) {
return error.response.data.error.message;
} else {
return error;
}
useObjectPropertiesIfNoKeys (err) {
return useObjectPropertiesIfNoKeys(err);
},
};

0
public/assets/img/black_video_play → public/assets/img/black_video_play.jpg
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 15 KiB

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

@ -6,7 +6,6 @@ function getRequest (url) {
xhttp.responseType = 'json';
xhttp.onreadystatechange = () => {
if (xhttp.readyState == 4 ) {
console.log(xhttp);
if ( xhttp.status == 200) {
console.log('response:', xhttp.response);
resolve(xhttp.response);
@ -28,7 +27,6 @@ function postRequest (url, params) {
xhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhttp.onreadystatechange = () => {
if (xhttp.readyState == 4 ) {
console.log(xhttp);
if ( xhttp.status == 200) {
console.log('response:', xhttp.response);
resolve(xhttp.response);

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

@ -1,26 +1,39 @@
/* publish functions */
function cancelPublish () {
window.location.href = '/';
}
// When a file is selected for publish, validate that file and
// stage it so it will be ready when the publish button is clicked.
function previewAndStageFile(selectedFile){
const publishForm = document.getElementById('publish-form-wrapper');
var previewHolder = document.getElementById('asset-preview-holder');
var dropzoneWrapper = document.getElementById('publish-dropzone-wrapper');
var previewReader = new FileReader();
var nameInput = document.getElementById('claim-name-input');
const previewHolder = document.getElementById('asset-preview-holder');
const dropzoneWrapper = document.getElementById('publish-dropzone-wrapper');
const previewReader = new FileReader();
const nameInput = document.getElementById('claim-name-input');
const fileSelectionError = document.getElementById('input-error-file-selection');
// validate the file's name, type, and size
try {
console.log('validating file');
validateFile(selectedFile);
} catch (error) {
showError('input-error-file-selection', error.message);
console.log('file validation failed with error:', error);
showError(fileSelectionError, error.message);
return;
}
// set the image preview, if an image was provided
if (selectedFile.type !== 'video/mp4') {
console.log('file type:', selectedFile.type)
if (selectedFile.type !== 'video/mp4') {
if (selectedFile.type === 'image/gif') {
previewHolder.innerHTML = `<h2>loading preview...</h2>`
}
previewReader.readAsDataURL(selectedFile);
previewReader.onloadend = function () {
previewHolder.innerHTML = '<img width="100%" src="' + previewReader.result + '" alt="image preview"/>';
};
} else {
previewHolder.innerHTML = `<img width="100%" src="/assets/img/black_video_play.jpg"/>`
}
// hide the drop zone
dropzoneWrapper.hidden = true;
@ -36,9 +49,13 @@ function previewAndStageFile(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;
function publishStagedFile(event) {
const claimName = document.getElementById('claim-name-input').value;
const channelName = document.getElementById('channel-name-select').value;
const fileSelectionError = 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');
// prevent default so this script can handle submission
event.preventDefault();
// validate, submit, and handle response
@ -48,14 +65,14 @@ function publishSelectedImage(event) {
})
.catch(error => {
if (error.name === 'FileError') {
showError(document.getElementById('input-error-file-selection'), error.message);
showError(fileSelectionError, 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;
})

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

@ -3,9 +3,11 @@
// validation function which checks the proposed file's type, size, and name
function validateFile(file) {
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
@ -13,17 +15,25 @@ function validateFile(file) {
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){
throw new Error('Sorry, images are limited to 50 megabytes.');
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.')
}
}
@ -133,8 +143,9 @@ function checkChannelName(name){
// validation function which checks all aspects of the publish submission
function validateFilePublishSubmission(stagedFiles, claimName, channelName){
console.log(`validating name: ${claimName} channel: ${channelName} file:`, stagedFiles);
return new Promise(function (resolve, reject) {
// 1. make sure only 1 file was selected
// 1. make sure 1 file was staged
if (!stagedFiles) {
return reject(new FileError("Please select a file"));
} else if (stagedFiles.length > 1) {

10
routes/sockets-routes.js
View file

@ -1,7 +1,7 @@
const logger = require('winston');
const publishController = require('../controllers/publishController.js');
const publishHelpers = require('../helpers/publishHelpers.js');
const errorHandlers = require('../helpers/errorHandlers.js');
const { useObjectPropertiesIfNoKeys } = require('../helpers/errorHandlers.js');
const { postToStats } = require('../controllers/statsController.js');
module.exports = (app, siofu, hostedContentPath) => {
@ -47,17 +47,17 @@ module.exports = (app, siofu, hostedContentPath) => {
// publish the file
publishController.publish(publishParams, file.name, file.meta.type)
.then(result => {
postToStats('PUBLISH', '/', null, null, null, 'success');
socket.emit('publish-complete', { name: publishParams.name, result });
postToStats('PUBLISH', '/', null, null, null, 'success');
})
.catch(error => {
error = errorHandlers.handlePublishError(error);
postToStats('PUBLISH', '/', null, null, null, error);
socket.emit('publish-failure', error);
logger.error('Publish Error:', useObjectPropertiesIfNoKeys(error));
postToStats('PUBLISH', '/', null, null, null, error);
});
} else {
logger.error(`An error occurred in uploading the client's file`);
socket.emit('publish-failure', 'File uploaded, but with errors');
logger.error(`An error occurred in uploading the client's file`);
postToStats('PUBLISH', '/', null, null, null, 'File uploaded, but with errors');
// to-do: remove the file, if not done automatically
}

18
views/index.handlebars
View file

@ -5,13 +5,15 @@
<div id="publish-dropzone-wrapper">
<div id="publish-dropzone" class="align-content-center" ondrop="drop_handler(event);" ondragover="dragover_handler(event);" ondragend="dragend_handler(event)">
<div id="publish-dropzone-instructions">
<p>Drag & drop image or video here</p>
<p>OR</p>
<form>
<div class="info-message info-message--failure" id="input-error-file-selection" hidden="true"></div>
<label class="input-file-label" for="siofu_input">CHOOSE FILE</label>
<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"/>
</form>
<div class="row">
<p>Drag & drop image or video here</p>
<p>OR</p>
<form>
<label class="input-file-label" for="siofu_input">CHOOSE FILE</label>
<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"/>
</form>
</div>
<div class="info-message info-message--failure" id="input-error-file-selection" hidden="true"></div>
</div>
</div>
</div>
@ -48,6 +50,7 @@
var socket = io();
var uploader = new SocketIOFileUpload(socket);
var stagedFiles = null;
/* drop zone functions */
function drop_handler(ev) {
ev.preventDefault();
@ -73,6 +76,7 @@
ev.dataTransfer.clearData();
}
}
/* socketio-file-upload listeners */
function updatePublishStatus(msg){
document.getElementById('publish-status').innerHTML = msg;

4
views/partials/publishForm-Details.handlebars
View file

@ -1,6 +1,6 @@
<div id="details-detail" hidden="true">
<div class="row row--short">
<div class="row">
<div class="column column--4">
<label for="publish-license" class="label">License:* </label>
</div><div class="column column--6">
@ -11,7 +11,7 @@
</div>
</div>
<div class="row row--short">
<div class="row">
<div class="column column--4">
<label for="publish-nsfw" class="label">NSFW*</label>
</div><div class="column column--6">

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

@ -1,74 +1,11 @@
<div class="row">
<div class="input-error" id="input-error-publish-submit" hidden="true"></div>
<button id="publish-submit" class="button--primary button--large" onclick="publishSelectedImage(event)">Upload</button>
<button id="publish-submit" class="button--primary button--large" onclick="publishStagedFile(event)">Upload</button>
</div>
<div class="row row--short align-content-center">
<button class="button--cancel" onclick="resetPublishArea()">Cancel</button>
<button class="button--cancel" onclick="cancelPublish()">Cancel</button>
</div>
<script type="text/javascript" >
function resetPublishArea () {
window.location.href = '/';
}
/* publish functions */
// When a file is selected for publish, validate that file and
// stage it so it will be ready when the publish button is clicked.
function previewAndStageFile(selectedFile){
const publishForm = document.getElementById('publish-form-wrapper');
var previewHolder = document.getElementById('asset-preview-holder');
var dropzone = document.getElementById('publish-drop-zone-wrapper');
var previewReader = new FileReader();
var nameInput = document.getElementById('claim-name-input');
// validate the file's name, type, and size
try {
validateFile(selectedFile);
} catch (error) {
showError('input-error-file-selection', error.message);
return;
}
// set the image preview, if an image was provided
if (selectedFile.type !== 'video/mp4') {
previewReader.readAsDataURL(selectedFile);
previewReader.onloadend = function () {
previewHolder.innerHTML = '<img width="100%" src="' + previewReader.result + '" alt="image preview"/>';
};
}
// hide the drop zone
dropzone.hidden = true;
publishForm.hidden = false;
// 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('.'))
nameInput.value = cleanseClaimName(filename);
checkClaimName(nameInput.value);
}
// store the selected file for upload
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;
// prevent default so this script can handle submission
event.preventDefault();
// validate, submit, and handle response
validateFilePublishSubmission(stagedFiles, claimName, channelName)
.then(() => {
uploader.submitFiles(stagedFiles);
})
.catch(error => {
if (error.name === 'FileError') {
showError(document.getElementById('input-error-file-selection'), error.message);
} else if (error.name === 'NameError') {
showError(document.getElementById('input-error-claim-name'), error.message);
} else if (error.name === 'ChannelNameError'){
console.log(error);
showError(document.getElementById('input-error-channel-select'), error.message);
} else {
showError(document.getElementById('input-error-publish-submit'), error.message);
}
return;
})
};
</script>