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,6 +258,23 @@ function ChannelForm(props: Props) {
         );
     }
 
+    // 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) {

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

@@ -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);
@@ -499,8 +514,8 @@ function ClaimListHeader(props: Props) {
                     })}
                    </FormField>
                               </div>
-              )}
 
+                          )}
               {channelIdsInUrl && (
                 <div className={'claim-search__input-container'}>
                   <label>{__('Advanced Filters from URL')}</label>

ui/component/claimPreview/view.jsx

@@ -258,6 +258,7 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
     }
     }
 
+    
   // 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);

ui/component/claimPreviewTile/view.jsx

@@ -152,7 +152,10 @@ function ClaimPreviewTile(props: Props) {
         shouldHide = true;
     } else {
         shouldHide =
-      banState.blacklisted || banState.filtered || (!showHiddenByUser && (banState.muted || banState.blocked));
+            banState.blacklisted ||
+            banState.filtered ||
+            (!showHiddenByUser && (banState.muted || banState.blocked)) ||
+            (isWatched && hideWatched);
     }
 
     if (shouldHide) {

ui/component/searchOptions/view.jsx

@@ -199,6 +199,7 @@ const SearchOptions = (props: Props) => {
         </>
     );
 
+
   const uploadDateElem = (
     <div className="filter-values">
       <FormField
@@ -227,6 +228,12 @@ const SearchOptions = (props: Props) => {
         </div>
     );
 
+    const hideWatchedElem = (
+        <div>
+            {getHideWatchedElem()}
+        </div>
+    );
+
     const sortByElem = (
     <div className="filter-values">
       <FormField
@@ -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/_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);