Cleanup styles

api/src/controllers/seed/insert/shows.ts

@@ -22,7 +22,7 @@ import type { SeedMovie } from "~/models/movie";
 import type { SeedSerie } from "~/models/serie";
 import type { Original } from "~/models/utils";
 import { record } from "~/otel";
-import { getYear } from "~/utils";
+import { getYear, uniq } from "~/utils";
 import { enqueueOptImage, flushImageQueue, type ImageTask } from "../images";
 
 type Show = typeof shows.$inferInsert;
@@ -68,7 +68,11 @@ export const insertShow = record(
 					column: sql`${shows.original}['logo']`,
 				}),
 			};
-			const ret = await insertBaseShow(tx, { ...show, original: orig });
+			const ret = await insertBaseShow(tx, {
+				...show,
+				genres: uniq(show.genres),
+				original: orig,
+			});
 			if ("status" in ret) return ret;
 
 			const trans: ShowTrans[] = Object.entries(translations).map(

api/src/utils.ts

@@ -29,6 +29,10 @@ export function getFile(path: string): BunFile | S3File {
 	return Bun.file(path);
 }
 
+export function uniq<T>(a: T[]): T[] {
+	return uniqBy(a, (x) => x as string);
+}
+
 export function uniqBy<T>(a: T[], key: (val: T) => string): T[] {
 	const seen: Record<string, boolean> = {};
 	return a.filter((item) => {

front/bun.lock

@@ -10,7 +10,7 @@
         "@expo-google-fonts/sora": "^0.4.2",
         "@expo/html-elements": "^0.13.7",
         "@gorhom/portal": "^1.0.14",
-        "@legendapp/list": "^2.0.19",
+        "@legendapp/list": "^3.0.0-beta.31",
         "@material-symbols/svg-400": "^0.40.2",
         "@radix-ui/react-dropdown-menu": "^2.1.16",
         "@radix-ui/react-select": "^2.2.6",
@@ -442,7 +442,7 @@
 
     "@jridgewell/trace-mapping": ["@jridgewell/trace-mapping@0.3.31", "", { "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", "@jridgewell/sourcemap-codec": "^1.4.14" } }, "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw=="],
 
-    "@legendapp/list": ["@legendapp/list@2.0.19", "", { "dependencies": { "use-sync-external-store": "^1.5.0" }, "peerDependencies": { "react": "*", "react-native": "*" } }, "sha512-zDWg8yg0smKxxk+M7gwAbZAnf5uczohPA+IjqLSkImz7+e9ytxeT0Mq35RBO9RTKODOXfV/aIgm1uqUHLBEdmg=="],
+    "@legendapp/list": ["@legendapp/list@3.0.0-beta.31", "", { "dependencies": { "use-sync-external-store": "^1.5.0" }, "peerDependencies": { "react": "*" } }, "sha512-9KpPvwK/14QTJZVbEgDxjzRwcgSf1gkYSxw/d8GE03uasjnzCHe/fm4qrqpobDLYYt90wuemhjkE3YE18XMKEg=="],
 
     "@material-symbols/svg-400": ["@material-symbols/svg-400@0.40.2", "", {}, "sha512-e2yEgZW/OveVT1sGaZW1kkRWTPVghjsJYWy+vIea3q08Fv2o7FCYv23PESMyr5D4AaAXdM5dKWkF1e6yIm4swA=="],
 

front/package.json

@@ -20,7 +20,7 @@
 		"@expo-google-fonts/sora": "^0.4.2",
 		"@expo/html-elements": "^0.13.7",
 		"@gorhom/portal": "^1.0.14",
-		"@legendapp/list": "^2.0.19",
+		"@legendapp/list": "^3.0.0-beta.31",
 		"@material-symbols/svg-400": "^0.40.2",
 		"@radix-ui/react-dropdown-menu": "^2.1.16",
 		"@radix-ui/react-select": "^2.2.6",

front/src/components/items/item-details.tsx

@@ -121,7 +121,7 @@ export const ItemDetails = ({
 							<Chip
 								key={x ?? i}
 								label={t(`genres.${x}`)}
-								href={"#"}
+								href={`/genres/${x}`}
 								size="small"
 								className="mx-1"
 							/>

front/src/primitives/container.tsx

@@ -14,7 +14,7 @@ export const Container = <AsProps = ViewProps>({
 	return (
 		<As
 			className={cn(
-				"flex w-full self-center px-4",
+				"flex w-full flex-1 self-center px-4",
 				"sm:w-xl md:w-3xl lg:w-5xl xl:w-7xl",
 				className,
 			)}

front/src/primitives/icons.tsx

@@ -83,7 +83,7 @@ export const IconButton = <AsProps = PressableProps>({
 		<Container
 			focusRipple
 			className={cn(
-				"h-10 w-10 self-center overflow-hidden rounded-full p-2",
+				"self-center overflow-hidden rounded-full p-2",
 				"outline-0 hover:bg-gray-400/50 focus-visible:bg-gray-400/50",
 				className,
 			)}

front/src/primitives/image.tsx

@@ -89,7 +89,7 @@ export const PosterPlaceholder = ({ className, ...props }: ViewProps) => {
 			)}
 			{...props}
 		>
-			<KyooLogo style={{ width: "50%", height: "50%" }} />
+			<KyooLogo style={{ width: "50%", aspectRatio: "289.35/296.15" }} />
 		</View>
 	);
 };

front/src/query/fetch-infinite.tsx

@@ -79,7 +79,8 @@ export const InfiniteFetch = <Data, Type extends string = string>({
 			recycleItems
 			getItemType={getItemType}
 			estimatedItemSize={getItemSizeMult ? undefined : size}
-			stickyIndices={getStickyIndices?.(items ?? [])}
+			stickyHeaderIndices={getStickyIndices?.(items ?? [])}
+			// stickyHeaderConfig={{offset}}
 			getEstimatedItemSize={
 				getItemSizeMult
 					? (idx, item, type) => getItemSizeMult(item, idx, type as Type) * size

front/src/ui/details/season.tsx

@@ -41,7 +41,7 @@ export const SeasonHeader = ({
 	return (
 		<View
 			id={`season-${seasonNumber}`}
-			className={cn("m-1 flex-row", className)}
+			className={cn("m-1 w-full flex-1 flex-row", className)}
 			{...props}
 		>
 			<P className="mx-1 w-16 shrink-0 text-center text-2xl text-accent">
@@ -109,7 +109,11 @@ export const EntryList = ({
 			query={EntryList.query(slug, season)}
 			layout={EntryLine.layout}
 			Empty={<EmptyView message={t("show.episode-none")} />}
-			Divider={() => <Container as={HR} />}
+			Divider={() => (
+				<Container>
+					<HR />
+				</Container>
+			)}
 			getItemType={(item, idx) =>
 				item ? item.kind : idx === 0 ? "season" : "episode"
 			}

front/src/ui/details/serie.tsx

@@ -14,7 +14,7 @@ import { EntryList } from "./season";
 export const SvgWave = (props: ComponentProps<typeof Svg>) => {
 	// aspect-[width/height]: width/height of the svg
 	return (
-		<View className="aspect-[612/52.771] w-full">
+		<View className="ml-[-10px] aspect-612/52 w-[110%]">
 			<Svg width="100%" height="100%" viewBox="0 372.979 612 52.771" {...props}>
 				<Path d="M0,375.175c68,-5.1,136,-0.85,204,7.948c68,9.052,136,22.652,204,24.777s136,-8.075,170,-12.878l34,-4.973v35.7h-612" />
 			</Svg>
@@ -26,16 +26,18 @@ export const NextUp = (nextEntry: Entry) => {
 	const { t } = useTranslation();
 
 	return (
-		<Container className="my-4 overflow-hidden rounded-2xl bg-card py-4 hover:bg-accent">
-			<H2 className="mb-4 ml-2">{t("show.nextUp")}</H2>
-			<EntryLine
-				{...nextEntry}
-				serieSlug={null}
-				videosCount={nextEntry.videos.length}
-				watchedPercent={nextEntry.progress.percent}
-				displayNumber={entryDisplayNumber(nextEntry)}
-			/>
-		</Container>
+		<View className="m-4 flex-1">
+			<Container className="overflow-hidden rounded-2xl bg-card py-4">
+				<H2 className="mb-4 ml-2">{t("show.nextUp")}</H2>
+				<EntryLine
+					{...nextEntry}
+					serieSlug={null}
+					videosCount={nextEntry.videos.length}
+					watchedPercent={nextEntry.progress.percent}
+					displayNumber={entryDisplayNumber(nextEntry)}
+				/>
+			</Container>
+		</View>
 	);
 };
 
@@ -43,10 +45,12 @@ NextUp.Loader = () => {
 	const { t } = useTranslation();
 
 	return (
-		<Container className="my-4 overflow-hidden rounded-2xl bg-card">
-			<H2 className="ml-4">{t("show.nextUp")}</H2>
-			<EntryLine.Loader />
-		</Container>
+		<View className="m-4 flex-1">
+			<Container className="overflow-hidden rounded-2xl bg-card py-4">
+				<H2 className="ml-4">{t("show.nextUp")}</H2>
+				<EntryLine.Loader />
+			</Container>
+		</View>
 	);
 };
 

front/src/ui/player/controls/bottom-controls.tsx

@@ -98,7 +98,7 @@ const ControlButtons = ({
 		onMenuOpen: () => setMenu(true),
 		onMenuClose: () => setMenu(false),
 		className: "mr-4",
-		iconClassName: "fill-slate-200",
+		iconClassName: "fill-slate-200 dark:fill-slate-200",
 	} satisfies Partial<
 		ComponentProps<
 			typeof Menu<ComponentProps<typeof IconButton<PressableProps>>>
@@ -120,14 +120,14 @@ const ControlButtons = ({
 								href={`/watch/${previous}`}
 								replace
 								className="mr-4"
-								iconClassName="fill-slate-200"
+								iconClassName="fill-slate-200 dark:fill-slate-200"
 								{...tooltip(t("player.previous"), true)}
 							/>
 						)}
 						<PlayButton
 							player={player}
 							className="mr-4"
-							iconClassName="fill-slate-200"
+							iconClassName="fill-slate-200 dark:fill-slate-200"
 						/>
 						{next && (
 							<IconButton
@@ -136,16 +136,22 @@ const ControlButtons = ({
 								href={`/watch/${next}`}
 								replace
 								className="mr-4"
-								iconClassName="fill-slate-200"
+								iconClassName="fill-slate-200 dark:fill-slate-200"
 								{...tooltip(t("player.next"), true)}
 							/>
 						)}
 						{Platform.OS === "web" && (
-							<VolumeSlider player={player} iconClassName="fill-slate-200" />
+							<VolumeSlider
+								player={player}
+								iconClassName="fill-slate-200 dark:fill-slate-200"
+							/>
 						)}
 					</View>
 				)}
-				<ProgressText player={player} className="mx-2 text-slate-300" />
+				<ProgressText
+					player={player}
+					className="mx-2 text-slate-300 dark:text-slate-300"
+				/>
 			</View>
 			<View className="flex-row">
 				<SubtitleMenu player={player} {...menuProps} />
@@ -153,7 +159,10 @@ const ControlButtons = ({
 				<VideoMenu player={player} {...menuProps} />
 				<QualityMenu player={player} {...menuProps} />
 				{Platform.OS === "web" && (
-					<FullscreenButton className="mr-4" iconClassName="fill-slate-200" />
+					<FullscreenButton
+						className="mr-4"
+						iconClassName="fill-slate-200 dark:fill-slate-200"
+					/>
 				)}
 			</View>
 		</View>

front/src/ui/player/controls/middle-controls.tsx

@@ -32,13 +32,15 @@ export const MiddleControls = ({
 				href={previous}
 				replace
 				className={cn(
-					"mx-12 h-16 w-16 bg-gray-800/70",
+					"mx-6 bg-gray-800/70",
 					!previous && "pointer-events-none opacity-0",
 				)}
+				iconClassName="h-16 w-16"
 			/>
 			<PlayButton
 				player={player}
-				className={cn("mx-12 h-32 w-32 bg-gray-800/70")}
+				className={cn("mx-6 bg-gray-800/50")}
+				iconClassName="h-24 w-24"
 			/>
 			<IconButton
 				icon={SkipNext}
@@ -46,9 +48,10 @@ export const MiddleControls = ({
 				href={next}
 				replace
 				className={cn(
-					"mx-12 h-16 w-16 bg-gray-800/70",
+					"mx-6 bg-gray-800/70",
 					!next && "pointer-events-none opacity-0",
 				)}
+				iconClassName="h-16 w-16"
 			/>
 		</View>
 	);

front/src/ui/player/controls/touch.tsx

@@ -88,7 +88,7 @@ export const TouchControls = ({
 					// instantly hide the controls when mouse leaves the view
 					if (e.nativeEvent.pointerType === "mouse") show(false);
 				}}
-				className={cn("absolute inset-0", !shouldShow && "cursor-none")}
+				className={cn("absolute inset-0 cursor-default", !shouldShow && "cursor-none")}
 			/>
 			{shouldShow && children}
 		</View>