Remove Premium+ Tiles when Premium+ is active (#1525)

ui/component/channelContent/index.js

@@ -7,11 +7,13 @@ import {
   makeSelectTotalPagesInChannelSearch,
   selectClaimForUri,
 } from 'redux/selectors/claims';
+import { selectOdyseeMembershipIsPremiumPlus } from 'redux/selectors/user';
 import { doResolveUris } from 'redux/actions/claims';
 import * as SETTINGS from 'constants/settings';
 import { makeSelectChannelIsMuted } from 'redux/selectors/blocked';
 import { withRouter } from 'react-router';
 import { selectClientSetting, selectShowMatureContent } from 'redux/selectors/settings';
+import { selectAdBlockerFound } from 'redux/selectors/app';
 import { doFetchChannelLiveStatus } from 'redux/actions/livestream';
 import { selectActiveLivestreamForChannel, selectActiveLivestreamInitialized } from 'redux/selectors/livestream';
 import { getChannelIdFromClaim } from 'util/claim';
@@ -35,6 +37,8 @@ const select = (state, props) => {
     tileLayout: selectClientSetting(state, SETTINGS.TILE_LAYOUT),
     activeLivestreamForChannel: selectActiveLivestreamForChannel(state, channelClaimId),
     activeLivestreamInitialized: selectActiveLivestreamInitialized(state),
+    adBlockerFound: selectAdBlockerFound(state),
+    hasPremiumPlus: selectOdyseeMembershipIsPremiumPlus(state),
   };
 };
 

ui/component/channelContent/view.jsx

