Closes #288

app/helpers/fetch-metadata.js

@@ -254,7 +254,11 @@ export default async(data, socket) => {
       });
     }
 
-    return response.body.result[Object.keys(response.body.result)[0]].claim;
+    // console.log("——");
+    // console.log(response.body.result[Object.keys(response.body.result)[0]]);
+    // console.log("——");
+
+    return response.body.result[Object.keys(response.body.result)[0]];
   } catch(error) {
     messageSlack({
       message: "```" + error + "```",

app/sass/pages/_playground.scss

@@ -265,6 +265,7 @@
 }
 
 .playground-content__urlbar {
+  height: 2.5rem;
   border: 1px solid $lbry-gray-1;
   display: flex;
   margin-bottom: 1rem;
@@ -289,6 +290,7 @@
 
   input {
     width: calc(100% - 9.5rem);
+    border: none;
     font-size: 1rem;
 
     &::placeholder {
@@ -299,12 +301,12 @@
 
   span {
     @include no-user-select;
-    width: 3.5rem;
+    width: 3.5rem; height: 2.5rem;
 
     color: $lbry-gray-4;
     cursor: default;
     font-size: 1rem;
-    line-height: 2rem;
+    line-height: 2.4;
     text-align: right;
   }
 }

app/sockets.js

@@ -136,27 +136,28 @@ function generateContent(exampleNumber, displayTrendingContent) {
       Promise.all(rawContentCollection)
         .then(collection => {
           for (const part of collection) {
-            if (part.value.tags.includes("mature"))
+            if (part.value.tags && part.value.tags.includes("mature"))
               continue;
+
             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>
+                <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__title">
+                    ${part.value.title}
+                  </div>
 
-                <div class="media__subtitle">
-                  ${part.channel_name}
-                </div>
-              </section>
-            `);
+                  <div class="media__subtitle">
+                    ${part.signing_channel.name || "Anon"}
+                  </div>
+                </section>
+              `);
             } catch(err) {
               console.error(err);
               return; // TODO: Return nice error message
@@ -170,6 +171,10 @@ function generateContent(exampleNumber, displayTrendingContent) {
         `);
 
           displayTrendingContent(renderedContentCollection.join(""));
+        })
+        .catch(error => {
+          console.error(error);
+          return null;
         });
     });
   }
@@ -199,8 +204,7 @@ function generateContent(exampleNumber, displayTrendingContent) {
         if (
           part &&
           part.value &&
-          part.value.thumbnail.url &&
-          part.channel_name
+          part.value.thumbnail.url
         ) {
           renderedContentCollection.push(`
             <section class="playground-content__trend">
@@ -217,7 +221,7 @@ function generateContent(exampleNumber, displayTrendingContent) {
               </div>
 
               <div class="media__subtitle">
-                ${part.channel_name}
+                ${part.signing_channel.name || "Anon"}
               </div>
             </section>
           `);

package.json

@@ -93,15 +93,15 @@
   "private": true,
   "scripts": {
     "css": "sass --load-path=node_modules --update app/sass:app/dist --style compressed",
-    "format": "eslint '**/*.js' --fix --ignore-pattern '/app/dist/'",
+    "format": "eslint . --fix --ignore-pattern '/app/dist/'",
     "postinstall": "link-module-alias",
-    "preinstall": "command -v link-module-alias; link-module-alias clean || true",
-    "start": "npm i; npm run css; NODE_ENV=production node index.js",
+    "preinstall": "command -v link-module-alias;link-module-alias clean || true",
+    "start": "npm i;npm run css;NODE_ENV=production node index.js",
     "test": "run-s test:*",
     "test:dependencies": "updates --update ./ --exclude prismjs",
     "test:lint": "standardx --verbose | snazzy",
     "test:sass": "sass-lint --config ./node_modules/@inc/sasslint-config/config.json --verbose --no-exit",
-    "watch": "npm run css; run-p watch:*",
+    "watch": "npm run css;run-p watch:*",
     "watch:sass": "sass --load-path=node_modules --watch app/sass:app/dist --style compressed",
     "watch:server": "NODE_ENV=development nodemon --ignore 'app/dist'"
   },