Refactor bumper template background management: rename background upload endpoint to reflect new functionality, update related command and handler to use image ID instead of extension, and adjust data models to support image references. Remove obsolete background handling code and enhance UI components for improved image selection and display.

frontend/src/features/admin/channels/ChannelDetail.tsx

@@ -4,6 +4,8 @@ import Hls from 'hls.js'
 import { type ReactNode, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ChevronDown, ChevronLeft, RefreshCw } from 'lucide-react'
+import { imageUrl } from '@/features/admin/images/api'
+import { ImageGallery } from '@/features/admin/images/ImageGallery'
 import { getAccessToken, HttpError } from '@/shared/api/client'
 import type {
   AdInsertion,
@@ -41,11 +43,11 @@ import {
   removeChannelAd,
   removeChannelShow,
   renderBumperPreview,
+  setBumperTemplateBackground,
   updateBumperTemplate,
   updateChannelSettings,
   updateChannelShow,
   uploadBumperTemplateAudio,
-  uploadBumperTemplateBackground,
 } from './api'
 
 function formatTime(iso: string) {
@@ -654,17 +656,11 @@ function BumperTemplateEditor({
           onSaved={onChanged}
           onError={onError}
         />
-        <BumperFileUpload
+        <BumperBackgroundField
           channelId={channelId}
           templateId={template.id}
-          kind="background"
-          label={t('admin.channels.bumperBackground')}
-          hint={t('admin.channels.bumperBackgroundHint')}
-          has={template.hasBackground}
-          accept="image/*"
-          upload={uploadBumperTemplateBackground}
-          clear={clearBumperTemplateBackground}
-          onSaved={onChanged}
+          backgroundImageId={template.backgroundImageId}
+          onChanged={onChanged}
           onError={onError}
         />
       </div>
@@ -758,6 +754,71 @@ function BumperPreviewPlayer({
   )
 }
 
+function BumperBackgroundField({
+  channelId,
+  templateId,
+  backgroundImageId,
+  onChanged,
+  onError,
+}: {
+  channelId: string
+  templateId: string
+  backgroundImageId: string | null
+  onChanged: () => void
+  onError: (e: unknown) => void
+}) {
+  const { t } = useTranslation()
+  const [galleryOpen, setGalleryOpen] = useState(false)
+
+  const setBg = useMutation({
+    mutationFn: (imageId: string) => setBumperTemplateBackground(channelId, templateId, imageId),
+    onSuccess: onChanged,
+    onError,
+  })
+  const clearBg = useMutation({
+    mutationFn: () => clearBumperTemplateBackground(channelId, templateId),
+    onSuccess: onChanged,
+    onError,
+  })
+
+  return (
+    <div className="flex flex-col gap-1.5">
+      <Label>
+        {t('admin.channels.bumperBackground')}{' '}
+        <span className={backgroundImageId ? 'text-emerald-500' : 'text-muted-foreground'}>
+          {backgroundImageId
+            ? `· ${t('admin.channels.bumperFileLoaded')}`
+            : `· ${t('admin.channels.bumperFileDefault')}`}
+        </span>
+      </Label>
+      <span className="text-xs text-muted-foreground">{t('admin.channels.bumperBackgroundHint')}</span>
+      <div className="flex items-center gap-2">
+        {backgroundImageId && (
+          <img
+            src={imageUrl(backgroundImageId)}
+            alt=""
+            className="h-10 w-16 shrink-0 rounded border border-border object-cover"
+          />
+        )}
+        <Button size="sm" variant="outline" onClick={() => setGalleryOpen(true)}>
+          {t('admin.channels.bumperBackgroundPick')}
+        </Button>
+        {backgroundImageId && (
+          <Button size="sm" variant="ghost" disabled={clearBg.isPending} onClick={() => clearBg.mutate()}>
+            {t('admin.channels.bumperReset')}
+          </Button>
+        )}
+      </div>
+      <ImageGallery
+        open={galleryOpen}
+        onOpenChange={setGalleryOpen}
+        category="BumperBackground"
+        onSelect={(img) => setBg.mutate(img.id)}
+      />
+    </div>
+  )
+}
+
 function BumperFileUpload({
   channelId,
   templateId,