first commit

2026-07-23 16:55:44 +03:00
commit bd543c3bda
61 changed files with 17313 additions and 0 deletions
@@ -0,0 +1,78 @@
+'use client';
+
+import { useState } from 'react';
+import { Play, Clock, ExternalLink } from 'lucide-react';
+import { YoutubeIcon as Youtube } from '@/components/icons/YoutubeIcon';
+import { VideoChapter } from '@/lib/data';
+
+interface VideoPlayerProps {
+  youtubeId: string;
+  youtubeUrl: string;
+  title: string;
+  chapters?: VideoChapter[];
+}
+
+export function VideoPlayer({ youtubeId, youtubeUrl, title, chapters }: VideoPlayerProps) {
+  const [activeSeconds, setActiveSeconds] = useState(0);
+
+  const embedUrl = `https://www.youtube.com/embed/${youtubeId}?autoplay=0&start=${activeSeconds}`;
+
+  const handleChapterClick = (seconds: number) => {
+    setActiveSeconds(seconds);
+  };
+
+  return (
+    <div className="w-full space-y-4">
+      {/* Video Container */}
+      <div className="relative w-full aspect-video rounded-2xl overflow-hidden bg-slate-900 border border-slate-800 shadow-2xl group">
+        <iframe
+          src={embedUrl}
+          title={title}
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+          allowFullScreen
+          className="w-full h-full border-0"
+        />
+      </div>
+
+      {/* Chapters / Timestamps Quick Jumps */}
+      {chapters && chapters.length > 0 && (
+        <div className="bg-slate-900/80 p-4 rounded-xl border border-slate-800 space-y-3">
+          <div className="flex items-center justify-between">
+            <span className="text-xs font-bold text-slate-300 uppercase tracking-wider flex items-center gap-1.5">
+              <Clock className="w-3.5 h-3.5 text-red-400" />
+              Timestamped Chapters
+            </span>
+            <a
+              href={youtubeUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-xs text-red-400 hover:text-red-300 flex items-center gap-1 font-medium transition-colors"
+            >
+              <span>Watch on YouTube</span>
+              <ExternalLink className="w-3 h-3" />
+            </a>
+          </div>
+
+          <div className="flex flex-wrap gap-2">
+            {chapters.map((chap) => (
+              <button
+                key={chap.time}
+                onClick={() => handleChapterClick(chap.seconds)}
+                className={`flex items-center gap-2 px-3 py-1.5 rounded-lg text-xs font-medium transition-all ${
+                  activeSeconds === chap.seconds
+                    ? 'bg-red-600 text-white shadow-md shadow-red-600/30 ring-1 ring-red-400'
+                    : 'bg-slate-800/80 text-slate-300 hover:bg-slate-800 hover:text-white border border-slate-700/60'
+                }`}
+              >
+                <span className="font-mono text-[11px] text-red-400 font-bold bg-slate-950/60 px-1.5 py-0.5 rounded">
+                  {chap.time}
+                </span>
+                <span>{chap.title}</span>
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}