Spaces:

lolakd
/

lobstertube

Running

App Files Files Community

lolakd commited on Nov 9, 2025

Commit

a7aae55

verified ·

1 Parent(s): 3a48846

Создай полноценный frontend для проекта LobsterTube — полной копии YouTube, с современным дизайном, максимально приближённым к оригиналу YouTube (2025 года).

Browse files

**Требования к стеку:**
* React + TypeScript
* Tailwind CSS
* React Router DOM для
маршрутизации
* Redux Toolkit или Zustand для управления состоянием
* Axios для запросов к backend API
* Redux Toolkit или Zustand для управления состоянием
* Axios для запросов к backend API
* Поддержка тёмной и светлой темы
* UI-библиотека: shadcn/ui или
Material UI
**Главные страницы:**
1. / - главная страница с рекомендованными видео (сеткой превью, как на YouTube)
2. `/watch/:id — просмотр видео (видео-плеер, описание, комментарии, справа) рекомендации
3. '/channel/:id` - страница канала (баннер, аватар, видео, вкладки "Видео", "Плейлисты", "О канале")
4. /search` - страница поиска видео и каналов
5. `/upload` - страница загрузки видео (форма с названием, описанием, тегами, превью)
6. `/login` и `/register` - формы
авторизации и регистрации пользователей

**Компоненты:**
* Header (поиск, логотип VibeTube, иконки уведомлений и профиля)
* Sidebar (главная, подписки, тренды, история и т.д.)
* VideoCard (превью видео)
* Player (встроенный видеоплеер с контролами)
* ChannelCard, PlaylistCard
* Адаптивный дизайн для desktop, tablet, mobile
* Скелетоны для загрузки (skeleton UI)
* Drag-and-drop при загрузке видео
* Infinite scroll (ленивая подгрузка видео)
* Поддержка JWT (через localStorage)
* АРІ-запросы к backend по REST или GraphQL

**Цель:** создать максимально реалистичный frontend аналог YouTube с собственным брендингом
**LobsterTube**

Files changed (34) hide show

README.md +8 -5
index.html +14 -18
package.json +37 -0
postcss.config.js +6 -0
public/favicon.svg +9 -0
src/App.tsx +37 -0
src/components/Header.tsx +106 -0
src/components/Layout.tsx +25 -0
src/components/Sidebar.tsx +62 -0
src/components/VideoCard.tsx +34 -0
src/components/VideoGrid.tsx +34 -0
src/components/VideoPlayer.tsx +95 -0
src/components/ui/button.tsx +43 -0
src/components/ui/card.tsx +17 -0
src/components/ui/dropdown-menu.tsx +41 -0
src/components/ui/input.tsx +21 -0
src/components/ui/skeleton.tsx +8 -0
src/components/ui/textarea.tsx +21 -0
src/hooks/useInfiniteScroll.ts +27 -0
src/index.css +20 -0
src/lib/api.ts +17 -0
src/lib/types.ts +41 -0
src/lib/utils.ts +25 -0
src/main.tsx +22 -0
src/pages/Home.tsx +40 -0
src/pages/Watch.tsx +35 -0
src/providers/AuthProvider.tsx +19 -0
src/providers/ThemeProvider.tsx +48 -0
src/store/auth.ts +33 -0
src/store/ui.ts +16 -0
tailwind.config.js +24 -0
tsconfig.app.json +7 -0
tsconfig.json +23 -0
vite.config.ts +15 -0

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Lobstertube
-emoji: ⚡
-colorFrom: green
-colorTo: green
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: LobsterTube
+colorFrom: red
+colorTo: red
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

index.html CHANGED Viewed

@@ -1,19 +1,15 @@
 <!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

 <!doctype html>
+<html lang="ru" class="dark">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>LobsterTube</title>
+    <meta name="theme-color" content="#0f0f0f" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+  </head>
+  <body class="bg-white text-zinc-900 dark:bg-zinc-950 dark:text-zinc-100 antialiased">
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

package.json ADDED Viewed

	@@ -0,0 +1,37 @@

+json
+{
+  "name": "lobstertube",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-dropdown-menu": "^2.0.6",
+    "@radix-ui/react-switch": "^1.0.3",
+    "axios": "^1.7.2",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.446.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.26.1",
+    "zustand": "^4.5.2"
+  },
+  "devDependencies": {
+    "@types/node": "^20.14.9",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "autoprefixer": "^10.4.19",
+    "postcss": "^8.4.39",
+    "tailwindcss": "^3.4.10",
+    "typescript": "^5.5.4",
+    "vite": "^5.4.1"
+  }
+}
+</html>

postcss.config.js ADDED Viewed

	@@ -0,0 +1,6 @@

+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {}
+  }
+}

public/favicon.svg ADDED Viewed

src/App.tsx ADDED Viewed

	@@ -0,0 +1,37 @@

+tsx
+import { Route, Routes, Navigate, useLocation } from 'react-router-dom'
+import Layout from './components/Layout'
+import Home from './pages/Home'
+import Watch from './pages/Watch'
+import Channel from './pages/Channel'
+import Search from './pages/Search'
+import Upload from './pages/Upload'
+import Login from './pages/Login'
+import Register from './pages/Register'
+import { useAuthStore } from './store/auth'
+function Protected({ children }: { children: JSX.Element }) {
+  const token = useAuthStore(s => s.token)
+  const loc = useLocation()
+  if (!token) return <Navigate to="/login" state={{ from: loc }} replace />
+  return children
+}
+export default function App() {
+  return (
+    <Routes>
+      <Route element={<Layout />}>
+        <Route index element={<Home />} />
+        <Route path="/watch/:id" element={<Watch />} />
+        <Route path="/channel/:id" element={<Channel />} />
+        <Route path="/search" element={<Search />} />
+        <Route path="/upload" element={<Protected><Upload /></Protected>} />
+        <Route path="*" element={<Navigate to="/" replace />} />
+      </Route>
+      <Route path="/login" element={<Login />} />
+      <Route path="/register" element={<Register />} />
+    </Routes>
+  )
+}
+</html>

src/components/Header.tsx ADDED Viewed

	@@ -0,0 +1,106 @@

+tsx
+import { Link, useNavigate, useSearchParams } from 'react-router-dom'
+import { Menu, Search, Video, Bell, User, LogOut, Settings, Moon, Sun, Monitor } from 'lucide-react'
+import { Button } from './ui/button'
+import { Input } from './ui/input'
+import { useUIStore } from '@/store/ui'
+import { useAuthStore } from '@/store/auth'
+import { useTheme } from '@/providers/ThemeProvider'
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from './ui/dropdown-menu'
+import { useMemo } from 'react'
+export default function Header() {
+  const navigate = useNavigate()
+  const [params, setParams] = useSearchParams()
+  const q = useMemo(() => params.get('q') || '', [params])
+  const { toggleSidebar } = useUIStore()
+  const { user, logout } = useAuthStore()
+  const { theme, setTheme } = useTheme()
+  function onSearch(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault()
+    const form = e.currentTarget
+    const data = new FormData(form)
+    const query = data.get('q') as string
+    navigate(`/search?q=${encodeURIComponent(query)}`)
+  }
+  return (
+    <header className="sticky top-0 z-50 border-b border-zinc-200/80 bg-white/80 backdrop-blur dark:border-zinc-800/80 dark:bg-zinc-950/80">
+      <div className="mx-auto flex h-14 max-w-[1920px] items-center gap-2 px-3 sm:px-5">
+        <div className="flex items-center gap-2">
+          <Button variant="ghost" size="icon" onClick={toggleSidebar} aria-label="Toggle menu">
+            <Menu className="h-5 w-5" />
+          </Button>
+          <Link to="/" className="flex items-center gap-2">
+            <div className="h-7 w-7 rounded-md bg-red-600 text-white flex items-center justify-center font-black">LT</div>
+            <span className="text-lg font-semibold tracking-tight">LobsterTube</span>
+          </Link>
+        </div>
+        <form onSubmit={onSearch} className="flex-1 flex justify-center px-2">
+          <div className="flex w-full max-w-2xl items-stretch">
+            <Input name="q" defaultValue={q} placeholder="Поиск" className="rounded-r-none border-r-0" />
+            <Button type="submit" className="rounded-l-none border border-l-0 border-zinc-200 dark:border-zinc-800">
+              <Search className="h-5 w-5" />
+            </Button>
+          </div>
+        </form>
+        <div className="flex items-center gap-1">
+          <Button variant="ghost" size="icon" onClick={() => navigate('/upload')} title="Создать">
+            <Video className="h-5 w-5" />
+          </Button>
+          <Button variant="ghost" size="icon">
+            <Bell className="h-5 w-5" />
+          </Button>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="ghost" size="icon" className="overflow-hidden">
+                {user ? (
+                  <img src={user.avatarUrl || `https://api.dicebear.com/9.x/identicon/svg?seed=${user.id}`} className="h-7 w-7 rounded-full" alt="avatar" />
+                ) : (
+                  <User className="h-5 w-5" />
+                )}
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" className="w-56">
+              {user ? (
+                <>
+                  <div className="px-2 py-2 text-sm text-zinc-500 dark:text-zinc-400">Вошли как {user.name}</div>
+                  <DropdownMenuItem onClick={() => navigate(`/channel/${user.id}`)}>
+                    <User className="mr-2 h-4 w-4" /> Мой канал
+                  </DropdownMenuItem>
+                  <DropdownMenuItem onClick={() => setTheme('system')}>
+                    <Monitor className="mr-2 h-4 w-4" /> Системная
+                  </DropdownMenuItem>
+                  <DropdownMenuItem onClick={() => setTheme('light')}>
+                    <Sun className="mr-2 h-4 w-4" /> Светлая
+                  </DropdownMenuItem>
+                  <DropdownMenuItem onClick={() => setTheme('dark')}>
+                    <Moon className="mr-2 h-4 w-4" /> Тёмная
+                  </DropdownMenuItem>
+                  <DropdownMenuItem>
+                    <Settings className="mr-2 h-4 w-4" /> Настройки
+                  </DropdownMenuItem>
+                  <DropdownMenuItem onClick={() => logout()}>
+                    <LogOut className="mr-2 h-4 w-4" /> Выйти
+                  </DropdownMenuItem>
+                </>
+              ) : (
+                <>
+                  <DropdownMenuItem onClick={() => navigate('/login')}>
+                    <User className="mr-2 h-4 w-4" /> Войти
+                  </DropdownMenuItem>
+                  <DropdownMenuItem onClick={() => setTheme('dark')}>
+                    <Moon className="mr-2 h-4 w-4" /> Тёмная
+                  </DropdownMenuItem>
+                </>
+              )}
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      </div>
+    </header>
+  )
+}
+</html>

