function LeftAlbumPreviewCanvas({
  song, currentScene, currentPreviewScene, activeSceneIdx,
  activeSubtitleLine, subtitleWindow, activeWordId,
  fontSize, lineGap, backgroundTheme, albumImageScale,
  subtitleContrastMode, subtitleBackdrop, subtitleCloud,
  subtitleOverlayStyle, useGlobalImage, SceneImage,
}) {
  const { SubtitleLineText } = window;
  const paletteName = song.paletteName || "midnight-violet";

  function slotClass(slot) {
    if (slot === 0) return "is-current";
    if (slot === -1) return "is-prev";
    if (slot === 1) return "is-next";
    if (slot <= -2) return "is-far-prev";
    return "is-far-next";
  }

  return (
    <div className="left-album-preview">
      <div className={`left-album-bg ${backgroundTheme || "mono-album"}`} />

      <div className="left-album-image-area">
        <div className="left-album-image-frame" style={{ transform: `scale(${albumImageScale ?? 1})` }}>
          {currentPreviewScene && (
            <div key={currentPreviewScene.id} style={{
              position: "absolute", inset: 0,
              animation: "fade 600ms ease-out",
            }}>
              <SceneImage scene={currentPreviewScene} paletteName={paletteName} />
            </div>
          )}
        </div>
      </div>

      <div className="left-album-subtitle-area">
        {activeSubtitleLine && (
          <div
            className="video-subtitle lines-mode left-album-lines"
            style={{
              ...subtitleOverlayStyle,
              position: "relative",
              width: "90%",
              textAlign: "center",
              "--subtitle-font-size": `${fontSize}px`,
              "--subtitle-line-step": `${Math.max(fontSize, Math.round(fontSize * lineGap))}px`,
            }}
          >
            <div className="subtitle-stack">
              {subtitleWindow.map(({ line, slot }) => (
                <div
                  key={line.id}
                  className={`subtitle-line ${slotClass(slot)}`}
                >
                  <span
                    className="subtitle-line-chip"
                    style={{
                      "--subtitle-line-chip-px": slot === 0 ? "0.52em" : "0",
                      "--subtitle-line-chip-py": slot === 0 ? "0.16em" : "0",
                      "--subtitle-line-chip-radius": slot === 0 ? "0.56em" : "0",
                      "--subtitle-line-soft-edge-opacity": subtitleBackdrop && slot === 0 ? "1" : "0",
                      "--subtitle-line-soft-bg": subtitleBackdrop && slot === 0
                        ? "radial-gradient(ellipse at center, rgba(0,0,0,0.44) 0%, rgba(0,0,0,0.28) 42%, rgba(0,0,0,0.14) 68%, rgba(0,0,0,0) 100%)"
                        : "transparent",
                      "--subtitle-cloud": subtitleCloud && slot === 0
                        ? "0 0 0.5em rgba(0,0,0,0.22), 0 0 1.2em rgba(0,0,0,0.3)"
                        : "none",
                    }}
                  >
                    <SubtitleLineText
                      line={line}
                      activeWordId={activeWordId}
                      highlightWord={slot === 0}
                    />
                  </span>
                </div>
              ))}
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

Object.assign(window, { LeftAlbumPreviewCanvas });