meme publish works

config/development.json

@@ -10,7 +10,7 @@
 		"PublishUploadPath": "C:\\lbry\\speech\\hosted_content"
 	},
 	"Logging": {
-		"LogLevel": "debug",
+		"LogLevel": "silly",
 		"LogDirectory": "C:\\lbry\\speech\\logs\\"
 	}
 }

controllers/publishController.js

@@ -7,6 +7,9 @@ const errorHandlers = require('../helpers/libraries/errorHandlers.js');
 
 function createPublishParams (claim, filePath, license, nsfw) {
   logger.debug(`Creating Publish Parameters for "${claim}"`);
+  if (typeof nsfw === 'string') {
+    nsfw = (nsfw.toLowerCase() === 'on');
+  }
   const publishParams = {
     name     : claim,
     file_path: filePath,
@@ -17,11 +20,12 @@ function createPublishParams (claim, filePath, license, nsfw) {
       author     : 'spee.ch',
       language   : 'en',
       license,
-      nsfw       : nsfw.toLowerCase() === 'on',
+      nsfw,
     },
     claim_address : walledAddress,
     change_address: walledAddress,
   };
+  logger.debug('publishParams:', publishParams);
   return publishParams;
 }
 
@@ -49,6 +53,7 @@ module.exports = {
         socket.emit('publish-complete', { name: claim, result });
       })
       .catch(error => {
+        logger.error(`Error publishing ${fileName}`, error);
         visitor.event('Publish Route', 'Publish Failure', filePath).send();
         socket.emit('publish-failure', errorHandlers.handlePublishError(error));
         deleteTemporaryFile(filePath);

helpers/logging/loggerSetup.js

@@ -8,10 +8,12 @@ module.exports = (winston, logLevel, logDir) => {
   winston.configure({
     transports: [
       new (winston.transports.Console)({
-        level      : logLevel,
+        level                          : logLevel,
-        timestamp  : false,
+        timestamp                      : false,
-        colorize   : true,
+        colorize                       : true,
-        prettyPrint: true,
+        prettyPrint                    : true,
+        handleExceptions               : true,
+        humanReadableUnhandledException: true,
       }),
       new (winston.transports.File)({
         filename                       : `${logDir}/speechLogs.log`,

public/assets/js/memeDraw.js

@@ -6,8 +6,7 @@ var fontSize = 28;
 var topText = document.getElementById('top-text');
 var bottomText = document.getElementById('bottom-text');
 var ctx = canvas.getContext('2d');
-var downloadLink = document.getElementById("meme-download-link");
+var fileNameInput = document.getElementById("file-name-input");
-var memeFileName = document.getElementById("meme-file-name");
 
 // create the canvas
 img.onload = function() {
@@ -60,12 +59,13 @@ function wrapText(context, text, x, y, maxWidth, lineHeight, fromBottom) {
 	lineHeight = (fromBottom)?-lineHeight:lineHeight;
 
 	var lines = [];
-	var y = y;
+	var y     = y;
-	var line ='';
+	var line  ='';
 	var words = text.split(' ');
+
 	for (var i = 0; i < words.length; i++) {
-		var testLine = line + ' ' + words[i];
+		var testLine  = line + ' ' + words[i];
-		var metrics = context.measureText(testLine);
+		var metrics   = context.measureText(testLine);
 		var testWidth = metrics.width;
 
 		if (testWidth > maxWidth) {
@@ -75,6 +75,7 @@ function wrapText(context, text, x, y, maxWidth, lineHeight, fromBottom) {
 			line = testLine;
 		}
 	}
+
 	lines[pushMethod](line);
 
 	for (var k in lines ) {
@@ -83,16 +84,33 @@ function wrapText(context, text, x, y, maxWidth, lineHeight, fromBottom) {
 	}
 }
 
-// save the meme 
+function dataURItoBlob(dataURI) {
-function downloadMeme() {
+    // convert base64/URLEncoded data component to raw binary data held in a string
-    var dt = canvas.toDataURL('image/jpeg');
+    var byteString;
-    this.href = dt;
+    if (dataURI.split(',')[0].indexOf('base64') >= 0)
-};
+        byteString = atob(dataURI.split(',')[1]);
+    else
+        byteString = unescape(dataURI.split(',')[1]);
 
-function updateFileName(){
+    // separate out the mime component
-	downloadLink.download = this.value;
+    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});
 }
 
-memeFileName.addEventListener('keyup', updateFileName);
+// save the meme
-
+function startPublish() {
-downloadLink.addEventListener('click', downloadMeme, false);
+	//download the image 
+    var dataUrl = canvas.toDataURL('image/jpeg');
+	var blob = dataURItoBlob(dataUrl)
+	var filename = fileNameInput.value;
+	var file = new File([blob], filename, {type: 'image/jpeg', lastModified: Date.now()});
+	console.log(file);
+	publishMeme(file);  // note: this function is in memePublish.js
+};

public/assets/js/memePublish.js

@@ -3,6 +3,9 @@
 var socket = io();
 var uploader = new SocketIOFileUpload(socket);
 var stagedFiles = null;
+var name = 'meme-fodder-entry';
+var license = 'Creative Commons';
+var nsfw = false;
 
 /* helper functions */
 // create a progress animation
@@ -23,67 +26,16 @@ function createProgressBar(element, size){
 	};
 	setInterval(addOne, 300);
 }
-// preview file and stage the image for upload
-function previewAndStageFile(selectedFile){ 
-	var preview = document.getElementById('image-preview');
-	var dropzone = document.getElementById('drop-zone');
-	var previewReader = new FileReader();
 
-	preview.style.display = 'block';
+function publishMeme(file) {
-	dropzone.style.display = 'none';
+	// get image data
-	
+	//var imgData = ctx.getImageData(0, 0, canvasWidth, canvasHeight);
-	previewReader.onloadend = function () {
+	//console.log(imgData);
-		preview.src = previewReader.result;
+	// stage files 
-	};
+	stagedFiles = [file]; // stores the selected file for upload
-
+	//stagedFiles = [selectedFile.getAsFile()]; // stores the selected file for upload
-	if (selectedFile) {
+	console.log(stagedFiles[0]);
-		previewReader.readAsDataURL(selectedFile); // reads the data and sets the img src
+	console.log('file staged');
-		document.getElementById('publish-name').value = selectedFile.name.substring(0, selectedFile.name.indexOf('.')); // updates metadata inputs
-		stagedFiles = [selectedFile]; // stores the selected file for upload
-	} else {
-		preview.src = '';
-	}
-}
-// update the publish status
-function updatePublishStatus(msg){
-	document.getElementById('publish-status').innerHTML = msg;
-}
-// process the drop-zone drop
-function drop_handler(ev) {
-	console.log("drop");
-	ev.preventDefault();
-	// if dropped items aren't files, reject them
-	var dt = ev.dataTransfer;
-	if (dt.items) {
-		if (dt.items[0].kind == 'file') {
-			var droppedFile = dt.items[0].getAsFile();
-			previewAndStageFile(droppedFile);
-		} else {
-			console.log("no files were found")
-		}
-	} else {
-		console.log("no items were found")
-	}
-}
-// prevent the browser's default drag behavior
-function dragover_handler(ev) {
-	ev.preventDefault();
-}
-// remove all of the drag data
-function dragend_handler(ev) {
-	var dt = ev.dataTransfer;
-	if (dt.items) {
-		for (var i = 0; i < dt.items.length; i++) {
-			dt.items.remove(i);
-		}
-	} else {
-		ev.dataTransfer.clearData();
-	}
-}
-
-/* configure the submit button */
-document.getElementById('publish-submit').addEventListener('click', function(event){
-	event.preventDefault();
 	// make sure a file was selected
 	if (stagedFiles) {
 		// make sure only 1 file was selected
@@ -104,13 +56,16 @@ document.getElementById('publish-submit').addEventListener('click', function(eve
 				break;
 		}
 	}
-})
+
+}
+
+// update the publish status
+function updatePublishStatus(msg){
+	document.getElementById('publish-status').innerHTML = msg;
+}
 
 /* socketio-file-upload listeners */
 uploader.addEventListener('start', function(event){
-	var name = document.getElementById('publish-name').value;
-	var license = document.getElementById('publish-license').value;
-	var nsfw = document.getElementById('publish-nsfw').value;
 	event.file.meta.name = name;
 	event.file.meta.license = license;
 	event.file.meta.nsfw = nsfw;

routes/home-routes.js

@@ -7,7 +7,7 @@ module.exports = app => {
   });
   // a catch-all route if someone visits a page that does not exist
   app.use('*', (req, res) => {
-    logger.error(`Get request on ${req.originalUrl} which was 404`);
+    logger.error(`Get request on ${req.originalUrl} which was a 404`);
     res.status(404).render('fourOhFour');
   });
 };

views/index.handlebars

@@ -55,6 +55,7 @@
 		};
 
 		if (selectedFile) {
+			console.log(selectedFile);
 			previewReader.readAsDataURL(selectedFile); // reads the data and sets the img src
 			document.getElementById('publish-name').value = selectedFile.name.substring(0, selectedFile.name.indexOf('.')); // updates metadata inputs
 			stagedFiles = [selectedFile]; // stores the selected file for upload

views/memeFodder.handlebars

@@ -5,7 +5,7 @@
 		{{> memeMaker}}
 	</div>
 	<div class="row">
-		{{> memeFodderResults}}
+		{{> memeResults}}
 	</div>
 </div>
 
@@ -13,3 +13,5 @@
 
 <script src="/socket.io/socket.io.js"></script>
 <script src="/siofu/client.js"></script>
+
+<script src="/assets/js/memePublish.js"></script>

views/partials/memeMaker.handlebars

@@ -16,27 +16,27 @@
 					</canvas>
 					<img id="start-image" src="/meme-fodder" alt="a picture to make your meme with"/>
 				</div>
-				<div class="col-md-6">
+				<div class="col-md-6" id="publish-active-area">
 					<div class="row">
 						<div class="col-md-12">
 							<label for="top-text">Meme:</label>
-							<input id="top-text" type="text" value="Is it ready?" />
+							<input id="top-text" type="text" value="Ship it?" />
 						</div>
 					</div>
 					<div class="row">
 						<div class="col-md-12">
-							<input id="bottom-text" type="text" value="Who cares, ship it!" />
+							<input id="bottom-text" type="text" value="YAAAAASSSSSSS!" />
 						</div>
 					</div>
 					<div class="row">
 						<div class="col-md-12">
 							<label for="meme-name">File Name:</label>
-							<input id="meme-file-name" class="form-control" type="text" value="YourFileName.jpg" />
+							<input id="file-name-input" type="text" value="YourFileName.jpg" />
 						</div>
 					</div>
 					<div class="row">
 						<div class="col-md-12">
-							<a id="meme-download-link" download="YourFileName.jpg"><button>Save and Publish</button></a>
+							<button onclick="startPublish()">Save and Publish</button>
 						</div>
 					</div>
 				</div>