mirror of
https://github.com/sussy-code/smov.git
synced 2026-03-11 17:55:35 +00:00
Update some discover styles
This commit is contained in:
Pas
parent
d58e32b1d9
commit
eed1dd1177
3 changed files with 61 additions and 89 deletions
|
|
@ -10,7 +10,6 @@ interface LazyMediaCarouselProps {
|
|||
category?: Category | null;
|
||||
genre?: Genre | null;
|
||||
mediaType: "movie" | "tv";
|
||||
movieWidth: string;
|
||||
isMobile: boolean;
|
||||
carouselRefs: React.MutableRefObject<{
|
||||
[key: string]: HTMLDivElement | null;
|
||||
|
|
@ -21,7 +20,6 @@ export function LazyMediaCarousel({
|
|||
category,
|
||||
genre,
|
||||
mediaType,
|
||||
movieWidth,
|
||||
isMobile,
|
||||
carouselRefs,
|
||||
}: LazyMediaCarouselProps) {
|
||||
|
|
@ -57,7 +55,6 @@ export function LazyMediaCarousel({
|
|||
medias={medias}
|
||||
category={categoryName}
|
||||
isTVShow={mediaType === "tv"}
|
||||
movieWidth={movieWidth}
|
||||
isMobile={isMobile}
|
||||
carouselRefs={carouselRefs}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -7,7 +7,6 @@ interface MediaCarouselProps {
|
|||
medias: Media[];
|
||||
category: string;
|
||||
isTVShow: boolean;
|
||||
movieWidth: string;
|
||||
isMobile: boolean;
|
||||
carouselRefs: React.MutableRefObject<{
|
||||
[key: string]: HTMLDivElement | null;
|
||||
|
|
@ -18,7 +17,6 @@ export function MediaCarousel({
|
|||
medias,
|
||||
category,
|
||||
isTVShow,
|
||||
movieWidth,
|
||||
isMobile,
|
||||
carouselRefs,
|
||||
}: MediaCarouselProps) {
|
||||
|
|
@ -65,76 +63,70 @@ export function MediaCarousel({
|
|||
const displayCategory = getDisplayCategory(category, isTVShow);
|
||||
|
||||
return (
|
||||
<div className="relative overflow-hidden carousel-container">
|
||||
<h2 className="ml-2 md:ml-8 mt-2 text-2xl cursor-default font-bold text-white md:text-2xl mx-auto pl-5 text-balance">
|
||||
<>
|
||||
<h2 className="ml-2 md:ml-8 mt-2 text-2xl cursor-default font-bold text-white md:text-2xl mx-auto pl-5 text-balance z-[99]">
|
||||
{displayCategory}
|
||||
</h2>
|
||||
|
||||
<div
|
||||
id={`carousel-${categorySlug}`}
|
||||
className="flex whitespace-nowrap pt-0 pb-4 overflow-auto scrollbar rounded-xl overflow-y-hidden"
|
||||
ref={(el) => {
|
||||
carouselRefs.current[categorySlug] = el;
|
||||
}}
|
||||
onWheel={handleWheel}
|
||||
>
|
||||
{medias
|
||||
.filter(
|
||||
(media, index, self) =>
|
||||
index ===
|
||||
self.findIndex(
|
||||
(m) => m.id === media.id && m.title === media.title,
|
||||
),
|
||||
)
|
||||
.slice(0, 25)
|
||||
.map((media, index, array) => (
|
||||
<div
|
||||
onContextMenu={(e: React.MouseEvent<HTMLDivElement>) =>
|
||||
e.preventDefault()
|
||||
}
|
||||
key={media.id}
|
||||
className={`max-h-200 relative mt-3 transition-transform duration-[0.45s] hover:scale-105 ${
|
||||
index === 0
|
||||
? "md:ml-[6.5rem] mr-[0.2em] md:mr-[0.5em]"
|
||||
: index === array.length - 1
|
||||
? "md:mr-[6.5rem] ml-[0.2em] md:ml-[0.5em]"
|
||||
: "mx-[0.2em] md:mx-[0.5em]"
|
||||
} group cursor-pointer rounded-xl relative p-[0.65em] bg-background-main transition-colors duration-300 bg-transparent`}
|
||||
style={{
|
||||
flex: `0 0 ${movieWidth}`,
|
||||
userSelect: "none",
|
||||
aspectRatio: "2/3",
|
||||
width: movieWidth,
|
||||
height: "auto",
|
||||
}}
|
||||
>
|
||||
<MediaCard
|
||||
linkable
|
||||
<div className="relative overflow-hidden carousel-container">
|
||||
<div
|
||||
id={`carousel-${categorySlug}`}
|
||||
className="flex whitespace-nowrap pt-0 pb-4 overflow-auto scrollbar rounded-xl overflow-y-hidden"
|
||||
ref={(el) => {
|
||||
carouselRefs.current[categorySlug] = el;
|
||||
}}
|
||||
onWheel={handleWheel}
|
||||
>
|
||||
{medias
|
||||
.filter(
|
||||
(media, index, self) =>
|
||||
index ===
|
||||
self.findIndex(
|
||||
(m) => m.id === media.id && m.title === media.title,
|
||||
),
|
||||
)
|
||||
.slice(0, 25)
|
||||
.map((media, index, array) => (
|
||||
<div
|
||||
onContextMenu={(e: React.MouseEvent<HTMLDivElement>) =>
|
||||
e.preventDefault()
|
||||
}
|
||||
key={media.id}
|
||||
media={{
|
||||
id: media.id.toString(),
|
||||
title: media.title || media.name || "",
|
||||
poster: `https://image.tmdb.org/t/p/w342${media.poster_path}`,
|
||||
type: isTVShow ? "show" : "movie",
|
||||
year: isTVShow
|
||||
? media.first_air_date
|
||||
? parseInt(media.first_air_date.split("-")[0], 10)
|
||||
: undefined
|
||||
: media.release_date
|
||||
? parseInt(media.release_date.split("-")[0], 10)
|
||||
: undefined,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
className={`relative mt-4 group cursor-pointer user-select-none rounded-xl p-2 bg-background-main transition-colors duration-300 bg-transparent min-w-[200px] max-w-[200px] max-h-[500px] ${
|
||||
index === 0
|
||||
? "ml-6 md:ml-[6.5rem] mr-[0.2em] md:mr-[0.5em]"
|
||||
: index === array.length - 1
|
||||
? "mr-6 md:mr-[6.5rem] ml-[0.2em] md:ml-[0.5em]"
|
||||
: "mx-2 md:mx-3"
|
||||
}`}
|
||||
>
|
||||
<MediaCard
|
||||
linkable
|
||||
key={media.id}
|
||||
media={{
|
||||
id: media.id.toString(),
|
||||
title: media.title || media.name || "",
|
||||
poster: `https://image.tmdb.org/t/p/w342${media.poster_path}`,
|
||||
type: isTVShow ? "show" : "movie",
|
||||
year: isTVShow
|
||||
? media.first_air_date
|
||||
? parseInt(media.first_air_date.split("-")[0], 10)
|
||||
: undefined
|
||||
: media.release_date
|
||||
? parseInt(media.release_date.split("-")[0], 10)
|
||||
: undefined,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{!isMobile && (
|
||||
<CarouselNavButtons
|
||||
categorySlug={categorySlug}
|
||||
carouselRefs={carouselRefs}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
{!isMobile && (
|
||||
<CarouselNavButtons
|
||||
categorySlug={categorySlug}
|
||||
carouselRefs={carouselRefs}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -54,9 +54,6 @@ export function DiscoverContent() {
|
|||
name: "",
|
||||
id: "",
|
||||
});
|
||||
const [movieWidth, setMovieWidth] = useState(
|
||||
window.innerWidth < 600 ? "150px" : "200px",
|
||||
);
|
||||
const [providerMovies, setProviderMovies] = useState<Movie[]>([]);
|
||||
const [providerTVShows, setProviderTVShows] = useState<any[]>([]);
|
||||
|
||||
|
|
@ -118,14 +115,6 @@ export function DiscoverContent() {
|
|||
fetchGenres();
|
||||
}, [isMoviesTab]);
|
||||
|
||||
useEffect(() => {
|
||||
const handleResize = () => {
|
||||
setMovieWidth(window.innerWidth < 600 ? "150px" : "200px");
|
||||
};
|
||||
window.addEventListener("resize", handleResize);
|
||||
return () => window.removeEventListener("resize", handleResize);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
let countdownInterval: NodeJS.Timeout;
|
||||
if (countdown !== null && countdown > 0) {
|
||||
|
|
@ -204,7 +193,6 @@ export function DiscoverContent() {
|
|||
medias={providerMovies}
|
||||
category={selectedProvider.name}
|
||||
isTVShow={false}
|
||||
movieWidth={movieWidth}
|
||||
isMobile={isMobile}
|
||||
carouselRefs={carouselRefs}
|
||||
/>
|
||||
|
|
@ -216,7 +204,6 @@ export function DiscoverContent() {
|
|||
key={category.name}
|
||||
category={category}
|
||||
mediaType="movie"
|
||||
movieWidth={movieWidth}
|
||||
isMobile={isMobile}
|
||||
carouselRefs={carouselRefs}
|
||||
/>
|
||||
|
|
@ -228,7 +215,6 @@ export function DiscoverContent() {
|
|||
key={genre.id}
|
||||
genre={genre}
|
||||
mediaType="movie"
|
||||
movieWidth={movieWidth}
|
||||
isMobile={isMobile}
|
||||
carouselRefs={carouselRefs}
|
||||
/>
|
||||
|
|
@ -247,7 +233,6 @@ export function DiscoverContent() {
|
|||
medias={providerTVShows}
|
||||
category={selectedProvider.name}
|
||||
isTVShow
|
||||
movieWidth={movieWidth}
|
||||
isMobile={isMobile}
|
||||
carouselRefs={carouselRefs}
|
||||
/>
|
||||
|
|
@ -259,7 +244,6 @@ export function DiscoverContent() {
|
|||
key={category.name}
|
||||
category={category}
|
||||
mediaType="tv"
|
||||
movieWidth={movieWidth}
|
||||
isMobile={isMobile}
|
||||
carouselRefs={carouselRefs}
|
||||
/>
|
||||
|
|
@ -271,7 +255,6 @@ export function DiscoverContent() {
|
|||
key={genre.id}
|
||||
genre={genre}
|
||||
mediaType="tv"
|
||||
movieWidth={movieWidth}
|
||||
isMobile={isMobile}
|
||||
carouselRefs={carouselRefs}
|
||||
/>
|
||||
|
|
|
|||
Loading…
Reference in a new issue