nikita.ym/content.js

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;

const videoCache = {};
const imgCache = {};

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 wrapWithEdgeBlur(mediaEl, width, height) {
  const wrapper = document.createElement("div");
  wrapper.style.cssText = `
    position:relative;width:${width}px;height:${height}px;overflow:hidden;border-radius:20px;
    mask-image:
      linear-gradient(to right,  transparent 0%, black 12%, black 88%, transparent 100%),
      linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%);
    mask-composite:intersect;
    -webkit-mask-image:
      linear-gradient(to right,  transparent 0%, black 12%, black 88%, transparent 100%),
      linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%);
    -webkit-mask-composite:destination-in;
  `;

  wrapper.appendChild(mediaEl);
  return wrapper;
}

function getOrCreateImg(src, width, height) {
  if (!imgCache[src]) {
    const img = document.createElement("img");
    img.src = src;
    img.style.cssText = elStyle(width, height);
    imgCache[src] = img;
  }
  return imgCache[src];
}

function getOrCreateVideo(src, width, height) {
  if (!videoCache[src]) {
    const video = document.createElement("video");
    video.src = src;
    video.setAttribute("autoplay", "");
    video.setAttribute("loop", "");
    video.setAttribute("muted", "");
    video.setAttribute("playsinline", "");
    video.setAttribute("preload", "auto");
    video.muted = true;
    video.style.cssText = elStyle(width, height);
    videoCache[src] = video;
  }
  return videoCache[src];
}

function showPhoto(width, height) {
  const img = getOrCreateImg(random(PHOTOS), width, height);
  currentEl?.remove();
  currentEl = wrapWithEdgeBlur(img, width, height);
  container.appendChild(currentEl);
}

function showVideo(width, height) {
  const video = getOrCreateVideo(random(VIDEOS), width, height);
  currentEl?.remove();
  currentEl = wrapWithEdgeBlur(video, width, height);
  container.appendChild(currentEl);
  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);