src/components/Layout.tsx ADDED Viewed

	@@ -0,0 +1,25 @@

+tsx
+import { Outlet } from 'react-router-dom'
+import Header from './Header'
+import Sidebar from './Sidebar'
+import { useUIStore } from '@/store/ui'
+import { cn } from '@/lib/utils'
+export default function Layout() {
+  const { sidebarOpen } = useUIStore()
+  return (
+    <div className="flex h-screen w-full flex-col">
+      <Header />
+      <div className="flex min-h-0 flex-1">
+        <Sidebar />
+        <main className={cn('flex-1 overflow-auto p-4 sm:p-6', sidebarOpen ? 'md:ml-64' : 'md:ml-20')}>
+          <div className="mx-auto max-w-[1600px]">
+            <Outlet />
+          </div>
+        </main>
+      </div>
+    </div>
+  )
+}
+</html>

src/components/Sidebar.tsx ADDED Viewed

	@@ -0,0 +1,62 @@

+tsx
+import { NavLink, useNavigate } from 'react-router-dom'
+import { Home, Compass, History, PlaySquare, Clock, ThumbsUp, PlusCircle, Settings, HelpCircle } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import { useUIStore } from '@/store/ui'
+import { useAuthStore } from '@/store/auth'
+const item = 'flex items-center gap-6 rounded-md px-3 py-2 text-sm hover:bg-zinc-100 dark:hover:bg-zinc-800'
+const icon = 'h-5 w-5'
+export default function Sidebar() {
+  const { sidebarOpen } = useUIStore()
+  const { user } = useAuthStore()
+  const navigate = useNavigate()
+  return (
+    <aside className={cn('hidden border-r border-zinc-200 dark:border-zinc-800 md:block', sidebarOpen ? 'w-64' : 'w-20')}>
+      <div className="flex h-[calc(100vh-56px)] flex-col gap-2 overflow-y-auto p-2 scrollbar-thin">
+        <NavLink to="/" className={({ isActive }) => cn(item, isActive && 'bg-zinc-100 dark:bg-zinc-800')}>
+          <Home className={icon} /> <span>Главная</span>
+        </NavLink>
+        <NavLink to="/trending" className={({ isActive }) => cn(item, isActive && 'bg-zinc-100 dark:bg-zinc-800')}>
+          <Compass className={icon} /> <span>Тренды</span>
+        </NavLink>
+        {user ? (
+          <>
+            <NavLink to="/history" className={({ isActive }) => cn(item, isActive && 'bg-zinc-100 dark:bg-zinc-800')}>
+              <History className={icon} /> <span>История</span>
+            </NavLink>
+            <NavLink to="/playlists" className={({ isActive }) => cn(item, isActive && 'bg-zinc-100 dark:bg-zinc-800')}>
+              <PlaySquare className={icon} /> <span>Плейлисты</span>
+            </NavLink>
+            <NavLink to="/liked" className={({ isActive }) => cn(item, isActive && 'bg-zinc-100 dark:bg-zinc-800')}>
+              <ThumbsUp className={icon} /> <span>Понравившиеся</span>
+            </NavLink>
+            <NavLink to="/watch-later" className={({ isActive }) => cn(item, isActive && 'bg-zinc-100 dark:bg-zinc-800')}>
+              <Clock className={icon} /> <span>Смотреть позже</span>
+            </NavLink>
+          </>
+        ) : null}
+        <div className="my-2 border-t border-zinc-200 dark:border-zinc-800" />
+        {user ? (
+          <button onClick={() => navigate('/upload')} className={cn(item, 'text-left')}>
+            <PlusCircle className={icon} /> <span>Создать</span>
+          </button>
+        ) : (
+          <button onClick={() => navigate('/login')} className={cn(item, 'text-left')}>
+            <PlusCircle className={icon} /> <span>Войти</span>
+          </button>
+        )}
+        <div className="mt-auto" />
+        <NavLink to="/settings" className={({ isActive }) => cn(item, isActive && 'bg-zinc-100 dark:bg-zinc-800')}>
+          <Settings className={icon} /> <span>Настройки</span>
+        </NavLink>
+        <NavLink to="/help" className={({ isActive }) => cn(item, isActive && 'bg-zinc-100 dark:bg-zinc-800')}>
+          <HelpCircle className={icon} /> <span>Справка</span>
+        </NavLink>
+      </div>
+    </aside>
+  )
+}
+</html>

