Enhance metadata handling and UI feedback: add support for jingles in channel queries, implement error handling for metadata provider requests, and improve search functionality in ShowMetadataCard with user feedback for no results found. Update translations for new UI messages.

This commit is contained in:
Leonid Pershin
2026-07-25 09:58:59 +03:00
parent 7fb46b5e0d
commit 8ca585a5be
8 changed files with 66 additions and 22 deletions
@@ -27,6 +27,7 @@ export function ShowMetadataCard({ show, onChanged }: { show: ShowDto; onChanged
const [provider, setProvider] = useState('')
const [query, setQuery] = useState(show.name)
const [results, setResults] = useState<MetadataCandidate[]>([])
const [searched, setSearched] = useState(false)
const [description, setDescription] = useState(show.description ?? '')
const [year, setYear] = useState(show.year != null ? String(show.year) : '')
@@ -46,13 +47,17 @@ export function ShowMetadataCard({ show, onChanged }: { show: ShowDto; onChanged
const search = useMutation({
mutationFn: () => searchMetadata(effectiveProvider, query.trim()),
onSuccess: setResults,
onSuccess: (data) => {
setResults(data)
setSearched(true)
},
onError,
})
const apply = useMutation({
mutationFn: (externalId: string) => applyMetadata(show.id, effectiveProvider, externalId),
onSuccess: () => {
setResults([])
setSearched(false)
toast.success(t('admin.metadata.applied'))
changed()
},
@@ -159,7 +164,10 @@ export function ShowMetadataCard({ show, onChanged }: { show: ShowDto; onChanged
<Input
className="min-w-40 flex-1"
value={query}
onChange={(e) => setQuery(e.target.value)}
onChange={(e) => {
setQuery(e.target.value)
setSearched(false)
}}
placeholder={t('admin.metadata.searchPlaceholder')}
/>
<Button size="sm" disabled={search.isPending || !query.trim()} onClick={() => search.mutate()}>
@@ -167,6 +175,10 @@ export function ShowMetadataCard({ show, onChanged }: { show: ShowDto; onChanged
</Button>
</div>
{searched && results.length === 0 && (
<p className="text-xs text-muted-foreground">{t('admin.metadata.nothingFound')}</p>
)}
{results.length > 0 && (
<ul className="crt-panel max-h-72 divide-y divide-border overflow-y-auto rounded-md">
{results.map((r) => (