Implement episode metadata management: add functionality to refresh episode metadata from external sources, including new API endpoints and UI integration. Enhance Show and Episode models to support additional metadata fields, and update database schema accordingly. Update ShowDetail and ShowMetadataCard components to display refreshed episode information and provide user feedback on metadata updates.

frontend/src/features/streaming/AirPage.tsx

@@ -2,12 +2,12 @@ import { useQuery } from '@tanstack/react-query'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Radio, RotateCw } from 'lucide-react'
-import type { ScheduleEntryDto } from '@/shared/api/types'
+import type { PublicEpgEntryDto } from '@/shared/api/types'
 import { cn } from '@/shared/lib/cn'
 import { Badge } from '@/shared/ui/badge'
 import { Button } from '@/shared/ui/button'
 import { ChannelPlayer } from './ChannelPlayer'
-import { getEpg, listChannels, watchChannel } from './api'
+import { episodeStillUrl, getEpg, listChannels, showPosterUrl, watchChannel } from './api'
 
 function formatTime(iso: string) {
   return new Date(iso).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
@@ -62,7 +62,7 @@ export function AirPage() {
     refetchInterval: 60_000,
   })
 
-  const { current, upcoming } = useMemo(() => buildGuide(epg ?? []), [epg])
+  const { current, upcoming, currentEntry } = useMemo(() => buildGuide(epg ?? []), [epg])
 
   if (isLoading) return <p className="text-muted-foreground">{t('common.loading')}</p>
 
@@ -89,8 +89,23 @@ export function AirPage() {
                 selected === channel.slug && 'border-primary text-primary',
               )}
             >
-              <Radio className="h-4 w-4" />
-              {channel.name}
+              {channel.currentShowHasPoster && channel.currentShowId ? (
+                <img
+                  src={showPosterUrl(channel.currentShowId)}
+                  alt=""
+                  className="h-10 w-7 shrink-0 rounded object-cover"
+                />
+              ) : (
+                <Radio className="h-4 w-4 shrink-0" />
+              )}
+              <span className="flex min-w-0 flex-col">
+                <span className="truncate">{channel.name}</span>
+                {channel.currentShowName && (
+                  <span className="truncate text-xs text-muted-foreground">
+                    {channel.currentShowName}
+                  </span>
+                )}
+              </span>
             </button>
           ))}
         </aside>
