LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

Use better tile-count on larger screens.

Browse source 
Used the same method as how the homepage does it.
This commit is contained in:
infinite-persistence 2021-09-24 12:46:13 +08:00
parent 111dc695ca
commit 1a8f82b92f
No known key found for this signature in database
GPG key ID: B9C3252EDC3D0AA0
1 changed files with 11 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
ui/page/discover/view.jsx
View file

@ -8,7 +8,7 @@ import Page from 'component/page';
import ClaimListDiscover from 'component/claimListDiscover'; import ClaimListDiscover from 'component/claimListDiscover';
import Button from 'component/button'; import Button from 'component/button';
import useHover from 'effects/use-hover'; import useHover from 'effects/use-hover';
import { useIsMobile } from 'effects/use-screensize'; import { useIsMobile, useIsLargeScreen } from 'effects/use-screensize';
import analytics from 'analytics'; import analytics from 'analytics';
import HiddenNsfw from 'component/common/hidden-nsfw'; import HiddenNsfw from 'component/common/hidden-nsfw';
import Icon from 'component/common/icon'; import Icon from 'component/common/icon';
@ -18,7 +18,7 @@ import I18nMessage from 'component/i18nMessage';
import moment from 'moment'; import moment from 'moment';
import { getLivestreamUris } from 'util/livestream'; import { getLivestreamUris } from 'util/livestream';
const INITIAL_LIVESTREAM_TILE_LIMIT = 8; const DEFAULT_LIVESTREAM_TILE_LIMIT = 8;
type Props = { type Props = {
location: { search: string }, location: { search: string },
@ -51,6 +51,7 @@ function DiscoverPage(props: Props) {
const buttonRef = useRef(); const buttonRef = useRef();
const isHovering = useHover(buttonRef); const isHovering = useHover(buttonRef);
const isMobile = useIsMobile(); const isMobile = useIsMobile();
const isLargeScreen = useIsLargeScreen();
const urlParams = new URLSearchParams(search); const urlParams = new URLSearchParams(search);
const claimType = urlParams.get('claim_type'); const claimType = urlParams.get('claim_type');
@ -72,9 +73,11 @@ function DiscoverPage(props: Props) {
label = __('Unfollow'); label = __('Unfollow');
} }
const initialLivestreamTileLimit = getPageSize(DEFAULT_LIVESTREAM_TILE_LIMIT);
const [showViewMoreLivestreams, setShowViewMoreLivestreams] = React.useState(!dynamicRouteProps); const [showViewMoreLivestreams, setShowViewMoreLivestreams] = React.useState(!dynamicRouteProps);
const livestreamUris = getLivestreamUris(activeLivestreams, channelIds); const livestreamUris = getLivestreamUris(activeLivestreams, channelIds);
const useDualList = showViewMoreLivestreams && livestreamUris.length > INITIAL_LIVESTREAM_TILE_LIMIT; const useDualList = showViewMoreLivestreams && livestreamUris.length > initialLivestreamTileLimit;
function getElemMeta() { function getElemMeta() {
return !dynamicRouteProps ? ( return !dynamicRouteProps ? (
@ -106,6 +109,10 @@ function DiscoverPage(props: Props) {
); );
} }
function getPageSize(originalSize) {
return isLargeScreen ? originalSize * (3 / 2) : originalSize;
}
React.useEffect(() => { React.useEffect(() => {
if (repostedUri && !repostedClaimIsResolved) { if (repostedUri && !repostedClaimIsResolved) {
doResolveUri(repostedUri); doResolveUri(repostedUri);
@ -160,7 +167,7 @@ function DiscoverPage(props: Props) {
{useDualList && ( {useDualList && (
<> <>
<ClaimListDiscover <ClaimListDiscover
uris={livestreamUris.slice(0, INITIAL_LIVESTREAM_TILE_LIMIT)} uris={livestreamUris.slice(0, initialLivestreamTileLimit)}
headerLabel={headerLabel} headerLabel={headerLabel}
header={repostedUri ? <span /> : undefined} header={repostedUri ? <span /> : undefined}
tileLayout={repostedUri ? false : tileLayout} tileLayout={repostedUri ? false : tileLayout}