init

content.js

@@ -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 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 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 showVideo(width, height) {
+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 = random(VIDEOS);
+    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 = video;
-  container.appendChild(video);
+  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(() => {});
 }