diff --git a/src/features/studio/components/StudioInspector.tsx b/src/features/studio/components/StudioInspector.tsx
index 6a371d5..fe17652 100644
--- a/src/features/studio/components/StudioInspector.tsx
+++ b/src/features/studio/components/StudioInspector.tsx
@@ -1,7 +1,5 @@
import {
ArrowLeft,
- ChevronDown,
- ChevronUp,
Copy,
Download,
FileCode2,
@@ -14,8 +12,8 @@ import {
Trash2,
Upload,
} from 'lucide-react'
-import { AnimatePresence, motion } from 'motion/react'
-import { type CSSProperties } from 'react'
+import { AnimatePresence, animate, motion, useMotionValue, useTransform } from 'motion/react'
+import { type CSSProperties, useLayoutEffect, useRef, useState } from 'react'
import { Accordion } from '@/components/ui/accordion'
import { Badge } from '@/components/ui/badge'
@@ -205,6 +203,66 @@ export function StudioInspector({ controller }: { controller: StudioController }
updateWireVisibility,
workspaceBackButtonRef,
} = controller
+ const playbackFooterY = useMotionValue(0)
+ const playbackHandleY = useMotionValue(0)
+ const playbackHandleCounterY = useTransform(playbackHandleY, value => -value)
+ const playbackFooterDragOriginY = useRef(0)
+ const playbackDetailsRef = useRef
(null)
+ const measuredSequenceIdRef = useRef(null)
+ const [playbackFooterCollapsedOffset, setPlaybackFooterCollapsedOffset] = useState(0)
+ const playbackDetailsOpacity = useTransform(
+ playbackFooterY,
+ [0, Math.max(playbackFooterCollapsedOffset, 1)],
+ [1, 0]
+ )
+
+ useLayoutEffect(() => {
+ const details = playbackDetailsRef.current
+ if (!details || !activeSequence) return
+
+ const measure = () => {
+ const nextOffset = details.getBoundingClientRect().height
+ if (nextOffset <= 0) return
+
+ const firstMeasurement = measuredSequenceIdRef.current !== activeSequence.id
+ if (firstMeasurement) {
+ measuredSequenceIdRef.current = activeSequence.id
+ playbackFooterY.set(statePlayerExpanded ? 0 : nextOffset)
+ } else if (
+ playbackFooterCollapsedOffset > 0 &&
+ Math.abs(nextOffset - playbackFooterCollapsedOffset) > 0.5
+ ) {
+ const progress = Math.min(
+ 1,
+ Math.max(0, playbackFooterY.get() / playbackFooterCollapsedOffset)
+ )
+ playbackFooterY.set(progress * nextOffset)
+ }
+ setPlaybackFooterCollapsedOffset(nextOffset)
+ }
+
+ measure()
+ const observer = new ResizeObserver(measure)
+ observer.observe(details)
+ return () => observer.disconnect()
+ }, [
+ activeSequence,
+ language,
+ playbackFooterCollapsedOffset,
+ playbackFooterY,
+ statePlayerExpanded,
+ ])
+
+ const snapPlaybackFooter = (expanded: boolean) => {
+ setStatePlayerExpanded(expanded)
+ animate(playbackFooterY, expanded ? 0 : playbackFooterCollapsedOffset, {
+ type: 'spring',
+ stiffness: 440,
+ damping: 40,
+ duration: reduceMotion ? 0 : undefined,
+ })
+ }
+
return (
{!editorPageOpen && (
- {activeAvatar.name}
-
- {t(
- mode === 'manual'
- ? 'Pose'
- : mode === 'avatars'
- ? 'Avatars'
- : mode === 'expressions'
- ? 'Expressions'
- : mode === 'states'
- ? 'Animations'
- : 'Exporter'
- )}
-
+
+
{activeAvatar.name}
+
+ {t(
+ mode === 'manual'
+ ? 'Pose'
+ : mode === 'avatars'
+ ? 'Avatars'
+ : mode === 'expressions'
+ ? 'Expressions'
+ : mode === 'states'
+ ? 'Animations'
+ : 'Exporter'
+ )}
+
+
-
@@ -1792,79 +1855,46 @@ export function StudioInspector({ controller }: { controller: StudioController }
{activeSequence && !editorPageOpen && (
-
- {statePlayerExpanded && (
-
-
-
-
{t('Détails de l’animation')}
-
{activeSequenceLabel}
-
- {activeSequence.builtIn
- ? t(activeSequence.description)
- : activeSequence.description}
-
-
-
- {t('Mode de lecture')} · {t(activeSequence.playbackMode)}
-
-
-
- {t('Expressions')}
- {activeSequence.steps.length}
-
- {activeSequence.steps
- .map(step => formatSeconds(step.holdMs, language))
- .join(' · ')}
-
-
-
- {t('Premier clignement')}
-
- {activeSequence.blink.enabled
- ? formatSeconds(activeSequence.blink.initialDelayMs, language)
- : t('Désactivé')}
-
- {t('après le lancement')}
-
-
- {t('Intervalle du clignement')}
-
- {formatSeconds(activeSequence.blink.minIntervalMs, language)}–
- {formatSeconds(activeSequence.blink.maxIntervalMs, language)}
-
- {t('tirage aléatoire')}
-
-
- {t('Durée du clignement')}
- {activeSequence.blink.durationMs} ms
- {t('fermeture et ouverture')}
-
-
+
+ snapPlaybackFooter(!statePlayerExpanded)}
+ onDragStart={() => {
+ playbackFooterDragOriginY.current = playbackFooterY.get()
+ }}
+ onDrag={(_, info) => {
+ playbackFooterY.set(
+ Math.min(
+ playbackFooterCollapsedOffset,
+ Math.max(0, playbackFooterDragOriginY.current + info.offset.y)
+ )
+ )
+ }}
+ onDragEnd={(_, info) => {
+ playbackHandleY.set(0)
+ const projectedY = playbackFooterY.get() + info.velocity.y * 0.16
+ snapPlaybackFooter(projectedY < playbackFooterCollapsedOffset / 2)
+ }}
+ >
+
+
- )}
+
{activeSequence.steps.map((step, position) => {
@@ -1914,6 +1944,62 @@ export function StudioInspector({ controller }: { controller: StudioController }
/>
+
+
+
+
+
{t('Détails de l’animation')}
+
{activeSequenceLabel}
+
+ {activeSequence.builtIn
+ ? t(activeSequence.description)
+ : activeSequence.description}
+
+
+
+ {t('Mode de lecture')} · {t(activeSequence.playbackMode)}
+
+
+
+
+ {t('Expressions')}
+ {activeSequence.steps.length}
+
+ {activeSequence.steps
+ .map(step => formatSeconds(step.holdMs, language))
+ .join(' · ')}
+
+
+
+ {t('Premier clignement')}
+
+ {activeSequence.blink.enabled
+ ? formatSeconds(activeSequence.blink.initialDelayMs, language)
+ : t('Désactivé')}
+
+ {t('après le lancement')}
+
+
+ {t('Intervalle du clignement')}
+
+ {formatSeconds(activeSequence.blink.minIntervalMs, language)}–
+ {formatSeconds(activeSequence.blink.maxIntervalMs, language)}
+
+ {t('tirage aléatoire')}
+
+
+ {t('Durée du clignement')}
+ {activeSequence.blink.durationMs} ms
+ {t('fermeture et ouverture')}
+
+
+
)}
{!editorPageOpen && (
diff --git a/src/features/studio/useStudioController.ts b/src/features/studio/useStudioController.ts
index 9e50dee..21551b2 100644
--- a/src/features/studio/useStudioController.ts
+++ b/src/features/studio/useStudioController.ts
@@ -113,7 +113,7 @@ import {
export function useStudioController() {
const { language, setLanguage, t } = useStudioLanguage()
- const [mode, setMode] = useState
('manual')
+ const [mode, setMode] = useState('avatars')
const [initialDocument] = useState(loadStudioDocument)
const [documentStore] = useState(() => createStudioDocumentStore(initialDocument))
const initialLibrary = initialDocument.library
@@ -830,6 +830,7 @@ export function useStudioController() {
const snapshot = avatarEditSnapshot.current
if (!snapshot) {
setBodyEditing(false)
+ setMode('avatars')
restoreStateAfterEditor()
return
}
@@ -837,6 +838,7 @@ export function useStudioController() {
avatarsRef.current = snapshot.avatars
setAvatars(snapshot.avatars)
activateAvatar(snapshot.activeAvatarId, false, true)
+ setMode('avatars')
restoreStateAfterEditor()
}