flow-typed/livestream.js

@@ -24,4 +24,18 @@ declare type LivestreamReplayData = Array<LivestreamReplayItem>;
 declare type LivestreamState = {
   fetchingById: {},
   viewersById: {},
+  fetchingActiveLivestreams: boolean,
+  activeLivestreams: ?LivestreamInfo,
+  activeLivestreamsLastFetchedDate: number,
+  activeLivestreamsLastFetchedOptions: {},
+}
+
+declare type LivestreamInfo = {
+  [/* creatorId */ string]: {
+    live: boolean,
+    viewCount: number,
+    creatorId: string,
+    latestClaimId: string,
+    latestClaimUri: string,
+  }
 }

ui/component/claimList/index.js

@@ -1,12 +1,10 @@
 import { connect } from 'react-redux';
 import ClaimList from './view';
-import { SETTINGS, selectClaimSearchByQuery, selectClaimsByUri } from 'lbry-redux';
+import { SETTINGS } from 'lbry-redux';
 import { makeSelectClientSetting } from 'redux/selectors/settings';
 
 const select = (state) => ({
   searchInLanguage: makeSelectClientSetting(SETTINGS.SEARCH_IN_LANGUAGE)(state),
-  claimSearchByQuery: selectClaimSearchByQuery(state),
-  claimsByUri: selectClaimsByUri(state),
 });
 
 export default connect(select)(ClaimList);

ui/component/claimList/view.jsx

@@ -9,7 +9,6 @@ import { FormField } from 'component/common/form';
 import usePersistedState from 'effects/use-persisted-state';
 import debounce from 'util/debounce';
 import ClaimPreviewTile from 'component/claimPreviewTile';
-import { prioritizeActiveLivestreams } from 'component/claimTilesDiscover/view';
 
 const DEBOUNCE_SCROLL_HANDLER_MS = 150;
 const SORT_NEW = 'new';
