Skip to content

Commit 36ea5eb

Browse files
68p68p
committed
fix: artist images locked to correct size, fix missing placeholder image with new carousel
1 parent 8804737 commit 36ea5eb

File tree

2 files changed

+23
-18
lines changed

2 files changed

+23
-18
lines changed

‎src/components/common/navigation/SwiperCarousel.jsx‎

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
import { useRef } from "react";
22
import { Swiper, SwiperSlide } from "swiper/react";
3-
import { Virtual } from "swiper/modules";
43
import "swiper/css";
5-
import "swiper/css/virtual";
64
import {
75
useSwiperNavigation,
86
setDragging,
@@ -39,17 +37,12 @@ export default function SwiperCarousel({
3937

4038
return (
4139
<Swiper
42-
modules={[Virtual]}
4340
allowTouchMove
4441
slidesPerView={1.5}
4542
spaceBetween={40}
4643
slidesOffsetBefore={8}
4744
slidesOffsetAfter={8}
4845
speed={TRANSITION_DURATION_MS}
49-
virtual={{
50-
addSlidesBefore: 2,
51-
addSlidesAfter: 1,
52-
}}
5346
touchStartPreventDefault={false}
5447
onSwiper={(swiper) => (swiperRef.current = swiper)}
5548
onTouchStart={() => {
@@ -73,12 +66,11 @@ export default function SwiperCarousel({
7366
}
7467
}}
7568
className="pt-2"
76-
className="pt-2"
7769
style={{ overflow: "visible" }}
7870
>
7971
{items.map((item, index) => (
80-
<SwiperSlide key={keyExtractor(item)} virtualIndex={index}>
81-
{() => renderItem(item, index, index === selectedIndex)}
72+
<SwiperSlide key={keyExtractor(item)}>
73+
{renderItem(item, index, index === selectedIndex)}
8274
</SwiperSlide>
8375
))}
8476
</Swiper>

‎src/pages/Home.jsx‎

Lines changed: 21 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -242,7 +242,10 @@ export default function Home({
242242
.fill()
243243
.map((_, index) => (
244244
<div key={`loading-${index}`} className="flex-shrink-0">
245-
<div className="mt-10 w-[280px] aspect-square rounded-[12px] drop-shadow-[0_8px_5px_rgba(0,0,0,0.25)] bg-white/10 animate-pulse w-[280px] h-[280px]"></div>
245+
<div
246+
style={{ width: 280, height: 280 }}
247+
className="mt-10 aspect-square rounded-[12px] drop-shadow-[0_8px_5px_rgba(0,0,0,0.25)] bg-white/10 animate-pulse w-[280px] h-[280px]"
248+
></div>
246249
<div className="mt-2 h-9 w-48 bg-white/10 rounded animate-pulse"></div>
247250
<div className="mt-2 h-8 w-40 bg-white/10 rounded animate-pulse"></div>
248251
</div>
@@ -268,7 +271,8 @@ export default function Home({
268271
className={`pl-2 transition-transform duration-200 ease-out ${isActive ? "scale-105" : ""}`}
269272
>
270273
<div
271-
className="mt-10 w-[280px] aspect-square rounded-[12px] drop-shadow-[0_8px_5px_rgba(0,0,0,0.25)]"
274+
style={{ width: 280, height: 280 }}
275+
className="mt-10 aspect-square rounded-[12px] drop-shadow-[0_8px_5px_rgba(0,0,0,0.25)]"
272276
onClick={() =>
273277
album.type !== "local-track" &&
274278
onOpenContent(
@@ -369,7 +373,8 @@ export default function Home({
369373
className={`pl-2 transition-transform duration-200 ease-out ${isActive ? "scale-105" : ""}`}
370374
>
371375
<div
372-
className="mt-10 w-[280px] aspect-square rounded-[12px] drop-shadow-[0_8px_5px_rgba(0,0,0,0.25)]"
376+
style={{ width: 280, height: 280 }}
377+
className="mt-10 aspect-square rounded-[12px] drop-shadow-[0_8px_5px_rgba(0,0,0,0.25)]"
373378
onClick={() => onOpenContent("liked", "liked-songs")}
374379
>
375380
<img
@@ -411,7 +416,8 @@ export default function Home({
411416
className={`pl-2 transition-transform duration-200 ease-out ${isActive ? "scale-105" : ""}`}
412417
>
413418
<div
414-
className="mt-10 w-[280px] aspect-square rounded-[12px] drop-shadow-[0_8px_5px_rgba(0,0,0,0.25)]"
419+
style={{ width: 280, height: 280 }}
420+
className="mt-10 aspect-square rounded-[12px] drop-shadow-[0_8px_5px_rgba(0,0,0,0.25)]"
415421
onClick={() => onOpenContent(playlist.id, "playlist")}
416422
>
417423
{playlist?.images?.length > 0 ? (
@@ -516,6 +522,7 @@ export default function Home({
516522
className={`pl-2 transition-transform duration-200 ease-out ${isActive ? "scale-105" : ""}`}
517523
>
518524
<div
525+
style={{ width: 280, height: 280 }}
519526
className="mt-10 aspect-square rounded-full drop-shadow-[0_8px_5px_rgba(0,0,0,0.25)]"
520527
onClick={() => onOpenContent(artist.id, "artist")}
521528
>
@@ -594,7 +601,8 @@ export default function Home({
594601
className={`pl-2 transition-transform duration-200 ease-out ${isActive ? "scale-105" : ""}`}
595602
>
596603
<div
597-
className="mt-10 w-[280px] aspect-square rounded-[12px] drop-shadow-[0_8px_5px_rgba(0,0,0,0.25)] bg-white/10"
604+
style={{ width: 280, height: 280 }}
605+
className="mt-10 aspect-square rounded-[12px] drop-shadow-[0_8px_5px_rgba(0,0,0,0.25)] bg-white/10"
598606
onClick={() => {
599607
if (isPlayingDJ()) {
600608
setActiveSection("nowPlaying");
@@ -647,7 +655,8 @@ export default function Home({
647655
className={`pl-2 transition-transform duration-200 ease-out ${isActive ? "scale-105" : ""}`}
648656
>
649657
<div
650-
className="mt-10 w-[280px] aspect-square rounded-[12px] drop-shadow-[0_8px_5px_rgba(0,0,0,0.25)]"
658+
style={{ width: 280, height: 280 }}
659+
className="mt-10 aspect-square rounded-[12px] drop-shadow-[0_8px_5px_rgba(0,0,0,0.25)]"
651660
onClick={() => onOpenContent(mix.id, "mix")}
652661
>
653662
{mix.type === "static" && mix.images?.[0]?.url ? (
@@ -721,7 +730,10 @@ export default function Home({
721730
.fill()
722731
.map((_, index) => (
723732
<div key={`loading-${index}`} className="flex-shrink-0">
724-
<div className="mt-10 w-[280px] aspect-square rounded-[12px] drop-shadow-[0_8px_5px_rgba(0,0,0,0.25)] bg-white/10 animate-pulse w-[280px] h-[280px]"></div>
733+
<div
734+
style={{ width: 280, height: 280 }}
735+
className="mt-10 aspect-square rounded-[12px] drop-shadow-[0_8px_5px_rgba(0,0,0,0.25)] bg-white/10 animate-pulse w-[280px] h-[280px]"
736+
></div>
725737
<div className="mt-2 h-9 w-48 bg-white/10 rounded animate-pulse"></div>
726738
<div className="mt-2 h-8 w-40 bg-white/10 rounded animate-pulse"></div>
727739
</div>
@@ -749,7 +761,8 @@ export default function Home({
749761
className={`pl-2 transition-transform duration-200 ease-out ${isActive ? "scale-105" : ""}`}
750762
>
751763
<div
752-
className="mt-10 w-[280px] aspect-square rounded-[12px] drop-shadow-[0_8px_5px_rgba(0,0,0,0.25)]"
764+
style={{ width: 280, height: 280 }}
765+
className="mt-10 aspect-square rounded-[12px] drop-shadow-[0_8px_5px_rgba(0,0,0,0.25)]"
753766
onClick={() => onOpenContent(show.id, "show")}
754767
>
755768
{show.images?.length > 0 ? (

0 commit comments

Comments
 (0)