hub desktop related wip

This commit is contained in:
zeppi 2021-10-05 12:59:41 -04:00
parent a04c69f787
commit 746f83a55f
3 changed files with 144 additions and 6 deletions

View file

@ -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--"
}

View file

@ -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) {

View file

@ -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')}
titleActions={
signingChannel && (
// title={__('Related')}
// titleActions={
// 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}