mal/static/player/controls.ts

import { state } from './state';

export const formatTime = (seconds: number): string => {
  if (!Number.isFinite(seconds) || seconds < 0) return '00:00';
  const mins = Math.floor(seconds / 60);
  const secs = Math.floor(seconds % 60);
  return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
};

export const showControls = (): void => {
  state.container.classList.add('show-controls');
  window.clearTimeout(state.playerControlsTimeout);
  state.playerControlsTimeout = window.setTimeout(() => {
    if (!state.isScrubbing && !state.video.paused) {
      state.container.classList.remove('show-controls');
    }
  }, 2000);
};

export const seekBy = (delta: number): void => {
  if (state.video.duration <= 0) return;
  state.video.currentTime = Math.max(
    0,
    Math.min(state.video.duration, state.video.currentTime + delta)
  );
  showControls();
};

export const togglePlayPause = (): void => {
  if (state.video.paused) {
    state.video.play();
  } else {
    state.video.pause();
  }
};

export const toggleMute = (): void => {
  if (state.video.muted || state.video.volume === 0) {
    const restored = state.lastKnownVolume > 0 ? state.lastKnownVolume : 1;
    state.video.muted = false;
    state.video.volume = restored;
  } else {
    state.lastKnownVolume = state.video.volume > 0 ? state.video.volume : state.lastKnownVolume;
    state.video.muted = true;
  }
};

export const setVolume = (value: number): void => {
  state.video.volume = Math.max(0, Math.min(1, value));
  state.video.muted = value === 0;
  if (value > 0) state.lastKnownVolume = value;
};

export const toggleFullscreen = (): void => {
  if (document.fullscreenElement) {
    document.exitFullscreen();
    return;
  }
  state.container.requestFullscreen?.();
};

export const syncVolumeUI = (): void => {
  const { volumeRange, volumeUnderline, iconVolume, iconMuted } = getControls();
  const value = state.video.muted ? 0 : Math.round(state.video.volume * 100);
  if (volumeRange) {
    volumeRange.value = String(value);
    volumeRange.style.setProperty('--volume-percent', `${value}%`);
  }
  if (volumeUnderline) volumeUnderline.style.height = `${value}%`;
  updateMuteIcons(state.video.muted || state.video.volume === 0);
};

interface Controls {
  playPause: HTMLButtonElement | null;
  muteBtn: HTMLButtonElement | null;
  volumePanel: HTMLElement | null;
  volumeRange: HTMLInputElement | null;
  volumeUnderline: HTMLElement | null;
  backwardBtn: HTMLButtonElement | null;
  forwardBtn: HTMLButtonElement | null;
  fullscreenBtn: HTMLButtonElement | null;
  iconPlay: SVGElement | null;
  iconPause: SVGElement | null;
  iconVolume: SVGElement | null;
  iconMuted: SVGElement | null;
  skipSegmentBtn: HTMLButtonElement | null;
  subtitleText: HTMLElement | null;
  autoplayBtn: HTMLInputElement | null;
}

let controlsCache: Controls | null = null;

const getControls = (): Controls => {
  if (controlsCache) return controlsCache;
  const c = state.container;
  controlsCache = {
    playPause: c.querySelector('[data-play-pause]'),
    muteBtn: c.querySelector('[data-mute]'),
    volumePanel: c.querySelector('[data-volume-panel]'),
    volumeRange: c.querySelector('[data-volume-range]'),
    volumeUnderline: c.querySelector('[data-volume-underline]'),
    backwardBtn: c.querySelector('[data-backward]'),
    forwardBtn: c.querySelector('[data-forward]'),
    fullscreenBtn: c.querySelector('[data-fullscreen]'),
    iconPlay: c.querySelector('[data-icon-play]'),
    iconPause: c.querySelector('[data-icon-pause]'),
    iconVolume: c.querySelector('[data-icon-volume]'),
    iconMuted: c.querySelector('[data-icon-muted]'),
    skipSegmentBtn: c.querySelector('[data-skip]'),
    subtitleText: c.querySelector('[data-subtitle-text]'),
    autoplayBtn: document.querySelector('[data-autoplay]'),
  };
  return controlsCache;
};

const updatePlayPauseIcons = (isPlaying: boolean): void => {
  const { iconPlay, iconPause } = getControls();
  iconPlay?.classList.toggle('hidden', isPlaying);
  iconPause?.classList.toggle('hidden', !isPlaying);
};

const updateMuteIcons = (isMuted: boolean): void => {
  const { iconVolume, iconMuted } = getControls();
  iconVolume?.classList.toggle('hidden', isMuted);
  iconMuted?.classList.toggle('hidden', !isMuted);
};

export const setupControls = (): void => {
  const {
    playPause,
    muteBtn,
    volumePanel,
    volumeRange,
    backwardBtn,
    forwardBtn,
    fullscreenBtn,
    skipSegmentBtn,
  } = getControls();

  playPause?.addEventListener('click', () => {
    togglePlayPause();
    showControls();
  });
  state.video.addEventListener('click', () => {
    togglePlayPause();
    showControls();
  });

  muteBtn?.addEventListener('click', () => {
    toggleMute();
    showControls();
  });

  volumeRange?.addEventListener('input', () => {
    const value = Number(volumeRange.value) / 100;
    setVolume(value);
    showControls();
  });
  volumeRange?.addEventListener('pointerdown', () => volumePanel?.classList.add('is-dragging'));
  window.addEventListener('pointerup', () => volumePanel?.classList.remove('is-dragging'));

  backwardBtn?.addEventListener('click', () => seekBy(-10));
  forwardBtn?.addEventListener('click', () => seekBy(10));

  fullscreenBtn?.addEventListener('click', () => {
    toggleFullscreen();
    showControls();
  });

  skipSegmentBtn?.addEventListener('click', () => {
    if (!state.activeSkipSegment) return;
    state.video.currentTime = state.activeSkipSegment.end + 0.01;
    showControls();
  });

  document.addEventListener('fullscreenchange', () => {
    state.isFullscreen = !!document.fullscreenElement;
    state.container.classList.toggle('fullscreen', state.isFullscreen);
    if (state.isFullscreen) showControls();
  });

  state.video.addEventListener('play', () => {
    updatePlayPauseIcons(true);
    showControls();
  });
  state.video.addEventListener('pause', () => {
    updatePlayPauseIcons(false);
    showControls();
  });
  state.video.addEventListener('volumechange', syncVolumeUI);

  state.container.addEventListener('mousemove', showControls);

  updatePlayPauseIcons(false);
  syncVolumeUI();
};