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

Fix formatting

Browse Source
This commit is contained in:
Scott Merchant 2024-06-09 10:42:45 +09:30 committed by Zoe Roux
parent 20963c021b
commit 4810db554e
No known key found for this signature in database
3 changed files with 52 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
front/packages/ui/src/browse/header.tsx
View File

@ -18,27 +18,18 @@
* along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
*/
import {
HR,
Icon,
IconButton,
Menu,
P,
PressableFeedback,
tooltip,
ts,
} from "@kyoo/primitives";
import { HR, Icon, IconButton, Menu, P, PressableFeedback, tooltip, ts } from "@kyoo/primitives";
import ArrowDownward from "@material-symbols/svg-400/rounded/arrow_downward.svg";
import ArrowUpward from "@material-symbols/svg-400/rounded/arrow_upward.svg";
import GridView from "@material-symbols/svg-400/rounded/grid_view.svg";
import Sort from "@material-symbols/svg-400/rounded/sort.svg";
import FilterList from "@material-symbols/svg-400/rounded/filter_list.svg";
import ViewList from "@material-symbols/svg-400/rounded/view_list.svg";
import {forwardRef} from "react";
import { forwardRef } from "react";
import { useTranslation } from "react-i18next";
import { type PressableProps, View } from "react-native";
import { useYoshiki } from "yoshiki/native";
import {Layout, MediaType, MediaTypeAll, SearchSort, SortOrd} from "./types";
import { Layout, MediaType, MediaTypeAll, SearchSort, SortOrd } from "./types";
const SortTrigger = forwardRef<View, PressableProps & { sortKey: string }>(function SortTrigger(
{ sortKey, ...props },
@ -59,24 +50,24 @@ const SortTrigger = forwardRef<View, PressableProps & { sortKey: string }>(funct
);
});
const MediaTypeTrigger = forwardRef<View, PressableProps & { mediaType: MediaType }>(function MediaTypeTrigger(
{ mediaType, ...props },
ref,
) {
const { css } = useYoshiki();
const { t } = useTranslation();
const labelKey = mediaType !== MediaTypeAll ? `browse.mediatypekey.${mediaType.key}` : "browse.mediatypelabel";
return (
<PressableFeedback
ref={ref}
{...css({ flexDirection: "row", alignItems: "center" }, props as any)}
{...tooltip(t("browse.mediatype-tt"))}
>
<Icon icon={mediaType?.icon ?? FilterList} {...css({ paddingX: ts(0.5) })} />
<P>{t(labelKey as any)}</P>
</PressableFeedback>
);
});
const MediaTypeTrigger = forwardRef<View, PressableProps & { mediaType: MediaType }>(
function MediaTypeTrigger({ mediaType, ...props }, ref) {
const { css } = useYoshiki();
const { t } = useTranslation();
const labelKey =
mediaType !== MediaTypeAll ? `browse.mediatypekey.${mediaType.key}` : "browse.mediatypelabel";
return (
<PressableFeedback
ref={ref}
{...css({ flexDirection: "row", alignItems: "center" }, props as any)}
{...tooltip(t("browse.mediatype-tt"))}
>
<Icon icon={mediaType?.icon ?? FilterList} {...css({ paddingX: ts(0.5) })} />
<P>{t(labelKey as any)}</P>
</PressableFeedback>
);
},
);
export const BrowseSettings = ({
availableSorts,

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

@ -32,9 +32,17 @@ import { DefaultLayout } from "../layout";
import { ItemGrid } from "./grid";
import { BrowseSettings } from "./header";
import { ItemList } from "./list";
import {MediaTypeAll, Layout, MediaTypes, SortBy, SortOrd, MediaTypeKey, MediaType} from "./types";
import {
MediaTypeAll,
Layout,
MediaTypes,
SortBy,
SortOrd,
MediaTypeKey,
MediaType,
} from "./types";
const { useParam } = createParam<{ sortBy?: string, mediaType?: string }>();
const { useParam } = createParam<{ sortBy?: string; mediaType?: string }>();
export const itemMap = (
item: LibraryItem,
@ -52,9 +60,13 @@ export const itemMap = (
item.kind === "show" ? item.watchStatus?.unseenEpisodesCount ?? item.episodesCount! : null,
});
const query = (mediaType: MediaType, sortKey?: SortBy, sortOrd?: SortOrd): QueryIdentifier<LibraryItem> => {
const query = (
mediaType: MediaType,
sortKey?: SortBy,
sortOrd?: SortOrd,
): QueryIdentifier<LibraryItem> => {
const filter = mediaType !== MediaTypeAll ? `kind eq ${mediaType.key}` : undefined;
return ({
return {
parser: LibraryItemP,
path: ["items"],
infinite: true,
@ -63,13 +75,13 @@ const query = (mediaType: MediaType, sortKey?: SortBy, sortOrd?: SortOrd): Query
filter,
fields: ["watchStatus", "episodesCount"],
},
});
}
};
};
const getMediaTypeFromParam = (mediaTypeParam?: string): MediaType => {
const mediaTypeKey = mediaTypeParam as MediaTypeKey || MediaTypeKey.All;
return MediaTypes.find(t => t.key === mediaTypeKey) ?? MediaTypeAll;
}
const mediaTypeKey = (mediaTypeParam as MediaTypeKey) || MediaTypeKey.All;
return MediaTypes.find((t) => t.key === mediaTypeKey) ?? MediaTypeAll;
};
export const BrowsePage: QueryPage = () => {
const [sort, setSort] = useParam("sortBy");
@ -112,7 +124,5 @@ BrowsePage.getLayout = DefaultLayout;
BrowsePage.getFetchUrls = ({ mediaType, sortBy }) => {
const mediaTypeObj = getMediaTypeFromParam(mediaType);
return[
query(mediaTypeObj, sortBy?.split("-")[0] as SortBy, sortBy?.split("-")[1] as SortOrd),
];
}
return [query(mediaTypeObj, sortBy?.split("-")[0] as SortBy, sortBy?.split("-")[1] as SortOrd)];
};

16
front/packages/ui/src/browse/types.ts
View File

@ -22,8 +22,8 @@ import Collection from "@material-symbols/svg-400/rounded/collections_bookmark.s
import TV from "@material-symbols/svg-400/rounded/tv.svg";
import Movie from "@material-symbols/svg-400/rounded/movie.svg";
import All from "@material-symbols/svg-400/rounded/view_headline.svg";
import type {ComponentType} from "react";
import type {SvgProps} from "react-native-svg";
import type { ComponentType } from "react";
import type { SvgProps } from "react-native-svg";
export enum SortBy {
Name = "name",
@ -50,7 +50,7 @@ export enum Layout {
List,
}
export enum MediaTypeKey{
export enum MediaTypeKey {
All = "all",
Movie = "movie",
Show = "show",
@ -64,14 +64,14 @@ export interface MediaType {
export const MediaTypeAll: MediaType = {
key: MediaTypeKey.All,
icon: All
}
icon: All,
};
export const MediaTypes: MediaType[] = [
MediaTypeAll,
{
key: MediaTypeKey.Movie,
icon: Movie
icon: Movie,
},
{
key: MediaTypeKey.Show,
@ -79,6 +79,6 @@ export const MediaTypes: MediaType[] = [
},
{
key: MediaTypeKey.Collection,
icon: Collection
}
icon: Collection,
},
];