mirror of https://github.com/sussy-code/smov.git
Add a discover button if there is nothing watched or bookmarked
This commit is contained in:
parent
7428eeb63e
commit
c3fbe1c968
|
@ -2813,7 +2813,7 @@ packages:
|
|||
postcss: '>=8.4.31'
|
||||
dependencies:
|
||||
browserslist: 4.23.0
|
||||
caniuse-lite: 1.0.30001613
|
||||
caniuse-lite: 1.0.30001614
|
||||
fraction.js: 4.3.7
|
||||
normalize-range: 0.1.2
|
||||
picocolors: 1.0.0
|
||||
|
@ -2917,7 +2917,7 @@ packages:
|
|||
engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
|
||||
hasBin: true
|
||||
dependencies:
|
||||
caniuse-lite: 1.0.30001613
|
||||
caniuse-lite: 1.0.30001614
|
||||
electron-to-chromium: 1.4.750
|
||||
node-releases: 2.0.14
|
||||
update-browserslist-db: 1.0.13(browserslist@4.23.0)
|
||||
|
@ -2957,8 +2957,8 @@ packages:
|
|||
engines: {node: '>= 6'}
|
||||
dev: true
|
||||
|
||||
/caniuse-lite@1.0.30001613:
|
||||
resolution: {integrity: sha512-BNjJULJfOONQERivfxte7alLfeLW4QnwHvNW4wEcLEbXfV6VSCYvr+REbf2Sojv8tC1THpjPXBxWgDbq4NtLWg==}
|
||||
/caniuse-lite@1.0.30001614:
|
||||
resolution: {integrity: sha512-jmZQ1VpmlRwHgdP1/uiKzgiAuGOfLEJsYFP4+GBou/QQ4U6IOJCB4NP1c+1p9RGLpwObcT94jA5/uO+F1vBbog==}
|
||||
|
||||
/chai@4.4.1:
|
||||
resolution: {integrity: sha512-13sOfMv2+DWduEU+/xbun3LScLoqN17nBeTLUsmDfKdoiC1fr0n9PU4guu4AhRcOVFk/sW8LyZWHuhWtQZiF+g==}
|
||||
|
@ -4988,8 +4988,8 @@ packages:
|
|||
get-func-name: 2.0.2
|
||||
dev: true
|
||||
|
||||
/lru-cache@10.2.1:
|
||||
resolution: {integrity: sha512-tS24spDe/zXhWbNPErCHs/AGOzbKGHT+ybSBqmdLm8WZ1xXLWvH8Qn71QPAlqVhd0qUTWjy+Kl9JmISgDdEjsA==}
|
||||
/lru-cache@10.2.2:
|
||||
resolution: {integrity: sha512-9hp3Vp2/hFQUiIwKo8XCeFVnrg8Pk3TYNPIR7tJADKi5YfcF7vEaK7avFHTlSy3kOKYaJQaalfEo6YuXdceBOQ==}
|
||||
engines: {node: 14 || >=16.14}
|
||||
dev: true
|
||||
|
||||
|
@ -5414,7 +5414,7 @@ packages:
|
|||
resolution: {integrity: sha512-7xTavNy5RQXnsjANvVvMkEjvloOinkAjv/Z6Ildz9v2RinZ4SBKTWFOVRbaF8p0vpHnyjV/UwNDdKuUv6M5qcA==}
|
||||
engines: {node: '>=16 || 14 >=14.17'}
|
||||
dependencies:
|
||||
lru-cache: 10.2.1
|
||||
lru-cache: 10.2.2
|
||||
minipass: 7.0.4
|
||||
dev: true
|
||||
|
||||
|
|
|
@ -147,7 +147,18 @@
|
|||
">ᴗ<"
|
||||
]
|
||||
},
|
||||
"sectionTitle": "Search results"
|
||||
"empty": {
|
||||
"default": "Welcome, find media to watch here!",
|
||||
"extra": [
|
||||
"There's nothing here :(",
|
||||
"So empty...",
|
||||
"Such emptiness.",
|
||||
"Hi new user :3"
|
||||
]
|
||||
},
|
||||
"sectionTitle": "Search results",
|
||||
"discoverMore": "Discover more",
|
||||
"discover": "Discover"
|
||||
},
|
||||
"titles": {
|
||||
"day": {
|
||||
|
|
|
@ -1,10 +1,13 @@
|
|||
import { useEffect, useState } from "react";
|
||||
import { Helmet } from "react-helmet-async";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
import { WideContainer } from "@/components/layout/WideContainer";
|
||||
import { useDebounce } from "@/hooks/useDebounce";
|
||||
import { useRandomTranslation } from "@/hooks/useRandomTranslation";
|
||||
import { useSearchQuery } from "@/hooks/useSearchQuery";
|
||||
import { Button } from "@/pages/About";
|
||||
import { HomeLayout } from "@/pages/layouts/HomeLayout";
|
||||
import { BookmarksPart } from "@/pages/parts/home/BookmarksPart";
|
||||
import { HeroPart } from "@/pages/parts/home/HeroPart";
|
||||
|
@ -33,10 +36,15 @@ function useSearch(search: string) {
|
|||
|
||||
export function HomePage() {
|
||||
const { t } = useTranslation();
|
||||
const { t: randomT } = useRandomTranslation();
|
||||
const emptyText = randomT(`home.search.empty`);
|
||||
const navigate = useNavigate();
|
||||
const [showBg, setShowBg] = useState<boolean>(false);
|
||||
const searchParams = useSearchQuery();
|
||||
const [search] = searchParams;
|
||||
const s = useSearch(search);
|
||||
const [showBookmarks, setShowBookmarks] = useState(false);
|
||||
const [showWatching, setShowWatching] = useState(false);
|
||||
|
||||
return (
|
||||
<HomeLayout showBg={showBg}>
|
||||
|
@ -58,8 +66,19 @@ export function HomePage() {
|
|||
<SearchListPart searchQuery={search} />
|
||||
) : (
|
||||
<>
|
||||
<BookmarksPart />
|
||||
<WatchingPart />
|
||||
<BookmarksPart onItemsChange={setShowBookmarks} />
|
||||
<WatchingPart onItemsChange={setShowWatching} />
|
||||
{!(showBookmarks || showWatching) ? (
|
||||
<div className="flex flex-col items-center justify-center">
|
||||
<p className="text-[18.5px] pb-3">{emptyText}</p>
|
||||
<Button
|
||||
className="px-py p-[0.35em] mt-3 rounded-xl text-type-dimmed box-content text-[18px] bg-largeCard-background text-buttons-secondaryText justify-center items-center"
|
||||
onClick={() => navigate("/discover")}
|
||||
>
|
||||
{t("home.search.discover")}
|
||||
</Button>
|
||||
</div>
|
||||
) : null}
|
||||
</>
|
||||
)}
|
||||
</WideContainer>
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
import { useAutoAnimate } from "@formkit/auto-animate/react";
|
||||
import { useMemo, useState } from "react";
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
import { EditButton } from "@/components/buttons/EditButton";
|
||||
|
@ -11,7 +11,11 @@ import { useBookmarkStore } from "@/stores/bookmarks";
|
|||
import { useProgressStore } from "@/stores/progress";
|
||||
import { MediaItem } from "@/utils/mediaTypes";
|
||||
|
||||
export function BookmarksPart() {
|
||||
export function BookmarksPart({
|
||||
onItemsChange,
|
||||
}: {
|
||||
onItemsChange: (hasItems: boolean) => void;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
const progressItems = useProgressStore((s) => s.items);
|
||||
const bookmarks = useBookmarkStore((s) => s.bookmarks);
|
||||
|
@ -41,6 +45,10 @@ export function BookmarksPart() {
|
|||
return output;
|
||||
}, [bookmarks, progressItems]);
|
||||
|
||||
useEffect(() => {
|
||||
onItemsChange(items.length > 0);
|
||||
}, [items, onItemsChange]);
|
||||
|
||||
if (items.length === 0) return null;
|
||||
|
||||
return (
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
import { useAutoAnimate } from "@formkit/auto-animate/react";
|
||||
import { useMemo, useState } from "react";
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
import { EditButton } from "@/components/buttons/EditButton";
|
||||
|
@ -12,7 +12,11 @@ import { useProgressStore } from "@/stores/progress";
|
|||
import { shouldShowProgress } from "@/stores/progress/utils";
|
||||
import { MediaItem } from "@/utils/mediaTypes";
|
||||
|
||||
export function WatchingPart() {
|
||||
export function WatchingPart({
|
||||
onItemsChange,
|
||||
}: {
|
||||
onItemsChange: (hasItems: boolean) => void;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
const bookmarks = useBookmarkStore((s) => s.bookmarks);
|
||||
const progressItems = useProgressStore((s) => s.items);
|
||||
|
@ -39,6 +43,10 @@ export function WatchingPart() {
|
|||
return output;
|
||||
}, [progressItems, bookmarks]);
|
||||
|
||||
useEffect(() => {
|
||||
onItemsChange(sortedProgressItems.length > 0);
|
||||
}, [sortedProgressItems, onItemsChange]);
|
||||
|
||||
if (sortedProgressItems.length === 0) return null;
|
||||
|
||||
return (
|
||||
|
|
|
@ -35,10 +35,10 @@ function SearchSuffix(props: { failed?: boolean; results?: number }) {
|
|||
<>
|
||||
<p>{t("home.search.allResults")}</p>
|
||||
<Button
|
||||
className="px-py p-[0.3em] mt-3 text-type-dimmed box-content text-[17px] bg-largeCard-background text-buttons-secondaryText justify-center items-center"
|
||||
className="px-py p-[0.3em] mt-3 rounded-xl text-type-dimmed box-content text-[17px] bg-largeCard-background text-buttons-secondaryText justify-center items-center"
|
||||
onClick={() => navigate("/discover")}
|
||||
>
|
||||
Discover more
|
||||
{t("home.search.discoverMore")}
|
||||
</Button>
|
||||
</>
|
||||
) : (
|
||||
|
|
Loading…
Reference in New Issue