Refactor media import components for improved layout and functionality
ci / build-backend (push) Successful in 1m31s
ci / build-frontend (push) Successful in 1m8s
ci / tests (push) Successful in 1m40s
ci / sonar (push) Successful in 4m34s

Updated the ManualInboxPanel, MediaImportDialog, MovieImportPanel, and UploadToShowPanel to enhance their layout and responsiveness. Adjusted flex properties to ensure consistent sizing and overflow handling across components. Simplified the MediaImportDialog by removing unnecessary file handling logic, and improved localization strings for clarity. These changes aim to enhance user experience and maintain a cohesive design across the media import interface.
This commit is contained in:
Leonid Pershin
2026-07-28 03:21:18 +03:00
parent f15b2fefcd
commit 05e9919a7b
7 changed files with 60 additions and 54 deletions
@@ -11,7 +11,7 @@ import { ManualInboxPanel } from './ManualInboxPanel'
import { MovieImportPanel } from './MovieImportPanel'
import { UploadToShowPanel } from './UploadToShowPanel'
/** Способы пополнить библиотеку. «В шоу» появляется только когда файлы уже выбраны. */
/** Способы пополнить библиотеку: фильмы пачкой, серии из manual/, загрузка файлов в шоу. */
type Tab = 'movies' | 'manual' | 'toShow'
/**
@@ -19,22 +19,17 @@ type Tab = 'movies' | 'manual' | 'toShow'
* выбранных файлов в шоу. Раньше это были три кнопки и три окна — а выбор между ними делается
* один раз и по одному признаку: что за контент кладём.
*/
export function MediaImportDialog({
files,
onClose,
}: Readonly<{
/** Файлы, выбранные в проводнике до открытия окна: тогда сразу открывается вкладка «в шоу». */
files: File[] | null
onClose: () => void
}>) {
export function MediaImportDialog({ onClose }: Readonly<{ onClose: () => void }>) {
const { t } = useTranslation()
const [tab, setTab] = useState<Tab>(files ? 'toShow' : 'movies')
const [tab, setTab] = useState<Tab>('movies')
const tabs: Tab[] = files ? ['toShow', 'movies', 'manual'] : ['movies', 'manual']
const tabs: Tab[] = ['movies', 'manual', 'toShow']
return (
<Dialog open onOpenChange={(open) => !open && onClose()}>
<DialogContent className="max-w-[min(96vw,80rem)]">
{/* Высота фиксирована: вкладки разного роста, и окно, прыгающее при переключении,
сбивает — то, на что метился курсор, уезжает из-под него. */}
<DialogContent className="flex h-[min(88vh,56rem)] w-full max-w-[min(96vw,80rem)] flex-col">
<DialogHeader>
<DialogTitle>{t('admin.media.importTitle')}</DialogTitle>
<DialogDescription>{t('admin.media.importHint')}</DialogDescription>
@@ -57,9 +52,11 @@ export function MediaImportDialog({
))}
</div>
{tab === 'movies' && <MovieImportPanel onClose={onClose} />}
{tab === 'manual' && <ManualInboxPanel onClose={onClose} />}
{tab === 'toShow' && files && <UploadToShowPanel files={files} onClose={onClose} />}
<div className="flex min-h-0 flex-1 flex-col gap-3 pt-3">
{tab === 'movies' && <MovieImportPanel onClose={onClose} />}
{tab === 'manual' && <ManualInboxPanel onClose={onClose} />}
{tab === 'toShow' && <UploadToShowPanel onClose={onClose} />}
</div>
</DialogContent>
</Dialog>
)