Homepage: move "LIVE" livestreams to the front.

ui/component/claimTilesDiscover/index.js

@@ -1,5 +1,11 @@
 import { connect } from 'react-redux';
-import { doClaimSearch, selectClaimSearchByQuery, selectFetchingClaimSearchByQuery, SETTINGS } from 'lbry-redux';
+import {
+  doClaimSearch,
+  selectClaimSearchByQuery,
+  selectFetchingClaimSearchByQuery,
+  SETTINGS,
+  selectClaimsByUri,
+} from 'lbry-redux';
 import { doToggleTagFollowDesktop } from 'redux/actions/tags';
 import { makeSelectClientSetting, selectShowMatureContent } from 'redux/selectors/settings';
 import { selectModerationBlockList } from 'redux/selectors/comments';
@@ -8,6 +14,7 @@ import ClaimListDiscover from './view';
 
 const select = (state) => ({
   claimSearchByQuery: selectClaimSearchByQuery(state),
+  claimsByUri: selectClaimsByUri(state),
   fetchingClaimSearchByQuery: selectFetchingClaimSearchByQuery(state),
   showNsfw: selectShowMatureContent(state),
   hideReposts: makeSelectClientSetting(SETTINGS.HIDE_REPOSTS)(state),

ui/component/claimTilesDiscover/view.jsx

@@ -20,6 +20,9 @@ type Props = {
   fetchingClaimSearchByQuery: {
     [string]: boolean,
   },
+  claimsByUri: {
+    [string]: any,
+  },
   // claim search options are below
   tags: Array<string>,
   blockedUris: Array<string>,
@@ -37,12 +40,16 @@ type Props = {
   limitClaimsPerChannel?: number,
   hasNoSource?: boolean,
   renderProperties?: (Claim) => ?Node,
+  // Passing in 'livestreamMap' indicates that we want to sort "live"
+  // livestreams first, and also embelish the "live" tiles.
+  livestreamMap?: { [string]: any },
 };
 
 function ClaimTilesDiscover(props: Props) {
   const {
     doClaimSearch,
     claimSearchByQuery,
+    claimsByUri,
     showNsfw,
     hideReposts,
     // Below are options to pass that are forwarded to claim_search
@@ -64,6 +71,7 @@ function ClaimTilesDiscover(props: Props) {
     renderProperties,
     blockedUris,
     mutedUris,
+    livestreamMap,
   } = props;
 
   const { location } = useHistory();
@@ -71,6 +79,7 @@ function ClaimTilesDiscover(props: Props) {
   const feeAmountInUrl = urlParams.get('fee_amount');
   const feeAmountParam = feeAmountInUrl || feeAmount;
   const mutedAndBlockedChannelIds = Array.from(new Set(mutedUris.concat(blockedUris).map((uri) => uri.split('#')[1])));
+  const liveUris = [];
 
   const options: {
     page_size: number,
@@ -145,7 +154,30 @@ function ClaimTilesDiscover(props: Props) {
   }
 
   const claimSearchCacheQuery = createNormalizedClaimSearchKey(options);
-  const uris = (prefixUris || []).concat(claimSearchByQuery[claimSearchCacheQuery] || []);
+  let uris = (prefixUris || []).concat(claimSearchByQuery[claimSearchCacheQuery] || []);
+
+  // Push active livestreams to the front:
+  if (livestreamMap) {
+    const liveChannelIds = Object.keys(livestreamMap);
+
+    uris.forEach((uri) => {
+      const claim = claimsByUri[uri];
+      if (
+        claim &&
+        claim.value_type === 'stream' &&
+        claim.value.source === undefined &&
+        claim.signing_channel &&
+        liveChannelIds.includes(claim.signing_channel.claim_id)
+      ) {
+        liveUris.push(uri);
+        // This live channel has been accounted for, so ignore it's older livestreams:
+        liveChannelIds.splice(liveChannelIds.indexOf(claim.signing_channel.claim_id), 1);
+      }
+    });
+
+    uris = liveUris.concat(uris.filter((uri) => !liveUris.includes(uri)));
+  }
+
   // Don't use the query from createNormalizedClaimSearchKey for the effect since that doesn't include page & release_time
   const optionsStringForEffect = JSON.stringify(options);
   const isLoading = fetchingClaimSearchByQuery[claimSearchCacheQuery];
@@ -158,10 +190,19 @@ function ClaimTilesDiscover(props: Props) {
     }
   }, [doClaimSearch, shouldPerformSearch, optionsStringForEffect]);
 
+  const resolveLive = (index) => {
+    if (livestreamMap && index < liveUris.length) {
+      return true;
+    }
+    return undefined;
+  };
+
   return (
     <ul className="claim-grid">
       {uris && uris.length
-        ? uris.map((uri) => <ClaimPreviewTile key={uri} uri={uri} properties={renderProperties} />)
+        ? uris.map((uri, index) => (
+            <ClaimPreviewTile key={uri} uri={uri} properties={renderProperties} live={resolveLive(index)} />
+          ))
         : new Array(pageSize).fill(1).map((x, i) => <ClaimPreviewTile key={i} placeholder />)}
     </ul>
   );

ui/page/home/view.jsx

@@ -9,6 +9,7 @@ import ClaimTilesDiscover from 'component/claimTilesDiscover';
 import Icon from 'component/common/icon';
 import I18nMessage from 'component/i18nMessage';
 import LbcSymbol from 'component/common/lbc-symbol';
+import useGetLivestreams from 'effects/use-get-livestreams';
 
 type Props = {
   authenticated: boolean,
@@ -24,6 +25,7 @@ function HomePage(props: Props) {
   const showPersonalizedTags = (authenticated || !IS_WEB) && followedTags && followedTags.length > 0;
   const showIndividualTags = showPersonalizedTags && followedTags.length < 5;
   const { default: getHomepage } = homepageData;
+  const { livestreamMap } = useGetLivestreams(0);
 
   const rowData: Array<RowDataItem> = getHomepage(
     authenticated,
@@ -91,7 +93,7 @@ function HomePage(props: Props) {
             </h1>
           )}
 
-          <ClaimTilesDiscover {...options} />
+          <ClaimTilesDiscover {...options} livestreamMap={livestreamMap} />
           {(route || link) && (
             <Button
               className="claim-grid__title--secondary"