-- tmp revert --

This reverts commit 3b47edc3b9 to allow putting back in the original commits.

flow-typed/livestream.js

@@ -24,18 +24,4 @@ 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,10 +1,12 @@
 import { connect } from 'react-redux';
 import ClaimList from './view';
-import { SETTINGS } from 'lbry-redux';
+import { SETTINGS, selectClaimSearchByQuery, selectClaimsByUri } 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,6 +9,7 @@ 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';
@@ -16,7 +17,6 @@ const SORT_OLD = 'old';
 
 type Props = {
   uris: Array<string>,
-  prefixUris?: Array<string>,
   header: Node | boolean,
   headerAltControls: Node,
   loading: boolean,
@@ -41,6 +41,9 @@ 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,
@@ -50,7 +53,6 @@ export default function ClaimList(props: Props) {
   const {
     activeUri,
     uris,
-    prefixUris,
     headerAltControls,
     loading,
     persistedStorageKey,
@@ -71,25 +73,37 @@ 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 tileUris = (prefixUris || []).concat(uris);
+  const liveUris = [];
-  const sortedUris = (urisLength > 0 && (currentSort === SORT_NEW ? tileUris : tileUris.slice().reverse())) || [];
+  if (liveLivestreamsFirst && livestreamMap) {
+    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);
   }
@@ -124,12 +138,13 @@ export default function ClaimList(props: Props) {
   return tileLayout && !header ? (
     <section className="claim-grid">
       {urisLength > 0 &&
-        tileUris.map((uri) => (
+        uris.map((uri, index) => (
           <ClaimPreviewTile
             key={uri}
             uri={uri}
             showHiddenByUser={showHiddenByUser}
             properties={renderProperties}
+            live={resolveLive(index)}
             collectionId={collectionId}
             showNoSourceClaims={showNoSourceClaims}
           />
@@ -201,6 +216,7 @@ 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,12 +13,11 @@ 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,
@@ -32,6 +31,7 @@ type Props = {
   includeSupportAction?: boolean,
   infiniteScroll?: Boolean,
   isChannel?: boolean,
+  liveLivestreamsFirst?: boolean,
   personalView: boolean,
   showHeader: boolean,
   showHiddenByUser?: boolean,
@@ -64,6 +64,7 @@ type Props = {
   channelIds?: Array<string>,
   claimIds?: Array<string>,
   subscribedChannels: Array<Subscription>,
+  livestreamMap?: { [string]: any },
 
   header?: Node,
   headerLabel?: string | Node,
@@ -136,7 +137,6 @@ function ClaimListDiscover(props: Props) {
     injectedItem,
     feeAmount,
     uris,
-    prefixUris,
     tileLayout,
     hideFilters = false,
     claimIds,
@@ -148,6 +148,8 @@ function ClaimListDiscover(props: Props) {
     releaseTime,
     scrollAnchor,
     showHiddenByUser = false,
+    liveLivestreamsFirst,
+    livestreamMap,
     hasSource,
     hasNoSource,
     isChannel = false,
@@ -378,9 +380,9 @@ function ClaimListDiscover(props: Props) {
 
   const hasMatureTags = tagsParam && tagsParam.split(',').some((t) => MATURE_TAGS.includes(t));
 
-  const searchKey = createNormalizedClaimSearchKey(options);
+  const mainSearchKey = createNormalizedClaimSearchKey(options);
-  const claimSearchResult = claimSearchByQuery[searchKey];
+  let claimSearchResult = claimSearchByQuery[mainSearchKey];
-  const claimSearchResultLastPageReached = claimSearchByQueryLastPageReached[searchKey];
+  const claimSearchResultLastPageReached = claimSearchByQueryLastPageReached[mainSearchKey];
 
   // uncomment to fix an item on a page
   //   const fixUri = 'lbry://@corbettreport#0/lbryodysee#5';
@@ -398,6 +400,14 @@ 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)) {
@@ -459,8 +469,6 @@ function ClaimListDiscover(props: Props) {
     </div>
   );
 
-  const renderUris = uris || claimSearchResult;
-
   // **************************************************************************
   // Helpers
   // **************************************************************************
@@ -506,6 +514,41 @@ 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
@@ -524,15 +567,38 @@ 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}
@@ -570,8 +636,7 @@ function ClaimListDiscover(props: Props) {
           <ClaimList
             tileLayout
             loading={loading}
-            uris={renderUris}
+            uris={finalUris}
-            prefixUris={prefixUris}
             onScrollBottom={handleScrollBottom}
             page={page}
             pageSize={dynamicPageSize}
@@ -580,6 +645,8 @@ function ClaimListDiscover(props: Props) {
             includeSupportAction={includeSupportAction}
             injectedItem={injectedItem}
             showHiddenByUser={showHiddenByUser}
+            liveLivestreamsFirst={liveLivestreamsFirst}
+            livestreamMap={livestreamMap}
             searchOptions={options}
             showNoSourceClaims={showNoSourceClaims}
             empty={empty}
@@ -603,8 +670,7 @@ function ClaimListDiscover(props: Props) {
           <ClaimList
             type={type}
             loading={loading}
-            uris={renderUris}
+            uris={finalUris}
-            prefixUris={prefixUris}
             onScrollBottom={handleScrollBottom}
             page={page}
             pageSize={dynamicPageSize}
@@ -613,6 +679,8 @@ 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,7 +20,6 @@ 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';
@@ -57,7 +56,6 @@ 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,
-  isLivestreamActive: boolean,
+  live?: 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
-    isLivestreamActive,
+    live,
     collectionId,
     collectionIndex,
     editCollection,
@@ -336,7 +336,7 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
   }
 
   let liveProperty = null;
-  if (isLivestreamActive === true) {
+  if (live === 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': isLivestreamActive,
+        'claim-preview__live': live,
         'claim-preview__active': active,
       })}
     >
@@ -386,7 +386,7 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
                       )}
                     </div>
                     {/* @endif */}
-                    {(!isLivestream || isLivestreamActive) && (
+                    {!isLivestream && (
                       <div className="claim-preview__file-property-overlay">
                         <PreviewOverlayProperties uri={uri} small={type === 'small'} properties={liveProperty} />
                       </div>

ui/component/claimPreviewTile/index.js

@@ -13,7 +13,6 @@ 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';
@@ -37,7 +36,6 @@ 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 (isLivestreamActive === true) {
+  if (live === 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': isLivestreamActive,
+        'claim-preview__live': live,
       })}
     >
       <NavLink {...navLinkProps} role="none" tabIndex={-1} aria-hidden>

ui/component/claimTilesDiscover/index.js

@@ -1,36 +1,27 @@
 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, props) => {
+const select = (state) => ({
-  return {
+  claimSearchByQuery: selectClaimSearchByQuery(state),
-    claimSearchByQuery: selectClaimSearchByQuery(state),
+  claimsByUri: selectClaimsByUri(state),
-    claimsByUri: selectClaimsByUri(state),
+  fetchingClaimSearchByQuery: selectFetchingClaimSearchByQuery(state),
-    fetchingClaimSearchByQuery: selectFetchingClaimSearchByQuery(state),
+  showNsfw: selectShowMatureContent(state),
-    showNsfw: selectShowMatureContent(state),
+  hideReposts: makeSelectClientSetting(SETTINGS.HIDE_REPOSTS)(state),
-    hideReposts: makeSelectClientSetting(SETTINGS.HIDE_REPOSTS)(state),
+  mutedUris: selectMutedChannels(state),
-    mutedUris: selectMutedChannels(state),
+  blockedUris: selectModerationBlockList(state),
-    blockedUris: selectModerationBlockList(state),
+});
-    options: resolveSearchOptions({ pageSize: 8, ...props }),
-  };
-};
 
 const perform = {
   doClaimSearch,
@@ -38,102 +29,4 @@ const perform = {
   doFetchViewCount,
 };
 
-export default withRouter(connect(select, perform)(ClaimListDiscover));
+export default 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,41 +1,83 @@
 // @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 } from 'lbry-redux';
+import { createNormalizedClaimSearchKey, MATURE_TAGS, splitBySeparator } from 'lbry-redux';
 import ClaimPreviewTile from 'component/claimPreviewTile';
-import useFetchViewCount from 'effects/use-fetch-view-count';
+import { useHistory } from 'react-router';
+import { getLivestreamOnlyOptions } from 'util/search';
 
-type SearchOptions = {
+/**
-  page_size: number,
+ * Updates 'uris' by adding and/or moving active livestreams to the front of
-  no_totals: boolean,
+ * list.
-  any_tags: Array<string>,
+ * 'liveUris' is also updated with any entries that were moved to the
-  channel_ids: Array<string>,
+ * front, for convenience.
-  claim_ids?: Array<string>,
+ *
-  not_channel_ids: Array<string>,
+ * @param uris [Ref]
-  not_tags: Array<string>,
+ * @param liveUris [Ref]
-  order_by: Array<string>,
+ * @param livestreamMap
-  languages?: Array<string>,
+ * @param claimsByUri
-  release_time?: string,
+ * @param claimSearchByQuery
-  claim_type?: string | Array<string>,
+ * @param options
-  timestamp?: string,
+ */
-  fee_amount?: string,
+export function prioritizeActiveLivestreams(
-  limit_claims_per_channel?: number,
+  uris: Array<string>,
-  stream_types?: Array<string>,
+  liveUris: Array<string>,
-  has_source?: boolean,
+  livestreamMap: { [string]: any },
-  has_no_source?: boolean,
+  claimsByUri: { [string]: any },
-};
+  claimSearchByQuery: { [string]: Array<string> },
+  options: any
+) {
+  if (!livestreamMap || !uris) return;
 
-function urisEqual(prev: ?Array<string>, next: ?Array<string>) {
+  const claimIsLive = (claim, liveChannelIds) => {
-  if (!prev || !next) {
+    // This function relies on:
-    // ClaimList: "null" and "undefined" have special meaning,
+    // 1. Only 1 actual livestream per channel (i.e. all other livestream-claims
-    // so we can't just compare array length here.
+    //    for that channel actually point to the same source).
-    //   - null = "timed out"
+    // 2. 'liveChannelIds' needs to be pruned after being accounted for,
-    //   - undefined = "no result".
+    //    otherwise all livestream-claims will be "live" (we'll only take the
-    return prev === next;
+    //    latest one as "live" ).
+    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);
+        }
+      });
+    }
   }
 
-  // $FlowFixMe - already checked for null above.
+  // 3. Finalize uris by putting live livestreams in front.
-  return prev.length === next.length && prev.every((value, index) => value === next[index]);
+  const newUris = liveUris.concat(uris.filter((uri) => !liveUris.includes(uri)));
+  uris.splice(0, uris.length, ...newUris);
 }
 
 // ****************************************************************************
@@ -46,6 +88,8 @@ type Props = {
   prefixUris?: Array<string>,
   pinUrls?: Array<string>,
   uris: Array<string>,
+  liveLivestreamsFirst?: boolean,
+  livestreamMap?: { [string]: any },
   showNoSourceClaims?: boolean,
   renderProperties?: (Claim) => ?Node,
   fetchViewCount?: boolean,
@@ -65,7 +109,6 @@ type Props = {
   hasSource?: boolean,
   hasNoSource?: boolean,
   // --- select ---
-  location: { search: string },
   claimSearchByQuery: { [string]: Array<string> },
   claimsByUri: { [string]: any },
   fetchingClaimSearchByQuery: { [string]: boolean },
@@ -73,7 +116,6 @@ type Props = {
   hideReposts: boolean,
   mutedUris: Array<string>,
   blockedUris: Array<string>,
-  options: SearchOptions,
   // --- perform ---
   doClaimSearch: ({}) => void,
   doFetchViewCount: (claimIdCsv: string) => void,
@@ -84,72 +126,234 @@ 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 searchKey = createNormalizedClaimSearchKey(options);
+  const { location } = useHistory();
-  const fetchingClaimSearch = fetchingClaimSearchByQuery[searchKey];
+  const urlParams = new URLSearchParams(location.search);
-  const claimSearchUris = claimSearchByQuery[searchKey] || [];
+  const feeAmountInUrl = urlParams.get('fee_amount');
+  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 = !fetchingClaimSearch && claimSearchUris.length === 0;
+  const shouldPerformSearch = !isLoading && uris.length === 0;
 
-  const uris = (prefixUris || []).concat(claimSearchUris);
+  if (
+    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;
+    }
+  }
 
-  if (pinUrls && uris && uris.length > 2 && window.location.pathname === '/') {
+  const modifiedUris = uris ? uris.slice() : [];
-    pinUrls.forEach((pin) => {
+  const fixUris = pinUrls || [];
-      if (uris.indexOf(pin) !== -1) {
+
-        uris.splice(uris.indexOf(pin), 1);
+  if (pinUrls && modifiedUris && modifiedUris.length > 2 && window.location.pathname === '/') {
+    fixUris.forEach((fixUri) => {
+      if (modifiedUris.indexOf(fixUri) !== -1) {
+        modifiedUris.splice(modifiedUris.indexOf(fixUri), 1);
       } else {
-        uris.pop();
+        modifiedUris.pop();
       }
     });
-    uris.splice(2, 0, ...pinUrls);
+    modifiedUris.splice(2, 0, ...fixUris);
   }
 
-  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.
+
-    uris.push(...Array(pageSize - uris.length).fill(''));
+  function resolveLive(index) {
+    if (liveLivestreamsFirst && livestreamMap && index < liveUris.length) {
+      return true;
+    }
+    return undefined;
   }
 
-  useFetchViewCount(fetchViewCount, uris, claimsByUri, doFetchViewCount);
+  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(','));
+    }
+  }
+
+  // **************************************************************************
+  // **************************************************************************
 
-  // 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">
-      {uris && uris.length
+      {modifiedUris && modifiedUris.length
-        ? uris.map((uri, i) => {
+        ? modifiedUris.map((uri, index) => (
-            if (uri) {
+            <ClaimPreviewTile
-              return (
+              showNoSourceClaims={hasNoSource || showNoSourceClaims}
-                <ClaimPreviewTile
+              key={uri}
-                  showNoSourceClaims={hasNoSource || showNoSourceClaims}
+              uri={uri}
-                  key={uri}
+              properties={renderProperties}
-                  uri={uri}
+              live={resolveLive(index)}
-                  properties={renderProperties}
+            />
-                />
+          ))
-              );
-            } else {
-              return <ClaimPreviewTile showNoSourceClaims={hasNoSource || showNoSourceClaims} key={i} placeholder />;
-            }
-          })
         : new Array(pageSize)
             .fill(1)
             .map((x, i) => (
@@ -158,75 +362,4 @@ 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,7 +352,3 @@ 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

@@ -1,24 +0,0 @@
-// @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

@@ -0,0 +1,55 @@
+// @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,18 +1,13 @@
 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, {
+export default connect(select)(ChannelsFollowingPage);
-  doFetchActiveLivestreams,
-})(ChannelsFollowingPage);

ui/page/channelsFollowing/view.jsx

@@ -9,32 +9,24 @@ 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, activeLivestreams, doFetchActiveLivestreams } = props;
+  const { subscribedChannels, tileLayout } = props;
-
   const hasSubsribedChannels = subscribedChannels.length > 0;
-  const channelIds = subscribedChannels.map((sub) => splitBySeparator(sub.uri)[1]);
+  const { livestreamMap } = useGetLivestreams();
-
-  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}
@@ -45,7 +37,7 @@ function ChannelsFollowingPage(props: Props) {
           </span>
         }
         defaultOrderBy={CS.ORDER_BY_NEW}
-        channelIds={channelIds}
+        channelIds={subscribedChannels.map((sub) => splitBySeparator(sub.uri)[1])}
         meta={
           <Button
             icon={ICONS.SEARCH}
@@ -54,6 +46,8 @@ function ChannelsFollowingPage(props: Props) {
             navigate={`/$/${PAGES.CHANNELS_FOLLOWING_DISCOVER}`}
           />
         }
+        liveLivestreamsFirst
+        livestreamMap={livestreamMap}
         showNoSourceClaims={ENABLE_NO_SOURCE_CLAIMS}
         hasSource
       />

ui/page/discover/index.js

@@ -1,8 +1,6 @@
 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';
@@ -20,12 +18,10 @@ 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,17 +8,15 @@ 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 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 },
@@ -30,8 +28,6 @@ type Props = {
   isAuthenticated: boolean,
   dynamicRouteProps: RowDataItem,
   tileLayout: boolean,
-  activeLivestreams: ?LivestreamInfo,
-  doFetchActiveLivestreams: (orderBy?: Array<string>, pageSize?: number, forceFetch?: boolean) => void,
 };
 
 function DiscoverPage(props: Props) {
@@ -44,14 +40,12 @@ function DiscoverPage(props: Props) {
     doResolveUri,
     isAuthenticated,
     tileLayout,
-    activeLivestreams,
-    doFetchActiveLivestreams,
     dynamicRouteProps,
   } = props;
   const buttonRef = useRef();
   const isHovering = useHover(buttonRef);
   const isMobile = useIsMobile();
-  const isLargeScreen = useIsLargeScreen();
+  const { livestreamMap } = useGetLivestreams();
 
   const urlParams = new URLSearchParams(search);
   const claimType = urlParams.get('claim_type');
@@ -64,8 +58,6 @@ 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');
@@ -73,46 +65,6 @@ 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);
@@ -154,53 +106,16 @@ 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={useDualList ? <span /> : repostedUri ? <span /> : undefined}
+        header={repostedUri ? <span /> : undefined}
         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}
@@ -218,14 +133,47 @@ 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={!useDualList && getElemMeta()}
+        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}
+              />
+            )
+          )
+        }
+        liveLivestreamsFirst
+        livestreamMap={livestreamMap}
         hasSource
         showNoSourceClaims={ENABLE_NO_SOURCE_CLAIMS}
       />

ui/page/home/index.js

@@ -1,6 +1,4 @@
 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';
@@ -14,11 +12,8 @@ const select = (state) => ({
   authenticated: selectUserVerifiedEmail(state),
   showNsfw: selectShowMatureContent(state),
   homepageData: selectHomepageData(state),
-  activeLivestreams: selectActiveLivestreams(state),
 });
 
-const perform = (dispatch) => ({
+const perform = {};
-  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,23 +23,14 @@ type Props = {
   subscribedChannels: Array<Subscription>,
   showNsfw: boolean,
   homepageData: any,
-  activeLivestreams: any,
-  doFetchActiveLivestreams: () => void,
 };
 
 function HomePage(props: Props) {
-  const {
+  const { followedTags, subscribedChannels, authenticated, showNsfw, homepageData } = props;
-    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,
@@ -61,13 +52,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}
       />
     );
@@ -104,10 +95,6 @@ function HomePage(props: Props) {
     );
   }
 
-  React.useEffect(() => {
-    doFetchActiveLivestreams();
-  }, []);
-
   return (
     <Page fullWidthPage>
       {!SIMPLE_SITE && (authenticated || !IS_WEB) && !subscribedChannels.length && (

ui/redux/actions/livestream.js

@@ -1,7 +1,6 @@
 // @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({
@@ -32,90 +31,3 @@ 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,10 +5,6 @@ import { handleActions } from 'util/redux-utils';
 const defaultState: LivestreamState = {
   fetchingById: {},
   viewersById: {},
-  fetchingActiveLivestreams: false,
-  activeLivestreams: null,
-  activeLivestreamsLastFetchedDate: 0,
-  activeLivestreamsLastFetchedOptions: {},
 };
 
 export default handleActions(
@@ -40,22 +36,6 @@ 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,23 +40,3 @@ 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,9 +459,3 @@ $recent-msg-button__height: 2rem;
     }
   }
 }
-
-.livestream-list--view-more {
-  display: flex;
-  align-items: flex-end;
-  margin-bottom: var(--spacing-m);
-}

ui/util/livestream.js

@@ -1,24 +0,0 @@
-// @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,6 +21,25 @@ 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