From 6d5934e930aa31bf8d2685d9c2ff3d46cb61d5e6 Mon Sep 17 00:00:00 2001 From: Ivan Evans <74743263+Pasithea0@users.noreply.github.com> Date: Sat, 4 Jan 2025 21:55:45 -0700 Subject: [PATCH] add toggle for discover section on homepage --- src/assets/locales/en.json | 5 +- src/hooks/useSettingsState.ts | 14 ++++++ src/pages/HomePage.tsx | 48 +++++++++++++++----- src/pages/Settings.tsx | 8 ++++ src/pages/parts/settings/PreferencesPart.tsx | 21 +++++++++ src/stores/preferences/index.tsx | 8 ++++ 6 files changed, 91 insertions(+), 13 deletions(-) diff --git a/src/assets/locales/en.json b/src/assets/locales/en.json index e807202e..e4b0887e 100644 --- a/src/assets/locales/en.json +++ b/src/assets/locales/en.json @@ -622,7 +622,10 @@ "autoplayLabel": "Autoplay", "sourceOrder": "Reordering sources", "sourceOrderDescription": "Drag and drop to reorder sources. This will determine the order in which sources are checked for the media you are trying to watch. If a source is greyed out, it means the extension is required for that source.", - "title": "Preferences" + "title": "Preferences", + "discover": "Discover section", + "discoverDescription": "Show the Discover section on the Homepage below your bookmarked media. Enabling this can increase load times. This setting is enabled by default.", + "discoverLabel": "Discover section" }, "reset": "Reset", "save": "Save", diff --git a/src/hooks/useSettingsState.ts b/src/hooks/useSettingsState.ts index 667093fb..0e5e4128 100644 --- a/src/hooks/useSettingsState.ts +++ b/src/hooks/useSettingsState.ts @@ -52,6 +52,7 @@ export function useSettingsState( | undefined, enableThumbnails: boolean, enableAutoplay: boolean, + enableDiscover: boolean, sourceOrder: string[], ) { const [proxyUrlsState, setProxyUrls, resetProxyUrls, proxyUrlsChanged] = @@ -92,6 +93,12 @@ export function useSettingsState( resetEnableAutoplay, enableAutoplayChanged, ] = useDerived(enableAutoplay); + const [ + enableDiscoverState, + setEnableDiscoverState, + resetEnableDiscover, + enableDiscoverChanged, + ] = useDerived(enableDiscover); const [ sourceOrderState, setSourceOrderState, @@ -110,6 +117,7 @@ export function useSettingsState( resetProfile(); resetEnableThumbnails(); resetEnableAutoplay(); + resetEnableDiscover(); resetSourceOrder(); } @@ -123,6 +131,7 @@ export function useSettingsState( profileChanged || enableThumbnailsChanged || enableAutoplayChanged || + enableDiscoverChanged || sourceOrderChanged; return { @@ -173,6 +182,11 @@ export function useSettingsState( set: setEnableAutoplayState, changed: enableAutoplayChanged, }, + enableDiscover: { + state: enableDiscoverState, + set: setEnableDiscoverState, + changed: enableDiscoverChanged, + }, sourceOrder: { state: sourceOrderState, set: setSourceOrderState, diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx index f0c05add..ce981c90 100644 --- a/src/pages/HomePage.tsx +++ b/src/pages/HomePage.tsx @@ -1,6 +1,7 @@ import { useEffect, useState } from "react"; import { Helmet } from "react-helmet-async"; import { useTranslation } from "react-i18next"; +import { To, useNavigate } from "react-router-dom"; import { Icons } from "@/components/Icon"; import { IconPill } from "@/components/layout/IconPill"; @@ -16,8 +17,10 @@ import { HeroPart } from "@/pages/parts/home/HeroPart"; import { WatchingPart } from "@/pages/parts/home/WatchingPart"; import { SearchListPart } from "@/pages/parts/search/SearchListPart"; import { SearchLoadingPart } from "@/pages/parts/search/SearchLoadingPart"; +import { usePreferencesStore } from "@/stores/preferences"; import DiscoverContent from "@/utils/discoverContent"; +import { Button } from "./About"; import { PopupModal } from "./parts/home/PopupModal"; function useSearch(search: string) { @@ -45,6 +48,7 @@ export function HomePage() { const { t } = useTranslation(); const { t: randomT } = useRandomTranslation(); const emptyText = randomT(`home.search.empty`); + const navigate = useNavigate(); const [showBg, setShowBg] = useState(false); const searchParams = useSearchQuery(); const [search] = searchParams; @@ -52,6 +56,13 @@ export function HomePage() { const [showBookmarks, setShowBookmarks] = useState(false); const [showWatching, setShowWatching] = useState(false); + const handleClick = (path: To) => { + window.scrollTo(0, 0); + navigate(path); + }; + + const enableDiscover = usePreferencesStore((state) => state.enableDiscover); + // State to track whether content is loading or loaded const [loading, setLoading] = useState(true); @@ -234,19 +245,32 @@ export function HomePage() { ) : null} {/* Conditional rendering: show loading screen or the content */} - {loading ? ( -
- -

- Fetching the latest movies & TV shows... -

-

- Please wait while we load the best recommendations for you. -

-
+ {enableDiscover ? ( + loading ? ( +
+ +

+ Fetching the latest movies & TV shows... +

+

+ Please wait while we load the best recommendations for you. +

+
+ ) : ( +
+ +
+ ) ) : ( -
- +
+
+ +
)} diff --git a/src/pages/Settings.tsx b/src/pages/Settings.tsx index b08c44d8..c3cc2217 100644 --- a/src/pages/Settings.tsx +++ b/src/pages/Settings.tsx @@ -140,6 +140,9 @@ export function SettingsPage() { const sourceOrder = usePreferencesStore((s) => s.sourceOrder); const setSourceOrder = usePreferencesStore((s) => s.setSourceOrder); + const enableDiscover = usePreferencesStore((s) => s.enableDiscover); + const setEnableDiscover = usePreferencesStore((s) => s.setEnableDiscover); + const account = useAuthStore((s) => s.account); const updateProfile = useAuthStore((s) => s.setAccountProfile); const updateDeviceName = useAuthStore((s) => s.updateDeviceName); @@ -163,6 +166,7 @@ export function SettingsPage() { account?.profile, enableThumbnails, enableAutoplay, + enableDiscover, sourceOrder, ); @@ -233,6 +237,7 @@ export function SettingsPage() { setEnableThumbnails(state.enableThumbnails.state); setEnableAutoplay(state.enableAutoplay.state); + setEnableDiscover(state.enableDiscover.state); setSourceOrder(state.sourceOrder.state); setAppLanguage(state.appLanguage.state); setTheme(state.theme.state); @@ -260,6 +265,7 @@ export function SettingsPage() { setEnableThumbnails, state, setEnableAutoplay, + setEnableDiscover, setSourceOrder, setAppLanguage, setTheme, @@ -311,6 +317,8 @@ export function SettingsPage() { setEnableThumbnails={state.enableThumbnails.set} enableAutoplay={state.enableAutoplay.state} setEnableAutoplay={state.enableAutoplay.set} + enableDiscover={state.enableDiscover.state} + setEnableDiscover={state.enableDiscover.set} sourceOrder={availableSources} setSourceOrder={state.sourceOrder.set} /> diff --git a/src/pages/parts/settings/PreferencesPart.tsx b/src/pages/parts/settings/PreferencesPart.tsx index b3b4d8f0..a5aff8cf 100644 --- a/src/pages/parts/settings/PreferencesPart.tsx +++ b/src/pages/parts/settings/PreferencesPart.tsx @@ -23,6 +23,8 @@ export function PreferencesPart(props: { setEnableAutoplay: (v: boolean) => void; sourceOrder: string[]; setSourceOrder: (v: string[]) => void; + enableDiscover: boolean; + setEnableDiscover: (v: boolean) => void; }) { const { t } = useTranslation(); const sorted = sortLangCodes(appLanguageOptions.map((item) => item.code)); @@ -121,6 +123,25 @@ export function PreferencesPart(props: {

+ + {/* Show Discover Preference */} +
+

+ {t("settings.preferences.discover")} +

+

+ {t("settings.preferences.discoverDescription")} +

+
props.setEnableDiscover(!props.enableDiscover)} + className="bg-dropdown-background hover:bg-dropdown-hoverBackground select-none my-4 cursor-pointer space-x-3 flex items-center max-w-[25rem] py-3 px-4 rounded-lg" + > + +

+ {t("settings.preferences.discoverLabel")} +

+
+
{/* Column */} diff --git a/src/stores/preferences/index.tsx b/src/stores/preferences/index.tsx index 6e54129d..25831ae9 100644 --- a/src/stores/preferences/index.tsx +++ b/src/stores/preferences/index.tsx @@ -5,10 +5,12 @@ import { immer } from "zustand/middleware/immer"; export interface PreferencesStore { enableThumbnails: boolean; enableAutoplay: boolean; + enableDiscover: boolean; sourceOrder: string[]; setEnableThumbnails(v: boolean): void; setEnableAutoplay(v: boolean): void; + setEnableDiscover(v: boolean): void; setSourceOrder(v: string[]): void; } @@ -17,6 +19,7 @@ export const usePreferencesStore = create( immer((set) => ({ enableThumbnails: false, enableAutoplay: true, + enableDiscover: true, sourceOrder: [], setEnableThumbnails(v) { set((s) => { @@ -28,6 +31,11 @@ export const usePreferencesStore = create( s.enableAutoplay = v; }); }, + setEnableDiscover(v) { + set((s) => { + s.enableDiscover = v; + }); + }, setSourceOrder(v) { set((s) => { s.sourceOrder = v;