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

View File

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

View File

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

View File

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

View File

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