ClaimListDiscover: repeat livestream-sorting changes in ClaimTilesDiscover

This commit is contained in:
infinite-persistence 2021-04-29 15:22:56 +08:00 committed by Sean Yesmunt
parent 8919cba43c
commit c2a766a3e8
6 changed files with 61 additions and 10 deletions

View file

@ -1,10 +1,12 @@
import { connect } from 'react-redux';
import ClaimList from './view';
import { SETTINGS } from 'lbry-redux';
import { SETTINGS, selectClaimSearchByQuery, selectClaimsByUri } from 'lbry-redux';
import { makeSelectClientSetting } from 'redux/selectors/settings';
const select = (state) => ({
searchInLanguage: makeSelectClientSetting(SETTINGS.SEARCH_IN_LANGUAGE)(state),
claimSearchByQuery: selectClaimSearchByQuery(state),
claimsByUri: selectClaimsByUri(state),
});
const perform = (dispatch) => ({});

View file

@ -9,6 +9,7 @@ import { FormField } from 'component/common/form';
import usePersistedState from 'effects/use-persisted-state';
import debounce from 'util/debounce';
import ClaimPreviewTile from 'component/claimPreviewTile';
import { prioritizeActiveLivestreams } from 'component/claimTilesDiscover/view';
const DEBOUNCE_SCROLL_HANDLER_MS = 150;
const SORT_NEW = 'new';
@ -38,6 +39,10 @@ type Props = {
tileLayout?: boolean,
searchInLanguage: boolean,
hideMenu?: boolean,
claimSearchByQuery: { [string]: Array<string> },
claimsByUri: { [string]: any },
liveLivestreamsFirst?: boolean,
livestreamMap?: { [string]: any },
};
export default function ClaimList(props: Props) {
@ -63,16 +68,33 @@ export default function ClaimList(props: Props) {
renderProperties,
searchInLanguage,
hideMenu,
claimSearchByQuery,
claimsByUri,
liveLivestreamsFirst,
livestreamMap,
} = props;
const [currentSort, setCurrentSort] = usePersistedState(persistedStorageKey, SORT_NEW);
const timedOut = uris === null;
const urisLength = (uris && uris.length) || 0;
const liveUris = [];
if (liveLivestreamsFirst && livestreamMap) {
prioritizeActiveLivestreams(uris, liveUris, livestreamMap, claimsByUri, claimSearchByQuery);
}
const sortedUris = (urisLength > 0 && (currentSort === SORT_NEW ? uris : uris.slice().reverse())) || [];
const noResultMsg = searchInLanguage
? __('No results. Contents may be hidden by the Language filter.')
: __('No results');
const resolveLive = (index) => {
if (liveLivestreamsFirst && livestreamMap && index < liveUris.length) {
return true;
}
return undefined;
};
function handleSortChange() {
setCurrentSort(currentSort === SORT_NEW ? SORT_OLD : SORT_NEW);
}
@ -101,8 +123,14 @@ export default function ClaimList(props: Props) {
return tileLayout && !header ? (
<section className="claim-grid">
{urisLength > 0 &&
uris.map((uri) => (
<ClaimPreviewTile key={uri} uri={uri} showHiddenByUser={showHiddenByUser} properties={renderProperties} />
uris.map((uri, index) => (
<ClaimPreviewTile
key={uri}
uri={uri}
showHiddenByUser={showHiddenByUser}
properties={renderProperties}
live={resolveLive(index)}
/>
))}
{!timedOut && urisLength === 0 && !loading && <div className="empty main--empty">{empty || noResultMsg}</div>}
{timedOut && timedOutMessage && <div className="empty main--empty">{timedOutMessage}</div>}
@ -165,12 +193,9 @@ export default function ClaimList(props: Props) {
// Hack to hide spee.ch thumbnail publishes
// If it meets these requirements, it was probably uploaded here:
// https://github.com/lbryio/lbry-redux/blob/master/src/redux/actions/publish.js#L74-L79
if (claim.name.length === 24 && !claim.name.includes(' ') && claim.value.author === 'Spee.ch') {
return true;
} else {
return false;
}
return claim.name.length === 24 && !claim.name.includes(' ') && claim.value.author === 'Spee.ch';
}}
live={resolveLive(index)}
/>
</React.Fragment>
))}

View file

@ -68,6 +68,8 @@ type Props = {
searchInLanguage: boolean,
scrollAnchor?: string,
showHiddenByUser?: boolean,
liveLivestreamsFirst?: boolean,
livestreamMap?: { [string]: any },
};
function ClaimListDiscover(props: Props) {
@ -119,6 +121,8 @@ function ClaimListDiscover(props: Props) {
searchInLanguage,
scrollAnchor,
showHiddenByUser = false,
liveLivestreamsFirst,
livestreamMap,
} = props;
const didNavigateForward = history.action === 'PUSH';
const { search } = location;
@ -494,6 +498,8 @@ function ClaimListDiscover(props: Props) {
includeSupportAction={includeSupportAction}
injectedItem={injectedItem}
showHiddenByUser={showHiddenByUser}
liveLivestreamsFirst={liveLivestreamsFirst}
livestreamMap={livestreamMap}
/>
{loading && (
<div className="claim-grid">
@ -524,6 +530,8 @@ function ClaimListDiscover(props: Props) {
includeSupportAction={includeSupportAction}
injectedItem={injectedItem}
showHiddenByUser={showHiddenByUser}
liveLivestreamsFirst={liveLivestreamsFirst}
livestreamMap={livestreamMap}
/>
{loading &&
new Array(dynamicPageSize)

View file

@ -70,6 +70,7 @@ type Props = {
repostUrl?: string,
hideMenu?: boolean,
isLivestream?: boolean,
live?: boolean,
};
const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
@ -120,6 +121,7 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
hideMenu = false,
// repostUrl,
isLivestream,
live,
} = props;
const WrapperElement = wrapperElement || 'li';
const shouldFetch =
@ -237,6 +239,11 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
return null;
}
let liveProperty = null;
if (live === true) {
liveProperty = (claim) => <>LIVE</>;
}
return (
<WrapperElement
ref={ref}
@ -246,6 +253,7 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
'claim-preview__wrapper--channel': isChannelUri && type !== 'inline',
'claim-preview__wrapper--inline': type === 'inline',
'claim-preview__wrapper--small': type === 'small',
'claim-preview__live': live,
})}
>
<>
@ -278,9 +286,9 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
</div>
)}
{/* @endif */}
{!isRepost && !isChannelUri && !isLivestream && (
{!isRepost && !isChannelUri && (
<div className="claim-preview__file-property-overlay">
<FileProperties uri={contentUri} small />
<FileProperties uri={contentUri} small properties={liveProperty} />
</div>
)}
</FileThumbnail>

View file

@ -9,6 +9,7 @@ import ClaimListDiscover from 'component/claimListDiscover';
import Page from 'component/page';
import Button from 'component/button';
import Icon from 'component/common/icon';
import useGetLivestreams from 'effects/use-get-livestreams';
type Props = {
subscribedChannels: Array<Subscription>,
@ -18,6 +19,7 @@ type Props = {
function ChannelsFollowingPage(props: Props) {
const { subscribedChannels, tileLayout } = props;
const hasSubsribedChannels = subscribedChannels.length > 0;
const { livestreamMap } = useGetLivestreams(0);
return !hasSubsribedChannels ? (
<ChannelsFollowingDiscoverPage />
@ -43,6 +45,8 @@ function ChannelsFollowingPage(props: Props) {
navigate={`/$/${PAGES.CHANNELS_FOLLOWING_DISCOVER}`}
/>
}
liveLivestreamsFirst
livestreamMap={livestreamMap}
/>
</Page>
);

View file

@ -15,6 +15,7 @@ import * as CS from 'constants/claim_search';
import Ads from 'web/component/ads';
import LbcSymbol from 'component/common/lbc-symbol';
import I18nMessage from 'component/i18nMessage';
import useGetLivestreams from 'effects/use-get-livestreams';
type Props = {
location: { search: string },
@ -43,6 +44,7 @@ function DiscoverPage(props: Props) {
const buttonRef = useRef();
const isHovering = useHover(buttonRef);
const isMobile = useIsMobile();
const { livestreamMap } = useGetLivestreams(0);
const urlParams = new URLSearchParams(search);
const claimType = urlParams.get('claim_type');
@ -148,6 +150,8 @@ function DiscoverPage(props: Props) {
)
)
}
liveLivestreamsFirst
livestreamMap={livestreamMap}
/>
</Page>
);