d890ccbe25
Had to set example to 1 on line 172, otherwise it would not work locally. No idea how production works with that code. oops
458 lines
14 KiB
JavaScript
458 lines
14 KiB
JavaScript
"use strict";
|
|
|
|
|
|
|
|
// I M P O R T S
|
|
|
|
import got from "got";
|
|
import html from "choo/html";
|
|
|
|
// U T I L S
|
|
|
|
import fetchMetadata from "~helper/fetch-metadata";
|
|
import { generateGitHubFeed } from "~helper/github";
|
|
import messageSlack from "~helper/slack";
|
|
|
|
const githubAppId = process.env.GITHUB_APP_ID;
|
|
const githubAppSecret = process.env.GITHUB_APP_SECRET;
|
|
|
|
// const githubAppId = process.env.GITHUB_APP_ID_TEST;
|
|
// const githubAppSecret = process.env.GITHUB_APP_SECRET_TEST;
|
|
|
|
|
|
|
|
// P R O G R A M
|
|
|
|
export default (socket, action) => {
|
|
if (typeof socket !== "object" && typeof action !== "object")
|
|
return;
|
|
|
|
switch(true) {
|
|
case action.message === "auth me with github":
|
|
getGitHubUserToken(socket);
|
|
break;
|
|
|
|
case action.message === "verify github token":
|
|
verifyGitHubToken(action, socket);
|
|
break;
|
|
|
|
case action.message === "fetch metadata":
|
|
fetchMetadata(action, socket);
|
|
break;
|
|
|
|
case action.message === "landed on homepage":
|
|
generateGitHubFeed(result => {
|
|
send(socket, {
|
|
html: result,
|
|
message: "updated html",
|
|
selector: "#github-feed"
|
|
});
|
|
});
|
|
break;
|
|
|
|
case action.message === "landed on playground":
|
|
generateContent(1, result => {
|
|
send(socket, {
|
|
html: result,
|
|
message: "updated html",
|
|
selector: "#playground-loader"
|
|
});
|
|
});
|
|
break;
|
|
|
|
case action.message === "request for playground, example 1":
|
|
generateContent(1, result => {
|
|
send(socket, {
|
|
html: result,
|
|
message: "updated html",
|
|
selector: "#playground-loader"
|
|
});
|
|
});
|
|
break;
|
|
|
|
case action.message === "request for playground, example 2":
|
|
generateMemeCreator(socket);
|
|
break;
|
|
|
|
case action.message === "request for playground, example 3":
|
|
generateContent(3, result => {
|
|
send(socket, {
|
|
html: result,
|
|
message: "updated html",
|
|
selector: "#playground-loader"
|
|
});
|
|
});
|
|
break;
|
|
|
|
case action.message === "subscribe":
|
|
newsletterSubscribe(action, socket);
|
|
break;
|
|
|
|
default:
|
|
break;
|
|
}
|
|
};
|
|
|
|
|
|
|
|
// 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,
|
|
example: exampleNumber,
|
|
method: "resolve"
|
|
}));
|
|
|
|
Promise.all(rawContentCollection).then(collection => {
|
|
for (const part of collection) {
|
|
try {
|
|
renderedContentCollection.push(`
|
|
<section class="playground-content__trend">
|
|
<figure
|
|
class="media__thumb"
|
|
data-action="choose claim"
|
|
data-claim-id="${part.name}"
|
|
${part.value.thumbnail.url.length ? `style="background-image: url(${makeImageSourceSecure(part.value.thumbnail.url)})"` : ""}
|
|
></figure>
|
|
|
|
<div class="media__title">
|
|
${part.value.title}
|
|
</div>
|
|
|
|
<div class="media__subtitle">
|
|
${part.channel_name}
|
|
</div>
|
|
</section>
|
|
`);
|
|
} catch(err) {
|
|
return; // TODO: Return nice error message
|
|
}
|
|
}
|
|
|
|
renderedContentCollection.push(`
|
|
<script>
|
|
document.getElementById("playground-example-description").innerHTML = document.querySelector("[data-action='playground, example 1']").dataset.description
|
|
</script>
|
|
`);
|
|
|
|
displayTrendingContent(renderedContentCollection.join(""));
|
|
});
|
|
});
|
|
}
|
|
|
|
if (exampleNumber === 3) {
|
|
const approvedUrls = [
|
|
"LBRY#3db81c073f82fd1bb670c65f526faea3b8546720",
|
|
"correlation-can-imply-causation#173412f5b1b7aa63a752e8832406aafd9f1ecb4e",
|
|
"thanos-is-the-protagonist-how-infinity#2a7f5db2678177435b1dee6c9e38e035ead450b6",
|
|
"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: 1 }));
|
|
|
|
return Promise.all(rawContentCollection).then(collection => {
|
|
for (const part of collection) {
|
|
if (
|
|
part &&
|
|
part.value &&
|
|
part.value.thumbnail.url &&
|
|
part.channel_name
|
|
) {
|
|
renderedContentCollection.push(`
|
|
<section class="playground-content__trend">
|
|
<figure
|
|
class="media__thumb"
|
|
data-action="choose claim"
|
|
data-claim-id="${part.claim_id}"
|
|
data-name=${part.name}
|
|
style="background-image: url(${makeImageSourceSecure(part.value.thumbnail.url)})">
|
|
</figure>
|
|
|
|
<div class="media__title">
|
|
${part.value.title}
|
|
</div>
|
|
|
|
<div class="media__subtitle">
|
|
${part.channel_name}
|
|
</div>
|
|
</section>
|
|
`);
|
|
}
|
|
}
|
|
|
|
renderedContentCollection.push(`
|
|
<script>
|
|
document.getElementById("playground-example-description").innerHTML = document.querySelector("[data-action='playground, example 3']").dataset.description
|
|
</script>
|
|
`);
|
|
|
|
displayTrendingContent(renderedContentCollection.join(""));
|
|
});
|
|
}
|
|
}
|
|
|
|
function generateMemeCreator(socket) {
|
|
const images = [
|
|
{
|
|
alt: "Carl Sagan",
|
|
// src: "https://spee.ch/4f6b953e605a602434246743fd246d3e1fd4f5fd/carlsagan2.jpg"
|
|
src: "/assets/media/images/carlsagan2.jpg"
|
|
},
|
|
{
|
|
alt: "Doge",
|
|
// src: "https://spee.ch/2f90f2d91441a4d33d3d4eb82bdfc4c56ec742c7/doge-meme.jpg"
|
|
src: "/assets/media/images/doge-meme.jpg"
|
|
},
|
|
{
|
|
alt: "LBRY Logo With Green Background",
|
|
// src: "https://spee.ch/40ac6818bbac87a208722bf4467653341d460908/lbry-green.png"
|
|
src: "/assets/media/images/lbry-green.png"
|
|
}
|
|
];
|
|
|
|
const memePlaceholderData = {
|
|
bottomLine: {
|
|
placeholder: "Top line",
|
|
value: "that I made"
|
|
},
|
|
description: {
|
|
placeholder: "Description",
|
|
value: "Check out this image I published to LBRY via lbry.tech"
|
|
},
|
|
topLine: {
|
|
placeholder: "Top line",
|
|
value: "This is an example meme"
|
|
},
|
|
title: {
|
|
placeholder: "Title",
|
|
value: "Dank Meme Supreme da Cheese"
|
|
}
|
|
};
|
|
|
|
const renderedImages = [];
|
|
|
|
for (const image of images)
|
|
renderedImages.push(`<img alt="${image.alt}" class="playground-content__meme__canvas__thumbnail" src="${image.src}"/>`);
|
|
|
|
const memeCreator = html`
|
|
<div class="playground-content__meme__canvas">
|
|
<img alt="Base image for LBRY meme creator" id="base-image" style="height: 0; position: absolute; visibility: hidden;"/>
|
|
<canvas id="meme-canvas" height="600" width="800">Unfortunately, it looks like canvas is <strong>not supported</strong> in your browser</canvas>
|
|
|
|
${renderedImages}
|
|
</div>
|
|
|
|
<form class="playground-content__meme__editor">
|
|
<fieldset>
|
|
<legend>Image Text</legend>
|
|
|
|
<fieldset-section>
|
|
<label for="meme-top-line">Top line</label>
|
|
<input id="meme-top-line" name="meme-top-line" placeholder="${memePlaceholderData.topLine.placeholder}" spellcheck="false" type="text" value="${memePlaceholderData.topLine.value}" required/>
|
|
</fieldset-section>
|
|
|
|
<fieldset-section>
|
|
<label for="meme-bottom-line">Bottom line</label>
|
|
<input id="meme-bottom-line" name="meme-bottom-line" placeholder="${memePlaceholderData.bottomLine.placeholder}" spellcheck="false" type="text" value="${memePlaceholderData.bottomLine.value}" required/>
|
|
</fieldset-section>
|
|
</fieldset>
|
|
|
|
<fieldset>
|
|
<legend>Metadata</legend>
|
|
|
|
<fieldset-section>
|
|
<label for="meme-title">Title</label>
|
|
<input id="meme-title" name="meme-title" placeholder="${memePlaceholderData.title.placeholder}" spellcheck="false" type="text" value="${memePlaceholderData.title.value}" required/>
|
|
</fieldset-section>
|
|
|
|
<fieldset-section>
|
|
<label for="meme-description">Description</label>
|
|
<textarea id="meme-description" name="meme-description" placeholder="${memePlaceholderData.description.placeholder}" spellcheck="false" type="text" required>${memePlaceholderData.description.value}</textarea>
|
|
</fieldset-section>
|
|
|
|
<fieldset-section>
|
|
<label for="meme-language">Language</label>
|
|
<select id="meme-language" name="meme-language">
|
|
<option value="ar">Arabic</option>
|
|
<option value="zh">Chinese (Mandarin)</option>
|
|
<option value="en">English</option>
|
|
<option value="fr">French</option>
|
|
<option value="de">German</option>
|
|
<option value="it">Italian</option>
|
|
<option value="jp">Japanese</option>
|
|
<option value="ru">Russian</option>
|
|
<option value="es">Spanish</option>
|
|
<option value="">Not specified</option>
|
|
</select>
|
|
</fieldset-section>
|
|
|
|
<fieldset-section>
|
|
<label for="meme-license">License</label>
|
|
<select id="meme-license" name="meme-license" required>
|
|
<option value="Public Domain">Public Domain</option>
|
|
<option value="Creative Commons Attribution 4.0 International">Creative Commons Attribution 4.0 International</option>
|
|
<option value="Creative Commons Attribution-ShareAlike 4.0 International">Creative Commons Attribution-ShareAlike 4.0 International</option>
|
|
<option value="Creative Commons Attribution-NoDerivatives 4.0 International">Creative Commons Attribution-NoDerivatives 4.0 International</option>
|
|
<option value="Creative Commons Attribution-NonCommercial 4.0 International">Creative Commons Attribution-NonCommercial 4.0 International</option>
|
|
<option value="Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International">Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International</option>
|
|
<option value="Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International">Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International</option>
|
|
<option value="None">None</option>
|
|
</select>
|
|
</fieldset-section>
|
|
|
|
<fieldset-section>
|
|
<checkbox-element>
|
|
<input id="meme-nsfw-flag" name="nsfw" type="checkbox">
|
|
<label for="meme-nsfw-flag">NSFW</label>
|
|
<checkbox-toggle/>
|
|
</checkbox-element>
|
|
|
|
<button data-action="upload image" class="button" type="button">Submit</button>
|
|
</fieldset-section>
|
|
</fieldset>
|
|
</form>
|
|
`;
|
|
|
|
return send(socket, {
|
|
example: 2,
|
|
html: memeCreator,
|
|
message: "updated html",
|
|
selector: "#playground-loader"
|
|
});
|
|
}
|
|
|
|
function getGitHubUserToken(socket) {
|
|
send(socket, {
|
|
message: "redirect",
|
|
url: `https://github.com/login/oauth/authorize?client_id=${githubAppId}&scope=public_repo,user:email`
|
|
});
|
|
}
|
|
|
|
async function getTrendingContent() {
|
|
try {
|
|
const response = await got("https://api.lbry.com/file/list_trending");
|
|
return JSON.parse(response.body); // eslint-disable-line padding-line-between-statements
|
|
} catch(error) {
|
|
return error;
|
|
}
|
|
}
|
|
|
|
function makeImageSourceSecure(url) {
|
|
if (!url || !url.length)
|
|
return url;
|
|
|
|
const originalUrl = new URL(url);
|
|
|
|
if (originalUrl.protocol !== "https")
|
|
return `https://${originalUrl.host}${originalUrl.pathname}`;
|
|
|
|
return originalUrl.href;
|
|
}
|
|
|
|
async function newsletterSubscribe(data, socket) {
|
|
const email = data.email;
|
|
|
|
if (!validateEmail(email)) {
|
|
send(socket, {
|
|
class: "error",
|
|
html: "Your email address is invalid",
|
|
message: "updated html",
|
|
selector: "#emailMessage"
|
|
});
|
|
}
|
|
|
|
try {
|
|
await got.post(`https://api.lbry.com/list/subscribe?email=${encodeURIComponent(email)}&tag=developer`);
|
|
|
|
return send(socket, {
|
|
html: "Thank you! Please confirm subscription in your inbox.",
|
|
message: "updated html",
|
|
selector: "#emailMessage"
|
|
});
|
|
} catch(error) {
|
|
const response = JSON.parse(error.body);
|
|
|
|
if (!response.success) {
|
|
messageSlack({
|
|
message: `via ${email}: ${response.error}`,
|
|
title: "NEWSLETTER ERROR"
|
|
});
|
|
|
|
return send(socket, {
|
|
class: "error",
|
|
html: response.error,
|
|
message: "updated html",
|
|
selector: "#emailMessage"
|
|
});
|
|
}
|
|
|
|
messageSlack({
|
|
message: `via ${email} (strange error): ${response.error}`,
|
|
title: "NEWSLETTER ERROR"
|
|
});
|
|
|
|
return send(socket, {
|
|
class: "error",
|
|
html: "Something is terribly wrong",
|
|
message: "updated html",
|
|
selector: "#emailMessage"
|
|
});
|
|
}
|
|
}
|
|
|
|
export function send(transport, data) {
|
|
return transport.send(JSON.stringify(data));
|
|
}
|
|
|
|
function validateEmail(email) {
|
|
const emailRegex = /^(([^<>()[\].,;:\s@"]+(\.[^<>()[\].,;:\s@"]+)*)|(".+"))@(([^<>()[\].,;:\s@"]+\.)+[^<>()[\\.,;:\s@"]{2,})$/i;
|
|
return emailRegex.test(String(email)); // eslint-disable-line padding-line-between-statements
|
|
}
|
|
|
|
async function verifyGitHubToken(data, socket) {
|
|
const code = data.code;
|
|
|
|
try {
|
|
let result = await got.post(`https://github.com/login/oauth/access_token?client_id=${githubAppId}&client_secret=${githubAppSecret}&code=${code}`, { json: true });
|
|
|
|
const response = {
|
|
address: data.address,
|
|
code: result.body.access_token
|
|
};
|
|
|
|
return send(socket, {
|
|
data: response,
|
|
message: "github token status"
|
|
});
|
|
} catch(verificationError) {
|
|
console.log(verificationError.body); // eslint-disable-line no-console
|
|
|
|
return send(socket, {
|
|
details: verificationError.body,
|
|
message: "notification",
|
|
type: "error"
|
|
});
|
|
}
|
|
}
|