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 (
|
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,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=" Enter a LBRY address or select a video below" type="text"/>
|
<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>
|
<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
4
app/dist/scripts/sockets.js
vendored
|
@ -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"))
|
||||||
|
|
|
@ -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,11 +49,9 @@
|
||||||
&::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;
|
||||||
|
@ -124,34 +120,36 @@
|
||||||
display: block;
|
display: block;
|
||||||
font-size: 1rem;
|
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;
|
|
||||||
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;
|
|
||||||
font-size: 0.8rem;
|
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;
|
border: 1px solid $lbry-gray-1;
|
||||||
display: flex;
|
display: flex;
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
|
|
|
@ -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"
|
||||||
<figcaption data-action="choose claim" data-claim-id="${part.name}">
|
data-action="choose claim"
|
||||||
${part.value.stream.metadata.title}
|
data-claim-id="${part.name}"
|
||||||
<span>${part.channel_name}</span>
|
style="background-image: url(${makeImageSourceSecure(part.value.stream.metadata.thumbnail)})">
|
||||||
</figcaption>
|
|
||||||
</figure>
|
</figure>
|
||||||
|
|
||||||
|
<div class="media__title">
|
||||||
|
${part.value.stream.metadata.title}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<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"
|
||||||
${part.value.stream.metadata.title}
|
data-action="choose claim"
|
||||||
<span>${part.channel_name}</span>
|
data-claim-id="${part.claim_id}"
|
||||||
</figcaption>
|
data-name=${part.name}
|
||||||
|
style="background-image: url(${makeImageSourceSecure(part.value.stream.metadata.thumbnail)})">
|
||||||
</figure>
|
</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 = [];
|
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>
|
||||||
|
|
|
@ -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",
|
||||||
|
|
Loading…
Reference in a new issue