diff --git a/src/components/video-editor/SettingsPanel.tsx b/src/components/video-editor/SettingsPanel.tsx index 8b289e3f..54df9f1a 100644 --- a/src/components/video-editor/SettingsPanel.tsx +++ b/src/components/video-editor/SettingsPanel.tsx @@ -523,15 +523,8 @@ interface SettingsPanelProps { selectedClipId?: string | null; selectedClipSpeed?: number | null; selectedClipMuted?: boolean | null; - selectedClipShowSourceAudio?: boolean | null; - hasClipSourceAudio?: boolean; onClipSpeedChange?: (speed: number) => void; onClipMutedChange?: (muted: boolean) => void; - onClipShowSourceAudioChange?: (show: boolean) => void; - sourceAudioTrackMeta?: Array<{ id: string; label: string }>; - sourceAudioTrackSettings?: Record; - onSourceAudioTrackVolumeChange?: (id: string, volume: number) => void; - onSourceAudioTrackNormalizeChange?: (id: string, normalize: boolean) => void; onClipDelete?: (id: string) => void; selectedAudioId?: string | null; selectedAudioVolume?: number | null; @@ -983,15 +976,8 @@ export function SettingsPanel({ selectedClipId, selectedClipSpeed, selectedClipMuted, - selectedClipShowSourceAudio = false, - hasClipSourceAudio = false, onClipSpeedChange, onClipMutedChange, - onClipShowSourceAudioChange, - sourceAudioTrackMeta = [], - sourceAudioTrackSettings = {}, - onSourceAudioTrackVolumeChange, - onSourceAudioTrackNormalizeChange, onClipDelete, selectedAudioId, selectedAudioVolume, @@ -1103,6 +1089,12 @@ export function SettingsPanel({ const { preference: themePreference, setPreference: setThemePreference } = useTheme(); const isBackgroundPanel = panelMode === "background"; const initialEditorPreferences = useMemo(() => loadEditorPreferences(), []); + const maxClipSpeed = useMemo(() => { + for (let speed = 30; speed >= 1; speed -= 0.25) { + if (supportsPreviewPlaybackRate(speed)) return speed; + } + return 1; + }, []); const [builtInWallpapers, setBuiltInWallpapers] = useState(BUILT_IN_WALLPAPERS); const [wallpaperPreviewPaths, setWallpaperPreviewPaths] = useState([]); @@ -3019,166 +3011,33 @@ export function SettingsPanel({ ); + + const clipSectionContent = ( -
-
- {tSettings("clip.title", "Clip")} - {selectedClipSpeed != null && selectedClipSpeed !== 1 && ( - - {selectedClipSpeed}× - - )} -
- -
- {tSettings("speed.label", "Speed")} -
-
- {[ - { speed: 0.25, label: "0.25×" }, - { speed: 0.5, label: "0.5×" }, - { speed: 0.75, label: "0.75×" }, - { speed: 1, label: "1×" }, - { speed: 1.25, label: "1.25×" }, - { speed: 1.5, label: "1.5×" }, - { speed: 2, label: "2×" }, - { speed: 2.5, label: "2.5×" }, - { speed: 3, label: "3×" }, - { speed: 4, label: "4×" }, - { speed: 5, label: "5×" }, - { speed: 8, label: "8×" }, - { speed: 10, label: "10×" }, - { speed: 15, label: "15×" }, - { speed: 20, label: "20×" }, - { speed: 30, label: "30×" }, - ].map((option) => { - const isActive = selectedClipSpeed === option.speed; - return ( - - ); - })} -
- -
- {tSettings("audio.title", "Audio")} - -
-
- - {tSettings("clip.mute", "Mute")} - -

- {selectedClipMuted - ? tSettings("clip.mutedState", "Audio is muted") - : tSettings("clip.unmutedState", "Audio is playing")} -

-
- onClipMutedChange?.(v)} - className="data-[state=checked]:bg-[#06b6d4] scale-75" - /> -
- {hasClipSourceAudio && ( -
- - {tSettings( - "clip.separateClipFromAudio", - "Separate clip from audio", - )} - - onClipShowSourceAudioChange?.(v)} - className="data-[state=checked]:bg-[#06b6d4] scale-75" - /> -
- )} -
- - {selectedClipId && hasClipSourceAudio && sourceAudioTrackMeta.length > 0 && ( -
- {sourceAudioTrackMeta.map((track) => { - const settings = sourceAudioTrackSettings[track.id] ?? { - volume: 1, - normalize: false, - }; - return ( -
-
- - {track.label} - - -
-
- - {tSettings("audio.normalize", "Normalize")} - - - onSourceAudioTrackNormalizeChange?.(track.id, v) - } - className="data-[state=checked]:bg-[#06b6d4] scale-75" - /> -
- - onSourceAudioTrackVolumeChange?.(track.id, v) - } - formatValue={(v) => `${Math.round(v * 100)}%`} - parseInput={(text) => - parseFloat(text.replace(/%$/, "")) / 100 - } - /> -
- ); - })} -
- )} +
+ {tSettings("clip.title", "Clip")} + onClipSpeedChange?.(value)} + formatValue={(value) => `${value}×`} + parseInput={(text) => Number.parseFloat(text)} + /> +
); diff --git a/src/components/video-editor/VideoEditor.tsx b/src/components/video-editor/VideoEditor.tsx index 6d22666a..636da92c 100644 --- a/src/components/video-editor/VideoEditor.tsx +++ b/src/components/video-editor/VideoEditor.tsx @@ -342,7 +342,6 @@ export default function VideoEditor() { activeEffectSection, appearance, timeline, - audio, zoomCommands, clipCommands, audioCommands, diff --git a/src/components/video-editor/layout/useEditorSettingsPanelProps.ts b/src/components/video-editor/layout/useEditorSettingsPanelProps.ts index 5ea46b49..08761190 100644 --- a/src/components/video-editor/layout/useEditorSettingsPanelProps.ts +++ b/src/components/video-editor/layout/useEditorSettingsPanelProps.ts @@ -1,6 +1,5 @@ import type { ComponentProps, Dispatch, SetStateAction } from "react"; import type { AspectRatio } from "@/utils/aspectRatioUtils"; -import type { useVideoEditorAudio } from "../audio/useVideoEditorAudio"; import type { useAutoCaptionController } from "../captions/useAutoCaptionController"; import type { useAnnotationRegionCommands } from "../hooks/useAnnotationRegionCommands"; import type { useAudioRegionCommands } from "../hooks/useAudioRegionCommands"; @@ -16,7 +15,6 @@ type Input = { activeEffectSection: EditorEffectSection; appearance: ReturnType; timeline: ReturnType; - audio: ReturnType; zoomCommands: ReturnType; clipCommands: ReturnType; audioCommands: ReturnType; @@ -45,7 +43,6 @@ export function useEditorSettingsPanelProps(input: Input): ComponentProps