init

content.js

@@ -0,0 +1,111 @@
+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;`;
+  // return `display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;`;
+}
+
+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 w = width || canvas.width;
+  const h = height || canvas.height;
+
+  container = canvas.closest(ROOT_SELECTOR) ?? canvas.parentElement;
+
+  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);