diff --git a/app/components/playground.js b/app/components/playground.js index a7400bc..db9b863 100644 --- a/app/components/playground.js +++ b/app/components/playground.js @@ -51,6 +51,7 @@ function navigation() { // TODO: Save tutorial position to localStorage data-action="tour, example 1" data-description="In this example, you can see what runs under the hood when selecting content to view in the LBRY app." data-example="1" + data-success="Success You resolved a claim, which is a fancy way of saying you searched for a piece of content and got back all the metadata associated with it (if it exists)." > Get details of media (aka, "claim" metadata) @@ -61,6 +62,7 @@ function navigation() { // TODO: Save tutorial position to localStorage data-action="tour, example 2" data-description="Sometimes you want to create content, not just consume it. In this example, you can create a meme and upload it to LBRY!" data-example="2" + data-success="Meme-a-riffic You've just contributed to the growing expanse that is the meme industry. Where will your meme go next? YOU DECIDE!" > Create a meme and upload it to the LBRY blockchain @@ -71,6 +73,7 @@ function navigation() { // TODO: Save tutorial position to localStorage data-action="tour, example 3" data-description="In the LBRY app, you can financially support your favorite creators by donating LBRY Coin (LBC). In this example, we are donating LBC in your stead." data-example="3" + data-success="Kudos You've just supported a creator with LBC (or, LBRY credits) with our own stash of LBC (you'd use your own IRL). You're basically saying, \"thanks for this great content, please continue!\" and that's awesome. You're awesome." > Support creators on LBRY with a tip, on us! diff --git a/app/components/tour.js b/app/components/tour.js deleted file mode 100644 index 5585ebd..0000000 --- a/app/components/tour.js +++ /dev/null @@ -1,62 +0,0 @@ -"use strict"; - - - -// P A C K A G E S - -import dedent from "dedent"; -import html from "choo/html"; -import raw from "choo/html/raw"; - - - -// E X P O R T - -export default function () { - return dedent` -
- -
${raw(example1())}
-
- `; -} - - - -// H E L P E R S - -function example1() { - return html` -
- lbry:// - -
- -
-
- `; -} - -function sidebar() { // TODO: Save tutorial position to localStorage - return dedent` -
  • - - Get details of media (aka, "claim" metadata)
    - In this example, you can see what runs under the hood when selecting content to view in the LBRY app. -
    • - -
  • - - Create a meme and upload it to the LBRY blockchain
    - Sometimes you want to create content, not just consume it. In this example, you can create a meme and upload it to LBRY! -
    • - -
  • - - Support creators on LBRY with a tip, on us!
    - In the LBRY app, you can financially support your favorite creators by donating LBRY Coin (LBC). In this example, we are donating LBC in your stead. -
    • - `; -} diff --git a/app/dist/scripts/sockets.js b/app/dist/scripts/sockets.js index 6e901dc..f4b0e8d 100644 --- a/app/dist/scripts/sockets.js +++ b/app/dist/scripts/sockets.js @@ -30,7 +30,32 @@ function initializeWebSocketConnection() { document.querySelector(data.selector).innerHTML = data.html; document.getElementById("emailAddress").value = ""; document.getElementById("emailMessage").innerHTML = ""; - if (document.getElementById("temp-loader")) document.getElementById("temp-loader").style.display = "none"; + + // `data.example` is added when updating HTML. + // This is when the results of an example are sent to the client. + if (data.example) { + if (!document.querySelector(`[data-example="${data.example}"`).classList.contains("completed")) { + document.getElementById("tour-example-description").classList.remove("success"); + } + + document.querySelector(`[data-example="${data.example}"`).classList.add("completed"); + document.getElementById("tour-example-description").classList.add("success"); + + document.getElementById("tour-example-description").innerHTML = + document.querySelector(`[data-example="${data.example}"`).dataset.success; + } + + // If `data.example` isn't found, reset the description area. + else { + document.getElementById("tour-example-description").classList.remove("success"); + + document.getElementById("tour-example-description").innerHTML = + document.querySelector(".tour__navigation__example.active").dataset.description; + } + + if (document.getElementById("temp-loader")) + document.getElementById("temp-loader").style.display = "none"; + document.querySelector(".tour").classList.remove("waiting"); break; diff --git a/app/helpers/fetch-metadata.js b/app/helpers/fetch-metadata.js index 2ea38ed..02d22d0 100644 --- a/app/helpers/fetch-metadata.js +++ b/app/helpers/fetch-metadata.js @@ -92,7 +92,7 @@ module.exports = exports = (data, socket) => { body.file_path = uploadResponse.filename; return publishMeme(body).then(publishResponse => { - let explorerNotice = ""; + // let explorerNotice = ""; if (publishResponse.error) { socket.send(JSON.stringify({ @@ -112,19 +112,22 @@ module.exports = exports = (data, socket) => { return; } + /* if ( publishResponse.result && publishResponse.result.txid ) explorerNotice = `

    If you want proof of the tip you just gave, check it out on our blockchain explorer!

    `; + */ const renderedCode = prism.highlight(stringifyObject(publishResponse, { indent: " ", singleQuotes: false }), prism.languages.json, "json"); return socket.send(JSON.stringify({ + "example": data.example, "html": raw(`

    Response

    - ${explorerNotice} + 
    ${renderedCode}
    `), "message": "updated html", @@ -147,7 +150,7 @@ module.exports = exports = (data, socket) => { } return new Promise((resolve, reject) => { // eslint-disable-line - let explorerNotice = ""; + // let explorerNotice = ""; request({ body: body, @@ -179,20 +182,23 @@ module.exports = exports = (data, socket) => { return resolve(body.error); } + /* if ( body.result && body.result.txid ) explorerNotice = `

    If you want proof of the tip you just gave on behalf of LBRY, check it out on our blockchain explorer!

    `; + */ if (socket) { const renderedCode = prism.highlight(stringifyObject(body, { indent: " ", singleQuotes: false }), prism.languages.json, "json"); return socket.send(JSON.stringify({ + "example": data.example, "html": raw(`

    Response

    - ${explorerNotice} + 
    ${renderedCode}
    `), "message": "updated html", diff --git a/app/sass/pages/_tour.scss b/app/sass/pages/_tour.scss index 36b175a..3228495 100644 --- a/app/sass/pages/_tour.scss +++ b/app/sass/pages/_tour.scss @@ -456,10 +456,22 @@ */ .tour__description { - background-color: rgba($black, 0.05); cursor: default; font-size: 1rem; line-height: 1.33; padding: 1rem; - text-align: center; + + &:not(.success) { + background-color: rgba($black, 0.05); + text-align: center; + } + + &.success { + background-color: rgba($teal, 0.05); + + strong { + display: block; + text-transform: uppercase; + } + } } diff --git a/app/sockets.js b/app/sockets.js index 1dbe2e0..3880864 100644 --- a/app/sockets.js +++ b/app/sockets.js @@ -39,6 +39,7 @@ module.exports = exports = (socket, action) => { case (action.message === "landed on tour"): generateContent(1, result => { socket.send(JSON.stringify({ + // "example": 1, "html": result, "message": "updated html", "selector": "#tour-loader" @@ -49,6 +50,7 @@ module.exports = exports = (socket, action) => { case (action.message === "request for tour, example 1"): generateContent(1, result => { socket.send(JSON.stringify({ + // "example": 1, "html": result, "message": "updated html", "selector": "#tour-loader" @@ -63,6 +65,7 @@ module.exports = exports = (socket, action) => { case (action.message === "request for tour, example 3"): generateContent(3, result => { socket.send(JSON.stringify({ + // "example": 3, "html": result, "message": "updated html", "selector": "#tour-loader" @@ -75,7 +78,7 @@ module.exports = exports = (socket, action) => { break; default: - process.stdout.write(action); + console.log(action); // eslint-disable-line break; } }; @@ -84,6 +87,98 @@ module.exports = exports = (socket, action) => { // H E L P E R S +function generateContent(exampleNumber, displayTrendingContent) { + if (exampleNumber === 1) { + 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 })); + } + + Promise.all(rawContentCollection).then(collection => { + for (const part of collection) { + try { + renderedContentCollection.push(` +
    + ${part.name} + +
    + ${part.value.stream.metadata.title} + ${part.channel_name} +
    +
    + `); + } catch (err) { + return; // TODO: Return nice error message + } + } + + renderedContentCollection.push(` + + `); + + displayTrendingContent(renderedContentCollection.join("")); + }); + }); + } + + if (exampleNumber === 3) { + const approvedUrls = [ + "LBRY#3db81c073f82fd1bb670c65f526faea3b8546720", + "correlation-can-imply-causation#173412f5b1b7aa63a752e8832406aafd9f1ecb4e", + "thanos-is-the-protagonist-how-infinity#2a7f5db2678177435b1dee6c9e38e035ead450b6nyte", + "epic-arcade-mode-duos-nickatnyte-molt#d81bac6d49b1f92e58c37a5f633a27a45b43405e", + "political-correctness-a-force-for-good-a#b4668c0bd096317b44c40738c099b6618095e75f", + "10-secrets-hidden-inside-famous-logos#007789cc45cbb4255cf02ba77cbf84ca8e3d7561", + "ever-wonder-how-bitcoin-and-other#1ac47b8b3def40a25850dc726a09ce23d09e7009", + "bankrupt-pan-am#784b3c215a6f06b663fc1aa292bcb19f29c489bb", + "minecraft-in-real-life-iron-man#758dd6497cdfc401ae1f25984738d024d47b50af", + "ethan-shows-kyle-warframe-skyvault#8a7401b88d5ed0376d98f16808194d4dcb05b284" + ]; + + const rawContentCollection = []; + const renderedContentCollection = []; + + for (const url of approvedUrls) { + rawContentCollection.push(fetchMetadata({ claim: url, method: "resolve", example: exampleNumber })); + } + + Promise.all(rawContentCollection).then(collection => { + for (const part of collection) { + try { + renderedContentCollection.push(` +
    + ${part.name} + +
    + ${part.value.stream.metadata.title} + ${part.channel_name} +
    +
    + `); + } catch (err) { + return; // TODO: Return nice error message + } + } + + renderedContentCollection.push(` + + `); + + displayTrendingContent(renderedContentCollection.join("")); + }); + } +} + function generateMemeCreator(socket) { const images = [ { @@ -210,104 +305,13 @@ function generateMemeCreator(socket) { `; return socket.send(JSON.stringify({ + // "example": 2, "html": memeCreator, "message": "updated html", "selector": "#tour-loader" })); } -function generateContent(exampleNumber, displayTrendingContent) { - if (exampleNumber === 1) { - 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 })); - } - - Promise.all(rawContentCollection).then(collection => { - for (const part of collection) { - try { - renderedContentCollection.push(` -
    - ${part.name} - -
    - ${part.value.stream.metadata.title} - ${part.channel_name} -
    -
    - `); - } catch (err) { - return; // TODO: Return nice error message - } - } - - renderedContentCollection.push(` - - `); - - displayTrendingContent(renderedContentCollection.join("")); - }); - }); - } - - if (exampleNumber === 3) { - const approvedUrls = [ - "LBRY#3db81c073f82fd1bb670c65f526faea3b8546720", - "correlation-can-imply-causation#173412f5b1b7aa63a752e8832406aafd9f1ecb4e", - "thanos-is-the-protagonist-how-infinity#2a7f5db2678177435b1dee6c9e38e035ead450b6nyte", - "epic-arcade-mode-duos-nickatnyte-molt#d81bac6d49b1f92e58c37a5f633a27a45b43405e", - "political-correctness-a-force-for-good-a#b4668c0bd096317b44c40738c099b6618095e75f", - "10-secrets-hidden-inside-famous-logos#007789cc45cbb4255cf02ba77cbf84ca8e3d7561", - "ever-wonder-how-bitcoin-and-other#1ac47b8b3def40a25850dc726a09ce23d09e7009", - "bankrupt-pan-am#784b3c215a6f06b663fc1aa292bcb19f29c489bb", - "minecraft-in-real-life-iron-man#758dd6497cdfc401ae1f25984738d024d47b50af", - "ethan-shows-kyle-warframe-skyvault#8a7401b88d5ed0376d98f16808194d4dcb05b284" - ]; - - const rawContentCollection = []; - const renderedContentCollection = []; - - for (const url of approvedUrls) { - rawContentCollection.push(fetchMetadata({ claim: url, method: "resolve", example: exampleNumber })); - } - - Promise.all(rawContentCollection).then(collection => { - for (const part of collection) { - try { - renderedContentCollection.push(` -
    - ${part.name} - -
    - ${part.value.stream.metadata.title} - ${part.channel_name} -
    -
    - `); - } catch (err) { - return; // TODO: Return nice error message - } - } - - renderedContentCollection.push(` - - `); - - displayTrendingContent(renderedContentCollection.join("")); - }); - } -} - function getTrendingContent() { return new Promise((resolve, reject) => { // eslint-disable-line request({