@@ -41,6 +41,7 @@ type Props = {
   doFetchChannelLiveStatus: (string) => void,
   activeLivestreamForChannel: any,
   activeLivestreamInitialized: boolean,
+  hasPremiumPlus: boolean,
 };
 
 function ChannelContent(props: Props) {
@@ -62,6 +63,7 @@ function ChannelContent(props: Props) {
     doFetchChannelLiveStatus,
     activeLivestreamForChannel,
     activeLivestreamInitialized,
+    hasPremiumPlus,
   } = props;
   // const claimsInChannel = (claim && claim.meta.claims_in_channel) || 0;
 
@@ -159,7 +161,11 @@ function ChannelContent(props: Props) {
           defaultOrderBy={CS.ORDER_BY_NEW}
           pageSize={dynamicPageSize}
           infiniteScroll={defaultInfiniteScroll}
-          injectedItem={{ node: <Ads small type="video" tileLayout /> }}
+          injectedItem={
+            !hasPremiumPlus && {
+              node: <Ads small type="video" tileLayout />,
+            }
+          }
           meta={
             showFilters && (
               <Form onSubmit={() => {}} className="wunderbar--inline">

ui/component/recommendedContent/index.js

@@ -15,7 +15,7 @@ const select = (state, props) => {
     recommendedContentUris,
     nextRecommendedUri,
     isSearching: selectIsSearching(state),
-    userHasPremiumPlus: selectOdyseeMembershipIsPremiumPlus(state),
+    hasPremiumPlus: selectOdyseeMembershipIsPremiumPlus(state),
   };
 };
 

ui/component/recommendedContent/view.jsx

@@ -29,7 +29,7 @@ type Props = {
   claimId: string,
   metadata: any,
   location: UrlLocation,
-  userHasPremiumPlus: boolean,
+  hasPremiumPlus: boolean,
 };
 
 export default React.memo<Props>(function RecommendedContent(props: Props) {
@@ -41,11 +41,11 @@ export default React.memo<Props>(function RecommendedContent(props: Props) {
     isSearching,
     claim,
     location,
-    userHasPremiumPlus,
+    hasPremiumPlus,
   } = props;
 
   const claimId: ?string = claim && claim.claim_id;
-  const injectAds = SHOW_ADS && IS_WEB && !userHasPremiumPlus;
+  const injectAds = SHOW_ADS && IS_WEB && !hasPremiumPlus;
 
   function claimContainsBlockedWords(claim: ?StreamClaim) {
     if (BLOCKED_WORDS) {
@@ -77,7 +77,7 @@ export default React.memo<Props>(function RecommendedContent(props: Props) {
   const { onRecsLoaded: onRecommendationsLoaded, onClickedRecommended: onRecommendationClicked } = RecSys;
 
   const InjectedAd =
-    injectAds && !blacklistTriggered
+    injectAds && !blacklistTriggered && !hasPremiumPlus
       ? {
           node: <Ads small type="video" className="ads__claim-item--recommended" noFallback />,
           index: isMobile ? 0 : 3,

ui/page/discover/index.js

@@ -8,6 +8,7 @@ import { selectActiveLivestreams } from 'redux/selectors/livestream';
 import { selectFollowedTags } from 'redux/selectors/tags';
 import { doToggleTagFollowDesktop } from 'redux/actions/tags';
 import { selectClientSetting, selectLanguage } from 'redux/selectors/settings';
+import { selectOdyseeMembershipIsPremiumPlus } from 'redux/selectors/user';
 import DiscoverPage from './view';
 
 const select = (state, props) => {
@@ -23,6 +24,7 @@ const select = (state, props) => {
     activeLivestreams: selectActiveLivestreams(state),
     languageSetting: selectLanguage(state),
     searchInLanguage: selectClientSetting(state, SETTINGS.SEARCH_IN_LANGUAGE),
+    hasPremiumPlus: selectOdyseeMembershipIsPremiumPlus(state),
   };
 };
 

ui/page/discover/view.jsx

@@ -35,6 +35,7 @@ type Props = {
   tileLayout: boolean,
   activeLivestreams: ?LivestreamInfo,
   doFetchActiveLivestreams: (orderBy: ?Array<string>, lang: ?Array<string>) => void,
+  hasPremiumPlus: boolean,
 };
 
 function DiscoverPage(props: Props) {
@@ -51,6 +52,7 @@ function DiscoverPage(props: Props) {
     activeLivestreams,
     doFetchActiveLivestreams,
     dynamicRouteProps,
+    hasPremiumPlus,
   } = props;
 
   const buttonRef = useRef();
@@ -221,7 +223,7 @@ function DiscoverPage(props: Props) {
           tags={tags}
           hiddenNsfwMessage={<HiddenNsfw type="page" />}
           repostedClaimId={repostedClaim ? repostedClaim.claim_id : null}
-          injectedItem={!isWildWest && { node: <Ads small type="video" tileLayout /> }}
+          injectedItem={!isWildWest && !hasPremiumPlus && { node: <Ads small type="video" tileLayout /> }}
           // TODO: find a better way to determine discover / wild west vs other modes release times
           // for now including && !tags so that
           releaseTime={releaseTime || undefined}

ui/page/home/index.js

@@ -4,7 +4,12 @@ import { doOpenModal } from 'redux/actions/app';
 import { doFetchActiveLivestreams } from 'redux/actions/livestream';
 import { selectActiveLivestreams, selectFetchingActiveLivestreams } from 'redux/selectors/livestream';
 import { selectFollowedTags } from 'redux/selectors/tags';
-import { selectHasOdyseeMembership, selectHomepageFetched, selectUserVerifiedEmail } from 'redux/selectors/user';
+import {
+  selectOdyseeMembershipIsPremiumPlus,
+  selectHasOdyseeMembership,
+  selectHomepageFetched,
+  selectUserVerifiedEmail,
+} from 'redux/selectors/user';
 import { selectSubscriptions } from 'redux/selectors/subscriptions';
 import {
   selectShowMatureContent,
@@ -28,6 +33,7 @@ const select = (state) => ({
   hideScheduledLivestreams: selectClientSetting(state, SETTINGS.HIDE_SCHEDULED_LIVESTREAMS),
   homepageOrder: selectClientSetting(state, SETTINGS.HOMEPAGE_ORDER),
   hasMembership: selectHasOdyseeMembership(state),
+  hasPremiumPlus: selectOdyseeMembershipIsPremiumPlus(state),
 });
 
 const perform = (dispatch) => ({

ui/page/home/view.jsx

@@ -45,6 +45,7 @@ type Props = {
   homepageOrder: HomepageOrder,
   doOpenModal: (id: string, ?{}) => void,
   hasMembership: ?boolean,
+  hasPremiumPlus: boolean,
 };
 
 function HomePage(props: Props) {
@@ -63,6 +64,7 @@ function HomePage(props: Props) {
     homepageOrder,
     doOpenModal,
     hasMembership,
+    hasPremiumPlus,
   } = props;
 
   const showPersonalizedChannels = (authenticated || !IS_WEB) && subscribedChannels && subscribedChannels.length > 0;
@@ -160,7 +162,7 @@ function HomePage(props: Props) {
         hasSource
         prefixUris={getLivestreamUris(activeLivestreams, options.channelIds)}
         pins={{ urls: pinUrls, claimIds: pinnedClaimIds }}
-        injectedItem={index === 0 && { node: <Ads small type="video" tileLayout /> }}
+        injectedItem={index === 0 && !hasPremiumPlus && { node: <Ads small type="video" tileLayout /> }}
         forceShowReposts={id !== 'FOLLOWING'}
         loading={id === 'FOLLOWING' ? fetchingActiveLivestreams : false}
       />

ui/page/search/index.js

@@ -9,11 +9,13 @@ import {
 } from 'redux/selectors/search';
 import { selectShowMatureContent } from 'redux/selectors/settings';
 import { getSearchQueryString } from 'util/query-params';
+import { selectOdyseeMembershipIsPremiumPlus } from 'redux/selectors/user';
 import SearchPage from './view';
 
 const select = (state, props) => {
   const showMature = selectShowMatureContent(state);
   const urlParams = new URLSearchParams(props.location.search);
+  const hasPremiumPlus = selectOdyseeMembershipIsPremiumPlus(state);
 
   let urlQuery = urlParams.get('q') || null;
   if (urlQuery) {
@@ -36,6 +38,7 @@ const select = (state, props) => {
     isSearching: selectIsSearching(state),
     uris: uris,
     hasReachedMaxResultsLength: hasReachedMaxResultsLength,
+    hasPremiumPlus: hasPremiumPlus,
   };
 };
 

ui/page/search/view.jsx

@@ -20,10 +20,11 @@ type Props = {
   uris: Array<string>,
   isAuthenticated: boolean,
   hasReachedMaxResultsLength: boolean,
+  hasPremiumPlus: boolean,
 };
 
 export default function SearchPage(props: Props) {
-  const { urlQuery, searchOptions, search, uris, isSearching, hasReachedMaxResultsLength } = props;
+  const { urlQuery, searchOptions, search, uris, isSearching, hasReachedMaxResultsLength, hasPremiumPlus } = props;
   const { push } = useHistory();
   const [from, setFrom] = React.useState(0);
 
@@ -103,7 +104,7 @@ export default function SearchPage(props: Props) {
                   onSearchOptionsChanged={resetPage}
                 />
               }
-              injectedItem={{ node: <Ads small type="video" />, index: 3 }}
+              injectedItem={!hasPremiumPlus && { node: <Ads small type="video" />, index: 3 }}
             />
 
             <div className="main--empty help">{__('These search results are provided by Odysee.')}</div>