diff --git a/ui/js/actions/content.js b/ui/js/actions/content.js index 9735434be..9fbbcf698 100644 --- a/ui/js/actions/content.js +++ b/ui/js/actions/content.js @@ -133,13 +133,13 @@ export function doFetchFeaturedUris() { }; } -export function doFetchHotRightNowContent() { +export function doFetchRewardedContent() { return function(dispatch, getState) { const state = getState(); const success = nameToClaimId => { dispatch({ - type: types.FETCH_HOT_RIGHT_NOW_CONTENT_COMPLETED, + type: types.FETCH_REWARD_CONTENT_COMPLETED, data: { claimIds: Object.values(nameToClaimId), success: true, @@ -149,7 +149,7 @@ export function doFetchHotRightNowContent() { const failure = () => { dispatch({ - type: types.FETCH_HOT_RIGHT_NOW_CONTENT_COMPLETED, + type: types.FETCH_REWARD_CONTENT_COMPLETED, data: { claimIds: [], success: false, diff --git a/ui/js/component/app/index.js b/ui/js/component/app/index.js index bdc7420a1..252fdf783 100644 --- a/ui/js/component/app/index.js +++ b/ui/js/component/app/index.js @@ -7,7 +7,7 @@ import { doAlertError, doRecordScroll, } from "actions/app"; -import { doFetchHotRightNowContent } from "actions/content"; +import { doFetchRewardedContent } from "actions/content"; import { doUpdateBalance } from "actions/wallet"; import { selectWelcomeModalAcknowledged } from "selectors/app"; @@ -26,7 +26,7 @@ const perform = dispatch => ({ checkUpgradeAvailable: () => dispatch(doCheckUpgradeAvailable()), openWelcomeModal: () => dispatch(doOpenModal(modals.WELCOME)), updateBalance: balance => dispatch(doUpdateBalance(balance)), - fetchHotRightNowContent: () => dispatch(doFetchHotRightNowContent()), + fetchRewardedContent: () => dispatch(doFetchRewardedContent()), recordScroll: scrollPosition => dispatch(doRecordScroll(scrollPosition)), }); diff --git a/ui/js/component/app/view.jsx b/ui/js/component/app/view.jsx index 24b898122..1252d0942 100644 --- a/ui/js/component/app/view.jsx +++ b/ui/js/component/app/view.jsx @@ -16,7 +16,7 @@ class App extends React.PureComponent { alertError, checkUpgradeAvailable, updateBalance, - fetchHotRightNowContent, + fetchRewardedContent, } = this.props; document.addEventListener("unhandledError", event => { @@ -31,7 +31,7 @@ class App extends React.PureComponent { updateBalance(balance); }); - fetchHotRightNowContent(); + fetchRewardedContent(); this.showWelcome(this.props); diff --git a/ui/js/component/fileCard/index.js b/ui/js/component/fileCard/index.js index d47964175..68ede91e1 100644 --- a/ui/js/component/fileCard/index.js +++ b/ui/js/component/fileCard/index.js @@ -10,7 +10,7 @@ import { import { makeSelectFileInfoForUri } from "selectors/file_info"; import { makeSelectIsResolvingForUri, - selectHotRightNowClaimIds, + selectRewardContentClaimIds, } from "selectors/content"; import FileCard from "./view"; @@ -25,7 +25,7 @@ const makeSelect = () => { fileInfo: selectFileInfoForUri(state, props), obscureNsfw: !selectShowNsfw(state), metadata: selectMetadataForUri(state, props), - hotRightNowClaimIds: selectHotRightNowClaimIds(state, props), + rewardedContentClaimIds: selectRewardContentClaimIds(state, props), isResolvingUri: selectResolvingUri(state, props), }); diff --git a/ui/js/component/fileCard/view.jsx b/ui/js/component/fileCard/view.jsx index 37e0be51c..f26eccd1d 100644 --- a/ui/js/component/fileCard/view.jsx +++ b/ui/js/component/fileCard/view.jsx @@ -2,7 +2,8 @@ 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 { TruncatedText, Icon } from "component/common"; +import IconFeatured from "component/iconFeatured"; import FilePrice from "component/filePrice"; import UriIndicator from "component/uriIndicator"; import NsfwOverlay from "component/nsfwOverlay"; @@ -52,7 +53,7 @@ class FileCard extends React.PureComponent { metadata, isResolvingUri, navigate, - hotRightNowClaimIds, + rewardedContentClaimIds, } = this.props; const uri = lbryuri.normalize(this.props.uri); @@ -61,7 +62,7 @@ class FileCard extends React.PureComponent { ? metadata.thumbnail : null; const obscureNsfw = this.props.obscureNsfw && metadata && metadata.nsfw; - const isHotRightNow = claim && hotRightNowClaimIds.includes(claim.claim_id); + const isRewardContent = claim && rewardedContentClaimIds.includes(claim.claim_id); let description = ""; if (isResolvingUri && !claim) { @@ -91,13 +92,11 @@ class FileCard extends React.PureComponent {
{title}
- {isHotRightNow && 🔥 Hot Right Now}
- {fileInfo - ? {" "} - : ""} + {isRewardContent && {" "} } + {fileInfo && {" "} }
diff --git a/ui/js/component/fileTile/index.js b/ui/js/component/fileTile/index.js index 21bc0d926..0631ae849 100644 --- a/ui/js/component/fileTile/index.js +++ b/ui/js/component/fileTile/index.js @@ -10,7 +10,7 @@ import { makeSelectFileInfoForUri } from "selectors/file_info"; import { selectShowNsfw } from "selectors/settings"; import { makeSelectIsResolvingForUri, - selectHotRightNowClaimIds, + selectRewardContentClaimIds, } from "selectors/content"; import FileTile from "./view"; @@ -26,7 +26,7 @@ const makeSelect = () => { obscureNsfw: !selectShowNsfw(state), metadata: selectMetadataForUri(state, props), isResolvingUri: selectResolvingUri(state, props), - hotRightNowClaimIds: selectHotRightNowClaimIds(state, props), + rewardedContentClaimIds: selectRewardContentClaimIds(state, props), }); return select; diff --git a/ui/js/component/fileTile/view.jsx b/ui/js/component/fileTile/view.jsx index f388ea103..3c58d706a 100644 --- a/ui/js/component/fileTile/view.jsx +++ b/ui/js/component/fileTile/view.jsx @@ -1,11 +1,11 @@ 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"; import NsfwOverlay from "component/nsfwOverlay"; +import IconFeatured from "component/iconFeatured"; class FileTile extends React.PureComponent { static SHOW_EMPTY_PUBLISH = "publish"; @@ -58,7 +58,7 @@ class FileTile extends React.PureComponent { showEmpty, navigate, hidePrice, - hotRightNowClaimIds, + rewardedContentClaimIds, } = this.props; const uri = lbryuri.normalize(this.props.uri); @@ -71,7 +71,7 @@ class FileTile extends React.PureComponent { ? metadata.thumbnail : null; const obscureNsfw = this.props.obscureNsfw && metadata && metadata.nsfw; - const isHotRightNow = claim && hotRightNowClaimIds.includes(claim.claim_id); + const isRewardContent = claim && rewardedContentClaimIds.includes(claim.claim_id); let onClick = () => navigate("/show", { uri }); @@ -109,9 +109,11 @@ class FileTile extends React.PureComponent {
{!hidePrice ? : null} + {isRewardContent && }
{uri}
-

{title}

- {isHotRightNow && 🔥 Hot Right Now} +

+ {title} +

diff --git a/ui/js/component/iconFeatured/index.js b/ui/js/component/iconFeatured/index.js new file mode 100644 index 000000000..02ce8fc38 --- /dev/null +++ b/ui/js/component/iconFeatured/index.js @@ -0,0 +1,5 @@ +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 new file mode 100644 index 000000000..e876224f0 --- /dev/null +++ b/ui/js/component/iconFeatured/view.jsx @@ -0,0 +1,14 @@ +import React from "react"; +import { Icon } from "component/common.js"; + +const IconFeatured = props => { + return ( + + + + ); +}; + +export default IconFeatured; diff --git a/ui/js/constants/action_types.js b/ui/js/constants/action_types.js index 6f6625056..71d6d8072 100644 --- a/ui/js/constants/action_types.js +++ b/ui/js/constants/action_types.js @@ -112,5 +112,5 @@ export const CLAIM_REWARD_STARTED = "CLAIM_REWARD_STARTED"; export const CLAIM_REWARD_SUCCESS = "CLAIM_REWARD_SUCCESS"; export const CLAIM_REWARD_FAILURE = "CLAIM_REWARD_FAILURE"; export const CLAIM_REWARD_CLEAR_ERROR = "CLAIM_REWARD_CLEAR_ERROR"; -export const FETCH_HOT_RIGHT_NOW_CONTENT_COMPLETED = - "FETCH_HOT_RIGHT_NOW_CONTENT_COMPLETED"; +export const FETCH_REWARD_CONTENT_COMPLETED = + "FETCH_REWARD_CONTENT_COMPLETED"; diff --git a/ui/js/page/filePage/index.js b/ui/js/page/filePage/index.js index 20f513d77..26b98c93a 100644 --- a/ui/js/page/filePage/index.js +++ b/ui/js/page/filePage/index.js @@ -3,7 +3,7 @@ import { connect } from "react-redux"; import { doNavigate } from "actions/app"; import { doFetchFileInfo } from "actions/file_info"; import { makeSelectFileInfoForUri } from "selectors/file_info"; -import { selectHotRightNowClaimIds } from "selectors/content"; +import { selectRewardContentClaimIds } from "selectors/content"; import { doFetchCostInfoForUri } from "actions/cost_info"; import { makeSelectClaimForUri, @@ -28,7 +28,7 @@ const makeSelect = () => { metadata: selectMetadata(state, props), obscureNsfw: !selectShowNsfw(state), fileInfo: selectFileInfo(state, props), - hotRightNowClaimIds: selectHotRightNowClaimIds(state, props), + rewardedContentClaimIds: selectRewardContentClaimIds(state, props), }); return select; diff --git a/ui/js/page/filePage/view.jsx b/ui/js/page/filePage/view.jsx index f6bdff83b..3ca23aadc 100644 --- a/ui/js/page/filePage/view.jsx +++ b/ui/js/page/filePage/view.jsx @@ -8,6 +8,7 @@ import FilePrice from "component/filePrice"; import FileActions from "component/fileActions"; import Link from "component/link"; import UriIndicator from "component/uriIndicator"; +import IconFeatured from "component/iconFeatured"; const FormatItem = props => { const { contentType, metadata: { language, license } } = props; @@ -60,7 +61,7 @@ class FilePage extends React.PureComponent { metadata, contentType, uri, - hotRightNowClaimIds, + rewardedContentClaimIds, } = this.props; if (!claim || !metadata) { @@ -87,7 +88,7 @@ class FilePage extends React.PureComponent { ? lbryuri.build({ channelName, claimId: channelClaimId }, false) : null; const uriIndicator = ; - const isHotRightNow = hotRightNowClaimIds.includes(claim.claim_id); + const isRewardContent = rewardedContentClaimIds.includes(claim.claim_id); const mediaType = lbry.getMediaType(contentType); const player = require("render-media"); const obscureNsfw = this.props.obscureNsfw && metadata && metadata.nsfw; @@ -110,10 +111,10 @@ class FilePage extends React.PureComponent { {!fileInfo || fileInfo.written_bytes <= 0 ? + {isRewardContent && {" "} } : null}

{title}

- {isHotRightNow && 🔥 Hot Right Now}
{channelUri ? { return createSelector(selectTotalPagesForChannel, totalPages => totalPages); }; -export const selectHotRightNowClaimIds = createSelector( +export const selectRewardContentClaimIds = createSelector( _selectState, - state => state.hotRightNowClaimIds + state => state.rewardedContentClaimIds ); diff --git a/ui/scss/_gui.scss b/ui/scss/_gui.scss index 057027771..af2e7ebad 100644 --- a/ui/scss/_gui.scss +++ b/ui/scss/_gui.scss @@ -134,10 +134,14 @@ p } } +/*should this be here or work this way? had to hack additional rule below*/ .icon:only-child { position: relative; top: 0.16em; } +.icon-featured > .icon { + top: 0; +} .help { font-size: .85em; diff --git a/ui/scss/component/_card.scss b/ui/scss/component/_card.scss index aac13e3f8..20c72b3de 100644 --- a/ui/scss/component/_card.scss +++ b/ui/scss/component/_card.scss @@ -256,3 +256,7 @@ $padding-right-card-hover-hack: 30px; .card-row__nav--right { right: -1 * $padding-right-card-hover-hack; } + +.card__icon-featured-content { + color: orangered; +} \ No newline at end of file diff --git a/ui/scss/component/_file-tile.scss b/ui/scss/component/_file-tile.scss index 433abc746..7630f5517 100644 --- a/ui/scss/component/_file-tile.scss +++ b/ui/scss/component/_file-tile.scss @@ -7,6 +7,9 @@ $height-file-tile: $spacing-vertical * 6; .credit-amount { float: right; } + .icon-featured { + float: right; + } //also a hack .card__media { height: $height-file-tile;