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

copy to clipboard works

Browse source
This commit is contained in:
bill bittner 2017-07-06 17:38:57 -07:00
parent eda480b81a
commit 732c845854
11 changed files with 162 additions and 84 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
public/assets/css/allStyle.css
View file

@ -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;
}

27
public/assets/css/componentStyle.css
View file

@ -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 */

10
public/assets/js/claimPublish.js
View file

@ -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><a target="_blank" href="' + directUrl + '">if you do not get redirected, click here</a></p>';
publishResults = '<p>Your publish is complete! You are being redirected to it now.</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;
});

1
routes/sockets-routes.js
View file

@ -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'),

22
server.js
View file

@ -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);

32
views/partials/asset.handlebars
View file

@ -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>

69
views/partials/assetInfo.handlebars Normal file
View file

@ -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>

13
views/partials/assetLinks.handlebars
View file

@ -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>

21
views/partials/assetMetadata.handlebars
View file

@ -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>

37
views/show.handlebars
View file

@ -4,40 +4,7 @@
{{> asset}}
</div>
<div class="sidebar">
<h1>{{fileInfo.name}}</h1>
{{> assetLinks}}
{{> assetMetadata}}
{{> assetInfo}}
</div>
{{> footer}}
</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>
</div>

1
views/showLite.handlebars
View file

@ -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);