@hydralms/components 0.1.0 → 0.1.2

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

@@ -0,0 +1,93 @@
+import { Play } from "lucide-react";
+import type { VideoChapterListProps } from "./types";
+import { cn } from "../lib/utils";
+import { formatTimer, formatDuration } from "../utils/format-duration";
+
+export const VideoChapterList = ({
+  chapters,
+  currentTime = 0,
+  onSeek,
+  className,
+  style,
+}: VideoChapterListProps) => {
+  // Active chapter: last chapter whose time <= currentTime
+  const activeIndex = chapters.reduce<number>(
+    (acc, ch, i) => (ch.time <= currentTime ? i : acc),
+    -1,
+  );
+
+  return (
+    <div
+      className={cn(
+        "divide-y divide-border rounded-md border border-border",
+        className,
+      )}
+      style={style}
+    >
+      {chapters.map((chapter, i) => {
+        const isActive = i === activeIndex;
+        return (
+          <div
+            key={i}
+            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)}
+          >
+            {chapter.thumbnail ? (
+              <div
+                className="relative shrink-0 w-16 overflow-hidden rounded"
+                style={{ aspectRatio: "16/9" }}
+              >
+                <img
+                  src={chapter.thumbnail}
+                  alt={chapter.title}
+                  className="size-full object-cover"
+                />
+                {isActive && (
+                  <div className="absolute inset-0 flex items-center justify-center bg-black/40">
+                    <Play size={14} className="ml-px text-white" />
+                  </div>
+                )}
+              </div>
+            ) : (
+              <div
+                className={cn(
+                  "flex shrink-0 items-center justify-center size-8 rounded-full",
+                  isActive
+                    ? "bg-primary text-primary-foreground"
+                    : "bg-muted text-muted-foreground",
+                )}
+              >
+                <span className="text-xs font-semibold">{i + 1}</span>
+              </div>
+            )}
+
+            <div className="min-w-0 flex-1">
+              <div
+                className={cn(
+                  "truncate text-sm font-medium",
+                  isActive ? "text-primary" : "text-foreground",
+                )}
+              >
+                {chapter.title}
+              </div>
+              <div className="mt-0.5 flex items-center gap-2">
+                <span className="font-mono text-xs tabular-nums text-muted-foreground">
+                  {formatTimer(Math.floor(chapter.time))}
+                </span>
+                {chapter.duration != null && chapter.duration > 0 && (
+                  <span className="text-xs text-muted-foreground">
+                    {formatDuration(chapter.duration)}
+                  </span>
+                )}
+              </div>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+};

package/src/video/video-player.tsx

@@ -0,0 +1,103 @@
+import { useRef } from "react";
+import { Video, Play } from "lucide-react";
+import type { VideoPlayerProps } from "./types";
+import { cn } from "../lib/utils";
+
+export const VideoPlayer = ({
+  src,
+  poster,
+  title,
+  autoPlay = false,
+  onPlay,
+  onPause,
+  onEnded,
+  onTimeUpdate,
+  readOnly = false,
+  aspectRatio = "16/9",
+  className,
+  style,
+}: VideoPlayerProps) => {
+  const videoRef = useRef<HTMLVideoElement>(null);
+
+  const handleTimeUpdate = () => {
+    const video = videoRef.current;
+    if (video && onTimeUpdate) {
+      onTimeUpdate(video.currentTime, video.duration);
+    }
+  };
+
+  if (!src) {
+    return (
+      <div
+        className={cn("relative overflow-hidden rounded-lg border border-border bg-muted", className)}
+        style={{ aspectRatio, ...style }}
+      >
+        <div className="absolute inset-0 flex flex-col items-center justify-center gap-2">
+          <div className="flex items-center justify-center size-12 rounded-full bg-muted-foreground/10">
+            <Video size={24} />
+          </div>
+          <span className="text-sm text-muted-foreground">
+            No video source provided
+          </span>
+        </div>
+      </div>
+    );
+  }
+
+  if (readOnly) {
+    return (
+      <div
+        className={cn("relative overflow-hidden rounded-lg", className)}
+        style={{ aspectRatio, ...style }}
+      >
+        {poster ? (
+          <img
+            src={poster}
+            alt={title || "Video poster"}
+            style={{ width: "100%", height: "100%", objectFit: "cover" }}
+          />
+        ) : (
+          <div className="absolute inset-0 flex items-center justify-center bg-muted">
+            <div className="flex items-center justify-center size-14 rounded-full bg-black/60">
+              <Play size={28} className="text-white ml-0.5" />
+            </div>
+          </div>
+        )}
+
+        {poster && (
+          <div className="absolute inset-0 flex items-center justify-center bg-black/30 transition-opacity">
+            <div className="flex items-center justify-center size-14 rounded-full bg-black/60">
+              <Play size={28} className="text-white ml-0.5" />
+            </div>
+          </div>
+        )}
+
+        {title && (
+          <div className="absolute bottom-0 left-0 right-0 bg-linear-to-t from-black/60 to-transparent p-2">
+            <span className="text-sm text-white font-medium">{title}</span>
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div className={className} style={style}>
+      {title && <p className="mb-2 text-sm font-medium">{title}</p>}
+      <div className="rounded-lg overflow-hidden">
+        <video
+          ref={videoRef}
+          src={src}
+          poster={poster}
+          controls
+          autoPlay={autoPlay}
+          onPlay={onPlay}
+          onPause={onPause}
+          onEnded={onEnded}
+          onTimeUpdate={handleTimeUpdate}
+          style={{ width: "100%", aspectRatio, display: "block" }}
+        />
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,90 @@
+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 = ({
+  thumbnail,
+  title,
+  duration,
+  status = "unwatched",
+  isActive = false,
+  index,
+  onClick,
+  className,
+  style,
+}: VideoPlaylistItemProps) => {
+  return (
+    <div
+      className={cn(
+        "flex items-center gap-3 rounded-md px-3 py-2 transition-colors",
+        isActive && "bg-primary/10",
+        onClick && "cursor-pointer hover:bg-muted",
+        className,
+      )}
+      style={style}
+      onClick={onClick}
+    >
+      {/* Index / Status icon */}
+      <div className="flex shrink-0 items-center justify-center size-6">
+        {status === "completed" ? (
+          <span className="text-success">
+            <CheckCircle2 size={18} />
+          </span>
+        ) : isActive ? (
+          <span className="text-primary">
+            <Play size={16} className="ml-px" />
+          </span>
+        ) : index != null ? (
+          <span className="text-xs font-medium tabular-nums text-muted-foreground">
+            {index}
+          </span>
+        ) : (
+          <span className="text-muted-foreground">
+            <Circle size={16} />
+          </span>
+        )}
+      </div>
+
+      {/* Thumbnail */}
+      {thumbnail && (
+        <div
+          className="relative shrink-0 w-16 overflow-hidden rounded"
+          style={{ aspectRatio: "16/9" }}
+        >
+          <img
+            src={thumbnail}
+            alt={title}
+            className={cn(
+              "size-full object-cover",
+              status === "completed" && "opacity-60",
+            )}
+          />
+          {isActive && (
+            <div className="absolute inset-0 flex items-center justify-center bg-black/40">
+              <Play size={12} className="ml-px text-white" />
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Title + duration */}
+      <div className="min-w-0 flex-1">
+        <div
+          className={cn(
+            "truncate text-sm",
+            isActive ? "font-medium text-primary" : "text-foreground",
+            status === "completed" && !isActive && "text-muted-foreground",
+          )}
+        >
+          {title}
+        </div>
+        {duration != null && duration > 0 && (
+          <span className="text-xs text-muted-foreground">
+            {formatDuration(duration)}
+          </span>
+        )}
+      </div>
+    </div>
+  );
+};

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>
+  );
+};