Category livestreams: re-implement using subSection + use horizontal scroll in mobile

The `useDualLayout` junk is super confusing to maintain and no longer extensible.

At the expense of making the "livestream + regular" list no longer seamlessly continuous when expanded (or when there just a handful of livestreams), use the new `subSection` feature to inject the livestream tiles.  This is far easier to manage and tweak.

static/app-strings.json

@@ -2170,6 +2170,7 @@
   "Starting Soon": "Starting Soon",
   "Streaming Now": "Streaming Now",
   "Live": "Live",
+  "Livestreams": "Livestreams",
   "Upcoming Livestreams": "Upcoming Livestreams",
   "Show more upcoming livestreams": "Show more upcoming livestreams",
   "Show less upcoming livestreams": "Show less upcoming livestreams",

ui/page/discover/livestreamSection.jsx

@@ -0,0 +1,159 @@
+// @flow
+import React from 'react';
+import Button from 'component/button';
+import { ENABLE_NO_SOURCE_CLAIMS } from 'config';
+import * as CS from 'constants/claim_search';
+import * as ICONS from 'constants/icons';
+import ClaimListDiscover from 'component/claimListDiscover';
+import { useIsMobile, useIsLargeScreen } from 'effects/use-screensize';
+import usePersistedState from 'effects/use-persisted-state';
+import { getLivestreamUris } from 'util/livestream';
+import { resolveLangForClaimSearch } from '../../util/default-languages';
+
+const DEFAULT_LIVESTREAM_TILE_LIMIT = 8;
+const SECTION = Object.freeze({ COLLAPSED: 1, EXPANDED: 2 });
+
+function getTileLimit(isLargeScreen, originalSize) {
+  return isLargeScreen ? originalSize * (3 / 2) : originalSize;
+}
+
+// ****************************************************************************
+// ****************************************************************************
+
+type Props = {
+  tileLayout: boolean,
+  channelIds?: Array<string>,
+  activeLivestreams: ?LivestreamInfo,
+  doFetchActiveLivestreams: (orderBy: ?Array<string>, lang: ?Array<string>) => void,
+  languageSetting?: string,
+  searchInLanguage?: boolean,
+  langParam?: string | null,
+};
+
+export default function LivestreamSection(props: Props) {
+  const {
+    tileLayout,
+    channelIds,
+    activeLivestreams,
+    doFetchActiveLivestreams,
+    languageSetting,
+    searchInLanguage,
+    langParam,
+  } = props;
+
+  const [liveSectionStore, setLiveSectionStore] = usePersistedState('discover:lsSection', SECTION.COLLAPSED);
+  const [expandedYPos, setExpandedYPos] = React.useState(null);
+
+  const isMobile = useIsMobile();
+  const isLargeScreen = useIsLargeScreen();
+
+  const initialLiveTileLimit = getTileLimit(isLargeScreen, DEFAULT_LIVESTREAM_TILE_LIMIT);
+  const [liveSection, setLiveSection] = React.useState(liveSectionStore || SECTION.COLLAPSED);
+  const livestreamUris = getLivestreamUris(activeLivestreams, channelIds);
+  const liveTilesOverLimit = livestreamUris && livestreamUris.length > initialLiveTileLimit;
+
+  function collapseSection() {
+    window.scrollTo(0, 0);
+    setLiveSection(SECTION.COLLAPSED);
+  }
+
+  React.useEffect(() => {
+    // Sync liveSection --> liveSectionStore
+    if (liveSection !== liveSectionStore) {
+      setLiveSectionStore(liveSection);
+    }
+  }, [liveSection, setLiveSectionStore, liveSectionStore]);
+
+  React.useEffect(() => {
+    // Fetch active livestreams on mount
+    const langCsv = resolveLangForClaimSearch(languageSetting, searchInLanguage, langParam);
+    const lang = langCsv ? langCsv.split(',') : null;
+    doFetchActiveLivestreams(CS.ORDER_BY_NEW_VALUE, lang);
+    // eslint-disable-next-line react-hooks/exhaustive-deps, (on mount only)
+  }, []);
+
+  React.useEffect(() => {
+    // Maintain y-position when expanding livestreams section:
+    if (liveSection === SECTION.EXPANDED && expandedYPos !== null) {
+      window.scrollTo(0, expandedYPos);
+      setExpandedYPos(null);
+    }
+  }, [liveSection, expandedYPos]);
+
+  if (!livestreamUris || livestreamUris.length === 0) {
+    return null;
+  }
+
+  if (isMobile) {
+    return (
+      <div className="livestream-list">
+        <ClaimListDiscover
+          uris={livestreamUris}
+          tileLayout={livestreamUris.length > 1 ? true : tileLayout}
+          swipeLayout={livestreamUris.length > 1}
+          headerLabel={<div className="section__title">{__('Livestreams')}</div>}
+          useSkeletonScreen={false}
+          showHeader={false}
+          hideFilters
+          infiniteScroll={false}
+          loading={false}
+          showNoSourceClaims={ENABLE_NO_SOURCE_CLAIMS}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className="livestream-list">
+      {liveTilesOverLimit && liveSection === SECTION.EXPANDED && (
+        <div className="livestream-list--view-more">
+          <Button
+            label={__('Show less livestreams')}
+            button="link"
+            iconRight={ICONS.UP}
+            className="claim-grid__title--secondary"
+            onClick={collapseSection}
+          />
+        </div>
+      )}
+
+      <ClaimListDiscover
+        uris={liveSection === SECTION.COLLAPSED ? livestreamUris.slice(0, initialLiveTileLimit) : livestreamUris}
+        tileLayout={tileLayout}
+        showHeader={false}
+        hideFilters
+        infiniteScroll={false}
+        loading={false}
+        showNoSourceClaims={ENABLE_NO_SOURCE_CLAIMS}
+      />
+
+      {liveTilesOverLimit && liveSection === SECTION.COLLAPSED && (
+        <div className="livestream-list--view-more">
+          <Button
+            label={__('Show more livestreams')}
+            button="link"
+            iconRight={ICONS.DOWN}
+            className="claim-grid__title--secondary"
+            onClick={() => {
+              doFetchActiveLivestreams();
+              setExpandedYPos(window.scrollY);
+              setLiveSection(SECTION.EXPANDED);
+            }}
+          />
+        </div>
+      )}
+
+      {liveTilesOverLimit && liveSection === SECTION.EXPANDED && (
+        <div className="livestream-list--view-more">
+          <Button
+            label={__('Show less livestreams')}
+            button="link"
+            iconRight={ICONS.UP}
+            className="claim-grid__title--secondary"
+            onClick={collapseSection}
+          />
+        </div>
+      )}
+    </div>
+  );
+}

ui/page/discover/view.jsx

@@ -1,15 +1,14 @@
 // @flow
-import { SHOW_ADS, DOMAIN, SIMPLE_SITE, ENABLE_NO_SOURCE_CLAIMS } from 'config';
+import { SHOW_ADS, DOMAIN, SIMPLE_SITE } from 'config';
 import * as ICONS from 'constants/icons';
 import * as PAGES from 'constants/pages';
 import * as CS from 'constants/claim_search';
-import React, { useState, useRef } from 'react';
+import React, { useRef } from 'react';
 import Page from 'component/page';
 import ClaimListDiscover from 'component/claimListDiscover';
 import Button from 'component/button';
 import useHover from 'effects/use-hover';
-import { useIsMobile, useIsLargeScreen } from 'effects/use-screensize';
+import { useIsMobile } from 'effects/use-screensize';
-import usePersistedState from 'effects/use-persisted-state';
 import analytics from 'analytics';
 import HiddenNsfw from 'component/common/hidden-nsfw';
 import Icon from 'component/common/icon';
@@ -17,15 +16,10 @@ import Ads, { injectAd } from 'web/component/ads';
 import LbcSymbol from 'component/common/lbc-symbol';
 import I18nMessage from 'component/i18nMessage';
 import moment from 'moment';
-import { resolveLangForClaimSearch } from 'util/default-languages';
+import LivestreamSection from './livestreamSection';
-import { getLivestreamUris } from 'util/livestream';
-
-const DEFAULT_LIVESTREAM_TILE_LIMIT = 8;
-const SECTION = Object.freeze({ HIDDEN: 0, LESS: 1, MORE: 2 });
 
 type Props = {
   dynamicRouteProps: RowDataItem,
-  // --- redux ---
   location: { search: string },
   followedTags: Array<Tag>,
   repostedUri: string,
@@ -57,13 +51,9 @@ function DiscoverPage(props: Props) {
     dynamicRouteProps,
   } = props;
 
-  const [liveSectionStore, setLiveSectionStore] = usePersistedState('discover:liveSection', SECTION.LESS);
-  const [expandedYPos, setExpandedYPos] = useState(null);
-
   const buttonRef = useRef();
   const isHovering = useHover(buttonRef);
   const isMobile = useIsMobile();
-  const isLargeScreen = useIsLargeScreen();
 
   const urlParams = new URLSearchParams(search);
   const langParam = urlParams.get(CS.LANGUAGE_KEY) || null;
@@ -86,57 +76,53 @@ function DiscoverPage(props: Props) {
     label = __('Unfollow');
   }
 
-  const initialLiveTileLimit = getPageSize(DEFAULT_LIVESTREAM_TILE_LIMIT);
-
   const includeLivestreams = !tagsQuery;
-  const [liveSection, setLiveSection] = useState(includeLivestreams ? liveSectionStore : SECTION.HIDDEN);
-  const livestreamUris = includeLivestreams && getLivestreamUris(activeLivestreams, channelIds);
-  const liveTilesOverLimit = livestreamUris && livestreamUris.length > initialLiveTileLimit;
-  const useDualList = liveSection === SECTION.LESS && liveTilesOverLimit;
 
   function getMeta() {
-    return (
+    if (!dynamicRouteProps) {
-      <>
+      return (
-        {!dynamicRouteProps ? (
+        <a
-          <a
+          className="help"
-            className="help"
+          href="https://odysee.com/@OdyseeHelp:b/trending:50"
-            href="https://odysee.com/@OdyseeHelp:b/trending:50"
+          title={__('Learn more about Credits on %DOMAIN%', { DOMAIN })}
-            title={__('Learn more about Credits on %DOMAIN%', { DOMAIN })}
+        >
-          >
+          <I18nMessage tokens={{ lbc: <LbcSymbol /> }}>Results boosted by %lbc%</I18nMessage>
-            <I18nMessage tokens={{ lbc: <LbcSymbol /> }}>Results boosted by %lbc%</I18nMessage>
+        </a>
-          </a>
+      );
-        ) : (
+    }
-          tag &&
-          !isMobile && (
-            <Button
-              ref={buttonRef}
-              button="alt"
-              icon={ICONS.SUBSCRIBE}
-              iconColor="red"
-              onClick={handleFollowClick}
-              requiresAuth={IS_WEB}
-              label={label}
-            />
-          )
-        )}
 
-        {liveSection === SECTION.MORE && liveTilesOverLimit && (
+    if (tag && !isMobile) {
-          <div className="livestream-list--view-more">
+      return (
-            <Button
+        <Button
-              label={__('Show less livestreams')}
+          ref={buttonRef}
-              button="link"
+          button="alt"
-              iconRight={ICONS.UP}
+          icon={ICONS.SUBSCRIBE}
-              className="claim-grid__title--secondary"
+          iconColor="red"
-              onClick={() => setLiveSection(SECTION.LESS)}
+          onClick={handleFollowClick}
-            />
+          requiresAuth={IS_WEB}
-          </div>
+          label={label}
-        )}
+        />
-      </>
+      );
-    );
+    }
+
+    return null;
   }
 
-  function getPageSize(originalSize) {
+  function getSubSection() {
-    return isLargeScreen ? originalSize * (3 / 2) : originalSize;
+    if (includeLivestreams) {
+      return (
+        <LivestreamSection
+          tileLayout={repostedUri ? false : tileLayout}
+          channelIds={channelIds}
+          activeLivestreams={activeLivestreams}
+          doFetchActiveLivestreams={doFetchActiveLivestreams}
+          languageSetting={languageSetting}
+          searchInLanguage={searchInLanguage}
+          langParam={langParam}
+        />
+      );
+    }
+    return null;
   }
 
   function getPins(routeProps) {
@@ -193,78 +179,21 @@ function DiscoverPage(props: Props) {
     if (isAuthenticated || !SHOW_ADS || window.location.pathname === `/$/${PAGES.WILD_WEST}`) {
       return;
     }
-
-    // inject ad into last visible card
     injectAd();
   }, [isAuthenticated]);
 
-  // Sync liveSection --> liveSectionStore
-  React.useEffect(() => {
-    if (liveSection !== SECTION.HIDDEN && liveSection !== liveSectionStore) {
-      setLiveSectionStore(liveSection);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [liveSection]);
-
-  // Fetch active livestreams on mount
-  React.useEffect(() => {
-    const langCsv = resolveLangForClaimSearch(languageSetting, searchInLanguage, langParam);
-    const lang = langCsv ? langCsv.split(',') : null;
-    doFetchActiveLivestreams(CS.ORDER_BY_NEW_VALUE, lang);
-    // eslint-disable-next-line react-hooks/exhaustive-deps, (on mount only)
-  }, []);
-
-  // Maintain y-position when expanding livestreams section:
-  React.useEffect(() => {
-    if (liveSection === SECTION.MORE && expandedYPos !== null) {
-      window.scrollTo(0, expandedYPos);
-      setExpandedYPos(null);
-    }
-  }, [liveSection, expandedYPos]);
-
   return (
     <Page noFooter fullWidthPage={tileLayout}>
-      {useDualList && (
-        <>
-          <ClaimListDiscover
-            uris={livestreamUris && livestreamUris.slice(0, initialLiveTileLimit)}
-            headerLabel={headerLabel}
-            header={repostedUri ? <span /> : undefined}
-            tileLayout={repostedUri ? false : tileLayout}
-            hideFilters
-            infiniteScroll={false}
-            loading={false}
-            showNoSourceClaims={ENABLE_NO_SOURCE_CLAIMS}
-            meta={getMeta()}
-          />
-          <div className="livestream-list--view-more">
-            <Button
-              label={__('Show more livestreams')}
-              button="link"
-              iconRight={ICONS.DOWN}
-              className="claim-grid__title--secondary"
-              onClick={() => {
-                doFetchActiveLivestreams();
-                setExpandedYPos(window.scrollY);
-                setLiveSection(SECTION.MORE);
-              }}
-            />
-          </div>
-        </>
-      )}
-
       <Ads type="homepage" />
-
       <ClaimListDiscover
-        prefixUris={useDualList ? undefined : livestreamUris}
+        pins={getPins(dynamicRouteProps)}
-        pins={useDualList ? undefined : getPins(dynamicRouteProps)}
         hideFilters={SIMPLE_SITE ? !(dynamicRouteProps || tags) : undefined}
-        showHeader={!useDualList}
+        header={repostedUri ? <span /> : undefined}
-        header={useDualList ? <span /> : repostedUri ? <span /> : undefined}
+        subSection={getSubSection()}
         tileLayout={repostedUri ? false : tileLayout}
         defaultOrderBy={SIMPLE_SITE ? (dynamicRouteProps ? undefined : CS.ORDER_BY_TRENDING) : undefined}
         claimType={claimType ? [claimType] : undefined}
-        headerLabel={!useDualList && headerLabel}
+        headerLabel={headerLabel}
         tags={tags}
         hiddenNsfwMessage={<HiddenNsfw type="page" />}
         repostedClaimId={repostedClaim ? repostedClaim.claim_id : null}
@@ -288,9 +217,8 @@ function DiscoverPage(props: Props) {
             ? (dynamicRouteProps && dynamicRouteProps.options && dynamicRouteProps.options.limitClaimsPerChannel) || 3
             : 3
         }
-        meta={!useDualList && getMeta()}
+        meta={getMeta()}
         hasSource
-        showNoSourceClaims={ENABLE_NO_SOURCE_CLAIMS}
       />
     </Page>
   );

ui/scss/component/_livestream.scss

@@ -169,23 +169,17 @@
   }
 }
 
-.livestream-list--view-more {
+.livestream-list {
-  display: flex;
+  margin-bottom: var(--spacing-l);
-  margin-left: var(--spacing-s);
+  border-bottom: 1px solid var(--color-border);
-  margin-bottom: var(--spacing-xxxs);
 
-  @media (max-width: $breakpoint-small) {
+  .claim-list__header-label {
-    button {
+    margin-top: 0;
-      .button__content {
-        span {
-          // This is being set in '.section__actions' to '--font-xxsmall',
-          // causing the button to shrink in mobile.
-          // I think it is only needed for the mobile comments and shouldn't
-          // be applied globally?
-          // Anyway, reverting for this use-case only for now to reduce testing.
-          font-size: unset;
-        }
-      }
-    }
   }
 }
+
+.livestream-list--view-more {
+  display: flex;
+  align-items: flex-end;
+  margin-bottom: var(--spacing-s);
+}