From 7515ed27048b48c3321333cf72f091e811188824 Mon Sep 17 00:00:00 2001
From: infinite-persistence <inf.persistence@gmail.com>
Date: Fri, 17 Sep 2021 17:21:10 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=85=20Re-enable=20active=20livestream=20t?=
 =?UTF-8?q?iles=20using=20the=20new=20method?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/page/channelsFollowing/index.js |  9 +++++++--
 ui/page/channelsFollowing/view.jsx | 14 ++++++++++++--
 ui/page/discover/index.js          |  4 ++++
 ui/page/discover/view.jsx          | 16 +++++++++++++---
 ui/page/home/index.js              |  7 ++++++-
 ui/page/home/view.jsx              | 26 ++++++++++++++++++++++++--
 6 files changed, 66 insertions(+), 10 deletions(-)

diff --git a/ui/page/channelsFollowing/index.js b/ui/page/channelsFollowing/index.js
index 599cbf841..c08a2107f 100644
--- a/ui/page/channelsFollowing/index.js
+++ b/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);
diff --git a/ui/page/channelsFollowing/view.jsx b/ui/page/channelsFollowing/view.jsx
index 87bb5423f..c7f9d7222 100644
--- a/ui/page/channelsFollowing/view.jsx
+++ b/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}
diff --git a/ui/page/discover/index.js b/ui/page/discover/index.js
index f2d0a0a28..20fc81ab5 100644
--- a/ui/page/discover/index.js
+++ b/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);
diff --git a/ui/page/discover/view.jsx b/ui/page/discover/view.jsx
index 8fa5511cf..a88e34666 100644
--- a/ui/page/discover/view.jsx
+++ b/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) ||
diff --git a/ui/page/home/index.js b/ui/page/home/index.js
index 40856d304..78926b536 100644
--- a/ui/page/home/index.js
+++ b/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);
diff --git a/ui/page/home/view.jsx b/ui/page/home/view.jsx
index dde5eb299..420c347f3 100644
--- a/ui/page/home/view.jsx
+++ b/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 && (