diff --git a/src/renderer/src/App.tsx b/src/renderer/src/App.tsx index 0464619c..c6e9eb2c 100644 --- a/src/renderer/src/App.tsx +++ b/src/renderer/src/App.tsx @@ -2629,6 +2629,7 @@ function App() { visible={lastCommandsVisible} onTogglePress={toggleLastCommands} ffmpegCommandLog={ffmpegCommandLog} + setFfmpegCommandLog={setFfmpegCommandLog} /> diff --git a/src/renderer/src/LastCommandsSheet.tsx b/src/renderer/src/LastCommandsSheet.tsx index cc98f90e..1f8d2ffe 100644 --- a/src/renderer/src/LastCommandsSheet.tsx +++ b/src/renderer/src/LastCommandsSheet.tsx @@ -1,25 +1,35 @@ -import { memo } from 'react'; +import { Dispatch, memo, SetStateAction } from 'react'; import { useTranslation } from 'react-i18next'; +import { DateTime } from 'luxon'; +import sortBy from 'lodash/sortBy.js'; import CopyClipboardButton from './components/CopyClipboardButton'; import Sheet from './components/Sheet'; import { FfmpegCommandLog } from './types'; +import Button from './components/Button'; -function LastCommandsSheet({ visible, onTogglePress, ffmpegCommandLog }: { - visible: boolean, onTogglePress: () => void, ffmpegCommandLog: FfmpegCommandLog, +function LastCommandsSheet({ visible, onTogglePress, ffmpegCommandLog, setFfmpegCommandLog }: { + visible: boolean, + onTogglePress: () => void, + ffmpegCommandLog: FfmpegCommandLog, + setFfmpegCommandLog: Dispatch>, }) { const { t } = useTranslation(); return ( - +

{t('Last ffmpeg commands')}

{ffmpegCommandLog.length > 0 ? (
- {ffmpegCommandLog.reverse().map(({ command }, i) => ( + + + {sortBy(ffmpegCommandLog, (l) => -l.time).map(({ command, time }, i) => ( // eslint-disable-next-line react/no-array-index-key -
- {command} +
+ + {DateTime.fromJSDate(time).toLocaleString(DateTime.TIME_WITH_SECONDS)} + {command}
))}