Grab homepages from the content API (#1016)

Currently, homepages are still build as part of the app, so this change doesn't bring much benefit other than to support the wrapper app.

When the service is moved away from the app, we won't have to rebuild the app when homepages change, and also the ui.js bundle would be smaller without the need to code-split.

.env.defaults

@@ -132,3 +132,4 @@ FIREBASE_VAPID_KEY=BFayEBpwMTU9GQQpXgitIJkfx-SD8-ltrFb3wLTZWgA27MfBhG4948pe0eERl
 
 # Development
 REPORT_NEW_STRINGS=false
+USE_LOCAL_HOMEPAGE_DATA=false

ui/constants/action_types.js

@@ -311,6 +311,8 @@ export const FETCH_REWARD_CONTENT_COMPLETED = 'FETCH_REWARD_CONTENT_COMPLETED';
 // Language
 export const DOWNLOAD_LANGUAGE_SUCCESS = 'DOWNLOAD_LANGUAGE_SUCCESS';
 export const DOWNLOAD_LANGUAGE_FAILURE = 'DOWNLOAD_LANGUAGE_FAILURE';
+export const FETCH_HOMEPAGES_DONE = 'FETCH_HOMEPAGES_DONE';
+export const FETCH_HOMEPAGES_FAILED = 'FETCH_HOMEPAGES_FAILED';
 
 // Subscriptions
 export const CHANNEL_SUBSCRIBE = 'CHANNEL_SUBSCRIBE';

ui/index.jsx

@@ -17,7 +17,7 @@ import { doDaemonReady, doAutoUpdate, doOpenModal, doHideModal, doToggle3PAnalyt
 import Lbry, { apiCall } from 'lbry';
 import { isURIValid } from 'util/lbryURI';
 import { setSearchApi } from 'redux/actions/search';
-import { doSetLanguage, doFetchLanguage, doUpdateIsNightAsync } from 'redux/actions/settings';
+import { doSetLanguage, doFetchLanguage, doUpdateIsNightAsync, doFetchHomepages } from 'redux/actions/settings';
 import { Lbryio, doBlackListedOutpointsSubscribe, doFilteredOutpointsSubscribe } from 'lbryinc';
 import rewards from 'rewards';
 import { store, persistor, history } from 'store';
@@ -242,6 +242,7 @@ function AppWrapper() {
         if (DEFAULT_LANGUAGE) {
           app.store.dispatch(doFetchLanguage(DEFAULT_LANGUAGE));
         }
+        app.store.dispatch(doFetchHomepages());
         app.store.dispatch(doUpdateIsNightAsync());
         app.store.dispatch(doBlackListedOutpointsSubscribe());
         app.store.dispatch(doFilteredOutpointsSubscribe());

ui/redux/actions/settings.js

@@ -307,6 +307,34 @@ export function doFetchLanguage(language) {
   };
 }
 
+export function doFetchHomepages() {
+  return (dispatch) => {
+    // -- Use this env flag to use local homepage data. Otherwise, it will grab from odysee.com.
+    // @if USE_LOCAL_HOMEPAGE_DATA='true'
+    const homepages = require('homepages');
+    if (homepages) {
+      console.log('doing homepages');
+      window.homepages = homepages;
+      return;
+    }
+    // @endif
+
+    fetch('https://odysee.com/$/api/content/v1/get')
+      .then((response) => response.json())
+      .then((json) => {
+        if (json?.status === 'success' && json?.data) {
+          window.homepages = json.data;
+          dispatch({ type: ACTIONS.FETCH_HOMEPAGES_DONE });
+        } else {
+          dispatch({ type: ACTIONS.FETCH_HOMEPAGES_FAILED });
+        }
+      })
+      .catch(() => {
+        dispatch({ type: ACTIONS.FETCH_HOMEPAGES_FAILED });
+      });
+  };
+}
+
 export function doSetHomepage(code) {
   return (dispatch, getState) => {
     let languageCode;

ui/redux/selectors/settings.js

@@ -5,7 +5,6 @@ import SUPPORTED_BROWSER_LANGUAGES from 'constants/supported_browser_languages';
 import { createSelector } from 'reselect';
 import { ENABLE_MATURE } from 'config';
 import { getDefaultHomepageKey, getDefaultLanguage } from 'util/default-languages';
-const homepages = require('homepages');
 
 const selectState = (state) => state.settings || {};
 
@@ -55,6 +54,7 @@ export const selectThemePath = createSelector(
 
 export const selectHomepageCode = (state) => {
   const hp = selectClientSetting(state, SETTINGS.HOMEPAGE);
+  const homepages = window.homepages || {};
   return homepages[hp] ? hp : getDefaultHomepageKey();
 };
 
@@ -63,15 +63,11 @@ export const selectLanguage = (state) => {
   return lang || getDefaultLanguage();
 };
 
-export const selectHomepageData = createSelector(
+export const selectHomepageData = (state) => {
-  // using homepage setting,
+  const homepageCode = selectHomepageCode(state);
-  selectHomepageCode,
+  const homepages = window.homepages;
-  (homepageCode) => {
+  return homepages ? homepages[homepageCode] || homepages['en'] || {} : {};
-    // homepages = { 'en': homepageFile, ... }
+};
-    // mixin Homepages here
-    return homepages[homepageCode] || homepages['en'] || {};
-  }
-);
 
 export const selectInRegionByCode = (state, code) => {
   const hp = selectClientSetting(state, SETTINGS.HOMEPAGE);
@@ -81,9 +77,7 @@ export const selectInRegionByCode = (state, code) => {
 };
 
 export const selectWildWestDisabled = (state) => {
-  const deRegion = selectInRegionByCode(state, SUPPORTED_BROWSER_LANGUAGES.de);
+  return selectInRegionByCode(state, SUPPORTED_BROWSER_LANGUAGES.de);
-
-  return deRegion;
 };
 
 export const selectosNotificationsEnabled = (state) => selectClientSetting(state, SETTINGS.OS_NOTIFICATIONS_ENABLED);

web/middleware/iframe-destroyer.js

@@ -6,7 +6,7 @@ async function iframeDestroyerMiddleware(ctx, next) {
   } = ctx;
   const decodedPath = decodeURIComponent(path);
 
-  if (!decodedPath.startsWith(`/$/${PAGES.EMBED}`)) {
+  if (!decodedPath.startsWith(`/$/${PAGES.EMBED}`) || !decodedPath.startsWith(`/$/api/content/v1/get`)) {
     ctx.set('X-Frame-Options', 'DENY');
   }