Add media and channel management routes: introduce new routes for admin channels, media, and shows in the routing structure. Update navigation in the admin layout to include links for these new sections. Enhance type definitions for media assets and shows in the API types. Integrate HLS.js for improved streaming support.

2026-07-24 16:18:54 +03:00
parent 1bbfd15907
commit a2685fb602
24 changed files with 2050 additions and 42 deletions
@@ -0,0 +1,113 @@
+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 type { ShowKind } from '@/shared/api/types'
+import { Badge } from '@/shared/ui/badge'
+import { Button } from '@/shared/ui/button'
+import { Input } from '@/shared/ui/input'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/shared/ui/select'
+import { toast } from '@/shared/ui/toast-store'
+import { createShow, deleteShow, listShows } from './api'
+
+export function ShowsPanel() {
+  const { t } = useTranslation()
+  const queryClient = useQueryClient()
+  const [name, setName] = useState('')
+  const [kind, setKind] = useState<ShowKind>('Series')
+
+  const { data, isLoading } = useQuery({ queryKey: ['admin', 'shows'], queryFn: listShows })
+  const invalidate = () => queryClient.invalidateQueries({ queryKey: ['admin', 'shows'] })
+  const onError = (error: unknown) =>
+    toast.error(error instanceof HttpError ? error.detail : t('common.error'))
+
+  const createMutation = useMutation({
+    mutationFn: () => createShow({ name: name.trim(), kind }),
+    onSuccess: () => {
+      setName('')
+      invalidate()
+    },
+    onError,
+  })
+  const deleteMutation = useMutation({ mutationFn: deleteShow, onSuccess: invalidate, onError })
+
+  return (
+    <div className="flex flex-col gap-4">
+      <h2 className="crt-glow text-xl font-semibold">{t('admin.shows.title')}</h2>
+
+      <div className="flex flex-wrap items-end gap-2">
+        <Input
+          className="max-w-xs"
+          placeholder={t('admin.shows.name')}
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+        />
+        <Select value={kind} onValueChange={(v) => setKind(v as ShowKind)}>
+          <SelectTrigger className="w-40">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="Series">{t('admin.shows.kinds.Series')}</SelectItem>
+            <SelectItem value="Single">{t('admin.shows.kinds.Single')}</SelectItem>
+          </SelectContent>
+        </Select>
+        <Button
+          size="sm"
+          disabled={!name.trim() || createMutation.isPending}
+          onClick={() => createMutation.mutate()}
+        >
+          {t('common.create')}
+        </Button>
+      </div>
+
+      <div className="crt-panel overflow-x-auto rounded-md">
+        <table className="w-full text-sm">
+          <thead className="border-b border-border text-left text-muted-foreground">
+            <tr>
+              <th className="px-4 py-2 font-medium">{t('admin.shows.name')}</th>
+              <th className="px-4 py-2 font-medium">{t('admin.shows.kind')}</th>
+              <th className="px-4 py-2 font-medium">{t('admin.shows.episodes')}</th>
+              <th className="px-4 py-2 font-medium">{t('common.actions')}</th>
+            </tr>
+          </thead>
+          <tbody>
+            {isLoading && (
+              <tr>
+                <td className="px-4 py-3 text-muted-foreground" colSpan={4}>
+                  {t('common.loading')}
+                </td>
+              </tr>
+            )}
+            {data?.map((show) => (
+              <tr key={show.id} className="border-b border-border last:border-0">
+                <td className="px-4 py-2">
+                  <Link
+                    to="/admin/shows/$showId"
+                    params={{ showId: show.id }}
+                    className="text-primary hover:underline"
+                  >
+                    {show.name}
+                  </Link>
+                </td>
+                <td className="px-4 py-2">
+                  <Badge variant="muted">{t(`admin.shows.kinds.${show.kind}`)}</Badge>
+                </td>
+                <td className="px-4 py-2 text-muted-foreground">{show.episodeCount}</td>
+                <td className="px-4 py-2">
+                  <Button
+                    size="sm"
+                    variant="destructive"
+                    onClick={() => deleteMutation.mutate(show.id)}
+                  >
+                    {t('common.delete')}
+                  </Button>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  )
+}