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

Closes #197

Browse source
This commit is contained in:
ポール ウェッブ 2018-12-04 17:12:39 -06:00
parent 6d0b2ac769
commit ea874d13cc
6 changed files with 167 additions and 155 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
app/components/client/playground-scripts.js
View file

@ -23,9 +23,9 @@ document.querySelector("body").addEventListener("click", event => {
if ( if (
event.target.classList && event.target.classList &&
event.target.classList[0] === "playground__content__meme__canvas__thumbnail" event.target.classList[0] === "playground-content__meme__canvas__thumbnail"
) { ) {
for (const thumbnail of document.querySelectorAll(".playground__content__meme__canvas__thumbnail")) for (const thumbnail of document.querySelectorAll(".playground-content__meme__canvas__thumbnail"))
thumbnail.classList.remove("selected"); thumbnail.classList.remove("selected");
event.target.classList.add("selected"); event.target.classList.add("selected");
@ -127,14 +127,14 @@ function initializePlayground() {
document.querySelector(".playground").classList.add("waiting"); document.querySelector(".playground").classList.add("waiting");
document.querySelector("#fetch-claim-uri").value = ""; document.querySelector("#fetch-claim-uri").value = "";
document.querySelector("#fetch-claim-uri").focus(); document.querySelector("#fetch-claim-uri").focus();
document.querySelector(".playground__navigation__example:nth-child(1)").classList.add("active"); document.querySelector(".playground-navigation__example:nth-child(1)").classList.add("active");
send(JSON.stringify({ send(JSON.stringify({
message: "landed on playground" message: "landed on playground"
})); }));
setTimeout(() => { setTimeout(() => {
document.querySelector(".playground__navigation__example:nth-child(1)").click(); document.querySelector(".playground-navigation__example:nth-child(1)").click();
}, 300); }, 300);
} }
@ -237,15 +237,15 @@ const handleExamples = debounce(event => {
let exampleNumber; let exampleNumber;
const data = event.dataset; const data = event.dataset;
if (!parseInt(document.querySelector(".playground__navigation__example.active").dataset.example)) return; if (!parseInt(document.querySelector(".playground-navigation__example.active").dataset.example)) return;
exampleNumber = parseInt(document.querySelector(".playground__navigation__example.active").dataset.example); exampleNumber = parseInt(document.querySelector(".playground-navigation__example.active").dataset.example);
switch(data.action) { switch(data.action) {
case "choose claim": case "choose claim":
fetchMetadata(exampleNumber, data.claimId); fetchMetadata(exampleNumber, data.claimId);
if (document.querySelector(".playground__navigation__example:nth-child(3)").classList.contains("active")) if (document.querySelector(".playground-navigation__example:nth-child(3)").classList.contains("active"))
document.getElementById("fetch-claim-uri").value = event.alt + "#" + event.dataset.claimId; document.getElementById("fetch-claim-uri").value = event.dataset.name + "#" + event.dataset.claimId;
break; break;
@ -255,9 +255,9 @@ const handleExamples = debounce(event => {
break; break;
case "playground, example 1": case "playground, example 1":
if (document.getElementById("playground-loader").classList.contains("playground__content__meme")) { if (document.getElementById("playground-loader").classList.contains("playground-content__meme")) {
document.getElementById("playground-loader").classList.remove("playground__content__meme"); document.getElementById("playground-loader").classList.remove("playground-content__meme");
document.getElementById("playground-loader").classList.add("playground__content__trends"); document.getElementById("playground-loader").classList.add("playground-content__trends");
} }
document.getElementById("fetch-claim-uri").value = ""; // reset URL bar document.getElementById("fetch-claim-uri").value = ""; // reset URL bar
@ -266,10 +266,10 @@ const handleExamples = debounce(event => {
if (document.getElementById("playground-url").style.display === "none") if (document.getElementById("playground-url").style.display === "none")
document.getElementById("playground-url").removeAttribute("style"); document.getElementById("playground-url").removeAttribute("style");
for (const example of document.querySelectorAll(".playground__navigation__example")) for (const example of document.querySelectorAll(".playground-navigation__example"))
example.classList.remove("active"); example.classList.remove("active");
document.querySelector(".playground__navigation__example:nth-child(1)").classList.add("active"); document.querySelector(".playground-navigation__example:nth-child(1)").classList.add("active");
document.getElementById("playground-loader").innerHTML = ""; document.getElementById("playground-loader").innerHTML = "";
document.getElementById("playground-results").innerHTML = ""; document.getElementById("playground-results").innerHTML = "";
@ -284,18 +284,18 @@ const handleExamples = debounce(event => {
break; break;
case "playground, example 2": case "playground, example 2":
if (document.getElementById("playground-loader").classList.contains("playground__content__trends")) { if (document.getElementById("playground-loader").classList.contains("playground-content__trends")) {
document.getElementById("playground-loader").classList.remove("playground__content__trends"); document.getElementById("playground-loader").classList.remove("playground-content__trends");
document.getElementById("playground-loader").classList.add("playground__content__meme"); document.getElementById("playground-loader").classList.add("playground-content__meme");
} }
document.getElementById("fetch-claim-uri").value = ""; // reset URL bar document.getElementById("fetch-claim-uri").value = ""; // reset URL bar
document.getElementById("playground-url").style.display = "none"; document.getElementById("playground-url").style.display = "none";
for (const example of document.querySelectorAll(".playground__navigation__example")) for (const example of document.querySelectorAll(".playground-navigation__example"))
example.classList.remove("active"); example.classList.remove("active");
document.querySelector(".playground__navigation__example:nth-child(2)").classList.add("active"); document.querySelector(".playground-navigation__example:nth-child(2)").classList.add("active");
document.getElementById("playground-loader").innerHTML = ""; document.getElementById("playground-loader").innerHTML = "";
document.getElementById("playground-results").innerHTML = ""; document.getElementById("playground-results").innerHTML = "";
@ -310,9 +310,9 @@ const handleExamples = debounce(event => {
break; break;
case "playground, example 3": case "playground, example 3":
if (document.getElementById("playground-loader").classList.contains("playground__content__meme")) { if (document.getElementById("playground-loader").classList.contains("playground-content__meme")) {
document.getElementById("playground-loader").classList.remove("playground__content__meme"); document.getElementById("playground-loader").classList.remove("playground-content__meme");
document.getElementById("playground-loader").classList.add("playground__content__trends"); document.getElementById("playground-loader").classList.add("playground-content__trends");
} }
document.getElementById("fetch-claim-uri").value = ""; // reset URL bar document.getElementById("fetch-claim-uri").value = ""; // reset URL bar
@ -321,10 +321,10 @@ const handleExamples = debounce(event => {
if (document.getElementById("playground-url").style.display === "none") if (document.getElementById("playground-url").style.display === "none")
document.getElementById("playground-url").removeAttribute("style"); document.getElementById("playground-url").removeAttribute("style");
for (const example of document.querySelectorAll(".playground__navigation__example")) for (const example of document.querySelectorAll(".playground-navigation__example"))
example.classList.remove("active"); example.classList.remove("active");
document.querySelector(".playground__navigation__example:nth-child(3)").classList.add("active"); document.querySelector(".playground-navigation__example:nth-child(3)").classList.add("active");
document.getElementById("playground-loader").innerHTML = ""; document.getElementById("playground-loader").innerHTML = "";
document.getElementById("playground-results").innerHTML = ""; document.getElementById("playground-results").innerHTML = "";
@ -358,7 +358,8 @@ function initCanvas() { // eslint-disable-line no-unused-vars
ctx.drawImage(img, 0, 0, canvasWidth, canvasHeight, 0, 0, canvasWidth, canvasHeight); ctx.drawImage(img, 0, 0, canvasWidth, canvasHeight, 0, 0, canvasWidth, canvasHeight);
ctx.fillStyle = "white"; ctx.fillStyle = "white";
ctx.font = "bold 48px 'Inter UI'"; ctx.font = "bold 48px 'Inter UI', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'";
// ctx.font = "bold 48px Arial";
ctx.lineJoin = "round"; ctx.lineJoin = "round";
ctx.lineWidth = 4; ctx.lineWidth = 4;
ctx.strokeStyle = "black"; ctx.strokeStyle = "black";

14
app/components/playground.js
View file

@ -14,11 +14,11 @@ import raw from "choo/html/raw";
export default () => dedent` export default () => dedent`
<section class="playground"> <section class="playground">
<ul class="playground__navigation"> <ul class="playground-navigation">
${raw(navigation())} ${raw(navigation())}
</ul> </ul>
<p class="playground__description" id="playground-example-description"></p> <p class="playground__description" id="playground-example-description"></p>
<section class="playground__content">${raw(example1())}</section> <section class="playground-content">${raw(example1())}</section>
</section> </section>
`; `;
@ -28,12 +28,12 @@ export default () => dedent`
function example1() { function example1() {
return html` return html`
<div class="playground__content__urlbar" id="playground-url"> <div class="playground-content__urlbar" id="playground-url">
<span>lbry://</span><input id="fetch-claim-uri" placeholder="&thinsp;Enter a LBRY address or select a video below" type="text"/> <span>lbry://</span><input id="fetch-claim-uri" placeholder="&thinsp;Enter a LBRY address or select a video below" type="text"/>
<button class="button" data-action="execute claim" type="button">Resolve</button> <button class="button" data-action="execute claim" type="button">Resolve</button>
</div> </div>
<div class="playground__content__trends" id="playground-loader"></div> <div class="playground-content__trends" id="playground-loader"></div>
<div id="playground-results"></div> <div id="playground-results"></div>
<script> <script>
@ -45,7 +45,7 @@ function example1() {
function navigation() { // TODO: Save tutorial position to localStorage function navigation() { // TODO: Save tutorial position to localStorage
return dedent` return dedent`
<li <li
class="playground__navigation__example" class="playground-navigation__example"
data-action="playground, example 1" data-action="playground, 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-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-example="1"
@ -56,7 +56,7 @@ function navigation() { // TODO: Save tutorial position to localStorage
</li> </li>
<li <li
class="playground__navigation__example" class="playground-navigation__example"
data-action="playground, example 2" data-action="playground, 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-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-example="2"
@ -67,7 +67,7 @@ function navigation() { // TODO: Save tutorial position to localStorage
</li> </li>
<li <li
class="playground__navigation__example" class="playground-navigation__example"
data-action="playground, example 3" data-action="playground, 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-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-example="3"

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

@ -64,7 +64,7 @@ function initializeWebSocketConnection() {
initCanvas(); // eslint-disable-line initCanvas(); // eslint-disable-line
setTimeout(() => { setTimeout(() => {
document.querySelector(".playground__content__meme__canvas__thumbnail").click(); document.querySelector(".playground-content__meme__canvas__thumbnail").click();
}, 500); }, 500);
} }
@ -72,7 +72,7 @@ function initializeWebSocketConnection() {
document.getElementById("playground-example-description").classList.remove("success"); document.getElementById("playground-example-description").classList.remove("success");
document.getElementById("playground-example-description").innerHTML = document.getElementById("playground-example-description").innerHTML =
document.querySelector(".playground__navigation__example.active").dataset.description; document.querySelector(".playground-navigation__example.active").dataset.description;
} }
if (document.getElementById("temp-loader")) if (document.getElementById("temp-loader"))

199
app/sass/pages/_playground.scss
View file

@ -9,7 +9,6 @@
.playground { .playground {
top: 1rem; top: 1rem;
border-top: 1px solid rgba($lbry-gray-1, 0.3); border-top: 1px solid rgba($lbry-gray-1, 0.3);
position: relative; position: relative;
@ -32,18 +31,17 @@
/*! /*!
* Playground | Navigation * Playground | Navigation
* *
* @class .playground__navigation * @class .playground-navigation
* *
* @class .playground__navigation__example * @class .playground-navigation__example
* @selector {::before} * @selector {::before}
* @selector {:last-of-type} * @selector {:last-of-type}
* @state {.active} * @state {.active}
* @state {:hover} * @state {:hover}
**/ **/
.playground__navigation { .playground-navigation {
width: 100%; width: 100%;
list-style-type: none; list-style-type: none;
padding-top: 1.5rem; padding-top: 1.5rem;
padding-bottom: 1rem; padding-bottom: 1rem;
@ -51,107 +49,107 @@
&::after { &::after {
@include clearfix; @include clearfix;
} }
}
.playground__navigation__example { &__example {
width: 33.333333%; width: 33.333333%;
cursor: pointer;
cursor: pointer; float: left;
float: left; position: relative;
position: relative;
text-align: center;
&::before {
width: 100%; height: 2.5rem;
top: -0.6rem; left: 0;
content: "example " attr(data-example);
font-size: 0.6rem;
font-style: italic;
line-height: 1.1;
position: absolute;
text-align: center; text-align: center;
text-transform: uppercase;
}
&:not(.active) { &::before {
width: 100%; height: 2.5rem;
top: -0.6rem; left: 0;
content: "example " attr(data-example);
font-size: 0.6rem;
font-style: italic;
line-height: 1.1;
position: absolute;
text-align: center;
text-transform: uppercase;
}
&:not(.active) {
&::before,
button,
span {
color: $lbry-gray-1;
}
}
&.active,
&:hover {
button {
color: $lbry-teal-3;
}
&::before,
span {
color: $lbry-black;
}
}
&.completed {
&::after {
width: 100%; height: 100%;
top: 0; left: 0;
background-color: rgba($lbry-white, 0.7);
content: "✓";
font-size: 3rem;
line-height: 0.85;
position: absolute;
z-index: 10;
}
}
&::before, &::before,
button, button,
span { span {
color: $lbry-gray-1; transition: color 0.2s;
} }
}
&.active,
&:hover {
button { button {
color: $lbry-teal-3; background-color: transparent;
font-size: 1.25rem;
font-weight: 600;
} }
&::before,
span { span {
color: $lbry-black; display: block;
font-size: 1rem;
} }
} }
&.completed {
&::after {
width: 100%; height: 100%;
top: 0; left: 0;
background-color: rgba($lbry-white, 0.7);
content: "✓";
font-size: 3rem;
line-height: 0.85;
position: absolute;
z-index: 10;
}
}
&::before,
button,
span {
transition: color 0.2s;
}
button {
background-color: transparent;
font-size: 1.25rem;
font-weight: 600;
}
span {
display: block;
font-size: 1rem;
}
} }
/*! /*!
* Playground | Content * Playground | Content
* *
* @class .playground__content * @class .playground-content
* *
* @class .playground__content__meme * @class .playground-content__meme
* @selector {::after} * @selector {::after}
* *
* @class .playground__content__meme__canvas * @class .playground-content__meme__canvas
* *
* @class .playground__content__meme__canvas__thumbnail * @class .playground-content__meme__canvas__thumbnail
* @selector {:last-of-type} * @selector {:last-of-type}
* @state {.selected} * @state {.selected}
* *
* @class .playground__content__meme__editor * @class .playground-content__meme__editor
* *
* @class .playground__content__trends * @class .playground-content__trends
* @selector {::after} * @selector {::after}
* @state {:empty} * @state {:empty}
* *
* @class .playground__content__trend * @class .playground-content__trend
* @class .playground__content__urlbar * @class .playground-content__urlbar
**/ **/
.playground__content { .playground-content {
// border-top: 1px solid rgba($lbry-black, 0.05);
overflow-y: visible; overflow-y: visible;
padding-top: 1rem; padding-top: 1rem;
padding-bottom: 1rem; padding-bottom: 1rem;
@ -174,7 +172,7 @@
} }
} }
.playground__content__meme { .playground-content__meme {
overflow-y: auto; overflow-y: auto;
position: relative; position: relative;
@ -183,7 +181,7 @@
} }
} }
.playground__content__meme__canvas { .playground-content__meme__canvas {
width: 48%; width: 48%;
float: left; float: left;
@ -198,7 +196,7 @@
} }
} }
.playground__content__meme__canvas__thumbnail { // sass-lint:disable-line bem-depth // TODO: FIX THIS .playground-content__meme__canvas__thumbnail { // sass-lint:disable-line bem-depth // TODO: FIX THIS
width: 5rem; height: 5rem; width: 5rem; height: 5rem;
border-style: solid; border-style: solid;
@ -221,7 +219,7 @@
} }
} }
.playground__content__meme__editor { .playground-content__meme__editor {
width: 50%; min-height: 50vh; width: 50%; min-height: 50vh;
float: right; float: right;
@ -344,12 +342,12 @@
} }
} }
.playground__content__trends { .playground-content__trends {
min-width: 0; min-height: 0; @extend .media-grid;
@include create-grid;
display: grid; min-width: 0; min-height: 0;
grid-gap: 1rem; grid-gap: var(--spacing-m);
grid-template: repeat(1, 1fr) / repeat(3, 1fr);
position: relative; position: relative;
&:empty { &:empty {
@ -361,33 +359,28 @@
} }
} }
.playground__content__trend { .playground-content__trend {
img { @extend .media;
width: 100%; height: 213px;
cursor: pointer; .media__subtitle {
display: block; font-size: 0.8rem;
margin-bottom: 0.5rem;
object-fit: cover;
object-position: center;
position: relative;
} }
figcaption { .media__thumb {
cursor: pointer; background-position: center;
font-size: 1rem; background-repeat: no-repeat;
line-height: 1.33; background-size: cover;
margin-bottom: 0.5rem;
}
span { .media__title {
color: rgba($lbry-black, 0.3); @include line-clamp(2.4rem, 2);
display: block; font-size: 1rem;
font-size: 0.8rem; margin-bottom: 0.25rem;
letter-spacing: 0.025rem;
}
} }
} }
.playground__content__urlbar { .playground-content__urlbar {
border: 1px solid $lbry-gray-1; border: 1px solid $lbry-gray-1;
display: flex; display: flex;
margin-bottom: 1rem; margin-bottom: 1rem;

48
app/sockets.js
View file

@ -99,14 +99,22 @@ function generateContent(exampleNumber, displayTrendingContent) {
for (const part of collection) { for (const part of collection) {
try { try {
renderedContentCollection.push(` renderedContentCollection.push(`
<figure class="playground__content__trend"> <section class="playground-content__trend">
<img alt="${part.name}" data-action="choose claim" data-claim-id="${part.name}" src="${makeImageSourceSecure(part.value.stream.metadata.thumbnail)}"/> <figure
class="media__thumb"
data-action="choose claim"
data-claim-id="${part.name}"
style="background-image: url(${makeImageSourceSecure(part.value.stream.metadata.thumbnail)})">
</figure>
<figcaption data-action="choose claim" data-claim-id="${part.name}"> <div class="media__title">
${part.value.stream.metadata.title} ${part.value.stream.metadata.title}
<span>${part.channel_name}</span> </div>
</figcaption>
</figure> <div class="media__subtitle">
${part.channel_name}
</div>
</section>
`); `);
} catch (err) { } catch (err) {
return; // TODO: Return nice error message return; // TODO: Return nice error message
@ -153,13 +161,23 @@ function generateContent(exampleNumber, displayTrendingContent) {
part.channel_name part.channel_name
) { ) {
renderedContentCollection.push(` renderedContentCollection.push(`
<figure class="playground__content__trend"> <section class="playground-content__trend">
<img alt="${part.name}" data-action="choose claim" data-claim-id="${part.claim_id}" src="${makeImageSourceSecure(part.value.stream.metadata.thumbnail)}"/> <figure
<figcaption data-action="choose claim" data-claim-id="${part.claim_id}"> class="media__thumb"
data-action="choose claim"
data-claim-id="${part.claim_id}"
data-name=${part.name}
style="background-image: url(${makeImageSourceSecure(part.value.stream.metadata.thumbnail)})">
</figure>
<div class="media__title">
${part.value.stream.metadata.title} ${part.value.stream.metadata.title}
<span>${part.channel_name}</span> </div>
</figcaption>
</figure> <div class="media__subtitle">
${part.channel_name}
</div>
</section>
`); `);
} }
} }
@ -216,17 +234,17 @@ function generateMemeCreator(socket) {
const renderedImages = []; const renderedImages = [];
for (const image of images) for (const image of images)
renderedImages.push(`<img alt="${image.alt}" class="playground__content__meme__canvas__thumbnail" src="${image.src}"/>`); renderedImages.push(`<img alt="${image.alt}" class="playground-content__meme__canvas__thumbnail" src="${image.src}"/>`);
const memeCreator = html` const memeCreator = html`
<div class="playground__content__meme__canvas"> <div class="playground-content__meme__canvas">
<img alt="Base image for LBRY meme creator" id="base-image" style="height: 0; position: absolute; visibility: hidden;"/> <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> <canvas id="meme-canvas" height="600" width="800">Unfortunately, it looks like canvas is <strong>not supported</strong> in your browser</canvas>
${renderedImages} ${renderedImages}
</div> </div>
<form class="playground__content__meme__editor"> <form class="playground-content__meme__editor">
<h2>Image Text</h2> <h2>Image Text</h2>
<fieldset> <fieldset>

8
package.json
View file

@ -14,7 +14,7 @@
"choo-websocket": "^2.0.0", "choo-websocket": "^2.0.0",
"colorette": "^1.0.7", "colorette": "^1.0.7",
"cors": "^2.8.5", "cors": "^2.8.5",
"cron": "^1.5.0", "cron": "^1.5.1",
"date-format-lite": "^17.7.0", "date-format-lite": "^17.7.0",
"decamelize": "^2.0.0", "decamelize": "^2.0.0",
"dedent": "^0.7.0", "dedent": "^0.7.0",
@ -23,7 +23,7 @@
"fastify-compress": "^0.7.1", "fastify-compress": "^0.7.1",
"fastify-helmet": "^3.0.0", "fastify-helmet": "^3.0.0",
"fastify-plugin": "^1.3.0", "fastify-plugin": "^1.3.0",
"fastify-static": "^0.14.0", "fastify-static": "^1.0.0",
"fastify-ws": "^1.0.0", "fastify-ws": "^1.0.0",
"front-matter": "^3.0.1", "front-matter": "^3.0.1",
"fs-exists-sync": "^0.1.0", "fs-exists-sync": "^0.1.0",
@ -45,7 +45,7 @@
"@babel/cli": "^7.2.0", "@babel/cli": "^7.2.0",
"@babel/core": "^7.2.0", "@babel/core": "^7.2.0",
"@babel/plugin-external-helpers": "7.2.0", "@babel/plugin-external-helpers": "7.2.0",
"@babel/plugin-proposal-class-properties": "7.2.0", "@babel/plugin-proposal-class-properties": "7.2.1",
"@babel/plugin-proposal-decorators": "7.2.0", "@babel/plugin-proposal-decorators": "7.2.0",
"@babel/plugin-proposal-export-namespace-from": "7.2.0", "@babel/plugin-proposal-export-namespace-from": "7.2.0",
"@babel/plugin-proposal-function-sent": "7.2.0", "@babel/plugin-proposal-function-sent": "7.2.0",
@ -59,7 +59,7 @@
"@inc/eslint-config": "^1.1.2", "@inc/eslint-config": "^1.1.2",
"@inc/sasslint-config": "^1.1.2", "@inc/sasslint-config": "^1.1.2",
"@lbry/color": "^1.0.5", "@lbry/color": "^1.0.5",
"@lbry/components": "^1.4.2", "@lbry/components": "^1.4.4",
"eslint": "^5.9.0", "eslint": "^5.9.0",
"husky": "^1.2.0", "husky": "^1.2.0",
"nodemon": "^1.18.7", "nodemon": "^1.18.7",