From 1a8f82b92f327bb058d115445cddf187635f0885 Mon Sep 17 00:00:00 2001
From: infinite-persistence <inf.persistence@gmail.com>
Date: Fri, 24 Sep 2021 12:46:13 +0800
Subject: [PATCH] Use better tile-count on larger screens.

Used the same method as how the homepage does it.
---
 ui/page/discover/view.jsx | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

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