Function createDanmuOverlay

web/src/components/player/danmuOverlay.ts:140–351

(
  player: Player | null,
  danmuSettings: DanmuUserSettings,
  isDanmuEnabled: boolean,
)

};

export const createDanmuOverlay = (
  player: Player | null,
  danmuSettings: DanmuUserSettings,
  isDanmuEnabled: boolean,
): DanmuOverlayInstance | null => {
  if (!player) {
    return null;
  }

  const overlayHost = ensureDanmuOverlayHost(player);
  if (!overlayHost) {
    return null;
  }

  overlayHost.innerHTML = '';
  overlayHost.style.setProperty('--danmu-stroke-color', danmuSettings.strokeColor);
  overlayHost.style.setProperty('--danmu-opacity', String(isDanmuEnabled ? sanitizeDanmuOpacity(danmuSettings.opacity) : 0));

  try {
    const media = (player as any).video || (player as any).media || undefined;

    let currentEnabled = isDanmuEnabled;
    let currentSettings: DanmuUserSettings = { ...danmuSettings };
    let currentOpacity = currentEnabled ? sanitizeDanmuOpacity(currentSettings.opacity) : 0;

    const initialFontSizePx = parseFontSizePx(currentSettings.fontSize);
    const initialChannelSize = computeChannelSize(initialFontSizePx);
    const initialAreaEnd = sanitizeDanmuArea(currentSettings.area);

    const danmu = new DanmuJs({
      container: overlayHost,
      containerStyle: { zIndex: 7 },
      player: media,
      comments: [],
      area: { start: 0, end: initialAreaEnd, lines: computeAreaLines(overlayHost, currentSettings) },
      channelSize: initialChannelSize,
      mouseControl: false,
      mouseControlPause: false,
      // Increase horizontal gap slightly to reduce bursts; keeps no-overlap stable under load.
      bOffset: 800,
      chaseEffect: true,
      // Delay initialization until explicitly enabled to save CPU/GPU on startup.
      defaultOff: true,
    } as any);

    let started = false;
    const ensureStarted = () => {
      if (started) return;
      try {
        danmu.start();
        started = true;
      } catch (error) {
        console.warn('[Player] Failed to start danmu.js:', error);
      }
    };

    const overlay: DanmuOverlayInstance = {
      sendComment: (comment) => {