From f1b0c272cb4467ced737453324988738198657f6 Mon Sep 17 00:00:00 2001
From: Akinwale Ariwodola <akinwale@gmail.com>
Date: Fri, 14 Jul 2017 00:18:28 +0100
Subject: [PATCH] CardMedia component

---
 ui/js/component/cardMedia/index.js |  8 +++++
 ui/js/component/cardMedia/view.jsx | 54 ++++++++++++++++++++++++++++++
 ui/js/component/fileCard/view.jsx  | 11 +++---
 ui/js/component/fileTile/view.jsx  | 16 +++------
 ui/scss/component/_card.scss       | 46 +++++++++++++++++++++++++
 5 files changed, 118 insertions(+), 17 deletions(-)
 create mode 100644 ui/js/component/cardMedia/index.js
 create mode 100644 ui/js/component/cardMedia/view.jsx

diff --git a/ui/js/component/cardMedia/index.js b/ui/js/component/cardMedia/index.js
new file mode 100644
index 000000000..3616b0331
--- /dev/null
+++ b/ui/js/component/cardMedia/index.js
@@ -0,0 +1,8 @@
+import React from "react";
+import { connect } from "react-redux";
+import CardMedia from "./view";
+
+const select = state => ({});
+const perform = dispatch => ({});
+
+export default connect(select, perform)(CardMedia);
diff --git a/ui/js/component/cardMedia/view.jsx b/ui/js/component/cardMedia/view.jsx
new file mode 100644
index 000000000..d0f45f4ac
--- /dev/null
+++ b/ui/js/component/cardMedia/view.jsx
@@ -0,0 +1,54 @@
+import React from "react";
+
+class CardMedia extends React.PureComponent {
+  static AUTO_THUMB_CLASSES = [
+    "purple",
+    "red",
+    "pink",
+    "indigo",
+    "blue",
+    "light-blue",
+    "cyan",
+    "teal",
+    "green",
+    "yellow",
+    "orange",
+  ];
+
+  componentWillMount() {
+    this.setState({
+      autoThumbClass:
+        CardMedia.AUTO_THUMB_CLASSES[
+          Math.floor(Math.random() * CardMedia.AUTO_THUMB_CLASSES.length)
+        ],
+    });
+  }
+
+  render() {
+    const { title, thumbnail } = this.props;
+    const atClass = this.state.autoThumbClass;
+
+    if (thumbnail) {
+      return (
+        <div
+          className="card__media"
+          style={{ backgroundImage: "url('" + thumbnail + "')" }}
+        />
+      );
+    }
+
+    return (
+      <div className={`card__media card__media--autothumb ${atClass}`}>
+        <div className="card__autothumb__text">
+          {title &&
+            title
+              .replace(/\s+/g, "")
+              .substring(0, Math.min(title.replace(" ", "").length, 5))
+              .toUpperCase()}
+        </div>
+      </div>
+    );
+  }
+}
+
+export default CardMedia;
diff --git a/ui/js/component/fileCard/view.jsx b/ui/js/component/fileCard/view.jsx
index c6e179af7..5a35d740d 100644
--- a/ui/js/component/fileCard/view.jsx
+++ b/ui/js/component/fileCard/view.jsx
@@ -1,5 +1,6 @@
 import React from "react";
 import lbryuri from "lbryuri.js";
+import CardMedia from "component/cardMedia";
 import Link from "component/link";
 import { Thumbnail, TruncatedText, Icon } from "component/common";
 import FilePrice from "component/filePrice";
