Merge pull request #1 from dgarrett01/7645-LBRY-Hide-Watched-Content

7645 lbry hide watched content

CHANGELOG.md

@@ -5,7 +5,7 @@ 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](Add Filter for Unwatched Content))
+- 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))

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 [hideWatched, setHideWatched] = usePersistedState('hideWatched', false);
   const submitLabel = React.useMemo(() => {
     if (isClaimingInitialRewards) {
@@ -239,7 +240,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>
+        );
+    }
 
     // Add "Hide Watched" to channel pages
     function getHideWatchedElem() {
@@ -544,7 +561,7 @@ function ChannelForm(props: Props) {
                   <ClaimAbandonButton uri={uri} abandonActionCallback={() => replace(`/$/${PAGES.CHANNELS}`)} />
                 </div>
                   )}
-               {getHideWatchedElem()}
+                  {getHideWatchedElem()}
             </>
           }
         />

ui/component/claimListHeader/view.jsx

@@ -115,6 +115,21 @@ function ClaimListHeader(props: Props) {
         );
     }
 
+    function getHideWatchedElem() {
+        return (
+            <div className={`claim-search__checkbox`}>
+                <FormField
+                    name="hide_watched"
+                    type="checkbox"
+                    checked={hideWatched}
+                    onChange={() => {
+                        setHideWatched((prev) => !prev);
+                    }}
+                />
+            </div>
+        );
+    }
+
   React.useEffect(() => {
     if (action !== 'POP' && isFiltered()) {
       setExpanded(true);

ui/component/claimPreview/index.js

@@ -47,7 +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, // Content considered "watched" when viewed to 80%
+    isWatched: makeSelectContentWatchedPercentageForUri(props.uri)(state) > 80,
   };
 };
 

ui/component/claimPreviewTile/index.js

@@ -31,7 +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, // Content considered "watched" when viewed 80%
+    isWatched: makeSelectContentWatchedPercentageForUri(props.uri)(state) > 80,
   };
 };
 

ui/component/claimPreviewTile/view.jsx

@@ -128,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

@@ -64,7 +64,7 @@ const SearchOptions = (props: Props) => {
 
   const [hideWatched, setHideWatched] = usePersistedState('hideWatched', false);
 
-    React.useEffect(() => {
+  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.
     if (options[SEARCH_OPTIONS.RESULT_COUNT] !== SEARCH_PAGE_SIZE) {
@@ -176,29 +176,29 @@ const SearchOptions = (props: Props) => {
     </>
   );
 
-    // Changed element name to exactMatchElem
     const exactMatchElem = (
-    <>
-      <div className="filter-values">
-        <FormField
-          type="checkbox"
-          name="exact-match"
-          checked={options[SEARCH_OPTIONS.EXACT]}
-          onChange={() => updateSearchOptions(SEARCH_OPTIONS.EXACT, !options[SEARCH_OPTIONS.EXACT])}
-        />
-        <Icon
-          className="icon--help"
-          icon={ICONS.HELP}
-          tooltip
-          size={16}
-          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").'
-          )}
-          /> 
-          </div>
+        <>
+            <div className="filter-values">
+                <FormField
+                    type="checkbox"
+                    name="exact-match"
+                    checked={options[SEARCH_OPTIONS.EXACT]}
+                    onChange={() => updateSearchOptions(SEARCH_OPTIONS.EXACT, !options[SEARCH_OPTIONS.EXACT])}
+                />
+                <Icon
+                    className="icon--help"
+                    icon={ICONS.HELP}
+                    tooltip
+                    size={16}
+                    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").'
+                    )}
+                />
+            </div>
+
+        </>
+    );
 
-    </>
-  );
 
   const uploadDateElem = (
     <div className="filter-values">
@@ -228,7 +228,13 @@ const SearchOptions = (props: Props) => {
         </div>
     );
 
-  const sortByElem = (
+    const hideWatchedElem = (
+        <div>
+            {getHideWatchedElem()}
+        </div>
+    );
+
+    const sortByElem = (
     <div className="filter-values">
       <FormField
         type="select"
@@ -245,33 +251,33 @@ const SearchOptions = (props: Props) => {
     const uploadDateLabel =
     options[SEARCH_OPTIONS.CLAIM_TYPE] === SEARCH_OPTIONS.INCLUDE_CHANNELS ? __('Creation Date') : __('Upload Date');
 
-    // Added row to table for hiding watched content in search settings
     return (
-    <div>
-      <Button
-        button="alt"
-        label={__('Filter')}
-        icon={ICONS.FILTER}
-        iconRight={expanded ? ICONS.UP : ICONS.DOWN}
-        onClick={toggleSearchExpanded}
-      />
-      <Form
-        className={classnames('search__options', {
-          'search__options--expanded': expanded,
-        })}
-      >
-        <table className="table table--condensed">
-          <tbody>
-            {addRow(__('Type'), typeElem)}
-            {addRow(uploadDateLabel, uploadDateElem)}
-            {addRow(__('Sort By'), sortByElem)}
-            {addRow(__('Exact Match'), exactMatchElem)}
-            {addRow(__('Hide Watched Content'), hideWatchedElem)}
-          </tbody>
-        </table>
-      </Form>
-    </div>
-  );
+        <div>
+            <Button
+                button="alt"
+                label={__('Filter')}
+                icon={ICONS.FILTER}
+                iconRight={expanded ? ICONS.UP : ICONS.DOWN}
+                onClick={toggleSearchExpanded}
+            />
+            <Form
+                className={classnames('search__options', {
+                    'search__options--expanded': expanded,
+                })}
+            >
+                <table className="table table--condensed">
+                    <tbody>
+                        {addRow(__('Type'), typeElem)}
+                        {addRow(uploadDateLabel, uploadDateElem)}
+                        {addRow(__('Sort By'), sortByElem)}
+                        {addRow(__('Exact Match'), exactMatchElem)}
+                        {addRow(__('Hide Watched Content'), hideWatchedElem)}
+                    </tbody>
+                </table>
+            </Form>
+        </div>
+    );
+
 };
 
 export default SearchOptions;

ui/scss/component/_claim-search.scss

@@ -36,7 +36,7 @@
 
 //UPDATE: Added style for checkbox on search page
 .claim-search__checkbox_searchbox {
-    // Placeholder.
+    // Placeholder
 }
 
 // UPDATE: Add style for checkbox label