Merge pull request #72 from lbryio/show-routes

Show routes
This commit is contained in:
Bill Bittner 2017-07-06 18:10:44 -07:00 committed by GitHub
commit 2c2ae7a348
24 changed files with 540 additions and 266 deletions

View file

@ -195,4 +195,7 @@ module.exports = {
});
return deferred;
},
getAllClaims (claimName) {
return getAllFreePublicClaims(claimName);
},
};

View file

@ -1,7 +0,0 @@
const getAllFreePublicClaims = require('../helpers/functions/getAllFreePublicClaims.js');
module.exports = {
getAllClaims (claimName) {
return getAllFreePublicClaims(claimName);
},
};

View file

@ -3,16 +3,19 @@ const { postToStats } = require('../../controllers/statsController.js');
module.exports = {
handleRequestError (action, originalUrl, ip, error, res) {
logger.error('Request Error >>', error.message);
logger.error('Request Error >>', error);
if (error.response) {
postToStats(action, originalUrl, ip, error.response.data.error.messsage);
res.status(error.response.status).send(error.response.data.error.message);
} else if (error.code === 'ECONNREFUSED') {
postToStats(action, originalUrl, ip, 'Connection refused. The daemon may not be running.');
res.status(503).send('Connection refused. The daemon may not be running.');
} else {
} else if (error.message) {
postToStats(action, originalUrl, ip, error);
res.status(400).send(error.message);
} else {
postToStats(action, originalUrl, ip, error);
res.status(400).send(error);
}
},
handlePublishError (error) {

View file

@ -14,19 +14,17 @@
.main {
float: left;
width: 75%;
margin-right: 1%;
padding-right: 1%;
border-right: 1px lightgrey solid;
margin-bottom: 5px;
width: 65%;
}
.sidebar {
float: left;
width: 22%;
float: right;
width: 33%;
}
footer {
display: inline-block;
width: 100%;
margin-bottom: 2px;
padding-bottom: 2px;
@ -43,7 +41,6 @@ footer {
.panel {
overflow: auto;
word-wrap: break-word;
margin-bottom: 1em;
}
.col-left, .col-right {
@ -64,7 +61,8 @@ footer {
/* text */
a {
a, a:visited {
color: blue;
text-decoration: none;
}
h1 {
@ -73,11 +71,16 @@ h1 {
h2 {
font-size: medium;
margin-top: 1em;
border-top: 1px #999 solid;
background-color: lightgray;
padding: 6px;
}
.subheader {
margin-top: 0px;
}
h4 {
padding: 3px;
}
@ -105,6 +108,10 @@ table {
float: right;
}
.wrap-words {
word-wrap: break-word;
}
@media (max-width: 1250px) {
.wrapper {

View file

@ -12,12 +12,53 @@
margin: 2px 5px 2px 5px;
}
/* show routes */
.show-asset {
width: 100%;
margin-bottom: 1em;
margin-top: 1em;
}
.show-asset-lite {
margin: 0px;
}
.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;
vertical-align: top;
}
/* learn more */
.learn-more {
text-align: center;
margin-top: 2px;
padding-top: 2px;
border-top: 1px lightgrey solid;
border-top: 1px solid lightgrey;
}
/* examples */
@ -30,16 +71,17 @@
.example-image, .example-code {
float: left;
margin: 5px 15px 5px 0px;
margin: 2%;
}
.example-image {
width: 20%;
width: 21%;
}
.example-code {
padding: 2em;
width: 60%;
float: right;
padding: 4%;
width: 62%;
background-color: lightgrey;
font-family: monospace;
color: #666;
@ -82,6 +124,7 @@
#image-preview {
display: none;
margin-bottom: 1em;
}
/* meme */
@ -115,6 +158,10 @@ canvas {
font-size: small;
}
.show-asset-lite {
width: 100%;
}
}
@media (max-width: 475px) {

View file

@ -3,81 +3,6 @@ var socket = io();
var uploader = new SocketIOFileUpload(socket);
var stagedFiles = null;
/* 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);
}
// 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();
var nameInput = document.getElementById('publish-name');
preview.style.display = 'block';
dropzone.style.display = 'none';
previewReader.onloadend = function () {
preview.src = previewReader.result;
};
if (selectedFile) {
previewReader.readAsDataURL(selectedFile); // reads the data and sets the img src
if (nameInput.value === "") {
nameInput.value = selectedFile.name.substring(0, selectedFile.name.indexOf('.'));
}
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) {
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);
}
}
}
// 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();
@ -132,6 +57,12 @@ document.getElementById('publish-submit').addEventListener('click', function(eve
})
/* socketio-file-upload listeners */
uploader.maxFileSize = 5000000;
uploader.addEventListener("error", function(data){
if (data.code === 1) {
alert("Sorry, uploading is limitted to 5 megabytes.");
}
});
uploader.addEventListener('start', function(event){
var name = document.getElementById('publish-name').value;
var license = document.getElementById('publish-license').value;
@ -161,33 +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 = '/show/' + msg.name + '/' + msg.result.claim_id;
// build new publish area
publishResults = '<p>Your publish is complete! View it here:</p>';
publishResults += '<p><a target="_blank" href="' + directUrl + '">spee.ch' + directUrl + '</a></p>';
publishResults += '<p><button class="copy-button">Copy to clipboard</button></p>';
publishResults += '<p><a target="_blank" href="https://explorer.lbry.io/#!/transaction/' + msg.result.txid + '">View the transaction details</a></p>';
publishResults += '<a href="/"><button>Reload</button></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;
// update the link holder
document.getElementById('direct-link-holder').innerText = 'https://spee.ch' + directUrl;
// enable copy-to-clipboard
var copyBtn = document.querySelector('.copy-button');
copyBtn.addEventListener('click', function(event) {
// select the text
var text = document.getElementById('direct-link-holder');
text.select();
try {
var successful = document.execCommand('copy');
var msg = successful ? 'successful' : 'unsuccessful';
} catch (err) {
alert('Oops, unable to copy');
}
});
window.location.href = showUrl;
});

View file

@ -15,4 +15,43 @@ function toggleSection(event){
masterElement.innerText = "[open]";
masterElement.dataset.open = "false";
}
}
// 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 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});
}

View file

@ -7,97 +7,6 @@ var license = 'Creative Commons';
var nsfw = false;
var nameInput = document.getElementById("publish-name");
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)
var fileName = nameInput.value + ".jpg"; //note: need to dynamically grab type
var file = new File([blob], fileName, {type: 'image/jpeg', lastModified: Date.now()});
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) {
var name = nameInput.value;
var invalidCharacters = /[^A-Za-z0-9,-]/.exec(name);
// validate 'name'
if (invalidCharacters) {
alert(invalidCharacters + ' is not allowed. A-Z, a-z, 0-9, "_" and "-" only.');
return;
} else if (name.length < 1) {
alert("You must enter a name for your claim");
return;
}
// 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;
}
} else {
alert("Please select a file");
}
}
// 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 = nameInput.value;

View file

@ -0,0 +1,107 @@
// update the publish status
function updatePublishStatus(msg){
document.getElementById('publish-status').innerHTML = msg;
}
/* regular publish helper functions */
function previewAndStageFile(selectedFile){
var preview = document.getElementById('image-preview');
var dropzone = document.getElementById('drop-zone');
var previewReader = new FileReader();
var nameInput = document.getElementById('publish-name');
preview.style.display = 'block';
dropzone.style.display = 'none';
previewReader.onloadend = function () {
preview.src = previewReader.result;
};
if (selectedFile) {
previewReader.readAsDataURL(selectedFile); // reads the data and sets the img src
if (nameInput.value === "") {
nameInput.value = selectedFile.name.substring(0, selectedFile.name.indexOf('.'));
}
stagedFiles = [selectedFile]; // stores the selected file for upload
} else {
preview.src = '';
}
}
/* drop zone function s*/
function drop_handler(ev) {
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);
}
}
}
function dragover_handler(ev) {
ev.preventDefault();
}
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();
}
}
/* meme publish functions */
function startPublish() {
//download the image
var dataUrl = canvas.toDataURL('image/jpeg'); // canvas defined in memeDraw.js
var blob = dataURItoBlob(dataUrl)
var fileName = nameInput.value + ".jpg"; //note: need to dynamically grab type
var file = new File([blob], fileName, {type: 'image/jpeg', lastModified: Date.now()});
stageAndPublish(file);
};
function stageAndPublish(file) {
var name = nameInput.value;
var invalidCharacters = /[^A-Za-z0-9,-]/.exec(name);
// validate 'name'
if (invalidCharacters) {
alert(invalidCharacters + ' is not allowed. A-Z, a-z, 0-9, "_" and "-" only.');
return;
} else if (name.length < 1) {
alert("You must enter a name for your claim");
return;
}
// 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;
}
} else {
alert("Please select a file");
}
}

