const video = document.getElementById("video");
const play = document.getElementById("play");
const progress = document.getElementById("progress");
const time = document.getElementById("time");
const volume = document.getElementById("volume");
const fs = document.getElementById("fs");

const fmt = (s) => `${Math.floor(s/60)}:${String(Math.floor(s%60)).padStart(2,"0")}`;

play.onclick = () => {
  if (video.paused) { video.play(); play.textContent = "⏸"; }
  else { video.pause(); play.textContent = "▶"; }
};

video.addEventListener("loadedmetadata", () => progress.max = video.duration);
video.addEventListener("timeupdate", () => {
  progress.value = video.currentTime;
  time.textContent = `${fmt(video.currentTime)} / ${fmt(video.duration || 0)}`;
});
progress.addEventListener("input", () => video.currentTime = progress.value);
volume.addEventListener("input", () => video.volume = volume.value);
video.volume = volume.value;

fs.onclick = () => {
  if (!document.fullscreenElement) video.requestFullscreen?.();
  else document.exitFullscreen?.();
};
video.addEventListener("click", () => play.click());