✅ Re-enable active livestream tiles using the new method

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

@@ -10,21 +10,31 @@ import Page from 'component/page';
 import Button from 'component/button';
 import Icon from 'component/common/icon';
 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 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}
@@ -35,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}

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

@@ -16,6 +16,7 @@ import Ads from 'web/component/ads';
 import LbcSymbol from 'component/common/lbc-symbol';
 import I18nMessage from 'component/i18nMessage';
 import moment from 'moment';
+import { getLivestreamUris } from 'util/livestream';
 
 type Props = {
   location: { search: string },
@@ -27,6 +28,8 @@ type Props = {
   isAuthenticated: boolean,
   dynamicRouteProps: RowDataItem,
   tileLayout: boolean,
+  activeLivestreams: ?LivestreamInfo,
+  doFetchActiveLivestreams: () => void,
 };
 
 function DiscoverPage(props: Props) {
@@ -39,6 +42,8 @@ function DiscoverPage(props: Props) {
     doResolveUri,
     isAuthenticated,
     tileLayout,
+    activeLivestreams,
+    doFetchActiveLivestreams,
     dynamicRouteProps,
   } = props;
   const buttonRef = useRef();
@@ -56,6 +61,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');
@@ -104,9 +111,14 @@ function DiscoverPage(props: Props) {
     );
   }
 
+  React.useEffect(() => {
+    doFetchActiveLivestreams();
+  }, []);
+
   return (
     <Page noFooter fullWidthPage={tileLayout}>
       <ClaimListDiscover
+        prefixUris={getLivestreamUris(activeLivestreams, channelIds)}
         hideAdvancedFilter={SIMPLE_SITE}
         hideFilters={SIMPLE_SITE ? !dynamicRouteProps : undefined}
         header={repostedUri ? <span /> : undefined}
@@ -131,9 +143,7 @@ function DiscoverPage(props: Props) {
             : undefined
         }
         feeAmount={SIMPLE_SITE ? !dynamicRouteProps && CS.FEE_AMOUNT_ANY : undefined}
-        channelIds={
-          (dynamicRouteProps && dynamicRouteProps.options && dynamicRouteProps.options.channelIds) || undefined
-        }
+        channelIds={channelIds}
         limitClaimsPerChannel={
           SIMPLE_SITE
             ? (dynamicRouteProps && dynamicRouteProps.options && dynamicRouteProps.options.limitClaimsPerChannel) ||

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

@@ -10,6 +10,7 @@ import ClaimPreviewTile from 'component/claimPreviewTile';
 import Icon from 'component/common/icon';
 import WaitUntilOnPage from 'component/common/wait-until-on-page';
 import { GetLinksData } from 'util/buildHomepage';
+import { getLivestreamUris } from 'util/livestream';
 
 // @if TARGET='web'
 import Pixel from 'web/component/pixel';
@@ -22,10 +23,20 @@ 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;
@@ -50,8 +61,15 @@ function HomePage(props: Props) {
         ))}
       </ul>
     );
+
     const claimTiles = (
-      <ClaimTilesDiscover {...options} showNoSourceClaims={ENABLE_NO_SOURCE_CLAIMS} hasSource pinUrls={pinUrls} />
+      <ClaimTilesDiscover
+        {...options}
+        showNoSourceClaims={ENABLE_NO_SOURCE_CLAIMS}
+        hasSource
+        prefixUris={getLivestreamUris(activeLivestreams, options.channelIds)}
+        pinUrls={pinUrls}
+      />
     );
 
     return (
@@ -86,6 +104,10 @@ function HomePage(props: Props) {
     );
   }
 
+  React.useEffect(() => {
+    doFetchActiveLivestreams();
+  }, []);
+
   return (
     <Page fullWidthPage>
       {!SIMPLE_SITE && (authenticated || !IS_WEB) && !subscribedChannels.length && (