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

@@ -107,6 +107,7 @@ function ChannelForm(props: Props) {
   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) {
       return __('Claiming credits...');
@@ -241,6 +242,22 @@ function ChannelForm(props: Props) {
     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() {
         return (

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

@@ -146,6 +146,22 @@ function ClaimPreviewTile(props: Props) {
         return null;
     }
 
+    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;
+    }
+
   const isChannelPage = location.pathname.startsWith('/@');
 
   const shouldShowViewCount = !(!viewCount || (claim && claim.repost_url) || !isChannelPage);

ui/component/searchOptions/view.jsx

@@ -176,7 +176,6 @@ const SearchOptions = (props: Props) => {
     </>
   );
 
-    // Changed element name to exactMatchElem
     const exactMatchElem = (
         <>
             <div className="filter-values">
@@ -200,6 +199,7 @@ const SearchOptions = (props: Props) => {
         </>
     );
 
+
   const uploadDateElem = (
     <div className="filter-values">
       <FormField
@@ -228,6 +228,12 @@ const SearchOptions = (props: Props) => {
         </div>
     );
 
+    const hideWatchedElem = (
+        <div>
+            {getHideWatchedElem()}
+        </div>
+    );
+
     const sortByElem = (
     <div className="filter-values">
       <FormField
@@ -245,7 +251,6 @@ 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
@@ -272,6 +277,7 @@ const SearchOptions = (props: Props) => {
             </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