diff --git a/front/packages/ui/src/browse/header.tsx b/front/packages/ui/src/browse/header.tsx index daf21e3e..e16a34f7 100644 --- a/front/packages/ui/src/browse/header.tsx +++ b/front/packages/ui/src/browse/header.tsx @@ -18,27 +18,18 @@ * along with Kyoo. If not, see . */ -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(function SortTrigger( { sortKey, ...props }, @@ -59,24 +50,24 @@ const SortTrigger = forwardRef(funct ); }); -const MediaTypeTrigger = forwardRef(function MediaTypeTrigger( - { mediaType, ...props }, - ref, -) { - const { css } = useYoshiki(); - const { t } = useTranslation(); - const labelKey = mediaType !== MediaTypeAll ? `browse.mediatypekey.${mediaType.key}` : "browse.mediatypelabel"; - return ( - - -

{t(labelKey as any)}

-
- ); -}); +const MediaTypeTrigger = forwardRef( + function MediaTypeTrigger({ mediaType, ...props }, ref) { + const { css } = useYoshiki(); + const { t } = useTranslation(); + const labelKey = + mediaType !== MediaTypeAll ? `browse.mediatypekey.${mediaType.key}` : "browse.mediatypelabel"; + return ( + + +

{t(labelKey as any)}

+
+ ); + }, +); export const BrowseSettings = ({ availableSorts, diff --git a/front/packages/ui/src/browse/index.tsx b/front/packages/ui/src/browse/index.tsx index 2ad96c77..fb25436a 100644 --- a/front/packages/ui/src/browse/index.tsx +++ b/front/packages/ui/src/browse/index.tsx @@ -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 => { +const query = ( + mediaType: MediaType, + sortKey?: SortBy, + sortOrd?: SortOrd, +): QueryIdentifier => { 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)]; +}; diff --git a/front/packages/ui/src/browse/types.ts b/front/packages/ui/src/browse/types.ts index b53de6e7..186bea4a 100644 --- a/front/packages/ui/src/browse/types.ts +++ b/front/packages/ui/src/browse/types.ts @@ -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, + }, ];