Update index.html

index.html

@@ -16,33 +16,29 @@
   <div id="root"></div>
 
   <script type="text/javascript">
-    const {
-      useEffect,
-      useState
-    } = React;
+    const { useEffect, useState } = React;
+
     function App() {
       const [videos, setVideos] = useState([]);
       const [teamDatasets, setTeamDatasets] = useState({});
+      const [searchQuery, setSearchQuery] = useState("");
+
       useEffect(() => {
-        fetch("https://huggingface.co/api/datasets/LeRobot-worldwide-hackathon/submissions/tree/main")
+        fetch("https://datasets-server.huggingface.co/rows?dataset=LeRobot-worldwide-hackathon%2Fsubmissions&config=default&split=train&offset=0&limit=100")
           .then(res => res.json())
           .then(data => {
-            const videoFiles = data
-              .filter(file => file.path.endsWith(".mp4"))
-              .map(file => {
-                const url =
-                  `https://huggingface.co/datasets/LeRobot-worldwide-hackathon/submissions/resolve/main/${encodeURIComponent(file.path)}`;
-                const match = file.path.match(/(?:team|group)[-_ ]?(\d+)/i);
+            const videoFiles = data.rows
+              .map(row => row.row.video)
+              .filter(url => typeof url === "string" && url.endsWith(".mp4"))
+              .map(url => {
+                const match = url.match(/(?:team|group)[-_ ]?(\d+)/i);
                 const team = match ? match[1] : null;
                 const label = team ? `Team ${team}` : "Unknown Team";
-                return {
-                  url,
-                  label,
-                  team
-                };
+                return { url, label, team };
               });
             setVideos(videoFiles);
           });
+
         fetch("https://huggingface.co/api/datasets?author=maringetxway")
           .then(res => res.json())
           .then(data => {
@@ -58,63 +54,77 @@
             setTeamDatasets(map);
           });
       }, []);
-    return React.createElement("div", {
-      className: "min-h-screen p-6",
-        style: {
-        backgroundColor: "#3A3B3C" // Dark gray color
-      }
-    },
+
+      const filteredVideos = videos.filter(video => {
+        return (
+          video.label.toLowerCase().includes(searchQuery) ||
+          video.url.toLowerCase().includes(searchQuery)
+        );
+      });
+
+      return React.createElement("div", {
+        className: "min-h-screen p-6",
+        style: { backgroundColor: "#3A3B3C" }
+      },
         React.createElement("style", {
           dangerouslySetInnerHTML: {
             __html: `
-                  @keyframes gradientBG {
-                    0% { background-position: 0% 50%; }
-                    50% { background-position: 100% 50%; }
-                    100% { background-position: 0% 50%; }
-                  }
-                `
+              @keyframes gradientBG {
+                0% { background-position: 0% 50%; }
+                50% { background-position: 100% 50%; }
+                100% { background-position: 0% 50%; }
+              }
+            `
           }
         }),
-      React.createElement("h1", {
-        className: "text-3xl font-bold mb-2 text-center text-white" // Added text-white
-      },
-       "LeRobot Worldwide Hackathon"
-        ),
+        React.createElement("h1", {
+          className: "text-3xl font-bold mb-2 text-center text-white"
+        }, "LeRobot Worldwide Hackathon"),
         React.createElement("p", {
-            className: "text-white text-center mb-6"
-          },
+          className: "text-white text-center mb-6"
+        },
           "🌍 Worldwide", React.createElement("br", null),
           "📅 June 2025, 14 at 09:00 AM (UTC+2) – June 2025, 15 at 06:00 PM (UTC+2)"
         ),
         React.createElement("div", {
-            className: "flex flex-wrap justify-center items-center gap-8 mb-10"
-          },
+          className: "flex justify-center mb-6"
+        },
+          React.createElement("input", {
+            type: "text",
+            placeholder: "Search videos…",
+            className: "px-4 py-2 w-full max-w-md border rounded-md shadow-md",
+            value: searchQuery,
+            onChange: (e) => setSearchQuery(e.target.value.toLowerCase())
+          })
         ),
-
         React.createElement("div", {
           className: "columns-1 sm:columns-2 lg:columns-3 gap-4 space-y-4"
-        }, videos.map((video, i) =>
+        }, filteredVideos.map((video, i) =>
           React.createElement("div", {
-              key: i,
-              className: "break-inside-avoid bg-white rounded-2xl shadow-md overflow-hidden"
-            },
+            key: i,
+            className: "break-inside-avoid bg-white rounded-2xl shadow-md overflow-hidden"
+          },
             React.createElement("video", {
               src: video.url,
               controls: true,
+              autoplay: true,
+              muted: true,
+              loop: true,
+              playsInline: true,
               className: "w-full h-auto"
             }),
             React.createElement("div", {
-                className: "p-2 text-center text-sm font-medium text-gray"
-              },
+              className: "p-2 text-center text-sm font-medium text-gray-700"
+            },
               video.label,
               video.team && teamDatasets[video.team] &&
               React.createElement("div", {
-                  className: "mt-1 space-y-1"
-                },
+                className: "mt-1 space-y-1"
+              },
                 teamDatasets[video.team].map((url, j) =>
                   React.createElement("div", {
-                      key: j
-                    },
+                    key: j
+                  },
                     React.createElement("a", {
                       href: url,
                       className: "text-blue-500 underline",
@@ -128,9 +138,11 @@
         ))
       );
     }
+
     ReactDOM.createRoot(document.getElementById("root")).render(React.createElement(App));
   </script>
 </body>
 
 </html>
 
+