Still learning to use Git. All files should be good now.

CHANGELOG.md

@@ -4,6 +4,9 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
 ## [0.53.8] - [2022-11-17]
  
+### Added
+- Added the ability for users to hide content they've already watched throughout the app via a checkbox ([#7645](https://github.com/lbryio/lbry-desktop/issues/7645))
+
 ### Fixed
  - Selecting a large file in publish no longer crashes ([#7736](https://github.com/lbryio/lbry-desktop/pull/7736))
  - Unfollowing unpublished channels ([#7737](https://github.com/lbryio/lbry-desktop/pull/7737))

ui/component/channelForm/view.jsx

@@ -106,6 +106,7 @@ function ChannelForm(props: Props) {
   const languageParam = params.languages;
   const primaryLanguage = Array.isArray(languageParam) && languageParam.length && languageParam[0];
   const secondaryLanguage = Array.isArray(languageParam) && languageParam.length >= 2 && languageParam[1];
+  const [hideWatched, setHideWatched] = usePersistedState('hideWatched', false); 
   const submitLabel = React.useMemo(() => {
     if (isClaimingInitialRewards) {
       return __('Claiming credits...');
@@ -238,7 +239,23 @@ function ChannelForm(props: Props) {
   }
   if ((!isUpload.thumbnail && thumbError) || (!isUpload.cover && coverError)) {
     errorMsg = __('Invalid %error_type%', { error_type: (thumbError && 'thumbnail') || (coverError && 'cover image') });
-  }
+    }
+
+    function getHideWatchedElem() {
+        return (
+            <div className={classnames(`card claim-search__menus`)}>
+                <FormField
+                    label={__('Hide Watched')}
+                    name="hide_watched"
+                    type="checkbox"
+                    checked={hideWatched}
+                    onChange={() => {
+                        setHideWatched((prev) => !prev);
+                    }}
+                />
+            </div>
+        );
+    }
 
   React.useEffect(() => {
     let nameError;
@@ -525,7 +542,8 @@ function ChannelForm(props: Props) {
                 <div className="section__actions">
                   <ClaimAbandonButton uri={uri} abandonActionCallback={() => replace(`/$/${PAGES.CHANNELS}`)} />
                 </div>
-              )}
+                  )}
+                  {getHideWatchedElem()}
             </>
           }
         />

ui/component/claimListHeader/view.jsx

@@ -67,6 +67,7 @@ function ClaimListHeader(props: Props) {
   const [orderParamUser, setOrderParamUser] = usePersistedState(`orderUser-${location.pathname}`, CS.ORDER_BY_TRENDING);
   const urlParams = new URLSearchParams(search);
   const freshnessParam = freshness || urlParams.get(CS.FRESH_KEY) || defaultFreshness;
+  const [hideWatched, setHideWatched] = usePersistedState('hideWatched', false);
   const contentTypeParam = urlParams.get(CS.CONTENT_KEY);
   const streamTypeParam =
     streamType || (CS.FILE_TYPES.includes(contentTypeParam) && contentTypeParam) || defaultStreamType || null;

ui/component/claimPreview/index.js

@@ -21,6 +21,7 @@ import { selectIsSubscribedForUri } from 'redux/selectors/subscriptions';
 import { isClaimNsfw } from 'util/claim';
 import ClaimPreview from './view';
 import formatMediaDuration from 'util/formatMediaDuration';
+import { makeSelectContentWatchedPercentageForUri } from 'redux/selectors/content';
 
 const select = (state, props) => {
   const claim = props.uri && selectClaimForUri(state, props.uri);
@@ -46,6 +47,7 @@ const select = (state, props) => {
     wasPurchased: props.uri && makeSelectClaimWasPurchased(props.uri)(state),
     isCollectionMine: makeSelectCollectionIsMine(props.collectionId)(state),
     lang: selectLanguage(state),
+    isWatched: makeSelectContentWatchedPercentageForUri(props.uri)(state) > 80,
   };
 };
 

ui/component/claimPreview/view.jsx

@@ -32,6 +32,7 @@ import ClaimPreviewNoContent from './claim-preview-no-content';
 import CollectionEditButtons from 'component/collectionEditButtons';
 import { useIsMobile } from 'effects/use-screensize';
 import AbandonedChannelPreview from 'component/abandonedChannelPreview';
+import usePersistedState from 'effects/use-persisted-state';
 
 // preview images used on the landing page and on the channel page
 type Props = {
@@ -82,6 +83,7 @@ type Props = {
   showEdit?: boolean,
   dragHandleProps?: any,
   unavailableUris?: Array<string>,
+  isWatched: boolean,
 };
 
 const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
@@ -141,10 +143,11 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
     showEdit,
     dragHandleProps,
     unavailableUris,
+    isWatched,
   } = props;
 
   const isMobile = useIsMobile();
-
+  const [hideWatched, setHideWatched] = usePersistedState('hideWatched', false); 
   const isCollection = claim && claim.value_type === 'collection';
   const collectionClaimId = isCollection && claim && claim.claim_id;
   const listId = collectionId || collectionClaimId;
@@ -278,7 +281,15 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
     }
   }, [isValid, uri, isResolvingUri, shouldFetch, resolveUri]);
 
-  if (shouldHide && !showNullPlaceholder) {
+    if (isWatched && hideWatched) {
+        shouldHide = true;
+    }
+
+    if (shouldHide) {
+        return null;
+    }
+
+    if (shouldHide && !showNullPlaceholder) {
     return null;
   }
 

ui/component/claimPreviewTile/index.js

@@ -10,6 +10,7 @@ import { doFileGet } from 'redux/actions/file';
 import { doResolveUri } from 'redux/actions/claims';
 import { selectViewCountForUri, selectBanStateForUri } from 'lbryinc';
 import { selectShowMatureContent } from 'redux/selectors/settings';
+import { makeSelectContentWatchedPercentageForUri } from 'redux/selectors/content';
 import { isClaimNsfw } from 'util/claim';
 import ClaimPreviewTile from './view';
 import formatMediaDuration from 'util/formatMediaDuration';
@@ -30,6 +31,7 @@ const select = (state, props) => {
     showMature: selectShowMatureContent(state),
     isMature: claim ? isClaimNsfw(claim) : false,
     viewCount: selectViewCountForUri(state, props.uri),
+    isWatched: makeSelectContentWatchedPercentageForUri(props.uri)(state) > 80,
   };
 };
 

ui/component/claimPreviewTile/view.jsx

@@ -20,6 +20,7 @@ import ClaimMenuList from 'component/claimMenuList';
 import CollectionPreviewOverlay from 'component/collectionPreviewOverlay';
 // $FlowFixMe cannot resolve ...
 import PlaceholderTx from 'static/img/placeholderTx.gif';
+import usePersistedState from 'effects/use-persisted-state';
 
 type Props = {
   uri: string,
@@ -42,6 +43,7 @@ type Props = {
   collectionId?: string,
   viewCount: string,
   swipeLayout: boolean,
+  isWatched: boolean,
 };
 
 // preview image cards used in related video functionality, channel overview page and homepage
@@ -67,10 +69,12 @@ function ClaimPreviewTile(props: Props) {
     mediaDuration,
     viewCount,
     swipeLayout = false,
+    isWatched,
   } = props;
   const isRepost = claim && claim.repost_channel_url;
   const isCollection = claim && claim.value_type === 'collection';
   const isStream = claim && claim.value_type === 'stream';
+  const [hideWatched, setHideWatched] = usePersistedState('hideWatched', false);
   // $FlowFixMe
   const isPlayable =
     claim &&
@@ -124,7 +128,23 @@ function ClaimPreviewTile(props: Props) {
     }
   }, [isValid, isResolvingUri, uri, resolveUri, shouldFetch]);
 
-  let shouldHide = false;
+    let shouldHide = false;
+
+    if (isMature && !showMature) {
+        // Unfortunately needed until this is resolved
+        // https://github.com/lbryio/lbry-sdk/issues/2785
+        shouldHide = true;
+    } else {
+        shouldHide =
+            banState.blacklisted ||
+            banState.filtered ||
+            (!showHiddenByUser && (banState.muted || banState.blocked)) ||
+            (isWatched && hideWatched);
+    }
+
+    if (shouldHide) {
+        return null;
+    }
 
   if (isMature && !showMature) {
     // Unfortunately needed until this is resolved

ui/component/searchOptions/view.jsx

@@ -61,6 +61,8 @@ const SearchOptions = (props: Props) => {
     delete TYPES_ADVANCED[SEARCH_OPTIONS.MEDIA_IMAGE];
   }
 
+  const [hideWatched, setHideWatched] = usePersistedState('hideWatched', false);
+
   React.useEffect(() => {
     // We no longer let the user set the search results count, but the value
     // will be in local storage for existing users. Override that.
@@ -69,7 +71,31 @@ const SearchOptions = (props: Props) => {
     }
   }, []);
 
-  function updateSearchOptions(option, value) {
+    function getHideWatchedElem() {
+        return (
+            <div className={`claim-search__checkbox_searchbox`}>
+                <FormField
+                    name="hide_watched"
+                    type="checkbox"
+                    checked={hideWatched}
+                    onChange={() => {
+                        setHideWatched((prev) => !prev);
+                    }}
+                />
+                <Icon
+                    className="icon--help"
+                    icon={ICONS.HELP}
+                    tooltip
+                    size={16}
+                    customTooltipText={__(
+                        'Hide content you have already viewed from search results.'
+                    )}
+                />
+            </div>
+        );
+    }
+
+    function updateSearchOptions(option, value) {
     setSearchOption(option, value);
     if (onSearchOptionsChanged) {
       onSearchOptionsChanged(option);
@@ -149,28 +175,28 @@ const SearchOptions = (props: Props) => {
     </>
   );
 
-  const otherOptionsElem = (
+    const exactMatchElem = (
-    <>
+        <>
-      <div className="filter-values">
+            <div className="filter-values">
-        <FormField
+                <FormField
-          type="checkbox"
+                    type="checkbox"
-          name="exact-match"
+                    name="exact-match"
-          checked={options[SEARCH_OPTIONS.EXACT]}
+                    checked={options[SEARCH_OPTIONS.EXACT]}
-          onChange={() => updateSearchOptions(SEARCH_OPTIONS.EXACT, !options[SEARCH_OPTIONS.EXACT])}
+                    onChange={() => updateSearchOptions(SEARCH_OPTIONS.EXACT, !options[SEARCH_OPTIONS.EXACT])}
-          label={__('Exact match')}
+                />
-        />
+                <Icon
-        <Icon
+                    className="icon--help"
-          className="icon--help"
+                    icon={ICONS.HELP}
-          icon={ICONS.HELP}
+                    tooltip
-          tooltip
+                    size={16}
-          size={16}
+                    customTooltipText={__(
-          customTooltipText={__(
+                        'Find results that include all the given words in the exact order.\nThis can also be done by surrounding the search query with quotation marks (e.g. "hello world").'
-            'Find results that include all the given words in the exact order.\nThis can also be done by surrounding the search query with quotation marks (e.g. "hello world").'
+                    )}
-          )}
+                />
-        />
+            </div>
-      </div>
+
-    </>
+        </>
-  );
+    );
 
   const uploadDateElem = (
     <div className="filter-values">
@@ -194,7 +220,13 @@ const SearchOptions = (props: Props) => {
     </div>
   );
 
-  const sortByElem = (
+    const hideWatchedElem = (
+        <div>
+            {getHideWatchedElem()}
+        </div>
+    );
+
+    const sortByElem = (
     <div className="filter-values">
       <FormField
         type="select"
@@ -211,31 +243,32 @@ const SearchOptions = (props: Props) => {
   const uploadDateLabel =
     options[SEARCH_OPTIONS.CLAIM_TYPE] === SEARCH_OPTIONS.INCLUDE_CHANNELS ? __('Creation Date') : __('Upload Date');
 
-  return (
+    return (
-    <div>
+        <div>
-      <Button
+            <Button
-        button="alt"
+                button="alt"
-        label={__('Filter')}
+                label={__('Filter')}
-        icon={ICONS.FILTER}
+                icon={ICONS.FILTER}
-        iconRight={expanded ? ICONS.UP : ICONS.DOWN}
+                iconRight={expanded ? ICONS.UP : ICONS.DOWN}
-        onClick={toggleSearchExpanded}
+                onClick={toggleSearchExpanded}
-      />
+            />
-      <Form
+            <Form
-        className={classnames('search__options', {
+                className={classnames('search__options', {
-          'search__options--expanded': expanded,
+                    'search__options--expanded': expanded,
-        })}
+                })}
-      >
+            >
-        <table className="table table--condensed">
+                <table className="table table--condensed">
-          <tbody>
+                    <tbody>
-            {addRow(__('Type'), typeElem)}
+                        {addRow(__('Type'), typeElem)}
-            {addRow(uploadDateLabel, uploadDateElem)}
+                        {addRow(uploadDateLabel, uploadDateElem)}
-            {addRow(__('Sort By'), sortByElem)}
+                        {addRow(__('Sort By'), sortByElem)}
-            {addRow(__('Other Options'), otherOptionsElem)}
+                        {addRow(__('Exact Match'), exactMatchElem)}
-          </tbody>
+                        {addRow(__('Hide Watched Content'), hideWatchedElem)}
-        </table>
+                    </tbody>
-      </Form>
+                </table>
-    </div>
+            </Form>
-  );
+        </div>
+    );
 };
 
 export default SearchOptions;

ui/scss/component/_claim-search.scss

@@ -27,6 +27,22 @@
   }
 }
 
+// UPDATE: Add style for checkbox
+.claim-search__checkbox {
+    padding-left: 45%;
+    padding-top: 7%;
+}
+
+//UPDATE: Added style for checkbox on search page
+.claim-search__checkbox_searchbox {
+    // Placeholder
+}
+
+// UPDATE: Add style for checkbox label
+.checkbox-label {
+    padding-left: 10px;
+}
+
 .claim-search__dropdown {
   font-size: var(--font-body);
   background-color: var(--color-input-bg);