add file icons to ClaimPreview

ui/component/claimPreview/index.js

@@ -14,7 +14,6 @@ import {
   selectChannelIsBlocked,
   doClearPublish,
   doPrepareEdit,
-  makeSelectMediaTypeForUri,
   doFileGet,
   makeSelectStreamingUrlForUri,
 } from 'lbry-redux';
@@ -35,7 +34,6 @@ const select = (state, props) => ({
   thumbnail: props.uri && makeSelectThumbnailForUri(props.uri)(state),
   cover: props.uri && makeSelectCoverForUri(props.uri)(state),
   title: props.uri && makeSelectTitleForUri(props.uri)(state),
-  mediaType: makeSelectMediaTypeForUri(props.uri)(state),
   nsfw: props.uri && makeSelectClaimIsNsfw(props.uri)(state),
   blackListedOutpoints: selectBlackListedOutpoints(state),
   filteredOutpoints: selectFilteredOutpoints(state),

ui/component/claimPreviewTile/view.jsx

@@ -12,6 +12,7 @@ import useGetThumbnail from 'effects/use-get-thumbnail';
 import { formatLbryUrlForWeb } from 'util/url';
 import { parseURI } from 'lbry-redux';
 import VideoDuration from 'component/videoDuration';
+import FileType from 'component/fileType';
 
 type Props = {
   uri: string,
@@ -149,7 +150,12 @@ function ClaimPreviewTile(props: Props) {
     >
       <NavLink {...navLinkProps}>
         <FileThumbnail thumbnail={thumbnailUrl}>
-          <VideoDuration uri={uri} className="claim-tile__video-length" />
+          {!isChannel && (
+            <div className="claim-tile__absolute-info">
+              <VideoDuration uri={uri} className="claim-tile__video-length" />
+              <FileType uri={uri} />
+            </div>
+          )}
         </FileThumbnail>
       </NavLink>
       <NavLink {...navLinkProps}>

ui/component/common/icon-custom.jsx

@@ -349,7 +349,6 @@ export const icons = {
       <path d="M16.51 17.35l-.35 3.83a2 2 0 0 1-2 1.82H9.83a2 2 0 0 1-2-1.82l-.35-3.83m.01-10.7l.35-3.83A2 2 0 0 1 9.83 1h4.35a2 2 0 0 1 2 1.82l.35 3.83" />{' '}
     </g>
   ),
-
   [ICONS.INVITE]: buildIcon(
     <g>
       <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
@@ -358,13 +357,42 @@ export const icons = {
       <path d="M16 3.13a4 4 0 0 1 0 7.75" />
     </g>
   ),
-  [ICONS.SHUFFLE]: buildIcon(
+  [ICONS.VIDEO]: buildIcon(
     <g>
-      <polyline points="16 3 21 3 21 8" />
-      <line x1="4" y1="20" x2="21" y2="3" />
-      <polyline points="21 16 21 21 16 21" />
-      <line x1="15" y1="15" x2="21" y2="21" />
-      <line x1="4" y1="4" x2="9" y2="9" />
+      <polygon points="23 7 16 12 23 17 23 7" />
+      <rect x="1" y="5" width="15" height="14" rx="2" ry="2" />
+    </g>
+  ),
+  [ICONS.AUDIO]: buildIcon(
+    <g>
+      <path d="M3 18v-6a9 9 0 0 1 18 0v6" />
+      <path d="M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z" />
+    </g>
+  ),
+  [ICONS.IMAGE]: buildIcon(
+    <g>
+      <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
+      <circle cx="8.5" cy="8.5" r="1.5" />
+      <polyline points="21 15 16 10 5 21" />
+    </g>
+  ),
+  [ICONS.TEXT]: buildIcon(
+    <g>
+      <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
+      <polyline points="14 2 14 8 20 8" />
+      <line x1="16" y1="13" x2="8" y2="13" />
+      <line x1="16" y1="17" x2="8" y2="17" />
+      <polyline points="10 9 9 9 8 9" />
+    </g>
+  ),
+  [ICONS.DOWNLOADABLE]: buildIcon(
+    <g>
+      <rect x="2" y="2" width="20" height="20" rx="2" ry="2" />
+
+      <g transform="translate(0, 3)">
+        <polyline points="7 10 12 15 17 10" />
+        <line x1="12" y1="15" x2="12" y2="3" />
+      </g>
     </g>
   ),
 };

ui/component/fileProperties/view.jsx

@@ -4,6 +4,7 @@ import * as React from 'react';
 import Icon from 'component/common/icon';
 import FilePrice from 'component/filePrice';
 import VideoDuration from 'component/videoDuration';
+import FileType from 'component/fileType';
 
 type Props = {
   uri: string,
@@ -22,6 +23,7 @@ export default function FileProperties(props: Props) {
       {!claimIsMine && downloaded && <Icon tooltip icon={icons.DOWNLOAD} />}
       <FilePrice hideFree uri={uri} />
       <VideoDuration uri={uri} />
+      <FileType uri={uri} />
     </div>
   );
 }

ui/component/fileType/index.js

@@ -0,0 +1,9 @@
+import { connect } from 'react-redux';
+import { makeSelectMediaTypeForUri } from 'lbry-redux';
+import FileType from './view';
+
+const select = (state, props) => ({
+  mediaType: makeSelectMediaTypeForUri(props.uri)(state),
+});
+
+export default connect(select)(FileType);

ui/component/fileType/view.jsx

@@ -0,0 +1,27 @@
+// @flow
+import * as ICONS from 'constants/icons';
+import React from 'react';
+import Icon from 'component/common/icon';
+
+type Props = {
+  uri: string,
+  mediaType: string,
+};
+
+function FileType(props: Props) {
+  const { mediaType } = props;
+
+  if (mediaType === 'image') {
+    return <Icon icon={ICONS.IMAGE} />;
+  } else if (mediaType === 'audio') {
+    return <Icon icon={ICONS.AUDIO} />;
+  } else if (mediaType === 'video') {
+    return <Icon icon={ICONS.VIDEO} />;
+  } else if (mediaType === 'text') {
+    return <Icon icon={ICONS.TEXT} />;
+  }
+
+  return <Icon icon={ICONS.DOWNLOADABLE} />;
+}
+
+export default FileType;

ui/constants/icons.js

@@ -81,4 +81,8 @@ export const SIGN_IN = 'SignIn';
 export const TRENDING = 'Trending';
 export const TOP = 'Top';
 export const NEW = 'New';
-export const SHUFFLE = 'Shuffle';
+export const IMAGE = 'Image';
+export const AUDIO = 'HeadPhones';
+export const VIDEO = 'Video';
+export const TEXT = 'FileText';
+export const DOWNLOADABLE = 'Downloadable';

ui/scss/component/_claim-list.scss

@@ -370,14 +370,21 @@
   font-size: var(--font-body);
 }
 
-.claim-tile__video-length {
+.claim-tile__absolute-info {
   position: absolute;
   bottom: var(--spacing-small);
   right: var(--spacing-small);
-  font-size: var(--font-small);
-  padding: 0.1rem;
+  font-size: var(--font-xsmall);
+  padding: 0.2rem;
   border-radius: var(--border-radius);
   font-weight: bold;
   background-color: black;
   color: white;
+
+  display: flex;
+  align-items: center;
+}
+
+.claim-tile__video-length {
+  margin-right: var(--spacing-xsmall);
 }

ui/scss/component/_file-properties.scss

@@ -5,10 +5,6 @@
   font-size: var(--font-small);
   color: var(--color-text-help);
 
-  .icon {
-    margin-bottom: -1px;
-  }
-
   & > *:not(:last-child) {
     margin-right: var(--spacing-small);
   }