release recommendations to all users (#3116)

* feat: release recommendations to all users

* fix: missed one spot

* fix: homepage section

* fix: Insert FYP after Following if placement not defined

* Show modal when FYP becomes available on account

* Minor string change

* fix messaging on FYP info page

---------

Co-authored-by: miko <sauce47@posteo.net>

Author: tzarebczan

static/app-strings.json

@@ -190,6 +190,7 @@
   "This file has been shared with you by other people.": "This file has been shared with you by other people.",
   "Odysee is not responsible for its content, click continue to proceed at your own risk.": "Odysee is not responsible for its content, click continue to proceed at your own risk.",
   "Yes": "Yes",
+  "Yes!": "Yes!",
   "No": "No",
   "These search results are provided by Odysee.": "These search results are provided by Odysee.",
   "Files": "Files",
@@ -2980,6 +2981,8 @@
   "Failed to apply membership tiers. Access to the content may still be restricted.": "Failed to apply membership tiers. Access to the content may still be restricted.",
   "If the issue persists, please reach out to help@odysee.com": "If the issue persists, please reach out to help@odysee.com",
   "Creator only": "Creator only",
+  "Would you like to enable them? Homepage recommendations placement can be configured from the homepage customization.": "Would you like to enable them? Homepage recommendations placement can be configured from the homepage customization.",
+  "Homepage recommendations available": "Homepage recommendations available",
 
   "--end--": "--end--"
 }

ui/component/app/index.js

@@ -1,5 +1,6 @@
 import { hot } from 'react-hot-loader/root';
 import { connect } from 'react-redux';
