Add media type filter

front/packages/ui/src/browse/header.tsx

@@ -34,12 +34,14 @@ 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 Style from "@material-symbols/svg-400/rounded/style.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 {type ComponentType, forwardRef} from "react";
 import { useTranslation } from "react-i18next";
 import { type PressableProps, View } from "react-native";
 import { useYoshiki } from "yoshiki/native";
-import { Layout, SearchSort, SortOrd } from "./types";
+import {AllMediaTypes, Layout, SearchSort, SortOrd} from "./types";
+import type {SvgProps} from "react-native-svg";
 
 const SortTrigger = forwardRef<View, PressableProps & { sortKey: string }>(function SortTrigger(
 	{ sortKey, ...props },
@@ -60,11 +62,38 @@ 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 ? `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 interface MediaType {
+	key: string;
+	icon: ComponentType<SvgProps>;
+}
+
 export const BrowseSettings = ({
 	availableSorts,
 	sortKey,
 	sortOrd,
 	setSort,
+	availableMediaTypes,
+	mediaType,
+	setMediaType,
 	layout,
 	setLayout,
 }: {
@@ -72,6 +101,9 @@ export const BrowseSettings = ({
 	sortKey: string;
 	sortOrd: SortOrd;
 	setSort: (sort: string, ord: SortOrd) => void;
+	availableMediaTypes: MediaType[];
+	mediaType?: MediaType;
+	setMediaType: (mediaType?: MediaType) => void;
 	layout: Layout;
 	setLayout: (layout: Layout) => void;
 }) => {
@@ -81,58 +113,91 @@ export const BrowseSettings = ({
 	// TODO: implement filters in the front.
 
 	return (
-		<View
+		<>
-			{...css({
+			<View
-				flexDirection: "row-reverse",
+				{...css({
-				alignItems: "center",
+					flexDirection: "row-reverse",
-				marginX: ts(4),
+					alignItems: "center",
-				marginY: ts(1),
+					marginX: ts(4),
-			})}
+					marginY: ts(1),
-		>
+				})}
-			{filters.length !== 0 && (
+			>
-				<View {...css({ flexGrow: 1, flexDirection: "row", alignItems: "center" })}>
+				<View {...css({ flexDirection: "row" })}>
-					<Icon icon={Style} {...css({ marginX: ts(1) })} />
+					<Menu Trigger={SortTrigger} sortKey={sortKey}>
-					{filters.map((x) => (
+						{availableSorts.map((x) => (
-						<Chip key={x} label={x} />
+							<Menu.Item
-					))}
+								key={x}
+								label={t(`browse.sortkey.${x}` as any)}
+								selected={sortKey === x}
+								icon={
+									x !== SearchSort.Relevance
+										? sortOrd === SortOrd.Asc
+											? ArrowUpward
+											: ArrowDownward
+										: undefined
+								}
+								onSelect={() =>
+									setSort(x, sortKey === x && sortOrd === SortOrd.Asc ? SortOrd.Desc : SortOrd.Asc)
+								}
+							/>
+						))}
+					</Menu>
+					<HR orientation="vertical" />
+					<IconButton
+						icon={GridView}
+						onPress={() => setLayout(Layout.Grid)}
+						color={layout === Layout.Grid ? theme.accent : undefined}
+						{...tooltip(t("browse.switchToGrid"))}
+						{...css({ padding: ts(0.5), marginY: "auto" })}
+					/>
+					<IconButton
+						icon={ViewList}
+						onPress={() => setLayout(Layout.List)}
+						color={layout === Layout.List ? theme.accent : undefined}
+						{...tooltip(t("browse.switchToList"))}
+						{...css({ padding: ts(0.5), marginY: "auto" })}
+					/>
+				</View>
+				<View {...css({ flexGrow: 1, flexDirection: "row", alignItems: "center" })}>
+					<Menu Trigger={MediaTypeTrigger} mediaType={mediaType}>
+						{availableMediaTypes.map((x) => (
+							<Menu.Item
+								key={x.key}
+								label={t(`browse.mediatypekey.${x.key}` as any)}
+								selected={mediaType === x}
+								icon={x.icon}
+								onSelect={() => {
+									if (mediaType === x || x === AllMediaTypes) {
+										setMediaType(undefined)
+									} else {
+										setMediaType(x)
+									}
+								}}
+							/>
+						))}
+					</Menu>
 				</View>
-			)}
-			<View {...css({ flexDirection: "row" })}>
-				<Menu Trigger={SortTrigger} sortKey={sortKey}>
-					{availableSorts.map((x) => (
-						<Menu.Item
-							key={x}
-							label={t(`browse.sortkey.${x}` as any)}
-							selected={sortKey === x}
-							icon={
-								x !== SearchSort.Relevance
-									? sortOrd === SortOrd.Asc
-										? ArrowUpward
-										: ArrowDownward
-									: undefined
-							}
-							onSelect={() =>
-								setSort(x, sortKey === x && sortOrd === SortOrd.Asc ? SortOrd.Desc : SortOrd.Asc)
-							}
-						/>
-					))}
-				</Menu>
-				<HR orientation="vertical" />
-				<IconButton
-					icon={GridView}
-					onPress={() => setLayout(Layout.Grid)}
-					color={layout === Layout.Grid ? theme.accent : undefined}
-					{...tooltip(t("browse.switchToGrid"))}
-					{...css({ padding: ts(0.5), marginY: "auto" })}
-				/>
-				<IconButton
-					icon={ViewList}
-					onPress={() => setLayout(Layout.List)}
-					color={layout === Layout.List ? theme.accent : undefined}
-					{...tooltip(t("browse.switchToList"))}
-					{...css({ padding: ts(0.5), marginY: "auto" })}
-				/>
 			</View>
-		</View>
+			<View
+				{...css({
+					flexDirection: "row-reverse",
+					alignItems: "center",
+					marginX: ts(4),
+					marginY: ts(1),
+					zIndex: 1,
+				})}
+			>
+				{filters.length !== 0 && (
+					<View {...css({ flexGrow: 1, flexDirection: "row", alignItems: "center" })}>
+						{/*<Icon icon={Style} {...css({ marginX: ts(1) })} />*/}
+						{filters.map((x) => (
+							<div style={{paddingRight: ".25rem"}}>
+								<Chip key={x} label={x} size={"small"} />
+							</div>
+						))}
+					</View>
+				)}
+			</View>
+		</>
 	);
 };

front/packages/ui/src/browse/index.tsx

@@ -32,9 +32,9 @@ import { DefaultLayout } from "../layout";
 import { ItemGrid } from "./grid";
 import { BrowseSettings } from "./header";
 import { ItemList } from "./list";
-import { Layout, SortBy, SortOrd } from "./types";
+import {Layout, MediaTypes, SortBy, SortOrd} from "./types";
 
-const { useParam } = createParam<{ sortBy?: string }>();
+const { useParam } = createParam<{ sortBy?: string, mediaType?: string }>();
 
 export const itemMap = (
 	item: LibraryItem,
@@ -52,27 +52,30 @@ export const itemMap = (
 		item.kind === "show" ? item.watchStatus?.unseenEpisodesCount ?? item.episodesCount! : null,
 });
 
-const query = (sortKey?: SortBy, sortOrd?: SortOrd): QueryIdentifier<LibraryItem> => ({
+const query = (sortKey?: SortBy, sortOrd?: SortOrd, mediaTypeKey?: string): QueryIdentifier<LibraryItem> => ({
 	parser: LibraryItemP,
 	path: ["items"],
 	infinite: true,
 	params: {
 		sortBy: sortKey ? `${sortKey}:${sortOrd ?? "asc"}` : "name:asc",
+		filter: mediaTypeKey && mediaTypeKey !== "none" ? `kind eq ${mediaTypeKey}` : undefined,
 		fields: ["watchStatus", "episodesCount"],
 	},
 });
 
 export const BrowsePage: QueryPage = () => {
 	const [sort, setSort] = useParam("sortBy");
+	const [mediaTypeKey, setMediaTypeKey] = useParam("mediaType");
 	const sortKey = (sort?.split(":")[0] as SortBy) || SortBy.Name;
 	const sortOrd = (sort?.split(":")[1] as SortOrd) || SortOrd.Asc;
+	const mediaType = mediaTypeKey !== undefined ? MediaTypes.find(t => t.key === mediaTypeKey) : undefined;
 	const [layout, setLayout] = useState(Layout.Grid);
 
 	const LayoutComponent = layout === Layout.Grid ? ItemGrid : ItemList;
 
 	return (
 		<InfiniteFetch
-			query={query(sortKey, sortOrd)}
+			query={query(sortKey, sortOrd, mediaTypeKey)}
 			layout={LayoutComponent.layout}
 			Header={
 				<BrowseSettings
@@ -82,6 +85,11 @@ export const BrowsePage: QueryPage = () => {
 					setSort={(key, ord) => {
 						setSort(`${key}:${ord}`);
 					}}
+					mediaType={mediaType}
+					availableMediaTypes={MediaTypes}
+					setMediaType={(mediaType) => {
+						setMediaTypeKey(mediaType?.key);
+					}}
 					layout={layout}
 					setLayout={setLayout}
 				/>

front/packages/ui/src/browse/types.ts

@@ -18,6 +18,12 @@
  * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
  */
 
+import {MediaType} from "./header";
+import Collection from "@material-symbols/svg-400/rounded/collections_bookmark.svg";
+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";
+
 export enum SortBy {
 	Name = "name",
 	StartAir = "startAir",
@@ -42,3 +48,24 @@ export enum Layout {
 	Grid,
 	List,
 }
+
+export const AllMediaTypes: MediaType = {
+	key: "all",
+	icon: All
+}
+
+export const MediaTypes: MediaType[] = [
+	AllMediaTypes,
+	{
+		key: "movie",
+		icon: Movie
+	},
+	{
+		key: "show",
+		icon: TV,
+	},
+	{
+		key: "collection",
+		icon: Collection
+	}
+];

front/translations/en.json

@@ -43,6 +43,14 @@
 		"season": "Season {{number}}"
 	},
 	"browse": {
+		"mediatypekey": {
+			"all": "All",
+			"movie": "Movies",
+			"show": "Series",
+			"collection": "Collection"
+		},
+		"mediatype-tt": "Media Type",
+		"mediatypelabel": "Media Type",
 		"sortby": "Sort by {{key}}",
 		"sortby-tt": "Sort by",
 		"sortkey": {