- {t('Rechercher')}
{[['IMAGE', t('Photos'), Image], ['VIDEO', t('Vidéos'), Video]].map(([value, label, Icon]) => changeSearch({ type: value })} disabled={busy}> )}
-
setFaceOpen((value) => !value)} disabled={busy}>
- {(search.query || search.personId) &&
{ setDraft(''); changeSearch({ query: '', personId: '' }) }} disabled={busy}> }
+
setFaceOpen((value) => !value)} disabled={busy}>{selectedFace?.name || t('Filtrer par visage')}
+ {(search.query || search.personId) &&
{ setDraft(''); changeSearch({ query: '', personId: '' }) }} disabled={busy}>{t('Effacer les filtres')} }
{faceOpen &&
{t('Personne reconnue dans Immich')}
@@ -147,9 +148,9 @@ export default function ImmichAssetPicker({ treeId, token, onSelect, onClose })
{people?.length > 0 && filteredPeople.length === 0 &&
{t('Aucune personne trouvée.')}
}
{faceError &&
{faceError}
}
}
-
{t('La recherche par contexte utilise la recherche intelligente activée dans Immich.')}
+ {error && !preview && errorBlock}
{loading ?
{t('À la recherche de vos souvenirs…')}
: result?.assets.length ?
{result.assets.map((asset) =>
{ previewTrigger.current = asset.id; setPreview(asset); requestAnimationFrame(() => dialog.current?.focus()) }} disabled={busy}>
{!loading && result &&
setSearch((current) => ({ ...current, page: current.page - 1 }))}> {t('Page {page}', { page: search.page })} setSearch((current) => ({ ...current, page: current.page + 1 }))}>{t('Suivant')} }
}
- {error &&
{error}
{!preview &&
setSearch((current) => ({ ...current }))}>{t('Réessayer')} }
}
+ {error && preview && errorBlock}
{selected.length === 1 ? t('1 souvenir sélectionné') : selected.length > 1 ? t('{n} souvenirs sélectionnés', { n: selected.length }) : t('Photo : 5 Mo · Vidéo : 20 Mo')}{t('Vos médias seront copiés dans Parenthèse.')}
{preview ? select(preview)} disabled={busy || selected.includes(preview.id)}>{selected.includes(preview.id) ? t('Ajouté') : t('Choisir ce souvenir')} : {t('Terminer la sélection')}
diff --git a/frontend/src/components/MediaManagerPanel.css b/frontend/src/components/MediaManagerPanel.css
index 5f869e9..246d6ed 100644
--- a/frontend/src/components/MediaManagerPanel.css
+++ b/frontend/src/components/MediaManagerPanel.css
@@ -37,6 +37,11 @@
}
@media (hover: hover) and (pointer: fine) { .mm-drop:hover { background: var(--pz-a100); } }
.mm-drop-input:focus-visible + .mm-drop { outline: 2px solid var(--pz-a500); outline-offset: 2px; }
+.mm-drop-link { padding: 0; border: 0; background: none; cursor: pointer; font: inherit; font-weight: 500; color: var(--pz-a700); text-decoration: underline; text-underline-offset: 3px; }
+.mm-drop-link:disabled { cursor: default; opacity: .6; }
+.mm-immich-queue { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
+.mm-immich-queue li { display: flex; align-items: center; gap: 10px; min-width: 0; }
+.mm-immich-queue span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 13px var(--pz-sans); color: var(--pz-ink-2); }
.mm-drop-icon { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--pz-surface); color: var(--pz-a700); }
.mm-drop-text { display: grid; gap: 2px; min-width: 0; }
.mm-drop-text strong { font: 500 14px var(--pz-sans); color: var(--pz-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
diff --git a/frontend/src/components/MediaManagerPanel.jsx b/frontend/src/components/MediaManagerPanel.jsx
index 789f101..f9ce9a7 100644
--- a/frontend/src/components/MediaManagerPanel.jsx
+++ b/frontend/src/components/MediaManagerPanel.jsx
@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
import { readContributorName } from '../utils/contributorName'
import { ArrowDown, ArrowUp, FileText, Image, MapPin, Mic, Plus, Quote, Route, Trash2, Upload, Video, X } from 'lucide-react'
import { getAcceptForMediaType } from '../utils/mediaUpload'
@@ -46,6 +46,11 @@ const MediaManagerPanel = ({
const [file, setFile] = useState(null)
const [immichConfigured, setImmichConfigured] = useState(false)
const [pickingImmich, setPickingImmich] = useState(false)
+ // Souvenirs choisis dans Immich : un souvenir par fichier, envoyés l'un après l'autre à l'enregistrement
+ const [immichFiles, setImmichFiles] = useState([])
+ const [sending, setSending] = useState(false)
+ const fileInput = useRef(null)
+ const immichAvailable = canManage && immichConfigured
useEffect(() => {
let cancelled = false
if (visible && canManage && treeId && token) fetchImmichConfig(treeId, token).then(({ config }) => {
@@ -53,7 +58,7 @@ const MediaManagerPanel = ({
}).catch(() => { if (!cancelled) setImmichConfigured(false) })
return () => { cancelled = true }
}, [visible, canManage, treeId, token])
- useEffect(() => { if (!visible) { setPickingImmich(false); setImmichConfigured(false) } }, [visible])
+ useEffect(() => { if (!visible) { setPickingImmich(false); setImmichConfigured(false); setImmichFiles([]) } }, [visible])
const [mediaType, setMediaType] = useState('photo')
const [citationText, setCitationText] = useState('')
const [videoMode, setVideoMode] = useState('file') // 'file' | 'youtube'
@@ -67,7 +72,7 @@ const MediaManagerPanel = ({
const isCitation = mediaType === 'citation'
const isYoutubeVideo = mediaType === 'video' && videoMode === 'youtube'
const canUpload = useMemo(() => {
- if (loading || pickingImmich) {
+ if (loading || pickingImmich || sending) {
return false
}
@@ -75,6 +80,10 @@ const MediaManagerPanel = ({
return false
}
+ if (immichFiles.length > 0) {
+ return true
+ }
+
if (isCitation) {
return citationText.trim().length > 0
}
@@ -84,7 +93,7 @@ const MediaManagerPanel = ({
}
return Boolean(file)
- }, [canManage, citationText, contributorName, file, isCitation, isYoutubeVideo, loading, pickingImmich, youtubeUrl])
+ }, [canManage, citationText, contributorName, file, immichFiles, isCitation, isYoutubeVideo, loading, pickingImmich, sending, youtubeUrl])
const fileAccept = useMemo(() => getAcceptForMediaType(mediaType), [mediaType])
if (!visible || !person) {
@@ -97,16 +106,39 @@ const MediaManagerPanel = ({
return
}
- await onUpload({
- file,
- caption: caption.trim() || null,
- source: source.trim() || null,
- mediaType,
- citationText: citationText.trim(),
- youtubeUrl: isYoutubeVideo ? youtubeUrl.trim() : null,
- submittedByLabel: canManage ? null : contributorName.trim(),
- })
+ if (immichFiles.length > 0) {
+ // Un souvenir par fichier Immich, titré par son nom de fichier ; on s'arrête à la première erreur
+ setSending(true)
+ let left = immichFiles
+ for (const item of immichFiles) {
+ const ok = await onUpload({
+ file: item.file,
+ caption: item.file.name.replace(/.[^.]+$/, '') || null,
+ source: source.trim() || null,
+ mediaType: item.file.type.startsWith('video/') ? 'video' : 'photo',
+ citationText: '',
+ youtubeUrl: null,
+ submittedByLabel: canManage ? null : contributorName.trim(),
+ })
+ if (ok === false) break
+ left = left.filter((entry) => entry.key !== item.key)
+ setImmichFiles(left)
+ }
+ setSending(false)
+ if (left.length > 0) return
+ } else {
+ await onUpload({
+ file,
+ caption: caption.trim() || null,
+ source: source.trim() || null,
+ mediaType,
+ citationText: citationText.trim(),
+ youtubeUrl: isYoutubeVideo ? youtubeUrl.trim() : null,
+ submittedByLabel: canManage ? null : contributorName.trim(),
+ })
+ }
setFile(null)
+ setImmichFiles([])
setCaption('')
setSource('')
setMediaType('photo')
@@ -141,11 +173,21 @@ const MediaManagerPanel = ({
const changeType = (value) => {
setMediaType(value)
setFile(null)
+ setImmichFiles([])
setCitationText('')
setVideoMode('file')
setYoutubeUrl('')
}
+ // Un souvenir choisi dans Immich s'ajoute à la liste ; la galerie reste ouverte pour en cocher d'autres
+ const addImmichFile = (picked) => {
+ setFile(null)
+ if (fileInput.current) fileInput.current.value = ''
+ setImmichFiles((list) => (list.some((entry) => entry.file.name === picked.name && entry.file.size === picked.size)
+ ? list
+ : [...list, { key: `${picked.name}-${picked.size}`, file: picked }]))
+ }
+
return (
@@ -188,11 +230,8 @@ const MediaManagerPanel = ({
)}
- {canManage && immichConfigured &&
setPickingImmich((value) => !value)}>{t('Depuis Immich')} }
- {pickingImmich && canManage &&
setPickingImmich(false)} onSelect={(selectedFile) => {
- setFile(selectedFile); setMediaType(selectedFile.type.startsWith('video/') ? 'video' : 'photo'); setVideoMode('file'); setPickingImmich(false)
- }} />}
- {!isCitation && !isYoutubeVideo && (
+ {pickingImmich && canManage && setPickingImmich(false)} onSelect={addImmichFile} />}
+ {!isCitation && !isYoutubeVideo && !immichAvailable && (
)}
+ {!isCitation && !isYoutubeVideo && immichAvailable && (() => {
+ // Depuis Immich est un lien dans la zone de dépôt (pas un bouton à part)
+ const immichLink = setPickingImmich(true)}>{t('depuis Immich')}
+ const count = immichFiles.length
+ const label = count === 1 ? t('1 souvenir choisi dans Immich') : count > 1 ? t('{n} souvenirs choisis dans Immich', { n: count }) : file ? file.name : null
+ return (
+
+
{ setFile(event.target.files?.[0] || null); setImmichFiles([]) }}
+ />
+
{ if (!event.target.closest('button')) fileInput.current?.click() }}>
+
+ {label || <>{t('Choisir un fichier')} {t('ou')} {immichLink}}
+ {file ? <>{t('Pour en prendre un autre, touchez ici')} {t('ou')} {immichLink} : count > 0 ? <>{t('ou')} {immichLink} : (mediaType === 'photo' ? t('5 Mo au maximum') : t('20 Mo au maximum'))}
+
+
+ {count > 0 && (
+ <>
+
+ {immichFiles.map((item) => (
+
+ {item.file.name}
+ setImmichFiles((list) => list.filter((entry) => entry.key !== item.key))} disabled={sending}>{t('Retirer')}
+
+ ))}
+
+
{t('Chaque souvenir garde le nom de son fichier Immich.')}
+
+ )}
+
@@ -243,6 +321,7 @@ const MediaManagerPanel = ({