Add <IconSet /> component

This is a presentational component for horizontal banks of icons (and
sometimes other stuff).

Convert <FileCard /> and <FileTile /> to use <IconSet />

Factor out "downloaded/published" icon into its own component

Add Featured Content icon to file tiles

Add alignment style for Featured Content icon

Update CHANGELOG.md

Handle featured content icon adjustment in _icons.scss

Remove IconSet component

Converted back to a presentational span and move positioning styles
into card SCSS

Fix spacing between price and icons in file tiles and cards

Before, it would be missing the space if there was a "local file" icon
but no featured content icon.

Rewrite Icon component to use semantic icons

Now you can pass in a constant that indicates the meaning of the icon
within the interface, e.g. icons.FEATURED instead of "icon-rocket".
Also adds the appropriate title.

All icons should eventually be updated to use this.

Remove IconFeatured and IconLocal in favor of new Icon component

Add space between Featured and Local icons

In the conversion to a generic Icon component, we lost the styles that
added padding on the left for FeaturedIcon and LocalIcon.

Fix how rocket icon position is adjusted

Before, it was using a negative margin, which altered the shape of the
bounding box. Changed to use relative positioning.

Add support for styling LBRY icons

Move style for Featured icon into icons.js

Uses new class name format for LBRY icon styles

CHANGELOG.md

@@ -16,7 +16,7 @@ Web UI version numbers should always match the corresponding version of LBRY App
   *
 
 ### Fixed
-  *
+  * Improve layout (and implementation) of the icon panel in file tiles and cards
   *
 
 ### Deprecated

ui/js/component/fileCard/view.jsx

@@ -2,12 +2,13 @@ import React from "react";
 import lbryuri from "lbryuri.js";
 import CardMedia from "component/cardMedia";
 import Link from "component/link";
-import { TruncatedText, Icon } from "component/common";
-import IconFeatured from "component/iconFeatured";
+import { TruncatedText } from "component/common";
+import Icon from "component/icon";
 import FilePrice from "component/filePrice";
 import UriIndicator from "component/uriIndicator";
 import NsfwOverlay from "component/nsfwOverlay";
 import TruncatedMarkdown from "component/truncatedMarkdown";
