1import React from "react";
2import { AbsoluteFill, Sequence, useVideoConfig } from "remotion";
3
4import { Spectrum } from "./Spectrum";
5import { AudiogramCompositionSchemaType } from "../helpers/schema";
6import { Waveform } from "./Waveform";
7import { BassOverlay } from "./BassOverlay";
8import { SongInfo } from "./SongInfo";
9import { FONT_FAMILY } from "../helpers/font";
10import { Audio } from "@remotion/media";
11
12const containerStyle: React.CSSProperties = {
13  flexDirection: "column",
14  justifyContent: "flex-end",
15  color: "white",
16  padding: 48,
17  gap: 32,
18  fontFamily: FONT_FAMILY,
19};
20
21const visualizerContainerStyle: React.CSSProperties = {
22  display: "flex",
23  alignItems: "center",
24  width: "100%",
25  borderRadius: 32,
26  padding: 32,
27  marginTop: 32,
28};
29
30export const Visualizer: React.FC<AudiogramCompositionSchemaType> = ({
31  visualizer,
32  audioFileUrl,
33  coverImageUrl,
34  songName,
35  artistName,
36  audioOffsetInSeconds,
37  textColor,
38}) => {
39  const { fps } = useVideoConfig();
40  const audioOffsetInFrames = Math.round(audioOffsetInSeconds * fps);
41
42  return (
43    <AbsoluteFill
44      style={{
45        backgroundColor: "#000000",
46      }}
47    >
48      <Sequence from={-audioOffsetInFrames}>
49        <BassOverlay audioSrc={audioFileUrl} color={visualizer.color} />
50        <Audio src={audioFileUrl} />
51        <AbsoluteFill style={containerStyle}>
52          <div style={visualizerContainerStyle}>
53            {visualizer.type === "oscilloscope" ? (
54              <Waveform
55                waveColor={visualizer.color}
56                audioSrc={audioFileUrl}
57                windowInSeconds={visualizer.windowInSeconds}
58                amplitude={visualizer.amplitude}
59              />
60            ) : visualizer.type === "spectrum" ? (
61              <Spectrum
62                barColor={visualizer.color}
63                audioSrc={audioFileUrl}
64                mirrorWave={visualizer.mirrorWave}
65                numberOfSamples={Number(visualizer.numberOfSamples)}
66                waveLinesToDisplay={visualizer.linesToDisplay}
67              />
68            ) : null}
69          </div>
70          <SongInfo
71            coverImageUrl={coverImageUrl}
72            songName={songName}
73            artistName={artistName}
74            textColor={textColor}
75          />
76        </AbsoluteFill>
77      </Sequence>
78    </AbsoluteFill>
79  );
80};
81