@@ -17,6 +16,7 @@ const SORT_OLD = 'old';
 
 type Props = {
   uris: Array<string>,
+  prefixUris?: Array<string>,
   header: Node | boolean,
   headerAltControls: Node,
   loading: boolean,
@@ -41,9 +41,6 @@ type Props = {
   hideMenu?: boolean,
   claimSearchByQuery: { [string]: Array<string> },
   claimsByUri: { [string]: any },
-  liveLivestreamsFirst?: boolean,
-  livestreamMap?: { [string]: any },
-  searchOptions?: any,
   collectionId?: string,
   showNoSourceClaims?: boolean,
   onClick?: (e: any, claim?: ?Claim, index?: number) => void,
@@ -53,6 +50,7 @@ export default function ClaimList(props: Props) {
   const {
     activeUri,
     uris,
+    prefixUris,
     headerAltControls,
     loading,
     persistedStorageKey,
@@ -73,37 +71,25 @@ export default function ClaimList(props: Props) {
     renderProperties,
     searchInLanguage,
     hideMenu,
-    claimSearchByQuery,
-    claimsByUri,
-    liveLivestreamsFirst,
-    livestreamMap,
-    searchOptions,
     collectionId,
     showNoSourceClaims,
     onClick,
   } = props;
 
   const [currentSort, setCurrentSort] = usePersistedState(persistedStorageKey, SORT_NEW);
+
+  // Exclude prefix uris in these results variables. We don't want to show
+  // anything if the search failed or timed out.
   const timedOut = uris === null;
   const urisLength = (uris && uris.length) || 0;
 
-  const liveUris = [];
+  const tileUris = (prefixUris || []).concat(uris);
-  if (liveLivestreamsFirst && livestreamMap) {
+  const sortedUris = (urisLength > 0 && (currentSort === SORT_NEW ? tileUris : tileUris.slice().reverse())) || [];
-    prioritizeActiveLivestreams(uris, liveUris, livestreamMap, claimsByUri, claimSearchByQuery, searchOptions);
-  }
 
-  const sortedUris = (urisLength > 0 && (currentSort === SORT_NEW ? uris : uris.slice().reverse())) || [];
   const noResultMsg = searchInLanguage
     ? __('No results. Contents may be hidden by the Language filter.')
     : __('No results');
 
-  const resolveLive = (index) => {
-    if (liveLivestreamsFirst && livestreamMap && index < liveUris.length) {
-      return true;
-    }
-    return undefined;
-  };
-
   function handleSortChange() {
     setCurrentSort(currentSort === SORT_NEW ? SORT_OLD : SORT_NEW);
   }
@@ -138,13 +124,12 @@ export default function ClaimList(props: Props) {
   return tileLayout && !header ? (
     <section className="claim-grid">
       {urisLength > 0 &&
-        uris.map((uri, index) => (
+        tileUris.map((uri) => (
           <ClaimPreviewTile
             key={uri}
             uri={uri}
             showHiddenByUser={showHiddenByUser}
             properties={renderProperties}
-            live={resolveLive(index)}
             collectionId={collectionId}
             showNoSourceClaims={showNoSourceClaims}
           />
@@ -216,7 +201,6 @@ export default function ClaimList(props: Props) {
                   // https://github.com/lbryio/lbry-redux/blob/master/src/redux/actions/publish.js#L74-L79
                   return claim.name.length === 24 && !claim.name.includes(' ') && claim.value.author === 'Spee.ch';
                 }}
-                live={resolveLive(index)}
                 onClick={(e, claim, index) => handleClaimClicked(e, claim, index)}
               />
             </React.Fragment>

ui/component/claimListDiscover/view.jsx

@@ -13,11 +13,12 @@ import ClaimPreview from 'component/claimPreview';
 import ClaimPreviewTile from 'component/claimPreviewTile';
 import I18nMessage from 'component/i18nMessage';
 import ClaimListHeader from 'component/claimListHeader';
+import useFetchViewCount from 'effects/use-fetch-view-count';
 import { useIsLargeScreen } from 'effects/use-screensize';
-import { getLivestreamOnlyOptions } from 'util/search';
 
 type Props = {
   uris: Array<string>,
+  prefixUris?: Array<string>,
   name?: string,
   type: string,
   pageSize?: number,
@@ -31,7 +32,6 @@ type Props = {
   includeSupportAction?: boolean,
   infiniteScroll?: Boolean,
   isChannel?: boolean,
-  liveLivestreamsFirst?: boolean,
   personalView: boolean,
   showHeader: boolean,
   showHiddenByUser?: boolean,
@@ -64,7 +64,6 @@ type Props = {
   channelIds?: Array<string>,
   claimIds?: Array<string>,
   subscribedChannels: Array<Subscription>,
-  livestreamMap?: { [string]: any },
 
   header?: Node,
   headerLabel?: string | Node,
@@ -137,6 +136,7 @@ function ClaimListDiscover(props: Props) {
     injectedItem,
     feeAmount,
     uris,
+    prefixUris,
     tileLayout,
     hideFilters = false,
     claimIds,
@@ -148,8 +148,6 @@ function ClaimListDiscover(props: Props) {
     releaseTime,
     scrollAnchor,
     showHiddenByUser = false,
-    liveLivestreamsFirst,
-    livestreamMap,
     hasSource,
     hasNoSource,
     isChannel = false,
@@ -380,9 +378,9 @@ function ClaimListDiscover(props: Props) {
 
   const hasMatureTags = tagsParam && tagsParam.split(',').some((t) => MATURE_TAGS.includes(t));
 
-  const mainSearchKey = createNormalizedClaimSearchKey(options);
+  const searchKey = createNormalizedClaimSearchKey(options);
-  let claimSearchResult = claimSearchByQuery[mainSearchKey];
+  const claimSearchResult = claimSearchByQuery[searchKey];
-  const claimSearchResultLastPageReached = claimSearchByQueryLastPageReached[mainSearchKey];
+  const claimSearchResultLastPageReached = claimSearchByQueryLastPageReached[searchKey];
 
   // uncomment to fix an item on a page
   //   const fixUri = 'lbry://@corbettreport#0/lbryodysee#5';
@@ -400,14 +398,6 @@ function ClaimListDiscover(props: Props) {
   //     claimSearchResult.splice(2, 0, fixUri);
   //   }
 
-  const livestreamSearchKey = liveLivestreamsFirst
-    ? createNormalizedClaimSearchKey(getLivestreamOnlyOptions(options))
-    : undefined;
-  const livestreamSearchResult = livestreamSearchKey && claimSearchByQuery[livestreamSearchKey];
-
-  const [finalUris, setFinalUris] = React.useState(
-    getFinalUrisInitialState(history.action === 'POP', claimSearchResult)
-  );
   const [prevOptions, setPrevOptions] = React.useState(null);
 
   if (!isJustScrollingToNewPage(prevOptions, options)) {
@@ -469,6 +459,8 @@ function ClaimListDiscover(props: Props) {
     </div>
   );
 
+  const renderUris = uris || claimSearchResult;
+
   // **************************************************************************
   // Helpers
   // **************************************************************************
@@ -514,41 +506,6 @@ function ClaimListDiscover(props: Props) {
     }
   }
 
-  function urisEqual(prev: Array<string>, next: Array<string>) {
-    if (!prev || !next) {
-      // From 'ClaimList', "null" and "undefined" have special meaning,
-      // so we can't just compare array length here.
-      //   - null = "timed out"
-      //   - undefined = "no result".
-      return prev === next;
-    }
-    return prev.length === next.length && prev.every((value, index) => value === next[index]);
-  }
-
-  function getFinalUrisInitialState(isNavigatingBack, claimSearchResult) {
-    if (isNavigatingBack && claimSearchResult && claimSearchResult.length > 0) {
-      return claimSearchResult;
-    } else {
-      return [];
-    }
-  }
-
-  function fetchViewCountForUris(uris) {
-    const claimIds = [];
-
-    if (uris) {
-      uris.forEach((uri) => {
-        if (claimsByUri[uri]) {
-          claimIds.push(claimsByUri[uri].claim_id);
-        }
-      });
-    }
-
-    if (claimIds.length > 0) {
-      doFetchViewCount(claimIds.join(','));
-    }
-  }
-
   function resolveOrderByOption(orderBy: string | Array<string>, sortBy: string | Array<string>) {
     const order_by =
       orderBy === CS.ORDER_BY_TRENDING
@@ -567,38 +524,15 @@ function ClaimListDiscover(props: Props) {
   // **************************************************************************
   // **************************************************************************
 
+  useFetchViewCount(fetchViewCount, renderUris, claimsByUri, doFetchViewCount);
+
   React.useEffect(() => {
     if (shouldPerformSearch) {
       const searchOptions = JSON.parse(optionsStringForEffect);
       doClaimSearch(searchOptions);
-
-      if (liveLivestreamsFirst && options.page === 1) {
-        doClaimSearch(getLivestreamOnlyOptions(searchOptions));
-      }
     }
   }, [doClaimSearch, shouldPerformSearch, optionsStringForEffect, forceRefresh]);
 
-  // Resolve 'finalUri'
-  React.useEffect(() => {
-    if (uris) {
-      if (!urisEqual(uris, finalUris)) {
-        setFinalUris(uris);
-      }
-    } else {
-      // Wait until all queries are done before updating the uris to avoid layout shifts.
-      const pending = claimSearchResult === undefined || (liveLivestreamsFirst && livestreamSearchResult === undefined);
-      if (!pending && !urisEqual(claimSearchResult, finalUris)) {
-        setFinalUris(claimSearchResult);
-      }
-    }
-  }, [uris, claimSearchResult, finalUris, setFinalUris, liveLivestreamsFirst, livestreamSearchResult]);
-
-  React.useEffect(() => {
-    if (fetchViewCount) {
-      fetchViewCountForUris(finalUris);
-    }
-  }, [finalUris]); // eslint-disable-line react-hooks/exhaustive-deps
-
   const headerToUse = header || (
     <ClaimListHeader
       channelIds={channelIds}
@@ -636,7 +570,8 @@ function ClaimListDiscover(props: Props) {
           <ClaimList
             tileLayout
             loading={loading}
-            uris={finalUris}
+            uris={renderUris}
+            prefixUris={prefixUris}
             onScrollBottom={handleScrollBottom}
             page={page}
             pageSize={dynamicPageSize}
@@ -645,8 +580,6 @@ function ClaimListDiscover(props: Props) {
             includeSupportAction={includeSupportAction}
             injectedItem={injectedItem}
             showHiddenByUser={showHiddenByUser}
-            liveLivestreamsFirst={liveLivestreamsFirst}
-            livestreamMap={livestreamMap}
             searchOptions={options}
             showNoSourceClaims={showNoSourceClaims}
             empty={empty}
@@ -670,7 +603,8 @@ function ClaimListDiscover(props: Props) {
           <ClaimList
             type={type}
             loading={loading}
-            uris={finalUris}
+            uris={renderUris}
+            prefixUris={prefixUris}
             onScrollBottom={handleScrollBottom}
             page={page}
             pageSize={dynamicPageSize}
@@ -679,8 +613,6 @@ function ClaimListDiscover(props: Props) {
             includeSupportAction={includeSupportAction}
             injectedItem={injectedItem}
             showHiddenByUser={showHiddenByUser}
-            liveLivestreamsFirst={liveLivestreamsFirst}
-            livestreamMap={livestreamMap}
             searchOptions={options}
             showNoSourceClaims={hasNoSource || showNoSourceClaims}
             empty={empty}

ui/component/claimPreview/index.js

@@ -20,6 +20,7 @@ import {
 } from 'lbry-redux';
 import { selectMutedChannels, makeSelectChannelIsMuted } from 'redux/selectors/blocked';
 import { selectBlackListedOutpoints, selectFilteredOutpoints } from 'lbryinc';
+import { makeSelectIsActiveLivestream } from 'redux/selectors/livestream';
 import { selectShowMatureContent } from 'redux/selectors/settings';
 import { makeSelectHasVisitedUri } from 'redux/selectors/content';
 import { makeSelectIsSubscribed } from 'redux/selectors/subscriptions';
@@ -56,6 +57,7 @@ const select = (state, props) => {
     streamingUrl: props.uri && makeSelectStreamingUrlForUri(props.uri)(state),
     wasPurchased: props.uri && makeSelectClaimWasPurchased(props.uri)(state),
     isLivestream: makeSelectClaimIsStreamPlaceholder(props.uri)(state),
+    isLivestreamActive: makeSelectIsActiveLivestream(props.uri)(state),
     isCollectionMine: makeSelectCollectionIsMine(props.collectionId)(state),
     collectionUris: makeSelectUrlsForCollectionId(props.collectionId)(state),
     collectionIndex: makeSelectIndexForUrlInCollection(props.uri, props.collectionId)(state),

ui/component/claimPreview/view.jsx

@@ -80,7 +80,7 @@ type Props = {
   repostUrl?: string,
   hideMenu?: boolean,
   isLivestream?: boolean,
-  live?: boolean,
+  isLivestreamActive: boolean,
   collectionId?: string,
   editCollection: (string, CollectionEditParams) => void,
   isCollectionMine: boolean,
@@ -145,7 +145,7 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
     hideMenu = false,
     // repostUrl,
     isLivestream, // need both? CHECK
-    live,
+    isLivestreamActive,
     collectionId,
     collectionIndex,
     editCollection,
@@ -336,7 +336,7 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
   }
 
   let liveProperty = null;
-  if (live === true) {
+  if (isLivestreamActive === true) {
     liveProperty = (claim) => <>LIVE</>;
   }
 
@@ -349,7 +349,7 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
         'claim-preview__wrapper--channel': isChannelUri && type !== 'inline',
         'claim-preview__wrapper--inline': type === 'inline',
         'claim-preview__wrapper--small': type === 'small',
-        'claim-preview__live': live,
+        'claim-preview__live': isLivestreamActive,
         'claim-preview__active': active,
       })}
     >
@@ -386,7 +386,7 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
                       )}
                     </div>
                     {/* @endif */}
-                    {!isLivestream && (
+                    {(!isLivestream || isLivestreamActive) && (
                       <div className="claim-preview__file-property-overlay">
                         <PreviewOverlayProperties uri={uri} small={type === 'small'} properties={liveProperty} />
                       </div>

ui/component/claimPreviewTile/index.js

@@ -13,6 +13,7 @@ import {
 } from 'lbry-redux';
 import { selectMutedChannels } from 'redux/selectors/blocked';
 import { selectBlackListedOutpoints, selectFilteredOutpoints } from 'lbryinc';
+import { makeSelectIsActiveLivestream } from 'redux/selectors/livestream';
 import { selectShowMatureContent } from 'redux/selectors/settings';
 import ClaimPreviewTile from './view';
 import formatMediaDuration from 'util/formatMediaDuration';
@@ -36,6 +37,7 @@ const select = (state, props) => {
     showMature: selectShowMatureContent(state),
     isMature: makeSelectClaimIsNsfw(props.uri)(state),
     isLivestream: makeSelectClaimIsStreamPlaceholder(props.uri)(state),
+    isLivestreamActive: makeSelectIsActiveLivestream(props.uri)(state),
   };
 };
 

ui/component/claimPreviewTile/view.jsx

@@ -48,10 +48,10 @@ type Props = {
   showMature: boolean,
   showHiddenByUser?: boolean,
   properties?: (Claim) => void,
-  live?: boolean,
   collectionId?: string,
   showNoSourceClaims?: boolean,
   isLivestream: boolean,
+  isLivestreamActive: boolean,
 };
 
 // preview image cards used in related video functionality
@@ -75,9 +75,9 @@ function ClaimPreviewTile(props: Props) {
     showMature,
     showHiddenByUser,
     properties,
-    live,
     showNoSourceClaims,
     isLivestream,
+    isLivestreamActive,
     collectionId,
     mediaDuration,
   } = props;
@@ -192,7 +192,7 @@ function ClaimPreviewTile(props: Props) {
   }
 
   let liveProperty = null;
-  if (live === true) {
+  if (isLivestreamActive === true) {
     liveProperty = (claim) => <>LIVE</>;
   }
 
@@ -201,7 +201,7 @@ function ClaimPreviewTile(props: Props) {
       onClick={handleClick}
       className={classnames('card claim-preview--tile', {
         'claim-preview__wrapper--channel': isChannel,
-        'claim-preview__live': live,
+        'claim-preview__live': isLivestreamActive,
       })}
     >
       <NavLink {...navLinkProps} role="none" tabIndex={-1} aria-hidden>

ui/component/claimTilesDiscover/index.js

@@ -1,19 +1,26 @@
 import { connect } from 'react-redux';
+import { withRouter } from 'react-router';
 import {
   doClaimSearch,
   selectClaimSearchByQuery,
   selectFetchingClaimSearchByQuery,
   SETTINGS,
   selectClaimsByUri,
+  splitBySeparator,
+  MATURE_TAGS,
 } from 'lbry-redux';
 import { doFetchViewCount } from 'lbryinc';
 import { doToggleTagFollowDesktop } from 'redux/actions/tags';
 import { makeSelectClientSetting, selectShowMatureContent } from 'redux/selectors/settings';
 import { selectModerationBlockList } from 'redux/selectors/comments';
 import { selectMutedChannels } from 'redux/selectors/blocked';
+import { ENABLE_NO_SOURCE_CLAIMS, SIMPLE_SITE } from 'config';
+import * as CS from 'constants/claim_search';
+
 import ClaimListDiscover from './view';
 
-const select = (state) => ({
+const select = (state, props) => {
+  return {
     claimSearchByQuery: selectClaimSearchByQuery(state),
     claimsByUri: selectClaimsByUri(state),
     fetchingClaimSearchByQuery: selectFetchingClaimSearchByQuery(state),
@@ -21,7 +28,9 @@ const select = (state) => ({
     hideReposts: makeSelectClientSetting(SETTINGS.HIDE_REPOSTS)(state),
     mutedUris: selectMutedChannels(state),
     blockedUris: selectModerationBlockList(state),
-});
+    options: resolveSearchOptions({ pageSize: 8, ...props }),
+  };
+};
 
 const perform = {
   doClaimSearch,
@@ -29,4 +38,102 @@ const perform = {
   doFetchViewCount,
 };
 
-export default connect(select, perform)(ClaimListDiscover);
+export default withRouter(connect(select, perform)(ClaimListDiscover));
+
+// ****************************************************************************
+// ****************************************************************************
+
+function resolveSearchOptions(props) {
+  const {
+    pageSize,
+    claimType,
+    tags,
+    showNsfw,
+    languages,
+    channelIds,
+    mutedUris,
+    blockedUris,
+    orderBy,
+    streamTypes,
+    hasNoSource,
+    hasSource,
+    releaseTime,
+    feeAmount,
+    limitClaimsPerChannel,
+    hideReposts,
+    timestamp,
+    claimIds,
+    location,
+  } = props;
+
+  const mutedAndBlockedChannelIds = Array.from(
+    new Set((mutedUris || []).concat(blockedUris || []).map((uri) => splitBySeparator(uri)[1]))
+  );
+
+  const urlParams = new URLSearchParams(location.search);
+  const feeAmountInUrl = urlParams.get('fee_amount');
+  const feeAmountParam = feeAmountInUrl || feeAmount;
+
+  let streamTypesParam;
+  if (streamTypes) {
+    streamTypesParam = streamTypes;
+  } else if (SIMPLE_SITE && !hasNoSource && streamTypes !== null) {
+    streamTypesParam = [CS.FILE_VIDEO, CS.FILE_AUDIO];
+  }
+
+  const options = {
+    page_size: pageSize,
+    claim_type: claimType || ['stream', 'repost', 'channel'],
+    // no_totals makes it so the sdk doesn't have to calculate total number pages for pagination
+    // it's faster, but we will need to remove it if we start using total_pages
+    no_totals: true,
+    any_tags: tags || [],
+    not_tags: !showNsfw ? MATURE_TAGS : [],
+    any_languages: languages,
+    channel_ids: channelIds || [],
+    not_channel_ids: mutedAndBlockedChannelIds,
+    order_by: orderBy || ['trending_group', 'trending_mixed'],
+    stream_types: streamTypesParam,
+  };
+
+  if (ENABLE_NO_SOURCE_CLAIMS && hasNoSource) {
+    options.has_no_source = true;
+  } else if (hasSource || (!ENABLE_NO_SOURCE_CLAIMS && (!claimType || claimType === 'stream'))) {
+    options.has_source = true;
+  }
+
+  if (releaseTime) {
+    options.release_time = releaseTime;
+  }
+
+  if (feeAmountParam) {
+    options.fee_amount = feeAmountParam;
+  }
+
+  if (limitClaimsPerChannel) {
+    options.limit_claims_per_channel = limitClaimsPerChannel;
+  }
+
+  // https://github.com/lbryio/lbry-desktop/issues/3774
+  if (hideReposts) {
+    if (Array.isArray(options.claim_type)) {
+      options.claim_type = options.claim_type.filter((claimType) => claimType !== 'repost');
+    } else {
+      options.claim_type = ['stream', 'channel'];
+    }
+  }
+
+  if (claimType) {
+    options.claim_type = claimType;
+  }
+
+  if (timestamp) {
+    options.timestamp = timestamp;
+  }
+
+  if (claimIds) {
+    options.claim_ids = claimIds;
+  }
+
+  return options;
+}

ui/component/claimTilesDiscover/view.jsx

@@ -1,83 +1,41 @@
 // @flow
-import { ENABLE_NO_SOURCE_CLAIMS, SIMPLE_SITE } from 'config';
-import * as CS from 'constants/claim_search';
 import type { Node } from 'react';
 import React from 'react';
-import { createNormalizedClaimSearchKey, MATURE_TAGS, splitBySeparator } from 'lbry-redux';
+import { createNormalizedClaimSearchKey } from 'lbry-redux';
 import ClaimPreviewTile from 'component/claimPreviewTile';
-import { useHistory } from 'react-router';
+import useFetchViewCount from 'effects/use-fetch-view-count';
-import { getLivestreamOnlyOptions } from 'util/search';
 
-/**
+type SearchOptions = {
- * Updates 'uris' by adding and/or moving active livestreams to the front of
+  page_size: number,
- * list.
+  no_totals: boolean,
- * 'liveUris' is also updated with any entries that were moved to the
+  any_tags: Array<string>,
- * front, for convenience.
+  channel_ids: Array<string>,
- *
+  claim_ids?: Array<string>,
- * @param uris [Ref]
+  not_channel_ids: Array<string>,
- * @param liveUris [Ref]
+  not_tags: Array<string>,
- * @param livestreamMap
+  order_by: Array<string>,
- * @param claimsByUri
+  languages?: Array<string>,
- * @param claimSearchByQuery
+  release_time?: string,
- * @param options
+  claim_type?: string | Array<string>,
- */
+  timestamp?: string,
-export function prioritizeActiveLivestreams(
+  fee_amount?: string,
-  uris: Array<string>,
+  limit_claims_per_channel?: number,
-  liveUris: Array<string>,
+  stream_types?: Array<string>,
-  livestreamMap: { [string]: any },
+  has_source?: boolean,
-  claimsByUri: { [string]: any },
+  has_no_source?: boolean,
-  claimSearchByQuery: { [string]: Array<string> },
+};
-  options: any
-) {
-  if (!livestreamMap || !uris) return;
 
-  const claimIsLive = (claim, liveChannelIds) => {
+function urisEqual(prev: ?Array<string>, next: ?Array<string>) {
-    // This function relies on:
+  if (!prev || !next) {
-    // 1. Only 1 actual livestream per channel (i.e. all other livestream-claims
+    // ClaimList: "null" and "undefined" have special meaning,
-    //    for that channel actually point to the same source).
+    // so we can't just compare array length here.
-    // 2. 'liveChannelIds' needs to be pruned after being accounted for,
+    //   - null = "timed out"
-    //    otherwise all livestream-claims will be "live" (we'll only take the
+    //   - undefined = "no result".
-    //    latest one as "live" ).
+    return prev === next;
-    return (
-      claim &&
-      claim.value_type === 'stream' &&
-      claim.value.source === undefined &&
-      claim.signing_channel &&
-      liveChannelIds.includes(claim.signing_channel.claim_id)
-    );
-  };
-
-  let liveChannelIds = Object.keys(livestreamMap);
-
-  // 1. Collect active livestreams from the primary search to put in front.
-  uris.forEach((uri) => {
-    const claim = claimsByUri[uri];
-    if (claimIsLive(claim, liveChannelIds)) {
-      liveUris.push(uri);
-      // This live channel has been accounted for, so remove it.
-      liveChannelIds.splice(liveChannelIds.indexOf(claim.signing_channel.claim_id), 1);
-    }
-  });
-
-  // 2. Now, repeat on the secondary search.
-  if (options) {
-    const livestreamsOnlySearchCacheQuery = createNormalizedClaimSearchKey(getLivestreamOnlyOptions(options));
-    const livestreamsOnlyUris = claimSearchByQuery[livestreamsOnlySearchCacheQuery];
-    if (livestreamsOnlyUris) {
-      livestreamsOnlyUris.forEach((uri) => {
-        const claim = claimsByUri[uri];
-        if (!uris.includes(uri) && claimIsLive(claim, liveChannelIds)) {
-          liveUris.push(uri);
-          // This live channel has been accounted for, so remove it.
-          liveChannelIds.splice(liveChannelIds.indexOf(claim.signing_channel.claim_id), 1);
-        }
-      });
-    }
   }
 
-  // 3. Finalize uris by putting live livestreams in front.
+  // $FlowFixMe - already checked for null above.
-  const newUris = liveUris.concat(uris.filter((uri) => !liveUris.includes(uri)));
+  return prev.length === next.length && prev.every((value, index) => value === next[index]);
-  uris.splice(0, uris.length, ...newUris);
 }
 
 // ****************************************************************************
@@ -88,8 +46,6 @@ type Props = {
   prefixUris?: Array<string>,
   pinUrls?: Array<string>,
   uris: Array<string>,
-  liveLivestreamsFirst?: boolean,
-  livestreamMap?: { [string]: any },
   showNoSourceClaims?: boolean,
   renderProperties?: (Claim) => ?Node,
   fetchViewCount?: boolean,
@@ -109,6 +65,7 @@ type Props = {
   hasSource?: boolean,
   hasNoSource?: boolean,
   // --- select ---
+  location: { search: string },
   claimSearchByQuery: { [string]: Array<string> },
   claimsByUri: { [string]: any },
   fetchingClaimSearchByQuery: { [string]: boolean },
@@ -116,6 +73,7 @@ type Props = {
   hideReposts: boolean,
   mutedUris: Array<string>,
   blockedUris: Array<string>,
+  options: SearchOptions,
   // --- perform ---
   doClaimSearch: ({}) => void,
   doFetchViewCount: (claimIdCsv: string) => void,
@@ -126,234 +84,72 @@ function ClaimTilesDiscover(props: Props) {
     doClaimSearch,
     claimSearchByQuery,
     claimsByUri,
-    showNsfw,
-    hideReposts,
     fetchViewCount,
-    // Below are options to pass that are forwarded to claim_search
-    tags,
-    channelIds,
-    claimIds,
-    orderBy,
-    pageSize = 8,
-    releaseTime,
-    languages,
-    claimType,
-    streamTypes,
-    timestamp,
-    feeAmount,
-    limitClaimsPerChannel,
     fetchingClaimSearchByQuery,
-    hasSource,
     hasNoSource,
     renderProperties,
-    blockedUris,
-    mutedUris,
-    liveLivestreamsFirst,
-    livestreamMap,
     pinUrls,
     prefixUris,
     showNoSourceClaims,
     doFetchViewCount,
+    pageSize = 8,
+    options,
   } = props;
 
-  const { location } = useHistory();
+  const searchKey = createNormalizedClaimSearchKey(options);
-  const urlParams = new URLSearchParams(location.search);
+  const fetchingClaimSearch = fetchingClaimSearchByQuery[searchKey];
-  const feeAmountInUrl = urlParams.get('fee_amount');
+  const claimSearchUris = claimSearchByQuery[searchKey] || [];
-  const feeAmountParam = feeAmountInUrl || feeAmount;
-  const mutedAndBlockedChannelIds = Array.from(
-    new Set(mutedUris.concat(blockedUris).map((uri) => splitBySeparator(uri)[1]))
-  );
-  const liveUris = [];
-  let streamTypesParam;
-  if (streamTypes) {
-    streamTypesParam = streamTypes;
-  } else if (SIMPLE_SITE && !hasNoSource && streamTypes !== null) {
-    streamTypesParam = [CS.FILE_VIDEO, CS.FILE_AUDIO];
-  }
-
-  const [prevUris, setPrevUris] = React.useState([]);
-
-  const options: {
-    page_size: number,
-    no_totals: boolean,
-    any_tags: Array<string>,
-    channel_ids: Array<string>,
-    claim_ids?: Array<string>,
-    not_channel_ids: Array<string>,
-    not_tags: Array<string>,
-    order_by: Array<string>,
-    languages?: Array<string>,
-    release_time?: string,
-    claim_type?: string | Array<string>,
-    timestamp?: string,
-    fee_amount?: string,
-    limit_claims_per_channel?: number,
-    stream_types?: Array<string>,
-    has_source?: boolean,
-    has_no_source?: boolean,
-  } = {
-    page_size: pageSize,
-    claim_type: claimType || ['stream', 'repost', 'channel'],
-    // no_totals makes it so the sdk doesn't have to calculate total number pages for pagination
-    // it's faster, but we will need to remove it if we start using total_pages
-    no_totals: true,
-    any_tags: tags || [],
-    not_tags: !showNsfw ? MATURE_TAGS : [],
-    any_languages: languages,
-    channel_ids: channelIds || [],
-    not_channel_ids: mutedAndBlockedChannelIds,
-    order_by: orderBy || ['trending_group', 'trending_mixed'],
-    stream_types: streamTypesParam,
-  };
-
-  if (ENABLE_NO_SOURCE_CLAIMS && hasNoSource) {
-    options.has_no_source = true;
-  } else if (hasSource || (!ENABLE_NO_SOURCE_CLAIMS && (!claimType || claimType === 'stream'))) {
-    options.has_source = true;
-  }
-
-  if (releaseTime) {
-    options.release_time = releaseTime;
-  }
-
-  if (feeAmountParam) {
-    options.fee_amount = feeAmountParam;
-  }
-
-  if (limitClaimsPerChannel) {
-    options.limit_claims_per_channel = limitClaimsPerChannel;
-  }
-
-  // https://github.com/lbryio/lbry-desktop/issues/3774
-  if (hideReposts) {
-    if (Array.isArray(options.claim_type)) {
-      options.claim_type = options.claim_type.filter((claimType) => claimType !== 'repost');
-    } else {
-      options.claim_type = ['stream', 'channel'];
-    }
-  }
-
-  if (claimType) {
-    options.claim_type = claimType;
-  }
-
-  if (timestamp) {
-    options.timestamp = timestamp;
-  }
-
-  if (claimIds) {
-    options.claim_ids = claimIds;
-  }
-
-  const mainSearchKey = createNormalizedClaimSearchKey(options);
-  const livestreamSearchKey = liveLivestreamsFirst
-    ? createNormalizedClaimSearchKey(getLivestreamOnlyOptions(options))
-    : undefined;
-
-  let uris = (prefixUris || []).concat(claimSearchByQuery[mainSearchKey] || []);
-
-  const isLoading = fetchingClaimSearchByQuery[mainSearchKey];
-
-  if (liveLivestreamsFirst && livestreamMap && !isLoading) {
-    prioritizeActiveLivestreams(uris, liveUris, livestreamMap, claimsByUri, claimSearchByQuery, options);
-  }
 
   // Don't use the query from createNormalizedClaimSearchKey for the effect since that doesn't include page & release_time
   const optionsStringForEffect = JSON.stringify(options);
-  const shouldPerformSearch = !isLoading && uris.length === 0;
+  const shouldPerformSearch = !fetchingClaimSearch && claimSearchUris.length === 0;
 
-  if (
+  const uris = (prefixUris || []).concat(claimSearchUris);
-    prefixUris === undefined &&
-    (claimSearchByQuery[mainSearchKey] === undefined ||
-      (livestreamSearchKey && claimSearchByQuery[livestreamSearchKey] === undefined))
-  ) {
-    // This is a new query and we don't have results yet ...
-    if (prevUris.length !== 0) {
-      // ... but we have previous results. Use it until new results are here.
-      uris = prevUris;
-    }
-  }
 
-  const modifiedUris = uris ? uris.slice() : [];
+  if (pinUrls && uris && uris.length > 2 && window.location.pathname === '/') {
-  const fixUris = pinUrls || [];
+    pinUrls.forEach((pin) => {
-
+      if (uris.indexOf(pin) !== -1) {
-  if (pinUrls && modifiedUris && modifiedUris.length > 2 && window.location.pathname === '/') {
+        uris.splice(uris.indexOf(pin), 1);
-    fixUris.forEach((fixUri) => {
-      if (modifiedUris.indexOf(fixUri) !== -1) {
-        modifiedUris.splice(modifiedUris.indexOf(fixUri), 1);
       } else {
-        modifiedUris.pop();
+        uris.pop();
       }
     });
-    modifiedUris.splice(2, 0, ...fixUris);
+    uris.splice(2, 0, ...pinUrls);
   }
 
-  // **************************************************************************
+  if (uris.length > 0 && uris.length < pageSize && shouldPerformSearch) {
-  // **************************************************************************
+    // prefixUri and pinUrls might already be present while waiting for the
-
+    // remaining claim_search results. Fill the space to prevent layout shifts.
-  function resolveLive(index) {
+    uris.push(...Array(pageSize - uris.length).fill(''));
-    if (liveLivestreamsFirst && livestreamMap && index < liveUris.length) {
-      return true;
-    }
-    return undefined;
   }
 
-  function fetchViewCountForUris(uris) {
+  useFetchViewCount(fetchViewCount, uris, claimsByUri, doFetchViewCount);
-    const claimIds = [];
-
-    if (uris) {
-      uris.forEach((uri) => {
-        if (claimsByUri[uri]) {
-          claimIds.push(claimsByUri[uri].claim_id);
-        }
-      });
-    }
-
-    if (claimIds.length > 0) {
-      doFetchViewCount(claimIds.join(','));
-    }
-  }
-
-  // **************************************************************************
-  // **************************************************************************
 
+  // Run `doClaimSearch`
   React.useEffect(() => {
     if (shouldPerformSearch) {
       const searchOptions = JSON.parse(optionsStringForEffect);
       doClaimSearch(searchOptions);
-
-      if (liveLivestreamsFirst) {
-        doClaimSearch(getLivestreamOnlyOptions(searchOptions));
     }
-    }
+  }, [doClaimSearch, shouldPerformSearch, optionsStringForEffect]);
-  }, [doClaimSearch, shouldPerformSearch, optionsStringForEffect, liveLivestreamsFirst]);
-
-  React.useEffect(() => {
-    if (JSON.stringify(prevUris) !== JSON.stringify(uris) && !shouldPerformSearch) {
-      // Stash new results for next render cycle:
-      setPrevUris(uris);
-      // Fetch view count:
-      if (fetchViewCount) {
-        fetchViewCountForUris(uris);
-      }
-    }
-  }, [shouldPerformSearch, prevUris, uris]); // eslint-disable-line react-hooks/exhaustive-deps
-
-  // **************************************************************************
-  // **************************************************************************
 
   return (
     <ul className="claim-grid">
-      {modifiedUris && modifiedUris.length
+      {uris && uris.length
-        ? modifiedUris.map((uri, index) => (
+        ? uris.map((uri, i) => {
+            if (uri) {
+              return (
                 <ClaimPreviewTile
                   showNoSourceClaims={hasNoSource || showNoSourceClaims}
                   key={uri}
                   uri={uri}
                   properties={renderProperties}
-              live={resolveLive(index)}
                 />
-          ))
+              );
+            } else {
+              return <ClaimPreviewTile showNoSourceClaims={hasNoSource || showNoSourceClaims} key={i} placeholder />;
+            }
+          })
         : new Array(pageSize)
             .fill(1)
             .map((x, i) => (
@@ -362,4 +158,75 @@ function ClaimTilesDiscover(props: Props) {
     </ul>
   );
 }
-export default ClaimTilesDiscover;
+
+export default React.memo<Props>(ClaimTilesDiscover, areEqual);
+
+function debug_trace(val) {
+  if (process.env.DEBUG_TRACE) console.log(`Render due to: ${val}`);
+}
+
+function areEqual(prev: Props, next: Props) {
+  const prevOptions: SearchOptions = prev.options;
+  const nextOptions: SearchOptions = next.options;
+
+  const prevSearchKey = createNormalizedClaimSearchKey(prevOptions);
+  const nextSearchKey = createNormalizedClaimSearchKey(nextOptions);
+
+  // "Pause" render when fetching to solve the layout-shift problem in #5979
+  // (previous solution used a stashed copy of the rendered uris while fetching
+  // to make it stay still).
+  // This version works as long as we are not doing anything during a fetch,
+  // such as showing a spinner.
+  const nextCsFetch = next.fetchingClaimSearchByQuery[nextSearchKey];
+  if (nextCsFetch) {
+    return true;
+  }
+
+  // --- Deep-compare ---
+  if (prev.claimSearchByQuery[prevSearchKey] !== next.claimSearchByQuery[nextSearchKey]) {
+    debug_trace('claimSearchByQuery');
+    return false;
+  }
+
+  if (prev.fetchingClaimSearchByQuery[prevSearchKey] !== next.fetchingClaimSearchByQuery[nextSearchKey]) {
+    debug_trace('fetchingClaimSearchByQuery');
+    return false;
+  }
+
+  const ARRAY_KEYS = ['prefixUris', 'channelIds', 'mutedUris', 'blockedUris'];
+
+  for (let i = 0; i < ARRAY_KEYS.length; ++i) {
+    const key = ARRAY_KEYS[i];
+    if (!urisEqual(prev[key], next[key])) {
+      debug_trace(`${key}`);
+      return false;
+    }
+  }
+
+  // --- Default the rest(*) to shallow-compare ---
+  // (*) including new props introduced in the future, in case developer forgets
+  // to update this function. Better to render more than miss an important one.
+  const KEYS_TO_IGNORE = [
+    ...ARRAY_KEYS,
+    'claimSearchByQuery',
+    'fetchingClaimSearchByQuery',
+    'location',
+    'history',
+    'match',
+    'claimsByUri',
+    'options',
+    'doClaimSearch',
+    'doToggleTagFollowDesktop',
+  ];
+
+  const propKeys = Object.keys(next);
+  for (let i = 0; i < propKeys.length; ++i) {
+    const pk = propKeys[i];
+    if (!KEYS_TO_IGNORE.includes(pk) && prev[pk] !== next[pk]) {
+      debug_trace(`${pk}`);
+      return false;
+    }
+  }
+
+  return true;
+}

ui/constants/action_types.js

@@ -352,3 +352,7 @@ export const FETCH_NO_SOURCE_CLAIMS_STARTED = 'FETCH_NO_SOURCE_CLAIMS_STARTED';
 export const FETCH_NO_SOURCE_CLAIMS_COMPLETED = 'FETCH_NO_SOURCE_CLAIMS_COMPLETED';
 export const FETCH_NO_SOURCE_CLAIMS_FAILED = 'FETCH_NO_SOURCE_CLAIMS_FAILED';
 export const VIEWERS_RECEIVED = 'VIEWERS_RECEIVED';
+export const FETCH_ACTIVE_LIVESTREAMS_STARTED = 'FETCH_ACTIVE_LIVESTREAMS_STARTED';
+export const FETCH_ACTIVE_LIVESTREAMS_FAILED = 'FETCH_ACTIVE_LIVESTREAMS_FAILED';
+export const FETCH_ACTIVE_LIVESTREAMS_SKIPPED = 'FETCH_ACTIVE_LIVESTREAMS_SKIPPED';
+export const FETCH_ACTIVE_LIVESTREAMS_COMPLETED = 'FETCH_ACTIVE_LIVESTREAMS_COMPLETED';

ui/effects/use-fetch-view-count.js

@@ -0,0 +1,24 @@
+// @flow
+import { useState, useEffect } from 'react';
+
+export default function useFetchViewCount(
+  shouldFetch: ?boolean,
+  uris: Array<string>,
+  claimsByUri: any,
+  doFetchViewCount: (string) => void
+) {
+  const [fetchedUris, setFetchedUris] = useState([]);
+
+  useEffect(() => {
+    if (shouldFetch && uris && uris.length > 0) {
+      const urisToFetch = uris.filter((uri) => uri && !fetchedUris.includes(uri) && Boolean(claimsByUri[uri]));
+
+      if (urisToFetch.length > 0) {
+        const claimIds = urisToFetch.map((uri) => claimsByUri[uri].claim_id);
+        doFetchViewCount(claimIds.join(','));
+        setFetchedUris([...fetchedUris, ...urisToFetch]);
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [uris]);
+}

ui/effects/use-get-livestreams.js

@@ -1,55 +0,0 @@
-// @flow
-import React from 'react';
-import { LIVESTREAM_LIVE_API } from 'constants/livestream';
-
-/**
- * Gets latest livestream info list. Returns null (instead of a blank object)
- * when there are no active livestreams.
- *
- * @param minViewers
- * @param refreshMs
- * @returns {{livestreamMap: null, loading: boolean}}
- */
-export default function useGetLivestreams(minViewers: number = 0, refreshMs: number = 0) {
-  const [loading, setLoading] = React.useState(true);
-  const [livestreamMap, setLivestreamMap] = React.useState(null);
-
-  React.useEffect(() => {
-    function checkCurrentLivestreams() {
-      fetch(LIVESTREAM_LIVE_API)
-        .then((res) => res.json())
-        .then((res) => {
-          setLoading(false);
-          if (!res.data) {
-            setLivestreamMap(null);
-            return;
-          }
-
-          const livestreamMap = res.data.reduce((acc, curr) => {
-            if (curr.viewCount >= minViewers) {
-              acc[curr.claimId] = curr;
-            }
-            return acc;
-          }, {});
-
-          setLivestreamMap(livestreamMap);
-        })
-        .catch((err) => {
-          setLoading(false);
-        });
-    }
-
-    checkCurrentLivestreams();
-
-    if (refreshMs > 0) {
-      let fetchInterval = setInterval(checkCurrentLivestreams, refreshMs);
-      return () => {
-        if (fetchInterval) {
-          clearInterval(fetchInterval);
-        }
-      };
-    }
-  }, []);
-
-  return { livestreamMap, loading };
-}

ui/page/channelsFollowing/index.js

@@ -1,13 +1,18 @@
 import { connect } from 'react-redux';
 import { SETTINGS } from 'lbry-redux';
+import { doFetchActiveLivestreams } from 'redux/actions/livestream';
+import { selectActiveLivestreams } from 'redux/selectors/livestream';
 import { selectSubscriptions } from 'redux/selectors/subscriptions';
 import { makeSelectClientSetting } from 'redux/selectors/settings';
 
 import ChannelsFollowingPage from './view';
 
-const select = state => ({
+const select = (state) => ({
   subscribedChannels: selectSubscriptions(state),
   tileLayout: makeSelectClientSetting(SETTINGS.TILE_LAYOUT)(state),
+  activeLivestreams: selectActiveLivestreams(state),
 });
 
-export default connect(select)(ChannelsFollowingPage);
+export default connect(select, {
+  doFetchActiveLivestreams,
+})(ChannelsFollowingPage);

ui/page/channelsFollowing/view.jsx

@@ -9,24 +9,32 @@ import ClaimListDiscover from 'component/claimListDiscover';
 import Page from 'component/page';
 import Button from 'component/button';
 import Icon from 'component/common/icon';
-import useGetLivestreams from 'effects/use-get-livestreams';
 import { splitBySeparator } from 'lbry-redux';
+import { getLivestreamUris } from 'util/livestream';
 
 type Props = {
   subscribedChannels: Array<Subscription>,
   tileLayout: boolean,
+  activeLivestreams: ?LivestreamInfo,
+  doFetchActiveLivestreams: () => void,
 };
 
 function ChannelsFollowingPage(props: Props) {
-  const { subscribedChannels, tileLayout } = props;
+  const { subscribedChannels, tileLayout, activeLivestreams, doFetchActiveLivestreams } = props;
+
   const hasSubsribedChannels = subscribedChannels.length > 0;
-  const { livestreamMap } = useGetLivestreams();
+  const channelIds = subscribedChannels.map((sub) => splitBySeparator(sub.uri)[1]);
+
+  React.useEffect(() => {
+    doFetchActiveLivestreams();
+  }, []);
 
   return !hasSubsribedChannels ? (
     <ChannelsFollowingDiscoverPage />
   ) : (
     <Page noFooter fullWidthPage={tileLayout}>
       <ClaimListDiscover
+        prefixUris={getLivestreamUris(activeLivestreams, channelIds)}
         hideAdvancedFilter={SIMPLE_SITE}
         streamType={SIMPLE_SITE ? CS.CONTENT_ALL : undefined}
         tileLayout={tileLayout}
@@ -37,7 +45,7 @@ function ChannelsFollowingPage(props: Props) {
           </span>
         }
         defaultOrderBy={CS.ORDER_BY_NEW}
-        channelIds={subscribedChannels.map((sub) => splitBySeparator(sub.uri)[1])}
+        channelIds={channelIds}
         meta={
           <Button
             icon={ICONS.SEARCH}
@@ -46,8 +54,6 @@ function ChannelsFollowingPage(props: Props) {
             navigate={`/$/${PAGES.CHANNELS_FOLLOWING_DISCOVER}`}
           />
         }
-        liveLivestreamsFirst
-        livestreamMap={livestreamMap}
         showNoSourceClaims={ENABLE_NO_SOURCE_CLAIMS}
         hasSource
       />

ui/page/discover/index.js

@@ -1,6 +1,8 @@
 import * as CS from 'constants/claim_search';
 import { connect } from 'react-redux';
 import { makeSelectClaimForUri, doResolveUri, SETTINGS } from 'lbry-redux';
+import { doFetchActiveLivestreams } from 'redux/actions/livestream';
+import { selectActiveLivestreams } from 'redux/selectors/livestream';
 import { selectUserVerifiedEmail } from 'redux/selectors/user';
 import { selectFollowedTags } from 'redux/selectors/tags';
 import { doToggleTagFollowDesktop } from 'redux/actions/tags';
@@ -18,10 +20,12 @@ const select = (state, props) => {
     repostedClaim: repostedUri ? makeSelectClaimForUri(repostedUri)(state) : null,
     isAuthenticated: selectUserVerifiedEmail(state),
     tileLayout: makeSelectClientSetting(SETTINGS.TILE_LAYOUT)(state),
+    activeLivestreams: selectActiveLivestreams(state),
   };
 };
 
 export default connect(select, {
   doToggleTagFollowDesktop,
   doResolveUri,
+  doFetchActiveLivestreams,
 })(Tags);

ui/page/discover/view.jsx

@@ -8,15 +8,17 @@ 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';
 import Ads from 'web/component/ads';
 import LbcSymbol from 'component/common/lbc-symbol';
 import I18nMessage from 'component/i18nMessage';
-import useGetLivestreams from 'effects/use-get-livestreams';
 import moment from 'moment';
+import { getLivestreamUris } from 'util/livestream';
+
+const DEFAULT_LIVESTREAM_TILE_LIMIT = 8;
 
 type Props = {
   location: { search: string },
@@ -28,6 +30,8 @@ type Props = {
   isAuthenticated: boolean,
   dynamicRouteProps: RowDataItem,
   tileLayout: boolean,
+  activeLivestreams: ?LivestreamInfo,
+  doFetchActiveLivestreams: (orderBy?: Array<string>, pageSize?: number, forceFetch?: boolean) => void,
 };
 
 function DiscoverPage(props: Props) {
@@ -40,12 +44,14 @@ function DiscoverPage(props: Props) {
     doResolveUri,
     isAuthenticated,
     tileLayout,
+    activeLivestreams,
+    doFetchActiveLivestreams,
     dynamicRouteProps,
   } = props;
   const buttonRef = useRef();
   const isHovering = useHover(buttonRef);
   const isMobile = useIsMobile();
-  const { livestreamMap } = useGetLivestreams();
+  const isLargeScreen = useIsLargeScreen();
 
   const urlParams = new URLSearchParams(search);
   const claimType = urlParams.get('claim_type');
@@ -58,6 +64,8 @@ function DiscoverPage(props: Props) {
   // Eventually allow more than one tag on this page
   // Restricting to one to make follow/unfollow simpler
   const tag = (tags && tags[0]) || null;
+  const channelIds =
+    (dynamicRouteProps && dynamicRouteProps.options && dynamicRouteProps.options.channelIds) || undefined;
 
   const isFollowing = followedTags.map(({ name }) => name).includes(tag);
   let label = isFollowing ? __('Following --[button label indicating a channel has been followed]--') : __('Follow');
@@ -65,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);
@@ -106,16 +154,53 @@ function DiscoverPage(props: Props) {
     );
   }
 
+  React.useEffect(() => {
+    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={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}
@@ -133,47 +218,14 @@ function DiscoverPage(props: Props) {
             : undefined
         }
         feeAmount={SIMPLE_SITE ? !dynamicRouteProps && CS.FEE_AMOUNT_ANY : undefined}
-        channelIds={
+        channelIds={channelIds}
-          (dynamicRouteProps && dynamicRouteProps.options && dynamicRouteProps.options.channelIds) || undefined
-        }
         limitClaimsPerChannel={
           SIMPLE_SITE
             ? (dynamicRouteProps && dynamicRouteProps.options && dynamicRouteProps.options.limitClaimsPerChannel) ||
               undefined
             : 3
         }
-        meta={
+        meta={!useDualList && getElemMeta()}
-          !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}
-              />
-            )
-          )
-        }
-        liveLivestreamsFirst
-        livestreamMap={livestreamMap}
         hasSource
         showNoSourceClaims={ENABLE_NO_SOURCE_CLAIMS}
       />

ui/page/home/index.js

@@ -1,4 +1,6 @@
 import { connect } from 'react-redux';
+import { doFetchActiveLivestreams } from 'redux/actions/livestream';
+import { selectActiveLivestreams } from 'redux/selectors/livestream';
 import { selectFollowedTags } from 'redux/selectors/tags';
 import { selectUserVerifiedEmail } from 'redux/selectors/user';
 import { selectSubscriptions } from 'redux/selectors/subscriptions';
@@ -12,8 +14,11 @@ const select = (state) => ({
   authenticated: selectUserVerifiedEmail(state),
   showNsfw: selectShowMatureContent(state),
   homepageData: selectHomepageData(state),
+  activeLivestreams: selectActiveLivestreams(state),
 });
 
-const perform = {};
+const perform = (dispatch) => ({
+  doFetchActiveLivestreams: () => dispatch(doFetchActiveLivestreams()),
+});
 
 export default connect(select, perform)(DiscoverPage);

ui/page/home/view.jsx

@@ -9,8 +9,8 @@ import ClaimTilesDiscover from 'component/claimTilesDiscover';
 import ClaimPreviewTile from 'component/claimPreviewTile';
 import Icon from 'component/common/icon';
 import WaitUntilOnPage from 'component/common/wait-until-on-page';
-import useGetLivestreams from 'effects/use-get-livestreams';
 import { GetLinksData } from 'util/buildHomepage';
+import { getLivestreamUris } from 'util/livestream';
 
 // @if TARGET='web'
 import Pixel from 'web/component/pixel';
@@ -23,14 +23,23 @@ type Props = {
   subscribedChannels: Array<Subscription>,
   showNsfw: boolean,
   homepageData: any,
+  activeLivestreams: any,
+  doFetchActiveLivestreams: () => void,
 };
 
 function HomePage(props: Props) {
-  const { followedTags, subscribedChannels, authenticated, showNsfw, homepageData } = props;
+  const {
+    followedTags,
+    subscribedChannels,
+    authenticated,
+    showNsfw,
+    homepageData,
+    activeLivestreams,
+    doFetchActiveLivestreams,
+  } = props;
   const showPersonalizedChannels = (authenticated || !IS_WEB) && subscribedChannels && subscribedChannels.length > 0;
   const showPersonalizedTags = (authenticated || !IS_WEB) && followedTags && followedTags.length > 0;
   const showIndividualTags = showPersonalizedTags && followedTags.length < 5;
-  const { livestreamMap } = useGetLivestreams();
 
   const rowData: Array<RowDataItem> = GetLinksData(
     homepageData,
@@ -52,13 +61,13 @@ function HomePage(props: Props) {
         ))}
       </ul>
     );
+
     const claimTiles = (
       <ClaimTilesDiscover
         {...options}
-        liveLivestreamsFirst
-        livestreamMap={livestreamMap}
         showNoSourceClaims={ENABLE_NO_SOURCE_CLAIMS}
         hasSource
+        prefixUris={getLivestreamUris(activeLivestreams, options.channelIds)}
         pinUrls={pinUrls}
       />
     );
@@ -95,6 +104,10 @@ function HomePage(props: Props) {
     );
   }
 
+  React.useEffect(() => {
+    doFetchActiveLivestreams();
+  }, []);
+
   return (
     <Page fullWidthPage>
       {!SIMPLE_SITE && (authenticated || !IS_WEB) && !subscribedChannels.length && (

ui/redux/actions/livestream.js

@@ -1,6 +1,7 @@
 // @flow
 import * as ACTIONS from 'constants/action_types';
 import { doClaimSearch } from 'lbry-redux';
+import { LIVESTREAM_LIVE_API } from 'constants/livestream';
 
 export const doFetchNoSourceClaims = (channelId: string) => async (dispatch: Dispatch, getState: GetState) => {
   dispatch({
@@ -31,3 +32,90 @@ export const doFetchNoSourceClaims = (channelId: string) => async (dispatch: Dis
     });
   }
 };
+
+const FETCH_ACTIVE_LIVESTREAMS_MIN_INTERVAL_MS = 5 * 60 * 1000;
+
+export const doFetchActiveLivestreams = (
+  orderBy: Array<string> = ['release_time'],
+  pageSize: number = 50,
+  forceFetch: boolean = false
+) => {
+  return async (dispatch: Dispatch, getState: GetState) => {
+    const state = getState();
+    const now = Date.now();
+    const timeDelta = now - state.livestream.activeLivestreamsLastFetchedDate;
+
+    const prevOptions = state.livestream.activeLivestreamsLastFetchedOptions;
+    const nextOptions = { page_size: pageSize, order_by: orderBy };
+    const sameOptions = JSON.stringify(prevOptions) === JSON.stringify(nextOptions);
+
+    if (!forceFetch && sameOptions && timeDelta < FETCH_ACTIVE_LIVESTREAMS_MIN_INTERVAL_MS) {
+      dispatch({ type: ACTIONS.FETCH_ACTIVE_LIVESTREAMS_SKIPPED });
+      return;
+    }
+
+    dispatch({ type: ACTIONS.FETCH_ACTIVE_LIVESTREAMS_STARTED });
+
+    fetch(LIVESTREAM_LIVE_API)
+      .then((res) => res.json())
+      .then((res) => {
+        if (!res.data) {
+          dispatch({ type: ACTIONS.FETCH_ACTIVE_LIVESTREAMS_FAILED });
+          return;
+        }
+
+        const activeLivestreams: LivestreamInfo = res.data.reduce((acc, curr) => {
+          acc[curr.claimId] = {
+            live: curr.live,
+            viewCount: curr.viewCount,
+            creatorId: curr.claimId,
+          };
+          return acc;
+        }, {});
+
+        dispatch(
+          // ** Creators can have multiple livestream claims (each with unique
+          // chat), and all of them will play the same stream when creator goes
+          // live. The UI usually just wants to report the latest claim, so we
+          // query that store it in `latestClaimUri`.
+          doClaimSearch({
+            page_size: nextOptions.page_size,
+            has_no_source: true,
+            channel_ids: Object.keys(activeLivestreams),
+            claim_type: ['stream'],
+            order_by: nextOptions.order_by, // **
+            limit_claims_per_channel: 1, // **
+            no_totals: true,
+          })
+        )
+          .then((resolveInfo) => {
+            Object.values(resolveInfo).forEach((x) => {
+              // $FlowFixMe
+              const channelId = x.stream.signing_channel.claim_id;
+              activeLivestreams[channelId] = {
+                ...activeLivestreams[channelId],
+                // $FlowFixMe
+                latestClaimId: x.stream.claim_id,
+                // $FlowFixMe
+                latestClaimUri: x.stream.canonical_url,
+              };
+            });
+
+            dispatch({
+              type: ACTIONS.FETCH_ACTIVE_LIVESTREAMS_COMPLETED,
+              data: {
+                activeLivestreams,
+                activeLivestreamsLastFetchedDate: now,
+                activeLivestreamsLastFetchedOptions: nextOptions,
+              },
+            });
+          })
+          .catch(() => {
+            dispatch({ type: ACTIONS.FETCH_ACTIVE_LIVESTREAMS_FAILED });
+          });
+      })
+      .catch((err) => {
+        dispatch({ type: ACTIONS.FETCH_ACTIVE_LIVESTREAMS_FAILED });
+      });
+  };
+};

ui/redux/reducers/livestream.js

@@ -5,6 +5,10 @@ import { handleActions } from 'util/redux-utils';
 const defaultState: LivestreamState = {
   fetchingById: {},
   viewersById: {},
+  fetchingActiveLivestreams: false,
+  activeLivestreams: null,
+  activeLivestreamsLastFetchedDate: 0,
+  activeLivestreamsLastFetchedOptions: {},
 };
 
 export default handleActions(
@@ -36,6 +40,22 @@ export default handleActions(
       newViewersById[claimId] = connected;
       return { ...state, viewersById: newViewersById };
     },
+    [ACTIONS.FETCH_ACTIVE_LIVESTREAMS_STARTED]: (state: LivestreamState) => {
+      return { ...state, fetchingActiveLivestreams: true };
+    },
+    [ACTIONS.FETCH_ACTIVE_LIVESTREAMS_FAILED]: (state: LivestreamState) => {
+      return { ...state, fetchingActiveLivestreams: false };
+    },
+    [ACTIONS.FETCH_ACTIVE_LIVESTREAMS_COMPLETED]: (state: LivestreamState, action: any) => {
+      const { activeLivestreams, activeLivestreamsLastFetchedDate, activeLivestreamsLastFetchedOptions } = action.data;
+      return {
+        ...state,
+        fetchingActiveLivestreams: false,
+        activeLivestreams,
+        activeLivestreamsLastFetchedDate,
+        activeLivestreamsLastFetchedOptions,
+      };
+    },
   },
   defaultState
 );

ui/redux/selectors/livestream.js

@@ -40,3 +40,23 @@ export const makeSelectPendingLivestreamsForChannelId = (channelId: string) =>
         claim.signing_channel.claim_id === channelId
     );
   });
+
+export const selectActiveLivestreams = createSelector(selectState, (state) => state.activeLivestreams);
+
+export const makeSelectIsActiveLivestream = (uri: string) =>
+  createSelector(selectState, (state) => {
+    const activeLivestreamValues = (state.activeLivestreams && Object.values(state.activeLivestreams)) || [];
+    // $FlowFixMe
+    return Boolean(activeLivestreamValues.find((v) => v.latestClaimUri === uri));
+  });
+
+export const makeSelectActiveLivestreamUris = (uri: string) =>
+  createSelector(selectState, (state) => {
+    const activeLivestreamValues = (state.activeLivestreams && Object.values(state.activeLivestreams)) || [];
+    const uris = [];
+    activeLivestreamValues.forEach((v) => {
+      // $FlowFixMe
+      if (v.latestClaimUri) uris.push(v.latestClaimUri);
+    });
+    return uris;
+  });

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);
+}

ui/util/livestream.js

@@ -0,0 +1,24 @@
+// @flow
+
+/**
+ * Helper to extract livestream claim uris from the output of
+ * `selectActiveLivestreams`.
+ *
+ * @param activeLivestreams Object obtained from `selectActiveLivestreams`.
+ * @param channelIds List of channel IDs to filter the results with.
+ * @returns {[]|Array<*>}
+ */
+export function getLivestreamUris(activeLivestreams: ?LivestreamInfo, channelIds: ?Array<string>) {
+  let values = (activeLivestreams && Object.values(activeLivestreams)) || [];
+
+  if (channelIds && channelIds.length > 0) {
+    // $FlowFixMe
+    values = values.filter((v) => channelIds.includes(v.creatorId) && Boolean(v.latestClaimUri));
+  } else {
+    // $FlowFixMe
+    values = values.filter((v) => Boolean(v.latestClaimUri));
+  }
+
+  // $FlowFixMe
+  return values.map((v) => v.latestClaimUri);
+}

ui/util/search.js

@@ -21,25 +21,6 @@ export function createNormalizedSearchKey(query: string) {
   return normalizedQuery;
 }
 
-/**
- * Returns the "livestream only" version of the given 'options'.
- *
- * Currently, the 'has_source' attribute is being used to identify livestreams.
- *
- * @param options
- * @returns {*}
- */
-export function getLivestreamOnlyOptions(options: any) {
-  const newOptions = Object.assign({}, options);
-  delete newOptions.has_source;
-  delete newOptions.stream_types;
-  newOptions.has_no_source = true;
-  newOptions.claim_type = ['stream'];
-  newOptions.page_size = 50;
-  newOptions.order_by = ['release_time'];
-  return newOptions;
-}
-
 /**
  * getUriForSearchTerm
  * @param term