@hydralms/components 0.1.1 → 0.1.2

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

@@ -0,0 +1,74 @@
+import { Play, Video } from "lucide-react";
+import type { VideoThumbnailCardProps } from "./types";
+import { cn } from "../lib/utils";
+import { formatDuration } from "../utils/format-duration";
+import { Progress } from "../ui/progress";
+
+export const VideoThumbnailCard = ({
+  poster,
+  title,
+  duration,
+  progress,
+  onClick,
+  className,
+  style,
+}: VideoThumbnailCardProps) => {
+  return (
+    <div
+      className={cn(
+        "group overflow-hidden rounded-lg border border-border transition-colors",
+        onClick && "cursor-pointer hover:border-primary/50 hover:shadow-sm",
+        className,
+      )}
+      style={style}
+      onClick={onClick}
+    >
+      {/* Poster area */}
+      <div className="relative overflow-hidden" style={{ aspectRatio: "16/9" }}>
+        {poster ? (
+          <img
+            src={poster}
+            alt={title}
+            className="size-full object-cover transition-transform duration-300 group-hover:scale-105"
+          />
+        ) : (
+          <div className="flex size-full items-center justify-center bg-muted">
+            <Video size={32} className="text-muted-foreground" />
+          </div>
+        )}
+
+        {/* Play icon overlay */}
+        <div className="absolute inset-0 flex items-center justify-center bg-black/0 transition-colors group-hover:bg-black/20">
+          <div className="flex size-10 items-center justify-center rounded-full bg-black/60 opacity-0 transition-opacity group-hover:opacity-100">
+            <Play size={20} className="ml-0.5 text-white" />
+          </div>
+        </div>
+
+        {/* Duration badge */}
+        {duration != null && duration > 0 && (
+          <span className="absolute bottom-2 right-2 rounded bg-black/75 px-1.5 py-0.5 text-xs font-medium tabular-nums text-white">
+            {formatDuration(duration)}
+          </span>
+        )}
+      </div>
+
+      {/* Title */}
+      <div className="p-3">
+        <h4 className="truncate text-sm font-medium text-foreground">
+          {title}
+        </h4>
+      </div>
+
+      {/* Optional progress bar */}
+      {progress != null && progress >= 0 && (
+        <div className="px-3 pb-3">
+          <Progress
+            value={progress}
+            size="sm"
+            variant={progress >= 100 ? "success" : "default"}
+          />
+        </div>
+      )}
+    </div>
+  );
+};

package/src/video/video-transcript.tsx

@@ -0,0 +1,102 @@
+import { useRef, useEffect } from "react";
+import { Clock } from "lucide-react";
+import type { VideoTranscriptProps } from "./types";
+import { cn } from "../lib/utils";
+import { formatTimer } from "../utils/format-duration";
+
+export const VideoTranscript = ({
+  entries,
+  currentTime = 0,
+  onSeek,
+  readOnly = false,
+  maxHeight = "400px",
+  className,
+  style,
+}: VideoTranscriptProps) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const activeRef = useRef<HTMLDivElement>(null);
+
+  // Last entry whose time <= currentTime
+  const activeIndex = entries.reduce<number>(
+    (acc, entry, i) => (entry.time <= currentTime ? i : acc),
+    -1,
+  );
+
+  useEffect(() => {
+    if (activeRef.current && containerRef.current) {
+      activeRef.current.scrollIntoView({
+        behavior: "smooth",
+        block: "nearest",
+      });
+    }
+  }, [activeIndex]);
+
+  if (entries.length === 0) {
+    return (
+      <div
+        className={cn(
+          "flex flex-col items-center justify-center gap-2 rounded-md border border-border bg-muted p-6",
+          className,
+        )}
+        style={style}
+      >
+        <Clock size={20} className="text-muted-foreground" />
+        <span className="text-sm text-muted-foreground">
+          No transcript available
+        </span>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      ref={containerRef}
+      className={cn(
+        "overflow-y-auto rounded-md border border-border",
+        className,
+      )}
+      style={{ maxHeight, ...style }}
+    >
+      {entries.map((entry, i) => {
+        const isActive = i === activeIndex;
+        return (
+          <div
+            key={i}
+            ref={isActive ? activeRef : undefined}
+            className={cn(
+              "flex gap-3 px-3 py-2 text-sm transition-colors",
+              isActive && "bg-primary/10",
+              !readOnly && onSeek && "cursor-pointer hover:bg-muted",
+            )}
+            onClick={() => !readOnly && onSeek?.(entry.time)}
+          >
+            <span
+              className={cn(
+                "shrink-0 font-mono text-xs tabular-nums pt-0.5",
+                isActive
+                  ? "text-primary font-medium"
+                  : "text-muted-foreground",
+              )}
+            >
+              {formatTimer(Math.floor(entry.time))}
+            </span>
+            <div className="min-w-0">
+              {entry.speaker && (
+                <span className="mr-1 font-semibold text-foreground">
+                  {entry.speaker}:
+                </span>
+              )}
+              <span
+                className={
+                  isActive ? "text-foreground" : "text-muted-foreground"
+                }
+              >
+                {entry.text}
+              </span>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+};