View file

@ -9,11 +9,9 @@ const { postToStats, sendGoogleAnalytics } = require('../controllers/statsContro
module.exports = app => {
// route to run a claim_list request on the daemon
app.get('/api/claim_list/:name', ({ ip, originalUrl, params }, res) => {
app.get('/api/claim_list/:name', ({ headers, ip, originalUrl, params }, res) => {
// google analytics
sendGoogleAnalytics('serve', ip, originalUrl);
// log
logger.verbose(`GET request on ${originalUrl} from ${ip}`);
sendGoogleAnalytics('serve', headers, ip, originalUrl);
// serve the content
lbryApi
.getClaimsList(params.name)
@ -27,8 +25,6 @@ module.exports = app => {
});
// route to check whether spee.ch has published to a claim
app.get('/api/isClaimAvailable/:name', ({ ip, originalUrl, params }, res) => {
// log
logger.verbose(`GET request on ${originalUrl} from ${ip}`);
// send response
publishController
.checkNameAvailability(params.name)
@ -45,11 +41,9 @@ module.exports = app => {
});
});
// route to run a resolve request on the daemon
app.get('/api/resolve/:uri', ({ ip, originalUrl, params }, res) => {
app.get('/api/resolve/:uri', ({ headers, ip, originalUrl, params }, res) => {
// google analytics
sendGoogleAnalytics('serve', ip, originalUrl);
// log
logger.verbose(`GET request on ${originalUrl} from ${ip}`);
sendGoogleAnalytics('serve', headers, ip, originalUrl);
// serve content
lbryApi
.resolveUri(params.uri)
@ -62,18 +56,22 @@ module.exports = app => {
});
});
// route to run a publish request on the daemon
app.post('/api/publish', multipartMiddleware, ({ body, files, ip, originalUrl }, res) => {
app.post('/api/publish', multipartMiddleware, ({ body, files, headers, ip, originalUrl }, res) => {
// google analytics
sendGoogleAnalytics('publish', ip, originalUrl);
// log
logger.verbose(`POST request on ${originalUrl} from ${ip}`);
sendGoogleAnalytics('publish', headers, ip, originalUrl);
// validate that a file was provided
const file = files.speech || files.null;
logger.debug(file);
if (!file) {
postToStats('publish', originalUrl, ip, 'Error: file');
res.status(400).send('Error: No file was submitted or the key used was incorrect. Files posted through this route must use a key of "speech" or null');
return;
}
// check if the size is 5 mb or less
if (file.size > 5000000) {
res.status(400).send('Error: only files of 5 megabytes or less are allowed');
return;
}
// validate name
const name = body.name || file.name.substring(0, file.name.indexOf('.'));
const invalidCharacters = /[^A-Za-z0-9,-]/.exec(name);

View file

@ -4,15 +4,12 @@ const { postToStats } = require('../controllers/statsController.js');
module.exports = app => {
// route for the home page
app.get('/', ({ headers, ip, originalUrl }, res) => {
// logging
logger.verbose(`GET request on ${originalUrl} from ${ip}`);
// send response
res.status(200).render('index');
});
// a catch-all route if someone visits a page that does not exist
app.use('*', ({ originalUrl, ip }, res) => {
// logging
logger.error(`Get request on ${originalUrl} from ${ip} which was a 404`);
logger.error(`404 on ${originalUrl}`);
// post to stats
postToStats('show', originalUrl, ip, 'Error: 404');
// send response

View file

@ -1,19 +1,18 @@
const errorHandlers = require('../helpers/libraries/errorHandlers.js');
const serveController = require('../controllers/serveController.js');
const logger = require('winston');
const { getClaimByClaimId, getClaimByName } = require('../controllers/serveController.js');
const { postToStats, sendGoogleAnalytics } = require('../controllers/statsController.js');
const errorHandlers = require('../helpers/libraries/errorHandlers.js');
function serveFile ({ fileName, fileType, filePath }, res) {
logger.info(`serving file ${fileName}`);
// set default options
const options = {
let options = {
headers: {
'X-Content-Type-Options': 'nosniff',
'Content-Type' : fileType,
},
};
// adjust default options as needed
// eslint-disable-next-line camelcase
switch (fileType) {
case 'image/jpeg':
break;
@ -24,7 +23,7 @@ function serveFile ({ fileName, fileType, filePath }, res) {
case 'video/mp4':
break;
default:
logger.warn('sending unknown file type as .jpeg');
logger.warn('sending file with unknown type as .jpeg');
options['headers']['Content-Type'] = 'image/jpeg';
break;
}
@ -35,44 +34,54 @@ function serveFile ({ fileName, fileType, filePath }, res) {
function sendAnalyticsAndLog (headers, ip, originalUrl) {
// google analytics
sendGoogleAnalytics('serve', headers, ip, originalUrl);
// logging
logger.verbose(`GET request on ${originalUrl} from ${ip}`);
}
module.exports = (app) => {
// route to fetch one free public claim
// route to serve a specific asset
app.get('/:name/:claim_id', ({ headers, ip, originalUrl, params }, res) => {
sendAnalyticsAndLog(headers, ip, originalUrl);
// begin image-serve processes
serveController
.getClaimByClaimId(params.name, params.claim_id)
getClaimByClaimId(params.name, params.claim_id)
.then(fileInfo => {
// check to make sure a file was found
if (!fileInfo) {
res.status(307).render('noClaims');
return;
}
postToStats('serve', originalUrl, ip, 'success');
serveFile(fileInfo, res);
// serve the file or the show route
const mimetypes = headers['accept'].split(',');
if (mimetypes.includes('text/html')) {
postToStats('show', originalUrl, ip, 'success');
res.status(200).render('showLite', { fileInfo });
} else {
postToStats('serve', originalUrl, ip, 'success');
serveFile(fileInfo, res);
}
})
.catch(error => {
errorHandlers.handleRequestError('serve', originalUrl, ip, error, res);
});
});
// route to fetch one free public claim
// route to serve the winning claim
app.get('/:name', ({ headers, ip, originalUrl, params }, res) => {
sendAnalyticsAndLog(headers, ip, originalUrl);
// begin image-serve processes
serveController
.getClaimByName(params.name)
getClaimByName(params.name)
.then(fileInfo => {
// check to make sure a file was found
if (!fileInfo) {
res.status(307).render('noClaims');
return;
}
postToStats('serve', originalUrl, ip, 'success');
serveFile(fileInfo, res);
// serve the file or the show route
const mimetypes = headers['accept'].split(',');
if (mimetypes.includes('text/html')) {
postToStats('show', originalUrl, ip, 'success');
res.status(200).render('showLite', { fileInfo });
} else {
postToStats('serve', originalUrl, ip, 'success');
serveFile(fileInfo, res);
}
})
.catch(error => {
errorHandlers.handleRequestError('serve', originalUrl, ip, error, res);

View file

@ -1,18 +1,15 @@
const logger = require('winston');
const errorHandlers = require('../helpers/libraries/errorHandlers.js');
const { getAllClaims } = require('../controllers/showController.js');
const { getClaimByClaimId, getClaimByName, getAllClaims } = require('../controllers/serveController.js');
const { getStatsSummary, postToStats } = require('../controllers/statsController.js');
module.exports = (app) => {
// route to show 'about' page for spee.ch
app.get('/about', ({ ip, originalUrl }, res) => {
logger.verbose(`POST request on ${originalUrl} from ${ip}`);
// get and render the content
res.status(200).render('about');
});
// route to show the meme-fodder meme maker
app.get('/meme-fodder/play', ({ ip, originalUrl }, res) => {
logger.verbose(`POST request on ${originalUrl} from ${ip}`);
// get and render the content
getAllClaims('meme-fodder')
.then(orderedFreePublicClaims => {
@ -25,7 +22,6 @@ module.exports = (app) => {
});
// route to show statistics for spee.ch
app.get('/stats', ({ ip, originalUrl }, res) => {
logger.verbose(`POST request on ${originalUrl} from ${ip}`);
// get and render the content
getStatsSummary()
.then(result => {
@ -38,7 +34,6 @@ module.exports = (app) => {
});
// route to display all free public claims at a given name
app.get('/:name/all', ({ ip, originalUrl, params }, res) => {
logger.verbose(`POST request on ${originalUrl} from ${ip}`);
// get and render the content
getAllClaims(params.name)
.then(orderedFreePublicClaims => {
@ -53,4 +48,40 @@ module.exports = (app) => {
errorHandlers.handleRequestError('show', originalUrl, ip, error, res);
});
});
// route to show a specific asset
app.get('/show/:name/:claim_id', ({ ip, originalUrl, params }, res) => {
// begin image-serve processes
getClaimByClaimId(params.name, params.claim_id)
.then(fileInfo => {
// check to make sure a file was found
if (!fileInfo) {
res.status(307).render('noClaims');
return;
}
// serve the file or the show route
postToStats('show', originalUrl, ip, 'success');
res.status(200).render('show', { fileInfo });
})
.catch(error => {
errorHandlers.handleRequestError('serve', originalUrl, ip, error, res);
});
});
// route to show the winning free, public claim
app.get('/show/:name', ({ ip, originalUrl, params }, res) => {
// get and render the content
getClaimByName(params.name)
.then(fileInfo => {
// check to make sure a file was found
if (!fileInfo) {
res.status(307).render('noClaims');
return;
}
// serve the show route
postToStats('show', originalUrl, ip, 'success');
res.status(200).render('show', { fileInfo });
})
.catch(error => {
errorHandlers.handleRequestError('serve', originalUrl, ip, error, res);
});
});
};

View file

@ -1,12 +1,14 @@
const logger = require('winston');
const fs = require('fs');
const publishController = require('../controllers/publishController.js');
const publishHelpers = require('../helpers/libraries/publishHelpers.js');
const errorHandlers = require('../helpers/libraries/errorHandlers.js');
const { postToStats } = require('../controllers/statsController.js');
module.exports = (app, siofu, hostedContentPath) => {
const http = require('http').Server(app);
const io = require('socket.io')(http);
const http = require('http');
const server = http.Server(app);
const io = require('socket.io')(server);
io.on('connection', socket => {
logger.silly('a user connected via sockets');
@ -55,11 +57,47 @@ module.exports = (app, siofu, hostedContentPath) => {
// to-do: remove the file if not done automatically
}
});
// handle asset requests
socket.on('asset-request', filePath => {
logger.debug('received a request for the following file', filePath);
fs.readFile(filePath, (err, assetBuffer) => {
if (err) {
logger.error('fs.readFile error', err);
return;
};
// set the data
const fileExtension = filePath.substring(filePath.lastIndexOf('.'));
let data = {
type : null,
buffer: assetBuffer.toString('base64'),
};
switch (fileExtension) {
case '.jpeg' || '.jpg':
data['type'] = 'image/jpeg';
break;
case '.gif':
data['type'] = 'image/gif';
break;
case '.png':
data['type'] = 'image/png';
break;
case '.mp4':
data['type'] = 'video/mp4';
break;
default:
data['type'] = 'image/jpeg';
logger.warn('showing file with unknown type as jpeg');
break;
}
// send the asset
socket.emit('asset-transfer', data);
});
});
// handle disconnect
socket.on('disconnect', () => {
logger.silly('a user disconnected via sockets');
});
});
return http;
return server;
};

View file

@ -29,6 +29,10 @@ app.enable('trust proxy'); // trust the proxy to get ip address for us
app.use(bodyParser.json()); // for parsing application/json
app.use(bodyParser.urlencoded({ extended: true })); // for parsing application/x-www-form-urlencoded
app.use(siofu.router);
app.use((req, res, next) => { // logging middleware
winston.verbose(`Request on ${req.originalUrl} from ${req.ip}`);
next();
});
// configure handlebars & register it with Express app
const hbs = expressHandlebars.create({
@ -49,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);
@ -61,13 +87,13 @@ require('./routes/serve-routes.js')(app);
require('./routes/home-routes.js')(app);
// require socket.io routes
const http = require('./routes/sockets-routes.js')(app, siofu, hostedContentPath);
const server = require('./routes/sockets-routes.js')(app, siofu, hostedContentPath);
// sync sequelize
// wrap the server in socket.io to intercept incoming sockets requests
// start server
db.sequelize.sync().then(() => {
http.listen(PORT, () => {
server.listen(PORT, () => {
winston.info('Trusting proxy?', app.get('trust proxy'));
winston.info(`Server is listening on PORT ${PORT}`);
});

View file

@ -9,4 +9,5 @@
<script src="/socket.io/socket.io.js"></script>
<script src="/siofu/client.js"></script>
<script src="/assets/js/publishFunctions.js"></script>
<script src="/assets/js/claimPublish.js"></script>

View file

@ -9,8 +9,8 @@
<link rel="stylesheet" href="/assets/css/componentStyle.css" type="text/css">
</head>
<body>
{{{ body }}}
<script src="/assets/js/generalFunctions.js"></script>
{{{ body }}}
<!-- google analytics -->
{{ googleAnalytics }}
</body>

View file

@ -0,0 +1,35 @@
<div class="panel">
<div id="asset-placeholder" data-filepath="{{{fileInfo.filePath}}}">
<p> loading... </p>
</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>

View file

@ -0,0 +1,68 @@
<div class="panel">
<h2>Name</h2>
<p>{{fileInfo.name}}</>
</div>
<div class="panel links">
<h2 class="subheader">Links</h2>
<a href="/{{fileInfo.name}}/{{fileInfo.claimId}}">Direct Link</a>
<input type="text" id="direct-link" class="link" readonly="true" spellcheck="false" value="https://spee.ch/{{fileInfo.name}}/{{fileInfo.claimId}}"/>
<button class="copy-button" data-elementtocopy="direct-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/>
<a href="/show/{{fileInfo.name}}/{{fileInfo.claimId}}">Details</a>
</br>
<input type="text" id="show-link" class="link" readonly="true" spellcheck="false" value="https://spee.ch/show/{{fileInfo.name}}/{{fileInfo.claimId}}"/>
<button class="copy-button" data-elementtocopy="show-link" 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>

View file

@ -9,13 +9,23 @@
</ul>
<code>https://spee.ch/:name</code>
<ul>
<li >Serves the newest file with the largest bid at a claim</li>
<li >Serves the winning free, public claim at this name</li>
<li >E.g. <a href="/doitlive">spee.ch/doitlive</a></li>
</ul>
<code>https://spee.ch/show/:name</code>
<ul>
<li >Serves the winning claim at this name with additional details</li>
<li >E.g. <a href="/show/doitlive">spee.ch/show/doitlive</a></li>
</ul>
<code>https://spee.ch/:name/:claim_id</code>
<ul>
<li >Serves a specific file at a claim</li>
<li >E.g. <a href="/doitlive/c496c8c55ed79816fec39e36a78645aa4458edb5">spee.ch/doitlive/c496c8c55ed79816fec39e36a78645aa4458edb5</a></li>
<li >Serves a specific claim</li>
<li >E.g. <a href="/doitlive/ca3023187e901df9e9aabd95d6ae09b6cc69b3f0">spee.ch/doitlive/ca3023187e901df9e9aabd95d6ae09b6cc69b3f0</a></li>
</ul>
<code>https://spee.ch/show/:name/:claim_id</code>
<ul>
<li >Serves a specific claim with additional details</li>
<li >E.g. <a href="/show/doitlive/ca3023187e901df9e9aabd95d6ae09b6cc69b3f0">spee.ch/show/doitlive/ca3023187e901df9e9aabd95d6ae09b6cc69b3f0</a></li>
</ul>
<code>https://spee.ch/:name/all</code>
<ul>

View file

@ -13,9 +13,5 @@
<a href="/doitlive"><img class="example-image" src="/doitlive"/></a>
<div class="example-code">&lt;img src="https://spee.ch/doitlive"/&gt;</div>
</div>
<div class="example">
<h4>Use spee.ch to view all the assets at a LBRY claim:</h4>
<a href="/doitlive/all">spee.ch/doitlive/all</a>
</div>
</div>
</div>

View file

@ -1,4 +1,4 @@
<div class="learn-more stop-float">
<p><i>Spee.ch is an open-source project. We would love it if you <a href="https://github.com/lbryio/spee.ch/issues">contributed</a> to the existing site, or <a href="https://github.com/lbryio/spee.ch">forked it</a> and made your own!</i></p>
<p><i>Spee.ch is an open-source project. You should <a href="https://github.com/lbryio/spee.ch/issues">contribute</a> on github, or <a href="https://github.com/lbryio/spee.ch">fork it</a> and make your own!</i></p>
<p><a href="/about">Learn more about spee.ch</a></p>
</div>

10
views/show.handlebars Normal file
View file

@ -0,0 +1,10 @@
<div class="wrapper">
{{> topBar}}
<div class="main">
{{> asset}}
</div>
<div class="sidebar">
{{> assetInfo}}
</div>
{{> footer}}
</div>

33
views/showLite.handlebars Normal file
View file

@ -0,0 +1,33 @@
<div id="asset-placeholder" data-filepath="{{{fileInfo.filePath}}}">
<p> loading... </p>
</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-lite" src="' + base64Image + '"/>';
break;
case 'video/mp4':
const base64video = 'data:' + data.type + ';base64,' + data.buffer;
document.getElementById("asset-placeholder").innerHTML = '<video class="show-asset-lite" controls> <source src="' + base64video + '"></video>';
break;
default: break;
}
});
</script>