LBRYCommunity/lbry.tech
1
0
Fork 0
Code Issues 13 Pull requests 8 Projects Releases Packages Wiki Activity

Tipping example of Tour is nearly done, blocked by daemon issues

Browse source
This commit is contained in:
ポール ウェッブ 2018-08-09 17:17:47 -05:00
parent 70e292f39a
commit 1768a7ca52
7 changed files with 175 additions and 100 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
helpers/fetch-metadata.js
View file

@ -25,9 +25,10 @@ loadLanguages(["json"]);
module.exports = exports = (data, socket) => {
let dataDetails = "";
if (data.step === 1 && !data.claim || !data.method) return;
if (data.step === 2 && !data.data) return;
if (data.step === 2) dataDetails = data.data; // file upload
if (data.example === 1 && !data.claim || !data.method) return;
if (data.example === 2 && !data.data) return;
if (data.example === 2) dataDetails = data.data; // file upload
if (data.example === 3 && !data.claim || !data.method) return;
const allowedMethods = [
"publish",
@ -49,10 +50,9 @@ module.exports = exports = (data, socket) => {
body.access_token = process.env.LBRY_DAEMON_ACCESS_TOKEN;
body.method = resolveMethod;
if (data.step === 1) body.uri = claimAddress;
if (resolveMethod === "publish") {
body.bid = 0.001; // Hardcoded publish amount
// body.bid = 0.001; // Hardcoded publish amount
body.description = dataDetails.description;
body.file_path = process.env.LBRY_DAEMON_IMAGES_PATH + dataDetails.file_path; // TODO: Fix the internal image path in daemon (original comment, check to see if still true)
body.language = dataDetails.language;
@ -102,6 +102,15 @@ module.exports = exports = (data, socket) => {
});
}
if (resolveMethod === "resolve") {
body.uri = claimAddress;
}
if (resolveMethod === "wallet_send") {
body.amount = "0.001"; // Hardcoded tip amount
body.claim_id = claimAddress;
}
return new Promise((resolve, reject) => { // eslint-disable-line
request({
url: "http://daemon.lbry.tech",
@ -122,8 +131,8 @@ module.exports = exports = (data, socket) => {
if (body.error && typeof body.error !== "undefined") {
logSlackError(
"\n" +
"> *DAEMON ERROR:* ```" + JSON.parse(JSON.stringify(body.error)) + "```" + "\n" +
"> _Cause: Someone is going through the Tour_\n"
"> *DAEMON ERROR:* ```" + JSON.parse(JSON.stringify(body.error.message)) + "```" + "\n" +
"> _Cause: Someone is going through the Tour after a response has been parsed_\n"
);
return resolve(body.error);
@ -138,7 +147,7 @@ module.exports = exports = (data, socket) => {
<pre><code class="language-json">${renderedCode}</code></pre>
`),
"message": "updated html",
"selector": "#step1-result"
"selector": `#example${data.example}-result`
}));
}

2
public/css/style.css
View file

File diff suppressed because one or more lines are too long

2
public/css/style.css.map
View file

File diff suppressed because one or more lines are too long

2
sass/pages/_tour.scss
View file

@ -20,7 +20,7 @@
vertical-align: top;
}
.tour__sidebar__step {
.tour__sidebar__example {
cursor: pointer;
&:not(:last-of-type) {

123
server.js
View file

@ -100,8 +100,8 @@ fastify.ready(err => {
break;
case "landed on tour":
generateStep1OfTour(result => {
case "landed on tour" || "request for tour, example 1":
generateTrendingContent(1, result => {
socket.send(JSON.stringify({
"html": result,
"message": "updated html",
@ -111,6 +111,19 @@ fastify.ready(err => {
break;
/*
case "request for tour, example 3":
generateTrendingContent(3, result => {
socket.send(JSON.stringify({
"html": result,
"message": "updated html",
"selector": "#tour-loader"
}));
});
break;
*/
case "subscribe":
newsletterSubscribe(data, socket);
break;
@ -121,7 +134,10 @@ fastify.ready(err => {
}
});
socket.on("close", () => socket.terminate());
socket.on("close", () => {
// console.log(socket);
return socket.terminate();
});
});
});
@ -187,6 +203,62 @@ function generateGitHubFeed(displayGitHubFeed) {
}
}
function generateTrendingContent(exampleNumber, displayTrendingContent) {
return getTrendingContent().then(response => {
if (!response || !response.success || response.success !== true || !response.data) return "";
const rawContentCollection = [];
const renderedContentCollection = [];
const trendingContentData = response.data;
for (const data of trendingContentData) {
rawContentCollection.push(fetchMetadata({ claim: data.url, method: "resolve", example: exampleNumber }));
/*
if (exampleNumber === 1) {
rawContentCollection.push(fetchMetadata({ claim: data.url, method: "resolve", example: exampleNumber }));
}
if (exampleNumber === 3) {
rawContentCollection.push(fetchMetadata({ claim: data.url, method: "wallet_send", example: exampleNumber }));
}
*/
}
Promise.all(rawContentCollection).then(collection => {
for (const part of collection) {
if (!part.value.stream.metadata.nsfw && part.value.stream.metadata.thumbnail) {
renderedContentCollection.push(`
<figure class="tour__content__trend">
<img alt="${part.name}" data-action="choose claim" data-claim-id="${exampleNumber === 1 ? part.name : part.claim_id}" src="${part.value.stream.metadata.thumbnail}"/>
<figcaption data-action="choose claim" data-claim-id="${exampleNumber === 1 ? part.name : part.claim_id}">
${part.value.stream.metadata.title}
<span>${part.channel_name}</span>
</figcaption>
</figure>
`);
}
}
displayTrendingContent(renderedContentCollection.join(""));
});
});
}
function getTrendingContent() {
return new Promise((resolve, reject) => {
request({
method: "GET",
url: "https://api.lbry.io/file/list_trending"
}, (error, response, body) => {
if (error) reject(error);
body = JSON.parse(body);
resolve(body);
});
});
}
function newsletterSubscribe(data, socket) {
const email = data.email;
@ -281,48 +353,3 @@ function validateEmail(email) {
const re = /^(([^<>()[\].,;:\s@"]+(\.[^<>()[\].,;:\s@"]+)*)|(".+"))@(([^<>()[\].,;:\s@"]+\.)+[^<>()[\\.,;:\s@"]{2,})$/i;
return re.test(String(email));
}
function generateStep1OfTour(displayTrendingContent) {
return getTrendingContent().then(response => {
if (!response || !response.success || response.success !== true || !response.data) return "";
const trendingContentData = response.data;
const rawContentCollection = [];
const renderedContentCollection = [];
for (const data of trendingContentData) rawContentCollection.push(fetchMetadata({ claim: data.url, method: "resolve", step: 1 }));
Promise.all(rawContentCollection).then(collection => {
for (const part of collection) {
if (!part.value.stream.metadata.nsfw && part.value.stream.metadata.thumbnail) {
renderedContentCollection.push(`
<figure class="tour__content__trend">
<img alt="${part.name}" data-action="choose claim" data-claim-id="${part.name}" src="${part.value.stream.metadata.thumbnail}"/>
<figcaption data-action="choose claim" data-claim-id="${part.name}">
${part.value.stream.metadata.title}
<span>${part.channel_name}</span>
</figcaption>
</figure>
`);
}
}
displayTrendingContent(renderedContentCollection.join(""));
});
});
}
function getTrendingContent() {
return new Promise((resolve, reject) => {
request({
method: "GET",
url: "https://api.lbry.io/file/list_trending"
}, (error, response, body) => {
if (error) reject(error);
body = JSON.parse(body);
resolve(body);
});
});
}

111
views/partials/tour-scripts.js
View file

@ -15,57 +15,63 @@ if (window.location.href.search && window.location.href.split("?url=")[1]) { //
$("body").on("click", "[data-action]", event => {
event.preventDefault();
let exampleNumber;
const data = event.currentTarget.dataset;
if (!parseInt($(".tour__sidebar__example.active")[0].dataset.example)) return;
exampleNumber = parseInt($(".tour__sidebar__example.active")[0].dataset.example);
switch(data.action) {
case "choose claim":
fetchMetadata(1, data.claimId);
fetchMetadata(exampleNumber, data.claimId);
break;
case "execute claim":
if (!$("#fetch-claim-uri").val()) return;
fetchMetadata(1, $("#fetch-claim-uri").val());
fetchMetadata(exampleNumber, $("#fetch-claim-uri").val());
break;
case "tour, step 1":
$(".tour__sidebar__step").removeClass("active");
$(".tour__sidebar__step:nth-child(1)").addClass("active");
case "tour, example 1":
$(".tour__sidebar__example").removeClass("active");
$(".tour__sidebar__example:nth-child(1)").addClass("active");
$("#tour-loader").show();
$("#tour-results").hide();
$("#tour-loader").html("");
$("#tour-results").html("");
send(JSON.stringify({
"message": `request for ${data.action}`
}));
/*
$("#step1-page").show();
$("#step2-page").hide();
$("#step3-page").hide();
*/
break;
case "tour, step 2":
$(".tour__sidebar__step").removeClass("active");
$(".tour__sidebar__step:nth-child(2)").addClass("active");
case "tour, example 2":
$(".tour__sidebar__example").removeClass("active");
$(".tour__sidebar__example:nth-child(2)").addClass("active");
/*
$("#step1-page").hide();
$("#step2-page").show();
$("#example1-page").hide();
$("#example2-page").show();
$(".hook__page__content__meme__thumbnail").click(); // preload canvas
$("#step3-page").hide();
$("#example3-page").hide();
*/
break;
case "tour, step 3":
$(".tour__sidebar__step").removeClass("active");
$(".tour__sidebar__step:nth-child(3)").addClass("active");
case "tour, example 3":
$(".tour__sidebar__example").removeClass("active");
$(".tour__sidebar__example:nth-child(3)").addClass("active");
$("#tour-loader").html("");
$("#tour-results").html("");
send(JSON.stringify({
"message": `request for ${data.action}`
}));
/*
$("#step1-page").hide();
$("#step2-page").hide();
$("#step3-page").show();
*/
break;
case "upload image":
fetchMetadata(2, getMemeInfo());
fetchMetadata(exampleNumber, getMemeInfo());
break;
default:
@ -112,7 +118,7 @@ function detectLanguageAndUpdate() {
function initializeTour() {
$("#fetch-claim-uri").val("").focus(); // reset
$(".tour__sidebar__step:nth-child(1)").addClass("active");
$(".tour__sidebar__example:nth-child(1)").addClass("active");
send(JSON.stringify({
"message": "landed on tour"
@ -129,19 +135,19 @@ function initializeTour() {
function fetchMetadata(stepNumber, data) {
if (!stepNumber) return;
function fetchMetadata(exampleNumber, data) {
if (!exampleNumber) return;
switch(stepNumber) {
switch(exampleNumber) {
case 1:
send(JSON.stringify({
"claim": data,
"message": "fetch metadata",
"method": "resolve",
"step": stepNumber
"example": exampleNumber
}));
if (!$("#fetch-claim-uri").val()) $("#fetch-claim-uri").val(data);
$("#fetch-claim-uri").val(data); // if (!$("#fetch-claim-uri").val()) $("#fetch-claim-uri").val(data);
$("#tour-results").html(`
<pre><code class="language-bash">
@ -150,7 +156,7 @@ curl "http://localhost:5279" --data "{ 'method': 'resolve', 'params': { 'uri': '
</code></pre>
<div class="loader" id="temp-loader"></div>
<div id="step1-result"></div>
<div id="example1-result"></div>
`);
$("#tour-loader").hide();
@ -161,19 +167,51 @@ curl "http://localhost:5279" --data "{ 'method': 'resolve', 'params': { 'uri': '
"data": data,
"message": "fetch metadata",
"method": "publish",
"step": stepNumber
"example": exampleNumber
}));
break;
case 3:
send(JSON.stringify({
"claim": data,
"message": "fetch metadata",
"method": "wallet_send",
"example": exampleNumber
}));
$("#fetch-claim-uri").val(data);
$("#tour-results").html(`
<pre><code class="language-bash">
<span class="token comment"># If you have the LBRY desktop app, you can run this in your Terminal</span>
curl "http://localhost:5279" --data "{ 'method': 'wallet_send', 'params': { 'claim_id': '${data}', 'amount': '0.01' } }"
</code></pre>
<div class="loader" id="temp-loader"></div>
<div id="example3-result"></div>
`);
$("#tour-loader").hide();
break;
default:
break;
}
}
function getMemeInfo() { // TODO: Error handling
const info = {};
const info = {
description: $("#meme-description").val(),
file_path: $("#meme-canvas")[0].toDataURL("image/jpeg", 0.6),
language: $("#meme-language").val(),
license: $("#meme-license").val(),
name: $("#meme-title").val(),
nsfw: $("#meme-nsfw-flag")[0].checked,
title: $("#meme-title").val()
};
/*
info.description = $("#meme-description").val();
info.file_path = $("#meme-canvas")[0].toDataURL("image/jpeg", 0.6);
info.language = $("#meme-language").val();
@ -181,6 +219,7 @@ function getMemeInfo() { // TODO: Error handling
info.name = $("#meme-title").val();
info.nsfw = $("#meme-nsfw-flag")[0].checked;
info.title = $("#meme-title").val();
*/
return info;
}

10
views/partials/tour.js
View file

@ -17,7 +17,7 @@ module.exports = exports = () => dedent`
<ul class="tour__sidebar">
${raw(sidebar())}
</ul>
<section class="tour__content">${raw(step1())}</section>
<section class="tour__content">${raw(example1())}</section>
</section>
`;
@ -25,17 +25,17 @@ module.exports = exports = () => dedent`
function sidebar() { // TODO: Save tutorial position to localStorage
return dedent`
<li class="tour__sidebar__step" data-action="tour, step 1" data-step="1">
<li class="tour__sidebar__example" data-action="tour, example 1" data-example="1">
<button type="button">Resolve a claim</button>
<span>Get details of media (aka, "claim" metadata)</span>
</li>
<li class="tour__sidebar__step" data-action="tour, step 2" data-step="2">
<li class="tour__sidebar__example" data-action="tour, example 2" data-example="2">
<button type="button">Publish content</button>
<span>Create a meme and upload it to the LBRY blockchain</span>
</li>
<li class="tour__sidebar__step" data-action="tour, step 3" data-step="3">
<li class="tour__sidebar__example" data-action="tour, example 3" data-example="3">
<button type="button">Support with LBC</button>
<span>Support creators on LBRY with a tip, on us!</span>
</li>
@ -44,7 +44,7 @@ function sidebar() { // TODO: Save tutorial position to localStorage
function step1() {
function example1() {
return html`
<div class="tour__content__urlbar">
<span>lbry://</span><input id="fetch-claim-uri" placeholder="&thinsp;Enter a LBRY address or select an example below" type="text"/>