- {!hidePrice ?
: null}
- {isRewardContent &&
}
+
+ {showPrice && }
+ {" "}
+ {isRewardContent && }
+ {" "}
+ {showLocal && fileInfo && }
+
{uri}
{title}
diff --git a/ui/js/component/icon/index.js b/ui/js/component/icon/index.js
new file mode 100644
index 000000000..72b01f640
--- /dev/null
+++ b/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);
diff --git a/ui/js/component/icon/view.jsx b/ui/js/component/icon/view.jsx
new file mode 100644
index 000000000..a27db9acc
--- /dev/null
+++ b/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 ;
+ }
+}
diff --git a/ui/js/component/iconFeatured/index.js b/ui/js/component/iconFeatured/index.js
deleted file mode 100644
index 02ce8fc38..000000000
--- a/ui/js/component/iconFeatured/index.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import React from "react";
-import { connect } from "react-redux";
-import IconFeatured from "./view";
-
-export default connect(null, null)(IconFeatured);
diff --git a/ui/js/component/iconFeatured/view.jsx b/ui/js/component/iconFeatured/view.jsx
deleted file mode 100644
index 651d82338..000000000
--- a/ui/js/component/iconFeatured/view.jsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from "react";
-import { Icon } from "component/common.js";
-
-const IconFeatured = props => {
- return (
-
-
-
- );
-};
-
-export default IconFeatured;
diff --git a/ui/js/constants/icons.js b/ui/js/constants/icons.js
new file mode 100644
index 000000000..0b8b70348
--- /dev/null
+++ b/ui/js/constants/icons.js
@@ -0,0 +1,2 @@
+export const FEATURED = "featured";
+export const LOCAL = "local";
diff --git a/ui/js/page/file/view.jsx b/ui/js/page/file/view.jsx
index 35209ae18..8f3bb8168 100644
--- a/ui/js/page/file/view.jsx
+++ b/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 (
+
+
+
+ | {__("Published on")} | |
+
+
+ | {__("Content-Type")} | {mediaType} |
+
+
+ | {__("Language")} | {language} |
+
+
+ | {__("License")} | {license} |
+
+
+
+ );
+};
class FilePage extends React.PureComponent {
componentDidMount() {
@@ -77,7 +109,7 @@ class FilePage extends React.PureComponent {
{!fileInfo || fileInfo.written_bytes <= 0
?
- {isRewardContent && {" "}}
+ {isRewardContent && {" "}}
: null}
{title}
diff --git a/ui/scss/_icons.scss b/ui/scss/_icons.scss
index 537531e19..43321a287 100644
--- a/ui/scss/_icons.scss
+++ b/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 {
diff --git a/ui/scss/component/_card.scss b/ui/scss/component/_card.scss
index 0562b4040..03b515a4b 100644
--- a/ui/scss/component/_card.scss
+++ b/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
*/
diff --git a/ui/scss/component/_file-tile.scss b/ui/scss/component/_file-tile.scss
index 7341cc606..c35be3f9b 100644
--- a/ui/scss/component/_file-tile.scss
+++ b/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;