Merge branch 'master' into 7645-LBRY-Hide-Watched-Content

.github/workflows/npm-publish-github-packages.yml

@@ -0,0 +1,36 @@
+# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
+# For more information see: https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages
+
+name: Node.js Package
+
+on:
+  release:
+    types: [created]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+      - run: npm ci
+      - run: npm test
+
+  publish-gpr:
+    needs: build
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: write
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          registry-url: https://npm.pkg.github.com/
+      - run: npm ci
+      - run: npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}}

.vs/ProjectSettings.json

@@ -0,0 +1,3 @@
+{
+  "CurrentProjectSetting": null
+}

.vs/VSWorkspaceState.json

@@ -0,0 +1,10 @@
+{
+  "ExpandedNodes": [
+    "",
+    "\\ui",
+    "\\ui\\component",
+    "\\ui\\component\\claimListHeader"
+  ],
+  "SelectedNode": "\\ui\\component\\claimListHeader\\view.jsx",
+  "PreviewInSolutionExplorer": false
+}

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...');
@@ -257,7 +258,24 @@ function ChannelForm(props: Props) {
         );
     }
 
-  React.useEffect(() => {
+    // Add "Hide Watched" to channel pages
+    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;
     if (!name && name !== undefined) {
       nameError = __('A name is required for your url');

ui/component/claimListDiscover/view.jsx

@@ -318,11 +318,6 @@ function ClaimListDiscover(props: Props) {
     if (orderParam === CS.ORDER_BY_TOP && freshnessParam !== CS.FRESH_ALL) {
       options.release_time = `>${Math.floor(moment().subtract(1, freshnessParam).startOf('hour').unix())}`;
     } else if (orderParam === CS.ORDER_BY_NEW || orderParam === CS.ORDER_BY_TRENDING) {
-      // Warning - hack below
-      // If users are following more than 10 channels or tags, limit results to stuff less than a year old
-      // For more than 20, drop it down to 6 months
-      // This helps with timeout issues for users that are following a ton of stuff
-      // https://github.com/lbryio/lbry-sdk/issues/2420
       if (
         (options.channel_ids && options.channel_ids.length > 20) ||
         (options.any_tags && options.any_tags.length > 20)

ui/component/claimListHeader/view.jsx

@@ -98,7 +98,22 @@ function ClaimListHeader(props: Props) {
 
   const shouldHighlight = searchInLanguage
     ? languageParam !== languageSetting && languageParam !== null
-    : languageParam !== CS.LANGUAGES_ALL && languageParam !== null;
+        : languageParam !== CS.LANGUAGES_ALL && languageParam !== null;
+
+    function getHideWatchedElem() {
+        return (
+            <div className={`claim-search__checkbox`}>
+                <FormField                    
+                    name="hide_watched"
+                    type="checkbox"
+                    checked={hideWatched}
+                    onChange={() => {
+                        setHideWatched((prev) => !prev);
+                    }}
+                />
+            </div>
+        );
+    }
 
     function getHideWatchedElem() {
         return (
@@ -497,10 +512,10 @@ function ClaimListHeader(props: Props) {
                         </option>
                       );
                     })}
-                  </FormField>
-                </div>
-              )}
+                   </FormField>
+                              </div>
 
+                          )}
               {channelIdsInUrl && (
                 <div className={'claim-search__input-container'}>
                   <label>{__('Advanced Filters from URL')}</label>
@@ -518,7 +533,7 @@ function ClaimListHeader(props: Props) {
                           </div>
             </div>
           </>
-        )}
+         )}
       </div>
 
       {hasMatureTags && hiddenNsfwMessage}

ui/component/claimPreview/view.jsx

@@ -147,7 +147,7 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
   } = props;
 
   const isMobile = useIsMobile();
-  const [hideWatched, setHideWatched] = usePersistedState('hideWatched', false); 
+  const [hideWatched, setHideWatched] = usePersistedState('hideWatched', false);
   const isCollection = claim && claim.value_type === 'collection';
   const collectionClaimId = isCollection && claim && claim.claim_id;
   const listId = collectionId || collectionClaimId;
