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'
|
postcss: '>=8.4.31'
|
||||||
dependencies:
|
dependencies:
|
||||||
browserslist: 4.23.0
|
browserslist: 4.23.0
|
||||||
caniuse-lite: 1.0.30001613
|
caniuse-lite: 1.0.30001614
|
||||||
fraction.js: 4.3.7
|
fraction.js: 4.3.7
|
||||||
normalize-range: 0.1.2
|
normalize-range: 0.1.2
|
||||||
picocolors: 1.0.0
|
picocolors: 1.0.0
|
||||||
|
@ -2917,7 +2917,7 @@ packages:
|
||||||
engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
|
engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
|
||||||
hasBin: true
|
hasBin: true
|
||||||
dependencies:
|
dependencies:
|
||||||
caniuse-lite: 1.0.30001613
|
caniuse-lite: 1.0.30001614
|
||||||
electron-to-chromium: 1.4.750
|
electron-to-chromium: 1.4.750
|
||||||
node-releases: 2.0.14
|
node-releases: 2.0.14
|
||||||
update-browserslist-db: 1.0.13(browserslist@4.23.0)
|
update-browserslist-db: 1.0.13(browserslist@4.23.0)
|
||||||
|
@ -2957,8 +2957,8 @@ packages:
|
||||||
engines: {node: '>= 6'}
|
engines: {node: '>= 6'}
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
/caniuse-lite@1.0.30001613:
|
/caniuse-lite@1.0.30001614:
|
||||||
resolution: {integrity: sha512-BNjJULJfOONQERivfxte7alLfeLW4QnwHvNW4wEcLEbXfV6VSCYvr+REbf2Sojv8tC1THpjPXBxWgDbq4NtLWg==}
|
resolution: {integrity: sha512-jmZQ1VpmlRwHgdP1/uiKzgiAuGOfLEJsYFP4+GBou/QQ4U6IOJCB4NP1c+1p9RGLpwObcT94jA5/uO+F1vBbog==}
|
||||||
|
|
||||||
/chai@4.4.1:
|
/chai@4.4.1:
|
||||||
resolution: {integrity: sha512-13sOfMv2+DWduEU+/xbun3LScLoqN17nBeTLUsmDfKdoiC1fr0n9PU4guu4AhRcOVFk/sW8LyZWHuhWtQZiF+g==}
|
resolution: {integrity: sha512-13sOfMv2+DWduEU+/xbun3LScLoqN17nBeTLUsmDfKdoiC1fr0n9PU4guu4AhRcOVFk/sW8LyZWHuhWtQZiF+g==}
|
||||||
|
@ -4988,8 +4988,8 @@ packages:
|
||||||
get-func-name: 2.0.2
|
get-func-name: 2.0.2
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
/lru-cache@10.2.1:
|
/lru-cache@10.2.2:
|
||||||
resolution: {integrity: sha512-tS24spDe/zXhWbNPErCHs/AGOzbKGHT+ybSBqmdLm8WZ1xXLWvH8Qn71QPAlqVhd0qUTWjy+Kl9JmISgDdEjsA==}
|
resolution: {integrity: sha512-9hp3Vp2/hFQUiIwKo8XCeFVnrg8Pk3TYNPIR7tJADKi5YfcF7vEaK7avFHTlSy3kOKYaJQaalfEo6YuXdceBOQ==}
|
||||||
engines: {node: 14 || >=16.14}
|
engines: {node: 14 || >=16.14}
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
|
@ -5414,7 +5414,7 @@ packages:
|
||||||
resolution: {integrity: sha512-7xTavNy5RQXnsjANvVvMkEjvloOinkAjv/Z6Ildz9v2RinZ4SBKTWFOVRbaF8p0vpHnyjV/UwNDdKuUv6M5qcA==}
|
resolution: {integrity: sha512-7xTavNy5RQXnsjANvVvMkEjvloOinkAjv/Z6Ildz9v2RinZ4SBKTWFOVRbaF8p0vpHnyjV/UwNDdKuUv6M5qcA==}
|
||||||
engines: {node: '>=16 || 14 >=14.17'}
|
engines: {node: '>=16 || 14 >=14.17'}
|
||||||
dependencies:
|
dependencies:
|
||||||
lru-cache: 10.2.1
|
lru-cache: 10.2.2
|
||||||
minipass: 7.0.4
|
minipass: 7.0.4
|
||||||
dev: true
|
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": {
|
"titles": {
|
||||||
"day": {
|
"day": {
|
||||||
|
|
|
@ -1,10 +1,13 @@
|
||||||
import { useEffect, useState } from "react";
|
import { useEffect, useState } from "react";
|
||||||
import { Helmet } from "react-helmet-async";
|
import { Helmet } from "react-helmet-async";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
|
import { useNavigate } from "react-router-dom";
|
||||||
|
|
||||||
import { WideContainer } from "@/components/layout/WideContainer";
|
import { WideContainer } from "@/components/layout/WideContainer";
|
||||||
import { useDebounce } from "@/hooks/useDebounce";
|
import { useDebounce } from "@/hooks/useDebounce";
|
||||||
|
import { useRandomTranslation } from "@/hooks/useRandomTranslation";
|
||||||
import { useSearchQuery } from "@/hooks/useSearchQuery";
|
import { useSearchQuery } from "@/hooks/useSearchQuery";
|
||||||
|
import { Button } from "@/pages/About";
|
||||||
import { HomeLayout } from "@/pages/layouts/HomeLayout";
|
import { HomeLayout } from "@/pages/layouts/HomeLayout";
|
||||||
import { BookmarksPart } from "@/pages/parts/home/BookmarksPart";
|
import { BookmarksPart } from "@/pages/parts/home/BookmarksPart";
|
||||||
import { HeroPart } from "@/pages/parts/home/HeroPart";
|
import { HeroPart } from "@/pages/parts/home/HeroPart";
|
||||||
|
@ -33,10 +36,15 @@ function useSearch(search: string) {
|
||||||
|
|
||||||
export function HomePage() {
|
export function HomePage() {
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
|
const { t: randomT } = useRandomTranslation();
|
||||||
|
const emptyText = randomT(`home.search.empty`);
|
||||||
|
const navigate = useNavigate();
|
||||||
const [showBg, setShowBg] = useState<boolean>(false);
|
const [showBg, setShowBg] = useState<boolean>(false);
|
||||||
const searchParams = useSearchQuery();
|
const searchParams = useSearchQuery();
|
||||||
const [search] = searchParams;
|
const [search] = searchParams;
|
||||||
const s = useSearch(search);
|
const s = useSearch(search);
|
||||||
|
const [showBookmarks, setShowBookmarks] = useState(false);
|
||||||
|
const [showWatching, setShowWatching] = useState(false);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<HomeLayout showBg={showBg}>
|
<HomeLayout showBg={showBg}>
|
||||||
|
@ -58,8 +66,19 @@ export function HomePage() {
|
||||||
<SearchListPart searchQuery={search} />
|
<SearchListPart searchQuery={search} />
|
||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
<BookmarksPart />
|
<BookmarksPart onItemsChange={setShowBookmarks} />
|
||||||
<WatchingPart />
|
<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>
|
</WideContainer>
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
import { useAutoAnimate } from "@formkit/auto-animate/react";
|
import { useAutoAnimate } from "@formkit/auto-animate/react";
|
||||||
import { useMemo, useState } from "react";
|
import { useEffect, useMemo, useState } from "react";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
|
|
||||||
import { EditButton } from "@/components/buttons/EditButton";
|
import { EditButton } from "@/components/buttons/EditButton";
|
||||||
|
@ -11,7 +11,11 @@ import { useBookmarkStore } from "@/stores/bookmarks";
|
||||||
import { useProgressStore } from "@/stores/progress";
|
import { useProgressStore } from "@/stores/progress";
|
||||||
import { MediaItem } from "@/utils/mediaTypes";
|
import { MediaItem } from "@/utils/mediaTypes";
|
||||||
|
|
||||||
export function BookmarksPart() {
|
export function BookmarksPart({
|
||||||
|
onItemsChange,
|
||||||
|
}: {
|
||||||
|
onItemsChange: (hasItems: boolean) => void;
|
||||||
|
}) {
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
const progressItems = useProgressStore((s) => s.items);
|
const progressItems = useProgressStore((s) => s.items);
|
||||||
const bookmarks = useBookmarkStore((s) => s.bookmarks);
|
const bookmarks = useBookmarkStore((s) => s.bookmarks);
|
||||||
|
@ -41,6 +45,10 @@ export function BookmarksPart() {
|
||||||
return output;
|
return output;
|
||||||
}, [bookmarks, progressItems]);
|
}, [bookmarks, progressItems]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
onItemsChange(items.length > 0);
|
||||||
|
}, [items, onItemsChange]);
|
||||||
|
|
||||||
if (items.length === 0) return null;
|
if (items.length === 0) return null;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
import { useAutoAnimate } from "@formkit/auto-animate/react";
|
import { useAutoAnimate } from "@formkit/auto-animate/react";
|
||||||
import { useMemo, useState } from "react";
|
import { useEffect, useMemo, useState } from "react";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
|
|
||||||
import { EditButton } from "@/components/buttons/EditButton";
|
import { EditButton } from "@/components/buttons/EditButton";
|
||||||
|
@ -12,7 +12,11 @@ import { useProgressStore } from "@/stores/progress";
|
||||||
import { shouldShowProgress } from "@/stores/progress/utils";
|
import { shouldShowProgress } from "@/stores/progress/utils";
|
||||||
import { MediaItem } from "@/utils/mediaTypes";
|
import { MediaItem } from "@/utils/mediaTypes";
|
||||||
|
|
||||||
export function WatchingPart() {
|
export function WatchingPart({
|
||||||
|
onItemsChange,
|
||||||
|
}: {
|
||||||
|
onItemsChange: (hasItems: boolean) => void;
|
||||||
|
}) {
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
const bookmarks = useBookmarkStore((s) => s.bookmarks);
|
const bookmarks = useBookmarkStore((s) => s.bookmarks);
|
||||||
const progressItems = useProgressStore((s) => s.items);
|
const progressItems = useProgressStore((s) => s.items);
|
||||||
|
@ -39,6 +43,10 @@ export function WatchingPart() {
|
||||||
return output;
|
return output;
|
||||||
}, [progressItems, bookmarks]);
|
}, [progressItems, bookmarks]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
onItemsChange(sortedProgressItems.length > 0);
|
||||||
|
}, [sortedProgressItems, onItemsChange]);
|
||||||
|
|
||||||
if (sortedProgressItems.length === 0) return null;
|
if (sortedProgressItems.length === 0) return null;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
|
@ -35,10 +35,10 @@ function SearchSuffix(props: { failed?: boolean; results?: number }) {
|
||||||
<>
|
<>
|
||||||
<p>{t("home.search.allResults")}</p>
|
<p>{t("home.search.allResults")}</p>
|
||||||
<Button
|
<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")}
|
onClick={() => navigate("/discover")}
|
||||||
>
|
>
|
||||||
Discover more
|
{t("home.search.discoverMore")}
|
||||||
</Button>
|
</Button>
|
||||||
</>
|
</>
|
||||||
) : (
|
) : (
|
||||||
|
|
Loading…
Reference in New Issue