copy to clipboard works

public/assets/css/allStyle.css

@@ -15,14 +15,12 @@
 .main {
 	float: left;
 	width: 65%;
-	margin-right: 1%;
+	
-	padding-right: 1%;
-	border-right: 1px lightgrey solid;
 }
 
 .sidebar {
 	float: right;
-	width: 32%;
+	width: 33%;
 }
 
 footer {
@@ -63,7 +61,8 @@ footer {
 
 /* text */
 
-a {
+a, a:visited {
+	color: blue;
 	text-decoration: none;
 }
 h1 {
@@ -78,6 +77,10 @@ h2 {
 	padding: 6px;
 }
 
+.subheader {
+	margin-top: 0px;
+}
+
 h4 {
 	padding: 3px;
 }

public/assets/css/componentStyle.css

@@ -13,6 +13,9 @@
 }
 
 /* show routes */
+.asset-name {
+	font-size: large;
+}
 
 .show-asset {
 	width: 100%;
@@ -24,10 +27,30 @@
 	margin: 0px;
 }
 
-.table-metadata {
+.panel.links {
 	font-size: small;
 }
 
+input.link {
+	width: 80%;
+}
+
+button.copy-button {
+	padding: 4px;
+	float: right;
+}
+
+.metadata-table {
+	font-size: small;
+	border-collapse: collapse;
+	margin-bottom: 1em;
+}
+
+.metadata-row {
+	border-bottom: 1px solid lightgrey;
+	margin: 2px;
+}
+
 .left-column {
 	width: 30%;
 	font-weight: bold;
@@ -39,7 +62,7 @@
 	text-align: center;
 	margin-top: 2px;
 	padding-top: 2px;
-	border-top: 1px lightgrey solid;
+	border-top: 1px solid lightgrey;
 }
 
 /* examples */

public/assets/js/claimPublish.js

@@ -92,16 +92,16 @@ 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>';
+	document.getElementById('publish-active-area').innerHTML = '<p> --(✖╭╮✖)→ </p><p>' + JSON.stringify(msg) + '</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 = '/' + msg.name + '/' + msg.result.claim_id;
+	var showUrl = '/s/' + msg.name + '/' + msg.result.claim_id;
 	// build new publish area
-	publishResults = '<p>Your publish is complete! You are being redicted to it</p>';
+	publishResults = '<p>Your publish is complete! You are being redirected to it now.</p>';
-	publishResults += '<p><a target="_blank" href="' + directUrl + '">if you do not get redirected, click here</a></p>';
+	publishResults += '<p><a target="_blank" href="' + showUrl + '">If you do not get redirected, click here.</a></p>';
 	// update publish area
 	document.getElementById('publish-active-area').innerHTML = publishResults;
-	window.location.href = directUrl;
+	window.location.href = showUrl;
 });

routes/sockets-routes.js

@@ -67,7 +67,6 @@ module.exports = (app, siofu, hostedContentPath) => {
         };
         // set the data
         const fileExtension = filePath.substring(filePath.lastIndexOf('.'));
-        console.log(fileExtension);
         let data = {
           type  : null,
           buffer: assetBuffer.toString('base64'),

server.js

@@ -53,6 +53,28 @@ const hbs = expressHandlebars.create({
         </script>`
       );
     },
+    ifConditional (varOne, operator, varTwo, options) {
+      switch (operator) {
+        case '===':
+          return (varOne === varTwo) ? options.fn(this) : options.inverse(this);
+        case '!==':
+          return (varOne !== varTwo) ? options.fn(this) : options.inverse(this);
+        case '<':
+          return (varOne < varTwo) ? options.fn(this) : options.inverse(this);
+        case '<=':
+          return (varOne <= varTwo) ? options.fn(this) : options.inverse(this);
+        case '>':
+          return (varOne > varTwo) ? options.fn(this) : options.inverse(this);
+        case '>=':
+          return (varOne >= varTwo) ? options.fn(this) : options.inverse(this);
+        case '&&':
+          return (varOne && varTwo) ? options.fn(this) : options.inverse(this);
+        case '||':
+          return (varOne || varTwo) ? options.fn(this) : options.inverse(this);
+        default:
+          return options.inverse(this);
+      }
+    },
   },
 });
 app.engine('handlebars', hbs.engine);

views/partials/asset.handlebars

@@ -2,4 +2,34 @@
 	<div id="asset-placeholder" data-filepath="{{{fileInfo.filePath}}}">
 		<p> loading... </p>
 	</div>
-</div>
+</div>
+
+<script src="/socket.io/socket.io.js"></script>
+<script type="text/javascript">
+	var socket = io();
+	var filePath = document.getElementById('asset-placeholder').dataset.filepath;
+	if (filePath) {
+		// send request for the file
+		socket.emit('asset-request', filePath);
+		// update the html
+		document.getElementById('asset-placeholder').innerHTML = '<p>Loading...</p><div id="progress-bar"></div>';
+		// start a progress animation
+		createProgressBar(document.getElementById('progress-bar'), 12);
+	}
+	// wait for the file to be sent
+	socket.on('asset-transfer', function(data) {
+		switch (data.type) {
+			case 'image/jpeg':
+			case 'image/gif':
+			case 'image/png':
+				const base64Image = 'data:' + data.type + ';base64,' + data.buffer;
+				document.getElementById("asset-placeholder").innerHTML = '<img class="show-asset" src="' + base64Image + '"/>';
+				break;
+			case 'video/mp4':
+				const base64video = 'data:' + data.type + ';base64,' + data.buffer;
+				document.getElementById("asset-placeholder").innerHTML = '<video class="show-asset" controls> <source src="' + base64video + '"></video>';
+				break;
+			default: break;
+		}
+	});
+</script>

views/partials/assetInfo.handlebars

@@ -0,0 +1,69 @@
+<div class="panel">
+	<h2>Title</h2>
+	<p class="asset-name">{{fileInfo.name}}</>
+</div>
+<div class="panel links">
+	<h2 class="subheader">Links</h2>
+	<a href="/{{fileInfo.name}}/{{fileInfo.claimId}}">Direct Link</a>
+	</br>
+	<input type="text" id="direct-link" class="link" readonly="true" spellcheck="false" value="spee.ch/{{fileInfo.name}}/{{fileInfo.claimId}}"/>
+	<button class="copy-button" data-elementtocopy="direct-link" onclick="copyToClipboard(event)">copy</button>
+	</br>
+	<br/>
+	<a href="/s/{{fileInfo.name}}/{{fileInfo.claimId}}">Details Link</a>
+	</br>
+	<input type="text" id="show-link" class="link" readonly="true" spellcheck="false" value="spee.ch/s/{{fileInfo.name}}/{{fileInfo.claimId}}"/>
+	<button class="copy-button" data-elementtocopy="show-link" onclick="copyToClipboard(event)">copy</button>
+	</br>
+	<br/>
+	Embed HTML
+	</br>
+	{{#ifConditional fileInfo.fileType '===' 'video/mp4'}}
+		<input type="text" id="embed-text" class="link" readonly="true" spellcheck="false" value='&lt;video controls>&lt;source src="https://spee.ch/{{fileInfo.name}}/{{fileInfo.claimId}}" />&lt;/video>'/>
+	{{else}}
+		<input type="text" id="embed-text" class="link" readonly="true" spellcheck="false" value='&lt;img src="https://spee.ch/{{fileInfo.name}}/{{fileInfo.claimId}}" />'/>
+	{{/ifConditional}}
+	<button class="copy-button" data-elementtocopy="embed-text" onclick="copyToClipboard(event)">copy</button>
+	<br/>
+	<br/>
+</div>
+<div class="panel">
+	<h2 class="subheader">Metadata</h2>
+	<table class="metadata-table" style="table-layout: fixed">
+		<tr class="metadata-row">
+			<td class="left-column">Name</td>
+			<td>{{fileInfo.name}}</td>
+		</tr>
+		<tr class="metadata-row">
+			<td class="left-column">Claim Id</td>
+			<td>{{fileInfo.claimId}}</td>
+		</tr>
+		<tr class="metadata-row">
+			<td class="left-column">File Name</td>
+			<td>{{fileInfo.fileName}}</td>
+		</tr>
+		<tr>
+			<td class="left-column">fileType</td>
+			<td>{{#if fileInfo.fileType}}
+					{{fileInfo.fileType}}
+				{{else}}
+					unknown
+				{{/if}}
+			</td>
+		</tr>
+	</table>
+</div>
+
+<script type ="text/javascript">
+ 	// update the link holder
+	function copyToClipboard(event){
+		var elementToCopy = event.target.dataset.elementtocopy;
+		var element = document.getElementById(elementToCopy);
+		element.select();
+		try {
+			var successful = document.execCommand('copy');
+		} catch (err) {
+			alert('Oops, unable to copy');
+		}
+	}
+</script>

views/partials/assetLinks.handlebars

@@ -1,13 +0,0 @@
-<div class="panel">
-	<h2>links</h2>
-	<table class="table-metadata" style="table-layout: fixed">
-		<tr>
-			<td class="left-column">Direct Link:</td>
-			<td><a href="https://spee.ch/{{fileInfo.name}}/{{fileInfo.claimId}}">https://spee.ch/{{fileInfo.name}}/{{fileInfo.claimId}}</a></td>
-		</tr>
-		<tr>
-			<td class="left-column">Embed:</td>
-			<td><code>&lt;img src="https://spee.ch/{{fileInfo.name}}/{{fileInfo.claimId}}" /></code></td>
-		</tr>
-	</table>
-</div>

views/partials/assetMetadata.handlebars

@@ -1,21 +0,0 @@
-<div class="panel">
-	<h2>metadata</h2>
-	<table class="table-metadata" style="table-layout: fixed">
-		<tr>
-			<td class="left-column">Name</td>
-			<td>{{fileInfo.name}}</td>
-		</tr>
-		<tr>
-			<td class="left-column">Claim Id</td>
-			<td>{{fileInfo.claimId}}</td>
-		</tr>
-		<tr>
-			<td class="left-column">File Name</td>
-			<td>{{fileInfo.fileName}}</td>
-		</tr>
-		<tr>
-			<td class="left-column">fileType</td>
-			<td>{{fileInfo.fileType}}</td>
-		</tr>
-	</table>
-</div>

views/show.handlebars

@@ -4,40 +4,7 @@
 		{{> asset}}
 	</div>
 	<div class="sidebar">
-		<h1>{{fileInfo.name}}</h1> 
+		{{> assetInfo}}
-		{{> assetLinks}}
-		{{> assetMetadata}}
 	</div>
 	{{> footer}}
-</div>
+</div>
-
-<script src="/socket.io/socket.io.js"></script>
-<script type="text/javascript">
-	var socket = io();
-	var filePath = document.getElementById('asset-placeholder').dataset.filepath;
-	console.log(filePath);
-	if (filePath) {
-		// send request for the file
-		socket.emit('asset-request', filePath);
-		// update the html
-		document.getElementById('asset-placeholder').innerHTML = '<p>Loading...</p><div id="progress-bar"></div>';
-		// start a progress animation
-		createProgressBar(document.getElementById('progress-bar'), 12);
-	}
-	// wait for the file to be sent
-	socket.on('asset-transfer', function(data) {
-		switch (data.type) {
-			case 'image/jpeg':
-			case 'image/gif':
-			case 'image/png':
-				const base64Image = 'data:' + data.type + ';base64,' + data.buffer;
-				document.getElementById("asset-placeholder").innerHTML = '<img class="show-asset" src="' + base64Image + '"/>';
-				break;
-			case 'video/mp4':
-				const base64video = 'data:' + data.type + ';base64,' + data.buffer;
-				document.getElementById("asset-placeholder").innerHTML = '<video class="show-asset" controls> <source src="' + base64video + '"></video>';
-				break;
-			default: break;
-		}
-	});
-</script>

views/showLite.handlebars

@@ -6,7 +6,6 @@
 <script type="text/javascript">
 	var socket = io();
 	var filePath = document.getElementById('asset-placeholder').dataset.filepath;
-	console.log(filePath);
 	if (filePath) {
 		// send request for the file
 		socket.emit('asset-request', filePath);