@@ -49,6 +50,9 @@ class FileCard extends React.PureComponent {
 
     const uri = lbryuri.normalize(this.props.uri);
     const title = metadata && metadata.title ? metadata.title : uri;
+    const thumbnail = metadata && metadata.thumbnail
+      ? metadata.thumbnail
+      : null;
     const obscureNsfw = this.props.obscureNsfw && metadata && metadata.nsfw;
 
     let description = "";
@@ -88,12 +92,7 @@ class FileCard extends React.PureComponent {
                 <UriIndicator uri={uri} />
               </div>
             </div>
-            {metadata &&
-              metadata.thumbnail &&
-              <div
-                className="card__media"
-                style={{ backgroundImage: "url('" + metadata.thumbnail + "')" }}
-              />}
+            <CardMedia title={title} thumbnail={thumbnail} />
             <div className="card__content card__subtext card__subtext--two-lines">
               <TruncatedMarkdown lines={2}>{description}</TruncatedMarkdown>
             </div>
diff --git a/ui/js/component/fileTile/view.jsx b/ui/js/component/fileTile/view.jsx
index ef4654ce8..0bdcce64c 100644
--- a/ui/js/component/fileTile/view.jsx
+++ b/ui/js/component/fileTile/view.jsx
@@ -1,6 +1,7 @@
 import React from "react";
 import lbry from "lbry.js";
 import lbryuri from "lbryuri.js";
+import CardMedia from "component/cardMedia";
 import Link from "component/link";
 import { TruncatedText } from "component/common.js";
 import FilePrice from "component/filePrice";
@@ -65,6 +66,9 @@ class FileTile extends React.PureComponent {
     const title = isClaimed && metadata && metadata.title
       ? metadata.title
       : lbryuri.parse(uri).contentName;
+    const thumbnail = metadata && metadata.thumbnail
+      ? metadata.thumbnail
+      : null;
     const obscureNsfw = this.props.obscureNsfw && metadata && metadata.nsfw;
     let onClick = () => navigate("/show", { uri });
 
@@ -98,17 +102,7 @@ class FileTile extends React.PureComponent {
       >
         <Link onClick={onClick} className="card__link">
           <div className={"card__inner file-tile__row"}>
-            <div
-              className="card__media"
-              style={{
-                backgroundImage:
-                  "url('" +
-                    (metadata && metadata.thumbnail
-                      ? metadata.thumbnail
-                      : lbry.imagePath("default-thumb.svg")) +
-                    "')",
-              }}
-            />
+            <CardMedia title={title} thumbnail={thumbnail} />
             <div className="file-tile__content">
               <div className="card__title-primary">
                 {!hidePrice ? <FilePrice uri={this.props.uri} /> : null}
diff --git a/ui/scss/component/_card.scss b/ui/scss/component/_card.scss
index a112bd232..da73b21bd 100644
--- a/ui/scss/component/_card.scss
+++ b/ui/scss/component/_card.scss
@@ -98,6 +98,52 @@ $card-link-scaling: 1.1;
   background-position: 50% 50%;
 }
 
+.card__media--autothumb {
+  position: relative
+}
+.card__media--autothumb.purple {
+  background-color: #9c27b0
+}
+.card__media--autothumb.red {
+  background-color: #e53935
+}
+.card__media--autothumb.pink {
+  background-color: #e91e63
+}
+.card__media--autothumb.indigo {
+  background-color: #3f51b5
+}
+.card__media--autothumb.blue {
+  background-color: #2196f3
+}
+.card__media--autothumb.light-blue {
+  background-color: #039be5
+}
+.card__media--autothumb.cyan {
+  background-color: #00acc1
+}
+.card__media--autothumb.teal {
+  background-color: #009688
+}
+.card__media--autothumb.green {
+  background-color: #43a047
+}
+.card__media--autothumb.yellow {
+  background-color: #ffeb3b
+}
+.card__media--autothumb.orange {
+  background-color: #ffa726
+}
+
+.card__media--autothumb .card__autothumb__text {
+  font-size: 2.0em;
+  width: 100%;
+  color: #ffffff;
+  text-align: center;
+  position: absolute;
+  top: 36%
+}
+
 $width-card-small: $spacing-vertical * 12;
 $height-card-small: $spacing-vertical * 15;