diff --git a/front/packages/models/src/resources/watch-info.ts b/front/packages/models/src/resources/watch-info.ts index 23f36f66..f6a746cf 100644 --- a/front/packages/models/src/resources/watch-info.ts +++ b/front/packages/models/src/resources/watch-info.ts @@ -141,10 +141,6 @@ export const WatchInfoP = z * The sha1 of the video file. */ sha: z.string(), - /** - * The duration of the video (in seconds). - */ - length: z.number(), /** * The internal path of the video file. */ @@ -153,6 +149,14 @@ export const WatchInfoP = z * The extension used to store this video file. */ extension: z.string(), + /** + * The file size of the video file. + */ + size: z.number(), + /** + * The duration of the video (in seconds). + */ + duration: z.number(), /** * The container of the video file of this episode. Common containers are mp4, mkv, avi and so on. */ @@ -179,15 +183,23 @@ export const WatchInfoP = z 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`; + const hour = Math.floor(x.duration / 3600); + const minutes = Math.ceil((x.duration % 3600) / 60); + return { ...x, - duration, + duration: `${hour ? `${hour}h` : ""}${minutes}m`, + durationSeconds: x.duration, + size: humanFileSize(x.size), }; }); +// from https://stackoverflow.com/questions/10420352/converting-file-size-in-bytes-to-human-readable-string +const humanFileSize = (size: number): string => { + var i = size == 0 ? 0 : Math.floor(Math.log(size) / Math.log(1024)); + return (size / Math.pow(1024, i)).toFixed(2) * 1 + " " + ["B", "kB", "MB", "GB", "TB"][i]; +}; + /** * A watch info for a video */ diff --git a/front/packages/ui/src/components/media-info.tsx b/front/packages/ui/src/components/media-info.tsx index b294b87a..76ebfd03 100644 --- a/front/packages/ui/src/components/media-info.tsx +++ b/front/packages/ui/src/components/media-info.tsx @@ -19,15 +19,15 @@ */ import { Audio, QueryIdentifier, Subtitle, WatchInfo, WatchInfoP } from "@kyoo/models"; -import { Button, HR, P, Popup, Skeleton, ts } from "@kyoo/primitives"; +import { Button, HR, P, Popup, Skeleton } from "@kyoo/primitives"; import { Fetch } from "../fetch"; import { useTranslation } from "react-i18next"; -import { ScrollView, View } from "react-native"; -import { percent, px, useYoshiki, vh } from "yoshiki/native"; +import { View } from "react-native"; +import { useYoshiki } from "yoshiki/native"; import { Fragment } from "react"; const MediaInfoTable = ({ - mediaInfo: { path, video, container, audios, subtitles, duration }, + mediaInfo: { path, video, container, audios, subtitles, duration, size }, }: { mediaInfo: Partial; }) => { @@ -62,6 +62,7 @@ const MediaInfoTable = ({ [t("mediainfo.file")]: path?.replace(/^\/video\//, ""), [t("mediainfo.container")]: container, [t("mediainfo.duration")]: duration, + [t("mediainfo.size")]: size, }, { [t("mediainfo.video")]: video diff --git a/front/packages/ui/src/player/index.tsx b/front/packages/ui/src/player/index.tsx index 96a73315..94f961e9 100644 --- a/front/packages/ui/src/player/index.tsx +++ b/front/packages/ui/src/player/index.tsx @@ -127,7 +127,9 @@ export const Player = ({ slug, type }: { slug: string; type: "episode" | "movie" next={next} previous={previous} /> - {data && info && } + {data && info && ( + + )}