const VIDEOS = [
  "https://cdn.computernetthings.ru/nikit0s.mp4",
  // "https://cdn.computernetthings.ru/video2.mp4",
];

const PHOTOS = [
  "https://cdn.computernetthings.ru/ph1.jpg",
  // "https://cdn.computernetthings.ru/photo2.jpg",
];

const CANVAS_SELECTOR = ".VibeWidgetAnimation_root__7fpeP > canvas:nth-child(1)";
const ROOT_SELECTOR = ".VibeWidgetAnimation_root__7fpeP";
const PLAY_INDICATOR_SELECTOR = ".VibeResetButton_root__ju8pE";

let container = null;
let currentEl = null;

function random(arr) {
  return arr[Math.floor(Math.random() * arr.length)];
}

function elStyle(width, height) {
  return `display:block;width:${width}px;height:${height}px;object-fit:cover;pointer-events:none;z-index:0;position:relative;`;
}

function showPhoto(width, height) {
  const img = document.createElement("img");
  img.src = random(PHOTOS);
  img.style.cssText = elStyle(width, height);
  currentEl?.remove();
  currentEl = img;
  container.appendChild(img);
}

function showVideo(width, height) {
  const video = document.createElement("video");
  video.src = random(VIDEOS);
  video.setAttribute("autoplay", "");
  video.setAttribute("loop", "");
  video.setAttribute("muted", "");
  video.setAttribute("playsinline", "");
  video.muted = true;
  video.style.cssText = elStyle(width, height);
  currentEl?.remove();
  currentEl = video;
  container.appendChild(video);
  video.play().catch(() => {});
}

function syncFromIndicator(indicator, width, height) {
  if (indicator.getAttribute("aria-hidden") === "true") {
    if (PHOTOS.length > 0) {
      showPhoto(width, height);
    } else {
      currentEl?.pause?.();
    }
  } else {
    showVideo(width, height);
  }
}

function watchForPlayIndicator(width, height) {
  const bind = (indicator) => {
    syncFromIndicator(indicator, width, height);
    new MutationObserver(() => syncFromIndicator(indicator, width, height)).observe(indicator, {
      attributes: true,
      attributeFilter: ["aria-hidden"],
    });
  };

  const indicator = document.querySelector(PLAY_INDICATOR_SELECTOR);
  if (indicator) {
    bind(indicator);
    return;
  }

  const waitObserver = new MutationObserver(() => {
    const indicator = document.querySelector(PLAY_INDICATOR_SELECTOR);
    if (indicator) {
      waitObserver.disconnect();
      bind(indicator);
    }
  });
  waitObserver.observe(document.body, { childList: true, subtree: true });
}

function replaceAnimation(canvas) {
  if (canvas.dataset.customReplaced) return;
  canvas.dataset.customReplaced = "true";
  canvas.style.display = "none";

  // const { width, height } = canvas.getBoundingClientRect();
  const width = 650;
  const height = 650;
  const w = width || canvas.width;
  const h = height || canvas.height;

  container = canvas.closest(ROOT_SELECTOR) ?? canvas.parentElement;
  // container.style.position = "relative";
  container.style.overflow = "hidden";

  const style = document.createElement("style");
  style.textContent = `
    .VibePage_artistCover__RQee1 { display: none !important; }
  `;
  document.head.appendChild(style);

  showVideo(w, h);
  watchForPlayIndicator(w, h);
}

const observer = new MutationObserver(() => {
  const canvas = document.querySelector(CANVAS_SELECTOR);
  if (canvas) replaceAnimation(canvas);
});

observer.observe(document.body, { childList: true, subtree: true });

const initial = document.querySelector(CANVAS_SELECTOR);
if (initial) replaceAnimation(initial);