Cutlery/Kyoo
1
0
Fork 0
mirror of https://github.com/zoriya/Kyoo.git synced 2025-06-03 05:34:23 -04:00
Code Issues Packages Projects Releases Wiki Activity

Fix search page

Browse Source
This commit is contained in:
Scott Merchant 2024-06-09 14:14:07 +09:30 committed by Zoe Roux
parent 881188c689
commit 0b3f70e48e
No known key found for this signature in database
2 changed files with 26 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
front/packages/ui/src/browse/index.tsx
View File

@ -60,25 +60,28 @@ export const itemMap = (
item.kind === "show" ? item.watchStatus?.unseenEpisodesCount ?? item.episodesCount! : null, item.kind === "show" ? item.watchStatus?.unseenEpisodesCount ?? item.episodesCount! : null,
}); });
export const createFilterString = (mediaType: MediaType): string | undefined => {
return mediaType !== MediaTypeAll ? `kind eq ${mediaType.key}` : undefined;
}
const query = ( const query = (
mediaType: MediaType, mediaType: MediaType,
sortKey?: SortBy, sortKey?: SortBy,
sortOrd?: SortOrd, sortOrd?: SortOrd,
): QueryIdentifier<LibraryItem> => { ): QueryIdentifier<LibraryItem> => {
const filter = mediaType !== MediaTypeAll ? `kind eq ${mediaType.key}` : undefined;
return { return {
parser: LibraryItemP, parser: LibraryItemP,
path: ["items"], path: ["items"],
infinite: true, infinite: true,
params: { params: {
sortBy: sortKey ? `${sortKey}:${sortOrd ?? "asc"}` : "name:asc", sortBy: sortKey ? `${sortKey}:${sortOrd ?? "asc"}` : "name:asc",
filter, filter: createFilterString(mediaType),
fields: ["watchStatus", "episodesCount"], fields: ["watchStatus", "episodesCount"],
}, },
}; };
}; };
const getMediaTypeFromParam = (mediaTypeParam?: string): MediaType => { export const getMediaTypeFromParam = (mediaTypeParam?: string): MediaType => {
const mediaTypeKey = (mediaTypeParam as MediaTypeKey) || MediaTypeKey.All; const mediaTypeKey = (mediaTypeParam as MediaTypeKey) || MediaTypeKey.All;
return MediaTypes.find((t) => t.key === mediaTypeKey) ?? MediaTypeAll; return MediaTypes.find((t) => t.key === mediaTypeKey) ?? MediaTypeAll;
}; };

27
front/packages/ui/src/search/index.tsx
View File

@ -23,17 +23,18 @@ import { usePageStyle } from "@kyoo/primitives";
import { useState } from "react"; import { useState } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { createParam } from "solito"; import { createParam } from "solito";
import { itemMap } from "../browse"; import {createFilterString, getMediaTypeFromParam, itemMap} from "../browse";
import { ItemGrid } from "../browse/grid"; import { ItemGrid } from "../browse/grid";
import { BrowseSettings } from "../browse/header"; import { BrowseSettings } from "../browse/header";
import { ItemList } from "../browse/list"; import { ItemList } from "../browse/list";
import { Layout, SearchSort, SortOrd } from "../browse/types"; import {Layout, type MediaType, MediaTypes, SearchSort, SortOrd} from "../browse/types";
import { InfiniteFetch } from "../fetch-infinite"; import { InfiniteFetch } from "../fetch-infinite";
import { DefaultLayout } from "../layout"; import { DefaultLayout } from "../layout";
const { useParam } = createParam<{ sortBy?: string }>(); const { useParam } = createParam<{ sortBy?: string, mediaType?: string }>();
const query = ( const query = (
mediaType: MediaType,
query?: string, query?: string,
sortKey?: SearchSort, sortKey?: SearchSort,
sortOrd?: SortOrd, sortOrd?: SortOrd,
@ -43,6 +44,7 @@ const query = (
infinite: true, infinite: true,
params: { params: {
q: query, q: query,
filter: createFilterString(mediaType),
sortBy: sortBy:
sortKey && sortKey !== SearchSort.Relevance ? `${sortKey}:${sortOrd ?? "asc"}` : undefined, sortKey && sortKey !== SearchSort.Relevance ? `${sortKey}:${sortOrd ?? "asc"}` : undefined,
}, },
@ -52,15 +54,18 @@ export const SearchPage: QueryPage<{ q?: string }> = ({ q }) => {
const pageStyle = usePageStyle(); const pageStyle = usePageStyle();
const { t } = useTranslation(); const { t } = useTranslation();
const [sort, setSort] = useParam("sortBy"); const [sort, setSort] = useParam("sortBy");
const [mediaTypeParam, setMediaTypeParam] = useParam("mediaType");
const sortKey = (sort?.split(":")[0] as SearchSort) || SearchSort.Relevance; const sortKey = (sort?.split(":")[0] as SearchSort) || SearchSort.Relevance;
const sortOrd = (sort?.split(":")[1] as SortOrd) || SortOrd.Asc; const sortOrd = (sort?.split(":")[1] as SortOrd) || SortOrd.Asc;
const [layout, setLayout] = useState(Layout.Grid); const [layout, setLayout] = useState(Layout.Grid);
const mediaType = getMediaTypeFromParam(mediaTypeParam);
console.log("search: mediaType", mediaType);
const LayoutComponent = layout === Layout.Grid ? ItemGrid : ItemList; const LayoutComponent = layout === Layout.Grid ? ItemGrid : ItemList;
return ( return (
<InfiniteFetch <InfiniteFetch
query={query(q, sortKey, sortOrd)} query={query(mediaType, q, sortKey, sortOrd)}
layout={LayoutComponent.layout} layout={LayoutComponent.layout}
empty={t("search.empty")} empty={t("search.empty")}
incremental incremental
@ -72,6 +77,11 @@ export const SearchPage: QueryPage<{ q?: string }> = ({ q }) => {
setSort={(key, ord) => { setSort={(key, ord) => {
setSort(`${key}:${ord}`); setSort(`${key}:${ord}`);
}} }}
mediaType={mediaType}
availableMediaTypes={MediaTypes}
setMediaType={(mediaType) => {
setMediaTypeParam(mediaType.key);
}}
layout={layout} layout={layout}
setLayout={setLayout} setLayout={setLayout}
/> />
@ -84,6 +94,9 @@ export const SearchPage: QueryPage<{ q?: string }> = ({ q }) => {
}; };
SearchPage.getLayout = DefaultLayout; SearchPage.getLayout = DefaultLayout;
SearchPage.getFetchUrls = ({ q, sortBy }) => [ SearchPage.getFetchUrls = ({ q, sortBy, mediaType }) => {
query(q, sortBy?.split("-")[0] as SearchSort, sortBy?.split("-")[1] as SortOrd), const mediaTypeObj = getMediaTypeFromParam(mediaType);
]; return [
query(mediaTypeObj, q, sortBy?.split("-")[0] as SearchSort, sortBy?.split("-")[1] as SortOrd),
];
}