79 lines
2.1 KiB
TypeScript
79 lines
2.1 KiB
TypeScript
|
import { useQuery } from '@tanstack/react-query'
|
|||
|
|
import { Link, useParams } from 'react-router-dom'
|
|||
|
|
import { getVideo } from '../api/client'
|
|||
|
|
import { formatDuration, formatRelativeTime } from '../utils/format'
|
|||
|
|
|
|||
|
|
function VideoPage() {
|
|||
|
|
const { youtubeVideoId } = useParams<{ youtubeVideoId: string }>()
|
|||
|
|
|
|||
|
|
const videoQuery = useQuery({
|
|||
|
|
queryKey: ['video', youtubeVideoId],
|
|||
|
|
queryFn: () => getVideo(youtubeVideoId!),
|
|||
|
|
enabled: !!youtubeVideoId,
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
if (videoQuery.isLoading) {
|
|||
|
|
return (
|
|||
|
|
<div className="video-page">
|
|||
|
|
<p>Загрузка...</p>
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (videoQuery.isError || !videoQuery.data) {
|
|||
|
|
return (
|
|||
|
|
<div className="video-page">
|
|||
|
|
<Link to="/" className="back-link">
|
|||
|
|
← Лента
|
|||
|
|
</Link>
|
|||
|
|
<p className="error">Видео не найдено</p>
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const video = videoQuery.data
|
|||
|
|
const duration = formatDuration(video.duration_seconds)
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="video-page">
|
|||
|
|
<Link to="/" className="back-link">
|
|||
|
|
← Лента
|
|||
|
|
</Link>
|
|||
|
|
|
|||
|
|
<div className="player-wrapper">
|
|||
|
|
<iframe
|
|||
|
|
src={`https://www.youtube-nocookie.com/embed/${video.youtube_video_id}`}
|
|||
|
|
title={video.title}
|
|||
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
|||
|
|
allowFullScreen
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<h1 className="video-page-title">{video.title}</h1>
|
|||
|
|
|
|||
|
|
<div className="video-page-meta">
|
|||
|
|
<Link to={`/channels/${video.channel.id}/videos`}>{video.channel.title}</Link>
|
|||
|
|
{' · '}
|
|||
|
|
{formatRelativeTime(video.published_at)}
|
|||
|
|
{duration && ` · ${duration}`}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="video-page-source">Источник: YouTube</div>
|
|||
|
|
|
|||
|
|
{video.categories.length > 0 && (
|
|||
|
|
<div className="video-page-categories">
|
|||
|
|
{video.categories.map((c) => (
|
|||
|
|
<span key={c.id} className="chip">
|
|||
|
|
{c.name}
|
|||
|
|
</span>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{video.description && <p className="video-page-description">{video.description}</p>}
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default VideoPage
|