Front: Add Duration to media info

front/packages/models/src/resources/watch-info.ts

@@ -135,7 +135,8 @@ export type Chapter = z.infer<typeof ChapterP>;
 /**
  * The transcoder's info for this item. This include subtitles, fonts, chapters...
  */
-export const WatchInfoP = z.object({
+export const WatchInfoP = z
+	.object({
 		/**
 		 * The sha1 of the video file.
 		 */
@@ -176,7 +177,16 @@ export const WatchInfoP = z.object({
 		 * The list of chapters. See Chapter for more information.
 		 */
 		chapters: z.array(ChapterP),
-});
+	})
+	.transform((x) => {
+		const hour = Math.floor(x.length / 3600);
+		const minutes = Math.ceil((x.length % 3600) / 60);
+		const duration = hour ? `${hour}h` : "" + `${minutes}m`;
+		return {
+			...x,
+			duration,
+		};
+	});
 
 /**
  * A watch info for a video

front/packages/ui/src/components/media-info.tsx

@@ -23,11 +23,10 @@ import { Button, HR, P, Popup, Skeleton } from "@kyoo/primitives";
 import { Fetch } from "../fetch";
 import { useTranslation } from "react-i18next";
 import { View } from "react-native";
-import { useYoshiki } from "yoshiki";
 import { NativeCssFunc } from "yoshiki/src/native/type";
 
 const MediaInfoTable = ({
-	mediaInfo: { path, video, container, audios, subtitles },
+	mediaInfo: { path, video, container, audios, subtitles, duration },
 	css,
 }: {
 	css: NativeCssFunc;
@@ -62,6 +61,7 @@ const MediaInfoTable = ({
 			{
 				[t("mediainfo.file")]: path?.replace(/^\/video\//, ""),
 				[t("mediainfo.container")]: container,
+				[t("mediainfo.duration")]: duration,
 			},
 			{
 				[t("mediainfo.video")]: video

front/translations/en.json

@@ -183,6 +183,7 @@
 		"audio": "Audio",
 		"subtitles": "Subtitles",
 		"forced": "Forced",
-		"default": "Default"
+		"default": "Default",
+		"duration": "Duration"
 	}
 }

front/translations/fr.json

@@ -183,6 +183,7 @@
 		"audio": "Audio",
 		"subtitles": "Sous titres",
 		"forced": "Forcé",
-		"default": "Par Défaut"
+		"default": "Par Défaut",
+		"duration": "Duration"
 	}
 }