Merge pull request #36 from lbryio/meme-gen

MemeFodder

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

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

public/assets/css/style.css

@@ -1,3 +1,9 @@
+canvas {
+  background-color: blue; 
+  width: 100%;
+  height: auto;
+}
+
 #drop-zone {
 	border: 1px dashed lightgrey;
 	padding: 1em;
@@ -5,14 +11,22 @@
 	width: 100%;
 }
 
-.all-claims-img {
-	height: 200px;
-}
-
 #image-preview {
 	display: none;
 }
 
+#tweet-meme-button {
+	float: left;
+	margin-right: 5px;
+}
+
 .row {
 	margin: 10px 0px 10px 0px;
 }
+
+.all-claims-img {
+	height: 200px;
+}
+
+
+

public/assets/js/memeDraw.js

@@ -0,0 +1,85 @@
+var canvas = document.getElementById('meme-canvas');
+var img = document.getElementById('start-image');
+var canvasWidth;
+var canvasHeight;
+var fontSize = 28;
+var topText = document.getElementById('top-text');
+var bottomText = document.getElementById('bottom-text');
+var ctx = canvas.getContext('2d');
+var claimNameInput = document.getElementById("file-name-input");
+
+// create the canvas
+img.onload = function() {
+	// get dimensions of the start img
+	canvasWidth = img.width;
+	canvasHeight = img.height;
+	// hide start image
+	img.hidden = true;
+	// size the canvas
+	canvas.width = canvasWidth;
+	canvas.height = canvasHeight;
+	// draw the starting meme
+	drawMeme()
+}
+
+// if the text changes, re-draw the meme
+topText.addEventListener('keyup', drawMeme);
+bottomText.addEventListener('keyup', drawMeme);
+
+// draw the image and draw the text over it
+function drawMeme() {
+	ctx.clearRect(0, 0,  canvasWidth, canvasHeight);
+	ctx.drawImage(img, 0, 0, canvasWidth, canvasHeight);
+	ctx.lineWidth = 4;
+	ctx.font = fontSize + 'px sans-serif';
+	ctx.strokeStyle = 'black';
+	ctx.fillStyle = 'white';
+	ctx.textAlign = 'center';
+	ctx.textBaseline = 'top';
+
+	var text1 = topText.value;
+	text1 = text1.toUpperCase();
+	x = canvasWidth / 2;
+	y = 0;
+
+	wrapText(ctx, text1, x, y, canvasWidth, fontSize, false);
+
+	ctx.textBaseline = 'bottom';
+	var text2 = bottomText.value;
+	text2 = text2.toUpperCase();
+	y = canvasHeight;
+
+	wrapText(ctx, text2, x, y, canvasHeight, fontSize, true);
+
+}
+
+function wrapText(context, text, x, y, maxWidth, lineHeight, fromBottom) {
+	var pushMethod = (fromBottom)?'unshift':'push';
+
+	lineHeight = (fromBottom)?-lineHeight:lineHeight;
+
+	var lines = [];
+	var y     = y;
+	var line  ='';
+	var words = text.split(' ');
+
+	for (var i = 0; i < words.length; i++) {
+		var testLine  = line + ' ' + words[i];
+		var metrics   = context.measureText(testLine);
+		var testWidth = metrics.width;
+
+		if (testWidth > maxWidth) {
+			lines[pushMethod](line);
+			line = words[i] + ' ';
+		} else {
+			line = testLine;
+		}
+	}
+
+	lines[pushMethod](line);
+
+	for (var k in lines ) {
+		context.strokeText(lines[k], x, y + lineHeight * k);
+		context.fillText(lines[k], x, y + lineHeight * k);
+	}
+}

public/assets/js/memePublish.js

