Add scanner issues on the admin panel

front/packages/models/src/index.ts

@@ -27,5 +27,6 @@ export * from "./page";
 export * from "./kyoo-errors";
 export * from "./utils";
 export * from "./login";
+export * from "./issue";
 
 export * from "./query";

front/packages/models/src/issue.ts

@@ -0,0 +1,48 @@
+/*
+ * Kyoo - A portable and vast media library solution.
+ * Copyright (c) Kyoo.
+ *
+ * See AUTHORS.md and LICENSE file in the project root for full license information.
+ *
+ * Kyoo is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * any later version.
+ *
+ * Kyoo is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import { z } from "zod";
+import { zdate } from "./utils";
+
+export const IssueP = z.object({
+	/**
+	 * The type of issue (for example, "Scanner" if this issue was created due to scanning error).
+	 */
+	domain: z.string(),
+	/**
+	 * Why this issue was caused? An unique cause that can be used to identify this issue.
+	 * For the scanner, a cause should be a video path.
+	 */
+	cause: z.string(),
+	/**
+	 * A human readable string explaining why this issue occured.
+	 */
+	reason: z.string(),
+	/**
+	 * Some extra data that could store domain-specific info.
+	 */
+	extra: z.record(z.string(), z.any()),
+	/**
+	 * The date the issue was reported.
+	 */
+	addedDate: zdate(),
+});
+
+export type Issue = z.infer<typeof IssueP>;

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

@@ -23,11 +23,13 @@ import { ts } from "@kyoo/primitives";
 import { ScrollView } from "react-native";
 import { DefaultLayout } from "../layout";
 import { UserList } from "./users";
+import { Scanner } from "./scanner";
 
 export const AdminPage: QueryPage = () => {
 	return (
 		<ScrollView contentContainerStyle={{ gap: ts(4), paddingBottom: ts(4) }}>
 			<UserList />
+			<Scanner />
 		</ScrollView>
 	);
 };

front/packages/ui/src/admin/scanner.tsx

@@ -0,0 +1,77 @@
+/*
+ * Kyoo - A portable and vast media library solution.
+ * Copyright (c) Kyoo.
+ *
+ * See AUTHORS.md and LICENSE file in the project root for full license information.
+ *
+ * Kyoo is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * any later version.
+ *
+ * Kyoo is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import { Issue, IssueP, QueryIdentifier, useFetch } from "@kyoo/models";
+import { useTranslation } from "react-i18next";
+import { SettingsContainer } from "../settings/base";
+import { Icon, P, Skeleton, tooltip, ts } from "@kyoo/primitives";
+import { ErrorView } from "../errors";
+import { z } from "zod";
+import { View } from "react-native";
+import { useYoshiki } from "yoshiki/native";
+
+import Info from "@material-symbols/svg-400/outlined/info.svg";
+
+export const Scanner = () => {
+	const { css } = useYoshiki();
+	const { t } = useTranslation();
+	const { data, error } = useFetch(Scanner.query());
+
+	return (
+		<SettingsContainer title={t("admin.scanner.label")}>
+			<>
+				{error != null ? (
+					<ErrorView error={error} />
+				) : (
+					(data ?? [...Array(3)])?.map((x, i) => (
+						<View
+							key={x?.cause ?? `${i}`}
+							{...css({
+								marginY: ts(1),
+								marginX: ts(3),
+								flexDirection: "row",
+								alignItems: "center",
+								flexGrow: 1,
+							})}
+						>
+							<Icon
+								icon={Info}
+								{...css({ flexShrink: 0, marginRight: ts(2) })}
+								{...tooltip(x?.cause)}
+							/>
+							<Skeleton>
+								{x && <P {...css({ flexGrow: 1, flexShrink: 1, flexWrap: "wrap" })}>{x.reason}</P>}
+							</Skeleton>
+						</View>
+					))
+				)}
+				{data != null && data.length == 0 && <P>{t("admin.scanner.empty")}</P>}
+			</>
+		</SettingsContainer>
+	);
+};
+
+Scanner.query = (): QueryIdentifier<Issue[]> => ({
+	parser: z.array(IssueP),
+	path: ["issues"],
+	params: {
+		filter: "domain eq scanner",
+	},
+});

front/translations/en.json

@@ -216,6 +216,10 @@
 			"regularUser": "User",
 			"set-permissions": "Set permissions",
 			"delete": "Delete user"
+		},
+		"scanner": {
+			"label": "Scanner",
+			"empty": "No issue found. All your items are registered."
 		}
 	}
 }

front/translations/fr.json

@@ -216,6 +216,10 @@
 			"regularUser": "Utilisateur",
 			"set-permissions": "Definir les permissions",
 			"delete": "Supprimer l'utilisateur"
+		},
+		"scanner": {
+			"label": "Scanner",
+			"empty": "Aucun problème trouvé. Toutes vos vidéos sont enregistrés."
 		}
 	}
 }