FYP: setting to hide section

static/app-strings.json

@@ -2156,6 +2156,9 @@
   "Hide Scheduled Livestreams": "Hide Scheduled Livestreams",
   "You will not see scheduled livestreams by people you follow on the home or following page.": "You will not see scheduled livestreams by people you follow on the home or following page.",
   "Scheduled streams hidden, you can re-enable them in settings.": "Scheduled streams hidden, you can re-enable them in settings.",
+  "Hide Personal Recommendations": "Hide Personal Recommendations",
+  "Recommendations hidden; you can re-enable them in Settings.": "Recommendations hidden; you can re-enable them in Settings.",
+  "You will not see the personal recommendations in the homepage.": "You will not see the personal recommendations in the homepage.",
   "Sorry, the service is currently unavailable.": "Sorry, the service is currently unavailable.",
   "Started %time_date%": "Started %time_date%",
   "Live %time_date%": "Live %time_date%",

ui/component/recommendedPersonal/index.js

@@ -1,6 +1,10 @@
 import { connect } from 'react-redux';
+import * as SETTINGS from 'constants/settings';
+import { doToast } from 'redux/actions/notifications';
 import { doFetchPersonalRecommendations } from 'redux/actions/search';
+import { doSetClientSetting } from 'redux/actions/settings';
 import { selectPersonalRecommendations } from 'redux/selectors/search';
+import { selectClientSetting } from 'redux/selectors/settings';
 import { selectHasOdyseeMembership, selectUser } from 'redux/selectors/user';
 
 import RecommendedPersonal from './view';
@@ -11,11 +15,14 @@ const select = (state) => {
     userId: user && user.id,
     personalRecommendations: selectPersonalRecommendations(state),
     hasMembership: selectHasOdyseeMembership(state),
+    hideFyp: selectClientSetting(state, SETTINGS.HIDE_FYP),
   };
 };
 
 const perform = {
   doFetchPersonalRecommendations,
+  doSetClientSetting,
+  doToast,
 };
 
 export default connect(select, perform)(RecommendedPersonal);

ui/component/recommendedPersonal/view.jsx

@@ -7,6 +7,7 @@ import ClaimList from 'component/claimList';
 import { URL, SHARE_DOMAIN_URL } from 'config';
 import * as ICONS from 'constants/icons';
 import * as PAGES from 'constants/pages';
+import * as SETTINGS from 'constants/settings';
 import { useIsLargeScreen, useIsMediumScreen } from 'effects/use-screensize';
 
 // TODO: recsysFyp will be moved into 'RecSys', so the redux import in a jsx
@@ -22,9 +23,10 @@ type SectionHeaderProps = {
   navigate?: string,
   icon?: string,
   help?: string,
+  onHide?: () => void,
 };
 
