mirror of
https://github.com/HolgerHatGarKeineNode/einundzwanzig-nostr.git
synced 2026-01-28 07:43:18 +00:00
🎬 Add TopMeetupsScene component for Top Meetups (Scene 6)
Implements Scene 6 of the Portal presentation video, showcasing the top 5 most active Einundzwanzig meetups with animated rankings, sparkline charts, and progress bars. Features 3D perspective entrance, staggered item animations, and audio cues. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
HolgerHatGarKeineNode
@@ -4,6 +4,7 @@ import { PortalIntroScene } from "./scenes/portal/PortalIntroScene";
|
||||
import { PortalTitleScene } from "./scenes/portal/PortalTitleScene";
|
||||
import { DashboardOverviewScene } from "./scenes/portal/DashboardOverviewScene";
|
||||
import { MeetupShowcaseScene } from "./scenes/portal/MeetupShowcaseScene";
|
||||
import { TopMeetupsScene } from "./scenes/portal/TopMeetupsScene";
|
||||
|
||||
/**
|
||||
* PortalPresentation - Main composition for the Einundzwanzig Portal presentation video
|
||||
@@ -173,7 +174,7 @@ export const PortalPresentation: React.FC = () => {
|
||||
durationInFrames={sceneFrames.topMeetups.duration}
|
||||
premountFor={fps}
|
||||
>
|
||||
<PlaceholderScene name="Top Meetups" sceneNumber={6} />
|
||||
<TopMeetupsScene />
|
||||
</Sequence>
|
||||
|
||||
{/* Scene 7: Activity Feed (10s) */}
|
||||
|
||||
253
videos/src/scenes/portal/TopMeetupsScene.test.tsx
Normal file
253
videos/src/scenes/portal/TopMeetupsScene.test.tsx
Normal file
@@ -0,0 +1,253 @@
|
||||
import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
|
||||
import { render, cleanup } from "@testing-library/react";
|
||||
import { TopMeetupsScene } from "./TopMeetupsScene";
|
||||
|
||||
/* eslint-disable @remotion/warn-native-media-tag */
|
||||
// Mock Remotion hooks
|
||||
vi.mock("remotion", () => ({
|
||||
useCurrentFrame: vi.fn(() => 60),
|
||||
useVideoConfig: vi.fn(() => ({ fps: 30, width: 1920, height: 1080 })),
|
||||
interpolate: vi.fn((value, inputRange, outputRange, options) => {
|
||||
const [inMin, inMax] = inputRange;
|
||||
const [outMin, outMax] = outputRange;
|
||||
let progress = (value - inMin) / (inMax - inMin);
|
||||
if (options?.extrapolateLeft === "clamp") {
|
||||
progress = Math.max(0, progress);
|
||||
}
|
||||
if (options?.extrapolateRight === "clamp") {
|
||||
progress = Math.min(1, progress);
|
||||
}
|
||||
return outMin + progress * (outMax - outMin);
|
||||
}),
|
||||
spring: vi.fn(() => 1),
|
||||
AbsoluteFill: vi.fn(({ children, className, style }) => (
|
||||
<div data-testid="absolute-fill" className={className} style={style}>
|
||||
{children}
|
||||
</div>
|
||||
)),
|
||||
Img: vi.fn(({ src, className, style }) => (
|
||||
<img data-testid="remotion-img" src={src} className={className} style={style} />
|
||||
)),
|
||||
staticFile: vi.fn((path: string) => `/static/${path}`),
|
||||
Sequence: vi.fn(({ children, from, durationInFrames }) => (
|
||||
<div data-testid="sequence" data-from={from} data-duration={durationInFrames}>
|
||||
{children}
|
||||
</div>
|
||||
)),
|
||||
Easing: {
|
||||
out: vi.fn((fn) => fn),
|
||||
cubic: vi.fn((t: number) => t),
|
||||
},
|
||||
}));
|
||||
|
||||
// Mock @remotion/media
|
||||
vi.mock("@remotion/media", () => ({
|
||||
Audio: vi.fn(({ src, volume }) => (
|
||||
<audio data-testid="audio" src={src} data-volume={volume} />
|
||||
)),
|
||||
}));
|
||||
/* eslint-enable @remotion/warn-native-media-tag */
|
||||
|
||||
// Mock SparklineChart component
|
||||
vi.mock("../../components/SparklineChart", () => ({
|
||||
SparklineChart: vi.fn(({ data, width, height, delay, color, strokeWidth, showFill, fillOpacity, showGlow }) => (
|
||||
<svg
|
||||
data-testid="sparkline-chart"
|
||||
data-points={data.length}
|
||||
data-width={width}
|
||||
data-height={height}
|
||||
data-delay={delay}
|
||||
data-color={color}
|
||||
data-stroke-width={strokeWidth}
|
||||
data-show-fill={showFill}
|
||||
data-fill-opacity={fillOpacity}
|
||||
data-show-glow={showGlow}
|
||||
/>
|
||||
)),
|
||||
}));
|
||||
|
||||
describe("TopMeetupsScene", () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
cleanup();
|
||||
vi.resetAllMocks();
|
||||
});
|
||||
|
||||
it("renders without errors", () => {
|
||||
const { container } = render(<TopMeetupsScene />);
|
||||
expect(container).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders the AbsoluteFill container with correct classes", () => {
|
||||
const { container } = render(<TopMeetupsScene />);
|
||||
const absoluteFill = container.querySelector('[data-testid="absolute-fill"]');
|
||||
expect(absoluteFill).toBeInTheDocument();
|
||||
expect(absoluteFill).toHaveClass("bg-zinc-900");
|
||||
expect(absoluteFill).toHaveClass("overflow-hidden");
|
||||
});
|
||||
|
||||
it("renders the wallpaper background image", () => {
|
||||
const { container } = render(<TopMeetupsScene />);
|
||||
const images = container.querySelectorAll('[data-testid="remotion-img"]');
|
||||
const wallpaper = Array.from(images).find((img) =>
|
||||
img.getAttribute("src")?.includes("einundzwanzig-wallpaper.png")
|
||||
);
|
||||
expect(wallpaper).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders the section header with correct text", () => {
|
||||
const { container } = render(<TopMeetupsScene />);
|
||||
const header = container.querySelector("h1");
|
||||
expect(header).toBeInTheDocument();
|
||||
expect(header).toHaveTextContent("Top Meetups");
|
||||
expect(header).toHaveClass("text-5xl");
|
||||
expect(header).toHaveClass("font-bold");
|
||||
expect(header).toHaveClass("text-white");
|
||||
});
|
||||
|
||||
it("renders the subtitle text", () => {
|
||||
const { container } = render(<TopMeetupsScene />);
|
||||
expect(container.textContent).toContain("Die aktivsten lokalen Bitcoin-Communities");
|
||||
});
|
||||
|
||||
it("renders all five meetups", () => {
|
||||
const { container } = render(<TopMeetupsScene />);
|
||||
// Each meetup has a logo image
|
||||
const meetupLogos = container.querySelectorAll('[src*="/static/logos/"]');
|
||||
expect(meetupLogos.length).toBe(5);
|
||||
});
|
||||
|
||||
it("renders EINUNDZWANZIG Saarland as the leading meetup", () => {
|
||||
const { container } = render(<TopMeetupsScene />);
|
||||
expect(container.textContent).toContain("EINUNDZWANZIG Saarland");
|
||||
// Verify it has location
|
||||
expect(container.textContent).toContain("Saarbrücken");
|
||||
});
|
||||
|
||||
it("renders EINUNDZWANZIG Frankfurt am Main", () => {
|
||||
const { container } = render(<TopMeetupsScene />);
|
||||
expect(container.textContent).toContain("EINUNDZWANZIG Frankfurt am Main");
|
||||
expect(container.textContent).toContain("Frankfurt");
|
||||
});
|
||||
|
||||
it("renders EINUNDZWANZIG Kempten", () => {
|
||||
const { container } = render(<TopMeetupsScene />);
|
||||
expect(container.textContent).toContain("EINUNDZWANZIG Kempten");
|
||||
expect(container.textContent).toContain("Kempten");
|
||||
});
|
||||
|
||||
it("renders EINUNDZWANZIG Pfalz", () => {
|
||||
const { container } = render(<TopMeetupsScene />);
|
||||
expect(container.textContent).toContain("EINUNDZWANZIG Pfalz");
|
||||
expect(container.textContent).toContain("Pfalz");
|
||||
});
|
||||
|
||||
it("renders EINUNDZWANZIG Trier", () => {
|
||||
const { container } = render(<TopMeetupsScene />);
|
||||
expect(container.textContent).toContain("EINUNDZWANZIG Trier");
|
||||
expect(container.textContent).toContain("Trier");
|
||||
});
|
||||
|
||||
it("renders rank badges for all meetups (1-5)", () => {
|
||||
const { container } = render(<TopMeetupsScene />);
|
||||
for (let i = 1; i <= 5; i++) {
|
||||
expect(container.textContent).toContain(String(i));
|
||||
}
|
||||
});
|
||||
|
||||
it("renders sparkline charts for all meetups", () => {
|
||||
const { container } = render(<TopMeetupsScene />);
|
||||
const sparklineCharts = container.querySelectorAll('[data-testid="sparkline-chart"]');
|
||||
expect(sparklineCharts.length).toBe(5);
|
||||
});
|
||||
|
||||
it("renders sparkline charts with correct styling", () => {
|
||||
const { container } = render(<TopMeetupsScene />);
|
||||
const sparklines = container.querySelectorAll('[data-testid="sparkline-chart"]');
|
||||
const firstSparkline = sparklines[0];
|
||||
// Leading meetup should have Bitcoin orange color
|
||||
expect(firstSparkline).toHaveAttribute("data-color", "#f7931a");
|
||||
expect(firstSparkline).toHaveAttribute("data-stroke-width", "2");
|
||||
expect(firstSparkline).toHaveAttribute("data-show-fill", "true");
|
||||
expect(firstSparkline).toHaveAttribute("data-show-glow", "true");
|
||||
});
|
||||
|
||||
it("renders non-leading sparklines with gray color", () => {
|
||||
const { container } = render(<TopMeetupsScene />);
|
||||
const sparklines = container.querySelectorAll('[data-testid="sparkline-chart"]');
|
||||
// Second sparkline (index 1) should be gray
|
||||
const secondSparkline = sparklines[1];
|
||||
expect(secondSparkline).toHaveAttribute("data-color", "#71717a");
|
||||
expect(secondSparkline).toHaveAttribute("data-show-glow", "false");
|
||||
});
|
||||
|
||||
it("renders audio sequences for sound effects", () => {
|
||||
const { container } = render(<TopMeetupsScene />);
|
||||
const sequences = container.querySelectorAll('[data-testid="sequence"]');
|
||||
// 5 checkmark pops + 1 slide-in = 6 sequences
|
||||
expect(sequences.length).toBe(6);
|
||||
});
|
||||
|
||||
it("includes checkmark-pop audio for meetup entrances", () => {
|
||||
const { container } = render(<TopMeetupsScene />);
|
||||
const audioElements = container.querySelectorAll('[data-testid="audio"]');
|
||||
const checkmarkPops = Array.from(audioElements).filter((audio) =>
|
||||
audio.getAttribute("src")?.includes("checkmark-pop.mp3")
|
||||
);
|
||||
expect(checkmarkPops.length).toBe(5);
|
||||
});
|
||||
|
||||
it("includes slide-in audio for section entrance", () => {
|
||||
const { container } = render(<TopMeetupsScene />);
|
||||
const audioElements = container.querySelectorAll('[data-testid="audio"]');
|
||||
const slideInAudio = Array.from(audioElements).find((audio) =>
|
||||
audio.getAttribute("src")?.includes("slide-in.mp3")
|
||||
);
|
||||
expect(slideInAudio).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders vignette overlay with pointer-events-none", () => {
|
||||
const { container } = render(<TopMeetupsScene />);
|
||||
const vignettes = container.querySelectorAll(".pointer-events-none");
|
||||
expect(vignettes.length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
it("applies 3D perspective transform styles", () => {
|
||||
const { container } = render(<TopMeetupsScene />);
|
||||
const elements = container.querySelectorAll('[style*="perspective"]');
|
||||
expect(elements.length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
it("renders meetup logos with correct paths", () => {
|
||||
const { container } = render(<TopMeetupsScene />);
|
||||
const images = container.querySelectorAll('[data-testid="remotion-img"]');
|
||||
|
||||
// Check for Saarbrücken logo (used for Saarland meetup)
|
||||
const saarlandLogo = Array.from(images).find((img) =>
|
||||
img.getAttribute("src")?.includes("EinundzwanzigSaarbrucken.png")
|
||||
);
|
||||
expect(saarlandLogo).toBeInTheDocument();
|
||||
|
||||
// Check for Frankfurt logo
|
||||
const frankfurtLogo = Array.from(images).find((img) =>
|
||||
img.getAttribute("src")?.includes("EinundzwanzigFrankfurtAmMain.png")
|
||||
);
|
||||
expect(frankfurtLogo).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders progress bars for each meetup", () => {
|
||||
const { container } = render(<TopMeetupsScene />);
|
||||
// Progress bars have rounded-full class and bg-zinc-700/50 (container)
|
||||
const progressBarContainers = container.querySelectorAll(".bg-zinc-700\\/50.rounded-full");
|
||||
expect(progressBarContainers.length).toBe(5);
|
||||
});
|
||||
|
||||
it("renders meetups in a vertical flex layout", () => {
|
||||
const { container } = render(<TopMeetupsScene />);
|
||||
const flexCol = container.querySelector(".flex-col.gap-4");
|
||||
expect(flexCol).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
412
videos/src/scenes/portal/TopMeetupsScene.tsx
Normal file
412
videos/src/scenes/portal/TopMeetupsScene.tsx
Normal file
@@ -0,0 +1,412 @@
|
||||
import {
|
||||
AbsoluteFill,
|
||||
useCurrentFrame,
|
||||
useVideoConfig,
|
||||
interpolate,
|
||||
spring,
|
||||
Img,
|
||||
staticFile,
|
||||
Sequence,
|
||||
} from "remotion";
|
||||
import { Audio } from "@remotion/media";
|
||||
import { SparklineChart } from "../../components/SparklineChart";
|
||||
|
||||
// Spring configurations
|
||||
const SNAPPY = { damping: 15, stiffness: 80 };
|
||||
const BOUNCY = { damping: 12 };
|
||||
|
||||
// Stagger delay between meetup items (in frames)
|
||||
const MEETUP_STAGGER_DELAY = 15;
|
||||
|
||||
// Top meetups data with sparkline growth data
|
||||
const TOP_MEETUPS_DATA = [
|
||||
{
|
||||
name: "EINUNDZWANZIG Saarland",
|
||||
logoFile: "EinundzwanzigSaarbrucken.png",
|
||||
userCount: 26,
|
||||
location: "Saarbrücken",
|
||||
sparklineData: [5, 8, 10, 12, 14, 16, 18, 20, 22, 24, 25, 26],
|
||||
rank: 1,
|
||||
},
|
||||
{
|
||||
name: "EINUNDZWANZIG Frankfurt am Main",
|
||||
logoFile: "EinundzwanzigFrankfurtAmMain.png",
|
||||
userCount: 26,
|
||||
location: "Frankfurt",
|
||||
sparklineData: [4, 7, 10, 13, 15, 17, 19, 21, 23, 24, 25, 26],
|
||||
rank: 2,
|
||||
},
|
||||
{
|
||||
name: "EINUNDZWANZIG Kempten",
|
||||
logoFile: "EinundzwanzigKempten.png",
|
||||
userCount: 20,
|
||||
location: "Kempten",
|
||||
sparklineData: [3, 5, 7, 9, 11, 13, 15, 16, 17, 18, 19, 20],
|
||||
rank: 3,
|
||||
},
|
||||
{
|
||||
name: "EINUNDZWANZIG Pfalz",
|
||||
logoFile: "EinundzwanzigRheinhessen.png",
|
||||
userCount: 17,
|
||||
location: "Pfalz",
|
||||
sparklineData: [2, 4, 6, 8, 9, 11, 12, 13, 14, 15, 16, 17],
|
||||
rank: 4,
|
||||
},
|
||||
{
|
||||
name: "EINUNDZWANZIG Trier",
|
||||
logoFile: "EinundzwanzigTrier.png",
|
||||
userCount: 15,
|
||||
location: "Trier",
|
||||
sparklineData: [2, 3, 5, 6, 8, 9, 10, 11, 12, 13, 14, 15],
|
||||
rank: 5,
|
||||
},
|
||||
];
|
||||
|
||||
// Maximum count for calculating relative bar widths
|
||||
const MAX_USER_COUNT = Math.max(...TOP_MEETUPS_DATA.map((m) => m.userCount));
|
||||
|
||||
/**
|
||||
* TopMeetupsScene - Scene 6: Top Meetups (10 seconds / 300 frames @ 30fps)
|
||||
*
|
||||
* Animation sequence:
|
||||
* 1. 3D perspective entrance with smooth transition
|
||||
* 2. Section header animates in with fade + translateY
|
||||
* 3. Meetups appear sequentially with staggered entrance:
|
||||
* - Rank badge bounces in
|
||||
* - Logo and meetup info slide in from left
|
||||
* - SparklineChart draws next to each meetup
|
||||
* - User counts animate up
|
||||
* 4. Leading meetup gets highlighted with glow effect
|
||||
* 5. Audio: checkmark-pop.mp3 plays per meetup entrance
|
||||
*/
|
||||
export const TopMeetupsScene: React.FC = () => {
|
||||
const frame = useCurrentFrame();
|
||||
const { fps } = useVideoConfig();
|
||||
|
||||
// 3D Perspective entrance animation (0-60 frames)
|
||||
const perspectiveSpring = spring({
|
||||
frame,
|
||||
fps,
|
||||
config: { damping: 20, stiffness: 60 },
|
||||
});
|
||||
|
||||
const perspectiveX = interpolate(perspectiveSpring, [0, 1], [20, 0]);
|
||||
const perspectiveScale = interpolate(perspectiveSpring, [0, 1], [0.9, 1]);
|
||||
const perspectiveOpacity = interpolate(perspectiveSpring, [0, 1], [0, 1]);
|
||||
|
||||
// Header entrance animation (delayed)
|
||||
const headerDelay = Math.floor(0.3 * fps);
|
||||
const headerSpring = spring({
|
||||
frame: frame - headerDelay,
|
||||
fps,
|
||||
config: SNAPPY,
|
||||
});
|
||||
const headerOpacity = interpolate(headerSpring, [0, 1], [0, 1]);
|
||||
const headerY = interpolate(headerSpring, [0, 1], [-40, 0]);
|
||||
|
||||
// Subtitle animation (slightly more delayed)
|
||||
const subtitleDelay = Math.floor(0.5 * fps);
|
||||
const subtitleSpring = spring({
|
||||
frame: frame - subtitleDelay,
|
||||
fps,
|
||||
config: SNAPPY,
|
||||
});
|
||||
const subtitleOpacity = interpolate(subtitleSpring, [0, 1], [0, 1]);
|
||||
const subtitleY = interpolate(subtitleSpring, [0, 1], [20, 0]);
|
||||
|
||||
// Base delay for meetup items
|
||||
const meetupBaseDelay = Math.floor(1 * fps);
|
||||
|
||||
// Subtle glow pulse for leading meetup
|
||||
const glowIntensity = interpolate(
|
||||
Math.sin(frame * 0.05),
|
||||
[-1, 1],
|
||||
[0.4, 0.8]
|
||||
);
|
||||
|
||||
return (
|
||||
<AbsoluteFill className="bg-zinc-900 overflow-hidden">
|
||||
{/* Audio: checkmark-pop for each meetup entrance */}
|
||||
{TOP_MEETUPS_DATA.map((_, index) => (
|
||||
<Sequence
|
||||
key={`audio-${index}`}
|
||||
from={meetupBaseDelay + index * MEETUP_STAGGER_DELAY}
|
||||
durationInFrames={Math.floor(0.5 * fps)}
|
||||
>
|
||||
<Audio src={staticFile("sfx/checkmark-pop.mp3")} volume={0.4} />
|
||||
</Sequence>
|
||||
))}
|
||||
|
||||
{/* Audio: slide-in for section entrance */}
|
||||
<Sequence from={headerDelay} durationInFrames={Math.floor(1 * fps)}>
|
||||
<Audio src={staticFile("sfx/slide-in.mp3")} volume={0.5} />
|
||||
</Sequence>
|
||||
|
||||
{/* Wallpaper Background */}
|
||||
<div className="absolute inset-0">
|
||||
<Img
|
||||
src={staticFile("einundzwanzig-wallpaper.png")}
|
||||
className="absolute inset-0 w-full h-full object-cover"
|
||||
style={{ opacity: 0.1 }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Dark gradient overlay */}
|
||||
<div
|
||||
className="absolute inset-0"
|
||||
style={{
|
||||
background:
|
||||
"radial-gradient(circle at 40% 50%, transparent 0%, rgba(24, 24, 27, 0.5) 40%, rgba(24, 24, 27, 0.95) 100%)",
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* 3D Perspective Container */}
|
||||
<div
|
||||
className="absolute inset-0"
|
||||
style={{
|
||||
transform: `perspective(1200px) rotateX(${perspectiveX}deg) scale(${perspectiveScale})`,
|
||||
transformOrigin: "center center",
|
||||
opacity: perspectiveOpacity,
|
||||
}}
|
||||
>
|
||||
{/* Main Content */}
|
||||
<div className="absolute inset-0 flex flex-col items-center justify-center px-20">
|
||||
{/* Section Header */}
|
||||
<div
|
||||
className="text-center mb-10"
|
||||
style={{
|
||||
opacity: headerOpacity,
|
||||
transform: `translateY(${headerY}px)`,
|
||||
}}
|
||||
>
|
||||
<h1 className="text-5xl font-bold text-white mb-3">Top Meetups</h1>
|
||||
<p
|
||||
className="text-xl text-zinc-400"
|
||||
style={{
|
||||
opacity: subtitleOpacity,
|
||||
transform: `translateY(${subtitleY}px)`,
|
||||
}}
|
||||
>
|
||||
Die aktivsten lokalen Bitcoin-Communities
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Meetups List */}
|
||||
<div className="w-full max-w-4xl">
|
||||
<div className="flex flex-col gap-4">
|
||||
{TOP_MEETUPS_DATA.map((meetup, index) => (
|
||||
<MeetupRow
|
||||
key={meetup.name}
|
||||
meetup={meetup}
|
||||
maxCount={MAX_USER_COUNT}
|
||||
delay={meetupBaseDelay + index * MEETUP_STAGGER_DELAY}
|
||||
glowIntensity={glowIntensity}
|
||||
isLeading={index === 0}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Vignette overlay */}
|
||||
<div
|
||||
className="absolute inset-0 pointer-events-none"
|
||||
style={{
|
||||
boxShadow: "inset 0 0 200px 50px rgba(0, 0, 0, 0.6)",
|
||||
}}
|
||||
/>
|
||||
</AbsoluteFill>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* Meetup row with rank, logo, info, progress bar, and sparkline
|
||||
*/
|
||||
type MeetupRowProps = {
|
||||
meetup: {
|
||||
name: string;
|
||||
logoFile: string;
|
||||
userCount: number;
|
||||
location: string;
|
||||
sparklineData: number[];
|
||||
rank: number;
|
||||
};
|
||||
maxCount: number;
|
||||
delay: number;
|
||||
glowIntensity: number;
|
||||
isLeading: boolean;
|
||||
};
|
||||
|
||||
const MeetupRow: React.FC<MeetupRowProps> = ({
|
||||
meetup,
|
||||
maxCount,
|
||||
delay,
|
||||
glowIntensity,
|
||||
isLeading,
|
||||
}) => {
|
||||
const frame = useCurrentFrame();
|
||||
const { fps } = useVideoConfig();
|
||||
|
||||
const adjustedFrame = Math.max(0, frame - delay);
|
||||
|
||||
// Row entrance spring
|
||||
const rowSpring = spring({
|
||||
frame: adjustedFrame,
|
||||
fps,
|
||||
config: SNAPPY,
|
||||
});
|
||||
|
||||
const rowOpacity = interpolate(rowSpring, [0, 1], [0, 1]);
|
||||
const rowX = interpolate(rowSpring, [0, 1], [-80, 0]);
|
||||
|
||||
// Rank badge bounce
|
||||
const rankSpring = spring({
|
||||
frame: adjustedFrame - 5,
|
||||
fps,
|
||||
config: BOUNCY,
|
||||
});
|
||||
const rankScale = interpolate(rankSpring, [0, 1], [0, 1]);
|
||||
|
||||
// User count animation
|
||||
const countSpring = spring({
|
||||
frame: adjustedFrame,
|
||||
fps,
|
||||
config: { damping: 18, stiffness: 70 },
|
||||
durationInFrames: 45,
|
||||
});
|
||||
const displayCount = Math.round(countSpring * meetup.userCount);
|
||||
|
||||
// Progress bar animation
|
||||
const barProgress = interpolate(rowSpring, [0, 1], [0, meetup.userCount / maxCount]);
|
||||
|
||||
// Sparkline delay (appears slightly after the bar)
|
||||
const sparklineDelay = delay + 25;
|
||||
|
||||
// Dynamic glow for leading meetup
|
||||
const leadingGlow = isLeading
|
||||
? `0 0 ${40 * glowIntensity}px rgba(247, 147, 26, 0.4), 0 0 ${20 * glowIntensity}px rgba(247, 147, 26, 0.3)`
|
||||
: "none";
|
||||
|
||||
return (
|
||||
<div
|
||||
className="flex items-center gap-4 p-4 rounded-xl"
|
||||
style={{
|
||||
opacity: rowOpacity,
|
||||
transform: `translateX(${rowX}px)`,
|
||||
backgroundColor: isLeading
|
||||
? "rgba(247, 147, 26, 0.1)"
|
||||
: "rgba(39, 39, 42, 0.6)",
|
||||
border: isLeading
|
||||
? "1px solid rgba(247, 147, 26, 0.3)"
|
||||
: "1px solid rgba(63, 63, 70, 0.5)",
|
||||
boxShadow: leadingGlow,
|
||||
}}
|
||||
>
|
||||
{/* Rank Badge */}
|
||||
<div
|
||||
className="flex-shrink-0 w-12 h-12 rounded-full flex items-center justify-center font-bold text-xl"
|
||||
style={{
|
||||
backgroundColor: isLeading ? "#f7931a" : "rgba(63, 63, 70, 0.8)",
|
||||
color: isLeading ? "#18181b" : "#a1a1aa",
|
||||
transform: `scale(${rankScale})`,
|
||||
boxShadow: isLeading
|
||||
? `0 0 ${15 * glowIntensity}px rgba(247, 147, 26, 0.5)`
|
||||
: "none",
|
||||
}}
|
||||
>
|
||||
{meetup.rank}
|
||||
</div>
|
||||
|
||||
{/* Logo */}
|
||||
<div
|
||||
className="flex-shrink-0 w-14 h-14 rounded-lg overflow-hidden bg-zinc-800 flex items-center justify-center"
|
||||
style={{
|
||||
boxShadow: isLeading
|
||||
? `0 0 ${10 * glowIntensity}px rgba(247, 147, 26, 0.3)`
|
||||
: "none",
|
||||
}}
|
||||
>
|
||||
<Img
|
||||
src={staticFile(`logos/${meetup.logoFile}`)}
|
||||
style={{
|
||||
width: 48,
|
||||
height: 48,
|
||||
objectFit: "contain",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Meetup Info + Progress Bar */}
|
||||
<div className="flex-1 min-w-0">
|
||||
{/* Name and Location */}
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<span
|
||||
className="font-bold text-lg truncate"
|
||||
style={{
|
||||
color: isLeading ? "#f7931a" : "#ffffff",
|
||||
}}
|
||||
>
|
||||
{meetup.name}
|
||||
</span>
|
||||
<span className="text-zinc-500 text-sm flex-shrink-0">
|
||||
• {meetup.location}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Progress Bar */}
|
||||
<div className="h-2 rounded-full bg-zinc-700/50 overflow-hidden">
|
||||
<div
|
||||
className="h-full rounded-full"
|
||||
style={{
|
||||
width: `${barProgress * 100}%`,
|
||||
backgroundColor: isLeading ? "#f7931a" : "#71717a",
|
||||
boxShadow: isLeading
|
||||
? `0 0 ${10 * glowIntensity}px rgba(247, 147, 26, 0.5)`
|
||||
: "none",
|
||||
transition: "width 0.1s ease-out",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* User Count */}
|
||||
<div
|
||||
className="flex-shrink-0 text-right font-bold tabular-nums"
|
||||
style={{
|
||||
color: isLeading ? "#f7931a" : "#a1a1aa",
|
||||
fontSize: "1.5rem",
|
||||
fontFamily: "Inconsolata, monospace",
|
||||
minWidth: 50,
|
||||
textShadow: isLeading
|
||||
? `0 0 ${10 * glowIntensity}px rgba(247, 147, 26, 0.5)`
|
||||
: "none",
|
||||
}}
|
||||
>
|
||||
{displayCount}
|
||||
</div>
|
||||
|
||||
{/* Sparkline Chart */}
|
||||
<div
|
||||
className="flex-shrink-0 rounded-lg bg-zinc-800/50 p-2"
|
||||
style={{
|
||||
boxShadow: isLeading
|
||||
? `0 0 ${10 * glowIntensity}px rgba(247, 147, 26, 0.2)`
|
||||
: "none",
|
||||
}}
|
||||
>
|
||||
<SparklineChart
|
||||
data={meetup.sparklineData}
|
||||
width={100}
|
||||
height={36}
|
||||
delay={sparklineDelay}
|
||||
color={isLeading ? "#f7931a" : "#71717a"}
|
||||
strokeWidth={2}
|
||||
showFill={true}
|
||||
fillOpacity={0.2}
|
||||
showGlow={isLeading}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user