src/components/VideoCard.tsx ADDED Viewed

	@@ -0,0 +1,34 @@

+tsx
+import { Link } from 'react-router-dom'
+import { Video } from '@/lib/types'
+import { formatViews, timeAgo } from '@/lib/utils'
+import { Verified } from 'lucide-react'
+import { cn } from '@/lib/utils'
+export default function VideoCard({ video, className }: { video: Video; className?: string }) {
+  return (
+    <div className={cn('group flex w-full flex-col gap-2', className)}>
+      <Link to={`/watch/${video.id}`} className="relative aspect-video overflow-hidden rounded-xl">
+        <img src={video.thumbnailUrl} alt={video.title} className="h-full w-full object-cover transition-transform group-hover:scale-[1.02]" />
+        <span className="absolute bottom-1 right-1 rounded bg-black/80 px-1 py-0.5 text-xs text-white">{video.duration}</span>
+      </Link>
+      <div className="flex gap-3">
+        <Link to={`/channel/${video.channel.id}`} className="shrink-0">
+          <img src={video.channel.avatarUrl || `https://api.dicebear.com/9.x/identicon/svg?seed=${video.channel.id}`} className="h-9 w-9 rounded-full" alt="avatar" />
+        </Link>
+        <div className="min-w-0">
+          <Link to={`/watch/${video.id}`} className="line-clamp-2 font-medium group-hover:underline">{video.title}</Link>
+          <div className="mt-1 flex items-center gap-1 text-sm text-zinc-500">
+            <Link to={`/channel/${video.channel.id}`} className="hover:underline">{video.channel.name}</Link>
+            {video.channel.verified ? <Verified className="h-4 w-4 text-zinc-500" /> : null}
+          </div>
+          <div className="text-sm text-zinc-500">
+            {formatViews(video.views)} просмотров • {timeAgo(video.publishedAt)}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+</html>

src/components/VideoGrid.tsx ADDED Viewed

	@@ -0,0 +1,34 @@

+tsx
+import { Video } from '@/lib/types'
+import VideoCard from './VideoCard'
+import { Skeleton } from './ui/skeleton'
+import { cn } from '@/lib/utils'
+export default function VideoGrid({ videos, className }: { videos: Video[]; className?: string }) {
+  return (
+    <div className={cn('grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5', className)}>
+      {videos.map(v => <VideoCard key={v.id} video={v} />)}
+    </div>
+  )
+}
+export function VideoGridSkeleton() {
+  return (
+    <div className="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5">
+      {Array.from({ length: 15 }).map((_, i) => (
+        <div key={i} className="flex flex-col gap-2">
+          <Skeleton className="aspect-video w-full rounded-xl" />
+          <div className="flex gap-3">
+            <Skeleton className="h-9 w-9 rounded-full" />
+            <div className="flex-1 space-y-2">
+              <Skeleton className="h-4 w-full" />
+              <Skeleton className="h-3 w-2/3" />
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}
+</html>

src/components/VideoPlayer.tsx ADDED Viewed

	@@ -0,0 +1,95 @@

+tsx
+import { useEffect, useRef, useState } from 'react'
+import { Play, Pause, Volume2, VolumeX, Maximize, Settings } from 'lucide-react'
+import { Button } from './ui/button'
+type Props = {
+  src: string
+  poster?: string
+  title?: string
+}
+export default function VideoPlayer({ src, poster, title }: Props) {
+  const videoRef = useRef<HTMLVideoElement>(null)
+  const [playing, setPlaying] = useState(false)
+  const [muted, setMuted] = useState(false)
+  const [progress, setProgress] = useState(0)
+  useEffect(() => {
+    const v = videoRef.current
+    if (!v) return
+    const onTime = () => setProgress((v.currentTime / v.duration) * 100 || 0)
+    v.addEventListener('timeupdate', onTime)
+    return () => v.removeEventListener('timeupdate', onTime)
+  }, [])
+  function togglePlay() {
+    const v = videoRef.current
+    if (!v) return
+    if (v.paused) {
+      v.play()
+      setPlaying(true)
+    } else {
+      v.pause()
+      setPlaying(false)
+    }
+  }
+  function toggleMute() {
+    const v = videoRef.current
+    if (!v) return
+    v.muted = !v.muted
+    setMuted(v.muted)
+  }
+  function seek(e: React.ChangeEvent<HTMLInputElement>) {
+    const v = videoRef.current
+    if (!v) return
+    const pct = Number(e.target.value)
+    v.currentTime = (pct / 100) * v.duration
+    setProgress(pct)
+  }
+  function fullscreen() {
+    const v = videoRef.current
+    if (!v) return
+    if (document.fullscreenElement) document.exitFullscreen()
+    else v.requestFullscreen()
+  }
+  return (
+    <div className="relative w-full overflow-hidden rounded-xl bg-black">
+      <video ref={videoRef} className="h-auto w-full" src={src} poster={poster} controls={false} playsInline onClick={togglePlay} />
+      <div className="absolute inset-0 flex flex-col justify-end">
+        <div className="bg-gradient-to-t from-black/60 to-transparent p-3">
+          <input
+            type="range"
+            min={0}
+            max={100}
+            value={progress}
+            onChange={seek}
+            className="mb-2 h-1 w-full appearance-none rounded-full bg-white/40 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:h-3 [&::-webkit-slider-thumb]:w-3 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white"
+          />
+          <div className="flex items-center gap-2">
+            <Button size="icon" variant="ghost" onClick={togglePlay} className="text-white">
+              {playing ? <Pause className="h-5 w-5" /> : <Play className="h-5 w-5" />}
+            </Button>
+            <Button size="icon" variant="ghost" onClick={toggleMute} className="text-white">
+              {muted ? <VolumeX className="h-5 w-5" /> : <Volume2 className="h-5 w-5" />}
+            </Button>
+            <div className="ml-auto flex items-center gap-1">
+              <Button size="icon" variant="ghost" className="text-white">
+                <Settings className="h-5 w-5" />
+              </Button>
+              <Button size="icon" variant="ghost" onClick={fullscreen} className="text-white">
+                <Maximize className="h-5 w-5" />
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+</html>

src/components/ui/button.tsx ADDED Viewed

	@@ -0,0 +1,43 @@

+tsx
+import React from 'react'
+import { cn } from '@/lib/utils'
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: 'default' | 'ghost' | 'outline' | 'link' | 'destructive'
+  size?: 'sm' | 'md' | 'lg' | 'icon'
+}
+const variants = {
+  default: 'bg-brand-600 hover:bg-brand-500 text-white',
+  ghost: 'bg-transparent hover:bg-zinc-100/50 dark:hover:bg-zinc-800',
+  outline: 'border border-zinc-200 dark:border-zinc-800 hover:bg-zinc-100/50 dark:hover:bg-zinc-800',
+  link: 'text-brand-500 underline-offset-4 hover:underline',
+  destructive: 'bg-red-600 hover:bg-red-500 text-white'
+}
+const sizes = {
+  sm: 'h-8 px-3 text-sm',
+  md: 'h-10 px-4',
+  lg: 'h-12 px-6 text-lg',
+  icon: 'h-10 w-10'
+}
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant = 'default', size = 'md', ...props }, ref) => {
+    return (
+      <button
+        ref={ref}
+        className={cn(
+          'inline-flex items-center justify-center rounded-md transition-colors disabled:opacity-50 disabled:pointer-events-none',
+          variants[variant],
+          sizes[size],
+          className
+        )}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = 'Button'
+</html>

src/components/ui/card.tsx ADDED Viewed

	@@ -0,0 +1,17 @@

+tsx
+import React from 'react'
+import { cn } from '@/lib/utils'
+export function Card({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn('rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900', className)} {...props} />
+}
+export function CardHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn('p-4', className)} {...props} />
+}
+export function CardContent({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn('p-4 pt-0', className)} {...props} />
+}
+</html>

src/components/ui/dropdown-menu.tsx ADDED Viewed

	@@ -0,0 +1,41 @@

+tsx
+import * as React from 'react'
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
+import { cn } from '@/lib/utils'
+export const DropdownMenu = DropdownMenuPrimitive.Root
+export const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+export const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 8, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        'z-50 min-w-[12rem] overflow-hidden rounded-md border border-zinc-200 bg-white p-1 text-zinc-950 shadow-md dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-50',
+        className
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+))
+DropdownMenuContent.displayName = 'DropdownMenuContent'
+export const DropdownMenuItem = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      'relative flex cursor-default select-none items-center rounded-sm px-2 py-2 text-sm outline-none hover:bg-zinc-100 dark:hover:bg-zinc-800',
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuItem.displayName = 'DropdownMenuItem'
+</html>

src/components/ui/input.tsx ADDED Viewed

	@@ -0,0 +1,21 @@

+tsx
+import React from 'react'
+import { cn } from '@/lib/utils'
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
+export const Input = React.forwardRef<HTMLInputElement, InputProps>(({ className, ...props }, ref) => {
+  return (
+    <input
+      ref={ref}
+      className={cn(
+        'flex h-10 w-full rounded-md border border-zinc-200 bg-white px-3 py-2 text-sm ring-offset-white file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-zinc-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-zinc-800 dark:bg-zinc-900 dark:ring-offset-zinc-950 dark:placeholder:text-zinc-600',
+        className
+      )}
+      {...props}
+    />
+  )
+})
+Input.displayName = 'Input'
+</html>

src/components/ui/skeleton.tsx ADDED Viewed

	@@ -0,0 +1,8 @@

+tsx
+import { cn } from '@/lib/utils'
+export function Skeleton({ className }: { className?: string }) {
+  return <div className={cn('animate-pulse rounded-md bg-zinc-200 dark:bg-zinc-800', className)} />
+}
+</html>

src/components/ui/textarea.tsx ADDED Viewed

	@@ -0,0 +1,21 @@

+tsx
+import React from 'react'
+import { cn } from '@/lib/utils'
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(({ className, ...props }, ref) => {
+  return (
+    <textarea
+      ref={ref}
+      className={cn(
+        'flex w-full rounded-md border border-zinc-200 bg-white px-3 py-2 text-sm ring-offset-white placeholder:text-zinc-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-zinc-800 dark:bg-zinc-900 dark:ring-offset-zinc-950 dark:placeholder:text-zinc-600',
+        className
+      )}
+      {...props}
+    />
+  )
+})
+Textarea.displayName = 'Textarea'
+</html>

src/hooks/useInfiniteScroll.ts ADDED Viewed

	@@ -0,0 +1,27 @@

+ts
+import { useEffect, useRef, useState } from 'react'
+export function useInfiniteScroll(callback: () => void, options?: IntersectionObserverInit) {
+  const [isFetching, setIsFetching] = useState(false)
+  const sentinelRef = useRef<HTMLDivElement | null>(null)
+  useEffect(() => {
+    if (!sentinelRef.current) return
+    const observer = new IntersectionObserver(
+      entries => {
+        if (entries[0].isIntersecting) setIsFetching(true)
+      },
+      options
+    )
+    observer.observe(sentinelRef.current)
+    return () => observer.disconnect()
+  }, [options])
+  useEffect(() => {
+    if (!isFetching) return
+    callback()
+  }, [isFetching, callback])
+  return { sentinelRef, isFetching, setIsFetching }
+}
+</html>

src/index.css ADDED Viewed

	@@ -0,0 +1,20 @@

+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+:root {
+  color-scheme: light dark;
+}
+* {
+  -webkit-tap-highlight-color: transparent;
+}
+.scrollbar-thin::-webkit-scrollbar {
+  height: 8px;
+  width: 8px;
+}
+.scrollbar-thin::-webkit-scrollbar-thumb {
+  background: rgba(100,100,100,0.4);
+  border-radius: 8px;
+}

src/lib/api.ts ADDED Viewed

	@@ -0,0 +1,17 @@

+ts
+import axios from 'axios'
+const api = axios.create({
+  baseURL: import.meta.env.VITE_API_URL || 'http://localhost:4000',
+  withCredentials: false
+})
+api.interceptors.request.use(config => {
+  const token = localStorage.getItem('lt-token')
+  if (token) config.headers.Authorization = `Bearer ${token}`
+  return config
+})
+export default api
+</html>

src/lib/types.ts ADDED Viewed

	@@ -0,0 +1,41 @@

+ts
+export type Video = {
+  id: string
+  title: string
+  thumbnailUrl: string
+  channel: {
+    id: string
+    name: string
+    avatarUrl?: string
+    verified?: boolean
+  }
+  views: number
+  publishedAt: string
+  duration: string
+  description?: string
+}
+export type Channel = {
+  id: string
+  name: string
+  avatarUrl?: string
+  bannerUrl?: string
+  verified?: boolean
+  subscribers: number
+  description?: string
+}
+export type Comment = {
+  id: string
+  author: {
+    id: string
+    name: string
+    avatarUrl?: string
+  }
+  text: string
+  likes: number
+  publishedAt: string
+  replies?: Comment[]
+}
+</html>

src/lib/utils.ts ADDED Viewed

	@@ -0,0 +1,25 @@

+ts
+import { type ClassValue, clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
+export function formatViews(views: number) {
+  if (views >= 1_000_000) return `${(views / 1_000_000).toFixed(1)}M`
+  if (views >= 1_000) return `${(views / 1_000).toFixed(1)}K`
+  return `${views}`
+}
+export function timeAgo(date: string) {
+  const d = new Date(date)
+  const diff = (Date.now() - d.getTime()) / 1000
+  if (diff < 60) return 'только что'
+  if (diff < 3600) return `${Math.floor(diff / 60)} мин. назад`
+  if (diff < 86400) return `${Math.floor(diff / 3600)} ч. назад`
+  if (diff < 2629800) return `${Math.floor(diff / 86400)} дн. назад`
+  return d.toLocaleDateString()
+}
+</html>

src/main.tsx ADDED Viewed

	@@ -0,0 +1,22 @@

+tsx
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import { BrowserRouter } from 'react-router-dom'
+import App from './App'
+import './index.css'
+import { ThemeProvider } from './providers/ThemeProvider'
+import { AuthProvider } from './providers/AuthProvider'
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <BrowserRouter>
+      <ThemeProvider defaultTheme="dark" storageKey="lobstertube-theme">
+        <AuthProvider>
+          <App />
+        </AuthProvider>
+      </ThemeProvider>
+    </BrowserRouter>
+  </React.StrictMode>
+)
+</html>

src/pages/Home.tsx ADDED Viewed

	@@ -0,0 +1,40 @@

+tsx
+import { useEffect, useState } from 'react'
+import api from '@/lib/api'
+import { Video } from '@/lib/types'
+import VideoGrid, { VideoGridSkeleton } from '@/components/VideoGrid'
+import { useInfiniteScroll } from '@/hooks/useInfiniteScroll'
+export default function Home() {
+  const [videos, setVideos] = useState<Video[]>([])
+  const [page, setPage] = useState(1)
+  const [loading, setLoading] = useState(false)
+  const [hasMore, setHasMore] = useState(true)
+  async function load() {
+    if (loading || !hasMore) return
+    setLoading(true)
+    const res = await api.get('/videos', { params: { page, perPage: 24 } })
+    const data = res.data as Video[]
+    setVideos(prev => [...prev, ...data])
+    setPage(p => p + 1)
+    setHasMore(data.length > 0)
+    setLoading(false)
+  }
+  useEffect(() => {
+    load()
+  }, [])
+  const { sentinelRef } = useInfiniteScroll(() => load())
+  return (
+    <div className="space-y-6">
+      <VideoGrid videos={videos} />
+      {loading && <VideoGridSkeleton />}
+      {hasMore && <div ref={sentinelRef} className="h-10 w-full" />}
+    </div>
+  )
+}
+</html>

src/pages/Watch.tsx ADDED Viewed

	@@ -0,0 +1,35 @@

+tsx
+import { useEffect, useState } from 'react'
+import { useParams } from 'react-router-dom'
+import api from '@/lib/api'
+import { Comment, Video } from '@/lib/types'
+import VideoPlayer from '@/components/VideoPlayer'
+import { formatViews, timeAgo } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+import { ThumbsUp, ThumbsDown, Share, Download, Flag, MoreHorizontal } from 'lucide-react'
+import VideoGrid from '@/components/VideoGrid'
+import { Skeleton } from '@/components/ui/skeleton'
+export default function Watch() {
+  const { id } = useParams()
+  const [video, setVideo] = useState<Video | null>(null)
+  const [comments, setComments] = useState<Comment[]>([])
+  const [recs, setRecs] = useState<Video[]>([])
+  const [loading, setLoading] = useState(true)
+  useEffect(() => {
+    async function load() {
+      setLoading(true)
+      const [v, c, r] = await Promise.all([
+        api.get(`/videos/${id}`),
+        api.get(`/videos/${id}/comments`),
+        api.get('/videos', { params: { relatedTo: id, perPage: 20 } })
+      ])
+      setVideo(v.data)
+      setComments(c.data)
+      setRecs(r.data)
+      setLoading(false)
+    }
+    if (id) load()
+  }, [
+</html>

src/providers/AuthProvider.tsx ADDED Viewed

	@@ -0,0 +1,19 @@

+tsx
+import React from 'react'
+import { useAuthStore } from '@/store/auth'
+export function AuthProvider({ children }: { children: React.ReactNode }) {
+  // Initialize from localStorage
+  const token = useAuthStore(s => s.token)
+  const setAuth = useAuthStore(s => s.setAuth)
+  React.useEffect(() => {
+    const t = localStorage.getItem('lt-token')
+    const u = localStorage.getItem('lt-user')
+    if (t && u) {
+      setAuth({ token: t, user: JSON.parse(u) })
+    }
+  }, [setAuth])
+  return <>{children}</>
+}
+</html>

src/providers/ThemeProvider.tsx ADDED Viewed

	@@ -0,0 +1,48 @@

+tsx
+import React, { createContext, useContext, useEffect, useState } from 'react'
+type Theme = 'dark' | 'light' | 'system'
+type ThemeProviderProps = {
+  children: React.ReactNode
+  defaultTheme?: Theme
+  storageKey?: string
+}
+type ThemeProviderState = {
+  theme: Theme
+  setTheme: (theme: Theme) => void
+}
+const initialState: ThemeProviderState = {
+  theme: 'system',
+  setTheme: () => null
+}
+const ThemeProviderContext = createContext<ThemeProviderState>(initialState)
+export function ThemeProvider({ children, defaultTheme = 'system', storageKey = 'vite-ui-theme' }: ThemeProviderProps) {
+  const [theme, setTheme] = useState<Theme>(defaultTheme)
+  useEffect(() => {
+    const root = window.document.documentElement
+    root.classList.remove('light', 'dark')
+    if (theme === 'system') {
+      const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+      root.classList.add(systemTheme)
+      return
+    }
+    root.classList.add(theme)
+  }, [theme])
+  const value = { theme, setTheme: (t: Theme) => localStorage.setItem(storageKey, t) || setTheme(t) }
+  return <ThemeProviderContext.Provider value={value}>{children}</ThemeProviderContext.Provider>
+}
+export const useTheme = () => {
+  const context = useContext(ThemeProviderContext)
+  if (!context) throw new Error('useTheme must be used within ThemeProvider')
+  return context
+}
+</html>

src/store/auth.ts ADDED Viewed

	@@ -0,0 +1,33 @@

+ts
+import { create } from 'zustand'
+type User = {
+  id: string
+  name: string
+  avatarUrl?: string
+  subscribers: number
+}
+type AuthState = {
+  token: string | null
+  user: User | null
+  setAuth: (data: { token: string; user: User }) => void
+  logout: () => void
+}
+export const useAuthStore = create<AuthState>(set => ({
+  token: null,
+  user: null,
+  setAuth: ({ token, user }) => {
+    localStorage.setItem('lt-token', token)
+    localStorage.setItem('lt-user', JSON.stringify(user))
+    set({ token, user })
+  },
+  logout: () => {
+    localStorage.removeItem('lt-token')
+    localStorage.removeItem('lt-user')
+    set({ token: null, user: null })
+  }
+}))
+</html>

src/store/ui.ts ADDED Viewed

	@@ -0,0 +1,16 @@

+ts
+import { create } from 'zustand'
+type UIState = {
+  sidebarOpen: boolean
+  toggleSidebar: () => void
+  setSidebarOpen: (open: boolean) => void
+}
+export const useUIStore = create<UIState>(set => ({
+  sidebarOpen: true,
+  toggleSidebar: () => set(s => ({ sidebarOpen: !s.sidebarOpen })),
+  setSidebarOpen: (open) => set({ sidebarOpen: open })
+}))
+</html>

tailwind.config.js ADDED Viewed

	@@ -0,0 +1,24 @@

+/** @type {import('tailwindcss').Config} */
+export default {
+  darkMode: 'class',
+  content: ['./index.html', './src/**/*.{ts,tsx}'],
+  theme: {
+    extend: {
+      colors: {
+        brand: {
+          50: '#f4f7ff',
+          100: '#e6edff',
+          200: '#c8d7ff',
+          300: '#a5bbff',
+          400: '#7f9cff',
+          500: '#627cff',
+          600: '#465fde',
+          700: '#3348a8',
+          800: '#273f8a',
+          900: '#1f346f'
+        }
+      }
+    }
+  },
+  plugins: []
+}

tsconfig.app.json ADDED Viewed

	@@ -0,0 +1,7 @@

+json
+{
+  "extends": "./tsconfig.json",
+  "include": ["src"]
+}
+</html>

tsconfig.json ADDED Viewed

	@@ -0,0 +1,23 @@

+json
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "Bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src", "vite.config.ts"]
+}
+</html>

vite.config.ts ADDED Viewed

	@@ -0,0 +1,15 @@

+ts
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+export default defineConfig({
+  plugins: [react()],
+  server: { port: 5173 },
+  resolve: {
+    alias: {
+      '@': '/src'
+    }
+  }
+})
+</html>

Создай полноценный frontend для проекта **LobsterTube** — полной копии YouTube, с современным дизайном, максимально приближённым к оригиналу YouTube (2025 года).

Создай полноценный frontend для проекта LobsterTube — полной копии YouTube, с современным дизайном, максимально приближённым к оригиналу YouTube (2025 года).