Add movie watch percent progress bar

back/src/Kyoo.Core/Controllers/Repositories/WatchStatusRepository.cs

@@ -233,6 +233,7 @@ public class WatchStatusRepository : IWatchStatusRepository
 			MovieId = movieId,
 			Status = status,
 			WatchedTime = watchedTime,
+			WatchedPercent = percent,
 			AddedDate = DateTime.UtcNow,
 			PlayedDate = status == WatchStatus.Completed ? DateTime.UtcNow : null,
 		};

front/packages/primitives/src/image/index.tsx

@@ -64,6 +64,7 @@ export const ImageBackground = <AsProps = ViewProps,>({
 	imageStyle,
 	forcedLoading,
 	hideLoad = true,
+	contrast = "dark",
 	layout,
 	...asProps
 }: {
@@ -73,12 +74,13 @@ export const ImageBackground = <AsProps = ViewProps,>({
 	containerStyle?: YoshikiEnhanced<ViewStyle>;
 	imageStyle?: YoshikiEnhanced<ImageStyle>;
 	hideLoad?: boolean;
+	contrast?: "light" | "dark" | "user";
 	layout?: ImageLayout;
 } & AsProps &
 	Props) => {
 	const Container = as ?? View;
 	return (
-		<ContrastArea contrastText>
+		<ContrastArea contrastText mode={contrast}>
 			{({ css, theme }) => (
 				<Container
 					{...(css(

front/packages/ui/src/browse/grid.tsx

@@ -65,13 +65,42 @@ export const ItemWatchStatus = ({
 	);
 };
 
+export const ItemProgress = ({ watchPercent }: { watchPercent: number }) => {
+	const { css } = useYoshiki("episodebox");
+
+	return (
+		<>
+			<View
+				{...css({
+					backgroundColor: (theme) => theme.user.overlay0,
+					width: percent(100),
+					height: ts(0.5),
+					position: "absolute",
+					bottom: 0,
+				})}
+			/>
+			<View
+				{...css({
+					backgroundColor: (theme) => theme.user.accent,
+					width: percent(watchPercent),
+					height: ts(0.5),
+					position: "absolute",
+					bottom: 0,
+				})}
+			/>
+		</>
+	);
+};
+
 export const ItemGrid = ({
 	href,
 	name,
+	type,
 	subtitle,
 	poster,
 	isLoading,
 	watchStatus,
+	watchPercent,
 	unseenEpisodesCount,
 	...props
 }: WithLoading<{
@@ -80,6 +109,8 @@ export const ItemGrid = ({
 	subtitle?: string;
 	poster?: KyooImage | null;
 	watchStatus: WatchStatusV | null;
+	watchPercent: number | null;
+	type: "movie" | "show" | "collection";
 	unseenEpisodesCount: number | null;
 }> &
 	Stylable<"text">) => {
@@ -122,6 +153,7 @@ export const ItemGrid = ({
 				{...(css("poster") as { style: ImageStyle })}
 			>
 				<ItemWatchStatus watchStatus={watchStatus} unseenEpisodesCount={unseenEpisodesCount} />
+				{type === "movie" && watchPercent && <ItemProgress watchPercent={watchPercent} />}
 			</PosterBackground>
 			<Skeleton>
 				{isLoading || (

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

@@ -51,6 +51,9 @@ export const itemMap = (
 		poster: item.poster,
 		thumbnail: item.thumbnail,
 		watchStatus: item.kind !== ItemKind.Collection ? item.watchStatus?.status ?? null : null,
+		type: item.kind.toLowerCase() as any,
+		watchPercent:
+			item.kind !== ItemKind.Collection ? item.watchStatus?.watchedPercent ?? null : null,
 		unseenEpisodesCount:
 			item.kind === ItemKind.Show
 				? item.watchStatus?.unseenEpisodesCount ?? item.episodesCount!

front/packages/ui/src/details/episode.tsx

@@ -34,6 +34,7 @@ import { ImageStyle, View } from "react-native";
 import { Layout, WithLoading } from "../fetch";
 import { percent, rem, Stylable, Theme, useYoshiki } from "yoshiki/native";
 import { KyooImage, WatchStatusV } from "@kyoo/models";
+import { ItemProgress } from "../browse/grid";
 
 export const episodeDisplayNumber = (
 	episode: {
@@ -112,26 +113,7 @@ export const EpisodeBox = ({
 				{...(css("poster") as any)}
 			>
 				{(watchedPercent || watchedStatus === WatchStatusV.Completed) && (
-					<>
+					<ItemProgress watchPercent={watchedPercent ?? 100} />
-						<View
-							{...css({
-								backgroundColor: (theme) => theme.overlay0,
-								width: percent(100),
-								height: ts(0.5),
-								position: "absolute",
-								bottom: 0,
-							})}
-						/>
-						<View
-							{...css({
-								backgroundColor: (theme) => theme.accent,
-								width: percent(watchedPercent ?? 100),
-								height: ts(0.5),
-								position: "absolute",
-								bottom: 0,
-							})}
-						/>
-					</>
 				)}
 			</ImageBackground>
 			<Skeleton {...css({ width: percent(50) })}>

front/packages/ui/src/home/news.tsx

@@ -49,6 +49,9 @@ export const NewsList = () => {
 							name={x.name!}
 							subtitle={!x.isLoading ? getDisplayDate(x) : undefined}
 							poster={x.poster}
+							watchStatus={x.watchStatus?.status || null}
+							watchPercent={x.watchStatus?.watchedPercent || null}
+							type={"movie"}
 						/>
 					) : (
 						<EpisodeBox

front/packages/ui/src/home/watchlist.tsx

@@ -72,6 +72,9 @@ export const WatchlistList = () => {
 							name={x.name!}
 							subtitle={!x.isLoading ? getDisplayDate(x) : undefined}
 							poster={x.poster}
+							watchStatus={x.watchStatus?.status || null}
+							watchPercent={x.watchStatus?.watchedPercent || null}
+							type={x.kind === WatchlistKind.Movie ? "movie" : "show"}
 						/>
 					);
 				}}