Spaces:
Running on CPU Upgrade
Running on CPU Upgrade
File size: 3,748 Bytes
8a37195 cebfee6 8a37195 c7f2f22 cebfee6 c7f2f22 8a37195 c7f2f22 8a37195 c7f2f22 8a37195 c7f2f22 8a37195 c7f2f22 8a37195 c7f2f22 8a37195 c7f2f22 8a37195 c7f2f22 8a37195 | 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 106 107 108 109 | "use client";
import React, { useEffect, useRef } from "react";
import Link from "next/link";
import { postParentMessageWithParams } from "@/utils/postParentMessage";
import HfAuthButton from "@/components/hf-auth-button";
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="px-8 py-10 max-w-7xl mx-auto">
<div className="flex items-center justify-between mb-6 gap-4">
<h1 className="text-xl font-medium tracking-tight text-slate-100">
Explore LeRobot datasets
</h1>
<HfAuthButton />
</div>
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
{datasets.map((ds, idx) => (
<Link
key={ds.id}
href={`/${ds.id}`}
className="relative rounded-md overflow-hidden h-48 flex items-end group panel hover:border-cyan-400/40 transition-colors"
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 inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent z-10 pointer-events-none" />
<div className="relative z-20 w-full px-3 py-2 text-xs text-slate-200 truncate">
{ds.id}
</div>
</Link>
))}
</div>
<div className="flex justify-center mt-8 gap-3">
{currentPage > 1 && (
<button
className="px-4 py-2 rounded-md panel text-sm text-slate-300 hover:text-slate-100 hover:bg-white/5 transition-colors"
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-4 py-2 rounded-md bg-cyan-400/10 border border-cyan-400/30 text-cyan-300 text-sm hover:bg-cyan-400/15 transition-colors"
onClick={() => {
const params = new URLSearchParams(window.location.search);
params.set("p", (currentPage + 1).toString());
window.location.search = params.toString();
}}
>
Next ›
</button>
)}
</div>
</main>
);
}
|