stuff

index.html

@@ -31,13 +31,28 @@
 
     .video-wrapper { flex: 1; min-width: 0; }
 
+    .video-wrapper {
+      overflow: hidden;
+      border-radius: 12px;
+    }
+
     .video-wrapper video {
       width: 100%;
       height: auto;
+      display: block;
       border-radius: 12px;
       box-shadow: 0 4px 40px rgba(0,0,0,0.6);
     }
 
+    @keyframes spin360 {
+      from { transform: rotate(0deg); }
+      to { transform: rotate(360deg); }
+    }
+
+    .video-wrapper video.spin {
+      animation: spin360 0.5s ease-out;
+    }
+
     .button-sidebar {
       display: flex;
       flex-direction: column;
@@ -100,6 +115,17 @@
       v.addEventListener('contextmenu', e => e.preventDefault());
       v.addEventListener('pause', () => v.play());
       setInterval(() => { if (v.paused) v.play(); }, 200);
+
+      let lastTime = 0;
+      v.addEventListener('timeupdate', () => {
+        const t = v.currentTime;
+        if (lastTime > 0.5 && t < 0.1) {
+          v.classList.remove('spin');
+          void v.offsetWidth;
+          v.classList.add('spin');
+        }
+        lastTime = t;
+      });
     })();
   </script>
 </body>