ClaimListDiscover: repeat livestream-sorting changes in ClaimTilesDiscover
This commit is contained in:
parent
8919cba43c
commit
c2a766a3e8
6 changed files with 61 additions and 10 deletions
|
@ -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) => ({});
|
||||
|
|
|
@ -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>
|
||||
))}
|
||||
|
|
|
@ -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)
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
|
|
Loading…
Reference in a new issue