Merge pull request #148 from lbryio/titles-and-descriptions

Titles and descriptions

controllers/publishController.js

@@ -24,15 +24,17 @@ module.exports = {
         publishResults = result;
         logger.info(`Successfully published ${fileName}`, publishResults);
         fileRecord = {
-          name    : publishParams.name,
+          name       : publishParams.name,
-          claimId : publishResults.claim_id,
+          claimId    : publishResults.claim_id,
-          address : publishParams.claim_address,
+          title      : publishParams.metadata.title,
-          outpoint: `${publishResults.txid}:${publishResults.nout}`,
+          description: publishParams.metadata.description,
-          height  : 0,
+          address    : publishParams.claim_address,
+          outpoint   : `${publishResults.txid}:${publishResults.nout}`,
+          height     : 0,
           fileName,
-          filePath: publishParams.file_path,
+          filePath   : publishParams.file_path,
           fileType,
-          nsfw    : publishParams.metadata.nsfw,
+          nsfw       : publishParams.metadata.nsfw,
         };
         upsertCriteria = {
           name   : publishParams.name,

helpers/publishHelpers.js

@@ -51,7 +51,7 @@ module.exports = {
         throw new Error('NSFW value was not accepted.  NSFW must be set to either true, false, "on", or "off"');
     }
   },
-  createPublishParams (name, filePath, license, nsfw) {
+  createPublishParams (name, filePath, title, description, license, nsfw) {
     logger.debug(`Creating Publish Parameters for "${name}"`);
     const claimAddress = config.get('WalletConfig.LbryClaimAddress');
     // filter nsfw and ensure it is a boolean
@@ -68,15 +68,23 @@ module.exports = {
     } else {
       nsfw = true;
     }
+    // provide defaults for title & description
+    if (title === '' || title === null) {
+      title = name;
+    }
+    if (description === '' || title === null) {
+      description = `${name} published via spee.ch`;
+    }
+    // create the publish params
     const publishParams = {
       name,
       file_path: filePath,
       bid      : 0.01,
       metadata : {
-        description: `${name} published via spee.ch`,
+        description,
-        title      : name,
+        title,
-        author     : 'spee.ch',
+        author  : 'spee.ch',
-        language   : 'en',
+        language: 'en',
         license,
         nsfw,
       },

public/assets/css/componentStyle.css

@@ -29,7 +29,8 @@
 #drop-zone {
 	border: 1px dashed lightgrey;
 	padding: 1em;
-	height: 6em;
+	height: 13em;
+	background: #F5F0EF;
 }
 
 #asset-preview-holder {
@@ -37,13 +38,22 @@
 	margin-bottom: 1em;
 }
 
-.claim-name-input-area {
+#claim-name-input-area {
 	border-bottom: 1px blue solid;
 	float: left;
 	margin-bottom: 1em;
 	font-weight: bold;
 }
 
+.publish-input, #publish-license {
+	border: 1px solid lightgrey; 
+}
+
+.publish-input {
+	padding: 1%; 
+	width: 90%
+}
+
 #claim-name-input {
 	border: 0px;
 }

public/assets/css/generalStyle.css

