add style to visited claim previews

src/ui/component/claimListDiscover/view.jsx

@@ -29,7 +29,7 @@ const SEARCH_TIMES = [TIME_DAY, TIME_WEEK, TIME_MONTH, TIME_YEAR, TIME_ALL];
 type Props = {
   uris: Array<string>,
   subscribedChannels: Array<Subscription>,
-  doClaimSearch: (number, {}) => void,
+  doClaimSearch: ({}) => void,
   injectedItem: any,
   tags: Array<string>,
   loading: boolean,
@@ -87,7 +87,8 @@ function ClaimListDiscover(props: Props) {
       }
     }
 
-    doClaimSearch(20, options);
+    options.page_size = PAGE_SIZE;
+    doClaimSearch(options);
   }, [personal, personalSort, typeSort, timeSort, doClaimSearch, page, tagsString, channelsIdString, showNsfw]);
 
   function getLabel(type) {

src/ui/component/claimPreview/index.js

@@ -11,6 +11,7 @@ import {
 } from 'lbry-redux';
 import { selectBlackListedOutpoints, selectFilteredOutpoints } from 'lbryinc';
 import { selectShowNsfw } from 'redux/selectors/settings';
+import { makeSelectHasVisitedUri } from 'redux/selectors/content';
 import ClaimPreview from './view';
 
 const select = (state, props) => ({
@@ -24,6 +25,7 @@ const select = (state, props) => ({
   nsfw: makeSelectClaimIsNsfw(props.uri)(state),
   blackListedOutpoints: selectBlackListedOutpoints(state),
   filteredOutpoints: selectFilteredOutpoints(state),
+  hasVisitedUri: makeSelectHasVisitedUri(props.uri)(state),
 });
 
 const perform = dispatch => ({

src/ui/component/claimPreview/view.jsx

@@ -29,6 +29,7 @@ type Props = {
   nsfw: boolean,
   placeholder: boolean,
   type: string,
+  hasVisitedUri: boolean,
   blackListedOutpoints: Array<{
     txid: string,
     nout: number,
@@ -56,6 +57,7 @@ function ClaimPreview(props: Props) {
     type,
     blackListedOutpoints,
     filteredOutpoints,
+    hasVisitedUri,
   } = props;
   const haventFetched = claim === undefined;
   const abandoned = !isResolvingUri && !claim && !placeholder;
@@ -65,7 +67,6 @@ function ClaimPreview(props: Props) {
   let shouldHide = abandoned || (!claimIsMine && obscureNsfw && nsfw);
 
   // This will be replaced once blocking is done at the wallet server level
-
   if (claim && !shouldHide && blackListedOutpoints) {
     shouldHide = blackListedOutpoints.some(outpoint => outpoint.txid === claim.txid && outpoint.nout === claim.nout);
   }
@@ -117,7 +118,8 @@ function ClaimPreview(props: Props) {
       onContextMenu={handleContextMenu}
       className={classnames('claim-preview', {
         'claim-preview--large': type === 'large',
-        'claim-list__pending': pending,
+        'claim-preview--visited': hasVisitedUri,
+        'claim-preview--pending': pending,
       })}
     >
       {isChannel ? <ChannelThumbnail uri={uri} /> : <CardMedia thumbnail={thumbnail} />}

src/ui/redux/selectors/content.js

@@ -58,6 +58,12 @@ export const makeSelectHistoryForUri = (uri: string) =>
     history => history.find(i => i.uri === uri)
   );
 
+export const makeSelectHasVisitedUri = (uri: string) =>
+  createSelector(
+    makeSelectHistoryForUri(uri),
+    history => Boolean(history)
+  );
+
 export const selectRecentHistory = createSelector(
   selectHistory,
   history => {

src/ui/scss/component/_claim-list.scss

@@ -129,7 +129,18 @@
   }
 }
 
-.claim-list__pending {
+.claim-preview--visited {
+  // Still keep the normal styles on hover regardless of if they have visited the claim
+  &:not(:hover) {
+    color: lighten($lbry-black, 35%);
+
+    [data-mode='dark'] & {
+      color: darken($lbry-white, 35%);
+    }
+  }
+}
+
+.claim-preview--pending {
   cursor: pointer;
   opacity: 0.6;