120 lines
3.4 KiB
JavaScript
120 lines
3.4 KiB
JavaScript
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);
|