fix videoplayer

src/pages/VideoDetail.jsx

@@ -1,22 +1,21 @@
-import { useParams, Link } from 'react-router-dom'
+import { useEffect } from 'react'
+import { useParams, Link, useNavigate } from 'react-router-dom'
 import { useQueryClient } from '@tanstack/react-query'
 import { useVideo } from '../api/videos'
 import { assetUrl } from '../api/client'
 import { videoTitle, formatDate } from '../lib/format'
-import VideoPlayer from '../components/VideoPlayer' // <--- импорт плеера
-import { useEffect } from 'react'
-import { useNavigate } from 'react-router-dom'
+import VideoPlayer from '../components/VideoPlayer'
 
 export default function VideoDetail() {
   const { id } = useParams()
   const qc = useQueryClient()
+  const navigate = useNavigate()
   const { data, isLoading, isError, error } = useVideo(Number(id))
 
-  const navigate = useNavigate()
-    useEffect(() => {
-        if (isError && error?.response?.status === 401) {
-            navigate("/login", { replace: true })
-        }
+  useEffect(() => {
+    if (isError && error?.response?.status === 401) {
+      navigate('/login', { replace: true })
+    }
   }, [isError, error, navigate])
 
   const cached = qc
@@ -33,20 +32,26 @@ export default function VideoDetail() {
   const date = formatDate(merged.date)
 
   return (
-    <div className="space-y-4">
-      
-      {/* Вот тут теперь твой новый плеер */}
-      <div className="mt-8">
-          <VideoPlayer src={assetUrl(data.path)} poster={poster} />
+    <div className="mx-auto max-w-5xl space-y-6">
+      {/* Навигация */}
+      <Link
+        to="/"
+        className="inline-flex items-center gap-2 rounded-xl bg-rose-500 px-4 py-2 text-sm font-medium text-white transition hover:bg-rose-600"
+      >
+        <span aria-hidden="true">←</span>
+        Список видео
+      </Link>
+
+      {/* Плеер */}
+      <div className="overflow-hidden rounded-2xl bg-black shadow-lg">
+        <VideoPlayer src={assetUrl(data.path)} poster={poster} />
       </div>
 
-        <div className="flex items-center">
-            <Link to="/" className="w-22 text-white bg-rose-500 p-4 rounded-2xl m-4 text-sm hover:bg-rose-600 transition">
-                video list
-            </Link>
-            <h1 className="text-xl font-semibold text-white">{title}</h1>
-            {date && <p className="text-sm text-slate-400 ml-4">{date}</p>}
-        </div>
+      {/* Информация */}
+      <header className="space-y-1">
+        <h1 className="text-2xl font-semibold text-white">{title}</h1>
+        {date && <p className="text-sm text-slate-400">{date}</p>}
+      </header>
     </div>
   )
 }