Fix video comparison slider and add favicon

daijun10086 · daijun10086 · commit 7baeff1ee96b · 2026-02-05T10:20:41.000-05:00
diff --git a/index.html b/index.html
@@ -2,8 +2,9 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Research Project Showcase</title>
+    <title>AsyncEvGS - Asynchronous Event-Assisted Gaussian Splatting</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@400;600;700&display=swap" rel="stylesheet">
     <script>
diff --git a/public/favicon.svg b/public/favicon.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <rect width="32" height="32" rx="6" fill="#2563eb"/>
+  <text x="16" y="22" font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="white" text-anchor="middle">Ev</text>
+</svg>
diff --git a/src/App.css b/src/App.css
@@ -53,3 +53,4 @@
   font-weight: 600;
   color: #0f172a;
 }
+/* Build timestamp: 1770304231 */
diff --git a/src/App.tsx b/src/App.tsx
@@ -26,6 +26,7 @@ const Icons = {
 
 const VideoComparisonSlider: React.FC<{ item: ComparisonItem }> = ({ item }) => {
   const [position, setPosition] = useState(50);
+  const [isLoading, setIsLoading] = useState(true);
   const containerRef = useRef<HTMLDivElement>(null);
   const videoLeftRef = useRef<HTMLVideoElement>(null);
   const videoRightRef = useRef<HTMLVideoElement>(null);
@@ -39,25 +40,49 @@ const VideoComparisonSlider: React.FC<{ item: ComparisonItem }> = ({ item }) =>
     setPosition(percentage);
   };
 
+  // Reset loading state when item changes
+  useEffect(() => {
+    setIsLoading(true);
+  }, [item.id]);
+
   // Sync video playback - ensure both videos play together
   useEffect(() => {
     const leftVideo = videoLeftRef.current;
     const rightVideo = videoRightRef.current;
     
     if (leftVideo && rightVideo) {
+      // Reset videos when item changes
+      leftVideo.load();
+      rightVideo.load();
+      
       // Start playing both videos
       const playBoth = async () => {
         try {
           await Promise.all([
             leftVideo.play(),
             rightVideo.play()
           ]);
+          setIsLoading(false);
         } catch (error) {
           console.log('Autoplay prevented, user interaction needed');
+          setIsLoading(false);
         }
       };
       
-      playBoth();
+      // Wait for both videos to be ready
+      const handleCanPlay = () => {
+        if (leftVideo.readyState >= 3 && rightVideo.readyState >= 3) {
+          playBoth();
+        }
+      };
+      
+      leftVideo.addEventListener('canplay', handleCanPlay);
+      rightVideo.addEventListener('canplay', handleCanPlay);
+      
+      // Try to play immediately if already loaded
+      if (leftVideo.readyState >= 3 && rightVideo.readyState >= 3) {
+        playBoth();
+      }
       
       const syncVideos = () => {
         if (Math.abs(leftVideo.currentTime - rightVideo.currentTime) > 0.1) {
@@ -73,12 +98,14 @@ const VideoComparisonSlider: React.FC<{ item: ComparisonItem }> = ({ item }) =>
       leftVideo.addEventListener('timeupdate', syncVideos);
       
       return () => {
+        leftVideo.removeEventListener('canplay', handleCanPlay);
+        rightVideo.removeEventListener('canplay', handleCanPlay);
         leftVideo.removeEventListener('play', handlePlay);
         leftVideo.removeEventListener('pause', handlePause);
         leftVideo.removeEventListener('timeupdate', syncVideos);
       };
     }
-  }, []);
+  }, [item.id]);
 
   return (
     <div className="mb-4">
@@ -89,15 +116,23 @@ const VideoComparisonSlider: React.FC<{ item: ComparisonItem }> = ({ item }) =>
         onTouchMove={handleMove}
         onClick={handleMove}
       >
+        {/* Loading indicator */}
+        {isLoading && (
+          <div className="absolute inset-0 flex items-center justify-center z-30 bg-black/50">
+            <div className="w-10 h-10 border-4 border-white border-t-transparent rounded-full animate-spin"></div>
+          </div>
+        )}
+
         {/* Right Video (Ours - Background) */}
         <video 
+          key={`ours-${item.id}`}
           ref={videoRightRef}
           src={item.videoOurs}
           className="absolute inset-0 w-full h-full object-cover" 
           loop
           muted
           playsInline
-          autoPlay
+          preload="auto"
         />
         
         {/* Left Video (Baseline - Clipped overlay) */}
@@ -106,13 +141,14 @@ const VideoComparisonSlider: React.FC<{ item: ComparisonItem }> = ({ item }) =>
           style={{ clipPath: `inset(0 ${100 - position}% 0 0)` }}
         >
           <video 
+            key={`baseline-${item.id}`}
             ref={videoLeftRef}
             src={item.videoBaseline}
             className="absolute inset-0 w-full h-full object-cover"
             loop
             muted
             playsInline
-            autoPlay
+            preload="auto"
           />
         </div>
 

Original file line number	Diff line number	Diff line change
`@@ -53,3 +53,4 @@`
`53`	`53`	`font-weight: 600;`
`54`	`54`	`color: #0f172a;`
`55`	`55`	`}`
	`56`	`+/* Build timestamp: 1770304231 */`