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.
lbryio · Sep 25, 2021 · 9031d24 · 9031d24
1 parent 64effb4
commit 9031d24
Show file tree

Hide file tree

Showing 2 changed files with 88 additions and 36 deletions.
diff --git 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,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}
  />

diff --git a/ui/scss/component/_livestream.scss b/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);
+}