2017-05-24 20:07:43 +02:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< meta http-equiv = "X-UA-Compatible" content = "ie=edge" >
< title > Spee.ch< / title >
2017-06-03 09:41:02 +02:00
< link rel = "stylesheet" type = "text/css" href = "/assets/css/style.css" >
2017-05-24 20:07:43 +02:00
< / head >
< body >
< h1 > spee.ch< / h1 >
< p > spee.ch is a single-serving site that reads and publishes images to and from the < a href = "https://lbry.io" > LBRY< / a > blockchain.< / p >
2017-06-03 09:41:02 +02:00
< section >
< h2 > Examples:< / h2 >
< ul >
< li > < a href = "/coconuts" > spee.ch/coconuts< / a > < / li >
< li > < a href = "/wood" > spee.ch/wood< / a > < / li >
< li > < a href = "/doitlive" > spee.ch/doitlive< / a > < / li >
< li > < a href = "/doitlive/all" > spee.ch/doitlive/all< / a > < / li >
< li > < a href = "/doitlive/ca3023187e901df9e9aabd95d6ae09b6cc69b3f0" > spee.ch/doitlive/ca3023187e901df9e9aabd95d6ae09b6cc69b3f0< / a > < / li >
< / ul >
< / section >
< section >
< h2 > Publish Your Own< / h2 >
< div id = "publish" >
< form id = "publish-form" action = "" method = "" enctype = "multipart/form-data" >
< input type = "file" id = "siofu_input" name = "file" accept = "video/*,image/*" onchange = "previewFile()" enctype = "multipart/form-data" / >
< br / >
< img id = "image-preview" src = "" height = "200" alt = "Image preview..." / >
< br / >
Name: < input type = "text" id = "publish-name" name = "name" value = "name" / >
< br / >
License: < select type = "text" id = "publish-license" name = "license" value = "license" >
< option value = "Public Domain" > Public Domain< / option >
< option value = "Creative Commons" > Creative Commons< / option >
< / select >
< br / >
NSFW: < select type = "text" id = "publish-nsfw" name = "nsfw" value = "false" >
< option value = "false" > False< / option >
< option value = "true" > True< / option >
< / select >
2017-06-05 02:40:06 +02:00
< 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 >
2017-06-03 09:41:02 +02:00
< / form >
< / div >
< / section >
< section >
< h2 > Help Wanted!< / h2 >
< p > If you would like to help make spee.ch amazing, join our slack channel.< / p >
< p > We are currently in need of a designer to help with styling spee.ch's front end, but all help is welcome!< / p >
< / section >
< section >
< h2 > Documentation< / h2 >
< h3 > Site Navigation< / h3 >
< ul >
< li > < strong > < a href = "/" > spee.ch< / a > < / strong > .
< ul >
< li > To publish a file, navigate to the homepage.< / li >
< / ul >
< / li >
< li > < strong > spee.ch/& ltthe name of the claim& gt< / strong >
< ul >
< li > To view the file with the largest bid at a claim.< / li >
< li > E.g. < a href = "/doitlive" > spee.ch/doitlive< / a > .< / li >
< / ul >
< / li >
< li > < strong > spee.ch/& lt the name of the claim & gt/& lt the claim_id & gt< / strong >
< ul >
< li > To view a specific file at a claim< / li >
< li > E.g. < a href = "/doitlive/c496c8c55ed79816fec39e36a78645aa4458edb5" > spee.ch/doitlive/c496c8c55ed79816fec39e36a78645aa4458edb5< / a > < / li >
< / ul >
< / li >
< li > < strong > spee.ch/& ltthe name of the claim& gt/all< / strong >
< ul >
< li > To view a batch of files at a claim< / li >
< li > E.g. < a href = "/doitlive/all" > spee.ch/doitlive/all< / a > < / li >
< / ul >
< / li >
< / ul >
< h3 > API< / h3 >
< p > Note: these are being used for testing durring spee.ch development and may not be maintained< / p >
< ul >
< li > A GET request to < strong > spee.ch/claim_list/& ltthe name of the claim& gt< / strong >
< ul >
< li > Will return the claim_list for the claim in json format. < / li >
< li > E.g. < a href = "/claim_list/doitlive" > spee.ch/claim_list/doitlive< / a > < / li >
< / ul >
< / li >
< / ul >
< / section >
< section >
< h2 > Links< / h2 >
< a href = "https://github.com/lbryio/spee.ch" > github< / a >
< a href = "https://lbry.io/" > lbry< / a >
< a href = "https://lbry.slack.com" > slack< / a >
< / section >
< section >
< h2 > Bugs< / h2 >
< p > Spee.ch is young and under continuous development so it will have bugs. Please leave an issue on our < a href = "https://github.com/lbryio/spee.ch" > github< / a > if you experience a problem or have suggestions.< / p >
< br > .w.
< br > (o|o)
< br > `'`
< / section >
2017-06-01 01:44:45 +02:00
< script src = "/socket.io/socket.io.js" > < / script >
2017-06-01 04:48:09 +02:00
< script src = "/siofu/client.js" > < / script >
2017-05-24 20:07:43 +02:00
< script >
2017-06-01 01:44:45 +02:00
var socket = io();
2017-06-01 04:48:09 +02:00
var uploader = new SocketIOFileUpload(socket);
2017-06-03 05:56:33 +02:00
function createProgressBar(element, size){
var x = 1;
var adder = 1;
function addOne(){
2017-06-03 09:41:02 +02:00
var bars = '< p > |';
2017-06-03 05:56:33 +02:00
for (var i = 0; i < x ; i + + ) {
bars += ' | ';
}
2017-06-03 09:41:02 +02:00
bars += '< / p > ';
2017-06-03 05:56:33 +02:00
element.innerHTML = bars;
if (x === size){
adder = -1;
} else if ( x === 0){
adder = 1;
}
x += adder;
};
setInterval(addOne, 300);
}
2017-05-24 20:07:43 +02:00
function previewFile(){
var preview = document.querySelector('img'); //selects the query named img
2017-06-01 05:29:16 +02:00
var claimName = document.querySelector('input[name=name]');
2017-06-01 04:48:09 +02:00
var selectedFile = document.querySelector('input[name=file]').files[0];
2017-06-01 01:44:45 +02:00
var previewReader = new FileReader();
previewReader.onloadend = function () {
preview.src = previewReader.result;
2017-06-03 09:41:02 +02:00
};
2017-06-01 01:44:45 +02:00
if (selectedFile) {
2017-06-01 05:29:16 +02:00
previewReader.readAsDataURL(selectedFile); // reads the data and sets the img src
2017-06-04 20:02:59 +02:00
claimName.value = selectedFile.name.substring(0, selectedFile.name.indexOf('.'));
2017-05-24 20:07:43 +02:00
} else {
2017-06-04 20:02:59 +02:00
preview.src = '';
2017-06-03 09:41:02 +02:00
}
2017-06-01 01:44:45 +02:00
}
2017-06-03 05:56:33 +02:00
2017-06-01 04:48:09 +02:00
function updatePublishStatus(msg){
2017-06-04 20:02:59 +02:00
document.getElementById('publish-status').innerHTML = msg;
2017-05-24 20:07:43 +02:00
}
2017-06-03 05:56:33 +02:00
2017-06-04 20:02:59 +02:00
uploader.listenOnSubmit(document.getElementById('publish-submit'), document.getElementById('siofu_input'));
2017-06-03 05:56:33 +02:00
2017-06-04 20:02:59 +02:00
document.getElementById('publish-submit').addEventListener('click', function(event){
2017-06-01 01:44:45 +02:00
event.preventDefault();
2017-06-01 04:48:09 +02:00
})
2017-06-03 05:56:33 +02:00
2017-06-04 20:02:59 +02:00
uploader.addEventListener('start', function(event){
2017-06-01 05:29:16 +02:00
var name = document.getElementById('publish-name').value;
var license = document.getElementById('publish-license').value;
var nsfw = document.getElementById('publish-nsfw').value;
2017-06-01 04:48:09 +02:00
// set meta data
event.file.meta.name = name;
event.file.meta.license = license;
event.file.meta.nsfw = nsfw;
2017-06-03 05:56:33 +02:00
// set the html of the publish area
2017-06-04 20:02:59 +02:00
document.getElementById('publish').innerHTML = '< div id = "publish-status" > < / div > < div id = "progress-bar" > < / div > ';
2017-06-03 05:56:33 +02:00
// start the progress bar
2017-06-04 20:02:59 +02:00
createProgressBar(document.getElementById('progress-bar'), 12);
2017-06-01 01:44:45 +02:00
});
2017-06-03 05:56:33 +02:00
2017-06-04 20:02:59 +02:00
uploader.addEventListener('progress', function(event){
2017-06-01 04:48:09 +02:00
var percent = event.bytesLoaded / event.file.size * 100;
2017-06-04 20:02:59 +02:00
updatePublishStatus('File is ' + percent.toFixed(2) + '% loaded to the server');
2017-06-01 04:48:09 +02:00
})
2017-06-03 05:56:33 +02:00
2017-06-04 20:02:59 +02:00
socket.on('publish-status', function(msg){
2017-06-01 04:48:09 +02:00
updatePublishStatus(msg);
})
2017-06-03 09:41:02 +02:00
2017-06-04 20:02:59 +02:00
socket.on('publish-failure', function(msg){
document.getElementById('publish').innerHTML = '< p > ' + msg + '< / p > < p > --(✖╭╮✖)→ < / p > ';
2017-06-03 09:41:02 +02:00
})
2017-06-04 20:02:59 +02:00
socket.on('publish-complete', function(msg){
var publishResults = '< p > Your publish is complete!< / p > ';
publishResults += '< p > Your Claim ID is: ' + msg.result.claim_id + '< / p > ';
publishResults += '< p > Your Transaction ID is: < a href = "https://explorer.lbry.io/#!/transaction?id=' + msg.result.txid + '" > ' + msg.result.txid + '< / a > < / p > ';
publishResults += '< p > Here is a link to the claim where your asset was published: < a href = "https://spee.ch/' + msg.name + '" > spee.ch/' + msg.name + '< / a > < / p > ';
publishResults += '< p > Here is a direct link to your asset: < a href = "https://spee.ch/' + msg.name + '/' + msg.result.claim_id + '" > spee.ch/' + msg.name + '/' + msg.result.claim_id + '< / a > < / p > ';
publishResults += '< p > < i > NOTE: the transaction still needs to be mined by the network before you can access it! This may take a few minutes. To to view the transaction on the blockchain explorer click the Transaction ID link above.< / i > < / p > ';
publishResults += '< p > < a href = "/" > Reload to publish another asset< / a > < / p > ';
document.getElementById('publish').innerHTML = publishResults;
2017-06-01 01:44:45 +02:00
})
2017-06-03 05:56:33 +02:00
2017-05-25 07:50:02 +02:00
< / script >
2017-05-24 20:07:43 +02:00
< / body >
2017-06-01 06:48:50 +02:00
< / html >
