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,
+ },
];