mirror of
https://github.com/HolgerHatGarKeineNode/einundzwanzig-nostr.git
synced 2026-01-28 07:43:18 +00:00
🎬 Add ActivityFeedScene component for Activity Feed (Scene 7)
Implements the Activity Feed scene for the Einundzwanzig Portal presentation video. Features include: - 3D perspective entrance animation with smooth transitions - "Aktivitäten" header with pulsing LIVE indicator - 4 activity items with staggered slide-in animations: - EINUNDZWANZIG Kempten (vor 13 Stunden) - EINUNDZWANZIG Darmstadt (vor 21 Stunden) - EINUNDZWANZIG Vulkaneifel (vor 2 Tagen) - BitcoinWalk Würzburg (vor 2 Tagen) - "Neuer Termin" badge with bounce animation - Audio: button-click.mp3 per item, slide-in.mp3 for entrance - Uses existing ActivityItem component for consistent styling - Comprehensive test suite with 24 tests Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
HolgerHatGarKeineNode
@@ -5,6 +5,7 @@ import { PortalTitleScene } from "./scenes/portal/PortalTitleScene";
|
||||
import { DashboardOverviewScene } from "./scenes/portal/DashboardOverviewScene";
|
||||
import { MeetupShowcaseScene } from "./scenes/portal/MeetupShowcaseScene";
|
||||
import { TopMeetupsScene } from "./scenes/portal/TopMeetupsScene";
|
||||
import { ActivityFeedScene } from "./scenes/portal/ActivityFeedScene";
|
||||
|
||||
/**
|
||||
* PortalPresentation - Main composition for the Einundzwanzig Portal presentation video
|
||||
@@ -183,7 +184,7 @@ export const PortalPresentation: React.FC = () => {
|
||||
durationInFrames={sceneFrames.activityFeed.duration}
|
||||
premountFor={fps}
|
||||
>
|
||||
<PlaceholderScene name="Activity Feed" sceneNumber={7} />
|
||||
<ActivityFeedScene />
|
||||
</Sequence>
|
||||
|
||||
{/* Scene 8: Call to Action (12s) */}
|
||||
|
||||
268
videos/src/scenes/portal/ActivityFeedScene.test.tsx
Normal file
268
videos/src/scenes/portal/ActivityFeedScene.test.tsx
Normal file
@@ -0,0 +1,268 @@
|
||||
import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
|
||||
import { render, cleanup } from "@testing-library/react";
|
||||
import { ActivityFeedScene } from "./ActivityFeedScene";
|
||||
|
||||
/* 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 ActivityItem component
|
||||
vi.mock("../../components/ActivityItem", () => ({
|
||||
ActivityItem: vi.fn(({ eventName, timestamp, badgeText, showBadge, delay, width, accentColor }) => (
|
||||
<div
|
||||
data-testid="activity-item"
|
||||
data-event-name={eventName}
|
||||
data-timestamp={timestamp}
|
||||
data-badge-text={badgeText}
|
||||
data-show-badge={showBadge}
|
||||
data-delay={delay}
|
||||
data-width={width}
|
||||
data-accent-color={accentColor}
|
||||
>
|
||||
<span className="event-name">{eventName}</span>
|
||||
<span className="timestamp">{timestamp}</span>
|
||||
{showBadge && <span className="badge">{badgeText}</span>}
|
||||
</div>
|
||||
)),
|
||||
}));
|
||||
|
||||
describe("ActivityFeedScene", () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
cleanup();
|
||||
vi.resetAllMocks();
|
||||
});
|
||||
|
||||
it("renders without errors", () => {
|
||||
const { container } = render(<ActivityFeedScene />);
|
||||
expect(container).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders the AbsoluteFill container with correct classes", () => {
|
||||
const { container } = render(<ActivityFeedScene />);
|
||||
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(<ActivityFeedScene />);
|
||||
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 'Aktivitäten'", () => {
|
||||
const { container } = render(<ActivityFeedScene />);
|
||||
const header = container.querySelector("h1");
|
||||
expect(header).toBeInTheDocument();
|
||||
expect(header).toHaveTextContent("Aktivitäten");
|
||||
expect(header).toHaveClass("text-5xl");
|
||||
expect(header).toHaveClass("font-bold");
|
||||
expect(header).toHaveClass("text-white");
|
||||
});
|
||||
|
||||
it("renders the subtitle text", () => {
|
||||
const { container } = render(<ActivityFeedScene />);
|
||||
expect(container.textContent).toContain("Der Puls der Bitcoin-Community");
|
||||
});
|
||||
|
||||
it("renders the LIVE indicator", () => {
|
||||
const { container } = render(<ActivityFeedScene />);
|
||||
expect(container.textContent).toContain("LIVE");
|
||||
});
|
||||
|
||||
it("renders the green live indicator dot", () => {
|
||||
const { container } = render(<ActivityFeedScene />);
|
||||
const greenDot = container.querySelector(".bg-green-500.rounded-full");
|
||||
expect(greenDot).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders all four activity items", () => {
|
||||
const { container } = render(<ActivityFeedScene />);
|
||||
const activityItems = container.querySelectorAll('[data-testid="activity-item"]');
|
||||
expect(activityItems.length).toBe(4);
|
||||
});
|
||||
|
||||
it("renders EINUNDZWANZIG Kempten activity", () => {
|
||||
const { container } = render(<ActivityFeedScene />);
|
||||
const items = container.querySelectorAll('[data-testid="activity-item"]');
|
||||
const kemptenItem = Array.from(items).find(
|
||||
(item) => item.getAttribute("data-event-name") === "EINUNDZWANZIG Kempten"
|
||||
);
|
||||
expect(kemptenItem).toBeInTheDocument();
|
||||
expect(kemptenItem).toHaveAttribute("data-timestamp", "vor 13 Stunden");
|
||||
});
|
||||
|
||||
it("renders EINUNDZWANZIG Darmstadt activity", () => {
|
||||
const { container } = render(<ActivityFeedScene />);
|
||||
const items = container.querySelectorAll('[data-testid="activity-item"]');
|
||||
const darmstadtItem = Array.from(items).find(
|
||||
(item) => item.getAttribute("data-event-name") === "EINUNDZWANZIG Darmstadt"
|
||||
);
|
||||
expect(darmstadtItem).toBeInTheDocument();
|
||||
expect(darmstadtItem).toHaveAttribute("data-timestamp", "vor 21 Stunden");
|
||||
});
|
||||
|
||||
it("renders EINUNDZWANZIG Vulkaneifel activity", () => {
|
||||
const { container } = render(<ActivityFeedScene />);
|
||||
const items = container.querySelectorAll('[data-testid="activity-item"]');
|
||||
const vulkaneifelItem = Array.from(items).find(
|
||||
(item) => item.getAttribute("data-event-name") === "EINUNDZWANZIG Vulkaneifel"
|
||||
);
|
||||
expect(vulkaneifelItem).toBeInTheDocument();
|
||||
expect(vulkaneifelItem).toHaveAttribute("data-timestamp", "vor 2 Tagen");
|
||||
});
|
||||
|
||||
it("renders BitcoinWalk Würzburg activity", () => {
|
||||
const { container } = render(<ActivityFeedScene />);
|
||||
const items = container.querySelectorAll('[data-testid="activity-item"]');
|
||||
const wurzburgItem = Array.from(items).find(
|
||||
(item) => item.getAttribute("data-event-name") === "BitcoinWalk Würzburg"
|
||||
);
|
||||
expect(wurzburgItem).toBeInTheDocument();
|
||||
expect(wurzburgItem).toHaveAttribute("data-timestamp", "vor 2 Tagen");
|
||||
});
|
||||
|
||||
it("renders activity items with 'Neuer Termin' badge text", () => {
|
||||
const { container } = render(<ActivityFeedScene />);
|
||||
const items = container.querySelectorAll('[data-testid="activity-item"]');
|
||||
items.forEach((item) => {
|
||||
expect(item).toHaveAttribute("data-badge-text", "Neuer Termin");
|
||||
});
|
||||
});
|
||||
|
||||
it("renders activity items with badges visible", () => {
|
||||
const { container } = render(<ActivityFeedScene />);
|
||||
const items = container.querySelectorAll('[data-testid="activity-item"]');
|
||||
items.forEach((item) => {
|
||||
expect(item).toHaveAttribute("data-show-badge", "true");
|
||||
});
|
||||
});
|
||||
|
||||
it("renders activity items with Bitcoin orange accent color", () => {
|
||||
const { container } = render(<ActivityFeedScene />);
|
||||
const items = container.querySelectorAll('[data-testid="activity-item"]');
|
||||
items.forEach((item) => {
|
||||
expect(item).toHaveAttribute("data-accent-color", "#f7931a");
|
||||
});
|
||||
});
|
||||
|
||||
it("renders activity items with width of 480px", () => {
|
||||
const { container } = render(<ActivityFeedScene />);
|
||||
const items = container.querySelectorAll('[data-testid="activity-item"]');
|
||||
items.forEach((item) => {
|
||||
expect(item).toHaveAttribute("data-width", "480");
|
||||
});
|
||||
});
|
||||
|
||||
it("renders audio sequences for sound effects", () => {
|
||||
const { container } = render(<ActivityFeedScene />);
|
||||
const sequences = container.querySelectorAll('[data-testid="sequence"]');
|
||||
// 4 button-click sounds + 1 slide-in = 5 sequences
|
||||
expect(sequences.length).toBe(5);
|
||||
});
|
||||
|
||||
it("includes button-click audio for activity item entrances", () => {
|
||||
const { container } = render(<ActivityFeedScene />);
|
||||
const audioElements = container.querySelectorAll('[data-testid="audio"]');
|
||||
const buttonClicks = Array.from(audioElements).filter((audio) =>
|
||||
audio.getAttribute("src")?.includes("button-click.mp3")
|
||||
);
|
||||
expect(buttonClicks.length).toBe(4);
|
||||
});
|
||||
|
||||
it("includes slide-in audio for section entrance", () => {
|
||||
const { container } = render(<ActivityFeedScene />);
|
||||
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(<ActivityFeedScene />);
|
||||
const vignettes = container.querySelectorAll(".pointer-events-none");
|
||||
expect(vignettes.length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
it("applies 3D perspective transform styles", () => {
|
||||
const { container } = render(<ActivityFeedScene />);
|
||||
const elements = container.querySelectorAll('[style*="perspective"]');
|
||||
expect(elements.length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
it("renders activity items in a vertical flex layout with gap", () => {
|
||||
const { container } = render(<ActivityFeedScene />);
|
||||
const flexCol = container.querySelector(".flex-col.gap-4");
|
||||
expect(flexCol).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders activity items with staggered delays", () => {
|
||||
const { container } = render(<ActivityFeedScene />);
|
||||
const items = container.querySelectorAll('[data-testid="activity-item"]');
|
||||
const delays = Array.from(items).map((item) =>
|
||||
parseInt(item.getAttribute("data-delay") || "0", 10)
|
||||
);
|
||||
|
||||
// Each item should have an increasing delay
|
||||
for (let i = 1; i < delays.length; i++) {
|
||||
expect(delays[i]).toBeGreaterThan(delays[i - 1]);
|
||||
}
|
||||
});
|
||||
|
||||
it("renders gradient overlay for background effect", () => {
|
||||
const { container } = render(<ActivityFeedScene />);
|
||||
const gradientElements = container.querySelectorAll('[style*="radial-gradient"]');
|
||||
expect(gradientElements.length).toBeGreaterThan(0);
|
||||
});
|
||||
});
|
||||
275
videos/src/scenes/portal/ActivityFeedScene.tsx
Normal file
275
videos/src/scenes/portal/ActivityFeedScene.tsx
Normal file
@@ -0,0 +1,275 @@
|
||||
import {
|
||||
AbsoluteFill,
|
||||
useCurrentFrame,
|
||||
useVideoConfig,
|
||||
interpolate,
|
||||
spring,
|
||||
Img,
|
||||
staticFile,
|
||||
Sequence,
|
||||
} from "remotion";
|
||||
import { Audio } from "@remotion/media";
|
||||
import { ActivityItem } from "../../components/ActivityItem";
|
||||
|
||||
// Spring configurations
|
||||
const SNAPPY = { damping: 15, stiffness: 80 };
|
||||
|
||||
// Stagger delay between activity items (in frames)
|
||||
const ACTIVITY_STAGGER_DELAY = 20;
|
||||
|
||||
// Activity feed data from the screenshot
|
||||
const ACTIVITY_FEED_DATA = [
|
||||
{
|
||||
eventName: "EINUNDZWANZIG Kempten",
|
||||
timestamp: "vor 13 Stunden",
|
||||
badgeText: "Neuer Termin",
|
||||
},
|
||||
{
|
||||
eventName: "EINUNDZWANZIG Darmstadt",
|
||||
timestamp: "vor 21 Stunden",
|
||||
badgeText: "Neuer Termin",
|
||||
},
|
||||
{
|
||||
eventName: "EINUNDZWANZIG Vulkaneifel",
|
||||
timestamp: "vor 2 Tagen",
|
||||
badgeText: "Neuer Termin",
|
||||
},
|
||||
{
|
||||
eventName: "BitcoinWalk Würzburg",
|
||||
timestamp: "vor 2 Tagen",
|
||||
badgeText: "Neuer Termin",
|
||||
},
|
||||
];
|
||||
|
||||
/**
|
||||
* ActivityFeedScene - Scene 7: Activity Feed (10 seconds / 300 frames @ 30fps)
|
||||
*
|
||||
* Animation sequence:
|
||||
* 1. 3D perspective entrance with smooth transition
|
||||
* 2. Section header "Aktivitäten" animates in with fade + translateY
|
||||
* 3. Activity items slide in from right with staggered timing:
|
||||
* - "Neuer Termin" badge bounces in
|
||||
* - Meetup name types out / fades in
|
||||
* - Timestamp fades in
|
||||
* 4. Stack effect: New items push existing ones down
|
||||
* 5. Audio: button-click.mp3 plays per item entrance
|
||||
*/
|
||||
export const ActivityFeedScene: 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 activity items
|
||||
const activityBaseDelay = Math.floor(1 * fps);
|
||||
|
||||
// Subtle pulse for live indicator
|
||||
const pulseIntensity = interpolate(
|
||||
Math.sin(frame * 0.1),
|
||||
[-1, 1],
|
||||
[0.5, 1]
|
||||
);
|
||||
|
||||
return (
|
||||
<AbsoluteFill className="bg-zinc-900 overflow-hidden">
|
||||
{/* Audio: button-click for each activity entrance */}
|
||||
{ACTIVITY_FEED_DATA.map((_, index) => (
|
||||
<Sequence
|
||||
key={`audio-${index}`}
|
||||
from={activityBaseDelay + index * ACTIVITY_STAGGER_DELAY}
|
||||
durationInFrames={Math.floor(0.5 * fps)}
|
||||
>
|
||||
<Audio src={staticFile("sfx/button-click.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 60% 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)`,
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center justify-center gap-3 mb-3">
|
||||
<h1 className="text-5xl font-bold text-white">Aktivitäten</h1>
|
||||
{/* Live indicator dot */}
|
||||
<div
|
||||
className="flex items-center gap-2 px-3 py-1 rounded-full bg-green-500/20 border border-green-500/30"
|
||||
style={{
|
||||
opacity: pulseIntensity,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="w-2 h-2 rounded-full bg-green-500"
|
||||
style={{
|
||||
boxShadow: `0 0 ${8 * pulseIntensity}px rgba(34, 197, 94, 0.8)`,
|
||||
}}
|
||||
/>
|
||||
<span className="text-sm text-green-400 font-medium">LIVE</span>
|
||||
</div>
|
||||
</div>
|
||||
<p
|
||||
className="text-xl text-zinc-400"
|
||||
style={{
|
||||
opacity: subtitleOpacity,
|
||||
transform: `translateY(${subtitleY}px)`,
|
||||
}}
|
||||
>
|
||||
Der Puls der Bitcoin-Community
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Activity Feed List */}
|
||||
<div className="w-full max-w-lg">
|
||||
<div className="flex flex-col gap-4">
|
||||
{ACTIVITY_FEED_DATA.map((activity, index) => (
|
||||
<ActivityItemWrapper
|
||||
key={activity.eventName}
|
||||
activity={activity}
|
||||
delay={activityBaseDelay + index * ACTIVITY_STAGGER_DELAY}
|
||||
index={index}
|
||||
/>
|
||||
))}
|
||||
</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>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* Wrapper component for activity items with stack push-down animation
|
||||
*/
|
||||
type ActivityItemWrapperProps = {
|
||||
activity: {
|
||||
eventName: string;
|
||||
timestamp: string;
|
||||
badgeText: string;
|
||||
};
|
||||
delay: number;
|
||||
index: number;
|
||||
};
|
||||
|
||||
const ActivityItemWrapper: React.FC<ActivityItemWrapperProps> = ({
|
||||
activity,
|
||||
delay,
|
||||
index,
|
||||
}) => {
|
||||
const frame = useCurrentFrame();
|
||||
const { fps } = useVideoConfig();
|
||||
|
||||
// Calculate push-down effect from items appearing above
|
||||
// Each item that appears before this one causes a slight downward push
|
||||
let pushDownOffset = 0;
|
||||
for (let i = 0; i < index; i++) {
|
||||
const prevItemDelay = Math.floor(1 * fps) + i * ACTIVITY_STAGGER_DELAY;
|
||||
const prevItemSpring = spring({
|
||||
frame: frame - prevItemDelay,
|
||||
fps,
|
||||
config: { damping: 20, stiffness: 100 },
|
||||
});
|
||||
// Each previous item pushes this one down slightly when it appears
|
||||
pushDownOffset += interpolate(prevItemSpring, [0, 1], [0, 0]);
|
||||
}
|
||||
|
||||
// Container spring for the wrapper itself
|
||||
const containerSpring = spring({
|
||||
frame: frame - delay,
|
||||
fps,
|
||||
config: { damping: 15, stiffness: 80 },
|
||||
});
|
||||
|
||||
const containerOpacity = interpolate(containerSpring, [0, 1], [0, 1]);
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
opacity: containerOpacity,
|
||||
transform: `translateY(${pushDownOffset}px)`,
|
||||
}}
|
||||
>
|
||||
<ActivityItem
|
||||
eventName={activity.eventName}
|
||||
timestamp={activity.timestamp}
|
||||
badgeText={activity.badgeText}
|
||||
showBadge={true}
|
||||
delay={delay}
|
||||
width={480}
|
||||
accentColor="#f7931a"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user