video-player

1"use client";
2 
3import {
4  ChevronLeft,
5  ChevronRight,
6  ChevronsLeft,
7  ChevronsRight,
8  Loader2,
9  Maximize,
10  Maximize2,
11  MessageCircle,
12  Minimize,
13  MoreVertical,
14  Pause,
15  PictureInPicture2,
16  Play,
17  Repeat,
18  RotateCcw,
19  RotateCw,
20  Settings,
21  Volume2,
22  VolumeX,
23} from "lucide-react";
24import { AnimatePresence, motion } from "motion/react";
25import type React from "react";
26import {
27  forwardRef,
28  useEffect,
29  useImperativeHandle,
30  useRef,
31  useState,
32} from "react";
33 
34interface QualitySource {
35  quality: string;
36  src: string;
37}
38 
39interface CaptionTrack {
40  src: string;
41  label: string;
42  srcLang: string;
43  default?: boolean;
44}
45 
46interface Chapter {
47  title: string;
48  startTime: number;
49  endTime: number;
50}
51 
52export interface VideoPlayerProps {
53  src: string | QualitySource[];
54  tracks?: CaptionTrack[];
55  poster?: string;
56  title?: string;
57  description?: string;
58  compact?: boolean;
59  chapters?: Chapter[];
60  onTimeUpdate?: (time: number) => void;
61  onNextVideo?: () => void;
62  onPrevVideo?: () => void;
63  currentVideoIndex?: number;
64  totalVideos?: number;
65}
66 
67export interface VideoPlayerRef {
68  seek: (time: number) => void;
69  play: () => void;
70  pause: () => void;
71}
72 
73const Tooltip = ({
74  children,
75  label,
76}: {
77  children: React.ReactNode;
78  label: string;
79}) => {
80  const [isHovered, setIsHovered] = useState(false);
81 
82  return (
83    <div
84      className="relative inline-flex"
85      onMouseEnter={() => setIsHovered(true)}
86      onMouseLeave={() => setIsHovered(false)}
87      role="button"
88      tabIndex={0}
89    >
90      {children}
91      <motion.div
92        initial={{ opacity: 0 }}
93        animate={{ opacity: isHovered ? 1 : 0 }}
94        transition={{ duration: 0.2 }}
95        className="pointer-events-none absolute bottom-full left-1/2 z-50 mb-2 -translate-x-1/2 whitespace-nowrap rounded bg-black/90 px-2 py-1 text-white text-xs"
96      >
97        {label}
98      </motion.div>
99    </div>
100  );
101};
102 
103export const VideoPlayer = forwardRef<VideoPlayerRef, VideoPlayerProps>(
104  (
105    {
106      src,
107      tracks = [],
108      poster,
109      title: _title,
110      description: _description,
111      compact: _compact = false,
112      chapters = [],
113      onTimeUpdate,
114      onNextVideo,
115      onPrevVideo,
116      currentVideoIndex = 0,
117      totalVideos = 1,
118    },
119    ref,
120  ) => {
121    const videoRef = useRef<HTMLVideoElement>(null);
122    const containerRef = useRef<HTMLDivElement>(null);
123 
124    const [isPlaying, setIsPlaying] = useState(false);
125// … truncated