@@ -1,3 +1,6 @@
+body, button, input, textarea, label, select, option {
+	font-family: serif;
+}
 /* Containters */
 .wrapper {
 	margin-left: 20%;

routes/serve-routes.js

@@ -1,5 +1,5 @@
 const logger = require('winston');
-const { serveFile, showFile, showFileLite, getShortIdFromClaimId } = require('../helpers/serveHelpers.js');
+const { serveFile, showFile, showFileLite, getShortIdFromClaimId, resolveAgainstClaimTable } = require('../helpers/serveHelpers.js');
 const { getAssetByChannel, getAssetByShortId, getAssetByClaimId, getAssetByName } = require('../controllers/serveController.js');
 const { handleRequestError } = require('../helpers/errorHandlers.js');
 const { postToStats, sendGoogleAnalytics } = require('../controllers/statsController.js');
@@ -48,6 +48,12 @@ function serveOrShowAsset (fileInfo, extension, method, headers, originalUrl, ip
       return getShortIdFromClaimId(fileInfo.claimId, fileInfo.height, fileInfo.name)
       .then(shortId => {
         fileInfo['shortId'] = shortId;
+        return resolveAgainstClaimTable(fileInfo.name, fileInfo.claimId);
+      })
+      .then(resolveResult => {
+        logger.debug('resolve result', resolveResult);
+        fileInfo['title'] = resolveResult.title;
+        fileInfo['description'] = resolveResult.description;
         showFile(fileInfo, res);
         postToStats('show', originalUrl, ip, fileInfo.name, fileInfo.claimId, 'success');
         return fileInfo;
@@ -135,6 +141,7 @@ module.exports = (app) => {
     getAsset(claimType, channelName, shortId, fullClaimId, name)
     // 2. serve or show
     .then(fileInfo => {
+      logger.debug('fileInfo', fileInfo);
       if (!fileInfo) {
         res.status(200).render('noClaims');
       } else {

routes/sockets-routes.js

@@ -36,7 +36,7 @@ module.exports = (app, siofu, hostedContentPath) => {
         logger.debug(`Client successfully uploaded ${file.name}`);
         socket.emit('publish-status', 'File upload successfully completed. Your image is being published to LBRY (this might take a second)...');
         // prepare the publish parameters
-        const publishParams = publishHelpers.createPublishParams(file.meta.name, file.pathName, file.meta.license, file.meta.nsfw);
+        const publishParams = publishHelpers.createPublishParams(file.meta.name, file.pathName, file.meta.title, file.meta.description, file.meta.license, file.meta.nsfw);
         // publish the file
         publishController.publish(publishParams, file.name, file.meta.type)
         .then(result => {

speech.js

@@ -48,11 +48,11 @@ const hbs = expressHandlebars.create({
         </script>`
       );
     },
-    addOpenGraph (title, mimeType, showUrl, source) {
+    addOpenGraph (title, mimeType, showUrl, source, description) {
       let basicTags = `<meta property="og:title" content="${title}"> 
           <meta property="og:url" content="${showUrl}" > 
           <meta property="og:site_name" content="Spee.ch" > 
-          <meta property="og:description" content="View or download ${title} from spee.ch: the open-source, decentralized content host." >`;
+          <meta property="og:description" content="${description}">`;
       if (mimeType === 'video/mp4') {
         return new Handlebars.SafeString(
           `${basicTags} <meta property="og:image" content="https://spee.ch/assets/img/content-freedom-large.png" > 

views/index.handlebars

@@ -3,7 +3,6 @@
 	<div class="full"> 
 		{{> publish}}
 		{{> learnMore}}
-		{{> trendingAssets}}
 	</div>
 	{{> footer}}
 </div>
@@ -21,9 +20,13 @@
 	/* socketio-file-upload listeners */
 	uploader.addEventListener('start', function(event){
 		var name = document.getElementById('claim-name-input').value;
+		var title = document.getElementById('publish-title').value;
+		var description = document.getElementById('publish-description').value;
 		var license = document.getElementById('publish-license').value;
 		var nsfw = document.getElementById('publish-nsfw').checked;
 		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;

views/layouts/show.handlebars

@@ -10,7 +10,7 @@
 	<meta property="fb:app_id" content="1371961932852223">
 	{{#unless fileInfo.nsfw}}
 	{{{addTwitterCard fileInfo.fileType openGraphInfo.source openGraphInfo.embedUrl openGraphInfo.directFileUrl}}}
-	{{{addOpenGraph fileInfo.name fileInfo.fileType openGraphInfo.showUrl openGraphInfo.source}}}
+	{{{addOpenGraph fileInfo.title fileInfo.fileType openGraphInfo.showUrl openGraphInfo.source fileInfo.description}}}
 	{{/unless}}
 </head>
 <body>

views/partials/assetInfo.handlebars

@@ -1,6 +1,6 @@
 <div class="panel">
-	<h2>Name</h2>
+	<h2>Title</h2>
-	<p>{{fileInfo.name}}</>
+	<p>{{fileInfo.title}}</>
 </div>
 <div class="panel links">
 	<h2 class="subheader">Links</h2>
@@ -29,6 +29,7 @@
 		<input type="text" id="gifv-text" class="link" readonly onclick="select()" spellcheck="false" value='https://spee.ch/{{fileInfo.shortId}}/{{fileInfo.name}}.gifv'/>
 		<button class="copy-button" data-elementtocopy="gifv-text" onclick="copyToClipboard(event)">copy</button>
 	</div>
+	{{/ifConditional}}
 	{{!-- html text for embedding asset--}}
 	<div class="share-option">
 		Embed HTML
@@ -41,7 +42,6 @@
 		{{/ifConditional}}
 		<button class="copy-button" data-elementtocopy="embed-text" onclick="copyToClipboard(event)">copy</button>
 	</div>
-	{{/ifConditional}}
 	{{!--markdown text using asset--}}
 	{{#ifConditional fileInfo.fileType '===' 'video/mp4'}}
 	{{else}}
@@ -54,6 +54,10 @@
 	</div>
 	{{/ifConditional}}
 </div>
+<div class="panel">
+	<h2>Description</h2>
+	<p>{{fileInfo.description}}</>
+</div>
 <div class="panel">
 	<h2 class="subheader">Metadata</h2>
 	<table class="metadata-table" style="table-layout: fixed">

views/partials/publish.handlebars

@@ -1,36 +1,53 @@
 <div class="panel">
 	<h2>Publish</h2>
-	<div class="col-left" id="file-selection-area">
+	<div class="row" style="overflow:auto; height: 100%;">
-		<div id="drop-zone" ondrop="drop_handler(event);" ondragover="dragover_handler(event);" ondragend="dragend_handler(event)">
+		<div class="col-left" id="file-selection-area">
-			<p>Drag and drop your file here, or choose your file below.</p>
+			<div id="drop-zone" ondrop="drop_handler(event);" ondragover="dragover_handler(event);" ondragend="dragend_handler(event)">
-			<div class="input-error" id="input-error-file-selection" hidden="true"></div>
+				<p>Drag and drop your file here, or choose your file below.</p>
-			<input type="file" id="siofu_input" name="file" accept="video/*,image/*" onchange="previewAndStageFile(event.target.files[0])" enctype="multipart/form-data"/>
+				<div class="input-error" id="input-error-file-selection" hidden="true"></div>
-		</div>
+				<input type="file" id="siofu_input" name="file" accept="video/*,image/*" onchange="previewAndStageFile(event.target.files[0])" enctype="multipart/form-data"/>
-		<div id="asset-preview-holder"></div>
+			</div>
-	</div>
+			<div id="asset-preview-holder"></div>
-	<div class="col-right">
+		</div>
-		<div id="publish-active-area">
+		<div class="col-right">
-			<div class="input-error" id="input-error-claim-name" hidden="true"></div>
+			<div id="publish-active-area">
-			<div class="claim-name-input-area">
+				<div class="input-error" id="input-error-claim-name" hidden="true"></div>
-				Spee.ch/<input type="text" id="claim-name-input" placeholder="your-title-here" oninput="checkClaimName(event.target.value)">
+				<div id="claim-name-input-area">
-				<span id="claim-name-available" hidden="true" style="color: green">&#x2714</span>
+					Spee.ch/<input type="text" id="claim-name-input" placeholder="your-url-here" oninput="checkClaimName(event.target.value)">
+					<span id="claim-name-available" hidden="true" style="color: green">&#x2714</span>
+				</div>
+				<div class="stop-float">
+					<table>
+						<tr>
+							<td><label for="publish-title">Title: </label></td>
+							<td><input type="text" id="publish-title" class="publish-input"></td>
+						</tr>
+						<tr>
+							<td><label for="publish-description">Description: </label></td>
+							<td><textarea rows="2" id="publish-description" class="publish-input"> </textarea></td>
+						</tr>
+						<tr>
+							<td><label for="publish-license">License:* </label></td>
+							<td>
+								<select type="text" id="publish-license" name="license" value="license">
+									<option value="Public Domain">Public Domain</option>
+									<option value="Creative Commons">Creative Commons</option>
+								</select>
+							</td>
+						</tr>
+						<tr>
+							<td><label for="publish-nsfw">NSFW*</label></td>
+							<td><input type="checkbox" id="publish-nsfw"></td>
+						</tr>
+					</table>
+				</div>
+				<p>
+				<div class="input-error" id="input-error-publish-submit" hidden="true"></div>
+				<button id="publish-submit" onclick="publishSelectedImage(event)">Publish</button>
+				<button onclick="resetPublishArea()">Reset</button>
+				</p>
+				<p><i>By clicking 'Publish' I attest that I have read and agree to the <a href="https://lbry.io/termsofservice" target="_blank">LBRY terms of service</a>.</i></p>
 			</div>
-			<p class="stop-float">
-			<label for="publish-license">License:</label>
-			<select type="text" id="publish-license" name="license" value="license">
-				<option value="Public Domain">Public Domain</option>
-				<option value="Creative Commons">Creative Commons</option>
-			</select> 
-			<br />
-			<input type="checkbox" id="publish-nsfw">
-			<label for="publish-nsfw">NSFW</label>
-			</p>
-			<p>
-			<div class="input-error" id="input-error-publish-submit" hidden="true"></div>
-			<button id="publish-submit" onclick="publishSelectedImage(event)">Publish</button>
-			<button onclick="resetPublishArea()">Reset</button>
-			</p>
-			<p><i>By clicking 'Publish' I attest that I have read and agree to the <a href="https://lbry.io/termsofservice" target="_blank">LBRY terms of service</a>.</i></p>
 		</div>
 	</div>
 </div>
@@ -44,17 +61,19 @@
 			<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>`;
-		// reset 
+		// reset inputs
 		document.getElementById('claim-name-input').value = '';
-		// remove staged files 
+		document.getElementById('publish-title').value = '';
+		document.getElementById('publish-description').value = '';
+		document.getElementById('publish-nsfw').checked = false;
+		// remove staged files
 		stagedFiles = null;
 		// clear any errors
 		document.getElementById('input-error-file-selection').innerHTML = '';
 		document.getElementById('input-error-claim-name').innerHTML = '';
 		document.getElementById('input-error-publish-submit').innerHTML = '';
-		// remove nsfw check
 		document.getElementById('claim-name-available').hidden = true;
 		// remove nsfw check
-		document.getElementById('publish-nsfw').checked = false;
+		
 	}
 </script>

views/partials/topBar.handlebars

@@ -1,6 +1,7 @@
 <div class="top-bar">
 	<a href="https://en.wikipedia.org/wiki/Freedom_of_information" target="_blank"><img id="logo" src="/assets/img/content-freedom-64px.png"/></a>
 	<h1 id="title"><a href="/">Spee.ch</a></h1><span class="top-bar-left">(beta)</span>
+	<a href="/trending" class="top-bar-right">trending</a>
 	<a href="https://github.com/lbryio/spee.ch" target="_blank" class="top-bar-right">source</a>
 	<a href="/about" class="top-bar-right">help</a>
 	<div class="top-bar-tagline">Open-source, decentralized image and video hosting.</div>