+import * as icons from "constants/icons";
 
 class FileCard extends React.PureComponent {
   constructor(props) {
@@ -94,11 +95,12 @@ class FileCard extends React.PureComponent {
                 <TruncatedText lines={1}>{title}</TruncatedText>
               </div>
               <div className="card__subtitle">
-                <span style={{ float: "right" }}>
+                <span className="card__indicators">
                   <FilePrice uri={uri} />
-                  {isRewardContent && <span>{" "}<IconFeatured /></span>}
-                  {fileInfo &&
-                    <span>{" "}<Icon fixed icon="icon-folder" /></span>}
+                  {" "}
+                  {isRewardContent && <Icon icon={icons.FEATURED} />}
+                  {" "}
+                  {fileInfo && <Icon icon={icons.LOCAL} />}
                 </span>
                 <UriIndicator uri={uri} />
               </div>

ui/js/component/fileList/view.jsx

@@ -87,7 +87,8 @@ class FileList extends React.PureComponent {
         <FileTile
           key={fileInfo.outpoint || fileInfo.claim_id}
           uri={uri}
-          hidePrice={true}
+          showPrice={false}
+          showLocal={false}
           showActions={true}
           showEmpty={this.props.fileTileShowEmpty}
         />

ui/js/component/fileTile/view.jsx

@@ -1,4 +1,5 @@
 import React from "react";
+import * as icons from "constants/icons";
 import lbryuri from "lbryuri.js";
 import CardMedia from "component/cardMedia";
 import FileActions from "component/fileActions";
@@ -6,12 +7,17 @@ import Link from "component/link";
 import { TruncatedText } from "component/common.js";
 import FilePrice from "component/filePrice";
 import NsfwOverlay from "component/nsfwOverlay";
-import IconFeatured from "component/iconFeatured";
+import Icon from "component/icon";
 
 class FileTile extends React.PureComponent {
   static SHOW_EMPTY_PUBLISH = "publish";
   static SHOW_EMPTY_PENDING = "pending";
 
+  static defaultProps = {
+    showPrice: true,
+    showLocal: true,
+  };
+
   constructor(props) {
     super(props);
     this.state = {
@@ -59,8 +65,10 @@ class FileTile extends React.PureComponent {
       isResolvingUri,
       showEmpty,
       navigate,
-      hidePrice,
+      showPrice,
+      showLocal,
       rewardedContentClaimIds,
+      fileInfo,
     } = this.props;
 
     const uri = lbryuri.normalize(this.props.uri);
@@ -111,8 +119,13 @@ class FileTile extends React.PureComponent {
             <CardMedia title={title} thumbnail={thumbnail} />
             <div className="file-tile__content">
               <div className="card__title-primary">
-                {!hidePrice ? <FilePrice uri={this.props.uri} /> : null}
-                {isRewardContent && <IconFeatured />}
+                <span className="card__indicators">
+                  {showPrice && <FilePrice uri={this.props.uri} />}
+                  {" "}
+                  {isRewardContent && <Icon icon={icons.FEATURED} />}
+                  {" "}
+                  {showLocal && fileInfo && <Icon icon={icons.LOCAL} />}
+                </span>
                 <div className="meta">{uri}</div>
                 <h3>
                   <TruncatedText lines={1}>{title}</TruncatedText>

ui/js/component/icon/index.js

@@ -0,0 +1,5 @@
+import React from "react";
+import { connect } from "react-redux";
+import Icon from "./view";
+
+export default connect(null, null)(Icon);

ui/js/component/icon/view.jsx

@@ -0,0 +1,47 @@
+import React from "react";
+import * as icons from "constants/icons";
+
+export default class Icon extends React.PureComponent {
+  static propTypes = {
+    icon: React.PropTypes.string.isRequired,
+    fixed: React.PropTypes.bool,
+  };
+
+  static defaultProps = {
+    fixed: false,
+  };
+
+  getIconInfo() {
+    if (this.props.icon.startsWith("icon-")) {
+      // Old style where FA icon class is passed in directly
+      return { className: this.props.icon, title: "" };
+    }
+
+    switch (this.props.icon) {
+      case icons.FEATURED:
+        return {
+          className: "icon-rocket",
+          title: "Watch content with this icon to earn weekly rewards.",
+        };
+      case icons.LOCAL:
+        return {
+          className: "icon-folder",
+          title: "You have a copy of this file.",
+        };
+      default:
+        throw new Error(`Unknown icon type "${this.props.icon}"`);
+    }
+  }
+
+  render() {
+    const { className, title } = this.getIconInfo();
+
+    const spanClassName =
+      "icon " +
+      ("lbry-icon-" + this.props.icon + " ") +
+      className +
+      (this.props.fixed ? " icon-fixed-width " : "");
+
+    return <span className={spanClassName} title={title} />;
+  }
+}

ui/js/component/iconFeatured/index.js

@@ -1,5 +0,0 @@
-import React from "react";
-import { connect } from "react-redux";
-import IconFeatured from "./view";
-
-export default connect(null, null)(IconFeatured);

ui/js/component/iconFeatured/view.jsx

@@ -1,15 +0,0 @@
-import React from "react";
-import { Icon } from "component/common.js";
-
-const IconFeatured = props => {
-  return (
-    <span
-      className="icon-featured"
-      title={__("Watch content with this icon to earn weekly rewards.")}
-    >
-      <Icon icon="icon-rocket" fixed className="card__icon-featured-content" />
-    </span>
-  );
-};
-
-export default IconFeatured;

ui/js/constants/icons.js

@@ -0,0 +1,2 @@
+export const FEATURED = "featured";
+export const LOCAL = "local";

ui/js/page/file/view.jsx

@@ -6,8 +6,40 @@ import { Thumbnail } from "component/common";
 import FilePrice from "component/filePrice";
 import FileDetails from "component/fileDetails";
 import UriIndicator from "component/uriIndicator";
-import IconFeatured from "component/iconFeatured";
+import Icon from "component/icon";
 import WalletSendTip from "component/walletSendTip";
+import DateTime from "component/dateTime";
+import * as icons from "constants/icons";
+
+const FormatItem = props => {
+  const {
+    publishedDate,
+    contentType,
+    claim: { height },
+    metadata: { language, license },
+  } = props;
+
+  const mediaType = lbry.getMediaType(contentType);
+
+  return (
+    <table className="table-standard">
+      <tbody>
+        <tr>
+          <td>{__("Published on")}</td><td><DateTime block={height} /></td>
+        </tr>
+        <tr>
+          <td>{__("Content-Type")}</td><td>{mediaType}</td>
+        </tr>
+        <tr>
+          <td>{__("Language")}</td><td>{language}</td>
+        </tr>
+        <tr>
+          <td>{__("License")}</td><td>{license}</td>
+        </tr>
+      </tbody>
+    </table>
+  );
+};
 
 class FilePage extends React.PureComponent {
   componentDidMount() {
@@ -77,7 +109,7 @@ class FilePage extends React.PureComponent {
                   {!fileInfo || fileInfo.written_bytes <= 0
                     ? <span style={{ float: "right" }}>
                         <FilePrice uri={lbryuri.normalize(uri)} />
-                        {isRewardContent && <span>{" "}<IconFeatured /></span>}
+                        {isRewardContent && <span>{" "}<Icon icon={icons.FEATURED} /></span>}
                       </span>
                     : null}
                   <h1>{title}</h1>

ui/scss/_icons.scss

@@ -23,6 +23,21 @@
   transform: translate(0, 0);
 }
 
+/* Custom styles for LBRY icons */
+
+.lbry-icon-featured {
+  color: orangered;
+}
+
+/* Adjustments for icon size and alignment */
+.icon-rocket {
+  font-size: 0.95em;
+  position: relative;
+  top: -0.04em;
+  margin-left: 0.025em;
+  margin-right: 0.025em;
+}
+
 /* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
    readers do not read off random characters that represent icons */
 .icon-glass:before {

ui/scss/component/_card.scss

@@ -167,6 +167,11 @@ $font-size-subtext-multiple: 0.82;
   position: absolute;
   top: 36%
 }
+
+.card__indicators {
+  float: right;
+}
+
 .card--small {
   width: var(--card-small-width);
   overflow-x: hidden;
@@ -269,10 +274,6 @@ $padding-right-card-hover-hack: 30px;
   right: 0;
 }
 
-.card__icon-featured-content {
-  color: orangered;
-}
-
 /*
 if we keep doing things like this, we should add a real grid system, but I'm going to be a selective dick about it - Jeremy
  */

ui/scss/component/_file-tile.scss

@@ -3,12 +3,6 @@ $height-file-tile: $spacing-vertical * 6;
 .file-tile__row {
   overflow: hidden;
   height: $height-file-tile;
-  .credit-amount {
-    float: right;
-  }
-  .icon-featured {
-    float: right;
-  }
   //also a hack
   .card__media {
     height: $height-file-tile;