-const SectionHeader = ({ title, icon = '', help }: SectionHeaderProps) => {
+const SectionHeader = ({ title, icon = '', help, onHide }: SectionHeaderProps) => {
   const SHARE_DOMAIN = SHARE_DOMAIN_URL || URL;
   return (
     <h1 className="claim-grid__header">
@@ -32,6 +34,7 @@ const SectionHeader = ({ title, icon = '', help }: SectionHeaderProps) => {
       <span className="claim-grid__title">{title}</span>
       {help}
       <HelpLink href={`${SHARE_DOMAIN}/$/${PAGES.FYP}`} iconSize={24} description={__('Learn more')} />
+      <Button button="link" label={__('Hide')} onClick={onHide} className={'ml-m text-s'} />
     </h1>
   );
 };
@@ -52,11 +55,23 @@ type Props = {
   userId: ?string,
   personalRecommendations: { gid: string, uris: Array<string> },
   hasMembership: boolean,
+  hideFyp: boolean,
   doFetchPersonalRecommendations: () => void,
+  doSetClientSetting: (key: string, value: any, pushPreferences: boolean) => void,
+  doToast: ({ isError?: boolean, message: string }) => void,
 };
 
 export default function RecommendedPersonal(props: Props) {
-  const { onLoad, userId, personalRecommendations, hasMembership, doFetchPersonalRecommendations } = props;
+  const {
+    onLoad,
+    userId,
+    personalRecommendations,
+    hasMembership,
+    hideFyp,
+    doFetchPersonalRecommendations,
+    doSetClientSetting,
+    doToast,
+  } = props;
   const [markedGid, setMarkedGid] = React.useState('');
   const [view, setView] = React.useState(VIEW.ALL_VISIBLE);
   const isLargeScreen = useIsLargeScreen();
@@ -66,6 +81,11 @@ export default function RecommendedPersonal(props: Props) {
   const countCollapsed = getSuitablePageSizeForScreen(8, isLargeScreen, isMediumScreen);
   const finalCount = view === VIEW.ALL_VISIBLE ? count : view === VIEW.COLLAPSED ? countCollapsed : count;
 
+  function doHideFyp() {
+    doSetClientSetting(SETTINGS.HIDE_FYP, true, true);
+    doToast({ message: __('Recommendations hidden; you can re-enable them in Settings.') });
+  }
+
   // **************************************************************************
   // Effects
   // **************************************************************************
@@ -103,7 +123,7 @@ export default function RecommendedPersonal(props: Props) {
 
   React.useEffect(() => {
     // -- Fetch FYP
-    if (hasMembership || process.env.ENABLE_WIP_FEATURES) {
+    if (hasMembership) {
       doFetchPersonalRecommendations();
     }
   }, [hasMembership, doFetchPersonalRecommendations]);
@@ -111,13 +131,14 @@ export default function RecommendedPersonal(props: Props) {
   // **************************************************************************
   // **************************************************************************
 
-  if ((!hasMembership && !process.env.ENABLE_WIP_FEATURES) || count < 1) {
+  if (hideFyp || !hasMembership || count < 1) {
     return null;
   }
 
   return (
     <>
-      <SectionHeader title={__('Recommended For You')} icon={ICONS.WEB} />
+      <SectionHeader title={__('Recommended For You')} icon={ICONS.WEB} onHide={doHideFyp} />
+
       <ClaimList
         tileLayout
         uris={personalRecommendations.uris.slice(0, finalCount)}

ui/component/settingContent/index.js

@@ -3,9 +3,11 @@ import { selectMyChannelUrls } from 'redux/selectors/claims';
 import * as SETTINGS from 'constants/settings';
 import { doOpenModal } from 'redux/actions/app';
 import { doSetPlayingUri } from 'redux/actions/content';
+import { doFetchPersonalRecommendations } from 'redux/actions/search';
 import { doSetClientSetting } from 'redux/actions/settings';
+import { selectPersonalRecommendations } from 'redux/selectors/search';
 import { selectShowMatureContent, selectClientSetting } from 'redux/selectors/settings';
-import { selectUserVerifiedEmail } from 'redux/selectors/user';
+import { selectHasOdyseeMembership, selectUserVerifiedEmail } from 'redux/selectors/user';
 
 import SettingContent from './view';
 
@@ -16,17 +18,21 @@ const select = (state) => ({
   autoplayNext: selectClientSetting(state, SETTINGS.AUTOPLAY_NEXT),
   hideReposts: selectClientSetting(state, SETTINGS.HIDE_REPOSTS),
   hideScheduledLivestreams: selectClientSetting(state, SETTINGS.HIDE_SCHEDULED_LIVESTREAMS),
+  hideFyp: selectClientSetting(state, SETTINGS.HIDE_FYP),
   showNsfw: selectShowMatureContent(state),
   myChannelUrls: selectMyChannelUrls(state),
   instantPurchaseEnabled: selectClientSetting(state, SETTINGS.INSTANT_PURCHASE_ENABLED),
   instantPurchaseMax: selectClientSetting(state, SETTINGS.INSTANT_PURCHASE_MAX),
   enablePublishPreview: selectClientSetting(state, SETTINGS.ENABLE_PUBLISH_PREVIEW),
+  hasMembership: selectHasOdyseeMembership(state),
+  personalRecommendations: selectPersonalRecommendations(state),
 });
 
 const perform = (dispatch) => ({
   setClientSetting: (key, value) => dispatch(doSetClientSetting(key, value)),
   clearPlayingUri: () => dispatch(doSetPlayingUri({ uri: null })),
   openModal: (id, params) => dispatch(doOpenModal(id, params)),
+  doFetchPersonalRecommendations: () => dispatch(doFetchPersonalRecommendations()),
 });
 
 export default connect(select, perform)(SettingContent);

ui/component/settingContent/view.jsx

@@ -27,14 +27,18 @@ type Props = {
   hideReposts: ?boolean,
   showNsfw: boolean,
   hideScheduledLivestreams: boolean,
+  hideFyp: boolean,
   myChannelUrls: ?Array<string>,
   instantPurchaseEnabled: boolean,
   instantPurchaseMax: Price,
   enablePublishPreview: boolean,
+  hasMembership: ?boolean,
+  personalRecommendations: { gid: string, uris: Array<string> },
   // --- perform ---
   setClientSetting: (string, boolean | string | number) => void,
   clearPlayingUri: () => void,
   openModal: (string) => void,
+  doFetchPersonalRecommendations: () => void,
 };
 
 export default function SettingContent(props: Props) {
@@ -46,15 +50,27 @@ export default function SettingContent(props: Props) {
     hideReposts,
     showNsfw,
     hideScheduledLivestreams,
+    hideFyp,
     myChannelUrls,
     instantPurchaseEnabled,
     instantPurchaseMax,
     enablePublishPreview,
+    hasMembership,
+    personalRecommendations,
     setClientSetting,
     clearPlayingUri,
     openModal,
+    doFetchPersonalRecommendations,
   } = props;
 
+  const fypExists = personalRecommendations && personalRecommendations.uris.length > 0;
+
+  React.useEffect(() => {
+    if (hasMembership) {
+      doFetchPersonalRecommendations();
+    }
+  }, []);
+
   return (
     <>
       <div className="card__title-section">
@@ -119,6 +135,20 @@ export default function SettingContent(props: Props) {
               />
             </SettingsRow>
 
+            <SettingsRow
+              membersOnly
+              title={__('Hide Personal Recommendations')}
+              subtitle={__(HELP.HIDE_FYP)}
+              disabled={!hasMembership || !fypExists}
+            >
+              <FormField
+                type="checkbox"
+                name="hide_fyp"
+                onChange={() => setClientSetting(SETTINGS.HIDE_FYP, !hideFyp)}
+                checked={hideFyp}
+              />
+            </SettingsRow>
+
             {!SIMPLE_SITE && (
               <>
                 {/*
@@ -235,6 +265,7 @@ const HELP = {
   AUTOPLAY_NEXT: 'Autoplay the next related item when a file (video or audio) finishes playing.',
   HIDE_REPOSTS: 'You will not see reposts by people you follow or receive email notifying about them.',
   HIDE_SCHEDULED_LIVESTREAMS: 'You will not see scheduled livestreams by people you follow on the home or following page.',
+  HIDE_FYP: 'You will not see the personal recommendations in the homepage.',
   SHOW_MATURE: 'Mature content may include nudity, intense sexuality, profanity, or other adult content. By displaying mature content, you are affirming you are of legal age to view mature content in your country or jurisdiction.  ',
   MAX_PURCHASE_PRICE: 'This will prevent you from purchasing any content over a certain cost, as a safety measure.',
   ONLY_CONFIRM_OVER_AMOUNT: '', // [feel redundant. Disable for now] "When this option is chosen, LBRY won't ask you to confirm purchases or tips below your chosen amount.",

ui/constants/settings.js

@@ -36,6 +36,7 @@ export const SEARCH_IN_LANGUAGE = 'search_in_language';
 export const HOMEPAGE = 'homepage';
 export const HIDE_REPOSTS = 'hide_reposts';
 export const HIDE_SCHEDULED_LIVESTREAMS = 'hide_scheduled_livestreams';
+export const HIDE_FYP = 'hide_fyp';
 export const SUPPORT_OPTION = 'support_option';
 export const TILE_LAYOUT = 'tile_layout';
 export const VIDEO_THEATER_MODE = 'video_theater_mode';

ui/constants/shared_preferences.js

@@ -18,6 +18,7 @@ export const CLIENT_SYNC_KEYS = [
   SETTINGS.SHOW_MATURE,
   SETTINGS.HIDE_REPOSTS,
   SETTINGS.HIDE_SCHEDULED_LIVESTREAMS,
+  SETTINGS.HIDE_FYP,
   SETTINGS.SHOW_ANONYMOUS,
   SETTINGS.INSTANT_PURCHASE_ENABLED,
   SETTINGS.INSTANT_PURCHASE_MAX,

ui/redux/reducers/settings.js

@@ -72,6 +72,7 @@ const defaultState = {
     [SETTINGS.AUTO_DOWNLOAD]: true,
     [SETTINGS.HIDE_REPOSTS]: false,
     [SETTINGS.HIDE_SCHEDULED_LIVESTREAMS]: false,
+    [SETTINGS.HIDE_REPOSTS]: false,
 
     // OS
     [SETTINGS.AUTO_LAUNCH]: true,