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

Refactoring and fixes

Browse source
This commit is contained in:
ポール ウェッブ 2018-09-28 14:07:59 -05:00
parent d23f0390ec
commit c2f5ea82c2
7 changed files with 129 additions and 83 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
app/components/client/ecosystem-scripts.js
View file

@ -27,7 +27,7 @@ $("[data-action]").on("click", event => {
function open(ecosystemComponentClassName) { function open(ecosystemComponentClassName) {
switch (true) { switch(true) {
case (ecosystemComponentClassName === "lbrycrd"): case (ecosystemComponentClassName === "lbrycrd"):
resetClassesAndStorage(); resetClassesAndStorage();
document.getElementsByClassName("lbrycrd")[0].classList.add("active"); document.getElementsByClassName("lbrycrd")[0].classList.add("active");
@ -82,7 +82,7 @@ function openSubmodule(ecosystemComponentClassName) {
document.querySelectorAll(".ecosystem__module").forEach(n => n.classList.remove("active")); document.querySelectorAll(".ecosystem__module").forEach(n => n.classList.remove("active"));
switch (true) { switch(true) {
case (ecosystemComponentClassName === "chainquery"): case (ecosystemComponentClassName === "chainquery"):
setSubmoduleConnectionTitle(ecosystemComponentClassName); setSubmoduleConnectionTitle(ecosystemComponentClassName);

89
app/components/client/tour-scripts.js
View file

@ -24,9 +24,8 @@ document.querySelector("body").addEventListener("click", event => {
event.explicitOriginalTarget.classList && event.explicitOriginalTarget.classList &&
event.explicitOriginalTarget.classList[0] === "tour__content__meme__canvas__thumbnail" event.explicitOriginalTarget.classList[0] === "tour__content__meme__canvas__thumbnail"
) { ) {
for (const thumbnail of document.querySelectorAll(".tour__content__meme__canvas__thumbnail")) { for (const thumbnail of document.querySelectorAll(".tour__content__meme__canvas__thumbnail"))
thumbnail.classList.remove("selected"); thumbnail.classList.remove("selected");
}
event.explicitOriginalTarget.classList.add("selected"); event.explicitOriginalTarget.classList.add("selected");
updateCanvas(event.explicitOriginalTarget); updateCanvas(event.explicitOriginalTarget);
@ -50,6 +49,9 @@ document.getElementById("fetch-claim-uri").addEventListener("keyup", event => {
document.getElementById("fetch-claim-uri").value.length > 0 document.getElementById("fetch-claim-uri").value.length > 0
) fetchMetadata(3, document.getElementById("fetch-claim-uri").value); ) fetchMetadata(3, document.getElementById("fetch-claim-uri").value);
break; break;
default:
break;
} }
}); });
@ -85,7 +87,8 @@ function detectLanguageAndUpdate() { // eslint-disable-line
for (const language of navigator.languages) userLocales.push(language); for (const language of navigator.languages) userLocales.push(language);
for (const key in memeLocaleObject) { for (const key in memeLocaleObject) {
if (memeLocaleObject[key] && memeLocaleObject[key].value) memeLocales.push(memeLocaleObject[key].value); if (memeLocaleObject[key] && memeLocaleObject[key].value)
memeLocales.push(memeLocaleObject[key].value);
} }
if ( if (
@ -169,8 +172,8 @@ curl --header <span class="token string">"Content-Type: application/json"</span>
document.getElementById("tour-results").innerHTML = ` document.getElementById("tour-results").innerHTML = `
<pre><code class="language-bash"> <pre><code class="language-bash">
<span class="token comment"># With the LBRY app/daemon running locally, you can use this in your Terminal</span> <span class="token comment"># With the LBRY app/daemon running locally, you can use this in your Terminal</span>
curl --header <span class="token string">"Content-Type: application/json"</span> --data <span class="token string">'{ "method": "publish", "params": { "name": "TITLE_OF_YOUR_CONTENT", "file_path": "ABSOLUTE_PATH_TO_MEDIA_ON_YOUR_COMPUTER", "bid": "0.001", "metadata": { "description": "DESCRIPTION_OF_YOUR_CONTENT", "title": "TITLE_OF_YOUR_CONTENT", "language": "en", "license": "", "nsfw": false }}}'</span> <span class="token url">http://localhost:5279 </span> curl --header <span class="token string">"Content-Type: application/json"</span> --data <span class="token string">'{ "method": "publish", "params": { "name": "TITLE_OF_YOUR_CONTENT", "file_path": "ABSOLUTE_PATH_TO_MEDIA_ON_YOUR_COMPUTER", "bid": "0.001", "metadata": { "description": "DESCRIPTION_OF_YOUR_CONTENT", "title": "TITLE_OF_YOUR_CONTENT", "language": "en", "license": "", "nsfw": false }}}'</span> <span class="token url">http://localhost:5279 </span>
</code></pre> </code></pre>
<div class="loader" id="temp-loader"></div> <div class="loader" id="temp-loader"></div>
@ -189,12 +192,11 @@ curl --header <span class="token string">"Content-Type: application/json"</span>
})); }));
document.getElementById("fetch-claim-uri").value = data; document.getElementById("fetch-claim-uri").value = data;
// $("#fetch-claim-uri").val(data);
document.getElementById("tour-results").innerHTML = ` document.getElementById("tour-results").innerHTML = `
<pre><code class="language-bash"> <pre><code class="language-bash">
<span class="token comment"># With the LBRY app/daemon running locally, you can use this in your Terminal</span> <span class="token comment"># With the LBRY app/daemon running locally, you can use this in your Terminal</span>
curl --header <span class="token string">"Content-Type: application/json"</span> --data <span class="token string">'{ "method": "wallet_send", "params": { "amount": "0.01", "claim_id": "${data}" }}'</span> <span class="token url">http://localhost:5279 </span> curl --header <span class="token string">"Content-Type: application/json"</span> --data <span class="token string">'{ "method": "wallet_send", "params": { "amount": "0.01", "claim_id": "${data}" }}'</span> <span class="token url">http://localhost:5279 </span>
</code></pre> </code></pre>
<div class="loader" id="temp-loader"></div> <div class="loader" id="temp-loader"></div>
@ -270,18 +272,24 @@ const handleExamples = debounce(event => {
break; break;
case "tour, example 2": case "tour, example 2":
if ($("#tour-loader").hasClass("tour__content__trends")) { if (document.getElementById("tour-loader").classList.contains("tour__content__trends")) {
$("#tour-loader").removeClass("tour__content__trends").addClass("tour__content__meme"); document.getElementById("tour-loader").classList.remove("tour__content__trends");
document.getElementById("tour-loader").classList.add("tour__content__meme");
} }
$("#fetch-claim-uri").val(""); // reset URL bar document.getElementById("fetch-claim-uri").value = ""; // reset URL bar
$("#tour-url").hide(); document.getElementById("tour-url").style.display = "none";
$(".tour__navigation__example").removeClass("active"); for (const example of document.querySelectorAll(".tour__navigation__example"))
$(".tour__navigation__example:nth-child(2)").addClass("active"); example.classList.remove("active");
$("#tour-loader").empty().show(); document.querySelector(".tour__navigation__example:nth-child(2)").classList.add("active");
$("#tour-results").empty().show();
document.getElementById("tour-loader").innerHTML = "";
document.getElementById("tour-results").innerHTML = "";
document.getElementById("tour-loader").removeAttribute("style");
document.getElementById("tour-results").removeAttribute("style");
send(JSON.stringify({ send(JSON.stringify({
"message": `request for ${data.action}` "message": `request for ${data.action}`
@ -290,19 +298,27 @@ const handleExamples = debounce(event => {
break; break;
case "tour, example 3": case "tour, example 3":
if ($("#tour-loader").hasClass("tour__content__meme")) { if (document.getElementById("tour-loader").classList.contains("tour__content__meme")) {
$("#tour-loader").removeClass("tour__content__meme").addClass("tour__content__trends"); document.getElementById("tour-loader").classList.remove("tour__content__meme");
document.getElementById("tour-loader").classList.add("tour__content__trends");
} }
$("#fetch-claim-uri").val(""); // reset URL bar document.getElementById("fetch-claim-uri").value = ""; // reset URL bar
$("#tour-url button").text("Tip"); document.querySelector("#tour-url button").textContent = "Tip";
if ($("#tour-url")[0].style.display === "none") $("#tour-url").show();
$(".tour__navigation__example").removeClass("active"); if (document.getElementById("tour-url").style.display === "none")
$(".tour__navigation__example:nth-child(3)").addClass("active"); document.getElementById("tour-url").removeAttribute("style");
$("#tour-loader").empty().show(); for (const example of document.querySelectorAll(".tour__navigation__example"))
$("#tour-results").empty().show(); example.classList.remove("active");
document.querySelector(".tour__navigation__example:nth-child(3)").classList.add("active");
document.getElementById("tour-loader").innerHTML = "";
document.getElementById("tour-results").innerHTML = "";
document.getElementById("tour-loader").removeAttribute("style");
document.getElementById("tour-results").removeAttribute("style");
send(JSON.stringify({ send(JSON.stringify({
"message": `request for ${data.action}` "message": `request for ${data.action}`
@ -321,8 +337,8 @@ const handleExamples = debounce(event => {
function initCanvas() { // eslint-disable-line function initCanvas() { // eslint-disable-line
const canvas = document.getElementById("meme-canvas"); const canvas = document.getElementById("meme-canvas");
const canvasWidth = 400;
const canvasHeight = 300; const canvasHeight = 300;
const canvasWidth = 400;
const ctx = canvas.getContext("2d"); const ctx = canvas.getContext("2d");
const img = document.getElementById("base-image"); const img = document.getElementById("base-image");
@ -336,16 +352,18 @@ function initCanvas() { // eslint-disable-line
ctx.strokeStyle = "black"; ctx.strokeStyle = "black";
ctx.textAlign = "center"; ctx.textAlign = "center";
ctx.textBaseline = "top"; ctx.textBaseline = "top";
ctx.strokeText($("#meme-top-line").val().toUpperCase(), canvasWidth / 2, 20);
ctx.strokeText($("#meme-bottom-line").val().toUpperCase(), canvasWidth / 2, (canvasHeight - 40)); ctx.strokeText(document.getElementById("meme-top-line").value.toUpperCase(), canvasWidth / 2, 20);
ctx.fillText($("#meme-top-line").val().toUpperCase(), canvasWidth / 2, 20); ctx.fillText(document.getElementById("meme-top-line").value.toUpperCase(), canvasWidth / 2, 20);
ctx.fillText($("#meme-bottom-line").val().toUpperCase(), canvasWidth / 2, (canvasHeight - 40));
ctx.strokeText(document.getElementById("meme-bottom-line").value.toUpperCase(), canvasWidth / 2, (canvasHeight - 40));
ctx.fillText(document.getElementById("meme-bottom-line").value.toUpperCase(), canvasWidth / 2, (canvasHeight - 40));
} }
function updateCanvas(imageSource) { function updateCanvas(imageSource) {
const canvas = document.getElementById("meme-canvas"); const canvas = document.getElementById("meme-canvas");
const canvasWidth = 400;
const canvasHeight = 300; const canvasHeight = 300;
const canvasWidth = 400;
const ctx = canvas.getContext("2d"); const ctx = canvas.getContext("2d");
const img = document.getElementById("base-image"); const img = document.getElementById("base-image");
@ -356,8 +374,9 @@ function updateCanvas(imageSource) {
img.src = imageSource.src; img.src = imageSource.src;
} ctx.drawImage(img, 0, 0, canvasWidth, canvasHeight, 0, 0, canvasWidth, canvasHeight); } ctx.drawImage(img, 0, 0, canvasWidth, canvasHeight, 0, 0, canvasWidth, canvasHeight);
ctx.strokeText($("#meme-top-line").val().toUpperCase(), canvasWidth / 2, 20); ctx.strokeText(document.getElementById("meme-top-line").value.toUpperCase(), canvasWidth / 2, 20);
ctx.strokeText($("#meme-bottom-line").val().toUpperCase(), canvasWidth / 2, (canvasHeight - 40)); ctx.fillText(document.getElementById("meme-top-line").value.toUpperCase(), canvasWidth / 2, 20);
ctx.fillText($("#meme-top-line").val().toUpperCase(), canvasWidth / 2, 20);
ctx.fillText($("#meme-bottom-line").val().toUpperCase(), canvasWidth / 2, (canvasHeight - 40)); ctx.strokeText(document.getElementById("meme-bottom-line").value.toUpperCase(), canvasWidth / 2, (canvasHeight - 40));
ctx.fillText(document.getElementById("meme-bottom-line").value.toUpperCase(), canvasWidth / 2, (canvasHeight - 40));
} }

41
app/dist/scripts/sockets.js vendored
View file

@ -25,41 +25,56 @@ function initializeWebSocketConnection() {
ws.onmessage = socket => { ws.onmessage = socket => {
const data = JSON.parse(socket.data); const data = JSON.parse(socket.data);
switch (true) { switch(true) {
case data.message === "updated html": case data.message === "show result":
document.querySelector(data.selector).innerHTML = data.html; if (!data.example) return;
document.getElementById("emailAddress").value = "";
document.getElementById("emailMessage").innerHTML = "";
// `data.example` is added when updating HTML. document.querySelector(data.selector).innerHTML = data.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"))
if (!document.querySelector(`[data-example="${data.example}"`).classList.contains("completed")) {
document.getElementById("tour-example-description").classList.remove("success"); document.getElementById("tour-example-description").classList.remove("success");
}
document.querySelector(`[data-example="${data.example}"`).classList.add("completed"); document.querySelector(`[data-example="${data.example}"`).classList.add("completed");
document.getElementById("tour-example-description").classList.add("success"); document.getElementById("tour-example-description").classList.add("success");
document.getElementById("tour-example-description").innerHTML = document.getElementById("tour-example-description").innerHTML =
document.querySelector(`[data-example="${data.example}"`).dataset.success; document.querySelector(`[data-example="${data.example}"`).dataset.success;
if (document.getElementById("temp-loader"))
document.getElementById("temp-loader").style.display = "none";
if (document.querySelector(".tour"))
document.querySelector(".tour").classList.remove("waiting");
break;
case data.message === "updated html":
document.querySelector(data.selector).innerHTML = data.html;
document.getElementById("emailAddress").value = "";
document.getElementById("emailMessage").innerHTML = "";
if (data.example === 2) {
detectLanguageAndUpdate(); // eslint-disable-line
initCanvas(); // eslint-disable-line
setTimeout(() => {
document.querySelector(".tour__content__meme__canvas__thumbnail").click();
}, 100);
} }
// If `data.example` isn't found, reset the description area.
else {
if (document.getElementById("tour-example-description")) { if (document.getElementById("tour-example-description")) {
document.getElementById("tour-example-description").classList.remove("success"); document.getElementById("tour-example-description").classList.remove("success");
document.getElementById("tour-example-description").innerHTML = document.getElementById("tour-example-description").innerHTML =
document.querySelector(".tour__navigation__example.active").dataset.description; document.querySelector(".tour__navigation__example.active").dataset.description;
} }
}
if (document.getElementById("temp-loader")) if (document.getElementById("temp-loader"))
document.getElementById("temp-loader").style.display = "none"; document.getElementById("temp-loader").style.display = "none";
if (document.querySelector(".tour")) if (document.querySelector(".tour"))
document.querySelector(".tour").classList.remove("waiting"); document.querySelector(".tour").classList.remove("waiting");
break; break;
case data.message === "notification": // TODO: Make work with appending so multiple notifications can be sent case data.message === "notification": // TODO: Make work with appending so multiple notifications can be sent

39
app/helpers/fetch-metadata.js
View file

@ -63,7 +63,7 @@ module.exports = exports = (data, socket) => {
body.description = dataDetails.description; body.description = dataDetails.description;
body.language = dataDetails.language; body.language = dataDetails.language;
body.license = dataDetails.license; body.license = dataDetails.license;
body.name = dataDetails.name.replace(/\s/g, "-") + randomString(10); // underscores are not allowed? body.name = dataDetails.name + randomString(10); // underscores are not allowed?
body.nsfw = dataDetails.nsfw; body.nsfw = dataDetails.nsfw;
body.title = dataDetails.title; body.title = dataDetails.title;
@ -110,15 +110,29 @@ module.exports = exports = (data, socket) => {
return; return;
} }
const renderedCode = prism.highlight(stringifyObject(publishResponse, { indent: " ", singleQuotes: false }), prism.languages.json, "json"); const renderedCode = prism.highlight(
stringifyObject(publishResponse, { indent: " ", singleQuotes: false }),
prism.languages.json,
"json"
);
let explorerNotice = "";
if (
publishResponse.result &&
publishResponse.result.claim_address
) explorerNotice = `
<p class="tour__description success">To see Proof of Work (lol) that your meme is on the LBRY blockchain, <a href="https://explorer.lbry.io/address/${publishResponse.result.claim_address}" rel="noopener noreferrer" target="_blank" title="Your meme, on our blockchain explorer">check it out</a> on our blockchain explorer! Please note that it may take a couple minutes for the transaction to be confirmed.</p><br/>
`;
return socket.send(JSON.stringify({ return socket.send(JSON.stringify({
"example": data.example, "example": data.example,
"html": raw(` "html": raw(`
<h3>Response</h3> <h3>Response</h3>
${explorerNotice}
<pre><code class="language-json">${renderedCode}</code></pre> <pre><code class="language-json">${renderedCode}</code></pre>
`), `),
"message": "updated html", "message": "show result",
"selector": `#example${data.example}-result` "selector": `#example${data.example}-result`
})); }));
}); });
@ -151,7 +165,7 @@ module.exports = exports = (data, socket) => {
<h3>Response</h3> <h3>Response</h3>
<pre><code class="language-text">Tipping creators not in the whitelist for this example is not allowed.</code></pre> <pre><code class="language-text">Tipping creators not in the whitelist for this example is not allowed.</code></pre>
`), `),
"message": "updated html", "message": "show result",
"selector": `#example${data.example}-result` "selector": `#example${data.example}-result`
})); }));
} }
@ -162,6 +176,8 @@ module.exports = exports = (data, socket) => {
body.claim_id = claimAddress; body.claim_id = claimAddress;
} }
return new Promise((resolve, reject) => { // eslint-disable-line return new Promise((resolve, reject) => { // eslint-disable-line
request({ request({
body: body, body: body,
@ -193,26 +209,31 @@ module.exports = exports = (data, socket) => {
return resolve(body.error); return resolve(body.error);
} }
/* let explorerNotice = "";
if ( if (
data.example === 3 && data.example === 3 &&
body.result && body.result &&
body.result.txid body.result.txid
) explorerNotice = ` ) explorerNotice = `
<p>If you want proof of the tip you just gave on behalf of LBRY, <a href="https://explorer.lbry.io/tx/${body.result.txid}" target="_blank" title="Your tip, on our blockchain explorer" rel="noopener noreferrer">check it out</a> on our blockchain explorer!</p> <p class="tour__description success">If you want proof of the tip you just gave on behalf of LBRY, <a href="https://explorer.lbry.io/tx/${body.result.txid}" rel="noopener noreferrer" target="_blank" title="Your tip, on our blockchain explorer">check it out</a> on our blockchain explorer! Please note that it may take a couple minutes for the transaction to be confirmed.</p><br/>
`; `;
*/
if (socket) { if (socket) {
const renderedCode = prism.highlight(stringifyObject(body, { indent: " ", singleQuotes: false }), prism.languages.json, "json"); const renderedCode = prism.highlight(
stringifyObject(body, { indent: " ", singleQuotes: false }),
prism.languages.json,
"json"
);
return socket.send(JSON.stringify({ return socket.send(JSON.stringify({
"example": data.example, "example": data.example,
"html": raw(` "html": raw(`
<h3>Response</h3> <h3>Response</h3>
${explorerNotice}
<pre><code class="language-json">${renderedCode}</code></pre> <pre><code class="language-json">${renderedCode}</code></pre>
`), `),
"message": "updated html", "message": "show result",
"selector": `#example${data.example}-result` "selector": `#example${data.example}-result`
})); }));
} }

4
app/helpers/github.js
View file

@ -45,7 +45,7 @@ if (typeof process.env.REDISCLOUD_URL !== "undefined") {
// P R O G R A M // P R O G R A M
function generateEvent(event) { function generateEvent(event) {
switch (event.type) { switch(event.type) {
case "CommitCommentEvent": case "CommitCommentEvent":
return ` return `
<strong><a <strong><a
@ -289,7 +289,7 @@ function generateGitHubFeed(displayGitHubFeed) {
} }
function generateUrl(type, event) { function generateUrl(type, event) {
switch (type) { switch(type) {
case "actor": case "actor":
return `https://github.com/${event.actor.display_login}`; return `https://github.com/${event.actor.display_login}`;

4
app/sass/pages/_tour.scss
View file

@ -479,4 +479,8 @@
text-transform: uppercase; text-transform: uppercase;
} }
} }
a {
font-weight: 700;
}
} }

19
app/sockets.js
View file

@ -143,9 +143,8 @@ function generateContent(exampleNumber, displayTrendingContent) {
const rawContentCollection = []; const rawContentCollection = [];
const renderedContentCollection = []; const renderedContentCollection = [];
for (const url of approvedUrls) { for (const url of approvedUrls)
rawContentCollection.push(fetchMetadata({ claim: url, method: "resolve", example: exampleNumber })); rawContentCollection.push(fetchMetadata({ claim: url, method: "resolve", example: exampleNumber }));
}
return Promise.all(rawContentCollection).then(collection => { return Promise.all(rawContentCollection).then(collection => {
for (const part of collection) { for (const part of collection) {
@ -215,9 +214,8 @@ function generateMemeCreator(socket) {
const renderedImages = []; const renderedImages = [];
for (const image of images) { for (const image of images)
renderedImages.push(`<img alt="${image.alt}" class="tour__content__meme__canvas__thumbnail" src="${image.src}"/>`); renderedImages.push(`<img alt="${image.alt}" class="tour__content__meme__canvas__thumbnail" src="${image.src}"/>`);
}
const memeCreator = html` const memeCreator = html`
<div class="tour__content__meme__canvas"> <div class="tour__content__meme__canvas">
@ -290,21 +288,10 @@ function generateMemeCreator(socket) {
<button data-action="upload image" class="__button-black" type="button">Submit</button> <button data-action="upload image" class="__button-black" type="button">Submit</button>
</fieldset> </fieldset>
</form> </form>
<script>
detectLanguageAndUpdate();
initCanvas();
document.getElementById("tour-example-description").innerHTML =
document.querySelector("[data-action='tour, example 2']").dataset.description;
setTimeout(() => {
document.querySelector(".tour__content__meme__canvas__thumbnail").click();
}, 100);
</script>
`; `;
return socket.send(JSON.stringify({ return socket.send(JSON.stringify({
"example": 2,
"html": memeCreator, "html": memeCreator,
"message": "updated html", "message": "updated html",
"selector": "#tour-loader" "selector": "#tour-loader"