WildWest: limit livestream tiles + add ability to show more

Most likely this behavior will change in the future, so we'll leave `ClaimListDiscover` untouched and handle the logic at the page level.

This solution uses 2 `ClaimListDiscover` -- if the reduced livestream list is visible, it handles the header; else the normal list handles the header.

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,6 +18,8 @@ import I18nMessage from 'component/i18nMessage';
 import moment from 'moment';
 import { getLivestreamUris } from 'util/livestream';
 
+const DEFAULT_LIVESTREAM_TILE_LIMIT = 8;
+
 type Props = {
   location: { search: string },
   followedTags: Array<Tag>,
@@ -29,7 +31,7 @@ type Props = {
   dynamicRouteProps: RowDataItem,
   tileLayout: boolean,
   activeLivestreams: ?LivestreamInfo,
-  doFetchActiveLivestreams: () => void,
+  doFetchActiveLivestreams: (orderBy?: Array<string>, pageSize?: number, forceFetch?: boolean) => void,
 };
 
 function DiscoverPage(props: Props) {
@@ -49,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');
@@ -70,6 +73,46 @@ 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 > initialLivestreamTileLimit;
+
+  function getElemMeta() {
+    return !dynamicRouteProps ? (
+      <a
+        className="help"
+        href="https://lbry.com/faq/trending"
+        title={__('Learn more about LBRY Credits on %DOMAIN%', { DOMAIN })}
+      >
+        <I18nMessage
+          tokens={{
+            lbc: <LbcSymbol />,
+          }}
+        >
+          Results boosted by %lbc%
+        </I18nMessage>
+      </a>
+    ) : (
+      tag && !isMobile && (
+        <Button
+          ref={buttonRef}
+          button="alt"
+          icon={ICONS.SUBSCRIBE}
+          iconColor="red"
+          onClick={handleFollowClick}
+          requiresAuth={IS_WEB}
+          label={label}
+        />
+      )
+    );
+  }
+
+  function getPageSize(originalSize) {
+    return isLargeScreen ? originalSize * (3 / 2) : originalSize;
+  }
+
   React.useEffect(() => {
     if (repostedUri && !repostedClaimIsResolved) {
       doResolveUri(repostedUri);
@@ -112,20 +155,52 @@ function DiscoverPage(props: Props) {
   }
 
   React.useEffect(() => {
-    doFetchActiveLivestreams();
+    if (showViewMoreLivestreams) {
+      doFetchActiveLivestreams(CS.ORDER_BY_TRENDING_VALUE);
+    } else {
+      doFetchActiveLivestreams();
+    }
   }, []);
 
   return (
     <Page noFooter fullWidthPage={tileLayout}>
+      {useDualList && (
+        <>
+          <ClaimListDiscover
+            uris={livestreamUris.slice(0, initialLivestreamTileLimit)}
+            headerLabel={headerLabel}
+            header={repostedUri ? <span /> : undefined}
+            tileLayout={repostedUri ? false : tileLayout}
+            hideAdvancedFilter
+            hideFilters
+            infiniteScroll={false}
+            showNoSourceClaims={ENABLE_NO_SOURCE_CLAIMS}
+            meta={getElemMeta()}
+          />
+          <div className="livestream-list--view-more">
+            <Button
+              label={__('Show more livestreams')}
+              button="link"
+              iconRight={ICONS.ARROW_RIGHT}
+              className="claim-grid__title--secondary"
+              onClick={() => {
+                doFetchActiveLivestreams();
+                setShowViewMoreLivestreams(false);
+              }}
+            />
+          </div>
+        </>
+      )}
+
       <ClaimListDiscover
-        prefixUris={getLivestreamUris(activeLivestreams, channelIds)}
+        prefixUris={useDualList ? undefined : livestreamUris}
         hideAdvancedFilter={SIMPLE_SITE}
         hideFilters={SIMPLE_SITE ? !dynamicRouteProps : undefined}
-        header={repostedUri ? <span /> : undefined}
+        header={useDualList ? <span /> : repostedUri ? <span /> : undefined}
         tileLayout={repostedUri ? false : tileLayout}
         defaultOrderBy={SIMPLE_SITE ? (dynamicRouteProps ? undefined : CS.ORDER_BY_TRENDING) : undefined}
         claimType={claimType ? [claimType] : undefined}
-        headerLabel={headerLabel}
+        headerLabel={!useDualList && headerLabel}
         tags={tags}
         hiddenNsfwMessage={<HiddenNsfw type="page" />}
         repostedClaimId={repostedClaim ? repostedClaim.claim_id : null}
@@ -150,36 +225,7 @@ function DiscoverPage(props: Props) {
               undefined
             : 3
         }
-        meta={
-          !dynamicRouteProps ? (
-            <a
-              className="help"
-              href="https://lbry.com/faq/trending"
-              title={__('Learn more about LBRY Credits on %DOMAIN%', { DOMAIN })}
-            >
-              <I18nMessage
-                tokens={{
-                  lbc: <LbcSymbol />,
-                }}
-              >
-                Results boosted by %lbc%
-              </I18nMessage>
-            </a>
-          ) : (
-            tag &&
-            !isMobile && (
-              <Button
-                ref={buttonRef}
-                button="alt"
-                icon={ICONS.SUBSCRIBE}
-                iconColor="red"
-                onClick={handleFollowClick}
-                requiresAuth={IS_WEB}
-                label={label}
-              />
-            )
-          )
-        }
+        meta={!useDualList && getElemMeta()}
         hasSource
         showNoSourceClaims={ENABLE_NO_SOURCE_CLAIMS}
       />

ui/scss/component/_livestream.scss

@@ -459,3 +459,9 @@ $recent-msg-button__height: 2rem;
     }
   }
 }
+
+.livestream-list--view-more {
+  display: flex;
+  align-items: flex-end;
+  margin-bottom: var(--spacing-m);
+}