From fc590d959cfa8bcaf87fc97904ffad227c435cb9 Mon Sep 17 00:00:00 2001 From: Francisco Pessano Date: Sat, 12 Oct 2024 18:58:07 -0300 Subject: [PATCH] Add Swiper component and AlbumImage for enhanced album display --- package.json | 1 + pnpm-lock.yaml | 27 ++++--- src/app/_components/album-image.tsx | 98 ++++++++++++++++++++++ src/app/_components/album-showcase.tsx | 108 ++++++++----------------- src/app/_components/swiper.css | 9 +++ src/app/_components/swiper.tsx | 26 ++++++ 6 files changed, 185 insertions(+), 84 deletions(-) create mode 100644 src/app/_components/album-image.tsx create mode 100644 src/app/_components/swiper.css create mode 100644 src/app/_components/swiper.tsx diff --git a/package.json b/package.json index 3277cc0..e472b33 100644 --- a/package.json +++ b/package.json @@ -31,6 +31,7 @@ "server-only": "^0.0.1", "spotify-web-api-node": "^5.0.2", "superjson": "^2.2.1", + "swiper": "^11.1.14", "zod": "^3.23.3" }, "devDependencies": { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e358b40..b30ebc3 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -56,6 +56,9 @@ importers: superjson: specifier: ^2.2.1 version: 2.2.1 + swiper: + specifier: ^11.1.14 + version: 11.1.14 zod: specifier: ^3.23.3 version: 3.23.8 @@ -1731,6 +1734,10 @@ packages: resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==} engines: {node: '>= 0.4'} + swiper@11.1.14: + resolution: {integrity: sha512-VbQLQXC04io6AoAjIUWuZwW4MSYozkcP9KjLdrsG/00Q/yiwvhz9RQyt0nHXV10hi9NVnDNy1/wv7Dzq1lkOCQ==} + engines: {node: '>= 4.7.0'} + tailwindcss@3.4.13: resolution: {integrity: sha512-KqjHOJKogOUt5Bs752ykCeiwvi0fKVkr5oqsFNt/8px/tA8scFPIlkygsf6jXrfCqGHz7VflA6+yytWuM+XhFw==} engines: {node: '>=14.0.0'} @@ -2565,8 +2572,8 @@ snapshots: '@typescript-eslint/parser': 8.8.1(eslint@8.57.1)(typescript@5.6.3) eslint: 8.57.1 eslint-import-resolver-node: 0.3.9 - eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@8.57.1) - eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1) + eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1))(eslint@8.57.1) + eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1) eslint-plugin-jsx-a11y: 6.10.0(eslint@8.57.1) eslint-plugin-react: 7.37.1(eslint@8.57.1) eslint-plugin-react-hooks: 4.6.2(eslint@8.57.1) @@ -2585,37 +2592,37 @@ snapshots: transitivePeerDependencies: - supports-color - eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@8.57.1): + eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1))(eslint@8.57.1): dependencies: '@nolyfill/is-core-module': 1.0.39 debug: 4.3.7 enhanced-resolve: 5.17.1 eslint: 8.57.1 - eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1) + eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1) fast-glob: 3.3.2 get-tsconfig: 4.8.1 is-bun-module: 1.2.1 is-glob: 4.0.3 optionalDependencies: - eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1) + eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1) transitivePeerDependencies: - '@typescript-eslint/parser' - eslint-import-resolver-node - eslint-import-resolver-webpack - supports-color - eslint-module-utils@2.12.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1): + eslint-module-utils@2.12.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1): dependencies: debug: 3.2.7 optionalDependencies: '@typescript-eslint/parser': 8.8.1(eslint@8.57.1)(typescript@5.6.3) eslint: 8.57.1 eslint-import-resolver-node: 0.3.9 - eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@8.57.1) + eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1))(eslint@8.57.1) transitivePeerDependencies: - supports-color - eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1): + eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1): dependencies: '@rtsao/scc': 1.1.0 array-includes: 3.1.8 @@ -2626,7 +2633,7 @@ snapshots: doctrine: 2.1.0 eslint: 8.57.1 eslint-import-resolver-node: 0.3.9 - eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1) + eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1) hasown: 2.0.2 is-core-module: 2.15.1 is-glob: 4.0.3 @@ -3635,6 +3642,8 @@ snapshots: supports-preserve-symlinks-flag@1.0.0: {} + swiper@11.1.14: {} + tailwindcss@3.4.13: dependencies: '@alloc/quick-lru': 5.2.0 diff --git a/src/app/_components/album-image.tsx b/src/app/_components/album-image.tsx new file mode 100644 index 0000000..b0a9a5b --- /dev/null +++ b/src/app/_components/album-image.tsx @@ -0,0 +1,98 @@ +import React from "react"; +import Tilt from "react-parallax-tilt"; + +interface AlbumImageProps { + showSpookyImage: boolean; + imageSource: string; + spookyImageSource: string | null; + album: { name: string }; + generateSpookyImageData: string | null; + lastSpookyImageLoaded: number; + place: number; + spookyImageLoaded: boolean; + onImageLoad: () => void; +} + +export function AlbumImage({ + showSpookyImage, + imageSource, + spookyImageSource, + album, + generateSpookyImageData, + lastSpookyImageLoaded, + place, + spookyImageLoaded, + onImageLoad, +}: AlbumImageProps) { + return ( + + {album.name} + {spookyImageSource && + (generateSpookyImageData + ? lastSpookyImageLoaded >= place || + lastSpookyImageLoaded + 1 === place + : true) && ( + {album.name} { + onImageLoad(); + }} + /> + )} + {showSpookyImage && !spookyImageLoaded && ( +
+
+ {(() => { + if (generateSpookyImageData) { + if (lastSpookyImageLoaded < place - 1) { + return ( + <> + {" "} +

On queue...

+ + ); + } + return ( + <> + +

Generating...

+ + ); + } else { + return ( + <> + +

Getting image...

+ + ); + } + })()} +
+
+ )} + + ); +} + +export default AlbumImage; diff --git a/src/app/_components/album-showcase.tsx b/src/app/_components/album-showcase.tsx index e406b14..98648fd 100644 --- a/src/app/_components/album-showcase.tsx +++ b/src/app/_components/album-showcase.tsx @@ -1,12 +1,14 @@ "use client"; -import { use, useEffect, useState } from "react"; -import Tilt from "react-parallax-tilt"; +import { useEffect, useState } from "react"; import { TrackByAlbum } from "./spotify-data"; import { api } from "@/trpc/react"; import { quantum } from "ldrs"; import { ring2 } from "ldrs"; import { pulsar } from "ldrs"; +import Swiper from "./swiper"; +import { SwiperSlide } from "swiper/react"; +import AlbumImage from "./album-image"; pulsar.register(); ring2.register(); @@ -104,80 +106,36 @@ export default function AlbumShowcase({ >
setShowSpookyImage(!showSpookyImage)} - className="cursor-pointer" + className="cursor-pointer *:select-none" > - - {album.name} - {spookyImageSource && - (generateSpookyImage.data - ? lastSpookyImageLoaded >= place || - lastSpookyImageLoaded + 1 === place - : true) && ( - {album.name} { - onImageLoad(); - }} - /> - )} - {showSpookyImage && !spookyImageLoaded && ( -
-
- {(() => { - if (generateSpookyImage.data) { - if (lastSpookyImageLoaded < place - 1) { - return ( - <> - {" "} -

On queue...

- - ); - } - return ( - <> - -

Generating...

- - ); - } else { - return ( - <> - -

Getting image...

- - ); - } - })()} -
-
- )} - + + + + + + + +

diff --git a/src/app/_components/swiper.css b/src/app/_components/swiper.css new file mode 100644 index 0000000..6df010f --- /dev/null +++ b/src/app/_components/swiper.css @@ -0,0 +1,9 @@ +.swiper-slide { + display: flex; + align-items: center; + justify-content: center; + border-radius: 18px; + font-size: 22px; + font-weight: bold; + color: #fff; +} diff --git a/src/app/_components/swiper.tsx b/src/app/_components/swiper.tsx new file mode 100644 index 0000000..6ecd581 --- /dev/null +++ b/src/app/_components/swiper.tsx @@ -0,0 +1,26 @@ +"use client"; +import React, { useRef, useState } from "react"; +import { Swiper as SwiperReact, SwiperSlide } from "swiper/react"; +import "swiper/css"; +import "swiper/css/effect-cards"; +import "./swiper.css"; +import { EffectCards } from "swiper/modules"; + +export function Swiper({ children }: { children: React.ReactNode }) { + return ( + + {children} + + ); +} + +export default Swiper;