hub desktop related wip

static/app-strings.json

@@ -2180,5 +2180,13 @@
   "Creator": "Creator",
   "From comments": "From comments",
   "From search": "From search",
+  "Manage tags": "Manage tags",
+  "Enter the full channel name or URL to search.\n\nExamples:\n - @channel\n - @channel#3\n - https://odysee.com/@Odysee:8\n - lbry://@Odysee#8": "Enter the full channel name or URL to search.\n\nExamples:\n - @channel\n - @channel#3\n - https://odysee.com/@Odysee:8\n - lbry://@Odysee#8",
+  "Trending for #Btc": "Trending for #Btc",
+  "Block and muted channels": "Block and muted channels",
+  "Claiming credits...": "Claiming credits...",
+  "Strict": "Strict",
+  "MatchCount": "MatchCount",
+  "Word Count": "Word Count",
   "--end--": "--end--"
 }

ui/component/claimListDiscover/view.jsx

@@ -53,6 +53,7 @@ type Props = {
   streamType?: string | Array<string>,
   defaultStreamType?: string | Array<string>,
 
+  searchText?: string,
   empty?: string,
   feeAmount?: string,
   releaseTime?: string,
@@ -122,6 +123,7 @@ function ClaimListDiscover(props: Props) {
     name,
     claimType,
     pageSize,
+    searchText,
     defaultClaimType,
     streamType = SIMPLE_SITE ? [CS.FILE_VIDEO, CS.FILE_AUDIO] : undefined,
     defaultStreamType = SIMPLE_SITE ? CS.FILE_VIDEO : undefined, // add param for DEFAULT_STREAM_TYPE
@@ -281,6 +283,10 @@ function ClaimListDiscover(props: Props) {
     options.channel_ids = channelIdsParam;
   }
 
+  if (searchText) {
+    options.text = searchText;
+  }
+
   if (tagsParam) {
     if (tagsParam !== CS.TAGS_ALL && tagsParam !== '') {
       if (tagsParam === CS.TAGS_FOLLOWED) {

ui/component/recommendedContent/view.jsx

@@ -9,6 +9,9 @@ import { useIsMobile, useIsMediumScreen } from 'effects/use-screensize';
 import Button from 'component/button';
 import classnames from 'classnames';
 import RecSys from 'recsys';
+import { FormField } from '../common/form-components/form-field';
+import I18nMessage from '../i18nMessage';
+import CreditAmount from '../common/credit-amount';
 
 const VIEW_ALL_RELATED = 'view_all_related';
 const VIEW_MORE_FROM = 'view_more_from';
@@ -36,6 +39,8 @@ export default React.memo<Props>(function RecommendedContent(props: Props) {
     claimId,
   } = props;
   const [viewMode, setViewMode] = React.useState(VIEW_ALL_RELATED);
+  const [strict, setStrict] = React.useState(false);
+  const [wordCount, setWordCount] = React.useState(3);
   const signingChannel = claim && claim.signing_channel;
   const channelName = signingChannel ? signingChannel.name : null;
   const isMobile = useIsMobile();
@@ -64,14 +69,81 @@ export default React.memo<Props>(function RecommendedContent(props: Props) {
     }
   }
 
+  function getSearchTextForClaim(claim) {
+    const wordMap = {};
+
+    const addToWordmap = (word) => {
+      if (wordMap[word]) {
+        wordMap[word]++;
+      } else {
+        wordMap[word] = 1;
+      }
+    };
+
+    claim.name.split('-').map((word) => addToWordmap(word));
+    if (claim.value.title) {
+      claim.value.title.split(' ').map((word) => addToWordmap(word));
+    }
+    if (claim.value.tags) {
+      claim.value.tags.forEach((tag) => tag.split(' ').map((word) => addToWordmap(word)));
+    }
+    if (claim.value.description) {
+      claim.value.description.split(' ').map((word) => addToWordmap(word));
+    }
+    console.log('wordMap', wordMap);
+
+    const sorted = Object.entries(wordMap)
+      .sort(([, a], [, b]) => b - a)
+      .map(([el, val]) => el)
+      .filter((e) => e.length >= 4);
+    let searchText = sorted.slice(0, wordCount).join(strict ? ' +' : ' ');
+    console.log('searchText', searchText);
+    // console.log('claim.title');
+    // if (claim.value && claim.value.title) {
+    //   searchText += claim.value.title;
+    // }
+    // if (claim.value.description) {
+    //   searchText += claim.value.description;
+    // }
+    console.log('searchText', searchText);
+    return searchText;
+  }
+
+  const searchText = claim ? getSearchTextForClaim(claim) : undefined;
+
   return (
     <Card
       isBodyList
       smallTitle={!isMobile && !isMedium}
       className="file-page__recommended"
-      title={__('Related')}
+      // title={__('Related')}
-      titleActions={
+      // titleActions={
-        signingChannel && (
+      //   signingChannel && (
+      //     <>
+      //
+      //     <div className="recommended-content__toggles">
+      //
+      //       <Button
+      //         className={classnames('button-toggle', {
+      //           'button-toggle--active': viewMode === VIEW_ALL_RELATED,
+      //         })}
+      //         label={__('All')}
+      //         onClick={() => setViewMode(VIEW_ALL_RELATED)}
+      //       />
+      //
+      //       <Button
+      //         className={classnames('button-toggle', {
+      //           'button-toggle--active': viewMode === VIEW_MORE_FROM,
+      //         })}
+      //         label={__('More from %claim_name%', { claim_name: channelName })}
+      //         onClick={() => setViewMode(VIEW_MORE_FROM)}
+      //       />
+      //     </div>
+      //       </>
+      //   )
+      // }
+      subtitle={
+        <div className="card__whatever">
           <div className="recommended-content__toggles">
             <Button
               className={classnames('button-toggle', {
@@ -89,21 +161,73 @@ export default React.memo<Props>(function RecommendedContent(props: Props) {
               onClick={() => setViewMode(VIEW_MORE_FROM)}
             />
           </div>
-        )
+          <div className="section section__actions--between">
+            <FormField
+              name="word_count"
+              label={__('Word Count')}
+              min="0"
+              step="1"
+              type="number"
+              value={wordCount}
+              onChange={(event) => setWordCount(event.target.value)}
+            />
+            <FormField
+              name="search_strict"
+              label={__('Strict')}
+              type="checkbox"
+              checked={strict}
+              onChange={() => setStrict(!strict)}
+            />
+          </div>
+          <p>{searchText}</p>
+        </div>
       }
       body={
         <div>
-          {viewMode === VIEW_ALL_RELATED && (
+          {viewMode === VIEW_ALL_RELATED && IS_WEB && (
             <ClaimList
               type="small"
               loading={isSearching}
               uris={recommendedContentUris}
               hideMenu={isMobile}
+              infiniteScroll
               injectedItem={SHOW_ADS && IS_WEB && !isAuthenticated && <Ads small type={'video'} />}
               empty={__('No related content found')}
               onClick={handleRecommendationClicked}
             />
           )}
+          {/*{viewMode === VIEW_ALL_RELATED && !IS_WEB && (*/}
+          {/*  <ClaimList*/}
+          {/*    type="small"*/}
+          {/*    loading={isSearching}*/}
+          {/*    uris={recommendedContentUris}*/}
+          {/*    hideMenu={isMobile}*/}
+          {/*    infiniteScroll*/}
+          {/*    injectedItem={SHOW_ADS && IS_WEB && !isAuthenticated && <Ads small type={'video'} />}*/}
+          {/*    empty={__('No related content found')}*/}
+          {/*    onClick={handleRecommendationClicked}*/}
+          {/*  />*/}
+          {/*)}*/}
+          {viewMode === VIEW_ALL_RELATED && !IS_WEB && (
+            <ClaimListDiscover
+              hideAdvancedFilter
+              tileLayout={false}
+              showHeader={false}
+              type="small"
+              claimType={['stream']}
+              // orderBy={['trending_group', 'trending_mixed']}
+              orderBy={'new'}
+              pageSize={20}
+              infiniteScroll
+              hideFilters
+              searchText={searchText}
+              // channelIds={[signingChannel.claim_id]}
+              loading={isSearching}
+              hideMenu={isMobile}
+              injectedItem={SHOW_ADS && IS_WEB && !isAuthenticated && <Ads small type={'video'} />}
+              empty={__('No related content found')}
+            />
+          )}
           {viewMode === VIEW_MORE_FROM && signingChannel && (
             <ClaimListDiscover
               hideAdvancedFilter
@@ -113,7 +237,7 @@ export default React.memo<Props>(function RecommendedContent(props: Props) {
               claimType={['stream']}
               orderBy="new"
               pageSize={20}
-              infiniteScroll={false}
+              infiniteScroll={true}
               hideFilters
               channelIds={[signingChannel.claim_id]}
               loading={isSearching}