+ | {row.showName} |
+
+ setWeight(Number(e.target.value))}
+ className="h-8 w-16"
+ />
+ |
+
+
+
+ setBlockValue(Number(e.target.value))}
+ className="h-8 w-16"
+ />
+
+ |
+
+ setIsEnabled(e.target.checked)}
+ />
+ |
+
+
+
+ removeChannelShow(channelId, row.id).then(onChanged).catch(onError)}
+ />
+
+ |
+
+ )
+}
+
+function AddAdForm({
+ channelId,
+ options,
+ onAdded,
+ onError,
+}: {
+ channelId: string
+ options: { id: string; name: string }[]
+ onAdded: () => void
+ onError: (e: unknown) => void
+}) {
+ const { t } = useTranslation()
+ const [assetId, setAssetId] = useState('')
+
+ const add = useMutation({
+ mutationFn: () => addChannelAd(channelId, assetId),
+ onSuccess: () => {
+ setAssetId('')
+ onAdded()
+ },
+ onError,
+ })
+
+ return (
+ ('Exclusive')
+ const [showId, setShowId] = useState('')
+ const [weight, setWeight] = useState(1)
+ const [start, setStart] = useState('')
+ const [end, setEnd] = useState('')
+
+ const create = useMutation({
+ mutationFn: () =>
+ createOverride(channelId, {
+ mode,
+ startsAtUtc: new Date(start).toISOString(),
+ endsAtUtc: new Date(end).toISOString(),
+ shows: [{ showId, weight }],
+ }),
+ onSuccess: () => {
+ setShowId('')
+ setStart('')
+ setEnd('')
+ onCreated()
+ },
+ onError,
+ })
+
+ const valid = showId && start && end && new Date(end) > new Date(start)
+
+ return (
+
+
+
+ {mode === 'Boost' && (
+
+ )}
+
+
+ setStart(e.target.value)} className="w-52" />
+
+
+
+ setEnd(e.target.value)} className="w-52" />
+
+
+
{t('admin.channels.noSchedule')}
+
+ return (
+
+ {entries.slice(0, 40).map((e) => (
+ -
+ {formatTime(e.startsAtUtc)}
+ {e.kind === 'Ad' ? (
+ {t('air.ad')}
+ ) : (
+
+ {e.showName ?? '—'}
+ {e.episodeIndex != null && (
+ · {t('air.episode')} {e.episodeIndex + 1}
+ )}
+
+ )}
+
+ ))}
+
+ )
+}
+
+function NumberField({
+ label,
+ value,
+ onChange,
+ min,
+}: {
+ label: string
+ value: number
+ onChange: (v: number) => void
+ min?: number
+}) {
+ return (
+
+
+ onChange(Number(e.target.value))}
+ className="w-24"
+ />
+
+ )
+}
+
+function RemoveButton({ onClick }: { onClick: () => void }) {
+ const { t } = useTranslation()
+ return (
+
+ )
+}
diff --git a/frontend/src/features/admin/channels/ChannelsPanel.tsx b/frontend/src/features/admin/channels/ChannelsPanel.tsx
new file mode 100644
index 0000000..4f005df
--- /dev/null
+++ b/frontend/src/features/admin/channels/ChannelsPanel.tsx
@@ -0,0 +1,109 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { Link } from '@tanstack/react-router'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { HttpError } from '@/shared/api/client'
+import { Badge } from '@/shared/ui/badge'
+import { Button } from '@/shared/ui/button'
+import { Input } from '@/shared/ui/input'
+import { toast } from '@/shared/ui/toast-store'
+import { createChannel, listChannels } from './api'
+
+function slugify(value: string) {
+ return value
+ .toLowerCase()
+ .replace(/[^a-z0-9]+/g, '-')
+ .replace(/(^-|-$)/g, '')
+}
+
+export function ChannelsPanel() {
+ const { t } = useTranslation()
+ const queryClient = useQueryClient()
+ const [name, setName] = useState('')
+ const [slug, setSlug] = useState('')
+
+ const { data, isLoading } = useQuery({ queryKey: ['admin', 'channels'], queryFn: listChannels })
+ const invalidate = () => queryClient.invalidateQueries({ queryKey: ['admin', 'channels'] })
+ const onError = (error: unknown) =>
+ toast.error(error instanceof HttpError ? error.detail : t('common.error'))
+
+ const createMutation = useMutation({
+ mutationFn: () => createChannel({ name: name.trim(), slug: slug || slugify(name) }),
+ onSuccess: () => {
+ setName('')
+ setSlug('')
+ invalidate()
+ },
+ onError,
+ })
+
+ return (
+
+
{t('admin.channels.title')}
+
+
+ setName(e.target.value)}
+ />
+ setSlug(slugify(e.target.value))}
+ />
+
+
+
+
+
+
+
+ | {t('admin.channels.name')} |
+ {t('admin.channels.slug')} |
+ {t('admin.channels.state')} |
+
+
+
+ {isLoading && (
+
+ |
+ {t('common.loading')}
+ |
+
+ )}
+ {data?.map((channel) => (
+
+ |
+
+ {channel.name}
+
+ |
+ {channel.slug} |
+
+ {channel.isEnabled ? (
+ {t('admin.channels.enabled')}
+ ) : (
+ {t('admin.channels.disabled')}
+ )}
+ |
+
+ ))}
+
+
+
+
+
+
{t('admin.media.title')}
+
+ {progress != null && (
+ {progress}%
+ )}
+ {
+ const file = e.target.files?.[0]
+ if (file) void handleFile(file)
+ }}
+ />
+
+
+
+
+
+
+
+
+ | {t('admin.media.name')} |
+ {t('admin.media.status')} |
+ {t('admin.media.duration')} |
+ {t('admin.media.resolution')} |
+ {t('common.actions')} |
+
+
+
+ {isLoading && (
+
+ |
+ {t('common.loading')}
+ |
+
+ )}
+ {data?.items.map((asset) => (
+ deleteMutation.mutate(asset.id)}
+ />
+ ))}
+ {data && data.items.length === 0 && !isLoading && (
+
+ |
+ {t('admin.media.empty')}
+ |
+
+ )}
+
+
+
+
+ | {asset.originalFileName} |
+
+
+ {t(`admin.media.statuses.${asset.status}`)}
+
+ |
+ {formatDuration(asset.durationSeconds)} |
+
+ {asset.width && asset.height ? `${asset.width}×${asset.height}` : '—'}
+ |
+
+
+ |
+
+ )
+}
diff --git a/frontend/src/features/admin/media/api.ts b/frontend/src/features/admin/media/api.ts
new file mode 100644
index 0000000..4e7979a
--- /dev/null
+++ b/frontend/src/features/admin/media/api.ts
@@ -0,0 +1,66 @@
+import { apiRequest, getAccessToken, HttpError } from '@/shared/api/client'
+import type {
+ CreatedIdResponse,
+ MediaAssetDto,
+ MediaAssetStatus,
+ PagedList,
+} from '@/shared/api/types'
+
+export type ListMediaParams = {
+ page: number
+ pageSize: number
+ status?: MediaAssetStatus
+ search?: string
+}
+
+export function listMedia(params: ListMediaParams) {
+ const query = new URLSearchParams({
+ page: String(params.page),
+ pageSize: String(params.pageSize),
+ })
+ if (params.status) query.set('status', params.status)
+ if (params.search) query.set('search', params.search)
+ return apiRequest>(`/admin/media?${query.toString()}`)
+}
+
+export function deleteMedia(id: string) {
+ return apiRequest(`/admin/media/${id}`, { method: 'DELETE' })
+}
+
+/**
+ * Потоковая загрузка файла (сырое тело + fileName в query). Через XHR ради индикатора прогресса.
+ */
+export function uploadMedia(
+ file: File,
+ onProgress?: (percent: number) => void,
+): Promise {
+ return new Promise((resolve, reject) => {
+ const xhr = new XMLHttpRequest()
+ const query = new URLSearchParams({ fileName: file.name })
+ xhr.open('POST', `/api/admin/media?${query.toString()}`)
+
+ const token = getAccessToken()
+ if (token) xhr.setRequestHeader('Authorization', `Bearer ${token}`)
+
+ xhr.upload.onprogress = (event) => {
+ if (event.lengthComputable && onProgress)
+ onProgress(Math.round((event.loaded / event.total) * 100))
+ }
+ xhr.onload = () => {
+ if (xhr.status >= 200 && xhr.status < 300) {
+ resolve(JSON.parse(xhr.responseText) as CreatedIdResponse)
+ } else {
+ let detail = `HTTP ${xhr.status}`
+ try {
+ const problem = JSON.parse(xhr.responseText) as { detail?: string; title?: string }
+ detail = problem.detail ?? problem.title ?? detail
+ } catch {
+ /* пусто */
+ }
+ reject(new HttpError({ detail }, xhr.status))
+ }
+ }
+ xhr.onerror = () => reject(new HttpError({ title: 'Network error' }, 0))
+ xhr.send(file)
+ })
+}
diff --git a/frontend/src/features/admin/shows/ShowDetail.tsx b/frontend/src/features/admin/shows/ShowDetail.tsx
new file mode 100644
index 0000000..b7fd383
--- /dev/null
+++ b/frontend/src/features/admin/shows/ShowDetail.tsx
@@ -0,0 +1,136 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { Link } from '@tanstack/react-router'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { ChevronLeft } from 'lucide-react'
+import { HttpError } from '@/shared/api/client'
+import { Badge } from '@/shared/ui/badge'
+import { Button } from '@/shared/ui/button'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/shared/ui/select'
+import { toast } from '@/shared/ui/toast-store'
+import { listMedia } from '@/features/admin/media/api'
+import { formatDuration } from '@/features/admin/media/MediaPanel'
+import { addEpisode, getShow, removeEpisode } from './api'
+
+export function ShowDetail({ showId }: { showId: string }) {
+ const { t } = useTranslation()
+ const queryClient = useQueryClient()
+ const [assetId, setAssetId] = useState('')
+
+ const { data: show, isLoading } = useQuery({
+ queryKey: ['admin', 'shows', showId],
+ queryFn: () => getShow(showId),
+ })
+ const { data: ready } = useQuery({
+ queryKey: ['admin', 'media', 'ready'],
+ queryFn: () => listMedia({ page: 1, pageSize: 100, status: 'Ready' }),
+ })
+
+ const invalidate = () => queryClient.invalidateQueries({ queryKey: ['admin', 'shows', showId] })
+ const onError = (error: unknown) =>
+ toast.error(error instanceof HttpError ? error.detail : t('common.error'))
+
+ const addMutation = useMutation({
+ mutationFn: () => addEpisode(showId, assetId),
+ onSuccess: () => {
+ setAssetId('')
+ invalidate()
+ },
+ onError,
+ })
+ const removeMutation = useMutation({
+ mutationFn: (episodeId: string) => removeEpisode(showId, episodeId),
+ onSuccess: invalidate,
+ onError,
+ })
+
+ if (isLoading || !show) return {t('common.loading')}
+
+ const canAdd = show.kind !== 'Single' || show.episodes.length === 0
+
+ return (
+
+
+
+
+
+
+
{show.name}
+ {t(`admin.shows.kinds.${show.kind}`)}
+
+
+ {canAdd && (
+
+
+
+
+ )}
+
+
+
+
+
+ | # |
+ {t('admin.shows.episode')} |
+ {t('admin.media.duration')} |
+ {t('admin.media.status')} |
+ {t('common.actions')} |
+
+
+
+ {show.episodes.map((episode, index) => (
+
+ | {index + 1} |
+ {episode.assetName ?? '—'} |
+
+ {formatDuration(episode.durationSeconds)}
+ |
+
+ {episode.assetStatus && (
+
+ {t(`admin.media.statuses.${episode.assetStatus}`)}
+
+ )}
+ |
+
+
+ |
+
+ ))}
+ {show.episodes.length === 0 && (
+
+ |
+ {t('admin.shows.noEpisodes')}
+ |
+
+ )}
+
+
+
+
+
{t('admin.shows.title')}
+
+
+ setName(e.target.value)}
+ />
+
+
+
+
+
+
+
+
+ | {t('admin.shows.name')} |
+ {t('admin.shows.kind')} |
+ {t('admin.shows.episodes')} |
+ {t('common.actions')} |
+
+
+
+ {isLoading && (
+
+ |
+ {t('common.loading')}
+ |
+
+ )}
+ {data?.map((show) => (
+
+ |
+
+ {show.name}
+
+ |
+
+ {t(`admin.shows.kinds.${show.kind}`)}
+ |
+ {show.episodeCount} |
+
+
+ |
+
+ ))}
+
+
+
+
{t('common.loading')}
+
+ if (!channels || channels.length === 0)
+ return (
+
+
{t('nav.dashboard')}
+
{t('air.noChannels')}
+
+
{t('nav.dashboard')}
+
+
+
+
+
+ {selected && watchReady ? (
+
+ ) : (
+
+ )}
+
+
+ {current && (
+
+
+ {t('air.now')}
+ {programLabel(current, t)}
+
+
+ {formatTime(current.startsAtUtc)} – {formatTime(current.endsAtUtc)}
+
+
+ )}
+
+ {upcoming.length > 0 && (
+
+
+ {t('air.next')}
+
+
+ {upcoming.slice(0, 6).map((entry) => (
+ -
+
+ {formatTime(entry.startsAtUtc)}
+
+ {programLabel(entry, t)}
+
+ ))}
+
+
+ )}
+
+
+
+