Closes #197
This commit is contained in:
ポール ウェッブ
parent
6d0b2ac769
commit
ea874d13cc
6 changed files with 167 additions and 155 deletions
|
|
@ -23,9 +23,9 @@ document.querySelector("body").addEventListener("click", event => {
|
|||
|
||||
if (
|
||||
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");
|
||||
|
||||
event.target.classList.add("selected");
|
||||
|
|
@ -127,14 +127,14 @@ function initializePlayground() {
|
|||
document.querySelector(".playground").classList.add("waiting");
|
||||
document.querySelector("#fetch-claim-uri").value = "";
|
||||
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({
|
||||
message: "landed on playground"
|
||||
}));
|
||||
|
||||
setTimeout(() => {
|
||||
document.querySelector(".playground__navigation__example:nth-child(1)").click();
|
||||
document.querySelector(".playground-navigation__example:nth-child(1)").click();
|
||||
}, 300);
|
||||
}
|
||||
|
||||
|
|
@ -237,15 +237,15 @@ const handleExamples = debounce(event => {
|
|||
let exampleNumber;
|
||||
const data = event.dataset;
|
||||
|
||||
if (!parseInt(document.querySelector(".playground__navigation__example.active").dataset.example)) return;
|
||||
exampleNumber = parseInt(document.querySelector(".playground__navigation__example.active").dataset.example);
|
||||
if (!parseInt(document.querySelector(".playground-navigation__example.active").dataset.example)) return;
|
||||
exampleNumber = parseInt(document.querySelector(".playground-navigation__example.active").dataset.example);
|
||||
|
||||
switch(data.action) {
|
||||
case "choose claim":
|
||||
fetchMetadata(exampleNumber, data.claimId);
|
||||
|
||||
if (document.querySelector(".playground__navigation__example:nth-child(3)").classList.contains("active"))
|
||||
document.getElementById("fetch-claim-uri").value = event.alt + "#" + event.dataset.claimId;
|
||||
if (document.querySelector(".playground-navigation__example:nth-child(3)").classList.contains("active"))
|
||||
document.getElementById("fetch-claim-uri").value = event.dataset.name + "#" + event.dataset.claimId;
|
||||
|
||||
break;
|
||||
|
||||
|
|
@ -255,9 +255,9 @@ const handleExamples = debounce(event => {
|
|||
break;
|
||||
|
||||
case "playground, example 1":
|
||||
if (document.getElementById("playground-loader").classList.contains("playground__content__meme")) {
|
||||
document.getElementById("playground-loader").classList.remove("playground__content__meme");
|
||||
document.getElementById("playground-loader").classList.add("playground__content__trends");
|
||||
if (document.getElementById("playground-loader").classList.contains("playground-content__meme")) {
|
||||
document.getElementById("playground-loader").classList.remove("playground-content__meme");
|
||||
document.getElementById("playground-loader").classList.add("playground-content__trends");
|
||||
}
|
||||
|
||||
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")
|
||||
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");
|
||||
|
||||
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-results").innerHTML = "";
|
||||
|
|
@ -284,18 +284,18 @@ const handleExamples = debounce(event => {
|
|||
break;
|
||||
|
||||
case "playground, example 2":
|
||||
if (document.getElementById("playground-loader").classList.contains("playground__content__trends")) {
|
||||
document.getElementById("playground-loader").classList.remove("playground__content__trends");
|
||||
document.getElementById("playground-loader").classList.add("playground__content__meme");
|
||||
if (document.getElementById("playground-loader").classList.contains("playground-content__trends")) {
|
||||
document.getElementById("playground-loader").classList.remove("playground-content__trends");
|
||||
document.getElementById("playground-loader").classList.add("playground-content__meme");
|
||||
}
|
||||
|
||||
document.getElementById("fetch-claim-uri").value = ""; // reset URL bar
|
||||
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");
|
||||
|
||||
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-results").innerHTML = "";
|
||||
|
|
@ -310,9 +310,9 @@ const handleExamples = debounce(event => {
|
|||
break;
|
||||
|
||||
case "playground, example 3":
|
||||
if (document.getElementById("playground-loader").classList.contains("playground__content__meme")) {
|
||||
document.getElementById("playground-loader").classList.remove("playground__content__meme");
|
||||
document.getElementById("playground-loader").classList.add("playground__content__trends");
|
||||
if (document.getElementById("playground-loader").classList.contains("playground-content__meme")) {
|
||||
document.getElementById("playground-loader").classList.remove("playground-content__meme");
|
||||
document.getElementById("playground-loader").classList.add("playground-content__trends");
|
||||
}
|
||||
|
||||
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")
|
||||
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");
|
||||
|
||||
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-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.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.lineWidth = 4;
|
||||
ctx.strokeStyle = "black";
|
||||
|
|
|
|||
|
|
@ -14,11 +14,11 @@ import raw from "choo/html/raw";
|
|||
|
||||
export default () => dedent`
|
||||
<section class="playground">
|
||||
<ul class="playground__navigation">
|
||||
<ul class="playground-navigation">
|
||||
${raw(navigation())}
|
||||
</ul>
|
||||
<p class="playground__description" id="playground-example-description"></p>
|
||||
<section class="playground__content">${raw(example1())}</section>
|
||||
<section class="playground-content">${raw(example1())}</section>
|
||||
</section>
|
||||
`;
|
||||
|
||||
|
|
@ -28,12 +28,12 @@ export default () => dedent`
|
|||
|
||||
function example1() {
|
||||
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=" Enter a LBRY address or select a video below" type="text"/>
|
||||
<button class="button" data-action="execute claim" type="button">Resolve</button>
|
||||
</div>
|
||||
|
||||
<div class="playground__content__trends" id="playground-loader"></div>
|
||||
<div class="playground-content__trends" id="playground-loader"></div>
|
||||
<div id="playground-results"></div>
|
||||
|
||||
<script>
|
||||
|
|
@ -45,7 +45,7 @@ function example1() {
|
|||
function navigation() { // TODO: Save tutorial position to localStorage
|
||||
return dedent`
|
||||
<li
|
||||
class="playground__navigation__example"
|
||||
class="playground-navigation__example"
|
||||
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-example="1"
|
||||
|
|
@ -56,7 +56,7 @@ function navigation() { // TODO: Save tutorial position to localStorage
|
|||
</li>
|
||||
|
||||
<li
|
||||
class="playground__navigation__example"
|
||||
class="playground-navigation__example"
|
||||
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-example="2"
|
||||
|
|
@ -67,7 +67,7 @@ function navigation() { // TODO: Save tutorial position to localStorage
|
|||
</li>
|
||||
|
||||
<li
|
||||
class="playground__navigation__example"
|
||||
class="playground-navigation__example"
|
||||
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-example="3"
|
||||
|
|
|
|||
4
app/dist/scripts/sockets.js
vendored
4
app/dist/scripts/sockets.js
vendored
|
|
@ -64,7 +64,7 @@ function initializeWebSocketConnection() {
|
|||
initCanvas(); // eslint-disable-line
|
||||
|
||||
setTimeout(() => {
|
||||
document.querySelector(".playground__content__meme__canvas__thumbnail").click();
|
||||
document.querySelector(".playground-content__meme__canvas__thumbnail").click();
|
||||
}, 500);
|
||||
}
|
||||
|
||||
|
|
@ -72,7 +72,7 @@ function initializeWebSocketConnection() {
|
|||
document.getElementById("playground-example-description").classList.remove("success");
|
||||
|
||||
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"))
|
||||
|
|
|
|||
|
|
@ -9,7 +9,6 @@
|
|||
|
||||
.playground {
|
||||
top: 1rem;
|
||||
|
||||
border-top: 1px solid rgba($lbry-gray-1, 0.3);
|
||||
position: relative;
|
||||
|
||||
|
|
@ -32,18 +31,17 @@
|
|||
/*!
|
||||
* Playground | Navigation
|
||||
*
|
||||
* @class .playground__navigation
|
||||
* @class .playground-navigation
|
||||
*
|
||||
* @class .playground__navigation__example
|
||||
* @class .playground-navigation__example
|
||||
* @selector {::before}
|
||||
* @selector {:last-of-type}
|
||||
* @state {.active}
|
||||
* @state {:hover}
|
||||
**/
|
||||
|
||||
.playground__navigation {
|
||||
.playground-navigation {
|
||||
width: 100%;
|
||||
|
||||
list-style-type: none;
|
||||
padding-top: 1.5rem;
|
||||
padding-bottom: 1rem;
|
||||
|
|
@ -51,11 +49,9 @@
|
|||
&::after {
|
||||
@include clearfix;
|
||||
}
|
||||
}
|
||||
|
||||
.playground__navigation__example {
|
||||
&__example {
|
||||
width: 33.333333%;
|
||||
|
||||
cursor: pointer;
|
||||
float: left;
|
||||
position: relative;
|
||||
|
|
@ -125,33 +121,35 @@
|
|||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*!
|
||||
* Playground | Content
|
||||
*
|
||||
* @class .playground__content
|
||||
* @class .playground-content
|
||||
*
|
||||
* @class .playground__content__meme
|
||||
* @class .playground-content__meme
|
||||
* @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}
|
||||
* @state {.selected}
|
||||
*
|
||||
* @class .playground__content__meme__editor
|
||||
* @class .playground-content__meme__editor
|
||||
*
|
||||
* @class .playground__content__trends
|
||||
* @class .playground-content__trends
|
||||
* @selector {::after}
|
||||
* @state {:empty}
|
||||
*
|
||||
* @class .playground__content__trend
|
||||
* @class .playground__content__urlbar
|
||||
* @class .playground-content__trend
|
||||
* @class .playground-content__urlbar
|
||||
**/
|
||||
|
||||
.playground__content {
|
||||
// border-top: 1px solid rgba($lbry-black, 0.05);
|
||||
.playground-content {
|
||||
overflow-y: visible;
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
|
|
@ -174,7 +172,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.playground__content__meme {
|
||||
.playground-content__meme {
|
||||
overflow-y: auto;
|
||||
position: relative;
|
||||
|
||||
|
|
@ -183,7 +181,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.playground__content__meme__canvas {
|
||||
.playground-content__meme__canvas {
|
||||
width: 48%;
|
||||
|
||||
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;
|
||||
|
||||
border-style: solid;
|
||||
|
|
@ -221,7 +219,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.playground__content__meme__editor {
|
||||
.playground-content__meme__editor {
|
||||
width: 50%; min-height: 50vh;
|
||||
float: right;
|
||||
|
||||
|
|
@ -344,12 +342,12 @@
|
|||
}
|
||||
}
|
||||
|
||||
.playground__content__trends {
|
||||
min-width: 0; min-height: 0;
|
||||
.playground-content__trends {
|
||||
@extend .media-grid;
|
||||
@include create-grid;
|
||||
|
||||
display: grid;
|
||||
grid-gap: 1rem;
|
||||
grid-template: repeat(1, 1fr) / repeat(3, 1fr);
|
||||
min-width: 0; min-height: 0;
|
||||
grid-gap: var(--spacing-m);
|
||||
position: relative;
|
||||
|
||||
&:empty {
|
||||
|
|
@ -361,33 +359,28 @@
|
|||
}
|
||||
}
|
||||
|
||||
.playground__content__trend {
|
||||
img {
|
||||
width: 100%; height: 213px;
|
||||
.playground-content__trend {
|
||||
@extend .media;
|
||||
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
margin-bottom: 0.5rem;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
figcaption {
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
line-height: 1.33;
|
||||
|
||||
span {
|
||||
color: rgba($lbry-black, 0.3);
|
||||
display: block;
|
||||
.media__subtitle {
|
||||
font-size: 0.8rem;
|
||||
letter-spacing: 0.025rem;
|
||||
}
|
||||
|
||||
.media__thumb {
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.media__title {
|
||||
@include line-clamp(2.4rem, 2);
|
||||
font-size: 1rem;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.playground__content__urlbar {
|
||||
.playground-content__urlbar {
|
||||
border: 1px solid $lbry-gray-1;
|
||||
display: flex;
|
||||
margin-bottom: 1rem;
|
||||
|
|
|
|||
|
|
@ -99,14 +99,22 @@ function generateContent(exampleNumber, displayTrendingContent) {
|
|||
for (const part of collection) {
|
||||
try {
|
||||
renderedContentCollection.push(`
|
||||
<figure class="playground__content__trend">
|
||||
<img alt="${part.name}" data-action="choose claim" data-claim-id="${part.name}" src="${makeImageSourceSecure(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>
|
||||
<section class="playground-content__trend">
|
||||
<figure
|
||||
class="media__thumb"
|
||||
data-action="choose claim"
|
||||
data-claim-id="${part.name}"
|
||||
style="background-image: url(${makeImageSourceSecure(part.value.stream.metadata.thumbnail)})">
|
||||
</figure>
|
||||
|
||||
<div class="media__title">
|
||||
${part.value.stream.metadata.title}
|
||||
</div>
|
||||
|
||||
<div class="media__subtitle">
|
||||
${part.channel_name}
|
||||
</div>
|
||||
</section>
|
||||
`);
|
||||
} catch (err) {
|
||||
return; // TODO: Return nice error message
|
||||
|
|
@ -153,13 +161,23 @@ function generateContent(exampleNumber, displayTrendingContent) {
|
|||
part.channel_name
|
||||
) {
|
||||
renderedContentCollection.push(`
|
||||
<figure 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)}"/>
|
||||
<figcaption data-action="choose claim" data-claim-id="${part.claim_id}">
|
||||
${part.value.stream.metadata.title}
|
||||
<span>${part.channel_name}</span>
|
||||
</figcaption>
|
||||
<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.stream.metadata.thumbnail)})">
|
||||
</figure>
|
||||
|
||||
<div class="media__title">
|
||||
${part.value.stream.metadata.title}
|
||||
</div>
|
||||
|
||||
<div class="media__subtitle">
|
||||
${part.channel_name}
|
||||
</div>
|
||||
</section>
|
||||
`);
|
||||
}
|
||||
}
|
||||
|
|
@ -216,17 +234,17 @@ function generateMemeCreator(socket) {
|
|||
const renderedImages = [];
|
||||
|
||||
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`
|
||||
<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;"/>
|
||||
<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">
|
||||
<form class="playground-content__meme__editor">
|
||||
<h2>Image Text</h2>
|
||||
|
||||
<fieldset>
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
"choo-websocket": "^2.0.0",
|
||||
"colorette": "^1.0.7",
|
||||
"cors": "^2.8.5",
|
||||
"cron": "^1.5.0",
|
||||
"cron": "^1.5.1",
|
||||
"date-format-lite": "^17.7.0",
|
||||
"decamelize": "^2.0.0",
|
||||
"dedent": "^0.7.0",
|
||||
|
|
@ -23,7 +23,7 @@
|
|||
"fastify-compress": "^0.7.1",
|
||||
"fastify-helmet": "^3.0.0",
|
||||
"fastify-plugin": "^1.3.0",
|
||||
"fastify-static": "^0.14.0",
|
||||
"fastify-static": "^1.0.0",
|
||||
"fastify-ws": "^1.0.0",
|
||||
"front-matter": "^3.0.1",
|
||||
"fs-exists-sync": "^0.1.0",
|
||||
|
|
@ -45,7 +45,7 @@
|
|||
"@babel/cli": "^7.2.0",
|
||||
"@babel/core": "^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-export-namespace-from": "7.2.0",
|
||||
"@babel/plugin-proposal-function-sent": "7.2.0",
|
||||
|
|
@ -59,7 +59,7 @@
|
|||
"@inc/eslint-config": "^1.1.2",
|
||||
"@inc/sasslint-config": "^1.1.2",
|
||||
"@lbry/color": "^1.0.5",
|
||||
"@lbry/components": "^1.4.2",
|
||||
"@lbry/components": "^1.4.4",
|
||||
"eslint": "^5.9.0",
|
||||
"husky": "^1.2.0",
|
||||
"nodemon": "^1.18.7",
|
||||
|
|
|
|||
Loading…
Reference in a new issue