Sync from GitHub via hub-sync

next.config.ts

@@ -9,6 +9,12 @@ const nextConfig: NextConfig = {
     ignoreDuringBuilds: true,
   },
   transpilePackages: ["three"],
+  // Avoid the 200-800ms cold-start cost of barrel-file imports.
+  // react-icons re-exports thousands of icon components from /fa, etc.;
+  // recharts and @huggingface/hub also have wide entry surfaces.
+  experimental: {
+    optimizePackageImports: ["react-icons", "recharts", "@huggingface/hub"],
+  },
   generateBuildId: () => packageJson.version,
 };
 

src/components/videos-player.tsx

@@ -1,425 +0,0 @@
-"use client";
-
-import { useEffect, useRef, useState, useMemo, useCallback } from "react";
-import { useTime } from "../context/time-context";
-import { FaExpand, FaCompress, FaTimes, FaEye } from "react-icons/fa";
-import type { VideoInfo } from "@/types";
-
-type VideoPlayerProps = {
-  videosInfo: VideoInfo[];
-  onVideosReady?: () => void;
-};
-
-const videoCleanupHandlers = new WeakMap<HTMLVideoElement, () => void>();
-const videoReadyHandlers = new WeakMap<HTMLVideoElement, EventListener>();
-
-const VIDEO_SYNC_TOLERANCE = 0.2;
-
-export const VideosPlayer = ({
-  videosInfo,
-  onVideosReady,
-}: VideoPlayerProps) => {
-  const { currentTime, seek, isPlaying, setIsPlaying } = useTime();
-  const videoRefs = useRef<HTMLVideoElement[]>([]);
-  const [hiddenVideos, setHiddenVideos] = useState<string[]>([]);
-
-  const hiddenSet = useMemo(() => new Set(hiddenVideos), [hiddenVideos]);
-
-  const firstVisibleIdx = videosInfo.findIndex(
-    (video) => !hiddenSet.has(video.filename),
-  );
-  const visibleCount = videosInfo.filter(
-    (video) => !hiddenSet.has(video.filename),
-  ).length;
-  const [enlargedVideo, setEnlargedVideo] = useState<string | null>(null);
-  const prevHiddenVideosRef = useRef<string[]>([]);
-  const videoContainerRefs = useRef<Record<string, HTMLDivElement | null>>({});
-  const [showHiddenMenu, setShowHiddenMenu] = useState(false);
-  const hiddenMenuRef = useRef<HTMLDivElement | null>(null);
-  const showHiddenBtnRef = useRef<HTMLButtonElement | null>(null);
-  const [videoCodecError, setVideoCodecError] = useState(false);
-
-  // Tracks the last time value set by the primary video's onTimeUpdate.
-  // If currentTime differs from this, an external source (slider/chart click) changed it.
-  const lastVideoTimeRef = useRef(0);
-
-  // Initialize video refs
-  useEffect(() => {
-    videoRefs.current = videoRefs.current.slice(0, videosInfo.length);
-  }, [videosInfo]);
-
-  // When videos get unhidden, sync their time and resume playback
-  useEffect(() => {
-    const prevHidden = prevHiddenVideosRef.current;
-    const newlyUnhidden = prevHidden.filter(
-      (filename) => !hiddenSet.has(filename),
-    );
-    if (newlyUnhidden.length > 0) {
-      const unhiddenNames = new Set(newlyUnhidden);
-      videosInfo.forEach((video, idx) => {
-        if (unhiddenNames.has(video.filename)) {
-          const ref = videoRefs.current[idx];
-          if (ref) {
-            ref.currentTime = currentTime;
-            if (isPlaying) {
-              ref.play().catch(() => {});
-            }
-          }
-        }
-      });
-    }
-    prevHiddenVideosRef.current = hiddenVideos;
-  }, [hiddenVideos, hiddenSet, isPlaying, videosInfo, currentTime]);
-
-  // Check video codec support
-  useEffect(() => {
-    const checkCodecSupport = () => {
-      const dummyVideo = document.createElement("video");
-      const canPlayVideos = dummyVideo.canPlayType(
-        'video/mp4; codecs="av01.0.05M.08"',
-      );
-      setVideoCodecError(!canPlayVideos);
-    };
-
-    checkCodecSupport();
-  }, []);
-
-  // Handle play/pause — skip hidden videos to avoid wasting decoder time
-  useEffect(() => {
-    videoRefs.current.forEach((video, idx) => {
-      if (!video || hiddenSet.has(videosInfo[idx]?.filename)) return;
-      if (isPlaying) {
-        video.play().catch(() => console.error("Error playing video"));
-      } else {
-        video.pause();
-      }
-    });
-  }, [isPlaying, hiddenSet, videosInfo]);
-
-  // Minimize enlarged video on Escape key
-  useEffect(() => {
-    if (!enlargedVideo) return;
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === "Escape") {
-        setEnlargedVideo(null);
-      }
-    };
-    window.addEventListener("keydown", handleKeyDown);
-    // Scroll enlarged video into view
-    const ref = videoContainerRefs.current[enlargedVideo];
-    if (ref) {
-      ref.scrollIntoView();
-    }
-    return () => {
-      window.removeEventListener("keydown", handleKeyDown);
-    };
-  }, [enlargedVideo]);
-
-  // Close hidden videos dropdown on outside click
-  useEffect(() => {
-    if (!showHiddenMenu) return;
-    function handleClick(e: MouseEvent) {
-      const menu = hiddenMenuRef.current;
-      const btn = showHiddenBtnRef.current;
-      if (
-        menu &&
-        !menu.contains(e.target as Node) &&
-        btn &&
-        !btn.contains(e.target as Node)
-      ) {
-        setShowHiddenMenu(false);
-      }
-    }
-    document.addEventListener("mousedown", handleClick);
-    return () => document.removeEventListener("mousedown", handleClick);
-  }, [showHiddenMenu]);
-
-  // Close dropdown if no hidden videos
-  useEffect(() => {
-    if (hiddenVideos.length === 0 && showHiddenMenu) {
-      setShowHiddenMenu(false);
-    }
-    // Minimize if enlarged video is hidden
-    if (enlargedVideo && hiddenVideos.includes(enlargedVideo)) {
-      setEnlargedVideo(null);
-    }
-  }, [hiddenVideos, showHiddenMenu, enlargedVideo]);
-
-  // Sync all video times when currentTime changes.
-  // For the primary video, only seek when the change came from an external source
-  // (slider drag, chart click, etc.) — detected by comparing against lastVideoTimeRef.
-  useEffect(() => {
-    const isExternalSeek =
-      Math.abs(currentTime - lastVideoTimeRef.current) > 0.3;
-
-    videoRefs.current.forEach((video, index) => {
-      if (!video) return;
-      if (hiddenSet.has(videosInfo[index]?.filename)) return;
-      if (index === firstVisibleIdx && !isExternalSeek) return;
-
-      const videoInfo = videosInfo[index];
-      if (videoInfo?.isSegmented) {
-        const segmentStart = videoInfo.segmentStart || 0;
-        const segmentTime = segmentStart + currentTime;
-        if (Math.abs(video.currentTime - segmentTime) > VIDEO_SYNC_TOLERANCE) {
-          video.currentTime = segmentTime;
-        }
-      } else {
-        if (Math.abs(video.currentTime - currentTime) > VIDEO_SYNC_TOLERANCE) {
-          video.currentTime = currentTime;
-        }
-      }
-    });
-  }, [currentTime, videosInfo, firstVisibleIdx, hiddenSet]);
-
-  // Stable per-index timeupdate handlers avoid findIndex scan on every event
-  const makeTimeUpdateHandler = useCallback(
-    (index: number) => {
-      return () => {
-        const video = videoRefs.current[index];
-        if (!video || !video.duration) return;
-        const videoInfo = videosInfo[index];
-
-        if (videoInfo?.isSegmented) {
-          const segmentStart = videoInfo.segmentStart || 0;
-          const globalTime = Math.max(0, video.currentTime - segmentStart);
-          lastVideoTimeRef.current = globalTime;
-          seek(globalTime);
-        } else {
-          lastVideoTimeRef.current = video.currentTime;
-          seek(video.currentTime);
-        }
-      };
-    },
-    [videosInfo, seek],
-  );
-
-  // Handle video ready and setup segmentation
-  useEffect(() => {
-    let videosReadyCount = 0;
-    const onCanPlayThrough = (videoIndex: number) => {
-      const video = videoRefs.current[videoIndex];
-      const videoInfo = videosInfo[videoIndex];
-
-      // Setup video segmentation for v3.0 chunked videos
-      if (video && videoInfo?.isSegmented) {
-        const segmentStart = videoInfo.segmentStart || 0;
-        const segmentEnd = videoInfo.segmentEnd || video.duration || 0;
-
-        // Set initial time to segment start if not already set
-        if (
-          video.currentTime < segmentStart ||
-          video.currentTime > segmentEnd
-        ) {
-          video.currentTime = segmentStart;
-        }
-
-        // Add event listener to handle segment boundaries
-        const handleTimeUpdate = () => {
-          if (video.currentTime > segmentEnd) {
-            video.currentTime = segmentStart;
-            if (!video.loop) {
-              video.pause();
-            }
-          }
-        };
-
-        video.addEventListener("timeupdate", handleTimeUpdate);
-
-        videoCleanupHandlers.set(video, () => {
-          video.removeEventListener("timeupdate", handleTimeUpdate);
-        });
-      }
-
-      videosReadyCount += 1;
-      if (videosReadyCount === videosInfo.length) {
-        if (typeof onVideosReady === "function") {
-          onVideosReady();
-          setIsPlaying(true);
-        }
-      }
-    };
-
-    videoRefs.current.forEach((video, index) => {
-      if (video) {
-        // If already ready, call the handler immediately
-        if (video.readyState >= 4) {
-          onCanPlayThrough(index);
-        } else {
-          const readyHandler = () => onCanPlayThrough(index);
-          video.addEventListener("canplaythrough", readyHandler);
-          videoReadyHandlers.set(video, readyHandler);
-        }
-      }
-    });
-
-    return () => {
-      videoRefs.current.forEach((video) => {
-        if (!video) return;
-        const readyHandler = videoReadyHandlers.get(video);
-        if (readyHandler) {
-          video.removeEventListener("canplaythrough", readyHandler);
-          videoReadyHandlers.delete(video);
-        }
-        const cleanup = videoCleanupHandlers.get(video);
-        if (cleanup) {
-          cleanup();
-          videoCleanupHandlers.delete(video);
-        }
-      });
-    };
-  }, [videosInfo, onVideosReady, setIsPlaying]);
-
-  return (
-    <>
-      {/* Error message */}
-      {videoCodecError && (
-        <div className="font-medium text-amber-400">
-          <p>
-            Videos could NOT play because{" "}
-            <a
-              href="https://en.wikipedia.org/wiki/AV1"
-              target="_blank"
-              className="underline"
-            >
-              AV1
-            </a>{" "}
-            decoding is not available on your browser.
-          </p>
-          <ul className="list-inside list-decimal">
-            <li>
-              If iPhone:{" "}
-              <span className="italic">
-                It is supported with A17 chip or higher.
-              </span>
-            </li>
-            <li>
-              If Mac with Safari:{" "}
-              <span className="italic">
-                It is supported on most browsers except Safari with M1 chip or
-                higher and on Safari with M3 chip or higher.
-              </span>
-            </li>
-            <li>
-              Other:{" "}
-              <span className="italic">
-                Contact the maintainers on LeRobot discord channel:
-              </span>
-              <a
-                href="https://discord.com/invite/s3KuuzsPFb"
-                target="_blank"
-                className="underline"
-              >
-                https://discord.com/invite/s3KuuzsPFb
-              </a>
-            </li>
-          </ul>
-        </div>
-      )}
-
-      {/* Show Hidden Videos Button */}
-      {hiddenVideos.length > 0 && (
-        <div className="relative">
-          <button
-            ref={showHiddenBtnRef}
-            className="flex items-center gap-2 rounded bg-[var(--surface-1)] px-3 py-2 text-sm text-slate-100 hover:bg-white/5 border border-white/10"
-            onClick={() => setShowHiddenMenu((prev) => !prev)}
-          >
-            <FaEye /> Show Hidden Videos ({hiddenVideos.length})
-          </button>
-          {showHiddenMenu && (
-            <div
-              ref={hiddenMenuRef}
-              className="absolute left-0 mt-2 w-max rounded border border-white/10 bg-[var(--surface-0)] shadow-lg p-2 z-50"
-            >
-              <div className="mb-2 text-xs text-slate-300">
-                Restore hidden videos:
-              </div>
-              {hiddenVideos.map((filename) => (
-                <button
-                  key={filename}
-                  className="block w-full text-left px-2 py-1 rounded hover:bg-white/5 text-slate-100"
-                  onClick={() =>
-                    setHiddenVideos((prev: string[]) =>
-                      prev.filter((v: string) => v !== filename),
-                    )
-                  }
-                >
-                  {filename}
-                </button>
-              ))}
-            </div>
-          )}
-        </div>
-      )}
-
-      {/* Videos */}
-      <div className="flex flex-wrap gap-x-2 gap-y-6">
-        {videosInfo.map((video, idx) => {
-          if (hiddenVideos.includes(video.filename) || videoCodecError)
-            return null;
-          const isEnlarged = enlargedVideo === video.filename;
-          return (
-            <div
-              key={video.filename}
-              ref={(el) => {
-                videoContainerRefs.current[video.filename] = el;
-              }}
-              className={`${isEnlarged ? "z-40 fixed inset-0 bg-black bg-opacity-90 flex flex-col items-center justify-center" : "max-w-96"}`}
-              style={isEnlarged ? { height: "100vh", width: "100vw" } : {}}
-            >
-              <p className="truncate w-full rounded-t-xl bg-gray-800 px-2 text-sm text-gray-300 flex items-center justify-between">
-                <span>{video.filename}</span>
-                <span className="flex gap-1">
-                  <button
-                    title={isEnlarged ? "Minimize" : "Enlarge"}
-                    className="ml-2 p-1 hover:bg-white/5 rounded focus:outline-none focus:ring-0"
-                    onClick={() =>
-                      setEnlargedVideo(isEnlarged ? null : video.filename)
-                    }
-                  >
-                    {isEnlarged ? <FaCompress /> : <FaExpand />}
-                  </button>
-                  <button
-                    title="Hide Video"
-                    className="ml-1 p-1 hover:bg-white/5 rounded focus:outline-none focus:ring-0"
-                    onClick={() =>
-                      setHiddenVideos((prev: string[]) => [
-                        ...prev,
-                        video.filename,
-                      ])
-                    }
-                    disabled={visibleCount === 1}
-                  >
-                    <FaTimes />
-                  </button>
-                </span>
-              </p>
-              <video
-                ref={(el) => {
-                  if (el) videoRefs.current[idx] = el;
-                }}
-                muted
-                loop
-                preload="auto"
-                crossOrigin="anonymous"
-                className={`w-full object-contain ${isEnlarged ? "max-h-[90vh] max-w-[90vw]" : ""}`}
-                onTimeUpdate={
-                  idx === firstVisibleIdx
-                    ? makeTimeUpdateHandler(idx)
-                    : undefined
-                }
-                style={isEnlarged ? { zIndex: 41 } : {}}
-              >
-                <source src={video.url} type="video/mp4" />
-                Your browser does not support the video tag.
-              </video>
-            </div>
-          );
-        })}
-      </div>
-    </>
-  );
-};
-
-export default VideosPlayer;