This commit is contained in:
yash 2026-07-19 21:17:04 +03:00
parent b3790d663b
commit da193d3451

View file

@ -15,6 +15,9 @@ 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)];
}
@ -23,27 +26,62 @@ 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 = document.createElement("img");
img.src = random(PHOTOS);
img.style.cssText = elStyle(width, height);
const img = getOrCreateImg(random(PHOTOS), width, height);
currentEl?.remove();
currentEl = img;
container.appendChild(img);
currentEl = wrapWithEdgeBlur(img, width, height);
container.appendChild(currentEl);
}
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);
const video = getOrCreateVideo(random(VIDEOS), width, height);
currentEl?.remove();
currentEl = video;
container.appendChild(video);
currentEl = wrapWithEdgeBlur(video, width, height);
container.appendChild(currentEl);
video.play().catch(() => {});
}