@@ -0,0 +1,140 @@
+
+// define variables
+var socket = io();
+var uploader = new SocketIOFileUpload(socket);
+var stagedFiles = null;
+var license = 'Creative Commons';
+var nsfw = false;
+var claimName;
+
+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});
+}
+
+function startPublish() {
+	//download the image 
+    var dataUrl = canvas.toDataURL('image/jpeg');  // canvas defined in memeDraw.js
+	var blob = dataURItoBlob(dataUrl)
+	claimName = claimNameInput.value;  // claimNameInput.value defined in memeDraw.js
+	var fileName = claimNameInput.value + ".jpg";
+	var file = new File([blob], fileName, {type: 'image/jpeg', lastModified: Date.now()});
+	console.log(file);
+	stageAndPublish(file); 
+};
+
+/* helper functions */
+// create a progress animation
+function createProgressBar(element, size){ 
+	var x = 1;
+	var adder = 1;
+	function addOne(){
+		var bars = '<p>|';
+		for (var i = 0; i < x; i++){ bars += ' | '; }
+		bars += '</p>';
+		element.innerHTML = bars;
+		if (x === size){
+			adder = -1;
+		} else if ( x === 0){
+			adder = 1;
+		}
+		x += adder;
+	};
+	setInterval(addOne, 300);
+}
+
+function stageAndPublish(file) {
+	// stage files 
+	stagedFiles = [file]; // stores the selected file for 
+	// make sure a file was selected
+	if (stagedFiles) {
+		// make sure only 1 file was selected
+		if (stagedFiles.length < 1) {
+			alert("A file is needed");
+			return;
+		}
+		// make sure the content type is acceptable
+		switch (stagedFiles[0].type) {
+			case "image/png":
+			case "image/jpeg":
+			case "image/gif":
+			case "video/mp4":
+				uploader.submitFiles(stagedFiles);
+				break;
+			default:
+				alert("Only .png, .jpeg, .gif, and .mp4 files are currently supported");
+				break;
+		}
+	}
+
+}
+
+// update the publish status
+function updatePublishStatus(msg){
+	document.getElementById('publish-status').innerHTML = msg;
+}
+
+/* socketio-file-upload listeners */
+uploader.addEventListener('start', function(event){
+	event.file.meta.name = claimName;
+	event.file.meta.license = license;
+	event.file.meta.nsfw = nsfw;
+	event.file.meta.type = stagedFiles[0].type;
+	// 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
+	createProgressBar(document.getElementById('progress-bar'), 12);
+});
+uploader.addEventListener('progress', function(event){
+	var percent = event.bytesLoaded / event.file.size * 100;
+	updatePublishStatus('File is ' + percent.toFixed(2) + '% loaded to the server');
+});
+
+/* socket.io message listeners */
+socket.on('publish-status', function(msg){
+	updatePublishStatus(msg);
+});
+socket.on('publish-failure', function(msg){
+	document.getElementById('publish-active-area').innerHTML = '<p>' + JSON.stringify(msg) + '</p><p> --(✖╭╮✖)→ </p><strong>For help, post the above error text in the #speech channel on the <a href="https://lbry.slack.com/" target="_blank">LBRY slack</a></strong>';
+});
+socket.on('publish-complete', function(msg){
+	var publishResults;
+	var directUrl = 'https://spee.ch/' + msg.name + '/' + msg.result.claim_id;
+	// build new publish area
+	publishResults = '<p><span id="tweet-meme-button"></span>Your publish is complete! Go ahead, share it with the world!</p>';
+	publishResults += '<p><strong>NOTE: the blockchain will need a few minutes to process your amazing work.  Please allow some time for your meme to appear at your link.</strong></p>';
+	publishResults += '<p>Your meme has been published to <a target="_blank" href="/' + msg.name + '">http://spee.ch/' + msg.name + '</a></p>';
+	publishResults += '<p>Here is a direct link to where your meme will be stored: <a target="_blank" href="' + directUrl + '">' + directUrl + '</a></p>';
+	publishResults += '<p>Your Transaction ID is: <a target="_blank" href="https://explorer.lbry.io/#!/transaction?id=' + msg.result.txid + '">' + msg.result.txid + '</a></p>';
+	publishResults += '<p><a href="/meme-fodder/play">Reload to publish another</a></p>';
+	// update publish area
+	document.getElementById('publish-active-area').innerHTML = publishResults;
+	// add a tweet button
+	twttr.widgets
+		.createShareButton(
+			directUrl,
+			document.getElementById('tweet-meme-button'),
+			{
+				text: 'Check out my meme creation on the LBRY blockchain!',
+				hashtags: 'LBRYMemeFodder',
+				via: 'lbryio'
+			})
+		.then( function( el ) {
+			console.log('Tweet button added.');
+		});
+});

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