@@ -122,14 +137,37 @@ export function AirPage() {
 
           <div className="flex flex-col gap-3">
             {current && (
-              <div className="flex flex-col gap-1">
-                <div className="flex items-center gap-2">
-                  <Badge>{t('air.now')}</Badge>
-                  <span className="font-medium">{current.showName}</span>
+              <div className="crt-panel flex gap-3 rounded-md p-3">
+                {currentEntry?.episodeHasStill && currentEntry.episodeId ? (
+                  <img
+                    src={episodeStillUrl(currentEntry.episodeId)}
+                    alt=""
+                    className="hidden h-24 w-40 shrink-0 rounded object-cover sm:block"
+                  />
+                ) : currentEntry?.showHasPoster && current.showId ? (
+                  <img
+                    src={showPosterUrl(current.showId)}
+                    alt=""
+                    className="hidden h-24 w-16 shrink-0 rounded object-cover sm:block"
+                  />
+                ) : null}
+                <div className="flex min-w-0 flex-col gap-1">
+                  <div className="flex items-center gap-2">
+                    <Badge>{t('air.now')}</Badge>
+                    <span className="font-medium">{current.showName}</span>
+                  </div>
+                  {currentEntry?.episodeTitle && (
+                    <span className="text-sm">{currentEntry.episodeTitle}</span>
+                  )}
+                  <span className="text-xs text-muted-foreground">
+                    {formatTime(current.startsAtUtc)} – {formatTime(current.endsAtUtc)}
+                  </span>
+                  {currentEntry?.episodeOverview && (
+                    <p className="line-clamp-3 text-xs text-muted-foreground">
+                      {currentEntry.episodeOverview}
+                    </p>
+                  )}
                 </div>
-                <span className="text-xs text-muted-foreground">
-                  {formatTime(current.startsAtUtc)} – {formatTime(current.endsAtUtc)}
-                </span>
               </div>
             )}
 
@@ -166,10 +204,14 @@ type GuideBlock = {
 }
 
 /**
- * Строит телегид: рекламу не показываем, а подряд идущие серии одного шоу склеиваем в один блок
- * с диапазоном «с – по». Реклама между сериями одного шоу поглощается блоком (как в обычном EPG).
+ * Строит телегид: рекламу/заставки не показываем, а подряд идущие серии одного шоу склеиваем в один
+ * блок с диапазоном «с – по». Отдельно возвращаем текущую серию (для метаданных карточки «сейчас»).
  */
-function buildGuide(entries: ScheduleEntryDto[]): { current?: GuideBlock; upcoming: GuideBlock[] } {
+function buildGuide(entries: PublicEpgEntryDto[]): {
+  current?: GuideBlock
+  upcoming: GuideBlock[]
+  currentEntry?: PublicEpgEntryDto
+} {
   const blocks: GuideBlock[] = []
   for (const entry of entries) {
     if (entry.kind !== 'Program') continue
@@ -178,7 +220,7 @@ function buildGuide(entries: ScheduleEntryDto[]): { current?: GuideBlock; upcomi
       last.endsAtUtc = entry.endsAtUtc
     } else {
       blocks.push({
-        key: entry.id,
+        key: entry.startsAtUtc,
         showId: entry.showId,
         showName: entry.showName ?? '—',
         startsAtUtc: entry.startsAtUtc,
@@ -188,9 +230,12 @@ function buildGuide(entries: ScheduleEntryDto[]): { current?: GuideBlock; upcomi
   }
 
   const now = Date.now()
-  const current = blocks.find(
-    (b) => new Date(b.startsAtUtc).getTime() <= now && new Date(b.endsAtUtc).getTime() > now,
-  )
+  const active = (start: string, end: string) =>
+    new Date(start).getTime() <= now && new Date(end).getTime() > now
+  const current = blocks.find((b) => active(b.startsAtUtc, b.endsAtUtc))
   const upcoming = blocks.filter((b) => new Date(b.startsAtUtc).getTime() > now)
-  return { current, upcoming }
+  const currentEntry = entries.find(
+    (e) => e.kind === 'Program' && active(e.startsAtUtc, e.endsAtUtc),
+  )
+  return { current, upcoming, currentEntry }
 }

frontend/src/features/streaming/api.ts

@@ -1,5 +1,13 @@
 import { apiRequest } from '@/shared/api/client'
-import type { PublicChannelDto, ScheduleEntryDto } from '@/shared/api/types'
+import type { PublicChannelDto, PublicEpgEntryDto } from '@/shared/api/types'
+
+/** Ссылки на локальные постер шоу / кадр серии (публичные эндпоинты метаданных). */
+export function showPosterUrl(showId: string) {
+  return `/api/metadata/shows/${showId}/poster`
+}
+export function episodeStillUrl(episodeId: string) {
+  return `/api/metadata/episodes/${episodeId}/still`
+}
 
 export function listChannels() {
   return apiRequest<PublicChannelDto[]>('/channels')
@@ -15,5 +23,5 @@ export function getEpg(slug: string, from?: Date, to?: Date) {
   if (from) query.set('from', from.toISOString())
   if (to) query.set('to', to.toISOString())
   const qs = query.toString()
-  return apiRequest<ScheduleEntryDto[]>(`/channels/${slug}/epg${qs ? `?${qs}` : ''}`)
+  return apiRequest<PublicEpgEntryDto[]>(`/channels/${slug}/epg${qs ? `?${qs}` : ''}`)
 }