File size: 3,513 Bytes
6f0655f |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 |
"use client";
import React, { useEffect, useRef } from "react";
import Link from "next/link";
import { useRouter, useSearchParams } from "next/navigation";
import { postParentMessageWithParams } from "@/utils/postParentMessage";
type ExploreGridProps = {
datasets: Array<{ id: string; videoUrl: string | null }>;
currentPage: number;
totalPages: number;
};
export default function ExploreGrid({
datasets,
currentPage,
totalPages,
}: ExploreGridProps) {
// sync with parent window hf.co/spaces
useEffect(() => {
postParentMessageWithParams((params: URLSearchParams) => {
params.set("path", window.location.pathname + window.location.search);
});
}, []);
// Create an array of refs for each video
const videoRefs = useRef<(HTMLVideoElement | null)[]>([]);
return (
<main className="p-8">
<h1 className="text-2xl font-bold mb-6">Explore LeRobot Datasets</h1>
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
{datasets.map((ds, idx) => (
<Link
key={ds.id}
href={`/${ds.id}`}
className="relative border rounded-lg p-4 bg-white shadow hover:shadow-lg transition overflow-hidden h-48 flex items-end group"
onMouseEnter={() => {
const vid = videoRefs.current[idx];
if (vid) vid.play();
}}
onMouseLeave={() => {
const vid = videoRefs.current[idx];
if (vid) {
vid.pause();
vid.currentTime = 0;
}
}}
>
<video
ref={(el) => {
videoRefs.current[idx] = el;
}}
src={ds.videoUrl || undefined}
className="absolute top-0 left-0 w-full h-full object-cover object-center z-0"
loop
muted
playsInline
preload="metadata"
onTimeUpdate={(e) => {
const vid = e.currentTarget;
if (vid.currentTime >= 15) {
vid.pause();
vid.currentTime = 0;
}
}}
/>
<div className="absolute top-0 left-0 w-full h-full bg-black/40 z-10 pointer-events-none" />
<div className="relative z-20 font-mono text-blue-100 break-all text-sm bg-black/60 backdrop-blur px-2 py-1 rounded shadow">
{ds.id}
</div>
</Link>
))}
</div>
<div className="flex justify-center mt-8 gap-4">
{currentPage > 1 && (
<button
className="px-6 py-2 bg-gray-600 text-white rounded shadow hover:bg-gray-700 transition"
onClick={() => {
const params = new URLSearchParams(window.location.search);
params.set("p", (currentPage - 1).toString());
window.location.search = params.toString();
}}
>
Previous
</button>
)}
{currentPage < totalPages && (
<button
className="px-6 py-2 bg-blue-600 text-white rounded shadow hover:bg-blue-700 transition"
onClick={() => {
const params = new URLSearchParams(window.location.search);
params.set("p", (currentPage + 1).toString());
window.location.search = params.toString();
}}
>
Next
</button>
)}
</div>
</main>
);
}
|