Style entry select popup

api/bun.lock

@@ -44,6 +44,7 @@
       "devDependencies": {
         "@biomejs/biome": "2.4.4",
         "@types/pg": "^8.16.0",
+        "typescript": "^5.9.3",
       },
     },
   },
@@ -455,6 +456,8 @@
 
     "type-fest": ["type-fest@4.41.0", "", {}, "sha512-TeTSQ6H5YHvpqVwBRcnLDCBnDOHWYu7IvGbHT6N8AOymcr9PJGjc1GTtiWZTYg0NCgYwvnYWEkVChQAr9bjfwA=="],
 
+    "typescript": ["typescript@5.9.3", "", { "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" } }, "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw=="],
+
     "uint8array-extras": ["uint8array-extras@1.5.0", "", {}, "sha512-rvKSBiC5zqCCiDZ9kAOszZcDvdAHwwIKJG33Ykj43OKcWsnmcBRL09YTU4nOeHZ8Y2a7l1MgTd08SBe9A8Qj6A=="],
 
     "undici-types": ["undici-types@7.16.0", "", {}, "sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw=="],

front/public/translations/en.json

@@ -45,6 +45,8 @@
 		"season": "Season {{number}}",
 		"multiVideos": "Multiples video files available",
 		"videosCount": "{{number}} videos",
+		"version": "Version {{number}}",
+		"part": "Part {{number}}",
 		"videos-map": "Edit video mappings"
 	},
 	"videos-map": {

front/src/components/entries/select.tsx

@@ -1,19 +1,57 @@
-import { P, Popup } from "~/primitives";
+import PlayArrow from "@material-symbols/svg-400/rounded/play_arrow-fill.svg";
+import { Fragment } from "react";
+import { useTranslation } from "react-i18next";
+import { View } from "react-native";
+import type { Entry } from "~/models";
+import { HR, Icon, Link, P, Popup, SubP } from "~/primitives";
 
 export const EntrySelect = ({
+	displayNumber,
 	name,
 	videos,
 	close,
 }: {
+	displayNumber: string;
 	name: string;
-	videos: { slug: string; path: string }[];
+	videos: Entry["videos"];
 	close?: () => void;
 }) => {
+	const { t } = useTranslation();
+
 	return (
-		<Popup title={name} close={close}>
-			{videos.map((x) => (
-				<P key={x.slug}>{x.path}</P>
-			))}
+		<Popup
+			title={[displayNumber, name].filter((x) => x).join(" · ")}
+			close={close}
+		>
+			{[...Map.groupBy(videos, (v) => v.rendering).entries()].map(
+				([rendering, items], i) => (
+					<Fragment key={rendering}>
+						{i > 0 && <HR />}
+						{items.map((x) => (
+							<Link
+								key={x.slug}
+								href={`/watch/${x.slug}`}
+								className="flex-row items-center gap-2 rounded p-2 hover:bg-popover"
+							>
+								<Icon icon={PlayArrow} className="shrink-0" />
+								<View className="flex-1">
+									<P>{x.path}</P>
+									<SubP>
+										{[
+											t("show.version", { number: x.version }),
+											x.part !== null
+												? t("show.part", { number: x.part })
+												: null,
+										]
+											.filter((s) => s != null)
+											.join(" · ")}
+									</SubP>
+								</View>
+							</Link>
+						))}
+					</Fragment>
+				),
+			)}
 		</Popup>
 	);
 };

front/src/ui/details/season.tsx

@@ -100,8 +100,9 @@ export const EntryList = ({
 	slug: string;
 	season: string | number;
 	onSelectVideos?: (entry: {
+		displayNumber: string;
 		name: string | null;
-		videos: { slug: string; path: string }[];
+		videos: Entry["videos"];
 	}) => void;
 } & Partial<ComponentProps<typeof InfiniteFetch<EntryOrSeason>>>) => {
 	const { t } = useTranslation();
@@ -146,7 +147,11 @@ export const EntryList = ({
 							displayNumber={entryDisplayNumber(item)}
 							watchedPercent={item.progress.percent}
 							onSelectVideos={() =>
-								onSelectVideos?.({ name: item.name, videos: item.videos })
+								onSelectVideos?.({
+									displayNumber: entryDisplayNumber(item),
+									name: item.name,
+									videos: item.videos,
+								})
 							}
 						/>
 					)}

front/src/ui/details/serie.tsx

@@ -30,11 +30,13 @@ export const NextUp = ({
 }: {
 	entry: Entry;
 	onSelectVideos?: (entry: {
+		displayNumber: string;
 		name: string | null;
-		videos: { slug: string; path: string }[];
+		videos: Entry["videos"];
 	}) => void;
 }) => {
 	const { t } = useTranslation();
+	const displayNumber = entryDisplayNumber(entry);
 
 	return (
 		<View className="m-4 flex-1">
@@ -45,9 +47,13 @@ export const NextUp = ({
 					serieSlug={null}
 					videosCount={entry.videos.length}
 					watchedPercent={entry.progress.percent}
-					displayNumber={entryDisplayNumber(entry)}
+					displayNumber={displayNumber}
 					onSelectVideos={() =>
-						onSelectVideos?.({ name: entry.name, videos: entry.videos })
+						onSelectVideos?.({
+							displayNumber,
+							name: entry.name,
+							videos: entry.videos,
+						})
 					}
 				/>
 			</Container>
@@ -76,8 +82,9 @@ const SerieHeader = ({
 	slug: string;
 	onImageLayout?: ViewProps["onLayout"];
 	onSelectVideos?: (entry: {
+		displayNumber: string;
 		name: string | null;
-		videos: { slug: string; path: string }[];
+		videos: Entry["videos"];
 	}) => void;
 }) => {
 	return (
@@ -112,11 +119,13 @@ export const SerieDetails = () => {
 
 	const openEntrySelect = useCallback(
 		(entry: {
+			displayNumber: string;
 			name: string | null;
-			videos: { slug: string; path: string }[];
+			videos: Entry["videos"];
 		}) => {
 			setPopup(
 				<EntrySelect
+					displayNumber={entry.displayNumber}
 					name={entry.name ?? ""}
 					videos={entry.videos}
 					close={closePopup}

front/tsconfig.json

@@ -2,9 +2,7 @@
 	"compilerOptions": {
 		"baseUrl": ".",
 		"paths": {
-			"~/*": [
-				"./src/*"
-			]
+			"~/*": ["./src/*"]
 		},
 		"strict": true,
 		"rootDir": ".",
@@ -17,14 +15,8 @@
 		"jsx": "react-jsx",
 		"forceConsistentCasingInFileNames": true,
 		"allowImportingTsExtensions": true,
-		"types": [
-			"node",
-			"react"
-		],
-		"lib": [
-			"dom",
-			"esnext"
-		]
+		"types": ["node", "react"],
+		"lib": ["dom", "esnext"]
 	},
 	"include": [
 		"**/*.ts",
@@ -33,13 +25,6 @@
 		"expo-env.d.ts",
 		"node_modules/uniwind/types.d.ts"
 	],
-	"exclude": [
-		".expo",
-		"scripts",
-		"**/test",
-		"**/dist",
-		"**/types",
-		"**/tests"
-	],
+	"exclude": [".expo", "scripts", "**/test", "**/dist", "**/types", "**/tests"],
 	"extends": "expo/tsconfig.base"
 }