`src/AdminVideo.tsx`

69 lines
import { AbsoluteFill, Sequence, Audio, staticFile, useCurrentFrame, useVideoConfig, interpolate } from 'remotion';
import { ADMIN_SECTIONS } from './adminSections';
import { Background } from './Background';
import { BrowserShot } from './BrowserShot';
import { Caption } from './Caption';
import { Card } from './Card';

const FONT = 'Inter, "SF Pro Display", system-ui, -apple-system, sans-serif';

const FadeWrap: React.FC<{ dur: number; children: React.ReactNode }> = ({ dur, children }) => {
  const f = useCurrentFrame();
  const o = interpolate(f, [0, 10, dur - 9, dur], [0, 1, 1, 0], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' });
  return <AbsoluteFill style={{ opacity: o }}>{children}</AbsoluteFill>;
};

export const AdminVideo: React.FC = () => {
  const frame = useCurrentFrame();
  const { durationInFrames } = useVideoConfig();
  const offsets: number[] = [];
  let acc = 0;
  for (const s of ADMIN_SECTIONS) { offsets.push(acc); acc += s.frames; }
  let active = 0;
  for (let i = 0; i < ADMIN_SECTIONS.length; i++) if (frame >= offsets[i]) active = i;
  const accent = ADMIN_SECTIONS[active].accent;
  const shotIndex = ADMIN_SECTIONS.slice(0, active + 1).filter((s) => s.kind === 'shot').length;
  const shotTotal = ADMIN_SECTIONS.filter((s) => s.kind === 'shot').length;

  return (
    <AbsoluteFill style={{ backgroundColor: '#060c16' }}>
      <Background accent={accent} />

      {ADMIN_SECTIONS.map((s, i) => (
        <Sequence key={s.id} from={offsets[i]} durationInFrames={s.frames} name={s.title}>
          <FadeWrap dur={s.frames}>
            {s.kind === 'card' ? (
              <>
                <Card s={s as any} />
                {s.id === 'intro' && <Audio src={staticFile('audio/admin.wav')} />}
              </>
            ) : (
              <>
                <BrowserShot s={s as any} />
                <Caption s={s as any} index={i} total={ADMIN_SECTIONS.length} />
              </>
            )}
          </FadeWrap>
        </Sequence>
      ))}

      <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 6, background: 'rgba(255,255,255,0.08)' }}>
        <div style={{ height: 6, width: `${(frame / durationInFrames) * 100}%`, background: accent, boxShadow: `0 0 16px ${accent}` }} />
      </div>

      {ADMIN_SECTIONS[active].kind === 'shot' && (
        <div style={{ position: 'absolute', top: 34, right: 54, fontFamily: FONT, fontWeight: 700, fontSize: 24, color: '#c9a24a', letterSpacing: 2 }}>
          {String(shotIndex).padStart(2, '0')}<span style={{ opacity: 0.4 }}> / {String(shotTotal).padStart(2, '0')}</span>
        </div>
      )}

      <div style={{ position: 'absolute', top: 30, left: 54, display: 'flex', alignItems: 'center', gap: 12,
        fontFamily: FONT, fontWeight: 800, fontSize: 24, color: '#e8f1ff', letterSpacing: 0.5 }}>
        <span style={{ display: 'inline-flex', width: 34, height: 34, borderRadius: 9,
          background: 'linear-gradient(135deg,#f5b301,#d97706)', alignItems: 'center', justifyContent: 'center', fontSize: 18 }}>🚗</span>
        Prestige<span style={{ opacity: 0.5, fontWeight: 600 }}>Admin</span>
      </div>
    </AbsoluteFill>
  );
};