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 >
< / 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 05:56:33 +02:00
< h2 > Examples:< / h2 >
2017-05-24 20:07:43 +02:00
< ul >
< li > < a href = "/coconuts" > spee.ch/coconuts< / a > < / li >
2017-06-01 06:12:43 +02:00
< li > < a href = "/wood" > spee.ch/wood< / a > < / li >
2017-05-24 20:07:43 +02:00
< 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 >
2017-06-03 05:56:33 +02:00
< h2 > Publish Your Own< / h2 >
2017-06-01 01:44:45 +02:00
< div id = "publish" >
< form id = "publish-form" action = "" method = "" enctype = "multipart/form-data" >
2017-06-01 04:48:09 +02:00
< input type = "file" id = "siofu_input" name = "file" accept = "video/*,image/*" onchange = "previewFile()" enctype = "multipart/form-data" / >
2017-06-01 01:44:45 +02:00
< 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 >
2017-06-01 05:29:16 +02:00
< option value = "Creative Commons" > Creative Commons< / option >
2017-06-01 01:44:45 +02:00
< / select >
< br / >
NSFW: < select type = "text" id = "publish-nsfw" name = "nsfw" value = "false" >
< option value = "false" > False< / option >
< option value = "true" > True< / option >
< / select >
< br / >
2017-06-01 04:48:09 +02:00
< button id = "publish-submit" > Submit< / button >
2017-06-01 01:44:45 +02:00
< / form >
< / div >
2017-05-24 20:07:43 +02:00
2017-06-03 05:56:33 +02:00
< h2 > Help Wanted!< / h2 >
2017-06-01 06:48:50 +02:00
< 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 >
2017-06-03 05:56:33 +02:00
< h2 > Documentation< / h2 >
< h3 > Site Navigation< / h3 >
2017-05-24 20:07:43 +02:00
< 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 >
2017-06-03 05:56:33 +02:00
< h3 > API< / h3 >
2017-05-24 20:07:43 +02:00
< 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 >
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(){
var bars = '< h3 > |';
for (var i = 0; i < x ; i + + ) {
bars += ' | ';
}
bars += '< / h3 > ';
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-05-24 20:07:43 +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
claimName.value = selectedFile.name.substring(0, selectedFile.name.indexOf("."));
2017-05-24 20:07:43 +02:00
} else {
preview.src = "";
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-03 05:56:33 +02:00
document.getElementById("publish-status").innerHTML = msg;
2017-05-24 20:07:43 +02:00
}
2017-06-03 05:56:33 +02:00
uploader.listenOnSubmit(document.getElementById("publish-submit"), document.getElementById("siofu_input"));
2017-06-01 04:48:09 +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-01 04:48:09 +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
document.getElementById("publish").innerHTML = '< div id = "publish-status" > < / div > < div id = "progress-bar" > < / div > ';
// start the progress bar
createProgressBar(document.getElementById("progress-bar"), 12);
2017-06-01 01:44:45 +02:00
});
2017-06-03 05:56:33 +02:00
2017-06-01 04:48:09 +02:00
uploader.addEventListener("progress", function(event){
var percent = event.bytesLoaded / event.file.size * 100;
2017-06-01 05:11:00 +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-01 04:48:09 +02:00
socket.on("publish-status", function(msg){
updatePublishStatus(msg);
})
socket.on("publish-complete", function(msg){
console.log("publish complete", msg);
2017-06-01 05:11:00 +02:00
var publishResults = `< p > You're publish is complete!< / p > `;
publishResults += `< p > The Claim ID is: ${msg.result.claim_id}< / p > `;
publishResults += `< p > The TX ID is: < a href = "https://explorer.lbry.io/#!/transaction?id=${msg.result.txid}" > ${msg.result.txid}< / a > < / p > `;
publishResults += `< p > Note: the transaction still needs to be published by the network. Click the tx id link to view the tx on the blockchain explorer< / p > `
publishResults += `< p > < a href = "/" > Reload the page to publish another (fancy button coming soon)< / a > < / p > `;
2017-06-01 04:48:09 +02:00
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 >
