Bill Bittner
GitHub
commit
cdbd20d4fd
16 changed files with 406 additions and 280 deletions
|
|
@ -4,12 +4,10 @@ const lbryApi = require('../helpers/libraries/lbryApi.js');
|
|||
const config = require('config');
|
||||
const walledAddress = config.get('WalletConfig.lbryAddress');
|
||||
const errorHandlers = require('../helpers/libraries/errorHandlers.js');
|
||||
const db = require('../models');
|
||||
|
||||
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,
|
||||
|
|
@ -36,24 +34,63 @@ function deleteTemporaryFile (filePath) {
|
|||
});
|
||||
}
|
||||
|
||||
function upsert (Model, values, condition) {
|
||||
return Model
|
||||
.findOne({ where: condition })
|
||||
.then(function (obj) {
|
||||
if (obj) { // update
|
||||
return obj.update(values);
|
||||
} else { // insert
|
||||
return Model.create(values);
|
||||
}
|
||||
}).catch(function (error) {
|
||||
logger.error('Sequelize findOne error', error);
|
||||
});
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
publish (claim, fileName, filePath, fileType, license, nsfw, socket, visitor) {
|
||||
publish (name, fileName, filePath, fileType, license, nsfw, socket, visitor) {
|
||||
console.log('nsfw:', nsfw);
|
||||
// validate nsfw
|
||||
if (typeof nsfw === 'string') {
|
||||
nsfw = (nsfw.toLowerCase() === 'true');
|
||||
}
|
||||
// update the client
|
||||
socket.emit('publish-status', 'Your image is being published (this might take a second)...');
|
||||
// send to analytics
|
||||
visitor.event('Publish Route', 'Publish Request', filePath).send();
|
||||
// create the publish object
|
||||
const publishParams = createPublishParams(claim, filePath, license, nsfw);
|
||||
// get a promise to publish
|
||||
const publishParams = createPublishParams(name, filePath, license, nsfw);
|
||||
// 1. publish the file
|
||||
lbryApi
|
||||
.publishClaim(publishParams, fileName, fileType)
|
||||
.then(result => {
|
||||
logger.info(`Successfully published ${fileName}`);
|
||||
logger.info(`Successfully published ${fileName}`, result);
|
||||
// google analytics
|
||||
visitor.event('Publish Route', 'Publish Success', filePath).send();
|
||||
socket.emit('publish-complete', { name: claim, result });
|
||||
// 2. update old record of create new one (update is in case the claim has been published before by this daemon)
|
||||
upsert(
|
||||
db.File,
|
||||
{
|
||||
name,
|
||||
claimId : result.claim_id,
|
||||
outpoint: `${result.txid}:${result.nout}`,
|
||||
height : 0,
|
||||
fileName,
|
||||
filePath,
|
||||
fileType,
|
||||
nsfw,
|
||||
},
|
||||
{ name, claimId: result.claim_id }
|
||||
).catch(error => {
|
||||
logger.error('Sequelize findOne error', error);
|
||||
});
|
||||
// update client
|
||||
socket.emit('publish-complete', { name, result });
|
||||
})
|
||||
.catch(error => {
|
||||
logger.error(`Error publishing ${fileName}`, error);
|
||||
// google analytics
|
||||
visitor.event('Publish Route', 'Publish Failure', filePath).send();
|
||||
socket.emit('publish-failure', errorHandlers.handlePublishError(error));
|
||||
deleteTemporaryFile(filePath);
|
||||
|
|
|
|||
|
|
@ -4,10 +4,92 @@ const logger = require('winston');
|
|||
const getAllFreePublicClaims = require('../helpers/functions/getAllFreePublicClaims.js');
|
||||
const isFreePublicClaim = require('../helpers/functions/isFreePublicClaim.js');
|
||||
|
||||
function getClaimAndHandleResponse (claimUri, resolve, reject) {
|
||||
function updateFileIfNeeded (uri, claimName, claimId, localOutpoint, localHeight) {
|
||||
logger.debug(`A mysql record was found for ${claimId}`);
|
||||
logger.debug('initiating resolve on claim to check outpoint');
|
||||
// 1. resolve claim
|
||||
lbryApi
|
||||
.getClaim(claimUri)
|
||||
.then(({ file_name, download_path, mime_type }) => {
|
||||
.resolveUri(uri)
|
||||
.then(result => {
|
||||
// logger.debug('resolved result:', result);
|
||||
const resolvedOutpoint = `${result[uri].claim.txid}:${result[uri].claim.nout}`;
|
||||
const resolvedHeight = result[uri].claim.height;
|
||||
logger.debug('database outpoint:', localOutpoint);
|
||||
logger.debug('resolved outpoint:', resolvedOutpoint);
|
||||
// 2. if the outpoint's match, no further work needed
|
||||
if (localOutpoint === resolvedOutpoint) {
|
||||
logger.debug('local outpoint matched');
|
||||
// 2. if the outpoints don't match, check the height
|
||||
} else if (localHeight > resolvedHeight) {
|
||||
logger.debug('local height was greater than resolved height');
|
||||
// 2. get the resolved claim
|
||||
} else {
|
||||
logger.debug(`local outpoint did not match for ${uri}. Initiating update.`);
|
||||
getClaimAndUpdate(uri, resolvedHeight);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
logger.error(`error resolving "${uri}" >> `, error);
|
||||
});
|
||||
}
|
||||
|
||||
function getClaimAndUpdate (uri, height) {
|
||||
// 1. get the claim
|
||||
lbryApi
|
||||
.getClaim(uri)
|
||||
.then(({ name, claim_id, outpoint, file_name, download_path, mime_type, metadata }) => {
|
||||
logger.debug(' Get returned outpoint: ', outpoint);
|
||||
// 2. update the entry in db
|
||||
db.File
|
||||
.update({
|
||||
outpoint,
|
||||
height, // note: height is coming from 'resolve', not 'get'.
|
||||
fileName: file_name,
|
||||
filePath: download_path,
|
||||
fileType: mime_type,
|
||||
nsfw : metadata.stream.metadata.nsfw,
|
||||
}, {
|
||||
where: {
|
||||
name,
|
||||
claimId: claim_id,
|
||||
},
|
||||
})
|
||||
.then(result => {
|
||||
logger.debug('successfully updated mysql record', result);
|
||||
})
|
||||
.catch(error => {
|
||||
logger.error('sequelize error', error);
|
||||
});
|
||||
})
|
||||
.catch(error => {
|
||||
logger.error(`error while getting claim for ${uri} >> `, error);
|
||||
});
|
||||
}
|
||||
|
||||
function getClaimAndHandleResponse (uri, height, resolve, reject) {
|
||||
lbryApi
|
||||
.getClaim(uri)
|
||||
.then(({ name, claim_id, outpoint, file_name, download_path, mime_type, metadata }) => {
|
||||
// create entry in the db
|
||||
logger.debug('creating new record in db');
|
||||
db.File
|
||||
.create({
|
||||
name,
|
||||
claimId : claim_id,
|
||||
outpoint,
|
||||
height,
|
||||
fileName: file_name,
|
||||
filePath: download_path,
|
||||
fileType: mime_type,
|
||||
nsfw : metadata.stream.metadata.nsfw,
|
||||
})
|
||||
.then(result => {
|
||||
logger.debug('successfully created mysql record');
|
||||
})
|
||||
.catch(error => {
|
||||
logger.error('sequelize create error', error);
|
||||
});
|
||||
// resolve the request
|
||||
resolve({
|
||||
fileName: file_name,
|
||||
filePath: download_path,
|
||||
|
|
@ -22,35 +104,31 @@ function getClaimAndHandleResponse (claimUri, resolve, reject) {
|
|||
module.exports = {
|
||||
getClaimByName (claimName) {
|
||||
const deferred = new Promise((resolve, reject) => {
|
||||
// get all free public claims
|
||||
// 1. get the top free, public claims
|
||||
getAllFreePublicClaims(claimName)
|
||||
.then(freePublicClaimList => {
|
||||
const claimId = freePublicClaimList[0].claim_id;
|
||||
const name = freePublicClaimList[0].name;
|
||||
const freePublicClaimOutpoint = `${freePublicClaimList[0].txid}:${freePublicClaimList[0].nout}`;
|
||||
const freePublicClaimUri = `${name}#${claimId}`;
|
||||
// check to see if the file is available locally
|
||||
const claimId = freePublicClaimList[0].claim_id;
|
||||
const uri = `${name}#${claimId}`;
|
||||
const height = freePublicClaimList[0].height;
|
||||
// 2. check to see if the file is available locally
|
||||
db.File
|
||||
.findOne({ where: { name: name, claimId: claimId } })
|
||||
.findOne({ where: { name, claimId } })
|
||||
.then(claim => {
|
||||
// if a matching claim is found locally...
|
||||
// 3. if a matching claim_id is found locally, serve it
|
||||
if (claim) {
|
||||
logger.debug(`A mysql record was found for ${claimId}`);
|
||||
// if the outpoint's match return it
|
||||
if (claim.dataValues.outpoint === freePublicClaimOutpoint) {
|
||||
logger.debug(`local outpoint matched for ${claimId}`);
|
||||
// serve the file
|
||||
resolve(claim.dataValues);
|
||||
// if the outpoint's don't match, fetch updated claim
|
||||
// trigger update if needed
|
||||
updateFileIfNeeded(uri, name, claimId, claim.dataValues.outpoint, claim.dataValues.height);
|
||||
// 3. otherwise use daemon to retrieve it
|
||||
} else {
|
||||
logger.debug(`local outpoint did not match for ${claimId}`);
|
||||
getClaimAndHandleResponse(freePublicClaimUri, resolve, reject);
|
||||
}
|
||||
// ... otherwise use daemon to retrieve it
|
||||
} else {
|
||||
getClaimAndHandleResponse(freePublicClaimUri, resolve, reject);
|
||||
// get the claim and serve it
|
||||
getClaimAndHandleResponse(uri, height, resolve, reject);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
logger.error('sequelize error', error);
|
||||
reject(error);
|
||||
});
|
||||
})
|
||||
|
|
@ -60,42 +138,37 @@ module.exports = {
|
|||
});
|
||||
return deferred;
|
||||
},
|
||||
getClaimByClaimId (claimName, claimId) {
|
||||
getClaimByClaimId (name, claimId) {
|
||||
const deferred = new Promise((resolve, reject) => {
|
||||
const uri = `${claimName}#${claimId}`;
|
||||
// resolve the Uri
|
||||
lbryApi
|
||||
.resolveUri(uri) // note: use 'spread' and make parallel with db.File.findOne()
|
||||
.then(result => {
|
||||
const resolvedOutpoint = `${result[uri].claim.txid}:${result[uri].claim.nout}`;
|
||||
// check locally for the claim
|
||||
const uri = `${name}#${claimId}`;
|
||||
// 1. check locally for the claim
|
||||
db.File
|
||||
.findOne({ where: { name: claimName, claimId: claimId } })
|
||||
.findOne({ where: { name, claimId } })
|
||||
.then(claim => {
|
||||
// if a found locally...
|
||||
// 2. if a match is found locally, serve it
|
||||
if (claim) {
|
||||
logger.debug(`A mysql record was found for ${claimId}`);
|
||||
// if the outpoint's match return it
|
||||
if (claim.dataValues.outpoint === resolvedOutpoint) {
|
||||
logger.debug(`local outpoint matched for ${claimId}`);
|
||||
// serve the file
|
||||
resolve(claim.dataValues);
|
||||
// if the outpoint's don't match, fetch updated claim
|
||||
} else {
|
||||
logger.debug(`local outpoint did not match for ${claimId}`);
|
||||
getClaimAndHandleResponse(uri, resolve, reject);
|
||||
}
|
||||
// ... otherwise use daemon to retrieve it
|
||||
// trigger an update if needed
|
||||
updateFileIfNeeded(uri, name, claimId, claim.dataValues.outpoint, claim.dataValues.outpoint);
|
||||
// 2. otherwise use daemon to retrieve it
|
||||
} else {
|
||||
// 3. resolve the Uri
|
||||
lbryApi
|
||||
.resolveUri(uri)
|
||||
.then(result => {
|
||||
// 4. check to see if the claim is free & public
|
||||
if (isFreePublicClaim(result[uri].claim)) {
|
||||
getClaimAndHandleResponse(uri, resolve, reject);
|
||||
// 5. get claim and serve
|
||||
getClaimAndHandleResponse(uri, result[uri].claim.height, resolve, reject);
|
||||
} else {
|
||||
reject('NO_FREE_PUBLIC_CLAIMS');
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
reject(error);
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
reject(error);
|
||||
|
|
|
|||
|
|
@ -16,8 +16,8 @@ function filterForFreePublicClaims (claimsListArray) {
|
|||
return freePublicClaims;
|
||||
}
|
||||
|
||||
function orderTopClaims (claimsListArray) {
|
||||
logger.debug('ordering the top claims');
|
||||
function orderClaims (claimsListArray) {
|
||||
logger.debug('ordering the free public claims');
|
||||
claimsListArray.sort((a, b) => {
|
||||
if (a.amount === b.amount) {
|
||||
return a.height < b.height;
|
||||
|
|
@ -51,7 +51,7 @@ module.exports = claimName => {
|
|||
return;
|
||||
}
|
||||
// order the claims
|
||||
const orderedPublicClaims = orderTopClaims(freePublicClaims);
|
||||
const orderedPublicClaims = orderClaims(freePublicClaims);
|
||||
// resolve the promise
|
||||
resolve(orderedPublicClaims);
|
||||
})
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ const logger = require('winston');
|
|||
|
||||
module.exports = {
|
||||
handleRequestError (error, res) {
|
||||
logger.error('Request Error,', error);
|
||||
logger.error('Request Error >>', error);
|
||||
if (error === 'NO_CLAIMS' || error === 'NO_FREE_PUBLIC_CLAIMS') {
|
||||
res.status(307).render('noClaims');
|
||||
} else if (error.response) {
|
||||
|
|
@ -10,11 +10,11 @@ module.exports = {
|
|||
} else if (error.code === 'ECONNREFUSED') {
|
||||
res.status(400).send('Connection refused. The daemon may not be running.');
|
||||
} else {
|
||||
res.status(400).send(error.toString());
|
||||
res.status(400).send(JSON.stringify(error));
|
||||
}
|
||||
},
|
||||
handlePublishError (error) {
|
||||
logger.error('Publish Error,', error);
|
||||
logger.error('Publish Error >>', error);
|
||||
if (error.code === 'ECONNREFUSED') {
|
||||
return 'Connection refused. The daemon may not be running.';
|
||||
} else if (error.response.data.error) {
|
||||
|
|
|
|||
|
|
@ -1,15 +1,6 @@
|
|||
const axios = require('axios');
|
||||
const db = require('../../models');
|
||||
const logger = require('winston');
|
||||
|
||||
function createFilesRecord (name, claimId, outpoint, fileName, filePath, fileType, nsfw) {
|
||||
db.File
|
||||
.create({ name, claimId, outpoint, fileName, filePath, fileType, nsfw })
|
||||
.catch(error => {
|
||||
logger.error(`Sequelize File.create error`, error);
|
||||
});
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
publishClaim (publishParams, fileName, fileType) {
|
||||
logger.debug(`Publishing claim for "${fileName}"`);
|
||||
|
|
@ -21,8 +12,6 @@ module.exports = {
|
|||
})
|
||||
.then(response => {
|
||||
const result = response.data.result;
|
||||
createFilesRecord(
|
||||
publishParams.name, result.claim_id, `${result.txid}:${result.nout}`, fileName, publishParams.file_path, fileType, publishParams.metadata.nsfw);
|
||||
resolve(result);
|
||||
})
|
||||
.catch(error => {
|
||||
|
|
@ -50,11 +39,7 @@ module.exports = {
|
|||
/*
|
||||
note: put in a check to make sure we do not resolve until the download is actually complete (response.data.completed === true)
|
||||
*/
|
||||
// save a record of the file to the Files table
|
||||
const result = data.result;
|
||||
createFilesRecord(
|
||||
result.name, result.claim_id, result.outpoint, result.file_name, result.download_path, result.mime_type, result.metadata.stream.metadata.nsfw);
|
||||
resolve(result);
|
||||
resolve(data.result);
|
||||
})
|
||||
.catch(error => {
|
||||
reject(error);
|
||||
|
|
@ -88,6 +73,11 @@ module.exports = {
|
|||
params: { uri },
|
||||
})
|
||||
.then(({ data }) => {
|
||||
// check for errors
|
||||
if (data.result[uri].error) {
|
||||
reject(data.result[uri].error);
|
||||
return;
|
||||
}
|
||||
resolve(data.result);
|
||||
})
|
||||
.catch(error => {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
module.exports = (sequelize, { STRING, BOOLEAN }) => {
|
||||
module.exports = (sequelize, { STRING, BOOLEAN, INTEGER }) => {
|
||||
const File = sequelize.define(
|
||||
'File',
|
||||
{
|
||||
|
|
@ -14,6 +14,11 @@ module.exports = (sequelize, { STRING, BOOLEAN }) => {
|
|||
type : STRING,
|
||||
allowNull: false,
|
||||
},
|
||||
height: {
|
||||
type : INTEGER,
|
||||
allowNull: false,
|
||||
default : 0,
|
||||
},
|
||||
fileName: {
|
||||
type : STRING,
|
||||
allowNull: false,
|
||||
|
|
|
|||
|
|
@ -14,10 +14,10 @@ const sequelize = new Sequelize(connectionUri, {
|
|||
sequelize
|
||||
.authenticate()
|
||||
.then(() => {
|
||||
logger.info('Sequelize has has been established mysql connection successfully.');
|
||||
logger.info('Sequelize has established mysql connection successfully.');
|
||||
})
|
||||
.catch(err => {
|
||||
logger.error('Sequelize was nable to connect to the database:', err);
|
||||
logger.error('Sequelize was unable to connect to the database:', err);
|
||||
});
|
||||
|
||||
fs.readdirSync(__dirname).filter(file => file.indexOf('.') !== 0 && file !== basename && file.slice(-3) === '.js').forEach(file => {
|
||||
|
|
|
|||
158
public/assets/js/claimPublish.js
Normal file
158
public/assets/js/claimPublish.js
Normal file
|
|
@ -0,0 +1,158 @@
|
|||
// define variables
|
||||
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();
|
||||
|
||||
preview.style.display = 'block';
|
||||
dropzone.style.display = 'none';
|
||||
|
||||
previewReader.onloadend = function () {
|
||||
preview.src = previewReader.result;
|
||||
};
|
||||
|
||||
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
|
||||
} 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) {
|
||||
console.log("drop");
|
||||
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);
|
||||
} else {
|
||||
console.log("no files were found")
|
||||
}
|
||||
} else {
|
||||
console.log("no items were found")
|
||||
}
|
||||
}
|
||||
// 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();
|
||||
// make sure a file was selected
|
||||
if (stagedFiles) {
|
||||
// make sure only 1 file was selected
|
||||
if (stagedFiles.length > 1) {
|
||||
alert("Only one file allowed at a time");
|
||||
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;
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
/* socketio-file-upload listeners */
|
||||
uploader.addEventListener('start', function(event){
|
||||
var name = document.getElementById('publish-name').value;
|
||||
var license = document.getElementById('publish-license').value;
|
||||
var nsfw = document.getElementById('publish-nsfw').checked;
|
||||
event.file.meta.name = name;
|
||||
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 = '/' + msg.name + '/' + msg.result.claim_id;
|
||||
// build new publish area
|
||||
publishResults = '<p><span id="tweet-meme-button"></span>Your publish is complete! <a target="_blank" href="' + directUrl + '">View it here!</a></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>';
|
||||
// update publish area
|
||||
document.getElementById('publish-active-area').innerHTML = publishResults;
|
||||
// add a tweet button
|
||||
twttr.widgets
|
||||
.createShareButton(
|
||||
document.getElementById('tweet-meme-button'),
|
||||
{
|
||||
text: 'Check out my image, hosted for free on the distributed awesomeness that is the LBRY blockchain!',
|
||||
url: 'https://spee.ch/' + directUrl,
|
||||
hashtags: 'LBRY',
|
||||
via: 'lbryio'
|
||||
})
|
||||
.then( function( el ) {
|
||||
console.log('Tweet button added.');
|
||||
});
|
||||
});
|
||||
|
|
@ -22,6 +22,18 @@ img.onload = function() {
|
|||
drawMeme()
|
||||
}
|
||||
|
||||
function newCanvas(image){
|
||||
// hide start image
|
||||
img = image;
|
||||
// get dimensions of the start img
|
||||
canvasHeight = canvasWidth * (img.height / img.width);
|
||||
// size the canvas
|
||||
canvas.width = canvasWidth;
|
||||
canvas.height = canvasHeight;
|
||||
// draw the meme
|
||||
drawMeme()
|
||||
}
|
||||
|
||||
// if the text changes, re-draw the meme
|
||||
topText.addEventListener('keyup', drawMeme);
|
||||
bottomText.addEventListener('keyup', drawMeme);
|
||||
|
|
@ -40,14 +52,14 @@ function drawMeme() {
|
|||
var text1 = topText.value;
|
||||
text1 = text1.toUpperCase();
|
||||
x = canvasWidth / 2;
|
||||
y = 0;
|
||||
y = 5;
|
||||
|
||||
wrapText(ctx, text1, x, y, canvasWidth, fontSize, false);
|
||||
|
||||
ctx.textBaseline = 'bottom';
|
||||
var text2 = bottomText.value;
|
||||
text2 = text2.toUpperCase();
|
||||
y = canvasHeight;
|
||||
y = canvasHeight - 5;
|
||||
|
||||
wrapText(ctx, text2, x, y, canvasHeight, fontSize, true);
|
||||
|
||||
|
|
|
|||
|
|
@ -114,23 +114,20 @@ socket.on('publish-failure', function(msg){
|
|||
});
|
||||
socket.on('publish-complete', function(msg){
|
||||
var publishResults;
|
||||
var directUrl = 'https://spee.ch/' + msg.name + '/' + msg.result.claim_id;
|
||||
var directUrl = '/' + 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>';
|
||||
publishResults = '<p><span id="tweet-meme-button"></span>Your publish is complete! <a target="_blank" href="' + directUrl + '">View it here!</a></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>';
|
||||
// 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!',
|
||||
url: 'https://spee.ch/' + directUrl,
|
||||
hashtags: 'LBRYMemeFodder',
|
||||
via: 'lbryio'
|
||||
})
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<h3>All Claims</h3>
|
||||
<p>These are all the free, public assets at that claim. You can publish more at <a href="/">spee.ch</a>.</p>
|
||||
{{#each claims}}
|
||||
<img class="all-claims-img" src="https://spee.ch/{{this.name}}/{{this.claim_id}}" />
|
||||
<img class="all-claims-img" src="/{{this.name}}/{{this.claim_id}}" />
|
||||
<div class="card card-block">
|
||||
<p>claim_id: {{this.claim_id}}</p>
|
||||
<p>direct link <a href="/{{this.name}}/{{this.claim_id}}">here</a></p>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
<div class="container">
|
||||
{{> topBar}}
|
||||
<div class="row">
|
||||
{{> examples}}
|
||||
{{> publish}}
|
||||
</div>
|
||||
<div class="row">
|
||||
{{> publish}}
|
||||
{{> examples}}
|
||||
</div>
|
||||
<div class="row">
|
||||
{{> documentation}}
|
||||
|
|
@ -14,151 +14,9 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
|
||||
|
||||
<script src="/socket.io/socket.io.js"></script>
|
||||
<script src="/siofu/client.js"></script>
|
||||
<script>
|
||||
// define variables
|
||||
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();
|
||||
|
||||
preview.style.display = 'block';
|
||||
dropzone.style.display = 'none';
|
||||
|
||||
previewReader.onloadend = function () {
|
||||
preview.src = previewReader.result;
|
||||
};
|
||||
|
||||
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
|
||||
} 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) {
|
||||
console.log("drop");
|
||||
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);
|
||||
} else {
|
||||
console.log("no files were found")
|
||||
}
|
||||
} else {
|
||||
console.log("no items were found")
|
||||
}
|
||||
}
|
||||
// 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();
|
||||
// make sure a file was selected
|
||||
if (stagedFiles) {
|
||||
// make sure only 1 file was selected
|
||||
if (stagedFiles.length > 1) {
|
||||
alert("Only one file allowed at a time");
|
||||
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;
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
/* socketio-file-upload listeners */
|
||||
uploader.addEventListener('start', function(event){
|
||||
var name = document.getElementById('publish-name').value;
|
||||
var license = document.getElementById('publish-license').value;
|
||||
var nsfw = document.getElementById('publish-nsfw').value;
|
||||
event.file.meta.name = name;
|
||||
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 = '<p>Your publish is complete!</p>';
|
||||
publishResults += '<p><strong>NOTE: the transaction still needs to be mined by the network before you can access it! This will take a few minutes. To view the transaction on the blockchain explorer click the Transaction ID link below.</strong></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>Your Claim ID is: ' + msg.result.claim_id + '</p>';
|
||||
publishResults += '<p>Here is a link to the claim where your asset will be published: <a target="_blank" href="https://spee.ch/' + msg.name + '">spee.ch/' + msg.name + '</a></p>';
|
||||
publishResults += '<p>Here is a direct link to where your asset will be stored: <a target="_blank" href="https://spee.ch/' + msg.name + '/' + msg.result.claim_id + '">spee.ch/' + msg.name + '/' + msg.result.claim_id + '</a></p>';
|
||||
publishResults += '<p><a href="/">Reload to publish another asset</a></p>';
|
||||
document.getElementById('publish-active-area').innerHTML = publishResults;
|
||||
});
|
||||
</script>
|
||||
<script src="/assets/js/claimPublish.js"></script>
|
||||
|
|
|
|||
|
|
@ -1,17 +1,18 @@
|
|||
<div class="container">
|
||||
{{> topBar}}
|
||||
{{ image }}
|
||||
<div class="row">
|
||||
{{> memeMaker}}
|
||||
{{> memeFodderMaker}}
|
||||
</div>
|
||||
<div class="row">
|
||||
{{> memeResults}}
|
||||
{{> memeFodderResults}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/assets/js/memeDraw.js"></script>
|
||||
|
||||
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
|
||||
|
||||
<script src="/socket.io/socket.io.js"></script>
|
||||
<script src="/siofu/client.js"></script>
|
||||
|
||||
<script src="/assets/js/memeDraw.js"></script>
|
||||
<script src="/assets/js/memePublish.js"></script>
|
||||
|
|
@ -7,9 +7,8 @@
|
|||
<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>Create a meme based on the current /meme-fodder claim using the tools below. Got a masterpiece? <a href="https://twitter.com/hashtag/LBRYMemeFodder" target="_blank">Share it with the community</a> and see what they think!</p>
|
||||
<p>Note: <i>/meme-fodder</i> will always use the public, free image at the claim <a href="lbry://meme-fodder">lbry://meme-fodder</a>. Want to put a different image on the chopping block? Go publish it!</p>
|
||||
<p>Create a meme based on the current <i>lbry://meme-fodder</i> claims using the tool below. Got a masterpiece? <a href="https://twitter.com/hashtag/LBRYMemeFodder" target="_blank">Share it with the community</a> and see what they think!</p>
|
||||
<p>Spee.ch/meme-fodder/play uses the free, public images at the claim <a href="lbry://meme-fodder">lbry://meme-fodder</a>. Want to put a different image on the chopping block? Go publish it!</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
|
|
@ -49,5 +48,3 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
|
||||
|
|
@ -6,14 +6,13 @@
|
|||
<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>
|
||||
<p>Below are the images published to /meme-fodder. Click one to choose it as your canvas.</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>
|
||||
<img class="all-claims-img" src="/{{this.name}}/{{this.claim_id}}" onclick="newCanvas(this)"/>
|
||||
</div>
|
||||
<hr>
|
||||
{{/each}}
|
||||
|
|
@ -3,8 +3,7 @@
|
|||
<div class="card-title card-block grey lighten-1 white-text">
|
||||
<h2>Publish Your Own</h2>
|
||||
</div>
|
||||
<div class="card-block" id="publish-active-area">
|
||||
<form id="publish-form" action="" method="" enctype="multipart/form-data">
|
||||
<div class="card-block">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div id="drop-zone" ondrop="drop_handler(event);" ondragover="dragover_handler(event);" ondragend="dragend_handler(event)">
|
||||
|
|
@ -13,7 +12,8 @@
|
|||
</div>
|
||||
<img id="image-preview" src="" height="200" alt="Image preview..."/>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div id="publish-active-area" class="col-md-6">
|
||||
<form>
|
||||
<div class="md-form">
|
||||
<input type="text" id="publish-name" value="Name" class="form-control">
|
||||
</div>
|
||||
|
|
@ -31,10 +31,9 @@
|
|||
<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>
|
||||
<button id="publish-submit">Publish</button>
|
||||
<button id="publish-reset">Reset</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Reference in a new issue