diff --git a/components/ItemContent.tsx b/components/ItemContent.tsx
index 92dba1a7..3afdca8b 100644
--- a/components/ItemContent.tsx
+++ b/components/ItemContent.tsx
@@ -43,6 +43,7 @@ import { Chromecast } from "./Chromecast";
import { ItemHeader } from "./ItemHeader";
import { Loader } from "./Loader";
import { MediaSourceSelector } from "./MediaSourceSelector";
+import { MoreMoviesWithActor } from "./MoreMoviesWithActor";
export const ItemContent: React.FC<{ id: string }> = React.memo(({ id }) => {
const [api] = useAtom(apiAtom);
@@ -362,6 +363,19 @@ export const ItemContent: React.FC<{ id: string }> = React.memo(({ id }) => {
+ {item?.People && item.People.length > 0 && (
+
+ {item.People.slice(0, 3).map((person) => (
+
+ ))}
+
+ )}
+
{item?.Type === "Episode" && (
)}
diff --git a/components/MoreMoviesWithActor.tsx b/components/MoreMoviesWithActor.tsx
new file mode 100644
index 00000000..9a2a044f
--- /dev/null
+++ b/components/MoreMoviesWithActor.tsx
@@ -0,0 +1,100 @@
+import React from "react";
+import { View, ViewProps } from "react-native";
+import { Text } from "@/components/common/Text";
+import { HorizontalScroll } from "@/components/common/HorrizontalScroll";
+import { TouchableItemRouter } from "@/components/common/TouchableItemRouter";
+import MoviePoster from "@/components/posters/MoviePoster";
+import { ItemCardText } from "@/components/ItemCardText";
+import { useAtom } from "jotai";
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import { getItemsApi } from "@jellyfin/sdk/lib/utils/api";
+import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import { useQuery } from "@tanstack/react-query";
+import { getUserItemData } from "@/utils/jellyfin/user-library/getUserItemData";
+
+interface Props extends ViewProps {
+ actorId: string;
+ currentItem: BaseItemDto;
+}
+
+export const MoreMoviesWithActor: React.FC = ({
+ actorId,
+ currentItem,
+ ...props
+}) => {
+ const [api] = useAtom(apiAtom);
+ const [user] = useAtom(userAtom);
+
+ const { data: actor } = useQuery({
+ queryKey: ["actor", actorId],
+ queryFn: async () => {
+ if (!api || !user?.Id) return null;
+ return await getUserItemData({
+ api,
+ userId: user.Id,
+ itemId: actorId,
+ });
+ },
+ enabled: !!api && !!user?.Id && !!actorId,
+ });
+
+ const { data: items, isLoading } = useQuery({
+ queryKey: ["actor", "movies", actorId, currentItem.Id],
+ queryFn: async () => {
+ if (!api || !user?.Id) return [];
+ const response = await getItemsApi(api).getItems({
+ userId: user.Id,
+ personIds: [actorId],
+ limit: 20,
+ sortOrder: ["Descending"],
+ includeItemTypes: ["Movie", "Series"],
+ recursive: true,
+ fields: ["ParentId", "PrimaryImageAspectRatio"],
+ sortBy: ["PremiereDate"],
+ collapseBoxSetItems: false,
+ excludeItemIds: [currentItem.SeriesId || "", currentItem.Id || ""],
+ });
+
+ // Remove duplicates based on item ID
+ const uniqueItems =
+ response.data.Items?.reduce((acc, current) => {
+ const x = acc.find((item) => item.Id === current.Id);
+ if (!x) {
+ return acc.concat([current]);
+ } else {
+ return acc;
+ }
+ }, [] as BaseItemDto[]) || [];
+
+ return uniqueItems;
+ },
+ enabled: !!api && !!user?.Id && !!actorId,
+ });
+
+ if (items?.length === 0) return null;
+
+ return (
+
+
+ More with {actor?.Name}
+
+ (
+
+
+
+
+
+
+ )}
+ />
+
+ );
+};