Support homepage-specific memes

1446

- Requires an accompanying commit in `odysee-frontend`.
- The change assumes that the `odysee-frontend` is the only project that uses these files directly, i.e. other clients will use the API instead.

ui/page/home/index.js

@@ -7,7 +7,12 @@ import { selectActiveLivestreams, selectFetchingActiveLivestreams } from 'redux/
 import { selectFollowedTags } from 'redux/selectors/tags';
 import { selectHasOdyseeMembership, selectHomepageFetched, selectUserVerifiedEmail } from 'redux/selectors/user';
 import { selectSubscriptions } from 'redux/selectors/subscriptions';
-import { selectShowMatureContent, selectHomepageData, selectClientSetting } from 'redux/selectors/settings';
+import {
+  selectShowMatureContent,
+  selectHomepageData,
+  selectClientSetting,
+  selectHomepageMeme,
+} from 'redux/selectors/settings';
 
 import HomePage from './view';
 
@@ -17,6 +22,7 @@ const select = (state) => ({
   authenticated: selectUserVerifiedEmail(state),
   showNsfw: selectShowMatureContent(state),
   homepageData: selectHomepageData(state),
+  homepageMeme: selectHomepageMeme(state),
   homepageFetched: selectHomepageFetched(state),
   activeLivestreams: selectActiveLivestreams(state),
   fetchingActiveLivestreams: selectFetchingActiveLivestreams(state),

ui/page/home/view.jsx

@@ -36,6 +36,7 @@ type Props = {
   subscribedChannels: Array<Subscription>,
   showNsfw: boolean,
   homepageData: any,
+  homepageMeme: ?{ text: string, url: string },
   homepageFetched: boolean,
   activeLivestreams: any,
   doFetchActiveLivestreams: () => void,
@@ -54,6 +55,7 @@ function HomePage(props: Props) {
     authenticated,
     showNsfw,
     homepageData,
+    homepageMeme,
     homepageFetched,
     activeLivestreams,
     doFetchActiveLivestreams,
@@ -226,7 +228,7 @@ function HomePage(props: Props) {
 
   return (
     <Page className="homePage-wrapper" fullWidthPage>
-      <Meme />
+      <Meme meme={homepageMeme} />
 
       {!fetchingActiveLivestreams && (
         <>

ui/redux/actions/settings.js

@@ -325,18 +325,10 @@ export function doFetchHomepages() {
     if (homepages) {
       const v2 = {};
       const homepageKeys = Object.keys(homepages);
-
       homepageKeys.forEach((hp) => {
-        v2[hp] = {
-          categories: homepages[hp],
-        };
+        v2[hp] = homepages[hp];
       });
 
-      const meme = require('memes');
-      if (meme && v2['en']) {
-        v2['en'].meme = meme;
-      }
-
       window.homepages = v2;
       populateCategoryTitles(window.homepages?.en?.categories);
       dispatch({ type: ACTIONS.FETCH_HOMEPAGES_DONE });

ui/redux/selectors/settings.js

@@ -70,6 +70,18 @@ export const selectHomepageData = (state) => {
   return homepages ? homepages[homepageCode].categories || homepages['en'].categories || {} : {};
 };
 
+export const selectHomepageMeme = (state) => {
+  const homepageCode = selectHomepageCode(state);
+  const homepages = window.homepages;
+  if (homepages) {
+    const meme = homepages[homepageCode].meme;
+    if (meme && meme.text && meme.url) {
+      return meme;
+    }
+  }
+  return homepages['en'].meme || {};
+};
+
 export const selectInRegionByCode = (state, code) => {
   const hp = selectClientSetting(state, SETTINGS.HOMEPAGE);
   const lang = selectLanguage(state);

web/component/meme.jsx

@@ -1,8 +1,13 @@
+// @flow
 import React from 'react';
 import Button from 'component/button';
 
-export default function Meme() {
-  const meme = window?.homepages?.en?.meme;
+type Props = {
+  meme: ?{ text: string, url: string },
+};
+
+export default function Meme(props: Props) {
+  const { meme } = props;
   if (!meme) {
     return null;
   }

web/src/getHomepageJSON.js

@@ -4,7 +4,6 @@ const memo = {};
 if (!memo.homepageData) {
   try {
     memo.homepageData = require('../../custom/homepages/v2');
-    memo.meme = require('../../custom/homepages/meme');
   } catch (err) {
     console.log('getHomepageJSON:', err);
   }
@@ -21,18 +20,9 @@ const getHomepageJsonV2 = () => {
 
   const v2 = {};
   const homepageKeys = Object.keys(memo.homepageData);
-
   homepageKeys.forEach((hp) => {
-    v2[hp] = {
-      categories: memo.homepageData[hp],
-    };
+    v2[hp] = memo.homepageData[hp];
   });
-
-  if (memo.meme && v2['en']) {
-    // Only supporting English memes for now, but one-per-homepage is possible.
-    v2['en'].meme = memo.meme;
-  }
-
   return v2;
 };