@@ -256,8 +256,9 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
     if (customShouldHide(claim)) {
       shouldHide = true;
     }
-  }
+    }
 
+    
   // Weird placement warning
   // Make sure this happens after we figure out if this claim needs to be hidden
   const thumbnailUrl = useGetThumbnail(uri, claim, streamingUrl, getFile, shouldHide);
@@ -275,7 +276,7 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
     }
   }
 
-  useEffect(() => {
+    useEffect(() => {
     if (isValid && !isResolvingUri && shouldFetch && uri) {
       resolveUri(uri);
     }
@@ -291,7 +292,7 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
 
     if (shouldHide && !showNullPlaceholder) {
     return null;
-  }
+    }
 
   if (placeholder === 'loading' || (uri && !claim && isResolvingUri)) {
     return <ClaimPreviewLoading isChannel={isChannelUri} type={type} />;

ui/component/claimPreviewTile/view.jsx

@@ -146,18 +146,21 @@ 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));
-  }
+    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 (shouldHide) {
+        return null;
+    }
 
   const isChannelPage = location.pathname.startsWith('/@');
 

ui/component/searchOptions/view.jsx

@@ -60,7 +60,7 @@ const SearchOptions = (props: Props) => {
   if (simple) {
     delete TYPES_ADVANCED[SEARCH_OPTIONS.MEDIA_APPLICATION];
     delete TYPES_ADVANCED[SEARCH_OPTIONS.MEDIA_IMAGE];
-  }
+    }
 
   const [hideWatched, setHideWatched] = usePersistedState('hideWatched', false);
 
@@ -199,6 +199,7 @@ const SearchOptions = (props: Props) => {
         </>
     );
 
+
   const uploadDateElem = (
     <div className="filter-values">
       <FormField
@@ -219,7 +220,13 @@ const SearchOptions = (props: Props) => {
         onClick={() => updateSearchOptions(SEARCH_OPTIONS.TIME_FILTER, '')}
       />
     </div>
-  );
+    );
+
+    const hideWatchedElem = (
+        <div>
+            {getHideWatchedElem()}
+        </div>
+    );
 
     const hideWatchedElem = (
         <div>
@@ -241,7 +248,7 @@ const SearchOptions = (props: Props) => {
     </div>
   );
 
-  const uploadDateLabel =
+    const uploadDateLabel =
     options[SEARCH_OPTIONS.CLAIM_TYPE] === SEARCH_OPTIONS.INCLUDE_CHANNELS ? __('Creation Date') : __('Upload Date');
 
     return (
@@ -270,6 +277,7 @@ const SearchOptions = (props: Props) => {
             </Form>
         </div>
     );
+
 };
 
 export default SearchOptions;

ui/scss/component/_claim-search.scss

@@ -17,7 +17,7 @@
   margin-top: var(--spacing-m);
   margin-bottom: var(--spacing-m);
   color: var(--color-text-subtitle);
-  align-items: flex-start;
+  align-items: baseline;
 
   @media (min-width: $breakpoint-small) {
     flex-direction: row;
@@ -31,6 +31,7 @@
 .claim-search__checkbox {
     padding-left: 45%;
     padding-top: 7%;
+
 }
 
 //UPDATE: Added style for checkbox on search page

ui/scss/component/_file-thumbnail.scss

@@ -1,13 +1,13 @@
 .file-thumbnail__viewed-bar {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 5px;
-  background-color: var(--color-gray-7);
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 5px;
+    background-color: var(--color-gray-7);
 }
 
 .file-thumbnail__viewed-bar-progress {
-  height: 5px;
-  background-color: var(--color-primary);
+    height: 5px;
+    background-color: var(--color-primary);
 }

ui/scss/component/_search.scss

@@ -90,7 +90,7 @@
   .radio,
   .checkbox {
     display: inline-block;
-    margin-top: 0;
+    margin-top: 5px;    // UPDATE: Helps to align items in "Other Options" in search
 
     &:not(:first-of-type) {
       margin-top: var(--spacing-s);