ClaimListDiscover: repeat livestream-sorting changes in ClaimTilesDiscover

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),
 });
 
 const perform = (dispatch) => ({});

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';
@@ -38,6 +39,10 @@ type Props = {
   tileLayout?: boolean,
   searchInLanguage: boolean,
   hideMenu?: boolean,
+  claimSearchByQuery: { [string]: Array<string> },
+  claimsByUri: { [string]: any },
+  liveLivestreamsFirst?: boolean,
+  livestreamMap?: { [string]: any },
 };
 
 export default function ClaimList(props: Props) {
@@ -63,16 +68,33 @@ export default function ClaimList(props: Props) {
     renderProperties,
     searchInLanguage,
     hideMenu,
+    claimSearchByQuery,
+    claimsByUri,
+    liveLivestreamsFirst,
+    livestreamMap,
   } = props;
 
   const [currentSort, setCurrentSort] = usePersistedState(persistedStorageKey, SORT_NEW);
   const timedOut = uris === null;
   const urisLength = (uris && uris.length) || 0;
+
+  const liveUris = [];
+  if (liveLivestreamsFirst && livestreamMap) {
+    prioritizeActiveLivestreams(uris, liveUris, livestreamMap, claimsByUri, claimSearchByQuery);
+  }
+
   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);
   }
@@ -101,8 +123,14 @@ export default function ClaimList(props: Props) {
   return tileLayout && !header ? (
     <section className="claim-grid">
       {urisLength > 0 &&
-        uris.map((uri) => (
+        uris.map((uri, index) => (
-          <ClaimPreviewTile key={uri} uri={uri} showHiddenByUser={showHiddenByUser} properties={renderProperties} />
+          <ClaimPreviewTile
+            key={uri}
+            uri={uri}
+            showHiddenByUser={showHiddenByUser}
+            properties={renderProperties}
+            live={resolveLive(index)}
+          />
         ))}
       {!timedOut && urisLength === 0 && !loading && <div className="empty main--empty">{empty || noResultMsg}</div>}
       {timedOut && timedOutMessage && <div className="empty main--empty">{timedOutMessage}</div>}
@@ -165,12 +193,9 @@ export default function ClaimList(props: Props) {
                   // Hack to hide spee.ch thumbnail publishes
                   // If it meets these requirements, it was probably uploaded here:
                   // https://github.com/lbryio/lbry-redux/blob/master/src/redux/actions/publish.js#L74-L79
-                  if (claim.name.length === 24 && !claim.name.includes(' ') && claim.value.author === 'Spee.ch') {
+                  return claim.name.length === 24 && !claim.name.includes(' ') && claim.value.author === 'Spee.ch';
-                    return true;
-                  } else {
-                    return false;
-                  }
                 }}
+                live={resolveLive(index)}
               />
             </React.Fragment>
           ))}

ui/component/claimListDiscover/view.jsx

@@ -68,6 +68,8 @@ type Props = {
   searchInLanguage: boolean,
   scrollAnchor?: string,
   showHiddenByUser?: boolean,
+  liveLivestreamsFirst?: boolean,
+  livestreamMap?: { [string]: any },
 };
 
 function ClaimListDiscover(props: Props) {
@@ -119,6 +121,8 @@ function ClaimListDiscover(props: Props) {
     searchInLanguage,
     scrollAnchor,
     showHiddenByUser = false,
+    liveLivestreamsFirst,
+    livestreamMap,
   } = props;
   const didNavigateForward = history.action === 'PUSH';
   const { search } = location;
@@ -494,6 +498,8 @@ function ClaimListDiscover(props: Props) {
             includeSupportAction={includeSupportAction}
             injectedItem={injectedItem}
             showHiddenByUser={showHiddenByUser}
+            liveLivestreamsFirst={liveLivestreamsFirst}
+            livestreamMap={livestreamMap}
           />
           {loading && (
             <div className="claim-grid">
@@ -524,6 +530,8 @@ function ClaimListDiscover(props: Props) {
             includeSupportAction={includeSupportAction}
             injectedItem={injectedItem}
             showHiddenByUser={showHiddenByUser}
+            liveLivestreamsFirst={liveLivestreamsFirst}
+            livestreamMap={livestreamMap}
           />
           {loading &&
             new Array(dynamicPageSize)

ui/component/claimPreview/view.jsx

@@ -70,6 +70,7 @@ type Props = {
   repostUrl?: string,
   hideMenu?: boolean,
   isLivestream?: boolean,
+  live?: boolean,
 };
 
 const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
@@ -120,6 +121,7 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
     hideMenu = false,
     // repostUrl,
     isLivestream,
+    live,
   } = props;
   const WrapperElement = wrapperElement || 'li';
   const shouldFetch =
@@ -237,6 +239,11 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
     return null;
   }
 
+  let liveProperty = null;
+  if (live === true) {
+    liveProperty = (claim) => <>LIVE</>;
+  }
+
   return (
     <WrapperElement
       ref={ref}
@@ -246,6 +253,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,
       })}
     >
       <>
@@ -278,9 +286,9 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
                       </div>
                     )}
                     {/* @endif */}
-                    {!isRepost && !isChannelUri && !isLivestream && (
+                    {!isRepost && !isChannelUri && (
                       <div className="claim-preview__file-property-overlay">
-                        <FileProperties uri={contentUri} small />
+                        <FileProperties uri={contentUri} small properties={liveProperty} />
                       </div>
                     )}
                   </FileThumbnail>

ui/page/channelsFollowing/view.jsx

@@ -9,6 +9,7 @@ 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';
 
 type Props = {
   subscribedChannels: Array<Subscription>,
@@ -18,6 +19,7 @@ type Props = {
 function ChannelsFollowingPage(props: Props) {
   const { subscribedChannels, tileLayout } = props;
   const hasSubsribedChannels = subscribedChannels.length > 0;
+  const { livestreamMap } = useGetLivestreams(0);
 
   return !hasSubsribedChannels ? (
     <ChannelsFollowingDiscoverPage />
@@ -43,6 +45,8 @@ function ChannelsFollowingPage(props: Props) {
             navigate={`/$/${PAGES.CHANNELS_FOLLOWING_DISCOVER}`}
           />
         }
+        liveLivestreamsFirst
+        livestreamMap={livestreamMap}
       />
     </Page>
   );

ui/page/discover/view.jsx

@@ -15,6 +15,7 @@ import * as CS from 'constants/claim_search';
 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';
 
 type Props = {
   location: { search: string },
@@ -43,6 +44,7 @@ function DiscoverPage(props: Props) {
   const buttonRef = useRef();
   const isHovering = useHover(buttonRef);
   const isMobile = useIsMobile();
+  const { livestreamMap } = useGetLivestreams(0);
 
   const urlParams = new URLSearchParams(search);
   const claimType = urlParams.get('claim_type');
@@ -148,6 +150,8 @@ function DiscoverPage(props: Props) {
             )
           )
         }
+        liveLivestreamsFirst
+        livestreamMap={livestreamMap}
       />
     </Page>
   );