app/sass/pages/_playground.scss

@@ -250,6 +250,7 @@
   }
 
   .media__thumb {
+    background-image: linear-gradient(135deg, var(--lbry-teal-2), var(--lbry-blue-3) 100%);
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;

app/sockets.js

@@ -123,8 +123,8 @@ function generateContent(exampleNumber, displayTrendingContent) {
                   class="media__thumb"
                   data-action="choose claim"
                   data-claim-id="${part.name}"
-                  style="background-image: url(${makeImageSourceSecure(part.value.stream.metadata.thumbnail)})">
-                </figure>
+                  ${part.value.stream.metadata.thumbnail.length ? `style="background-image: url(${makeImageSourceSecure(part.value.stream.metadata.thumbnail)})"` : ""}
+                ></figure>
 
                 <div class="media__title">
                   ${part.value.stream.metadata.title}
@@ -359,6 +359,9 @@ async function getTrendingContent() {
 }
 
 function makeImageSourceSecure(url) {
+  if (!url || !url.length)
+    return url;
+
   const originalUrl = new URL(url);
 
   if (originalUrl.protocol !== "https")

package.json

@@ -110,5 +110,5 @@
       "app/dist"
     ]
   },
-  "version": "3.8.0"
+  "version": "4.0.0"
 }