+import * as SETTINGS from 'constants/settings';
 import {
   selectGetSyncErrorMessage,
   selectPrefsReady,
@@ -17,12 +18,20 @@ import {
   selectThemePath,
   selectDefaultChannelClaim,
   selectHomepageAnnouncement,
+  selectClientSetting,
 } from 'redux/selectors/settings';
 import { selectModal, selectActiveChannelClaim } from 'redux/selectors/app';
 import { selectUploadCount } from 'redux/selectors/publish';
-import { doOpenAnnouncements, doSetLanguage, doSetDefaultChannel, doFetchLanguage } from 'redux/actions/settings';
+import { selectPersonalRecommendations } from 'redux/selectors/search';
+import {
+  doOpenAnnouncements,
+  doSetLanguage,
+  doSetDefaultChannel,
+  doFetchLanguage,
+  doSetClientSetting,
+} from 'redux/actions/settings';
 import { doSyncLoop } from 'redux/actions/sync';
-import { doSignIn, doSetIncognito, doSetAssignedLbrynetServer } from 'redux/actions/app';
+import { doSignIn, doSetIncognito, doSetAssignedLbrynetServer, doOpenModal } from 'redux/actions/app';
 import { doFetchModBlockedList, doFetchCommentModAmIList } from 'redux/actions/comments';
 import App from './view';
 
@@ -45,6 +54,9 @@ const select = (state) => ({
   myChannelClaimIds: selectMyChannelClaimIds(state),
   defaultChannelClaim: selectDefaultChannelClaim(state),
   announcement: selectHomepageAnnouncement(state),
+  homepageOrder: selectClientSetting(state, SETTINGS.HOMEPAGE_ORDER),
+  isFypModalShown: selectClientSetting(state, SETTINGS.FYP_MODAL_SHOWN),
+  personalRecommendations: selectPersonalRecommendations(state),
 });
 
 const perform = {
@@ -60,6 +72,8 @@ const perform = {
   doSetLastViewedAnnouncement,
   doSetDefaultChannel,
   doSetAssignedLbrynetServer,
+  doOpenModal,
+  doSetClientSetting,
 };
 
 export default hot(connect(select, perform)(App));

ui/component/app/view.jsx

@@ -1,5 +1,7 @@
 // @flow
 import * as PAGES from 'constants/pages';
+import * as MODALS from 'constants/modal_types';
+import * as SETTINGS from 'constants/settings';
 import React, { useEffect, useState } from 'react';
 import { lazyImport } from 'util/lazyImport';
 import { tusUnlockAndNotify, tusHandleTabUpdates } from 'util/tus';
@@ -57,6 +59,8 @@ const LATEST_PATH = `/$/${PAGES.LATEST}/`;
 const LIVE_PATH = `/$/${PAGES.LIVE_NOW}/`;
 const EMBED_PATH = `/$/${PAGES.EMBED}/`;
 
+type HomepageOrder = { active: ?Array<string>, hidden: ?Array<string> };
+
 type Props = {
   language: string,
   languages: Array<string>,
@@ -89,10 +93,15 @@ type Props = {
   defaultChannelClaim: ?any,
   nagsShown: boolean,
   announcement: string,
+  homepageOrder: HomepageOrder,
+  isFypModalShown: boolean,
+  personalRecommendations: { gid: string, uris: Array<string>, fetched: boolean },
   doOpenAnnouncements: () => void,
   doSetLastViewedAnnouncement: (hash: string) => void,
   doSetDefaultChannel: (claimId: string) => void,
   doSetAssignedLbrynetServer: (server: string) => void,
+  doOpenModal: (id: string, ?{}) => void,
+  doSetClientSetting: (string, boolean, ?boolean) => void,
 };
 
 export const AppContext = React.createContext<any>();
@@ -127,10 +136,15 @@ function App(props: Props) {
     fetchModAmIList,
     defaultChannelClaim,
     announcement,
+    homepageOrder,
+    isFypModalShown,
+    personalRecommendations,
     doOpenAnnouncements,
     doSetLastViewedAnnouncement,
     doSetDefaultChannel,
     doSetAssignedLbrynetServer,
+    doOpenModal,
+    doSetClientSetting,
   } = props;
 
   const isMobile = useIsMobile();
@@ -335,6 +349,51 @@ function App(props: Props) {
     }
   }, [activeChannelClaim, defaultChannelClaim, doSetDefaultChannel, hasMyChannels, prefsReady]);
 
+  useEffect(() => {
+    if (
+      isFypModalShown ||
+      !prefsReady ||
+      // $FlowIgnore
+      homepageOrder.active?.includes('FYP') ||
+      // $FlowIgnore
+      homepageOrder.hidden?.includes('FYP') ||
+      !personalRecommendations.uris.length
+    ) {
+      return;
+    }
+
+    doOpenModal(MODALS.CONFIRM, {
+      title: __('Homepage recommendations available'),
+      subtitle: __(
+        'Would you like to enable them? Homepage recommendations placement can be configured from the homepage customization.'
+      ),
+      labelOk: __('Yes!'),
+      labelCancel: __('Customize'),
+      onConfirm: (closeModal) => {
+        closeModal();
+
+        const newHomePageOrder = {
+          ...homepageOrder,
+          active: homepageOrder?.active ? ['FYP', ...homepageOrder.active] : ['FYP'],
+        };
+        doSetClientSetting(SETTINGS.HOMEPAGE_ORDER, newHomePageOrder, true);
+        doSetClientSetting(SETTINGS.FYP_MODAL_SHOWN, true, true);
+      },
+      onCancel: (closeModal) => {
+        closeModal();
+
+        const newHomePageOrder = {
+          ...homepageOrder,
+          hidden: homepageOrder?.hidden ? ['FYP', ...homepageOrder.hidden] : ['FYP'],
+        };
+        doSetClientSetting(SETTINGS.HOMEPAGE_ORDER, newHomePageOrder, true);
+        doSetClientSetting(SETTINGS.FYP_MODAL_SHOWN, true, true);
+
+        doOpenModal(MODALS.CUSTOMIZE_HOMEPAGE);
+      },
+    });
+  }, [isFypModalShown, prefsReady, homepageOrder, personalRecommendations, doSetClientSetting, doOpenModal]);
+
   useEffect(() => {
     // $FlowFixMe
     document.documentElement.setAttribute('lang', language);

ui/component/homepageSort/index.js

@@ -2,12 +2,10 @@ import { connect } from 'react-redux';
 import HomepageSort from './view';
 import * as SETTINGS from 'constants/settings';
 import { selectClientSetting, selectHomepageData } from 'redux/selectors/settings';
-import { hasLegacyOdyseePremium } from '../../redux/selectors/user';
 
 const select = (state) => ({
   homepageData: selectHomepageData(state) || {},
   homepageOrder: selectClientSetting(state, SETTINGS.HOMEPAGE_ORDER),
-  userHasOdyseeMembership: hasLegacyOdyseePremium(state),
 });
 
 export default connect(select)(HomepageSort);

ui/component/homepageSort/view.jsx

@@ -41,7 +41,7 @@ const move = (source, destination, droppableSource, droppableDestination) => {
   };
 };
 
-function getInitialList(listId, savedOrder, homepageSections, userHasOdyseeMembership) {
+function getInitialList(listId, savedOrder, homepageSections) {
   const savedActiveOrder = savedOrder.active || [];
   const savedHiddenOrder = savedOrder.hidden || [];
   const sectionKeys = Object.keys(homepageSections);
@@ -71,6 +71,9 @@ function getInitialList(listId, savedOrder, homepageSections, userHasOdyseeMembe
           let followingIndex = activeOrder.indexOf('FOLLOWING');
           if (followingIndex !== -1) activeOrder.splice(followingIndex + 1, 0, key);
           else activeOrder.push(key);
+        } else if (key === 'FYP') {
+          // Default FYP to hidden
+          hiddenOrder = [key, ...hiddenOrder];
         } else {
           activeOrder.push(key);
         }
@@ -80,15 +83,6 @@ function getInitialList(listId, savedOrder, homepageSections, userHasOdyseeMembe
 
   activeOrder = activeOrder.filter((x) => !hiddenOrder.includes(x));
 
-  if (!userHasOdyseeMembership) {
-    if (activeOrder.indexOf('FYP') !== -1) {
-      activeOrder.splice(activeOrder.indexOf('FYP'), 1);
-    }
-    if (hiddenOrder.indexOf('FYP') !== -1) {
-      hiddenOrder.splice(hiddenOrder.indexOf('FYP'), 1);
-    }
-  }
-
   return listId === 'ACTIVE' ? activeOrder : hiddenOrder;
 }
 
@@ -103,20 +97,15 @@ type Props = {
   // --- redux:
   homepageData: any,
   homepageOrder: HomepageOrder,
-  userHasOdyseeMembership: boolean,
 };
 
 export default function HomepageSort(props: Props) {
-  const { onUpdate, homepageData, homepageOrder, userHasOdyseeMembership } = props;
+  const { onUpdate, homepageData, homepageOrder } = props;
   const { categories } = homepageData;
 
   const SECTIONS = { ...NON_CATEGORY, ...categories };
-  const [listActive, setListActive] = useState(() =>
-    getInitialList('ACTIVE', homepageOrder, SECTIONS, userHasOdyseeMembership)
-  );
-  const [listHidden, setListHidden] = useState(() =>
-    getInitialList('HIDDEN', homepageOrder, SECTIONS, userHasOdyseeMembership)
-  );
+  const [listActive, setListActive] = useState(() => getInitialList('ACTIVE', homepageOrder, SECTIONS));
+  const [listHidden, setListHidden] = useState(() => getInitialList('HIDDEN', homepageOrder, SECTIONS));
 
   const BINS = {
     ACTIVE: { id: 'ACTIVE', title: 'Active', list: listActive, setList: setListActive },

ui/component/recommendedPersonal/index.js

@@ -1,7 +1,7 @@
 import { connect } from 'react-redux';
 import { doFetchPersonalRecommendations } from 'redux/actions/search';
 import { selectPersonalRecommendations } from 'redux/selectors/search';
-import { hasLegacyOdyseePremium, selectUser } from 'redux/selectors/user';
+import { selectUser } from 'redux/selectors/user';
 
 import RecommendedPersonal from './view';
 
@@ -10,7 +10,6 @@ const select = (state) => {
   return {
     userId: user && user.id,
     personalRecommendations: selectPersonalRecommendations(state),
-    userHasOdyseeMembership: hasLegacyOdyseePremium(state),
   };
 };
 

ui/component/recommendedPersonal/view.jsx

@@ -29,13 +29,11 @@ type Props = {
   // --- redux ---
   userId: ?string,
   personalRecommendations: { gid: string, uris: Array<string>, fetched: boolean },
-  userHasOdyseeMembership: ?boolean,
   doFetchPersonalRecommendations: () => void,
 };
 
 export default function RecommendedPersonal(props: Props) {
-  const { header, onLoad, userId, personalRecommendations, userHasOdyseeMembership, doFetchPersonalRecommendations } =
-    props;
+  const { header, onLoad, userId, personalRecommendations, doFetchPersonalRecommendations } = props;
 
   const ref = React.useRef();
   const [markedGid, setMarkedGid] = React.useState('');
@@ -100,15 +98,13 @@ export default function RecommendedPersonal(props: Props) {
 
   React.useEffect(() => {
     // -- Fetch FYP
-    if (userHasOdyseeMembership) {
-      doFetchPersonalRecommendations();
-    }
-  }, [userHasOdyseeMembership, doFetchPersonalRecommendations]);
+    doFetchPersonalRecommendations();
+  }, [doFetchPersonalRecommendations]);
 
   // **************************************************************************
   // **************************************************************************
 
-  if (userHasOdyseeMembership === undefined || !personalRecommendations.fetched) {
+  if (!personalRecommendations.fetched) {
     return (
       <>
         {header}
@@ -128,21 +124,6 @@ export default function RecommendedPersonal(props: Props) {
     );
   }
 
-  if (!userHasOdyseeMembership) {
-    return (
-      <div>
-        {header}
-        <div className="empty empty--centered-tight">
-          <I18nMessage
-            tokens={{ learn_more: <Button button="link" navigate={`/$/${PAGES.FYP}`} label={__('learn more')} /> }}
-          >
-            Premium membership required. Become a member, or %learn_more%.
-          </I18nMessage>
-        </div>
-      </div>
-    );
-  }
-
   if (count < 1) {
     return (
       <div>
@@ -151,7 +132,8 @@ export default function RecommendedPersonal(props: Props) {
           <I18nMessage
             tokens={{ learn_more: <Button button="link" navigate={`/$/${PAGES.FYP}`} label={__('Learn More')} /> }}
           >
-            No recommendations available at the moment. %learn_more%
+            No recommendations available at the moment. Typically this means you need to view more content first.
+            %learn_more%
           </I18nMessage>
         </div>
       </div>

ui/constants/settings.js

@@ -58,6 +58,7 @@ export const SHORTS_ASPECT_RATIO_LIMIT = '1';
 export const SHORTS_ASPECT_RATIO_LTE = '0.95';
 export const SHORTS_DURATION_LTE = '180';
 export const DISABLE_SHORTS_VIEW = 'disable_shorts_view';
+export const FYP_MODAL_SHOWN = 'fyp_modal_shown';
 
 export const SETTINGS_GRP = {
   APPEARANCE: 'appearance',

ui/constants/shared_preferences.js

@@ -43,4 +43,5 @@ export const CLIENT_SYNC_KEYS = [
   SETTINGS.UPLOAD_PAGE_FILTERING,
   SETTINGS.CRYPTO_DISCLAIMERS,
   SETTINGS.DISABLE_SHORTS_VIEW,
+  SETTINGS.FYP_MODAL_SHOWN,
 ];

ui/modal/modalConfirm/view.jsx

@@ -18,13 +18,25 @@ type Props = {
   busyMsg?: string,
   checkboxLabel?: string,
   onConfirm: (closeModal: () => void, setIsBusy: (boolean) => void) => void,
+  onCancel: (closeModal: () => void, setIsBusy: (boolean) => void) => void,
   // --- perform ---
   doHideModal: () => void,
 };
 
 export default function ModalConfirm(props: Props) {
-  const { title, subtitle, body, labelOk, labelCancel, hideCancel, busyMsg, checkboxLabel, onConfirm, doHideModal } =
-    props;
+  const {
+    title,
+    subtitle,
+    body,
+    labelOk,
+    labelCancel,
+    hideCancel,
+    busyMsg,
+    checkboxLabel,
+    onConfirm,
+    onCancel,
+    doHideModal,
+  } = props;
 
   const [isBusy, setIsBusy] = React.useState(false);
   const [isChecked, setIsChecked] = React.useState(!checkboxLabel);
@@ -35,6 +47,14 @@ export default function ModalConfirm(props: Props) {
     }
   }
 
+  function handleOnCancel() {
+    if (onCancel) {
+      onCancel(doHideModal, setIsBusy);
+    } else {
+      doHideModal();
+    }
+  }
+
   return (
     <Modal isOpen type="custom" width="wide">
       <Card
@@ -67,7 +87,7 @@ export default function ModalConfirm(props: Props) {
               )}
 
               {!hideCancel && !(isBusy && busyMsg) && (
-                <Button button="link" label={labelCancel || __('Cancel')} disabled={isBusy} onClick={doHideModal} />
+                <Button button="link" label={labelCancel || __('Cancel')} disabled={isBusy} onClick={handleOnCancel} />
               )}
             </div>
           </>