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 >
< h3 > Examples:< / h3 >
< ul >
< li > < a href = "/coconuts" > spee.ch/coconuts< / a > < / li >
2017-06-01 04:48:09 +02:00
< li > < a href = "/sunflower" > spee.ch/sunflower< / 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 >
< h3 > Publish Your Own< / h3 >
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 = "Creative Commons" > Creative Commons< / option >
< option value = "Public Domain" > Public Domain< / 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 >
< br / >
2017-06-01 04:48:09 +02:00
< button id = "publish-submit" > Submit< / button >
2017-06-01 01:44:45 +02:00
< / form >
2017-06-01 04:48:09 +02:00
< p id = "upload-status" > < / p >
2017-06-01 01:44:45 +02:00
< / div >
2017-05-24 20:07:43 +02:00
< h3 > Help< / h3 >
< h4 > Site Navigation< / h4 >
< 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 >
< h4 > API< / h4 >
< 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
// define global variables
var socket = io();
2017-06-01 04:48:09 +02:00
var uploader = new SocketIOFileUpload(socket);
var name = document.getElementById('publish-name').value;
var license = document.getElementById('publish-license').value;
var nsfw = document.getElementById('publish-nsfw').value;
2017-06-01 01:44:45 +02:00
// function to handle image preview
2017-05-24 20:07:43 +02:00
function previewFile(){
var preview = document.querySelector('img'); //selects the query named img
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) {
previewReader.readAsDataURL(selectedFile); // reads the data as a URL
2017-05-24 20:07:43 +02:00
} else {
preview.src = "";
2017-06-01 01:44:45 +02:00
};
}
2017-06-01 04:48:09 +02:00
// helper function to update status
function updatePublishStatus(msg){
document.getElementById("upload-status").innerHTML = msg;
2017-05-24 20:07:43 +02:00
}
2017-06-01 01:44:45 +02:00
// call the previewFile function
previewFile();
2017-06-01 04:48:09 +02:00
// prevent default on the submit button
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
})
// upload through the socket
uploader.listenOnSubmit(document.getElementById("publish-submit"), document.getElementById("siofu_input"));
// add listeners to the uploader
uploader.addEventListener("start", function(event){
// set meta data
event.file.meta.name = name;
event.file.meta.license = license;
event.file.meta.nsfw = nsfw;
2017-06-01 01:44:45 +02:00
});
2017-06-01 04:48:09 +02:00
uploader.addEventListener("progress", function(event){
var percent = event.bytesLoaded / event.file.size * 100;
console.log();
updatePublishStatus("File is " + percent.toFixed(2) + "% loaded");
})
// add listener for publish status updates
socket.on("publish-status", function(msg){
updatePublishStatus(msg);
})
socket.on("publish-complete", function(msg){
console.log("publish complete", msg);
var publishResults = `< p > You're publish is complete!< / p > < p > The Claim Id is ${msg.result.claim_id}< / p > < p > The TX Id is ${msg.result.txid}< / p > < 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 > < button id = "reset-publish" > Publish another< / button > `;
document.getElementById("publish").innerHTML = publishResults;
2017-06-01 01:44:45 +02:00
})
2017-05-25 07:50:02 +02:00
< / script >
2017-05-24 20:07:43 +02:00
< / body >
< / html >
