fix: make posters a bit smaller

This commit is contained in:
Fredrik Burmester
2024-08-20 19:18:51 +02:00
parent 5e081751a4
commit eed4df6a8a
5 changed files with 17 additions and 15 deletions

View File

@@ -237,7 +237,7 @@ export default function search() {
renderItem={(item) => (
<TouchableOpacity
key={item.Id}
className="flex flex-col w-32"
className="flex flex-col w-28"
onPress={() => router.push(`/items/${item.Id}`)}
>
<MoviePoster item={item} key={item.Id} />
@@ -262,7 +262,7 @@ export default function search() {
<TouchableOpacity
key={item.Id}
onPress={() => router.push(`/series/${item.Id}`)}
className="flex flex-col w-32"
className="flex flex-col w-28"
>
<SeriesPoster item={item} key={item.Id} />
<Text numberOfLines={2} className="mt-2">
@@ -286,7 +286,7 @@ export default function search() {
<TouchableOpacity
key={item.Id}
onPress={() => router.push(`/items/${item.Id}`)}
className="flex flex-col w-48"
className="flex flex-col w-44"
>
<ContinueWatchingPoster item={item} />
<ItemCardText item={item} />
@@ -305,7 +305,7 @@ export default function search() {
<TouchableItemRouter
item={item}
key={item.Id}
className="flex flex-col w-32"
className="flex flex-col w-28"
>
<AlbumCover id={item.Id} />
<ItemCardText item={item} />
@@ -324,7 +324,7 @@ export default function search() {
<TouchableItemRouter
item={item}
key={item.Id}
className="flex flex-col w-32"
className="flex flex-col w-28"
>
<AlbumCover id={item.Id} />
<ItemCardText item={item} />
@@ -343,7 +343,7 @@ export default function search() {
<TouchableItemRouter
item={item}
key={item.Id}
className="flex flex-col w-32"
className="flex flex-col w-28"
>
<AlbumCover id={item.AlbumId} />
<ItemCardText item={item} />

View File

@@ -21,23 +21,23 @@ const ContinueWatchingPoster: React.FC<ContinueWatchingPosterProps> = ({
getPrimaryImageUrl({
api,
item,
quality: 70,
width: 300,
quality: 90,
width: 176 * 2,
}),
[item],
[item]
);
const [progress, setProgress] = useState(
item.UserData?.PlayedPercentage || 0,
item.UserData?.PlayedPercentage || 0
);
if (!url)
return (
<View className="w-48 aspect-video border border-neutral-800"></View>
<View className="w-44 aspect-video border border-neutral-800"></View>
);
return (
<View className="w-48 relative aspect-video rounded-lg overflow-hidden border border-neutral-800">
<View className="w-44 relative aspect-video rounded-lg overflow-hidden border border-neutral-800">
<Image
key={item.Id}
id={item.Id}

View File

@@ -41,7 +41,7 @@ export const ScrollingCollectionList: React.FC<Props> = ({
key={index}
item={item}
className={`flex flex-col
${orientation === "vertical" ? "w-32" : "w-48"}
${orientation === "vertical" ? "w-28" : "w-44"}
`}
>
<View>

View File

@@ -13,6 +13,7 @@ import { InfiniteHorizontalScroll } from "../common/InfiniteHorrizontalScroll";
import { TouchableItemRouter } from "../common/TouchableItemRouter";
import MoviePoster from "../posters/MoviePoster";
import { useCallback } from "react";
import { ItemCardText } from "../ItemCardText";
interface Props extends ViewProps {
collection: BaseItemDto;
@@ -56,11 +57,12 @@ export const MediaListSection: React.FC<Props> = ({ collection, ...props }) => {
key={index}
item={item}
className={`flex flex-col
${"w-32"}
${"w-28"}
`}
>
<View>
<MoviePoster item={item} />
<ItemCardText item={item} />
</View>
</TouchableItemRouter>
)}

View File

@@ -52,7 +52,7 @@ export const NextUp: React.FC<{ seriesId: string }> = ({ seriesId }) => {
router.push(`/(auth)/items/${item.Id}`);
}}
key={item.Id}
className="flex flex-col w-32"
className="flex flex-col w-44"
>
<ContinueWatchingPoster item={item} />
<ItemCardText item={item} />