mirror of
https://github.com/streamyfin/streamyfin.git
synced 2026-01-15 23:59:08 +00:00
feat: more media list stuff
This commit is contained in:
Fredrik Burmester
171
components/home/LargeMovieCarousel.tsx
Normal file
171
components/home/LargeMovieCarousel.tsx
Normal file
@@ -0,0 +1,171 @@
|
||||
import { View, ViewProps } from "react-native";
|
||||
import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
|
||||
import { getItemsApi } from "@jellyfin/sdk/lib/utils/api";
|
||||
import { useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
|
||||
import { useRouter } from "expo-router";
|
||||
import { useAtom } from "jotai";
|
||||
import { useSettings } from "@/utils/atoms/settings";
|
||||
import { Dimensions } from "react-native";
|
||||
import { useSharedValue } from "react-native-reanimated";
|
||||
import Carousel, {
|
||||
ICarouselInstance,
|
||||
Pagination,
|
||||
} from "react-native-reanimated-carousel";
|
||||
import React, { useMemo } from "react";
|
||||
import { Image } from "expo-image";
|
||||
import { getLogoImageUrlById } from "@/utils/jellyfin/image/getLogoImageUrlById";
|
||||
import { getBackdropUrl } from "@/utils/jellyfin/image/getBackdropUrl";
|
||||
import { TouchableItemRouter } from "../common/TouchableItemRouter";
|
||||
|
||||
interface Props extends ViewProps {}
|
||||
|
||||
export const LargeMovieCarousel: React.FC<Props> = ({ ...props }) => {
|
||||
const router = useRouter();
|
||||
const queryClient = useQueryClient();
|
||||
const [settings] = useSettings();
|
||||
|
||||
const ref = React.useRef<ICarouselInstance>(null);
|
||||
const progress = useSharedValue<number>(0);
|
||||
|
||||
const [api] = useAtom(apiAtom);
|
||||
const [user] = useAtom(userAtom);
|
||||
|
||||
const onPressPagination = (index: number) => {
|
||||
ref.current?.scrollTo({
|
||||
/**
|
||||
* Calculate the difference between the current index and the target index
|
||||
* to ensure that the carousel scrolls to the nearest index
|
||||
*/
|
||||
count: index - progress.value,
|
||||
animated: true,
|
||||
});
|
||||
};
|
||||
|
||||
const { data: mediaListCollection } = useQuery<string | null>({
|
||||
queryKey: ["mediaListCollection", user?.Id],
|
||||
queryFn: async () => {
|
||||
if (!api || !user?.Id) return null;
|
||||
|
||||
const response = await getItemsApi(api).getItems({
|
||||
userId: user.Id,
|
||||
tags: ["medialist", "promoted"],
|
||||
recursive: true,
|
||||
fields: ["Tags"],
|
||||
includeItemTypes: ["BoxSet"],
|
||||
});
|
||||
|
||||
const id = response.data.Items?.find((c) => c.Name === "sf_carousel")?.Id;
|
||||
return id || null;
|
||||
},
|
||||
enabled: !!api && !!user?.Id && settings?.usePopularPlugin === true,
|
||||
staleTime: 0,
|
||||
});
|
||||
|
||||
const { data: popularItems, isLoading: isLoadingPopular } = useQuery<
|
||||
BaseItemDto[]
|
||||
>({
|
||||
queryKey: ["popular", user?.Id],
|
||||
queryFn: async () => {
|
||||
if (!api || !user?.Id || !mediaListCollection) return [];
|
||||
|
||||
const response = await getItemsApi(api).getItems({
|
||||
userId: user.Id,
|
||||
parentId: mediaListCollection,
|
||||
limit: 10,
|
||||
});
|
||||
|
||||
return response.data.Items || [];
|
||||
},
|
||||
enabled: !!api && !!user?.Id && !!mediaListCollection,
|
||||
staleTime: 0,
|
||||
});
|
||||
|
||||
const width = Dimensions.get("screen").width;
|
||||
|
||||
if (!popularItems) return null;
|
||||
|
||||
return (
|
||||
<View className="flex flex-col items-center" {...props}>
|
||||
<Carousel
|
||||
autoPlay={true}
|
||||
autoPlayInterval={2000}
|
||||
loop={true}
|
||||
ref={ref}
|
||||
width={width}
|
||||
height={204}
|
||||
data={popularItems}
|
||||
onProgressChange={progress}
|
||||
renderItem={({ item, index }) => <RenderItem item={item} />}
|
||||
/>
|
||||
<Pagination.Basic
|
||||
progress={progress}
|
||||
data={popularItems}
|
||||
dotStyle={{
|
||||
backgroundColor: "rgba(255,255,255,0.2)",
|
||||
borderRadius: 50,
|
||||
}}
|
||||
activeDotStyle={{
|
||||
backgroundColor: "rgba(255,255,255,0.8)",
|
||||
borderRadius: 50,
|
||||
}}
|
||||
containerStyle={{ gap: 5, marginTop: 12 }}
|
||||
onPress={onPressPagination}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
const RenderItem: React.FC<{ item: BaseItemDto }> = ({ item }) => {
|
||||
const [api] = useAtom(apiAtom);
|
||||
|
||||
const uri = useMemo(() => {
|
||||
if (!api) return null;
|
||||
|
||||
return getBackdropUrl({
|
||||
api,
|
||||
item,
|
||||
quality: 90,
|
||||
width: 1000,
|
||||
});
|
||||
}, [api, item]);
|
||||
|
||||
const logoUri = useMemo(() => {
|
||||
if (!api) return null;
|
||||
return getLogoImageUrlById({ api, item, height: 100 });
|
||||
}, [item]);
|
||||
|
||||
if (!uri || !logoUri) return null;
|
||||
|
||||
return (
|
||||
<TouchableItemRouter item={item}>
|
||||
<View className="px-4">
|
||||
<View className="relative flex justify-center rounded-2xl overflow-hidden border border-neutral-800">
|
||||
<Image
|
||||
source={{
|
||||
uri,
|
||||
}}
|
||||
style={{
|
||||
width: "100%",
|
||||
height: 200,
|
||||
borderRadius: 16,
|
||||
overflow: "hidden",
|
||||
}}
|
||||
/>
|
||||
<View className="absolute bottom-0 left-0 w-full h-24 p-4 flex items-center">
|
||||
<Image
|
||||
source={{
|
||||
uri: logoUri,
|
||||
}}
|
||||
style={{
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
resizeMode: "contain",
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</TouchableItemRouter>
|
||||
);
|
||||
};
|
||||
56
components/medialists/MediaListSection.tsx
Normal file
56
components/medialists/MediaListSection.tsx
Normal file
@@ -0,0 +1,56 @@
|
||||
import { View, ViewProps } from "react-native";
|
||||
import { Text } from "@/components/common/Text";
|
||||
import settings from "@/app/(auth)/settings";
|
||||
import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
|
||||
import { getItemsApi } from "@jellyfin/sdk/lib/utils/api";
|
||||
import { useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { ScrollingCollectionList } from "../home/ScrollingCollectionList";
|
||||
import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
|
||||
import { useSettings } from "@/utils/atoms/settings";
|
||||
import { useRouter } from "expo-router";
|
||||
import { useAtom } from "jotai";
|
||||
import { useState } from "react";
|
||||
|
||||
interface Props extends ViewProps {
|
||||
collection: BaseItemDto;
|
||||
}
|
||||
|
||||
export const MediaListSection: React.FC<Props> = ({ collection, ...props }) => {
|
||||
const router = useRouter();
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const [api] = useAtom(apiAtom);
|
||||
const [user] = useAtom(userAtom);
|
||||
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [settings, _] = useSettings();
|
||||
|
||||
const { data: popularItems, isLoading: isLoadingPopular } = useQuery<
|
||||
BaseItemDto[]
|
||||
>({
|
||||
queryKey: ["popular", user?.Id],
|
||||
queryFn: async () => {
|
||||
if (!api || !user?.Id || !collection.Id) return [];
|
||||
|
||||
const response = await getItemsApi(api).getItems({
|
||||
userId: user.Id,
|
||||
parentId: collection.Id,
|
||||
limit: 10,
|
||||
});
|
||||
|
||||
return response.data.Items || [];
|
||||
},
|
||||
enabled: !!api && !!user?.Id && !!collection.Id,
|
||||
staleTime: 0,
|
||||
});
|
||||
|
||||
return (
|
||||
<ScrollingCollectionList
|
||||
title={collection.Name || ""}
|
||||
data={popularItems}
|
||||
loading={isLoadingPopular}
|
||||
disabled={!collection.Id}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
};
|
||||
@@ -1,11 +1,50 @@
|
||||
import { Linking, Switch, TouchableOpacity, View } from "react-native";
|
||||
import {
|
||||
ActivityIndicator,
|
||||
Linking,
|
||||
Switch,
|
||||
TouchableOpacity,
|
||||
View,
|
||||
} from "react-native";
|
||||
import { Text } from "../common/Text";
|
||||
import { useSettings } from "@/utils/atoms/settings";
|
||||
import * as DropdownMenu from "zeego/dropdown-menu";
|
||||
import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
|
||||
import { getItemsApi } from "@jellyfin/sdk/lib/utils/api";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { useAtom } from "jotai";
|
||||
import { useState } from "react";
|
||||
|
||||
export const SettingToggles: React.FC = () => {
|
||||
const [settings, updateSettings] = useSettings();
|
||||
|
||||
const [api] = useAtom(apiAtom);
|
||||
const [user] = useAtom(userAtom);
|
||||
|
||||
const {
|
||||
data: mediaListCollections,
|
||||
isLoading: isLoadingMediaListCollections,
|
||||
} = useQuery({
|
||||
queryKey: ["mediaListCollections", user?.Id],
|
||||
queryFn: async () => {
|
||||
if (!api || !user?.Id) return [];
|
||||
|
||||
const response = await getItemsApi(api).getItems({
|
||||
userId: user.Id,
|
||||
tags: ["medialist", "promoted"],
|
||||
recursive: true,
|
||||
fields: ["Tags"],
|
||||
includeItemTypes: ["BoxSet"],
|
||||
});
|
||||
|
||||
const ids =
|
||||
response.data.Items?.filter((c) => c.Name !== "sf_carousel") ?? [];
|
||||
|
||||
return ids;
|
||||
},
|
||||
enabled: !!api && !!user?.Id && settings?.usePopularPlugin === true,
|
||||
staleTime: 0,
|
||||
});
|
||||
|
||||
return (
|
||||
<View className="flex flex-col rounded-xl mb-4 overflow-hidden border-neutral-800 divide-y-2 divide-solid divide-neutral-800 ">
|
||||
<View className="flex flex-row items-center justify-between bg-neutral-900 p-4">
|
||||
@@ -36,25 +75,76 @@ export const SettingToggles: React.FC = () => {
|
||||
}
|
||||
/>
|
||||
</View>
|
||||
<View className="flex flex-row items-center justify-between bg-neutral-900 p-4">
|
||||
<View className="flex flex-col">
|
||||
<Text className="font-semibold">Use popular lists plugin</Text>
|
||||
<Text className="text-xs opacity-50">Made by: lostb1t</Text>
|
||||
<TouchableOpacity
|
||||
onPress={() => {
|
||||
Linking.openURL(
|
||||
"https://github.com/lostb1t/jellyfin-plugin-media-lists",
|
||||
);
|
||||
}}
|
||||
>
|
||||
<Text className="text-xs text-purple-600">More info</Text>
|
||||
</TouchableOpacity>
|
||||
<View className="flex flex-col">
|
||||
<View className="flex flex-row items-center justify-between bg-neutral-900 p-4">
|
||||
<View className="flex flex-col">
|
||||
<Text className="font-semibold">Use popular lists plugin</Text>
|
||||
<Text className="text-xs opacity-50">Made by: lostb1t</Text>
|
||||
<TouchableOpacity
|
||||
onPress={() => {
|
||||
Linking.openURL(
|
||||
"https://github.com/lostb1t/jellyfin-plugin-media-lists",
|
||||
);
|
||||
}}
|
||||
>
|
||||
<Text className="text-xs text-purple-600">More info</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
<Switch
|
||||
value={settings?.usePopularPlugin}
|
||||
onValueChange={(value) =>
|
||||
updateSettings({ usePopularPlugin: value })
|
||||
}
|
||||
/>
|
||||
</View>
|
||||
<Switch
|
||||
value={settings?.usePopularPlugin}
|
||||
onValueChange={(value) => updateSettings({ usePopularPlugin: value })}
|
||||
/>
|
||||
{settings?.usePopularPlugin && (
|
||||
<View className="flex flex-col py-2 bg-neutral-900">
|
||||
{mediaListCollections?.map((mlc) => (
|
||||
<View
|
||||
key={mlc.Id}
|
||||
className="flex flex-row items-center justify-between bg-neutral-900 px-4 py-2"
|
||||
>
|
||||
<View className="flex flex-col">
|
||||
<Text className="font-semibold">{mlc.Name}</Text>
|
||||
</View>
|
||||
<Switch
|
||||
value={settings?.mediaListCollectionIds?.includes(mlc.Id!)}
|
||||
onValueChange={(value) => {
|
||||
if (!settings.mediaListCollectionIds) {
|
||||
updateSettings({
|
||||
mediaListCollectionIds: [mlc.Id!],
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
updateSettings({
|
||||
mediaListCollectionIds:
|
||||
settings?.mediaListCollectionIds.includes(mlc.Id!)
|
||||
? settings?.mediaListCollectionIds.filter(
|
||||
(id) => id !== mlc.Id,
|
||||
)
|
||||
: [...settings?.mediaListCollectionIds, mlc.Id!],
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
))}
|
||||
{isLoadingMediaListCollections && (
|
||||
<View className="flex flex-row items-center justify-center bg-neutral-900 p-4">
|
||||
<ActivityIndicator size="small" color="#fff" />
|
||||
</View>
|
||||
)}
|
||||
{mediaListCollections?.length === 0 && (
|
||||
<View className="flex flex-row items-center justify-between bg-neutral-900 p-4">
|
||||
<Text className="text-xs opacity-50">
|
||||
No collections found. Add some in Jellyfin.
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
|
||||
<View className="flex flex-row space-x-2 items-center justify-between bg-neutral-900 p-4">
|
||||
<View className="flex flex-col shrink">
|
||||
<Text className="font-semibold">Force direct play</Text>
|
||||
|
||||
Reference in New Issue
Block a user