routes/show-routes.js

@@ -3,12 +3,26 @@ const showController = require('../controllers/showController.js');
 const logger = require('winston');
 
 module.exports = (app, ua, googleAnalyticsId) => {
+  // route to fetch all free public claims
+  app.get('/meme-fodder/play', ({ originalUrl }, res) => {
+    // google analytics
+    logger.debug(`GET request on ${originalUrl}`);
+    // get and serve content
+    showController
+      .getAllClaims('meme-fodder')
+      .then(orderedFreePublicClaims => {
+        res.status(200).render('memeFodder', { claims: orderedFreePublicClaims });
+      })
+      .catch(error => {
+        errorHandlers.handleRequestError(error, res);
+      });
+  });
   // route to fetch all free public claims
   app.get('/:name/all', ({ originalUrl, params }, res) => {
     logger.debug(`GET request on ${originalUrl}`);
     // google analytics
     ua(googleAnalyticsId, { https: true }).event('Show Routes', '/name/all', `${params.name}/all`).send();
-    // fetch all free public claims
+    // get and serve content
     showController
       .getAllClaims(params.name)
       .then(orderedFreePublicClaims => {

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

@@ -0,0 +1,17 @@
+<div class="container">
+	{{> topBar}}
+	{{ image }}
+	<div class="row">
+		{{> memeMaker}}
+	</div>
+	<div class="row">
+		{{> memeResults}}
+	</div>
+</div>
+
+<script src="/assets/js/memeDraw.js"></script>
+
+<script src="/socket.io/socket.io.js"></script>
+<script src="/siofu/client.js"></script>
+
+<script src="/assets/js/memePublish.js"></script>

views/partials/documentation.handlebars

@@ -1,7 +1,7 @@
 <div class="col-md-12">
 	<div class="card" id="documentation">
 		<div class="card-title card-block grey lighten-1 white-text">
-			<h2>Site Navigation</h2>
+			<h2>Documentation</h2>
 		</div>
 		<div class="row">
 			<div class="col-md-12">

views/partials/examples.handlebars

@@ -1,16 +1,26 @@
 <div class="col-md-12">
 	<div class="card" id="examples">
 		<div class="card-title card-block grey lighten-1 white-text">
+			<h2>What Is Spee.ch?</h2>
+		</div>
+		<div class="row">
+			<div class="col-md-6" id="contribute">
+				<h2>Spee.ch is for sharing</h2>
+				<p>Spee.ch is a platform by which you can publish images to the Lbry blockchain.  Just upload an image, title it, and send it off into the lbry ecosystem.</p>
+				<p>Spee.ch is also a platform to serve you those images.  It's like have a personal chef that will serve you a meal anywhere in the world.  All you have to do is ask for it, by using "spee.ch/" + the name of a claim.</p>
+				<p>If you want a specific image, just ask for it with the claim_id by using "spee.ch/" + the name of the claim + "/" + the claim id.</p>
+			</div>
+			<div class="col-md-6" id="bugs">
 				<h2>Examples</h2>
-		</div>
+				<h5>Use spee.ch to serve the top asset at a lbry claim:</h5>
-		<div class="card-block">
+				<a href="/coconuts">spee.ch/coconuts</a><br>
-			<ul>
+				<a href="/wood">spee.ch/wood</a><br>
-				<li class="list-square"><a href="/coconuts">spee.ch/coconuts</a></li>
+				<a href="/doitlive">spee.ch/doitlive</a><br>
-				<li class="list-square"><a href="/wood">spee.ch/wood</a></li>
+				<h5>Use spee.ch to show you all the assets at a lbry claim:</h5>
-				<li class="list-square"><a href="/doitlive">spee.ch/doitlive</a></li>
+				<a href="/doitlive/all">spee.ch/doitlive/all</a>
-				<li class="list-square"><a href="/doitlive/all">spee.ch/doitlive/all</a></li>
+				<h5>Use spee.ch to serve you a specific asset by claim id:</h5> 
-				<li class="list-square"><a href="/doitlive/ca3023187e901df9e9aabd95d6ae09b6cc69b3f0">spee.ch/doitlive/ca3023187e901df9e9aabd95d6ae09b6cc69b3f0</a></li>
+				<a href="/doitlive/ca3023187e901df9e9aabd95d6ae09b6cc69b3f0">spee.ch/doitlive/ca3023187e901df9e9aabd95d6ae09b6cc69b3f0</a>
-			</ul>
+			</div>
 		</div>
 	</div>
 </div>

views/partials/memeMaker.handlebars

@@ -0,0 +1,53 @@
+<div class="col-md-12">
+	<div class="card" id="publish">
+		<div class="card-title card-block grey lighten-1 white-text">
+			<h2>#LBRYMemeFodder</h2>
+		</div>
+		<div class="card-block">
+			<div class="row">
+				<div class="col-md-12">
+					<h3>Congratulations, you found the /meme-fodder game! </h3>
+					<p>Here's how it's played...</p>
+					<p>(1) <i>/meme-fodder</i> will always use the winning public, free image published to <a href="LBRY://meme-fodder">LBRY://meme-fodder</a>.  (meaning the most recent, highest bid). Want to put a different image on the chopping block? Go publish it!</p>
+					<p>(2) Create a meme based on the current claim with the tool below.  Think you got a winner? <a href="https://twitter.com/hashtag/LBRYMemeFodder" target="_blank">Share it with the community</a> and see what they think!</p>
+				</div>
+			</div>
+			<div class="row">
+				<div class="col-md-5">
+					<canvas id="meme-canvas">
+						If you can see this, canvas is not supported.
+					</canvas>
+					<img id="start-image" src="/meme-fodder" alt="a picture to make your meme with"/>
+				</div>
+				<div class="col-md-7">
+					<div 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="Hello" />
+							</div>
+						</div>
+						<div class="row">
+							<div class="col-md-12">
+								<input id="bottom-text" type="text" value="world!" />
+							</div>
+						</div>
+						<div class="row">
+							<div class="col-md-12">
+								<label for="meme-name">Claim Name:</label>
+								<input id="file-name-input" type="text" value="My-Claim-Name" />
+							</div>
+						</div>
+						<div class="row">
+							<div class="col-md-12">
+								<button onclick="startPublish()">Save and Publish</button>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
+
+<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

views/partials/memeResults.handlebars

@@ -0,0 +1,25 @@
+<div class="col-md-12">
+	<div class="card" id="publish">
+		<div class="card-title card-block grey lighten-1 white-text">
+			<h2>Recent Meme Fodder</h2>
+		</div>
+		<div class="card-block" id="publish-active-area">
+			<div class="row">
+				<div class="col-md-12">
+					<p>Below are some of the most recent images that have been fuel for our enjoyment on /meme-fodder</p>
+				</div>
+			</div>
+			<div class="row">
+			{{#each claims}}
+				<div class="col-md-3">
+					<a href="/{{this.name}}/{{this.claim_id}}">
+					<img class="all-claims-img" src="/{{this.name}}/{{this.claim_id}}" /></a>
+				</div>
+				<hr>
+			{{/each}}
+			</div>
+			<p>(ideally I'd like to display what users have submitted here)</p>
+			<p>(maybe a voting system?  Is there a way to allow people to donate funds to a claimId so that it will show up higher in the results?)</p>
+		</div>
+	</div>
+</div>