@hydralms/components 0.1.3 → 0.3.0

package/src/video/video-chapter-list.tsx

@@ -1,3 +1,4 @@
+import { useMemo } from "react";
 import { Play } from "lucide-react";
 import type { VideoChapterListProps } from "./types";
 import { cn } from "../lib/utils";
@@ -11,9 +12,9 @@ export const VideoChapterList = ({
   style,
 }: VideoChapterListProps) => {
   // Active chapter: last chapter whose time <= currentTime
-  const activeIndex = chapters.reduce<number>(
-    (acc, ch, i) => (ch.time <= currentTime ? i : acc),
-    -1,
+  const activeIndex = useMemo(
+    () => chapters.reduce<number>((acc, ch, i) => (ch.time <= currentTime ? i : acc), -1),
+    [chapters, currentTime],
   );
 
   return (
@@ -28,13 +29,16 @@ export const VideoChapterList = ({
         const isActive = i === activeIndex;
         return (
           <div
-            key={i}
+            key={chapter.time}
             className={cn(
               "flex items-center gap-3 p-3 transition-colors",
               isActive && "bg-primary/10",
               onSeek && "cursor-pointer hover:bg-muted",
             )}
             onClick={() => onSeek?.(chapter.time)}
+            role={onSeek ? "button" : undefined}
+            tabIndex={onSeek ? 0 : undefined}
+            onKeyDown={onSeek ? (e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); onSeek(chapter.time); } } : undefined}
           >
             {chapter.thumbnail ? (
               <div
@@ -44,6 +48,7 @@ export const VideoChapterList = ({
                 <img
                   src={chapter.thumbnail}
                   alt={chapter.title}
+                  loading="lazy"
                   className="size-full object-cover"
                 />
                 {isActive && (

package/src/video/video-player.tsx

@@ -1,4 +1,4 @@
-import { useRef } from "react";
+import { useRef, useCallback } from "react";
 import { Video, Play } from "lucide-react";
 import type { VideoPlayerProps } from "./types";
 import { cn } from "../lib/utils";
@@ -14,17 +14,23 @@ export const VideoPlayer = ({
   onTimeUpdate,
   readOnly = false,
   aspectRatio = "16/9",
+  tracks,
   className,
   style,
 }: VideoPlayerProps) => {
   const videoRef = useRef<HTMLVideoElement>(null);
+  const lastReportedTime = useRef(-1);
 
-  const handleTimeUpdate = () => {
+  const handleTimeUpdate = useCallback(() => {
     const video = videoRef.current;
     if (video && onTimeUpdate) {
-      onTimeUpdate(video.currentTime, video.duration);
+      const rounded = Math.floor(video.currentTime * 4) / 4; // 250ms granularity
+      if (rounded !== lastReportedTime.current) {
+        lastReportedTime.current = rounded;
+        onTimeUpdate(video.currentTime, video.duration);
+      }
     }
-  };
+  }, [onTimeUpdate]);
 
   if (!src) {
     return (
@@ -54,6 +60,7 @@ export const VideoPlayer = ({
           <img
             src={poster}
             alt={title || "Video poster"}
+            loading="lazy"
             style={{ width: "100%", height: "100%", objectFit: "cover" }}
           />
         ) : (
@@ -90,13 +97,25 @@ export const VideoPlayer = ({
           src={src}
           poster={poster}
           controls
+          preload="metadata"
           autoPlay={autoPlay}
           onPlay={onPlay}
           onPause={onPause}
           onEnded={onEnded}
           onTimeUpdate={handleTimeUpdate}
           style={{ width: "100%", aspectRatio, display: "block" }}
-        />
+        >
+          {tracks?.map((track) => (
+            <track
+              key={`${track.kind}-${track.srcLang}`}
+              src={track.src}
+              kind={track.kind}
+              label={track.label}
+              srcLang={track.srcLang}
+              default={track.default}
+            />
+          ))}
+        </video>
       </div>
     </div>
   );

package/src/video/video-playlist-item.tsx

@@ -1,9 +1,10 @@
+import { memo } from "react";
 import { Play, CheckCircle2, Circle } from "lucide-react";
 import type { VideoPlaylistItemProps } from "./types";
 import { cn } from "../lib/utils";
 import { formatDuration } from "../utils/format-duration";
 
-export const VideoPlaylistItem = ({
+export const VideoPlaylistItem = memo(function VideoPlaylistItem({
   thumbnail,
   title,
   duration,
@@ -13,7 +14,7 @@ export const VideoPlaylistItem = ({
   onClick,
   className,
   style,
-}: VideoPlaylistItemProps) => {
+}: VideoPlaylistItemProps) {
   return (
     <div
       className={cn(
@@ -24,6 +25,9 @@ export const VideoPlaylistItem = ({
       )}
       style={style}
       onClick={onClick}
+      role={onClick ? "button" : undefined}
+      tabIndex={onClick ? 0 : undefined}
+      onKeyDown={onClick ? (e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); onClick(); } } : undefined}
     >
       {/* Index / Status icon */}
       <div className="flex shrink-0 items-center justify-center size-6">
@@ -55,6 +59,7 @@ export const VideoPlaylistItem = ({
           <img
             src={thumbnail}
             alt={title}
+            loading="lazy"
             className={cn(
               "size-full object-cover",
               status === "completed" && "opacity-60",
@@ -87,4 +92,4 @@ export const VideoPlaylistItem = ({
       </div>
     </div>
   );
-};
+});

package/src/video/video-thumbnail-card.tsx

@@ -22,6 +22,9 @@ export const VideoThumbnailCard = ({
       )}
       style={style}
       onClick={onClick}
+      role={onClick ? "button" : undefined}
+      tabIndex={onClick ? 0 : undefined}
+      onKeyDown={onClick ? (e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); onClick(); } } : undefined}
     >
       {/* Poster area */}
       <div className="relative overflow-hidden" style={{ aspectRatio: "16/9" }}>
@@ -29,6 +32,7 @@ export const VideoThumbnailCard = ({
           <img
             src={poster}
             alt={title}
+            loading="lazy"
             className="size-full object-cover transition-transform duration-300 group-hover:scale-105"
           />
         ) : (

package/src/video/video-transcript.tsx

@@ -1,4 +1,4 @@
-import { useRef, useEffect } from "react";
+import { useRef, useEffect, useMemo } from "react";
 import { Clock } from "lucide-react";
 import type { VideoTranscriptProps } from "./types";
 import { cn } from "../lib/utils";
@@ -17,9 +17,9 @@ export const VideoTranscript = ({
   const activeRef = useRef<HTMLDivElement>(null);
 
   // Last entry whose time <= currentTime
-  const activeIndex = entries.reduce<number>(
-    (acc, entry, i) => (entry.time <= currentTime ? i : acc),
-    -1,
+  const activeIndex = useMemo(
+    () => entries.reduce<number>((acc, entry, i) => (entry.time <= currentTime ? i : acc), -1),
+    [entries, currentTime],
   );
 
   useEffect(() => {
@@ -61,7 +61,7 @@ export const VideoTranscript = ({
         const isActive = i === activeIndex;
         return (
           <div
-            key={i}
+            key={`${entry.time}-${entry.text.slice(0, 20)}`}
             ref={isActive ? activeRef : undefined}
             className={cn(
               "flex gap-3 px-3 py-2 text-sm transition-colors",
@@ -69,6 +69,9 @@ export const VideoTranscript = ({
               !readOnly && onSeek && "cursor-pointer hover:bg-muted",
             )}
             onClick={() => !readOnly && onSeek?.(entry.time)}
+            role={!readOnly && onSeek ? "button" : undefined}
+            tabIndex={!readOnly && onSeek ? 0 : undefined}
+            onKeyDown={!readOnly && onSeek ? (e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); onSeek(entry.time); } } : undefined}
           >
             <span
               className={cn(