added twitter button on publish
This commit is contained in:
bill bittner
parent
9e793467b3
commit
5b6e75cbee
7 changed files with 107 additions and 80 deletions
|
|
@ -1,3 +1,9 @@
|
|||
canvas {
|
||||
background-color: blue;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
#drop-zone {
|
||||
border: 1px dashed lightgrey;
|
||||
padding: 1em;
|
||||
|
|
@ -5,20 +11,22 @@
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
.all-claims-img {
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
#image-preview {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#tweet-meme-button {
|
||||
float: left;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.row {
|
||||
margin: 10px 0px 10px 0px;
|
||||
}
|
||||
|
||||
canvas {
|
||||
background-color: blue;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.all-claims-img {
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -82,38 +82,4 @@ function wrapText(context, text, x, y, maxWidth, lineHeight, fromBottom) {
|
|||
context.strokeText(lines[k], x, y + lineHeight * k);
|
||||
context.fillText(lines[k], x, y + lineHeight * k);
|
||||
}
|
||||
}
|
||||
|
||||
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});
|
||||
}
|
||||
|
||||
var claimName;
|
||||
|
||||
// save the meme
|
||||
function startPublish() {
|
||||
//download the image
|
||||
var dataUrl = canvas.toDataURL('image/jpeg');
|
||||
var blob = dataURItoBlob(dataUrl)
|
||||
claimName = claimNameInput.value;
|
||||
var fileName = claimNameInput.value + ".jpg";
|
||||
var file = new File([blob], fileName, {type: 'image/jpeg', lastModified: Date.now()});
|
||||
console.log(file);
|
||||
stageAndPublish(file); // note: this function is in memePublish.js
|
||||
};
|
||||
}
|
||||
|
|
@ -5,6 +5,38 @@ var uploader = new SocketIOFileUpload(socket);
|
|||
var stagedFiles = null;
|
||||
var license = 'Creative Commons';
|
||||
var nsfw = false;
|
||||
var claimName;
|
||||
|
||||
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)
|
||||
claimName = claimNameInput.value; // claimNameInput.value defined in memeDraw.js
|
||||
var fileName = claimNameInput.value + ".jpg";
|
||||
var file = new File([blob], fileName, {type: 'image/jpeg', lastModified: Date.now()});
|
||||
console.log(file);
|
||||
stageAndPublish(file);
|
||||
};
|
||||
|
||||
/* helper functions */
|
||||
// create a progress animation
|
||||
|
|
@ -78,14 +110,31 @@ 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>' + 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 blockchain will need a few minutes to process your amazing work. Please allow some time for your asset to appear in the entries below.</strong></p>';
|
||||
publishResults += '<p>Your meme has been published to <a target="_blank" href="/' + msg.name + '">spee.ch/' + msg.name + '</a></p>';
|
||||
publishResults += '<p>Here is a direct link to where your meme will be stored: <a target="_blank" href="/' + msg.name + '/' + msg.result.claim_id + '">spee.ch/' + msg.name + '/' + msg.result.claim_id + '</a></p>';
|
||||
var publishResults;
|
||||
var directUrl = 'https://spee.ch/' + 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>';
|
||||
document.getElementById('publish-active-area').innerHTML = publishResults;
|
||||
// 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!',
|
||||
hashtags: 'LBRYMemeFodder',
|
||||
via: 'lbryio'
|
||||
})
|
||||
.then( function( el ) {
|
||||
console.log('Tweet button added.');
|
||||
});
|
||||
});
|
||||
|
|
@ -9,7 +9,7 @@ module.exports = (app, ua, googleAnalyticsId) => {
|
|||
logger.debug(`GET request on ${originalUrl}`);
|
||||
// get and serve content
|
||||
showController
|
||||
.getAllClaims('meme-fodder-entry')
|
||||
.getAllClaims('meme-fodder')
|
||||
.then(orderedFreePublicClaims => {
|
||||
res.status(200).render('memeFodder', { claims: orderedFreePublicClaims });
|
||||
})
|
||||
|
|
|
|||
|
|
@ -14,4 +14,4 @@
|
|||
<script src="/socket.io/socket.io.js"></script>
|
||||
<script src="/siofu/client.js"></script>
|
||||
|
||||
<script src="/assets/js/memePublish.js"></script>
|
||||
<script src="/assets/js/memePublish.js"></script>
|
||||
|
|
@ -1,49 +1,53 @@
|
|||
<div class="col-md-12">
|
||||
<div class="card" id="publish">
|
||||
<div class="card-title card-block grey lighten-1 white-text">
|
||||
<h2>#LbryMemeFodder</h2>
|
||||
<h2>#LBRYMemeFodder</h2>
|
||||
</div>
|
||||
<div class="card-block" id="publish-active-area">
|
||||
<div class="card-block">
|
||||
<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>(1) <i>/meme-fodder</i> will always use the winning public, free image published to <a href="lbry://meme-fodder">lbry://meme-fodder</a>. (meaning the most recent, highest bid). Want to put a different image on the chopping block? Go publish it!</p>
|
||||
<p>(2) Create a meme based on the current claim with the tool below. Think you got a winner? <a href="https://twitter.com/hashtag/LbryMemeFodder" target="_blank">Share it with the community</a> and see what they think!</p>
|
||||
<p>(1) <i>/meme-fodder</i> will always use the winning public, free image published to <a href="LBRY://meme-fodder">LBRY://meme-fodder</a>. (meaning the most recent, highest bid). Want to put a different image on the chopping block? Go publish it!</p>
|
||||
<p>(2) Create a meme based on the current claim with the tool below. Think you got a winner? <a href="https://twitter.com/hashtag/LBRYMemeFodder" target="_blank">Share it with the community</a> and see what they think!</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="col-md-5">
|
||||
<canvas id="meme-canvas">
|
||||
If you can see this, canvas is not supported.
|
||||
</canvas>
|
||||
<img id="start-image" src="/meme-fodder" alt="a picture to make your meme with"/>
|
||||
</div>
|
||||
<div class="col-md-6" id="publish-active-area">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<label for="top-text">Meme:</label>
|
||||
<input id="top-text" type="text" value="Ship it?" />
|
||||
<div class="col-md-7">
|
||||
<div id="publish-active-area">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<label for="top-text">Meme:</label>
|
||||
<input id="top-text" type="text" value="Hello" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<input id="bottom-text" type="text" value="YAAAAASSSSSSS!" />
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<input id="bottom-text" type="text" value="world!" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<label for="meme-name">Claim Name:</label>
|
||||
<input id="file-name-input" type="text" value="My-Claim-Name" />
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<label for="meme-name">Claim Name:</label>
|
||||
<input id="file-name-input" type="text" value="My-Claim-Name" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<button onclick="startPublish()">Save and Publish</button>
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<button onclick="startPublish()">Save and Publish</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
|
||||
|
|
@ -1,14 +1,12 @@
|
|||
<div class="col-md-12">
|
||||
<div class="card" id="publish">
|
||||
<div class="card-title card-block grey lighten-1 white-text">
|
||||
<h2>Recent Entries</h2>
|
||||
<h2>Recent Meme Fodder</h2>
|
||||
</div>
|
||||
<div class="card-block" id="publish-active-area">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<p>Below are some of the most recent entries published via /meme-fodder</p>
|
||||
(pull all the claims published to 'lbryMemeFodder' and display most recent 20 here)
|
||||
(maybe a voting system? Is there a way to allow people to donate funds to a claimId so that it will show up higher in the results?)
|
||||
<p>Below are some of the most recent images that have been fuel for our enjoyment on /meme-fodder</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
|
|
@ -20,6 +18,8 @@
|
|||
<hr>
|
||||
{{/each}}
|
||||
</div>
|
||||
<p>(ideally I'd like to display what users have submitted here)</p>
|
||||
<p>(maybe a voting system? Is there a way to allow people to donate funds to a claimId so that it will show up higher in the results?)</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Add table
Reference in a new issue