featured icon for reward content

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,

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)),
 });
 

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);
 

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),
   });
 

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 {
               <div className="card__title" title={title}>
                 <TruncatedText lines={1}>{title}</TruncatedText>
               </div>
-              {isHotRightNow && <span>&#128293; Hot Right Now</span>}
               <div className="card__subtitle">
                 <span style={{ float: "right" }}>
                   <FilePrice uri={uri} />
-                  {fileInfo
-                    ? <span>{" "}<Icon fixed icon="icon-folder" /></span>
-                    : ""}
+                  {isRewardContent && <span>{" "}<IconFeatured /></span> }
+                  {fileInfo && <span>{" "}<Icon fixed icon="icon-folder" /></span> }
                 </span>
                 <UriIndicator uri={uri} />
               </div>

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;

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 {
             <div className="file-tile__content">
               <div className="card__title-primary">
                 {!hidePrice ? <FilePrice uri={this.props.uri} /> : null}
+                {isRewardContent && <IconFeatured /> }
                 <div className="meta">{uri}</div>
-                <h3><TruncatedText lines={1}>{title}</TruncatedText></h3>
-                {isHotRightNow && <span>&#128293; Hot Right Now</span>}
+                <h3>
+                  <TruncatedText lines={1}>{title}</TruncatedText>
+                </h3>
               </div>
               <div className="card__content card__subtext">
                 <TruncatedText lines={3}>

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);

ui/js/component/iconFeatured/view.jsx

@@ -0,0 +1,14 @@
+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-star"
+            fixed
+            className="card__icon-featured-content" />
+    </span>
+  );
+};
+
+export default IconFeatured;

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";

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;

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 = <UriIndicator uri={uri} />;
-    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
                 ? <span style={{ float: "right" }}>
                     <FilePrice uri={lbryuri.normalize(uri)} />
+                    {isRewardContent && <span>{" "}<IconFeatured /></span> }
                   </span>
                 : null}
               <h1>{title}</h1>
-              {isHotRightNow && <span>&#128293; Hot Right Now</span>}
               <div className="card__subtitle">
                 {channelUri
                   ? <Link

ui/js/reducers/content.js

@@ -2,7 +2,7 @@ import * as types from "constants/action_types";
 
 const reducers = {};
 const defaultState = {
-  hotRightNowClaimIds: [],
+  rewardedContentClaimIds: [],
 };
 
 reducers[types.FETCH_FEATURED_CONTENT_STARTED] = function(state, action) {
@@ -21,15 +21,14 @@ reducers[types.FETCH_FEATURED_CONTENT_COMPLETED] = function(state, action) {
   });
 };
 
-reducers[types.FETCH_HOT_RIGHT_NOW_CONTENT_COMPLETED] = function(
+reducers[types.FETCH_REWARD_CONTENT_COMPLETED] = function(
   state,
   action
 ) {
   const { claimIds, success } = action.data;
 
   return Object.assign({}, state, {
-    hotRightNowClaimIds: claimIds,
-    fetchingHotRightNowContentFailed: !success,
+    rewardedContentClaimIds: claimIds,
   });
 };
 

ui/js/selectors/content.js

@@ -38,7 +38,7 @@ export const makeSelectTotalPagesForChannel = () => {
   return createSelector(selectTotalPagesForChannel, totalPages => totalPages);
 };
 
-export const selectHotRightNowClaimIds = createSelector(
+export const selectRewardContentClaimIds = createSelector(
   _selectState,
-  state => state.hotRightNowClaimIds
+  state => state.rewardedContentClaimIds
 );

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;

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;
+}

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;