Add media type filter (#528)

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

@@ -18,28 +18,18 @@
  * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
  */
 
-import {
+import { HR, Icon, IconButton, Menu, P, PressableFeedback, tooltip, ts } from "@kyoo/primitives";
-	Chip,
-	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 FilterList from "@material-symbols/svg-400/rounded/filter_list.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 ViewList from "@material-symbols/svg-400/rounded/view_list.svg";
 import { 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 { Layout, type MediaType, MediaTypeAll, SearchSort, SortOrd } from "./types";
 
 const SortTrigger = forwardRef<View, PressableProps & { sortKey: string }>(function SortTrigger(
 	{ sortKey, ...props },
@@ -60,11 +50,34 @@ 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";
+		const icon = mediaType !== MediaTypeAll ? mediaType?.icon ?? FilterList : FilterList;
+		return (
+			<PressableFeedback
+				ref={ref}
+				{...css({ flexDirection: "row", alignItems: "center" }, props as any)}
+				{...tooltip(t("browse.mediatype-tt"))}
+			>
+				<Icon icon={icon} {...css({ paddingX: ts(0.5) })} />
+				<P>{t(labelKey as any)}</P>
+			</PressableFeedback>
+		);
+	},
+);
+
 export const BrowseSettings = ({
 	availableSorts,
 	sortKey,
 	sortOrd,
 	setSort,
+	availableMediaTypes,
+	mediaType,
+	setMediaType,
 	layout,
 	setLayout,
 }: {
@@ -72,13 +85,14 @@ 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;
 }) => {
 	const { css, theme } = useYoshiki();
 	const { t } = useTranslation();
-	const filters: string[] = [];
-	// TODO: implement filters in the front.
 
 	return (
 		<View
@@ -89,14 +103,6 @@ export const BrowseSettings = ({
 				marginY: ts(1),
 			})}
 		>
-			{filters.length !== 0 && (
-				<View {...css({ flexGrow: 1, flexDirection: "row", alignItems: "center" })}>
-					<Icon icon={Style} {...css({ marginX: ts(1) })} />
-					{filters.map((x) => (
-						<Chip key={x} label={x} />
-					))}
-				</View>
-			)}
 			<View {...css({ flexDirection: "row" })}>
 				<Menu Trigger={SortTrigger} sortKey={sortKey}>
 					{availableSorts.map((x) => (
@@ -133,6 +139,19 @@ export const BrowseSettings = ({
 					{...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={() => setMediaType(x)}
+						/>
+					))}
+				</Menu>
+			</View>
 		</View>
 	);
 };

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 { Layout, SortBy, SortOrd } from "./types";
+import {
+	Layout,
+	type MediaType,
+	MediaTypeAll,
+	MediaTypeKey,
+	MediaTypes,
+	SortBy,
+	SortOrd,
+} from "./types";
 
-const { useParam } = createParam<{ sortBy?: string }>();
+const { useParam } = createParam<{ sortBy?: string; mediaType?: string }>();
 
 export const itemMap = (
 	item: LibraryItem,
@@ -52,27 +60,45 @@ export const itemMap = (
 		item.kind === "show" ? item.watchStatus?.unseenEpisodesCount ?? item.episodesCount! : null,
 });
 
-const query = (sortKey?: SortBy, sortOrd?: SortOrd): QueryIdentifier<LibraryItem> => ({
+export const createFilterString = (mediaType: MediaType): string | undefined => {
+	return mediaType !== MediaTypeAll ? `kind eq ${mediaType.key}` : undefined;
+};
+
+const query = (
+	mediaType: MediaType,
+	sortKey?: SortBy,
+	sortOrd?: SortOrd,
+): QueryIdentifier<LibraryItem> => {
+	return {
 		parser: LibraryItemP,
 		path: ["items"],
 		infinite: true,
 		params: {
 			sortBy: sortKey ? `${sortKey}:${sortOrd ?? "asc"}` : "name:asc",
+			filter: createFilterString(mediaType),
 			fields: ["watchStatus", "episodesCount"],
 		},
-});
+	};
+};
+
+export const getMediaTypeFromParam = (mediaTypeParam?: string): MediaType => {
+	const mediaTypeKey = (mediaTypeParam as MediaTypeKey) || MediaTypeKey.All;
+	return MediaTypes.find((t) => t.key === mediaTypeKey) ?? MediaTypeAll;
+};
 
 export const BrowsePage: QueryPage = () => {
 	const [sort, setSort] = useParam("sortBy");
+	const [mediaTypeParam, setMediaTypeParam] = useParam("mediaType");
 	const sortKey = (sort?.split(":")[0] as SortBy) || SortBy.Name;
 	const sortOrd = (sort?.split(":")[1] as SortOrd) || SortOrd.Asc;
 	const [layout, setLayout] = useState(Layout.Grid);
 
+	const mediaType = getMediaTypeFromParam(mediaTypeParam);
 	const LayoutComponent = layout === Layout.Grid ? ItemGrid : ItemList;
 
 	return (
 		<InfiniteFetch
-			query={query(sortKey, sortOrd)}
+			query={query(mediaType, sortKey, sortOrd)}
 			layout={LayoutComponent.layout}
 			Header={
 				<BrowseSettings
@@ -82,6 +108,11 @@ export const BrowsePage: QueryPage = () => {
 					setSort={(key, ord) => {
 						setSort(`${key}:${ord}`);
 					}}
+					mediaType={mediaType}
+					availableMediaTypes={MediaTypes}
+					setMediaType={(mediaType) => {
+						setMediaTypeParam(mediaType.key);
+					}}
 					layout={layout}
 					setLayout={setLayout}
 				/>
@@ -94,6 +125,7 @@ export const BrowsePage: QueryPage = () => {
 
 BrowsePage.getLayout = DefaultLayout;
 
-BrowsePage.getFetchUrls = ({ sortBy }) => [
+BrowsePage.getFetchUrls = ({ mediaType, sortBy }) => {
-	query(sortBy?.split("-")[0] as SortBy, sortBy?.split("-")[1] as SortOrd),
+	const mediaTypeObj = getMediaTypeFromParam(mediaType);
-];
+	return [query(mediaTypeObj, sortBy?.split("-")[0] as SortBy, sortBy?.split("-")[1] as SortOrd)];
+};

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

@@ -18,6 +18,13 @@
  * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
  */
 
+import Collection from "@material-symbols/svg-400/rounded/collections_bookmark.svg";
+import Movie from "@material-symbols/svg-400/rounded/movie.svg";
+import TV from "@material-symbols/svg-400/rounded/tv.svg";
+import All from "@material-symbols/svg-400/rounded/view_headline.svg";
+import type { ComponentType } from "react";
+import type { SvgProps } from "react-native-svg";
+
 export enum SortBy {
 	Name = "name",
 	StartAir = "startAir",
@@ -42,3 +49,36 @@ export enum Layout {
 	Grid,
 	List,
 }
+
+export enum MediaTypeKey {
+	All = "all",
+	Movie = "movie",
+	Show = "show",
+	Collection = "collection",
+}
+
+export interface MediaType {
+	key: MediaTypeKey;
+	icon: ComponentType<SvgProps>;
+}
+
+export const MediaTypeAll: MediaType = {
+	key: MediaTypeKey.All,
+	icon: All,
+};
+
+export const MediaTypes: MediaType[] = [
+	MediaTypeAll,
+	{
+		key: MediaTypeKey.Movie,
+		icon: Movie,
+	},
+	{
+		key: MediaTypeKey.Show,
+		icon: TV,
+	},
+	{
+		key: MediaTypeKey.Collection,
+		icon: Collection,
+	},
+];

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

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

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": {