Refactor media import components for improved layout and functionality

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.
2026-07-28 03:21:18 +03:00
parent f15b2fefcd
commit 05e9919a7b
7 changed files with 60 additions and 54 deletions
@@ -227,7 +227,7 @@ export function ManualInboxPanel({ onClose }: Readonly<{ onClose: () => void }>)
    <>
      <p className="text-sm text-muted-foreground">{t('admin.media.manualHint')}</p>

-      <div className="flex flex-col gap-3">
+      <div className="flex min-h-0 flex-1 flex-col gap-3">
        {/* Шоу — первое решение в этом диалоге: остальные поля лишь помогают разложить файлы. */}
        <div className="flex flex-col gap-1.5">
          <Label>{t('admin.media.manualShow')}</Label>
@@ -345,7 +345,7 @@ export function ManualInboxPanel({ onClose }: Readonly<{ onClose: () => void }>)
          </span>
        </div>

-        <div className="crt-panel max-h-80 overflow-y-auto rounded-md text-sm">
+        <div className="crt-panel min-h-0 flex-1 overflow-y-auto rounded-md text-sm">
          {isLoading && <p className="px-3 py-2 text-muted-foreground">{t('common.loading')}</p>}
          {!isLoading && folders.length === 0 && (
            <p className="px-3 py-2 text-muted-foreground">{t('admin.media.manualEmpty')}</p>
@@ -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>
  )
@@ -41,12 +41,9 @@ export function MediaPanel() {
  const { t } = useTranslation()
  const queryClient = useQueryClient()
  const fileInput = useRef<HTMLInputElement>(null)
-  const fileInputShow = useRef<HTMLInputElement>(null)
  const [filter, setFilter] = useState<MediaFilter>('active')
  const [page, setPage] = useState(1)
  const { sort, toggle } = useTableSort('created', true)
-  // Файлы, выбранные для загрузки в шоу: с ними окно импорта открывается сразу на нужной вкладке.
-  const [filesForShow, setFilesForShow] = useState<File[] | null>(null)
  const [importOpen, setImportOpen] = useState(false)
  const enqueue = useUploadStore((s) => s.enqueue)

@@ -170,21 +167,6 @@ export function MediaPanel() {
              e.target.value = ''
            }}
          />
-          <input
-            ref={fileInputShow}
-            type="file"
-            accept="video/*,.mkv,.avi,.ts"
-            multiple
-            className="hidden"
-            onChange={(e) => {
-              const files = e.target.files
-              if (files && files.length > 0) {
-                setFilesForShow(Array.from(files))
-                setImportOpen(true)
-              }
-              e.target.value = ''
-            }}
-          />
          <Button size="sm" variant="outline" onClick={() => setImportOpen(true)}>
            <FolderInput className="h-4 w-4" />
            {t('admin.media.importButton')}
@@ -196,15 +178,7 @@ export function MediaPanel() {
        </div>
      </div>

-      {importOpen && (
-        <MediaImportDialog
-          files={filesForShow}
-          onClose={() => {
-            setImportOpen(false)
-            setFilesForShow(null)
-          }}
-        />
-      )}
+      {importOpen && <MediaImportDialog onClose={() => setImportOpen(false)} />}

      <div className="crt-panel overflow-x-auto rounded-md">
        <table className="w-full text-sm">
@@ -257,7 +257,7 @@ export function MovieImportPanel({ onClose }: Readonly<{ onClose: () => void }>)
        )}
      </div>

-      <div className="max-h-[60vh] overflow-auto rounded border border-border">
+      <div className="min-h-0 flex-1 overflow-auto rounded border border-border">
        <table className="w-full table-fixed text-sm">
          <thead className="sticky top-0 bg-background text-xs uppercase text-muted-foreground">
            <tr>
@@ -1,5 +1,6 @@
 import { useQuery } from '@tanstack/react-query'
-import { useMemo, useState } from 'react'
+import { Upload } from 'lucide-react'
+import { useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { qk } from '@/shared/api/query-keys'
 import { Badge } from '@/shared/ui/badge'
@@ -13,12 +14,16 @@ import { compareParsed, formatSeasonEpisode, isValidRegex, parseEpisodeName } fr
 import { matchShowByName } from './match-show'
 import { useUploadStore } from './upload-store'

-export function UploadToShowPanel({
-  files,
-  onClose,
-}: Readonly<{ files: File[]; onClose: () => void }>) {
+/**
+ * Загрузка выбранных файлов в шоу: сезон и номера серий разбираются здесь же, а сама заливка идёт
+ * очередью с прогрессом. Файлы выбираются в самой вкладке — окно открывается кнопкой «Импорт»,
+ * и требовать выбрать файлы **до** него значило бы прятать способ за проводником.
+ */
+export function UploadToShowPanel({ onClose }: Readonly<{ onClose: () => void }>) {
  const { t } = useTranslation()
  const enqueue = useUploadStore((s) => s.enqueue)
+  const [files, setFiles] = useState<File[]>([])
+  const fileInput = useRef<HTMLInputElement>(null)
  const [seasonStr, setSeasonStr] = useState('')
  const [regexStr, setRegexStr] = useState('')
  // Ручные правки привязки: имя файла → id шоу ('' — явно в библиотеку). Иначе берётся автоопределение.
@@ -70,7 +75,31 @@ export function UploadToShowPanel({
    <>
      <p className="text-sm text-muted-foreground">{t('admin.media.autoDetectHint')}</p>

-      <div className="flex flex-col gap-4">
+      <div className="flex flex-wrap items-center gap-2 text-sm">
+        <input
+          ref={fileInput}
+          type="file"
+          multiple
+          accept="video/*,.mkv,.avi,.ts"
+          className="hidden"
+          onChange={(e) => {
+            setFiles([...(e.target.files ?? [])])
+            setOverrides({})
+            e.target.value = ''
+          }}
+        />
+        <Button size="sm" variant="outline" onClick={() => fileInput.current?.click()}>
+          <Upload className="h-4 w-4" />
+          {t('admin.media.toShowPick')}
+        </Button>
+        <span className="text-xs text-muted-foreground">
+          {files.length === 0
+            ? t('admin.media.toShowEmpty')
+            : t('admin.media.toShowPicked', { count: files.length })}
+        </span>
+      </div>
+
+      <div className="flex min-h-0 flex-1 flex-col gap-4">
        <div className="grid gap-3 sm:grid-cols-2">
          <div className="flex flex-col gap-1.5">
            <Label>{t('admin.media.toShowSeason')}</Label>
@@ -117,7 +146,7 @@ export function UploadToShowPanel({
            />
          </div>
        </div>
-        <ul className="crt-panel max-h-72 divide-y divide-border overflow-y-auto rounded-md text-sm">
+        <ul className="crt-panel min-h-0 flex-1 divide-y divide-border overflow-y-auto rounded-md text-sm">
          {previews.map((p) => {
            const label = formatSeasonEpisode(p.parsed)
            const current = assignment(p.name)
@@ -148,7 +177,7 @@ export function UploadToShowPanel({
        <Button variant="outline" size="sm" onClick={onClose}>
          {t('common.cancel')}
        </Button>
-        <Button size="sm" onClick={confirm}>
+        <Button size="sm" disabled={files.length === 0} onClick={confirm}>
          {t('admin.media.toShowConfirm')}
        </Button>
      </DialogFooter>