mirror of
https://github.com/HolgerHatGarKeineNode/einundzwanzig-nostr.git
synced 2026-01-28 07:43:18 +00:00
📱 Add mobile scene adaptations for PortalPresentationMobile
Mobile-optimized versions of all 9 scenes with portrait layout (1080x1920): - PortalIntroSceneMobile: Smaller logo (280px), text-5xl title - PortalTitleSceneMobile: Title split into two lines, text-5xl - DashboardOverviewSceneMobile: Vertical card stacking, no sidebar - MeetupShowcaseSceneMobile: Vertical layout, 360px featured card - CountryStatsSceneMobile: Single column, 280px bars, compact sparklines - TopMeetupsSceneMobile: Narrower rows, 70px sparklines - ActivityFeedSceneMobile: 400px activity cards - CallToActionSceneMobile: max-w-md container, 100px logo - PortalOutroSceneMobile: 450px horizontal logo Includes 92 tests covering mobile-specific layout adaptations. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
HolgerHatGarKeineNode
@@ -1,13 +1,14 @@
|
||||
import { AbsoluteFill, Sequence, useVideoConfig, Img, staticFile } from "remotion";
|
||||
import { inconsolataFont } from "./fonts/inconsolata";
|
||||
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";
|
||||
import { ActivityFeedScene } from "./scenes/portal/ActivityFeedScene";
|
||||
import { CallToActionScene } from "./scenes/portal/CallToActionScene";
|
||||
import { PortalOutroScene } from "./scenes/portal/PortalOutroScene";
|
||||
import { PortalIntroSceneMobile } from "./scenes/portal/mobile/PortalIntroSceneMobile";
|
||||
import { PortalTitleSceneMobile } from "./scenes/portal/mobile/PortalTitleSceneMobile";
|
||||
import { DashboardOverviewSceneMobile } from "./scenes/portal/mobile/DashboardOverviewSceneMobile";
|
||||
import { MeetupShowcaseSceneMobile } from "./scenes/portal/mobile/MeetupShowcaseSceneMobile";
|
||||
import { CountryStatsSceneMobile } from "./scenes/portal/mobile/CountryStatsSceneMobile";
|
||||
import { TopMeetupsSceneMobile } from "./scenes/portal/mobile/TopMeetupsSceneMobile";
|
||||
import { ActivityFeedSceneMobile } from "./scenes/portal/mobile/ActivityFeedSceneMobile";
|
||||
import { CallToActionSceneMobile } from "./scenes/portal/mobile/CallToActionSceneMobile";
|
||||
import { PortalOutroSceneMobile } from "./scenes/portal/mobile/PortalOutroSceneMobile";
|
||||
import { PortalAudioManager } from "./components/PortalAudioManager";
|
||||
|
||||
/**
|
||||
@@ -138,7 +139,7 @@ export const PortalPresentationMobile: React.FC = () => {
|
||||
durationInFrames={sceneFrames.logoReveal.duration}
|
||||
premountFor={fps}
|
||||
>
|
||||
<PortalIntroScene />
|
||||
<PortalIntroSceneMobile />
|
||||
</Sequence>
|
||||
|
||||
{/* Scene 2: Portal Title (4s) */}
|
||||
@@ -147,7 +148,7 @@ export const PortalPresentationMobile: React.FC = () => {
|
||||
durationInFrames={sceneFrames.portalTitle.duration}
|
||||
premountFor={fps}
|
||||
>
|
||||
<PortalTitleScene />
|
||||
<PortalTitleSceneMobile />
|
||||
</Sequence>
|
||||
|
||||
{/* Scene 3: Dashboard Overview (12s) */}
|
||||
@@ -156,7 +157,7 @@ export const PortalPresentationMobile: React.FC = () => {
|
||||
durationInFrames={sceneFrames.dashboardOverview.duration}
|
||||
premountFor={fps}
|
||||
>
|
||||
<DashboardOverviewScene />
|
||||
<DashboardOverviewSceneMobile />
|
||||
</Sequence>
|
||||
|
||||
{/* Scene 4: Meine Meetups (12s) */}
|
||||
@@ -165,7 +166,7 @@ export const PortalPresentationMobile: React.FC = () => {
|
||||
durationInFrames={sceneFrames.meineMeetups.duration}
|
||||
premountFor={fps}
|
||||
>
|
||||
<MeetupShowcaseScene />
|
||||
<MeetupShowcaseSceneMobile />
|
||||
</Sequence>
|
||||
|
||||
{/* Scene 5: Top Länder (12s) */}
|
||||
@@ -174,7 +175,7 @@ export const PortalPresentationMobile: React.FC = () => {
|
||||
durationInFrames={sceneFrames.topLaender.duration}
|
||||
premountFor={fps}
|
||||
>
|
||||
<PlaceholderScene name="Top Länder" sceneNumber={5} />
|
||||
<CountryStatsSceneMobile />
|
||||
</Sequence>
|
||||
|
||||
{/* Scene 6: Top Meetups (10s) */}
|
||||
@@ -183,7 +184,7 @@ export const PortalPresentationMobile: React.FC = () => {
|
||||
durationInFrames={sceneFrames.topMeetups.duration}
|
||||
premountFor={fps}
|
||||
>
|
||||
<TopMeetupsScene />
|
||||
<TopMeetupsSceneMobile />
|
||||
</Sequence>
|
||||
|
||||
{/* Scene 7: Activity Feed (10s) */}
|
||||
@@ -192,7 +193,7 @@ export const PortalPresentationMobile: React.FC = () => {
|
||||
durationInFrames={sceneFrames.activityFeed.duration}
|
||||
premountFor={fps}
|
||||
>
|
||||
<ActivityFeedScene />
|
||||
<ActivityFeedSceneMobile />
|
||||
</Sequence>
|
||||
|
||||
{/* Scene 8: Call to Action (12s) */}
|
||||
@@ -201,7 +202,7 @@ export const PortalPresentationMobile: React.FC = () => {
|
||||
durationInFrames={sceneFrames.callToAction.duration}
|
||||
premountFor={fps}
|
||||
>
|
||||
<CallToActionScene />
|
||||
<CallToActionSceneMobile />
|
||||
</Sequence>
|
||||
|
||||
{/* Scene 9: Outro (12s) */}
|
||||
@@ -210,29 +211,8 @@ export const PortalPresentationMobile: React.FC = () => {
|
||||
durationInFrames={sceneFrames.outro.duration}
|
||||
premountFor={fps}
|
||||
>
|
||||
<PortalOutroScene />
|
||||
<PortalOutroSceneMobile />
|
||||
</Sequence>
|
||||
</AbsoluteFill>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* Placeholder component for scenes that haven't been implemented yet.
|
||||
* Displays a centered scene name with visual indicators.
|
||||
*/
|
||||
const PlaceholderScene: React.FC<{ name: string; sceneNumber: number }> = ({
|
||||
name,
|
||||
sceneNumber,
|
||||
}) => {
|
||||
return (
|
||||
<AbsoluteFill className="flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<div className="w-24 h-24 mx-auto mb-6 rounded-full bg-orange-500/20 border-2 border-orange-500/50 flex items-center justify-center">
|
||||
<span className="text-4xl font-bold text-orange-500">{sceneNumber}</span>
|
||||
</div>
|
||||
<h2 className="text-4xl font-bold text-white mb-2">{name}</h2>
|
||||
<p className="text-lg text-neutral-400">Scene placeholder</p>
|
||||
</div>
|
||||
</AbsoluteFill>
|
||||
);
|
||||
};
|
||||
|
||||
143
videos/src/scenes/portal/mobile/ActivityFeedSceneMobile.test.tsx
Normal file
143
videos/src/scenes/portal/mobile/ActivityFeedSceneMobile.test.tsx
Normal file
@@ -0,0 +1,143 @@
|
||||
import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
|
||||
import { render, cleanup } from "@testing-library/react";
|
||||
import { ActivityFeedSceneMobile } from "./ActivityFeedSceneMobile";
|
||||
|
||||
/* eslint-disable @remotion/warn-native-media-tag */
|
||||
// Mock Remotion hooks
|
||||
vi.mock("remotion", () => ({
|
||||
useCurrentFrame: vi.fn(() => 60),
|
||||
useVideoConfig: vi.fn(() => ({ fps: 30, width: 1080, height: 1920 })),
|
||||
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>
|
||||
)),
|
||||
}));
|
||||
|
||||
// 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, width }) => (
|
||||
<div data-testid="activity-item" data-event={eventName} data-width={width}>
|
||||
{eventName}
|
||||
</div>
|
||||
)),
|
||||
}));
|
||||
|
||||
describe("ActivityFeedSceneMobile", () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
cleanup();
|
||||
vi.resetAllMocks();
|
||||
});
|
||||
|
||||
it("renders without errors", () => {
|
||||
const { container } = render(<ActivityFeedSceneMobile />);
|
||||
expect(container).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders the AbsoluteFill container", () => {
|
||||
const { container } = render(<ActivityFeedSceneMobile />);
|
||||
const absoluteFill = container.querySelector('[data-testid="absolute-fill"]');
|
||||
expect(absoluteFill).toBeInTheDocument();
|
||||
expect(absoluteFill).toHaveClass("bg-zinc-900");
|
||||
});
|
||||
|
||||
it("renders the header with mobile-optimized size", () => {
|
||||
const { container } = render(<ActivityFeedSceneMobile />);
|
||||
const header = container.querySelector("h1");
|
||||
expect(header).toBeInTheDocument();
|
||||
expect(header).toHaveTextContent("Aktivitäten");
|
||||
// Mobile uses text-4xl vs desktop text-5xl
|
||||
expect(header).toHaveClass("text-4xl");
|
||||
});
|
||||
|
||||
it("renders LIVE indicator badge", () => {
|
||||
const { container } = render(<ActivityFeedSceneMobile />);
|
||||
const liveIndicator = container.querySelector('[class*="bg-green-500"]');
|
||||
expect(liveIndicator).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders four activity items", () => {
|
||||
const { container } = render(<ActivityFeedSceneMobile />);
|
||||
const activityItems = container.querySelectorAll('[data-testid="activity-item"]');
|
||||
expect(activityItems.length).toBe(4);
|
||||
});
|
||||
|
||||
it("renders activity items with mobile-optimized width (400px)", () => {
|
||||
const { container } = render(<ActivityFeedSceneMobile />);
|
||||
const activityItems = container.querySelectorAll('[data-testid="activity-item"]');
|
||||
activityItems.forEach((item) => {
|
||||
// Mobile uses 400px vs desktop 480px
|
||||
expect(item).toHaveAttribute("data-width", "400");
|
||||
});
|
||||
});
|
||||
|
||||
it("renders button-click audio for each activity", () => {
|
||||
const { container } = render(<ActivityFeedSceneMobile />);
|
||||
const sequences = container.querySelectorAll('[data-testid="sequence"]');
|
||||
const audioSequences = Array.from(sequences).filter((seq) => {
|
||||
const audio = seq.querySelector('[data-testid="audio"]');
|
||||
return audio?.getAttribute("src")?.includes("button-click.mp3");
|
||||
});
|
||||
expect(audioSequences.length).toBe(4);
|
||||
});
|
||||
|
||||
it("renders slide-in audio for section entrance", () => {
|
||||
const { container } = render(<ActivityFeedSceneMobile />);
|
||||
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 wallpaper background", () => {
|
||||
const { container } = render(<ActivityFeedSceneMobile />);
|
||||
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 subtitle with correct styling", () => {
|
||||
const { container } = render(<ActivityFeedSceneMobile />);
|
||||
const subtitle = container.querySelector("p");
|
||||
expect(subtitle).toBeInTheDocument();
|
||||
expect(subtitle).toHaveTextContent("Der Puls der Bitcoin-Community");
|
||||
expect(subtitle).toHaveClass("text-lg");
|
||||
});
|
||||
});
|
||||
252
videos/src/scenes/portal/mobile/ActivityFeedSceneMobile.tsx
Normal file
252
videos/src/scenes/portal/mobile/ActivityFeedSceneMobile.tsx
Normal file
@@ -0,0 +1,252 @@
|
||||
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 = 18;
|
||||
|
||||
// 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",
|
||||
},
|
||||
];
|
||||
|
||||
/**
|
||||
* ActivityFeedSceneMobile - Scene 7: Activity Feed for Mobile (10 seconds / 300 frames @ 30fps)
|
||||
*
|
||||
* Mobile layout adaptations:
|
||||
* - Narrower activity cards (400px vs 480px)
|
||||
* - Adjusted text sizes and spacing
|
||||
* - Centered layout for portrait orientation
|
||||
*/
|
||||
export const ActivityFeedSceneMobile: 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 50% 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 - Centered for mobile */}
|
||||
<div className="absolute inset-0 flex flex-col items-center justify-center px-6">
|
||||
{/* Section Header */}
|
||||
<div
|
||||
className="text-center mb-8"
|
||||
style={{
|
||||
opacity: headerOpacity,
|
||||
transform: `translateY(${headerY}px)`,
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center justify-center gap-3 mb-3">
|
||||
<h1 className="text-4xl font-bold text-white">Aktivitäten</h1>
|
||||
{/* Live indicator dot */}
|
||||
<div
|
||||
className="flex items-center gap-1.5 px-2.5 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-xs text-green-400 font-medium">LIVE</span>
|
||||
</div>
|
||||
</div>
|
||||
<p
|
||||
className="text-lg 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-md">
|
||||
<div className="flex flex-col gap-3">
|
||||
{ACTIVITY_FEED_DATA.map((activity, index) => (
|
||||
<ActivityItemWrapperMobile
|
||||
key={activity.eventName}
|
||||
activity={activity}
|
||||
delay={activityBaseDelay + index * ACTIVITY_STAGGER_DELAY}
|
||||
/>
|
||||
))}
|
||||
</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 for mobile
|
||||
*/
|
||||
type ActivityItemWrapperMobileProps = {
|
||||
activity: {
|
||||
eventName: string;
|
||||
timestamp: string;
|
||||
badgeText: string;
|
||||
};
|
||||
delay: number;
|
||||
};
|
||||
|
||||
const ActivityItemWrapperMobile: React.FC<ActivityItemWrapperMobileProps> = ({
|
||||
activity,
|
||||
delay,
|
||||
}) => {
|
||||
const frame = useCurrentFrame();
|
||||
const { fps } = useVideoConfig();
|
||||
|
||||
// Container spring for the wrapper
|
||||
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,
|
||||
}}
|
||||
>
|
||||
<ActivityItem
|
||||
eventName={activity.eventName}
|
||||
timestamp={activity.timestamp}
|
||||
badgeText={activity.badgeText}
|
||||
showBadge={true}
|
||||
delay={delay}
|
||||
width={400}
|
||||
accentColor="#f7931a"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
144
videos/src/scenes/portal/mobile/CallToActionSceneMobile.test.tsx
Normal file
144
videos/src/scenes/portal/mobile/CallToActionSceneMobile.test.tsx
Normal file
@@ -0,0 +1,144 @@
|
||||
import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
|
||||
import { render, cleanup } from "@testing-library/react";
|
||||
import { CallToActionSceneMobile } from "./CallToActionSceneMobile";
|
||||
|
||||
/* eslint-disable @remotion/warn-native-media-tag */
|
||||
// Mock Remotion hooks
|
||||
vi.mock("remotion", () => ({
|
||||
useCurrentFrame: vi.fn(() => 120),
|
||||
useVideoConfig: vi.fn(() => ({ fps: 30, width: 1080, height: 1920 })),
|
||||
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>
|
||||
)),
|
||||
}));
|
||||
|
||||
// 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 */
|
||||
|
||||
describe("CallToActionSceneMobile", () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
cleanup();
|
||||
vi.resetAllMocks();
|
||||
});
|
||||
|
||||
it("renders without errors", () => {
|
||||
const { container } = render(<CallToActionSceneMobile />);
|
||||
expect(container).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders the AbsoluteFill container", () => {
|
||||
const { container } = render(<CallToActionSceneMobile />);
|
||||
const absoluteFill = container.querySelector('[data-testid="absolute-fill"]');
|
||||
expect(absoluteFill).toBeInTheDocument();
|
||||
expect(absoluteFill).toHaveClass("bg-zinc-900");
|
||||
});
|
||||
|
||||
it("renders the CTA title with mobile-optimized size", () => {
|
||||
const { container } = render(<CallToActionSceneMobile />);
|
||||
const title = container.querySelector("h1");
|
||||
expect(title).toBeInTheDocument();
|
||||
expect(title).toHaveTextContent("Werde Teil der Community");
|
||||
// Mobile uses text-3xl vs desktop text-5xl
|
||||
expect(title).toHaveClass("text-3xl");
|
||||
});
|
||||
|
||||
it("renders the Einundzwanzig logo with mobile-optimized dimensions", () => {
|
||||
const { container } = render(<CallToActionSceneMobile />);
|
||||
const images = container.querySelectorAll('[data-testid="remotion-img"]');
|
||||
const logo = Array.from(images).find((img) =>
|
||||
img.getAttribute("src")?.includes("einundzwanzig-square-inverted.svg")
|
||||
);
|
||||
expect(logo).toBeInTheDocument();
|
||||
// Mobile logo is 100px vs desktop 120px
|
||||
expect(logo).toHaveStyle({ width: "100px", height: "100px" });
|
||||
});
|
||||
|
||||
it("renders the portal URL", () => {
|
||||
const { container } = render(<CallToActionSceneMobile />);
|
||||
const urlText = container.textContent;
|
||||
expect(urlText).toContain("portal.einundzwanzig.space");
|
||||
});
|
||||
|
||||
it("renders URL container with mobile-optimized text size", () => {
|
||||
const { container } = render(<CallToActionSceneMobile />);
|
||||
const urlSpan = container.querySelector('[class*="font-mono"]');
|
||||
expect(urlSpan).toBeInTheDocument();
|
||||
// Mobile uses text-xl vs desktop text-3xl
|
||||
expect(urlSpan).toHaveClass("text-xl");
|
||||
});
|
||||
|
||||
it("renders glassmorphism overlay with mobile-optimized width", () => {
|
||||
const { container } = render(<CallToActionSceneMobile />);
|
||||
const overlay = container.querySelector('[class*="max-w-md"]');
|
||||
expect(overlay).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders success-fanfare audio", () => {
|
||||
const { container } = render(<CallToActionSceneMobile />);
|
||||
const audioElements = container.querySelectorAll('[data-testid="audio"]');
|
||||
const fanfareAudio = Array.from(audioElements).find((audio) =>
|
||||
audio.getAttribute("src")?.includes("success-fanfare.mp3")
|
||||
);
|
||||
expect(fanfareAudio).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders typing audio for URL", () => {
|
||||
const { container } = render(<CallToActionSceneMobile />);
|
||||
const audioElements = container.querySelectorAll('[data-testid="audio"]');
|
||||
const typingAudio = Array.from(audioElements).find((audio) =>
|
||||
audio.getAttribute("src")?.includes("typing.mp3")
|
||||
);
|
||||
expect(typingAudio).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders subtitle with correct styling", () => {
|
||||
const { container } = render(<CallToActionSceneMobile />);
|
||||
const subtitle = container.querySelector("p");
|
||||
expect(subtitle).toBeInTheDocument();
|
||||
expect(subtitle).toHaveTextContent("Die deutschsprachige Bitcoin-Community wartet auf dich");
|
||||
// Mobile uses text-base vs desktop text-xl
|
||||
expect(subtitle).toHaveClass("text-base");
|
||||
});
|
||||
|
||||
it("renders wallpaper background", () => {
|
||||
const { container } = render(<CallToActionSceneMobile />);
|
||||
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();
|
||||
});
|
||||
});
|
||||
306
videos/src/scenes/portal/mobile/CallToActionSceneMobile.tsx
Normal file
306
videos/src/scenes/portal/mobile/CallToActionSceneMobile.tsx
Normal file
@@ -0,0 +1,306 @@
|
||||
import {
|
||||
AbsoluteFill,
|
||||
useCurrentFrame,
|
||||
useVideoConfig,
|
||||
interpolate,
|
||||
spring,
|
||||
Img,
|
||||
staticFile,
|
||||
Sequence,
|
||||
} from "remotion";
|
||||
import { Audio } from "@remotion/media";
|
||||
|
||||
// Spring configurations
|
||||
const SMOOTH = { damping: 200 };
|
||||
const SNAPPY = { damping: 15, stiffness: 80 };
|
||||
const BOUNCY = { damping: 12 };
|
||||
|
||||
// URL to display
|
||||
const PORTAL_URL = "portal.einundzwanzig.space";
|
||||
|
||||
/**
|
||||
* CallToActionSceneMobile - Scene 8: Call to Action for Mobile (12 seconds / 360 frames @ 30fps)
|
||||
*
|
||||
* Mobile layout adaptations:
|
||||
* - Smaller container width (max-w-md vs max-w-2xl)
|
||||
* - Reduced text sizes for portrait orientation
|
||||
* - Smaller logo (100px vs 120px)
|
||||
* - Adjusted URL text size
|
||||
*/
|
||||
export const CallToActionSceneMobile: React.FC = () => {
|
||||
const frame = useCurrentFrame();
|
||||
const { fps } = useVideoConfig();
|
||||
|
||||
// Background blur and zoom out animation (0-60 frames)
|
||||
const blurSpring = spring({
|
||||
frame,
|
||||
fps,
|
||||
config: SMOOTH,
|
||||
});
|
||||
|
||||
const backgroundBlur = interpolate(blurSpring, [0, 1], [0, 8]);
|
||||
const backgroundScale = interpolate(blurSpring, [0, 1], [1, 0.95]);
|
||||
const backgroundOpacity = interpolate(blurSpring, [0, 1], [0.3, 0.15]);
|
||||
|
||||
// Glassmorphism overlay entrance (delayed 15 frames)
|
||||
const overlayDelay = 15;
|
||||
const overlaySpring = spring({
|
||||
frame: frame - overlayDelay,
|
||||
fps,
|
||||
config: SNAPPY,
|
||||
});
|
||||
const overlayOpacity = interpolate(overlaySpring, [0, 1], [0, 1]);
|
||||
|
||||
// Title entrance (delayed 30 frames)
|
||||
const titleDelay = Math.floor(1 * fps);
|
||||
const titleSpring = spring({
|
||||
frame: frame - titleDelay,
|
||||
fps,
|
||||
config: BOUNCY,
|
||||
});
|
||||
const titleOpacity = interpolate(titleSpring, [0, 1], [0, 1]);
|
||||
const titleY = interpolate(titleSpring, [0, 1], [50, 0]);
|
||||
const titleScale = interpolate(titleSpring, [0, 1], [0.8, 1]);
|
||||
|
||||
// Logo entrance (delayed 45 frames)
|
||||
const logoDelay = Math.floor(1.5 * fps);
|
||||
const logoSpring = spring({
|
||||
frame: frame - logoDelay,
|
||||
fps,
|
||||
config: BOUNCY,
|
||||
});
|
||||
const logoOpacity = interpolate(logoSpring, [0, 1], [0, 1]);
|
||||
const logoScale = interpolate(logoSpring, [0, 1], [0.5, 1]);
|
||||
|
||||
// Logo glow pulse
|
||||
const glowIntensity = interpolate(
|
||||
Math.sin((frame - logoDelay) * 0.08),
|
||||
[-1, 1],
|
||||
[0.4, 1]
|
||||
);
|
||||
|
||||
// URL typing animation (delayed 2.5 seconds)
|
||||
const urlDelay = Math.floor(2.5 * fps);
|
||||
const urlTypingProgress = Math.max(
|
||||
0,
|
||||
Math.min(1, (frame - urlDelay) / (1.5 * fps))
|
||||
);
|
||||
const displayedUrlLength = Math.floor(urlTypingProgress * PORTAL_URL.length);
|
||||
const displayedUrl = PORTAL_URL.slice(0, displayedUrlLength);
|
||||
const showCursor = frame >= urlDelay && urlTypingProgress < 1;
|
||||
|
||||
// URL container entrance
|
||||
const urlContainerSpring = spring({
|
||||
frame: frame - Math.floor(2.3 * fps),
|
||||
fps,
|
||||
config: SNAPPY,
|
||||
});
|
||||
const urlContainerOpacity = interpolate(urlContainerSpring, [0, 1], [0, 1]);
|
||||
const urlContainerY = interpolate(urlContainerSpring, [0, 1], [30, 0]);
|
||||
|
||||
// URL pulse after typing complete
|
||||
const urlPulseActive = frame > urlDelay + 1.5 * fps;
|
||||
const urlPulseIntensity = urlPulseActive
|
||||
? interpolate(Math.sin((frame - urlDelay - 1.5 * fps) * 0.1), [-1, 1], [0.6, 1])
|
||||
: 0;
|
||||
|
||||
// Subtitle entrance
|
||||
const subtitleDelay = Math.floor(3.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]);
|
||||
|
||||
return (
|
||||
<AbsoluteFill className="bg-zinc-900 overflow-hidden">
|
||||
{/* Audio: success-fanfare */}
|
||||
<Sequence from={titleDelay} durationInFrames={Math.floor(4 * fps)}>
|
||||
<Audio src={staticFile("sfx/success-fanfare.mp3")} volume={0.6} />
|
||||
</Sequence>
|
||||
|
||||
{/* Audio: typing for URL */}
|
||||
<Sequence from={urlDelay} durationInFrames={Math.floor(1.5 * fps)}>
|
||||
<Audio src={staticFile("sfx/typing.mp3")} volume={0.3} />
|
||||
</Sequence>
|
||||
|
||||
{/* Audio: url-emphasis when typing complete */}
|
||||
<Sequence
|
||||
from={urlDelay + Math.floor(1.6 * fps)}
|
||||
durationInFrames={Math.floor(1 * fps)}
|
||||
>
|
||||
<Audio src={staticFile("sfx/url-emphasis.mp3")} volume={0.5} />
|
||||
</Sequence>
|
||||
|
||||
{/* Audio: logo reveal */}
|
||||
<Sequence from={logoDelay} durationInFrames={Math.floor(1 * fps)}>
|
||||
<Audio src={staticFile("sfx/logo-reveal.mp3")} volume={0.4} />
|
||||
</Sequence>
|
||||
|
||||
{/* Blurred Wallpaper Background */}
|
||||
<div
|
||||
className="absolute inset-0"
|
||||
style={{
|
||||
filter: `blur(${backgroundBlur}px)`,
|
||||
transform: `scale(${backgroundScale})`,
|
||||
}}
|
||||
>
|
||||
<Img
|
||||
src={staticFile("einundzwanzig-wallpaper.png")}
|
||||
className="absolute inset-0 w-full h-full object-cover"
|
||||
style={{ opacity: backgroundOpacity }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Dark gradient overlay */}
|
||||
<div
|
||||
className="absolute inset-0"
|
||||
style={{
|
||||
background:
|
||||
"radial-gradient(circle at 50% 50%, rgba(24, 24, 27, 0.7) 0%, rgba(24, 24, 27, 0.95) 100%)",
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Glassmorphism Overlay */}
|
||||
<div
|
||||
className="absolute inset-0 flex items-center justify-center px-6"
|
||||
style={{
|
||||
opacity: overlayOpacity,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="relative w-full max-w-md rounded-2xl p-8 text-center"
|
||||
style={{
|
||||
backgroundColor: "rgba(39, 39, 42, 0.4)",
|
||||
backdropFilter: "blur(20px)",
|
||||
border: "1px solid rgba(247, 147, 26, 0.2)",
|
||||
boxShadow: `
|
||||
0 0 ${60 * glowIntensity}px rgba(247, 147, 26, 0.15),
|
||||
0 25px 50px -12px rgba(0, 0, 0, 0.5),
|
||||
inset 0 0 60px rgba(247, 147, 26, 0.05)
|
||||
`,
|
||||
}}
|
||||
>
|
||||
{/* Title - smaller for mobile */}
|
||||
<h1
|
||||
className="text-3xl font-bold text-white mb-6"
|
||||
style={{
|
||||
opacity: titleOpacity,
|
||||
transform: `translateY(${titleY}px) scale(${titleScale})`,
|
||||
textShadow: "0 2px 20px rgba(0, 0, 0, 0.5)",
|
||||
}}
|
||||
>
|
||||
Werde Teil der Community
|
||||
</h1>
|
||||
|
||||
{/* EINUNDZWANZIG Logo - smaller for mobile */}
|
||||
<div
|
||||
className="flex justify-center mb-8"
|
||||
style={{
|
||||
opacity: logoOpacity,
|
||||
transform: `scale(${logoScale})`,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="relative"
|
||||
style={{
|
||||
filter: `drop-shadow(0 0 ${25 * glowIntensity}px rgba(247, 147, 26, 0.6))`,
|
||||
}}
|
||||
>
|
||||
<Img
|
||||
src={staticFile("einundzwanzig-square-inverted.svg")}
|
||||
style={{
|
||||
width: 100,
|
||||
height: 100,
|
||||
}}
|
||||
/>
|
||||
{/* Glow ring */}
|
||||
<div
|
||||
className="absolute inset-0 rounded-full"
|
||||
style={{
|
||||
background: `radial-gradient(circle, rgba(247, 147, 26, ${0.3 * glowIntensity}) 0%, transparent 70%)`,
|
||||
transform: "scale(1.5)",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* URL Container - adjusted for mobile */}
|
||||
<div
|
||||
className="mb-5"
|
||||
style={{
|
||||
opacity: urlContainerOpacity,
|
||||
transform: `translateY(${urlContainerY}px)`,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="inline-block px-5 py-3 rounded-xl"
|
||||
style={{
|
||||
backgroundColor: "rgba(24, 24, 27, 0.8)",
|
||||
border: urlPulseActive
|
||||
? `2px solid rgba(247, 147, 26, ${0.5 + urlPulseIntensity * 0.5})`
|
||||
: "2px solid rgba(63, 63, 70, 0.5)",
|
||||
boxShadow: urlPulseActive
|
||||
? `0 0 ${25 * urlPulseIntensity}px rgba(247, 147, 26, 0.4), inset 0 0 ${15 * urlPulseIntensity}px rgba(247, 147, 26, 0.1)`
|
||||
: "none",
|
||||
}}
|
||||
>
|
||||
<span
|
||||
className="text-xl font-mono font-bold"
|
||||
style={{
|
||||
color: urlPulseActive ? "#f7931a" : "#a1a1aa",
|
||||
textShadow: urlPulseActive
|
||||
? `0 0 ${12 * urlPulseIntensity}px rgba(247, 147, 26, 0.6)`
|
||||
: "none",
|
||||
}}
|
||||
>
|
||||
{displayedUrl}
|
||||
{showCursor && (
|
||||
<span
|
||||
className="inline-block ml-1"
|
||||
style={{
|
||||
width: 2,
|
||||
height: "1em",
|
||||
backgroundColor: "#f7931a",
|
||||
animation: "none",
|
||||
opacity: Math.floor(frame * 0.15) % 2 === 0 ? 1 : 0,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Subtitle - smaller for mobile */}
|
||||
<p
|
||||
className="text-base text-zinc-400"
|
||||
style={{
|
||||
opacity: subtitleOpacity,
|
||||
transform: `translateY(${subtitleY}px)`,
|
||||
}}
|
||||
>
|
||||
Die deutschsprachige Bitcoin-Community wartet auf dich
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Ambient glow effects */}
|
||||
<div
|
||||
className="absolute inset-0 pointer-events-none"
|
||||
style={{
|
||||
background: `radial-gradient(ellipse at 50% 30%, rgba(247, 147, 26, ${0.08 * glowIntensity}) 0%, transparent 50%)`,
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Vignette overlay */}
|
||||
<div
|
||||
className="absolute inset-0 pointer-events-none"
|
||||
style={{
|
||||
boxShadow: "inset 0 0 200px 80px rgba(0, 0, 0, 0.7)",
|
||||
}}
|
||||
/>
|
||||
</AbsoluteFill>
|
||||
);
|
||||
};
|
||||
151
videos/src/scenes/portal/mobile/CountryStatsSceneMobile.test.tsx
Normal file
151
videos/src/scenes/portal/mobile/CountryStatsSceneMobile.test.tsx
Normal file
@@ -0,0 +1,151 @@
|
||||
import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
|
||||
import { render, cleanup } from "@testing-library/react";
|
||||
import { CountryStatsSceneMobile } from "./CountryStatsSceneMobile";
|
||||
|
||||
/* eslint-disable @remotion/warn-native-media-tag */
|
||||
// Mock Remotion hooks
|
||||
vi.mock("remotion", () => ({
|
||||
useCurrentFrame: vi.fn(() => 60),
|
||||
useVideoConfig: vi.fn(() => ({ fps: 30, width: 1080, height: 1920 })),
|
||||
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>
|
||||
)),
|
||||
}));
|
||||
|
||||
// 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 CountryBar component
|
||||
vi.mock("../../../components/CountryBar", () => ({
|
||||
CountryBar: vi.fn(({ countryName, userCount, width }) => (
|
||||
<div data-testid="country-bar" data-country={countryName} data-count={userCount} data-width={width}>
|
||||
{countryName}: {userCount}
|
||||
</div>
|
||||
)),
|
||||
}));
|
||||
|
||||
// Mock SparklineChart component
|
||||
vi.mock("../../../components/SparklineChart", () => ({
|
||||
SparklineChart: vi.fn(({ width, height }) => (
|
||||
<div data-testid="sparkline-chart" data-width={width} data-height={height}>
|
||||
Sparkline
|
||||
</div>
|
||||
)),
|
||||
}));
|
||||
|
||||
describe("CountryStatsSceneMobile", () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
cleanup();
|
||||
vi.resetAllMocks();
|
||||
});
|
||||
|
||||
it("renders without errors", () => {
|
||||
const { container } = render(<CountryStatsSceneMobile />);
|
||||
expect(container).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders the AbsoluteFill container", () => {
|
||||
const { container } = render(<CountryStatsSceneMobile />);
|
||||
const absoluteFill = container.querySelector('[data-testid="absolute-fill"]');
|
||||
expect(absoluteFill).toBeInTheDocument();
|
||||
expect(absoluteFill).toHaveClass("bg-zinc-900");
|
||||
});
|
||||
|
||||
it("renders the header with mobile-optimized size", () => {
|
||||
const { container } = render(<CountryStatsSceneMobile />);
|
||||
const header = container.querySelector("h1");
|
||||
expect(header).toBeInTheDocument();
|
||||
expect(header).toHaveTextContent("Community nach Ländern");
|
||||
// Mobile uses text-4xl vs desktop text-5xl
|
||||
expect(header).toHaveClass("text-4xl");
|
||||
});
|
||||
|
||||
it("renders six country bars", () => {
|
||||
const { container } = render(<CountryStatsSceneMobile />);
|
||||
const countryBars = container.querySelectorAll('[data-testid="country-bar"]');
|
||||
expect(countryBars.length).toBe(6);
|
||||
});
|
||||
|
||||
it("renders country bars with mobile-optimized width (280px)", () => {
|
||||
const { container } = render(<CountryStatsSceneMobile />);
|
||||
const countryBars = container.querySelectorAll('[data-testid="country-bar"]');
|
||||
countryBars.forEach((bar) => {
|
||||
// Mobile uses 280px vs desktop 380px
|
||||
expect(bar).toHaveAttribute("data-width", "280");
|
||||
});
|
||||
});
|
||||
|
||||
it("renders sparkline charts for each country", () => {
|
||||
const { container } = render(<CountryStatsSceneMobile />);
|
||||
const sparklines = container.querySelectorAll('[data-testid="sparkline-chart"]');
|
||||
expect(sparklines.length).toBe(6);
|
||||
});
|
||||
|
||||
it("renders sparklines with mobile-optimized dimensions", () => {
|
||||
const { container } = render(<CountryStatsSceneMobile />);
|
||||
const sparklines = container.querySelectorAll('[data-testid="sparkline-chart"]');
|
||||
sparklines.forEach((sparkline) => {
|
||||
// Mobile uses 80px width vs desktop 120px
|
||||
expect(sparkline).toHaveAttribute("data-width", "80");
|
||||
expect(sparkline).toHaveAttribute("data-height", "32");
|
||||
});
|
||||
});
|
||||
|
||||
it("renders total users badge", () => {
|
||||
const { container } = render(<CountryStatsSceneMobile />);
|
||||
const badge = container.querySelector('[class*="rounded-xl"]');
|
||||
expect(badge).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders success-chime audio for each country", () => {
|
||||
const { container } = render(<CountryStatsSceneMobile />);
|
||||
const sequences = container.querySelectorAll('[data-testid="sequence"]');
|
||||
const audioSequences = Array.from(sequences).filter((seq) => {
|
||||
const audio = seq.querySelector('[data-testid="audio"]');
|
||||
return audio?.getAttribute("src")?.includes("success-chime.mp3");
|
||||
});
|
||||
expect(audioSequences.length).toBe(6);
|
||||
});
|
||||
|
||||
it("renders wallpaper background", () => {
|
||||
const { container } = render(<CountryStatsSceneMobile />);
|
||||
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();
|
||||
});
|
||||
});
|
||||
391
videos/src/scenes/portal/mobile/CountryStatsSceneMobile.tsx
Normal file
391
videos/src/scenes/portal/mobile/CountryStatsSceneMobile.tsx
Normal file
@@ -0,0 +1,391 @@
|
||||
import {
|
||||
AbsoluteFill,
|
||||
useCurrentFrame,
|
||||
useVideoConfig,
|
||||
interpolate,
|
||||
spring,
|
||||
Img,
|
||||
staticFile,
|
||||
Sequence,
|
||||
} from "remotion";
|
||||
import { Audio } from "@remotion/media";
|
||||
import { CountryBar } from "../../../components/CountryBar";
|
||||
import { SparklineChart } from "../../../components/SparklineChart";
|
||||
|
||||
// Spring configurations
|
||||
const SNAPPY = { damping: 15, stiffness: 80 };
|
||||
const BOUNCY = { damping: 12 };
|
||||
|
||||
// Stagger delay between country items (in frames)
|
||||
const COUNTRY_STAGGER_DELAY = 10;
|
||||
|
||||
// Country statistics data
|
||||
const COUNTRY_DATA = [
|
||||
{
|
||||
name: "Germany",
|
||||
flagEmoji: "🇩🇪",
|
||||
userCount: 458,
|
||||
sparklineData: [80, 120, 180, 220, 280, 320, 350, 390, 420, 445, 455, 458],
|
||||
},
|
||||
{
|
||||
name: "Austria",
|
||||
flagEmoji: "🇦🇹",
|
||||
userCount: 59,
|
||||
sparklineData: [10, 15, 22, 28, 35, 40, 45, 50, 54, 57, 58, 59],
|
||||
},
|
||||
{
|
||||
name: "Switzerland",
|
||||
flagEmoji: "🇨🇭",
|
||||
userCount: 34,
|
||||
sparklineData: [5, 8, 12, 15, 18, 22, 25, 28, 30, 32, 33, 34],
|
||||
},
|
||||
{
|
||||
name: "Luxembourg",
|
||||
flagEmoji: "🇱🇺",
|
||||
userCount: 8,
|
||||
sparklineData: [1, 2, 2, 3, 4, 5, 5, 6, 7, 7, 8, 8],
|
||||
},
|
||||
{
|
||||
name: "Bulgaria",
|
||||
flagEmoji: "🇧🇬",
|
||||
userCount: 7,
|
||||
sparklineData: [1, 1, 2, 2, 3, 4, 4, 5, 5, 6, 7, 7],
|
||||
},
|
||||
{
|
||||
name: "Spain",
|
||||
flagEmoji: "🇪🇸",
|
||||
userCount: 3,
|
||||
sparklineData: [0, 0, 1, 1, 1, 2, 2, 2, 2, 3, 3, 3],
|
||||
},
|
||||
];
|
||||
|
||||
// Maximum count for calculating relative bar widths
|
||||
const MAX_USER_COUNT = Math.max(...COUNTRY_DATA.map((c) => c.userCount));
|
||||
|
||||
/**
|
||||
* CountryStatsSceneMobile - Scene 5: Top Länder for Mobile (12 seconds / 360 frames @ 30fps)
|
||||
*
|
||||
* Mobile layout adaptations:
|
||||
* - Single column layout instead of 2-column grid
|
||||
* - Smaller bar widths optimized for 1080px width
|
||||
* - Sparkline placed below each country bar
|
||||
* - Reduced spacing and text sizes
|
||||
*/
|
||||
export const CountryStatsSceneMobile: 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 country items
|
||||
const countryBaseDelay = Math.floor(1 * fps);
|
||||
|
||||
// Subtle glow pulse
|
||||
const glowIntensity = interpolate(
|
||||
Math.sin(frame * 0.05),
|
||||
[-1, 1],
|
||||
[0.3, 0.6]
|
||||
);
|
||||
|
||||
// Total users count animation
|
||||
const totalUsers = COUNTRY_DATA.reduce((sum, c) => sum + c.userCount, 0);
|
||||
const totalDelay = Math.floor(0.8 * fps);
|
||||
const totalSpring = spring({
|
||||
frame: frame - totalDelay,
|
||||
fps,
|
||||
config: { damping: 18, stiffness: 70 },
|
||||
durationInFrames: 60,
|
||||
});
|
||||
const displayTotal = Math.round(totalSpring * totalUsers);
|
||||
|
||||
return (
|
||||
<AbsoluteFill className="bg-zinc-900 overflow-hidden">
|
||||
{/* Audio: success-chime for each country entrance */}
|
||||
{COUNTRY_DATA.map((_, index) => (
|
||||
<Sequence
|
||||
key={`audio-${index}`}
|
||||
from={countryBaseDelay + index * COUNTRY_STAGGER_DELAY}
|
||||
durationInFrames={Math.floor(0.5 * fps)}
|
||||
>
|
||||
<Audio src={staticFile("sfx/success-chime.mp3")} volume={0.3} />
|
||||
</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 50% 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 - Centered for mobile */}
|
||||
<div className="absolute inset-0 flex flex-col items-center px-8 pt-12">
|
||||
{/* Section Header */}
|
||||
<div
|
||||
className="text-center mb-6"
|
||||
style={{
|
||||
opacity: headerOpacity,
|
||||
transform: `translateY(${headerY}px)`,
|
||||
}}
|
||||
>
|
||||
<h1 className="text-4xl font-bold text-white mb-2">
|
||||
Community nach Ländern
|
||||
</h1>
|
||||
<p
|
||||
className="text-lg text-zinc-400"
|
||||
style={{
|
||||
opacity: subtitleOpacity,
|
||||
transform: `translateY(${subtitleY}px)`,
|
||||
}}
|
||||
>
|
||||
Die deutschsprachige Bitcoin-Community wächst
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Total Users Badge */}
|
||||
<TotalUsersBadgeMobile
|
||||
totalUsers={displayTotal}
|
||||
delay={totalDelay}
|
||||
glowIntensity={glowIntensity}
|
||||
/>
|
||||
|
||||
{/* Countries List - Single column for mobile */}
|
||||
<div className="w-full max-w-md mt-6">
|
||||
<div className="flex flex-col gap-3">
|
||||
{COUNTRY_DATA.map((country, index) => (
|
||||
<CountryRowMobile
|
||||
key={country.name}
|
||||
country={country}
|
||||
maxCount={MAX_USER_COUNT}
|
||||
delay={countryBaseDelay + index * COUNTRY_STAGGER_DELAY}
|
||||
glowIntensity={glowIntensity}
|
||||
/>
|
||||
))}
|
||||
</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>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* Total users badge component for mobile
|
||||
*/
|
||||
type TotalUsersBadgeMobileProps = {
|
||||
totalUsers: number;
|
||||
delay: number;
|
||||
glowIntensity: number;
|
||||
};
|
||||
|
||||
const TotalUsersBadgeMobile: React.FC<TotalUsersBadgeMobileProps> = ({
|
||||
totalUsers,
|
||||
delay,
|
||||
glowIntensity,
|
||||
}) => {
|
||||
const frame = useCurrentFrame();
|
||||
const { fps } = useVideoConfig();
|
||||
|
||||
const adjustedFrame = Math.max(0, frame - delay);
|
||||
|
||||
const badgeSpring = spring({
|
||||
frame: adjustedFrame,
|
||||
fps,
|
||||
config: BOUNCY,
|
||||
});
|
||||
|
||||
const badgeScale = interpolate(badgeSpring, [0, 1], [0.8, 1]);
|
||||
const badgeOpacity = interpolate(badgeSpring, [0, 1], [0, 1]);
|
||||
|
||||
return (
|
||||
<div
|
||||
className="flex items-center gap-3 px-6 py-3 rounded-xl"
|
||||
style={{
|
||||
backgroundColor: "rgba(247, 147, 26, 0.15)",
|
||||
border: "1px solid rgba(247, 147, 26, 0.3)",
|
||||
boxShadow: `0 0 ${30 * glowIntensity}px rgba(247, 147, 26, 0.2)`,
|
||||
transform: `scale(${badgeScale})`,
|
||||
opacity: badgeOpacity,
|
||||
}}
|
||||
>
|
||||
<GlobeIcon />
|
||||
<div className="flex items-baseline gap-2">
|
||||
<span
|
||||
className="text-3xl font-bold tabular-nums"
|
||||
style={{
|
||||
color: "#f7931a",
|
||||
fontFamily: "Inconsolata, monospace",
|
||||
textShadow: `0 0 ${15 * glowIntensity}px rgba(247, 147, 26, 0.5)`,
|
||||
}}
|
||||
>
|
||||
{totalUsers}
|
||||
</span>
|
||||
<span className="text-lg text-zinc-300">Nutzer weltweit</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* Country row with bar and sparkline for mobile
|
||||
*/
|
||||
type CountryRowMobileProps = {
|
||||
country: {
|
||||
name: string;
|
||||
flagEmoji: string;
|
||||
userCount: number;
|
||||
sparklineData: number[];
|
||||
};
|
||||
maxCount: number;
|
||||
delay: number;
|
||||
glowIntensity: number;
|
||||
};
|
||||
|
||||
const CountryRowMobile: React.FC<CountryRowMobileProps> = ({
|
||||
country,
|
||||
maxCount,
|
||||
delay,
|
||||
glowIntensity,
|
||||
}) => {
|
||||
const frame = useCurrentFrame();
|
||||
const { fps } = useVideoConfig();
|
||||
|
||||
const adjustedFrame = Math.max(0, frame - delay);
|
||||
|
||||
const rowSpring = spring({
|
||||
frame: adjustedFrame,
|
||||
fps,
|
||||
config: SNAPPY,
|
||||
});
|
||||
|
||||
const rowOpacity = interpolate(rowSpring, [0, 1], [0, 1]);
|
||||
const rowX = interpolate(rowSpring, [0, 1], [-50, 0]);
|
||||
|
||||
// Sparkline delay (appears slightly after the bar)
|
||||
const sparklineDelay = delay + 15;
|
||||
|
||||
return (
|
||||
<div
|
||||
className="flex items-center gap-3 p-3 rounded-xl bg-zinc-800/50"
|
||||
style={{
|
||||
opacity: rowOpacity,
|
||||
transform: `translateX(${rowX}px)`,
|
||||
}}
|
||||
>
|
||||
{/* Country Bar - Compact for mobile */}
|
||||
<div className="flex-1">
|
||||
<CountryBar
|
||||
countryName={country.name}
|
||||
flagEmoji={country.flagEmoji}
|
||||
userCount={country.userCount}
|
||||
maxCount={maxCount}
|
||||
width={280}
|
||||
delay={delay}
|
||||
accentColor="#f7931a"
|
||||
showCount={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Sparkline Chart - Smaller for mobile */}
|
||||
<div
|
||||
className="rounded-lg bg-zinc-800/50 p-2 flex-shrink-0"
|
||||
style={{
|
||||
boxShadow: `0 0 ${15 * glowIntensity}px rgba(247, 147, 26, 0.1)`,
|
||||
}}
|
||||
>
|
||||
<SparklineChart
|
||||
data={country.sparklineData}
|
||||
width={80}
|
||||
height={32}
|
||||
delay={sparklineDelay}
|
||||
color="#f7931a"
|
||||
strokeWidth={2}
|
||||
showFill={true}
|
||||
fillOpacity={0.2}
|
||||
showGlow={true}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* Globe icon SVG
|
||||
*/
|
||||
const GlobeIcon: React.FC = () => (
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="#f7931a"
|
||||
strokeWidth={2}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
style={{ width: 28, height: 28 }}
|
||||
>
|
||||
<circle cx="12" cy="12" r="10" />
|
||||
<path d="M2 12h20" />
|
||||
<path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" />
|
||||
</svg>
|
||||
);
|
||||
@@ -0,0 +1,149 @@
|
||||
import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
|
||||
import { render, cleanup } from "@testing-library/react";
|
||||
import { DashboardOverviewSceneMobile } from "./DashboardOverviewSceneMobile";
|
||||
|
||||
/* eslint-disable @remotion/warn-native-media-tag */
|
||||
// Mock Remotion hooks
|
||||
vi.mock("remotion", () => ({
|
||||
useCurrentFrame: vi.fn(() => 60),
|
||||
useVideoConfig: vi.fn(() => ({ fps: 30, width: 1080, height: 1920 })),
|
||||
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>
|
||||
)),
|
||||
}));
|
||||
|
||||
// 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 StatsCounter component
|
||||
vi.mock("../../../components/StatsCounter", () => ({
|
||||
StatsCounter: vi.fn(({ targetNumber, label, fontSize }) => (
|
||||
<div data-testid="stats-counter" data-target={targetNumber} data-label={label} data-fontsize={fontSize}>
|
||||
{targetNumber}
|
||||
</div>
|
||||
)),
|
||||
}));
|
||||
|
||||
// Mock SparklineChart component
|
||||
vi.mock("../../../components/SparklineChart", () => ({
|
||||
SparklineChart: vi.fn(({ width, height }) => (
|
||||
<div data-testid="sparkline-chart" data-width={width} data-height={height}>
|
||||
Sparkline
|
||||
</div>
|
||||
)),
|
||||
}));
|
||||
|
||||
describe("DashboardOverviewSceneMobile", () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
cleanup();
|
||||
vi.resetAllMocks();
|
||||
});
|
||||
|
||||
it("renders without errors", () => {
|
||||
const { container } = render(<DashboardOverviewSceneMobile />);
|
||||
expect(container).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders the AbsoluteFill container", () => {
|
||||
const { container } = render(<DashboardOverviewSceneMobile />);
|
||||
const absoluteFill = container.querySelector('[data-testid="absolute-fill"]');
|
||||
expect(absoluteFill).toBeInTheDocument();
|
||||
expect(absoluteFill).toHaveClass("bg-zinc-900");
|
||||
});
|
||||
|
||||
it("renders the Dashboard header with mobile-optimized size", () => {
|
||||
const { container } = render(<DashboardOverviewSceneMobile />);
|
||||
const header = container.querySelector("h1");
|
||||
expect(header).toBeInTheDocument();
|
||||
expect(header).toHaveTextContent("Dashboard");
|
||||
// Mobile uses text-4xl vs desktop text-5xl
|
||||
expect(header).toHaveClass("text-4xl");
|
||||
});
|
||||
|
||||
it("renders three stats cards (Meetups, Benutzer, Events)", () => {
|
||||
const { container } = render(<DashboardOverviewSceneMobile />);
|
||||
const statsCounters = container.querySelectorAll('[data-testid="stats-counter"]');
|
||||
expect(statsCounters.length).toBe(3);
|
||||
});
|
||||
|
||||
it("renders stats counters with mobile-optimized font size (56px)", () => {
|
||||
const { container } = render(<DashboardOverviewSceneMobile />);
|
||||
const statsCounters = container.querySelectorAll('[data-testid="stats-counter"]');
|
||||
statsCounters.forEach((counter) => {
|
||||
// Mobile uses fontSize 56 vs desktop 72
|
||||
expect(counter).toHaveAttribute("data-fontsize", "56");
|
||||
});
|
||||
});
|
||||
|
||||
it("renders sparkline charts for each stat", () => {
|
||||
const { container } = render(<DashboardOverviewSceneMobile />);
|
||||
const sparklines = container.querySelectorAll('[data-testid="sparkline-chart"]');
|
||||
expect(sparklines.length).toBe(3);
|
||||
});
|
||||
|
||||
it("does not render sidebar (mobile has no sidebar)", () => {
|
||||
const { container } = render(<DashboardOverviewSceneMobile />);
|
||||
const sidebar = container.querySelector('[data-testid="dashboard-sidebar"]');
|
||||
expect(sidebar).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders card-slide audio", () => {
|
||||
const { container } = render(<DashboardOverviewSceneMobile />);
|
||||
const audioElements = container.querySelectorAll('[data-testid="audio"]');
|
||||
const cardSlideAudio = Array.from(audioElements).find((audio) =>
|
||||
audio.getAttribute("src")?.includes("card-slide.mp3")
|
||||
);
|
||||
expect(cardSlideAudio).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders ui-appear audio", () => {
|
||||
const { container } = render(<DashboardOverviewSceneMobile />);
|
||||
const audioElements = container.querySelectorAll('[data-testid="audio"]');
|
||||
const uiAppearAudio = Array.from(audioElements).find((audio) =>
|
||||
audio.getAttribute("src")?.includes("ui-appear.mp3")
|
||||
);
|
||||
expect(uiAppearAudio).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders wallpaper background", () => {
|
||||
const { container } = render(<DashboardOverviewSceneMobile />);
|
||||
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();
|
||||
});
|
||||
});
|
||||
272
videos/src/scenes/portal/mobile/DashboardOverviewSceneMobile.tsx
Normal file
272
videos/src/scenes/portal/mobile/DashboardOverviewSceneMobile.tsx
Normal file
@@ -0,0 +1,272 @@
|
||||
import {
|
||||
AbsoluteFill,
|
||||
useCurrentFrame,
|
||||
useVideoConfig,
|
||||
interpolate,
|
||||
spring,
|
||||
Img,
|
||||
staticFile,
|
||||
Sequence,
|
||||
} from "remotion";
|
||||
import { Audio } from "@remotion/media";
|
||||
import { StatsCounter } from "../../../components/StatsCounter";
|
||||
import { SparklineChart } from "../../../components/SparklineChart";
|
||||
|
||||
// Spring configurations
|
||||
const SNAPPY = { damping: 15, stiffness: 80 };
|
||||
|
||||
// Stagger delay between content cards
|
||||
const CARD_STAGGER_DELAY = 8;
|
||||
|
||||
// Sample sparkline data
|
||||
const MEETUP_TREND_DATA = [12, 15, 18, 14, 22, 25, 28, 32, 35, 42, 48, 55];
|
||||
const USER_TREND_DATA = [100, 145, 180, 220, 280, 350, 420, 510, 620, 780, 950, 1100];
|
||||
const EVENT_TREND_DATA = [5, 8, 12, 15, 18, 22, 28, 35, 42, 55, 68, 89];
|
||||
|
||||
/**
|
||||
* DashboardOverviewSceneMobile - Scene 3: Dashboard Overview for Mobile (12 seconds / 360 frames @ 30fps)
|
||||
*
|
||||
* Mobile layout adaptations:
|
||||
* - No sidebar (removed for portrait orientation)
|
||||
* - Vertical card stacking instead of horizontal row
|
||||
* - Smaller card widths optimized for 1080px width
|
||||
* - Reduced padding and spacing
|
||||
*/
|
||||
export const DashboardOverviewSceneMobile: 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], [25, 0]);
|
||||
const perspectiveScale = interpolate(perspectiveSpring, [0, 1], [0.88, 1]);
|
||||
const perspectiveOpacity = interpolate(perspectiveSpring, [0, 1], [0, 1]);
|
||||
|
||||
// Header entrance animation (delayed)
|
||||
const headerDelay = Math.floor(0.5 * fps);
|
||||
const headerSpring = spring({
|
||||
frame: frame - headerDelay,
|
||||
fps,
|
||||
config: SNAPPY,
|
||||
});
|
||||
const headerOpacity = interpolate(headerSpring, [0, 1], [0, 1]);
|
||||
const headerY = interpolate(headerSpring, [0, 1], [-30, 0]);
|
||||
|
||||
// Subtle background glow pulse
|
||||
const glowIntensity = interpolate(
|
||||
Math.sin(frame * 0.04),
|
||||
[-1, 1],
|
||||
[0.3, 0.5]
|
||||
);
|
||||
|
||||
// Mobile card width
|
||||
const cardWidth = 420;
|
||||
|
||||
// Card entrance delays (staggered)
|
||||
const cardBaseDelay = Math.floor(1 * fps);
|
||||
|
||||
return (
|
||||
<AbsoluteFill className="bg-zinc-900 overflow-hidden">
|
||||
{/* Audio: card-slide for initial entrance */}
|
||||
<Sequence from={cardBaseDelay} durationInFrames={Math.floor(1 * fps)}>
|
||||
<Audio src={staticFile("sfx/card-slide.mp3")} volume={0.5} />
|
||||
</Sequence>
|
||||
|
||||
{/* Audio: ui-appear for stats */}
|
||||
<Sequence from={cardBaseDelay + Math.floor(0.5 * fps)} durationInFrames={Math.floor(0.5 * fps)}>
|
||||
<Audio src={staticFile("sfx/ui-appear.mp3")} volume={0.4} />
|
||||
</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 center, transparent 0%, rgba(24, 24, 27, 0.6) 50%, 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 - Centered for mobile */}
|
||||
<div className="absolute inset-0 flex flex-col items-center px-8 pt-16">
|
||||
{/* Header */}
|
||||
<div
|
||||
className="mb-8 text-center"
|
||||
style={{
|
||||
opacity: headerOpacity,
|
||||
transform: `translateY(${headerY}px)`,
|
||||
}}
|
||||
>
|
||||
<h1 className="text-4xl font-bold text-white mb-2">Dashboard</h1>
|
||||
<p className="text-lg text-zinc-400">
|
||||
Willkommen im Einundzwanzig Portal
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Stats Cards - Vertical stack for mobile */}
|
||||
<div className="flex flex-col gap-5 w-full items-center">
|
||||
{/* Meetups Card */}
|
||||
<StatsCardMobile
|
||||
title="Meetups"
|
||||
delay={cardBaseDelay}
|
||||
width={cardWidth}
|
||||
glowIntensity={glowIntensity}
|
||||
>
|
||||
<StatsCounter
|
||||
targetNumber={204}
|
||||
delay={cardBaseDelay + 15}
|
||||
duration={60}
|
||||
label="Aktive Gruppen"
|
||||
fontSize={56}
|
||||
color="#f7931a"
|
||||
/>
|
||||
<div className="mt-3">
|
||||
<SparklineChart
|
||||
data={MEETUP_TREND_DATA}
|
||||
width={cardWidth - 48}
|
||||
height={50}
|
||||
delay={cardBaseDelay + 30}
|
||||
showFill={true}
|
||||
fillOpacity={0.15}
|
||||
/>
|
||||
</div>
|
||||
</StatsCardMobile>
|
||||
|
||||
{/* Users Card */}
|
||||
<StatsCardMobile
|
||||
title="Benutzer"
|
||||
delay={cardBaseDelay + CARD_STAGGER_DELAY}
|
||||
width={cardWidth}
|
||||
glowIntensity={glowIntensity}
|
||||
>
|
||||
<StatsCounter
|
||||
targetNumber={1247}
|
||||
delay={cardBaseDelay + CARD_STAGGER_DELAY + 15}
|
||||
duration={60}
|
||||
label="Registrierte Nutzer"
|
||||
fontSize={56}
|
||||
color="#f7931a"
|
||||
/>
|
||||
<div className="mt-3">
|
||||
<SparklineChart
|
||||
data={USER_TREND_DATA}
|
||||
width={cardWidth - 48}
|
||||
height={50}
|
||||
delay={cardBaseDelay + CARD_STAGGER_DELAY + 30}
|
||||
showFill={true}
|
||||
fillOpacity={0.15}
|
||||
/>
|
||||
</div>
|
||||
</StatsCardMobile>
|
||||
|
||||
{/* Events Card */}
|
||||
<StatsCardMobile
|
||||
title="Events"
|
||||
delay={cardBaseDelay + CARD_STAGGER_DELAY * 2}
|
||||
width={cardWidth}
|
||||
glowIntensity={glowIntensity}
|
||||
>
|
||||
<StatsCounter
|
||||
targetNumber={89}
|
||||
delay={cardBaseDelay + CARD_STAGGER_DELAY * 2 + 15}
|
||||
duration={60}
|
||||
label="Diese Woche"
|
||||
fontSize={56}
|
||||
color="#f7931a"
|
||||
/>
|
||||
<div className="mt-3">
|
||||
<SparklineChart
|
||||
data={EVENT_TREND_DATA}
|
||||
width={cardWidth - 48}
|
||||
height={50}
|
||||
delay={cardBaseDelay + CARD_STAGGER_DELAY * 2 + 30}
|
||||
showFill={true}
|
||||
fillOpacity={0.15}
|
||||
/>
|
||||
</div>
|
||||
</StatsCardMobile>
|
||||
</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>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* Stats Card container with animated entrance for mobile
|
||||
*/
|
||||
type StatsCardMobileProps = {
|
||||
title: string;
|
||||
delay: number;
|
||||
width: number;
|
||||
glowIntensity: number;
|
||||
children: React.ReactNode;
|
||||
};
|
||||
|
||||
const StatsCardMobile: React.FC<StatsCardMobileProps> = ({
|
||||
title,
|
||||
delay,
|
||||
width,
|
||||
glowIntensity,
|
||||
children,
|
||||
}) => {
|
||||
const frame = useCurrentFrame();
|
||||
const { fps } = useVideoConfig();
|
||||
|
||||
const adjustedFrame = Math.max(0, frame - delay);
|
||||
|
||||
const cardSpring = spring({
|
||||
frame: adjustedFrame,
|
||||
fps,
|
||||
config: SNAPPY,
|
||||
});
|
||||
|
||||
const cardScale = interpolate(cardSpring, [0, 1], [0.85, 1]);
|
||||
const cardOpacity = interpolate(cardSpring, [0, 1], [0, 1]);
|
||||
const cardY = interpolate(cardSpring, [0, 1], [30, 0]);
|
||||
|
||||
return (
|
||||
<div
|
||||
className="rounded-2xl bg-zinc-800/80 backdrop-blur-md border border-zinc-700/50 p-5"
|
||||
style={{
|
||||
width,
|
||||
transform: `translateY(${cardY}px) scale(${cardScale})`,
|
||||
opacity: cardOpacity,
|
||||
boxShadow: `0 0 ${30 * glowIntensity}px rgba(247, 147, 26, 0.1), 0 8px 32px rgba(0, 0, 0, 0.4)`,
|
||||
}}
|
||||
>
|
||||
<h3 className="text-base font-semibold text-zinc-300 mb-3">{title}</h3>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,151 @@
|
||||
import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
|
||||
import { render, cleanup } from "@testing-library/react";
|
||||
import { MeetupShowcaseSceneMobile } from "./MeetupShowcaseSceneMobile";
|
||||
|
||||
/* eslint-disable @remotion/warn-native-media-tag */
|
||||
// Mock Remotion hooks
|
||||
vi.mock("remotion", () => ({
|
||||
useCurrentFrame: vi.fn(() => 60),
|
||||
useVideoConfig: vi.fn(() => ({ fps: 30, width: 1080, height: 1920 })),
|
||||
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>
|
||||
)),
|
||||
}));
|
||||
|
||||
// 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 MeetupCard component
|
||||
vi.mock("../../../components/MeetupCard", () => ({
|
||||
MeetupCard: vi.fn(({ name, width }) => (
|
||||
<div data-testid="meetup-card" data-name={name} data-width={width}>
|
||||
{name}
|
||||
</div>
|
||||
)),
|
||||
}));
|
||||
|
||||
describe("MeetupShowcaseSceneMobile", () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
cleanup();
|
||||
vi.resetAllMocks();
|
||||
});
|
||||
|
||||
it("renders without errors", () => {
|
||||
const { container } = render(<MeetupShowcaseSceneMobile />);
|
||||
expect(container).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders the AbsoluteFill container", () => {
|
||||
const { container } = render(<MeetupShowcaseSceneMobile />);
|
||||
const absoluteFill = container.querySelector('[data-testid="absolute-fill"]');
|
||||
expect(absoluteFill).toBeInTheDocument();
|
||||
expect(absoluteFill).toHaveClass("bg-zinc-900");
|
||||
});
|
||||
|
||||
it("renders the header with mobile-optimized size", () => {
|
||||
const { container } = render(<MeetupShowcaseSceneMobile />);
|
||||
const header = container.querySelector("h1");
|
||||
expect(header).toBeInTheDocument();
|
||||
expect(header).toHaveTextContent("Meine nächsten Meetups");
|
||||
// Mobile uses text-3xl vs desktop text-5xl
|
||||
expect(header).toHaveClass("text-3xl");
|
||||
});
|
||||
|
||||
it("renders the featured MeetupCard with mobile-optimized width", () => {
|
||||
const { container } = render(<MeetupShowcaseSceneMobile />);
|
||||
const meetupCard = container.querySelector('[data-testid="meetup-card"]');
|
||||
expect(meetupCard).toBeInTheDocument();
|
||||
// Mobile uses 360px width vs desktop 450px
|
||||
expect(meetupCard).toHaveAttribute("data-width", "360");
|
||||
});
|
||||
|
||||
it("renders three meetup items total (1 featured + 2 upcoming)", () => {
|
||||
const { container } = render(<MeetupShowcaseSceneMobile />);
|
||||
const meetupLogos = container.querySelectorAll('[data-testid="remotion-img"]');
|
||||
// 3 meetup logos + 1 wallpaper = 4 images total
|
||||
// But MeetupCard is mocked, so we count the upcoming meetup logos
|
||||
expect(meetupLogos.length).toBeGreaterThanOrEqual(3);
|
||||
});
|
||||
|
||||
it("renders slide-in audio for section entrance", () => {
|
||||
const { container } = render(<MeetupShowcaseSceneMobile />);
|
||||
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 card-slide audio for featured card", () => {
|
||||
const { container } = render(<MeetupShowcaseSceneMobile />);
|
||||
const audioElements = container.querySelectorAll('[data-testid="audio"]');
|
||||
const cardSlideAudio = Array.from(audioElements).find((audio) =>
|
||||
audio.getAttribute("src")?.includes("card-slide.mp3")
|
||||
);
|
||||
expect(cardSlideAudio).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders badge-appear audio for list items", () => {
|
||||
const { container } = render(<MeetupShowcaseSceneMobile />);
|
||||
const audioElements = container.querySelectorAll('[data-testid="audio"]');
|
||||
const badgeAppearAudio = Array.from(audioElements).find((audio) =>
|
||||
audio.getAttribute("src")?.includes("badge-appear.mp3")
|
||||
);
|
||||
expect(badgeAppearAudio).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders wallpaper background", () => {
|
||||
const { container } = render(<MeetupShowcaseSceneMobile />);
|
||||
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 'Weitere Termine' section header", () => {
|
||||
const { container } = render(<MeetupShowcaseSceneMobile />);
|
||||
const sectionHeader = container.querySelector("h3");
|
||||
expect(sectionHeader).toBeInTheDocument();
|
||||
expect(sectionHeader).toHaveTextContent("Weitere Termine");
|
||||
});
|
||||
|
||||
it("renders 'Nächster Termin' badge", () => {
|
||||
const { container } = render(<MeetupShowcaseSceneMobile />);
|
||||
const badge = container.textContent;
|
||||
expect(badge).toContain("Nächster Termin");
|
||||
});
|
||||
});
|
||||
422
videos/src/scenes/portal/mobile/MeetupShowcaseSceneMobile.tsx
Normal file
422
videos/src/scenes/portal/mobile/MeetupShowcaseSceneMobile.tsx
Normal file
@@ -0,0 +1,422 @@
|
||||
import {
|
||||
AbsoluteFill,
|
||||
useCurrentFrame,
|
||||
useVideoConfig,
|
||||
interpolate,
|
||||
spring,
|
||||
Img,
|
||||
staticFile,
|
||||
Sequence,
|
||||
} from "remotion";
|
||||
import { Audio } from "@remotion/media";
|
||||
import { MeetupCard } from "../../../components/MeetupCard";
|
||||
|
||||
// Spring configurations
|
||||
const SNAPPY = { damping: 15, stiffness: 80 };
|
||||
|
||||
// Stagger delay between meetup list items
|
||||
const LIST_ITEM_STAGGER = 10;
|
||||
|
||||
// Upcoming meetup data
|
||||
const UPCOMING_MEETUPS = [
|
||||
{
|
||||
name: "EINUNDZWANZIG Kempten",
|
||||
location: "Kempten im Allgäu",
|
||||
date: "Di, 28. Jan 2025",
|
||||
time: "19:00 Uhr",
|
||||
logoPath: "logos/EinundzwanzigKempten.png",
|
||||
isFeatured: true,
|
||||
},
|
||||
{
|
||||
name: "EINUNDZWANZIG Memmingen",
|
||||
location: "Memmingen",
|
||||
date: "Mi, 29. Jan 2025",
|
||||
time: "19:30 Uhr",
|
||||
logoPath: "logos/EinundzwanzigMemmingen.png",
|
||||
isFeatured: false,
|
||||
},
|
||||
{
|
||||
name: "EINUNDZWANZIG Friedrichshafen",
|
||||
location: "Friedrichshafen",
|
||||
date: "Do, 30. Jan 2025",
|
||||
time: "20:00 Uhr",
|
||||
logoPath: "logos/EinundzwanzigFriedrichshafen.png",
|
||||
isFeatured: false,
|
||||
},
|
||||
];
|
||||
|
||||
/**
|
||||
* MeetupShowcaseSceneMobile - Scene 4: Meine nächsten Meetup Termine for Mobile (12 seconds / 360 frames @ 30fps)
|
||||
*
|
||||
* Mobile layout adaptations:
|
||||
* - Vertical layout for featured meetup card (stacked info)
|
||||
* - Smaller card widths optimized for 1080px width
|
||||
* - Reduced text sizes and spacing
|
||||
* - Action buttons stacked vertically
|
||||
*/
|
||||
export const MeetupShowcaseSceneMobile: 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]);
|
||||
|
||||
// Featured card entrance delay
|
||||
const featuredCardDelay = Math.floor(0.8 * fps);
|
||||
|
||||
// Featured card 3D shadow animation
|
||||
const featuredSpring = spring({
|
||||
frame: frame - featuredCardDelay,
|
||||
fps,
|
||||
config: { damping: 18, stiffness: 70 },
|
||||
});
|
||||
const featuredScale = interpolate(featuredSpring, [0, 1], [0.85, 1]);
|
||||
const featuredOpacity = interpolate(featuredSpring, [0, 1], [0, 1]);
|
||||
const featuredRotateX = interpolate(featuredSpring, [0, 1], [15, 0]);
|
||||
const featuredShadowY = interpolate(featuredSpring, [0, 1], [20, 40]);
|
||||
const featuredShadowBlur = interpolate(featuredSpring, [0, 1], [10, 60]);
|
||||
|
||||
// Date/time info animation (after featured card)
|
||||
const dateDelay = featuredCardDelay + Math.floor(0.4 * fps);
|
||||
const dateSpring = spring({
|
||||
frame: frame - dateDelay,
|
||||
fps,
|
||||
config: SNAPPY,
|
||||
});
|
||||
const dateOpacity = interpolate(dateSpring, [0, 1], [0, 1]);
|
||||
const dateY = interpolate(dateSpring, [0, 1], [20, 0]);
|
||||
|
||||
// Upcoming list header delay
|
||||
const listHeaderDelay = featuredCardDelay + Math.floor(1 * fps);
|
||||
const listHeaderSpring = spring({
|
||||
frame: frame - listHeaderDelay,
|
||||
fps,
|
||||
config: SNAPPY,
|
||||
});
|
||||
const listHeaderOpacity = interpolate(listHeaderSpring, [0, 1], [0, 1]);
|
||||
const listHeaderX = interpolate(listHeaderSpring, [0, 1], [-30, 0]);
|
||||
|
||||
// Subtle glow pulse
|
||||
const glowIntensity = interpolate(
|
||||
Math.sin(frame * 0.05),
|
||||
[-1, 1],
|
||||
[0.3, 0.6]
|
||||
);
|
||||
|
||||
// Featured meetup data
|
||||
const featuredMeetup = UPCOMING_MEETUPS[0];
|
||||
const upcomingMeetups = UPCOMING_MEETUPS.slice(1);
|
||||
|
||||
return (
|
||||
<AbsoluteFill className="bg-zinc-900 overflow-hidden">
|
||||
{/* 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>
|
||||
|
||||
{/* Audio: card-slide for featured card */}
|
||||
<Sequence from={featuredCardDelay} durationInFrames={Math.floor(0.8 * fps)}>
|
||||
<Audio src={staticFile("sfx/card-slide.mp3")} volume={0.5} />
|
||||
</Sequence>
|
||||
|
||||
{/* Audio: badge-appear for list items */}
|
||||
<Sequence from={listHeaderDelay + LIST_ITEM_STAGGER} durationInFrames={Math.floor(0.5 * fps)}>
|
||||
<Audio src={staticFile("sfx/badge-appear.mp3")} volume={0.4} />
|
||||
</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 50% 40%, 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 - Centered for mobile */}
|
||||
<div className="absolute inset-0 flex flex-col items-center justify-center px-8">
|
||||
{/* Section Header */}
|
||||
<div
|
||||
className="text-center mb-8"
|
||||
style={{
|
||||
opacity: headerOpacity,
|
||||
transform: `translateY(${headerY}px)`,
|
||||
}}
|
||||
>
|
||||
<h1 className="text-3xl font-bold text-white mb-2">
|
||||
Meine nächsten Meetups
|
||||
</h1>
|
||||
<p className="text-base text-zinc-400">
|
||||
Kommende Bitcoin-Treffen in deiner Region
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Featured Meetup Card with 3D Shadow - Mobile optimized */}
|
||||
<div
|
||||
className="relative mb-6 w-full max-w-md"
|
||||
style={{
|
||||
opacity: featuredOpacity,
|
||||
transform: `perspective(800px) rotateX(${featuredRotateX}deg) scale(${featuredScale})`,
|
||||
transformOrigin: "center bottom",
|
||||
}}
|
||||
>
|
||||
{/* 3D Shadow beneath card */}
|
||||
<div
|
||||
className="absolute left-1/2 -translate-x-1/2 rounded-full"
|
||||
style={{
|
||||
bottom: -15,
|
||||
width: "80%",
|
||||
height: 15,
|
||||
background: `radial-gradient(ellipse at center, rgba(0,0,0,0.5) 0%, transparent 70%)`,
|
||||
transform: `translateY(${featuredShadowY * 0.7}px)`,
|
||||
filter: `blur(${featuredShadowBlur / 4}px)`,
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Featured Meetup Card - Vertical layout for mobile */}
|
||||
<div
|
||||
className="rounded-2xl bg-zinc-800/90 backdrop-blur-md border border-zinc-700/50 p-6"
|
||||
style={{
|
||||
boxShadow: `0 ${featuredShadowY}px ${featuredShadowBlur}px rgba(0, 0, 0, 0.5),
|
||||
0 0 ${40 * glowIntensity}px rgba(247, 147, 26, 0.2)`,
|
||||
}}
|
||||
>
|
||||
{/* Meetup Card Component */}
|
||||
<MeetupCard
|
||||
logoSrc={staticFile(featuredMeetup.logoPath)}
|
||||
name={featuredMeetup.name}
|
||||
location={featuredMeetup.location}
|
||||
delay={featuredCardDelay + 5}
|
||||
width={360}
|
||||
accentColor="#f7931a"
|
||||
/>
|
||||
|
||||
{/* Date/Time Info - Below card for mobile */}
|
||||
<div
|
||||
className="flex flex-col gap-3 pt-5 mt-5 border-t border-zinc-600/50"
|
||||
style={{
|
||||
opacity: dateOpacity,
|
||||
transform: `translateY(${dateY}px)`,
|
||||
}}
|
||||
>
|
||||
{/* Date */}
|
||||
<div className="flex items-center gap-3">
|
||||
<CalendarIcon />
|
||||
<span className="text-xl font-semibold text-white">
|
||||
{featuredMeetup.date}
|
||||
</span>
|
||||
</div>
|
||||
{/* Time */}
|
||||
<div className="flex items-center gap-3">
|
||||
<ClockIcon />
|
||||
<span className="text-lg text-zinc-300">
|
||||
{featuredMeetup.time}
|
||||
</span>
|
||||
</div>
|
||||
{/* Badge */}
|
||||
<div
|
||||
className="mt-1 inline-flex items-center gap-2 px-4 py-2 rounded-full text-sm font-semibold self-start"
|
||||
style={{
|
||||
backgroundColor: "rgba(247, 147, 26, 0.2)",
|
||||
color: "#f7931a",
|
||||
border: "1px solid rgba(247, 147, 26, 0.3)",
|
||||
boxShadow: `0 0 ${20 * glowIntensity}px rgba(247, 147, 26, 0.3)`,
|
||||
}}
|
||||
>
|
||||
<span className="w-2 h-2 rounded-full bg-green-500 animate-pulse" />
|
||||
Nächster Termin
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Upcoming Meetups Section */}
|
||||
<div className="w-full max-w-md">
|
||||
{/* Section Header */}
|
||||
<h3
|
||||
className="text-sm font-semibold text-zinc-400 mb-3 uppercase tracking-wider"
|
||||
style={{
|
||||
opacity: listHeaderOpacity,
|
||||
transform: `translateX(${listHeaderX}px)`,
|
||||
}}
|
||||
>
|
||||
Weitere Termine
|
||||
</h3>
|
||||
|
||||
{/* Upcoming Meetups List - Vertical for mobile */}
|
||||
<div className="flex flex-col gap-3">
|
||||
{upcomingMeetups.map((meetup, index) => (
|
||||
<UpcomingMeetupItemMobile
|
||||
key={meetup.name}
|
||||
meetup={meetup}
|
||||
delay={listHeaderDelay + (index + 1) * LIST_ITEM_STAGGER}
|
||||
glowIntensity={glowIntensity}
|
||||
/>
|
||||
))}
|
||||
</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>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* Upcoming meetup list item for mobile
|
||||
*/
|
||||
type UpcomingMeetupItemMobileProps = {
|
||||
meetup: {
|
||||
name: string;
|
||||
location: string;
|
||||
date: string;
|
||||
time: string;
|
||||
logoPath: string;
|
||||
};
|
||||
delay: number;
|
||||
glowIntensity: number;
|
||||
};
|
||||
|
||||
const UpcomingMeetupItemMobile: React.FC<UpcomingMeetupItemMobileProps> = ({
|
||||
meetup,
|
||||
delay,
|
||||
glowIntensity,
|
||||
}) => {
|
||||
const frame = useCurrentFrame();
|
||||
const { fps } = useVideoConfig();
|
||||
|
||||
const adjustedFrame = Math.max(0, frame - delay);
|
||||
|
||||
const itemSpring = spring({
|
||||
frame: adjustedFrame,
|
||||
fps,
|
||||
config: SNAPPY,
|
||||
});
|
||||
|
||||
const itemOpacity = interpolate(itemSpring, [0, 1], [0, 1]);
|
||||
const itemY = interpolate(itemSpring, [0, 1], [30, 0]);
|
||||
const itemScale = interpolate(itemSpring, [0, 1], [0.9, 1]);
|
||||
|
||||
return (
|
||||
<div
|
||||
className="rounded-xl bg-zinc-800/70 backdrop-blur-sm border border-zinc-700/40 p-4"
|
||||
style={{
|
||||
opacity: itemOpacity,
|
||||
transform: `translateY(${itemY}px) scale(${itemScale})`,
|
||||
boxShadow: `0 4px 20px rgba(0, 0, 0, 0.3), 0 0 ${15 * glowIntensity}px rgba(247, 147, 26, 0.1)`,
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center gap-4">
|
||||
{/* Mini Logo */}
|
||||
<div
|
||||
className="w-12 h-12 rounded-lg bg-zinc-700/50 flex items-center justify-center overflow-hidden flex-shrink-0"
|
||||
style={{
|
||||
boxShadow: `0 0 ${10 * glowIntensity}px rgba(247, 147, 26, 0.2)`,
|
||||
}}
|
||||
>
|
||||
<Img
|
||||
src={staticFile(meetup.logoPath)}
|
||||
style={{
|
||||
width: 36,
|
||||
height: 36,
|
||||
objectFit: "contain",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Meetup Info */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="font-semibold text-white text-base truncate">
|
||||
{meetup.name}
|
||||
</div>
|
||||
<div className="text-sm text-zinc-400 flex items-center gap-2 mt-1">
|
||||
<span>{meetup.date}</span>
|
||||
<span className="text-zinc-600">•</span>
|
||||
<span>{meetup.time}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* Calendar icon SVG
|
||||
*/
|
||||
const CalendarIcon: React.FC = () => (
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="#f7931a"
|
||||
strokeWidth={2}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
style={{ width: 22, height: 22 }}
|
||||
>
|
||||
<rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
|
||||
<line x1="16" y1="2" x2="16" y2="6" />
|
||||
<line x1="8" y1="2" x2="8" y2="6" />
|
||||
<line x1="3" y1="10" x2="21" y2="10" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
/**
|
||||
* Clock icon SVG
|
||||
*/
|
||||
const ClockIcon: React.FC = () => (
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="#a1a1aa"
|
||||
strokeWidth={2}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
style={{ width: 20, height: 20 }}
|
||||
>
|
||||
<circle cx="12" cy="12" r="10" />
|
||||
<polyline points="12 6 12 12 16 14" />
|
||||
</svg>
|
||||
);
|
||||
163
videos/src/scenes/portal/mobile/PortalIntroSceneMobile.test.tsx
Normal file
163
videos/src/scenes/portal/mobile/PortalIntroSceneMobile.test.tsx
Normal file
@@ -0,0 +1,163 @@
|
||||
import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
|
||||
import { render, cleanup } from "@testing-library/react";
|
||||
import { PortalIntroSceneMobile } from "./PortalIntroSceneMobile";
|
||||
|
||||
/* eslint-disable @remotion/warn-native-media-tag */
|
||||
// Mock Remotion hooks
|
||||
vi.mock("remotion", () => ({
|
||||
useCurrentFrame: vi.fn(() => 60),
|
||||
useVideoConfig: vi.fn(() => ({ fps: 30, width: 1080, height: 1920 })),
|
||||
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 AnimatedLogo component
|
||||
vi.mock("../../../components/AnimatedLogo", () => ({
|
||||
AnimatedLogo: vi.fn(({ size, delay }) => (
|
||||
<div data-testid="animated-logo" data-size={size} data-delay={delay}>
|
||||
AnimatedLogo
|
||||
</div>
|
||||
)),
|
||||
}));
|
||||
|
||||
// Mock BitcoinEffect component
|
||||
vi.mock("../../../components/BitcoinEffect", () => ({
|
||||
BitcoinEffect: vi.fn(() => (
|
||||
<div data-testid="bitcoin-effect">BitcoinEffect</div>
|
||||
)),
|
||||
}));
|
||||
|
||||
describe("PortalIntroSceneMobile", () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
cleanup();
|
||||
vi.resetAllMocks();
|
||||
});
|
||||
|
||||
it("renders without errors", () => {
|
||||
const { container } = render(<PortalIntroSceneMobile />);
|
||||
expect(container).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders the AbsoluteFill container with correct classes", () => {
|
||||
const { container } = render(<PortalIntroSceneMobile />);
|
||||
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(<PortalIntroSceneMobile />);
|
||||
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 AnimatedLogo with mobile-optimized size (280px)", () => {
|
||||
const { container } = render(<PortalIntroSceneMobile />);
|
||||
const logo = container.querySelector('[data-testid="animated-logo"]');
|
||||
expect(logo).toBeInTheDocument();
|
||||
// Mobile uses 280px vs desktop 350px
|
||||
expect(logo).toHaveAttribute("data-size", "280");
|
||||
// delay is 0.5 * fps = 0.5 * 30 = 15 frames
|
||||
expect(logo).toHaveAttribute("data-delay", "15");
|
||||
});
|
||||
|
||||
it("renders the BitcoinEffect component", () => {
|
||||
const { container } = render(<PortalIntroSceneMobile />);
|
||||
const bitcoinEffect = container.querySelector('[data-testid="bitcoin-effect"]');
|
||||
expect(bitcoinEffect).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders the EINUNDZWANZIG title with mobile-appropriate sizing", () => {
|
||||
const { container } = render(<PortalIntroSceneMobile />);
|
||||
const title = container.querySelector("h1");
|
||||
expect(title).toBeInTheDocument();
|
||||
expect(title).toHaveTextContent("EINUNDZWANZIG");
|
||||
// Mobile uses text-5xl vs desktop text-6xl
|
||||
expect(title).toHaveClass("text-5xl");
|
||||
expect(title).toHaveClass("font-bold");
|
||||
expect(title).toHaveClass("text-white");
|
||||
});
|
||||
|
||||
it("renders the subtitle with orange color", () => {
|
||||
const { container } = render(<PortalIntroSceneMobile />);
|
||||
const subtitle = container.querySelector("p");
|
||||
expect(subtitle).toBeInTheDocument();
|
||||
expect(subtitle).toHaveTextContent("Das Portal");
|
||||
expect(subtitle).toHaveClass("text-orange-500");
|
||||
});
|
||||
|
||||
it("renders audio sequences for sound effects", () => {
|
||||
const { container } = render(<PortalIntroSceneMobile />);
|
||||
const sequences = container.querySelectorAll('[data-testid="sequence"]');
|
||||
expect(sequences.length).toBeGreaterThanOrEqual(2);
|
||||
});
|
||||
|
||||
it("includes logo-whoosh audio", () => {
|
||||
const { container } = render(<PortalIntroSceneMobile />);
|
||||
const audioElements = container.querySelectorAll('[data-testid="audio"]');
|
||||
const whooshAudio = Array.from(audioElements).find((audio) =>
|
||||
audio.getAttribute("src")?.includes("logo-whoosh.mp3")
|
||||
);
|
||||
expect(whooshAudio).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("includes logo-reveal audio", () => {
|
||||
const { container } = render(<PortalIntroSceneMobile />);
|
||||
const audioElements = container.querySelectorAll('[data-testid="audio"]');
|
||||
const revealAudio = Array.from(audioElements).find((audio) =>
|
||||
audio.getAttribute("src")?.includes("logo-reveal.mp3")
|
||||
);
|
||||
expect(revealAudio).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders vignette overlay with pointer-events-none", () => {
|
||||
const { container } = render(<PortalIntroSceneMobile />);
|
||||
const vignette = container.querySelector('[class*="pointer-events-none"]');
|
||||
expect(vignette).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
189
videos/src/scenes/portal/mobile/PortalIntroSceneMobile.tsx
Normal file
189
videos/src/scenes/portal/mobile/PortalIntroSceneMobile.tsx
Normal file
@@ -0,0 +1,189 @@
|
||||
import {
|
||||
AbsoluteFill,
|
||||
useCurrentFrame,
|
||||
useVideoConfig,
|
||||
interpolate,
|
||||
spring,
|
||||
Img,
|
||||
staticFile,
|
||||
Sequence,
|
||||
} from "remotion";
|
||||
import { Audio } from "@remotion/media";
|
||||
import { AnimatedLogo } from "../../../components/AnimatedLogo";
|
||||
import { BitcoinEffect } from "../../../components/BitcoinEffect";
|
||||
|
||||
// Spring configurations from PRD
|
||||
const SMOOTH = { damping: 200 };
|
||||
|
||||
/**
|
||||
* PortalIntroSceneMobile - Scene 1: Logo Reveal for Mobile (6 seconds / 180 frames @ 30fps)
|
||||
*
|
||||
* Mobile layout adaptations:
|
||||
* - Smaller logo (280px vs 350px)
|
||||
* - Adjusted text sizes for portrait orientation
|
||||
* - Vertical centering optimized for 1080x1920
|
||||
*/
|
||||
export const PortalIntroSceneMobile: React.FC = () => {
|
||||
const frame = useCurrentFrame();
|
||||
const { fps } = useVideoConfig();
|
||||
|
||||
// Background zoom animation - starts zoomed in, zooms out
|
||||
const backgroundZoom = interpolate(frame, [0, 3 * fps], [1.2, 1.0], {
|
||||
extrapolateRight: "clamp",
|
||||
});
|
||||
|
||||
// Logo entrance spring animation - delayed slightly for dramatic effect
|
||||
const logoEntranceDelay = Math.floor(0.5 * fps);
|
||||
const logoSpring = spring({
|
||||
frame: frame - logoEntranceDelay,
|
||||
fps,
|
||||
config: { damping: 15, stiffness: 80 },
|
||||
});
|
||||
const logoScale = interpolate(logoSpring, [0, 1], [0, 1]);
|
||||
const logoOpacity = interpolate(logoSpring, [0, 0.5], [0, 1], {
|
||||
extrapolateRight: "clamp",
|
||||
});
|
||||
|
||||
// Outer glow pulse effect
|
||||
const glowIntensity = interpolate(
|
||||
Math.sin((frame - logoEntranceDelay) * 0.08),
|
||||
[-1, 1],
|
||||
[0.4, 0.8]
|
||||
);
|
||||
const glowScale = interpolate(
|
||||
Math.sin((frame - logoEntranceDelay) * 0.06),
|
||||
[-1, 1],
|
||||
[1.0, 1.15]
|
||||
);
|
||||
|
||||
// Title text entrance - appears after logo
|
||||
const titleDelay = Math.floor(2 * fps);
|
||||
const titleSpring = spring({
|
||||
frame: frame - titleDelay,
|
||||
fps,
|
||||
config: SMOOTH,
|
||||
});
|
||||
const titleOpacity = interpolate(titleSpring, [0, 1], [0, 1]);
|
||||
const titleY = interpolate(titleSpring, [0, 1], [30, 0]);
|
||||
|
||||
// Subtitle entrance
|
||||
const subtitleDelay = Math.floor(2.8 * fps);
|
||||
const subtitleSpring = spring({
|
||||
frame: frame - subtitleDelay,
|
||||
fps,
|
||||
config: SMOOTH,
|
||||
});
|
||||
const subtitleOpacity = interpolate(subtitleSpring, [0, 1], [0, 1]);
|
||||
|
||||
// Center position for logo (adjusts as text appears)
|
||||
const contentY = interpolate(frame, [titleDelay, titleDelay + fps], [0, -40], {
|
||||
extrapolateLeft: "clamp",
|
||||
extrapolateRight: "clamp",
|
||||
});
|
||||
|
||||
return (
|
||||
<AbsoluteFill className="bg-zinc-900 overflow-hidden">
|
||||
{/* Audio: logo-whoosh at start */}
|
||||
<Sequence durationInFrames={Math.floor(2 * fps)}>
|
||||
<Audio src={staticFile("sfx/logo-whoosh.mp3")} volume={0.7} />
|
||||
</Sequence>
|
||||
|
||||
{/* Audio: logo-reveal when logo appears */}
|
||||
<Sequence from={logoEntranceDelay} durationInFrames={Math.floor(2 * fps)}>
|
||||
<Audio src={staticFile("sfx/logo-reveal.mp3")} volume={0.6} />
|
||||
</Sequence>
|
||||
|
||||
{/* Wallpaper Background with zoom effect */}
|
||||
<div
|
||||
className="absolute inset-0"
|
||||
style={{
|
||||
transform: `scale(${backgroundZoom})`,
|
||||
transformOrigin: "center center",
|
||||
}}
|
||||
>
|
||||
<Img
|
||||
src={staticFile("einundzwanzig-wallpaper.png")}
|
||||
className="absolute inset-0 w-full h-full object-cover"
|
||||
style={{ opacity: 0.25 }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Dark gradient overlay for depth */}
|
||||
<div
|
||||
className="absolute inset-0"
|
||||
style={{
|
||||
background:
|
||||
"radial-gradient(circle at center, transparent 0%, rgba(24, 24, 27, 0.7) 70%, rgba(24, 24, 27, 0.95) 100%)",
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Bitcoin particle effect in background */}
|
||||
<BitcoinEffect />
|
||||
|
||||
{/* Content container with vertical centering */}
|
||||
<div
|
||||
className="absolute inset-0 flex flex-col items-center justify-center"
|
||||
style={{
|
||||
transform: `translateY(${contentY}px)`,
|
||||
}}
|
||||
>
|
||||
{/* Outer glow effect behind logo */}
|
||||
<div
|
||||
className="absolute"
|
||||
style={{
|
||||
width: 400,
|
||||
height: 400,
|
||||
background:
|
||||
"radial-gradient(circle, rgba(247, 147, 26, 0.4) 0%, transparent 60%)",
|
||||
opacity: glowIntensity * logoSpring,
|
||||
transform: `scale(${glowScale * logoScale})`,
|
||||
filter: "blur(40px)",
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* AnimatedLogo with entrance animation - smaller for mobile */}
|
||||
<div
|
||||
style={{
|
||||
opacity: logoOpacity,
|
||||
transform: `scale(${logoScale})`,
|
||||
}}
|
||||
>
|
||||
<AnimatedLogo size={280} delay={logoEntranceDelay} />
|
||||
</div>
|
||||
|
||||
{/* Title text - smaller for mobile */}
|
||||
<div
|
||||
className="mt-8 text-center px-8"
|
||||
style={{
|
||||
opacity: titleOpacity,
|
||||
transform: `translateY(${titleY}px)`,
|
||||
}}
|
||||
>
|
||||
<h1 className="text-5xl font-bold text-white tracking-wider">
|
||||
EINUNDZWANZIG
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
{/* Subtitle */}
|
||||
<div
|
||||
className="mt-4 text-center"
|
||||
style={{
|
||||
opacity: subtitleOpacity,
|
||||
}}
|
||||
>
|
||||
<p className="text-xl text-orange-500 font-medium tracking-wide">
|
||||
Das Portal
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Vignette overlay */}
|
||||
<div
|
||||
className="absolute inset-0 pointer-events-none"
|
||||
style={{
|
||||
boxShadow: "inset 0 0 200px 50px rgba(0, 0, 0, 0.7)",
|
||||
}}
|
||||
/>
|
||||
</AbsoluteFill>
|
||||
);
|
||||
};
|
||||
141
videos/src/scenes/portal/mobile/PortalOutroSceneMobile.test.tsx
Normal file
141
videos/src/scenes/portal/mobile/PortalOutroSceneMobile.test.tsx
Normal file
@@ -0,0 +1,141 @@
|
||||
import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
|
||||
import { render, cleanup } from "@testing-library/react";
|
||||
import { PortalOutroSceneMobile } from "./PortalOutroSceneMobile";
|
||||
|
||||
/* eslint-disable @remotion/warn-native-media-tag */
|
||||
// Mock Remotion hooks
|
||||
vi.mock("remotion", () => ({
|
||||
useCurrentFrame: vi.fn(() => 60),
|
||||
useVideoConfig: vi.fn(() => ({ fps: 30, width: 1080, height: 1920 })),
|
||||
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>
|
||||
)),
|
||||
}));
|
||||
|
||||
// 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 BitcoinEffect component
|
||||
vi.mock("../../../components/BitcoinEffect", () => ({
|
||||
BitcoinEffect: vi.fn(() => (
|
||||
<div data-testid="bitcoin-effect">BitcoinEffect</div>
|
||||
)),
|
||||
}));
|
||||
|
||||
describe("PortalOutroSceneMobile", () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
cleanup();
|
||||
vi.resetAllMocks();
|
||||
});
|
||||
|
||||
it("renders without errors", () => {
|
||||
const { container } = render(<PortalOutroSceneMobile />);
|
||||
expect(container).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders the AbsoluteFill container", () => {
|
||||
const { container } = render(<PortalOutroSceneMobile />);
|
||||
const absoluteFill = container.querySelector('[data-testid="absolute-fill"]');
|
||||
expect(absoluteFill).toBeInTheDocument();
|
||||
expect(absoluteFill).toHaveClass("bg-zinc-900");
|
||||
});
|
||||
|
||||
it("renders the horizontal logo with mobile-optimized width", () => {
|
||||
const { container } = render(<PortalOutroSceneMobile />);
|
||||
const images = container.querySelectorAll('[data-testid="remotion-img"]');
|
||||
const logo = Array.from(images).find((img) =>
|
||||
img.getAttribute("src")?.includes("einundzwanzig-horizontal-inverted.svg")
|
||||
);
|
||||
expect(logo).toBeInTheDocument();
|
||||
// Mobile uses 450px width vs desktop 600px
|
||||
expect(logo).toHaveStyle({ width: "450px" });
|
||||
});
|
||||
|
||||
it("renders EINUNDZWANZIG text with mobile-optimized size", () => {
|
||||
const { container } = render(<PortalOutroSceneMobile />);
|
||||
const title = container.querySelector("h1");
|
||||
expect(title).toBeInTheDocument();
|
||||
expect(title).toHaveTextContent("EINUNDZWANZIG");
|
||||
// Mobile uses text-4xl vs desktop text-5xl
|
||||
expect(title).toHaveClass("text-4xl");
|
||||
});
|
||||
|
||||
it("renders subtitle with mobile-optimized size", () => {
|
||||
const { container } = render(<PortalOutroSceneMobile />);
|
||||
const subtitle = container.querySelector("p");
|
||||
expect(subtitle).toBeInTheDocument();
|
||||
expect(subtitle).toHaveTextContent("Die deutschsprachige Bitcoin-Community");
|
||||
// Mobile uses text-xl vs desktop text-2xl
|
||||
expect(subtitle).toHaveClass("text-xl");
|
||||
});
|
||||
|
||||
it("renders BitcoinEffect component", () => {
|
||||
const { container } = render(<PortalOutroSceneMobile />);
|
||||
const bitcoinEffect = container.querySelector('[data-testid="bitcoin-effect"]');
|
||||
expect(bitcoinEffect).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders final-chime audio", () => {
|
||||
const { container } = render(<PortalOutroSceneMobile />);
|
||||
const audioElements = container.querySelectorAll('[data-testid="audio"]');
|
||||
const finalChimeAudio = Array.from(audioElements).find((audio) =>
|
||||
audio.getAttribute("src")?.includes("final-chime.mp3")
|
||||
);
|
||||
expect(finalChimeAudio).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders wallpaper background", () => {
|
||||
const { container } = render(<PortalOutroSceneMobile />);
|
||||
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 vignette overlay with pointer-events-none", () => {
|
||||
const { container } = render(<PortalOutroSceneMobile />);
|
||||
const vignette = container.querySelector('[class*="pointer-events-none"]');
|
||||
expect(vignette).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders glow effect element with mobile-optimized dimensions", () => {
|
||||
const { container } = render(<PortalOutroSceneMobile />);
|
||||
// Look for the glow element with blur filter
|
||||
const elements = container.querySelectorAll('[style*="blur(50px)"]');
|
||||
expect(elements.length).toBeGreaterThan(0);
|
||||
});
|
||||
});
|
||||
214
videos/src/scenes/portal/mobile/PortalOutroSceneMobile.tsx
Normal file
214
videos/src/scenes/portal/mobile/PortalOutroSceneMobile.tsx
Normal file
@@ -0,0 +1,214 @@
|
||||
import {
|
||||
AbsoluteFill,
|
||||
useCurrentFrame,
|
||||
useVideoConfig,
|
||||
interpolate,
|
||||
spring,
|
||||
Img,
|
||||
staticFile,
|
||||
Sequence,
|
||||
} from "remotion";
|
||||
import { Audio } from "@remotion/media";
|
||||
import { BitcoinEffect } from "../../../components/BitcoinEffect";
|
||||
|
||||
// Spring configurations
|
||||
const SMOOTH = { damping: 200 };
|
||||
const SNAPPY = { damping: 15, stiffness: 80 };
|
||||
|
||||
/**
|
||||
* PortalOutroSceneMobile - Scene 9: Outro for Mobile (12 seconds / 360 frames @ 30fps)
|
||||
*
|
||||
* Mobile layout adaptations:
|
||||
* - Smaller horizontal logo width (450px vs 600px)
|
||||
* - Adjusted text sizes for portrait orientation
|
||||
* - Smaller glow effects
|
||||
*/
|
||||
export const PortalOutroSceneMobile: React.FC = () => {
|
||||
const frame = useCurrentFrame();
|
||||
const { fps } = useVideoConfig();
|
||||
const durationInFrames = 12 * fps; // 360 frames
|
||||
|
||||
// Background fade-in from black (0-30 frames)
|
||||
const backgroundSpring = spring({
|
||||
frame,
|
||||
fps,
|
||||
config: SMOOTH,
|
||||
});
|
||||
const backgroundOpacity = interpolate(backgroundSpring, [0, 1], [0, 0.3]);
|
||||
|
||||
// Logo entrance animation (delayed 1 second)
|
||||
const logoDelay = Math.floor(1 * fps);
|
||||
const logoSpring = spring({
|
||||
frame: frame - logoDelay,
|
||||
fps,
|
||||
config: SNAPPY,
|
||||
});
|
||||
const logoOpacity = interpolate(logoSpring, [0, 1], [0, 1]);
|
||||
const logoScale = interpolate(logoSpring, [0, 1], [0.8, 1]);
|
||||
const logoY = interpolate(logoSpring, [0, 1], [30, 0]);
|
||||
|
||||
// Logo glow pulse effect
|
||||
const glowIntensity = interpolate(
|
||||
Math.sin((frame - logoDelay) * 0.06),
|
||||
[-1, 1],
|
||||
[0.4, 0.9]
|
||||
);
|
||||
const glowScale = interpolate(
|
||||
Math.sin((frame - logoDelay) * 0.04),
|
||||
[-1, 1],
|
||||
[1.0, 1.2]
|
||||
);
|
||||
|
||||
// Text entrance (delayed 2 seconds)
|
||||
const textDelay = Math.floor(2 * fps);
|
||||
const textSpring = spring({
|
||||
frame: frame - textDelay,
|
||||
fps,
|
||||
config: SMOOTH,
|
||||
});
|
||||
const textOpacity = interpolate(textSpring, [0, 1], [0, 1]);
|
||||
const textY = interpolate(textSpring, [0, 1], [20, 0]);
|
||||
|
||||
// Subtitle entrance (delayed 2.5 seconds)
|
||||
const subtitleDelay = Math.floor(2.5 * fps);
|
||||
const subtitleSpring = spring({
|
||||
frame: frame - subtitleDelay,
|
||||
fps,
|
||||
config: SMOOTH,
|
||||
});
|
||||
const subtitleOpacity = interpolate(subtitleSpring, [0, 1], [0, 1]);
|
||||
|
||||
// Final fade out in last 2 seconds (frames 300-360)
|
||||
const fadeOutStart = durationInFrames - 2 * fps;
|
||||
const finalFadeOpacity = interpolate(
|
||||
frame,
|
||||
[fadeOutStart, durationInFrames],
|
||||
[1, 0],
|
||||
{ extrapolateLeft: "clamp", extrapolateRight: "clamp" }
|
||||
);
|
||||
|
||||
return (
|
||||
<AbsoluteFill className="bg-zinc-900 overflow-hidden">
|
||||
{/* Audio: final-chime when logo appears */}
|
||||
<Sequence from={logoDelay} durationInFrames={Math.floor(3 * fps)}>
|
||||
<Audio src={staticFile("sfx/final-chime.mp3")} volume={0.6} />
|
||||
</Sequence>
|
||||
|
||||
{/* Content wrapper with final fade */}
|
||||
<div style={{ opacity: finalFadeOpacity }}>
|
||||
{/* Wallpaper Background */}
|
||||
<div
|
||||
className="absolute inset-0"
|
||||
style={{
|
||||
transform: "scale(1.05)",
|
||||
transformOrigin: "center center",
|
||||
}}
|
||||
>
|
||||
<Img
|
||||
src={staticFile("einundzwanzig-wallpaper.png")}
|
||||
className="absolute inset-0 w-full h-full object-cover"
|
||||
style={{ opacity: backgroundOpacity }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Dark gradient overlay */}
|
||||
<div
|
||||
className="absolute inset-0"
|
||||
style={{
|
||||
background:
|
||||
"radial-gradient(circle at center, rgba(24, 24, 27, 0.6) 0%, rgba(24, 24, 27, 0.9) 70%, rgba(24, 24, 27, 0.98) 100%)",
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Bitcoin particle effect */}
|
||||
<BitcoinEffect />
|
||||
|
||||
{/* Content container */}
|
||||
<div className="absolute inset-0 flex flex-col items-center justify-center px-6">
|
||||
{/* Outer glow effect behind logo - smaller for mobile */}
|
||||
<div
|
||||
className="absolute"
|
||||
style={{
|
||||
width: 600,
|
||||
height: 350,
|
||||
background:
|
||||
"radial-gradient(ellipse, rgba(247, 147, 26, 0.35) 0%, transparent 60%)",
|
||||
opacity: glowIntensity * logoSpring,
|
||||
transform: `scale(${glowScale * logoScale})`,
|
||||
filter: "blur(50px)",
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Horizontal Logo - smaller for mobile */}
|
||||
<div
|
||||
style={{
|
||||
opacity: logoOpacity,
|
||||
transform: `scale(${logoScale}) translateY(${logoY}px)`,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
filter: `drop-shadow(0 0 ${35 * glowIntensity}px rgba(247, 147, 26, 0.5))`,
|
||||
}}
|
||||
>
|
||||
<Img
|
||||
src={staticFile("einundzwanzig-horizontal-inverted.svg")}
|
||||
style={{
|
||||
width: 450,
|
||||
height: "auto",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* EINUNDZWANZIG text - smaller for mobile */}
|
||||
<div
|
||||
className="mt-10 text-center"
|
||||
style={{
|
||||
opacity: textOpacity,
|
||||
transform: `translateY(${textY}px)`,
|
||||
}}
|
||||
>
|
||||
<h1
|
||||
className="text-4xl font-bold text-white tracking-widest"
|
||||
style={{
|
||||
textShadow: `0 0 ${25 * glowIntensity}px rgba(247, 147, 26, 0.4), 0 2px 20px rgba(0, 0, 0, 0.5)`,
|
||||
}}
|
||||
>
|
||||
EINUNDZWANZIG
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
{/* Subtitle - smaller for mobile */}
|
||||
<div
|
||||
className="mt-5 text-center"
|
||||
style={{
|
||||
opacity: subtitleOpacity,
|
||||
}}
|
||||
>
|
||||
<p className="text-xl text-orange-500 font-medium tracking-wide">
|
||||
Die deutschsprachige Bitcoin-Community
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Ambient glow at bottom */}
|
||||
<div
|
||||
className="absolute inset-x-0 bottom-0 h-48 pointer-events-none"
|
||||
style={{
|
||||
background:
|
||||
"linear-gradient(to top, rgba(247, 147, 26, 0.08) 0%, transparent 100%)",
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Vignette overlay */}
|
||||
<div
|
||||
className="absolute inset-0 pointer-events-none"
|
||||
style={{
|
||||
boxShadow: "inset 0 0 250px 100px rgba(0, 0, 0, 0.8)",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</AbsoluteFill>
|
||||
);
|
||||
};
|
||||
133
videos/src/scenes/portal/mobile/PortalTitleSceneMobile.test.tsx
Normal file
133
videos/src/scenes/portal/mobile/PortalTitleSceneMobile.test.tsx
Normal file
@@ -0,0 +1,133 @@
|
||||
import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
|
||||
import { render, cleanup } from "@testing-library/react";
|
||||
import { PortalTitleSceneMobile } from "./PortalTitleSceneMobile";
|
||||
|
||||
/* eslint-disable @remotion/warn-native-media-tag */
|
||||
// Mock Remotion hooks
|
||||
vi.mock("remotion", () => ({
|
||||
useCurrentFrame: vi.fn(() => 60),
|
||||
useVideoConfig: vi.fn(() => ({ fps: 30, width: 1080, height: 1920 })),
|
||||
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>
|
||||
)),
|
||||
}));
|
||||
|
||||
// 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 */
|
||||
|
||||
describe("PortalTitleSceneMobile", () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
cleanup();
|
||||
vi.resetAllMocks();
|
||||
});
|
||||
|
||||
it("renders without errors", () => {
|
||||
const { container } = render(<PortalTitleSceneMobile />);
|
||||
expect(container).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders the AbsoluteFill container", () => {
|
||||
const { container } = render(<PortalTitleSceneMobile />);
|
||||
const absoluteFill = container.querySelector('[data-testid="absolute-fill"]');
|
||||
expect(absoluteFill).toBeInTheDocument();
|
||||
expect(absoluteFill).toHaveClass("bg-zinc-900");
|
||||
});
|
||||
|
||||
it("renders the title split across two lines for mobile", () => {
|
||||
const { container } = render(<PortalTitleSceneMobile />);
|
||||
const titles = container.querySelectorAll("h1");
|
||||
// Mobile version splits title into two h1 elements
|
||||
expect(titles.length).toBe(2);
|
||||
});
|
||||
|
||||
it("renders titles with mobile-optimized text size (text-5xl)", () => {
|
||||
const { container } = render(<PortalTitleSceneMobile />);
|
||||
const titles = container.querySelectorAll("h1");
|
||||
titles.forEach((title) => {
|
||||
expect(title).toHaveClass("text-5xl");
|
||||
expect(title).toHaveClass("font-bold");
|
||||
expect(title).toHaveClass("text-white");
|
||||
});
|
||||
});
|
||||
|
||||
it("renders the subtitle with correct styling", () => {
|
||||
const { container } = render(<PortalTitleSceneMobile />);
|
||||
const subtitle = container.querySelector("p");
|
||||
expect(subtitle).toBeInTheDocument();
|
||||
expect(subtitle).toHaveTextContent("Das Herzstück der deutschsprachigen Bitcoin-Community");
|
||||
expect(subtitle).toHaveClass("text-xl");
|
||||
expect(subtitle).toHaveClass("text-zinc-300");
|
||||
});
|
||||
|
||||
it("renders audio sequences for sound effects", () => {
|
||||
const { container } = render(<PortalTitleSceneMobile />);
|
||||
const sequences = container.querySelectorAll('[data-testid="sequence"]');
|
||||
expect(sequences.length).toBeGreaterThanOrEqual(2);
|
||||
});
|
||||
|
||||
it("includes typing audio", () => {
|
||||
const { container } = render(<PortalTitleSceneMobile />);
|
||||
const audioElements = container.querySelectorAll('[data-testid="audio"]');
|
||||
const typingAudio = Array.from(audioElements).find((audio) =>
|
||||
audio.getAttribute("src")?.includes("typing.mp3")
|
||||
);
|
||||
expect(typingAudio).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("includes ui-appear audio", () => {
|
||||
const { container } = render(<PortalTitleSceneMobile />);
|
||||
const audioElements = container.querySelectorAll('[data-testid="audio"]');
|
||||
const uiAppearAudio = Array.from(audioElements).find((audio) =>
|
||||
audio.getAttribute("src")?.includes("ui-appear.mp3")
|
||||
);
|
||||
expect(uiAppearAudio).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders wallpaper background", () => {
|
||||
const { container } = render(<PortalTitleSceneMobile />);
|
||||
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 decorative line element", () => {
|
||||
const { container } = render(<PortalTitleSceneMobile />);
|
||||
const decorativeLine = container.querySelector('[class*="bg-gradient-to-r"]');
|
||||
expect(decorativeLine).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
206
videos/src/scenes/portal/mobile/PortalTitleSceneMobile.tsx
Normal file
206
videos/src/scenes/portal/mobile/PortalTitleSceneMobile.tsx
Normal file
@@ -0,0 +1,206 @@
|
||||
import {
|
||||
AbsoluteFill,
|
||||
useCurrentFrame,
|
||||
useVideoConfig,
|
||||
interpolate,
|
||||
spring,
|
||||
Img,
|
||||
staticFile,
|
||||
Sequence,
|
||||
} from "remotion";
|
||||
import { Audio } from "@remotion/media";
|
||||
|
||||
// Spring configurations from PRD
|
||||
const SMOOTH = { damping: 200 };
|
||||
|
||||
// Typing animation configuration
|
||||
const CHAR_FRAMES = 2; // Frames per character
|
||||
const CURSOR_BLINK_FRAMES = 16;
|
||||
|
||||
/**
|
||||
* PortalTitleSceneMobile - Scene 2: Title Card for Mobile (4 seconds / 120 frames @ 30fps)
|
||||
*
|
||||
* Mobile layout adaptations:
|
||||
* - Smaller title text (text-5xl vs text-7xl)
|
||||
* - Title split across two lines for readability
|
||||
* - Adjusted spacing for portrait orientation
|
||||
*/
|
||||
export const PortalTitleSceneMobile: React.FC = () => {
|
||||
const frame = useCurrentFrame();
|
||||
const { fps } = useVideoConfig();
|
||||
|
||||
// Main title text - split for mobile
|
||||
const titleLine1 = "EINUNDZWANZIG";
|
||||
const titleLine2 = "PORTAL";
|
||||
const fullTitle = titleLine1 + " " + titleLine2;
|
||||
const subtitleText = "Das Herzstück der deutschsprachigen Bitcoin-Community";
|
||||
|
||||
// Calculate typed characters for title
|
||||
const typedTitleChars = Math.min(
|
||||
fullTitle.length,
|
||||
Math.floor(frame / CHAR_FRAMES)
|
||||
);
|
||||
const typedTitle = fullTitle.slice(0, typedTitleChars);
|
||||
|
||||
// Split typed text into two lines
|
||||
const typedLine1 = typedTitle.slice(0, Math.min(titleLine1.length, typedTitleChars));
|
||||
const typedLine2 = typedTitleChars > titleLine1.length + 1
|
||||
? typedTitle.slice(titleLine1.length + 1)
|
||||
: "";
|
||||
|
||||
// Title typing complete frame
|
||||
const titleCompleteFrame = fullTitle.length * CHAR_FRAMES;
|
||||
|
||||
// Cursor blink effect - only show while typing or shortly after
|
||||
const showCursor = frame < titleCompleteFrame + fps;
|
||||
const cursorOpacity = showCursor
|
||||
? interpolate(
|
||||
frame % CURSOR_BLINK_FRAMES,
|
||||
[0, CURSOR_BLINK_FRAMES / 2, CURSOR_BLINK_FRAMES],
|
||||
[1, 0, 1],
|
||||
{ extrapolateLeft: "clamp", extrapolateRight: "clamp" }
|
||||
)
|
||||
: 0;
|
||||
|
||||
// Subtitle entrance - after title typing completes
|
||||
const subtitleDelay = titleCompleteFrame + Math.floor(0.3 * fps);
|
||||
const subtitleSpring = spring({
|
||||
frame: frame - subtitleDelay,
|
||||
fps,
|
||||
config: SMOOTH,
|
||||
});
|
||||
const subtitleOpacity = interpolate(subtitleSpring, [0, 1], [0, 1]);
|
||||
const subtitleY = interpolate(subtitleSpring, [0, 1], [20, 0]);
|
||||
|
||||
// Background glow that pulses subtly
|
||||
const glowIntensity = interpolate(
|
||||
Math.sin(frame * 0.05),
|
||||
[-1, 1],
|
||||
[0.3, 0.5]
|
||||
);
|
||||
|
||||
// Scene entrance fade from intro scene
|
||||
const entranceFade = interpolate(frame, [0, Math.floor(0.3 * fps)], [0, 1], {
|
||||
extrapolateRight: "clamp",
|
||||
});
|
||||
|
||||
// Determine which line the cursor should be on
|
||||
const cursorOnLine2 = typedTitleChars > titleLine1.length;
|
||||
|
||||
return (
|
||||
<AbsoluteFill
|
||||
className="bg-zinc-900 overflow-hidden"
|
||||
style={{ opacity: entranceFade }}
|
||||
>
|
||||
{/* Audio: typing sound */}
|
||||
<Sequence durationInFrames={titleCompleteFrame + Math.floor(0.5 * fps)}>
|
||||
<Audio src={staticFile("sfx/typing.mp3")} volume={0.5} />
|
||||
</Sequence>
|
||||
|
||||
{/* Audio: ui-appear for subtitle */}
|
||||
<Sequence from={subtitleDelay} durationInFrames={Math.floor(1 * fps)}>
|
||||
<Audio src={staticFile("sfx/ui-appear.mp3")} volume={0.6} />
|
||||
</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.15 }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Dark gradient overlay */}
|
||||
<div
|
||||
className="absolute inset-0"
|
||||
style={{
|
||||
background:
|
||||
"radial-gradient(circle at center, transparent 0%, rgba(24, 24, 27, 0.8) 60%, rgba(24, 24, 27, 0.98) 100%)",
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Center glow effect */}
|
||||
<div
|
||||
className="absolute inset-0 flex items-center justify-center"
|
||||
style={{ opacity: glowIntensity }}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
width: 600,
|
||||
height: 400,
|
||||
background:
|
||||
"radial-gradient(ellipse, rgba(247, 147, 26, 0.2) 0%, transparent 70%)",
|
||||
filter: "blur(60px)",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Content container */}
|
||||
<div className="absolute inset-0 flex flex-col items-center justify-center px-6">
|
||||
{/* Title with typing animation - two lines for mobile */}
|
||||
<div className="text-center">
|
||||
{/* Line 1 */}
|
||||
<h1 className="text-5xl font-bold text-white tracking-wider">
|
||||
<span>{typedLine1}</span>
|
||||
{!cursorOnLine2 && (
|
||||
<span
|
||||
className="text-orange-500"
|
||||
style={{ opacity: cursorOpacity }}
|
||||
>
|
||||
|
|
||||
</span>
|
||||
)}
|
||||
</h1>
|
||||
{/* Line 2 */}
|
||||
<h1 className="text-5xl font-bold text-white tracking-wider mt-2">
|
||||
<span>{typedLine2}</span>
|
||||
{cursorOnLine2 && (
|
||||
<span
|
||||
className="text-orange-500"
|
||||
style={{ opacity: cursorOpacity }}
|
||||
>
|
||||
|
|
||||
</span>
|
||||
)}
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
{/* Subtitle - smaller for mobile */}
|
||||
<div
|
||||
className="mt-8 text-center px-4"
|
||||
style={{
|
||||
opacity: subtitleOpacity,
|
||||
transform: `translateY(${subtitleY}px)`,
|
||||
}}
|
||||
>
|
||||
<p className="text-xl text-zinc-300 font-light tracking-wide">
|
||||
{subtitleText}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Decorative line under subtitle */}
|
||||
<div
|
||||
className="mt-6"
|
||||
style={{
|
||||
opacity: subtitleOpacity,
|
||||
transform: `scaleX(${subtitleSpring})`,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="h-0.5 bg-gradient-to-r from-transparent via-orange-500 to-transparent"
|
||||
style={{ width: 250 }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Vignette overlay */}
|
||||
<div
|
||||
className="absolute inset-0 pointer-events-none"
|
||||
style={{
|
||||
boxShadow: "inset 0 0 200px 50px rgba(0, 0, 0, 0.7)",
|
||||
}}
|
||||
/>
|
||||
</AbsoluteFill>
|
||||
);
|
||||
};
|
||||
139
videos/src/scenes/portal/mobile/TopMeetupsSceneMobile.test.tsx
Normal file
139
videos/src/scenes/portal/mobile/TopMeetupsSceneMobile.test.tsx
Normal file
@@ -0,0 +1,139 @@
|
||||
import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
|
||||
import { render, cleanup } from "@testing-library/react";
|
||||
import { TopMeetupsSceneMobile } from "./TopMeetupsSceneMobile";
|
||||
|
||||
/* eslint-disable @remotion/warn-native-media-tag */
|
||||
// Mock Remotion hooks
|
||||
vi.mock("remotion", () => ({
|
||||
useCurrentFrame: vi.fn(() => 60),
|
||||
useVideoConfig: vi.fn(() => ({ fps: 30, width: 1080, height: 1920 })),
|
||||
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>
|
||||
)),
|
||||
}));
|
||||
|
||||
// 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(({ width, height }) => (
|
||||
<div data-testid="sparkline-chart" data-width={width} data-height={height}>
|
||||
Sparkline
|
||||
</div>
|
||||
)),
|
||||
}));
|
||||
|
||||
describe("TopMeetupsSceneMobile", () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
cleanup();
|
||||
vi.resetAllMocks();
|
||||
});
|
||||
|
||||
it("renders without errors", () => {
|
||||
const { container } = render(<TopMeetupsSceneMobile />);
|
||||
expect(container).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders the AbsoluteFill container", () => {
|
||||
const { container } = render(<TopMeetupsSceneMobile />);
|
||||
const absoluteFill = container.querySelector('[data-testid="absolute-fill"]');
|
||||
expect(absoluteFill).toBeInTheDocument();
|
||||
expect(absoluteFill).toHaveClass("bg-zinc-900");
|
||||
});
|
||||
|
||||
it("renders the header with mobile-optimized size", () => {
|
||||
const { container } = render(<TopMeetupsSceneMobile />);
|
||||
const header = container.querySelector("h1");
|
||||
expect(header).toBeInTheDocument();
|
||||
expect(header).toHaveTextContent("Top Meetups");
|
||||
// Mobile uses text-4xl vs desktop text-5xl
|
||||
expect(header).toHaveClass("text-4xl");
|
||||
});
|
||||
|
||||
it("renders five meetup rows", () => {
|
||||
const { container } = render(<TopMeetupsSceneMobile />);
|
||||
const meetupLogos = container.querySelectorAll('[data-testid="remotion-img"]');
|
||||
// 5 meetup logos + 1 wallpaper = 6 images
|
||||
expect(meetupLogos.length).toBe(6);
|
||||
});
|
||||
|
||||
it("renders sparkline charts with mobile-optimized dimensions", () => {
|
||||
const { container } = render(<TopMeetupsSceneMobile />);
|
||||
const sparklines = container.querySelectorAll('[data-testid="sparkline-chart"]');
|
||||
expect(sparklines.length).toBe(5);
|
||||
sparklines.forEach((sparkline) => {
|
||||
// Mobile uses 70px width vs desktop 100px
|
||||
expect(sparkline).toHaveAttribute("data-width", "70");
|
||||
expect(sparkline).toHaveAttribute("data-height", "28");
|
||||
});
|
||||
});
|
||||
|
||||
it("renders checkmark-pop audio for each meetup", () => {
|
||||
const { container } = render(<TopMeetupsSceneMobile />);
|
||||
const sequences = container.querySelectorAll('[data-testid="sequence"]');
|
||||
const audioSequences = Array.from(sequences).filter((seq) => {
|
||||
const audio = seq.querySelector('[data-testid="audio"]');
|
||||
return audio?.getAttribute("src")?.includes("checkmark-pop.mp3");
|
||||
});
|
||||
expect(audioSequences.length).toBe(5);
|
||||
});
|
||||
|
||||
it("renders slide-in audio for section entrance", () => {
|
||||
const { container } = render(<TopMeetupsSceneMobile />);
|
||||
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 wallpaper background", () => {
|
||||
const { container } = render(<TopMeetupsSceneMobile />);
|
||||
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 rank badges for each meetup", () => {
|
||||
const { container } = render(<TopMeetupsSceneMobile />);
|
||||
// Rank badges are styled as rounded-full circles
|
||||
const rankBadges = container.querySelectorAll('[class*="rounded-full"]');
|
||||
expect(rankBadges.length).toBeGreaterThanOrEqual(5);
|
||||
});
|
||||
});
|
||||
402
videos/src/scenes/portal/mobile/TopMeetupsSceneMobile.tsx
Normal file
402
videos/src/scenes/portal/mobile/TopMeetupsSceneMobile.tsx
Normal file
@@ -0,0 +1,402 @@
|
||||
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 = 12;
|
||||
|
||||
// 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));
|
||||
|
||||
/**
|
||||
* TopMeetupsSceneMobile - Scene 6: Top Meetups for Mobile (10 seconds / 300 frames @ 30fps)
|
||||
*
|
||||
* Mobile layout adaptations:
|
||||
* - Narrower row layout optimized for 1080px width
|
||||
* - Smaller text sizes and reduced spacing
|
||||
* - Compact sparkline charts
|
||||
* - Adjusted progress bars
|
||||
*/
|
||||
export const TopMeetupsSceneMobile: 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 50% 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 - Centered for mobile */}
|
||||
<div className="absolute inset-0 flex flex-col items-center justify-center px-6">
|
||||
{/* Section Header */}
|
||||
<div
|
||||
className="text-center mb-8"
|
||||
style={{
|
||||
opacity: headerOpacity,
|
||||
transform: `translateY(${headerY}px)`,
|
||||
}}
|
||||
>
|
||||
<h1 className="text-4xl font-bold text-white mb-2">Top Meetups</h1>
|
||||
<p
|
||||
className="text-lg 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-md">
|
||||
<div className="flex flex-col gap-3">
|
||||
{TOP_MEETUPS_DATA.map((meetup, index) => (
|
||||
<MeetupRowMobile
|
||||
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 for mobile
|
||||
*/
|
||||
type MeetupRowMobileProps = {
|
||||
meetup: {
|
||||
name: string;
|
||||
logoFile: string;
|
||||
userCount: number;
|
||||
location: string;
|
||||
sparklineData: number[];
|
||||
rank: number;
|
||||
};
|
||||
maxCount: number;
|
||||
delay: number;
|
||||
glowIntensity: number;
|
||||
isLeading: boolean;
|
||||
};
|
||||
|
||||
const MeetupRowMobile: React.FC<MeetupRowMobileProps> = ({
|
||||
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], [-60, 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 + 20;
|
||||
|
||||
// Dynamic glow for leading meetup
|
||||
const leadingGlow = isLeading
|
||||
? `0 0 ${30 * glowIntensity}px rgba(247, 147, 26, 0.4), 0 0 ${15 * glowIntensity}px rgba(247, 147, 26, 0.3)`
|
||||
: "none";
|
||||
|
||||
return (
|
||||
<div
|
||||
className="flex items-center gap-3 p-3 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-10 h-10 rounded-full flex items-center justify-center font-bold text-lg"
|
||||
style={{
|
||||
backgroundColor: isLeading ? "#f7931a" : "rgba(63, 63, 70, 0.8)",
|
||||
color: isLeading ? "#18181b" : "#a1a1aa",
|
||||
transform: `scale(${rankScale})`,
|
||||
boxShadow: isLeading
|
||||
? `0 0 ${12 * glowIntensity}px rgba(247, 147, 26, 0.5)`
|
||||
: "none",
|
||||
}}
|
||||
>
|
||||
{meetup.rank}
|
||||
</div>
|
||||
|
||||
{/* Logo */}
|
||||
<div
|
||||
className="flex-shrink-0 w-11 h-11 rounded-lg overflow-hidden bg-zinc-800 flex items-center justify-center"
|
||||
style={{
|
||||
boxShadow: isLeading
|
||||
? `0 0 ${8 * glowIntensity}px rgba(247, 147, 26, 0.3)`
|
||||
: "none",
|
||||
}}
|
||||
>
|
||||
<Img
|
||||
src={staticFile(`logos/${meetup.logoFile}`)}
|
||||
style={{
|
||||
width: 38,
|
||||
height: 38,
|
||||
objectFit: "contain",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Meetup Info + Progress Bar */}
|
||||
<div className="flex-1 min-w-0">
|
||||
{/* Name only on mobile (no location to save space) */}
|
||||
<div
|
||||
className="font-bold text-base truncate mb-1.5"
|
||||
style={{
|
||||
color: isLeading ? "#f7931a" : "#ffffff",
|
||||
}}
|
||||
>
|
||||
{meetup.name.replace("EINUNDZWANZIG ", "")}
|
||||
</div>
|
||||
|
||||
{/* Progress Bar */}
|
||||
<div className="h-1.5 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 ${8 * 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.25rem",
|
||||
fontFamily: "Inconsolata, monospace",
|
||||
minWidth: 36,
|
||||
textShadow: isLeading
|
||||
? `0 0 ${8 * glowIntensity}px rgba(247, 147, 26, 0.5)`
|
||||
: "none",
|
||||
}}
|
||||
>
|
||||
{displayCount}
|
||||
</div>
|
||||
|
||||
{/* Sparkline Chart - Compact for mobile */}
|
||||
<div
|
||||
className="flex-shrink-0 rounded-lg bg-zinc-800/50 p-1.5"
|
||||
style={{
|
||||
boxShadow: isLeading
|
||||
? `0 0 ${8 * glowIntensity}px rgba(247, 147, 26, 0.2)`
|
||||
: "none",
|
||||
}}
|
||||
>
|
||||
<SparklineChart
|
||||
data={meetup.sparklineData}
|
||||
width={70}
|
||||
height={28}
|
||||
delay={sparklineDelay}
|
||||
color={isLeading ? "#f7931a" : "#71717a"}
|
||||
strokeWidth={1.5}
|
||||
showFill={true}
|
||||
fillOpacity={0.2}
|
||||
showGlow={isLeading}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
9
videos/src/scenes/portal/mobile/index.ts
Normal file
9
videos/src/scenes/portal/mobile/index.ts
Normal file
@@ -0,0 +1,9 @@
|
||||
export { PortalIntroSceneMobile } from "./PortalIntroSceneMobile";
|
||||
export { PortalTitleSceneMobile } from "./PortalTitleSceneMobile";
|
||||
export { DashboardOverviewSceneMobile } from "./DashboardOverviewSceneMobile";
|
||||
export { MeetupShowcaseSceneMobile } from "./MeetupShowcaseSceneMobile";
|
||||
export { CountryStatsSceneMobile } from "./CountryStatsSceneMobile";
|
||||
export { TopMeetupsSceneMobile } from "./TopMeetupsSceneMobile";
|
||||
export { ActivityFeedSceneMobile } from "./ActivityFeedSceneMobile";
|
||||
export { CallToActionSceneMobile } from "./CallToActionSceneMobile";
|
||||
export { PortalOutroSceneMobile } from "./PortalOutroSceneMobile";
|
||||
Reference in New Issue
Block a user