fixup! finished settings fragment and fixed layout problem of feature…

… settings
eric2788 · Mar 28, 2024 · 413da5c · 413da5c
1 parent 6f3dad5
commit 413da5c
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 16 deletions.
diff --git a/src/features/recorder/components/RecorderLayer.tsx b/src/features/recorder/components/RecorderLayer.tsx
@@ -16,7 +16,7 @@ export type RecorderLayerProps = {
 function RecorderLayer(props: RecorderLayerProps): JSX.Element {
 
  const { urls } = props
- const { duration, hotkeyClip, mechanism } = useContext(RecorderFeatureContext)
+ const { duration, hotkeyClip, recordFix } = useContext(RecorderFeatureContext)
 
  const chunks = useRef<Blob[]>([])
 
@@ -48,9 +48,9 @@ function RecorderLayer(props: RecorderLayerProps): JSX.Element {
  useKeyDown(hotkeyClip.key, async (e) => {
  if (e.ctrlKey !== hotkeyClip.ctrlKey) return
  if (e.shiftKey !== hotkeyClip.shiftKey) return
- toast.info('修复视频中...')
+ toast.info('编译视频中...')
  const original = new Blob([ ...chunks.current ], { type: 'video/mp4' })
- const fixed = await fixCorrupted(original)
+ const fixed = await fixCorrupted(original, 'mp4', recordFix === 'copy')
  toast.info('下載視頻中...')
  downloadBlob(new Blob([fixed], { type: 'video/mp4' }), 'clip.mp4')
  })

diff --git a/src/settings/features/recorder/index.tsx b/src/settings/features/recorder/index.tsx
@@ -12,13 +12,13 @@ export const define: FeatureSettingsDefinition = {
 
 export type FeatureSettingSchema = {
  duration: number
- mechanism: 'ffmpeg' | 'fetch-buffer'
+ recordFix: 'copy' | 'reencode'
  hotkeyClip: HotKey
 }
 
 export const defaultSettings: Readonly<FeatureSettingSchema> = {
  duration: 10,
- mechanism: 'ffmpeg',
+ recordFix: 'copy',
  hotkeyClip: {
  key: 'z',
  ctrlKey: true,
@@ -36,17 +36,17 @@ export function RecorderFeatureSettings({ state, useHandler }: StateProxy<Featur
 
  return (
  <Fragment>
- <Selector<typeof state.mechanism>
- label="录制方式"
- value={state.mechanism}
- onChange={e => state.mechanism = e}
+ <Selector<typeof state.recordFix>
+ label="录制后编译方式"
+ value={state.recordFix}
+ onChange={e => state.recordFix = e}
  options={[
- { value: 'ffmpeg', label: 'FFmpeg' },
- { value: 'fetch-buffer', label: 'Fetch Buffer' }
+ { value: 'copy', label: '快速编译 (可能不完整)' },
+ { value: 'reencode', label: '完整编译 (速度极慢)' }
  ]}
  />
  <Selector<number>
- label="录制时长"
+ label="录制方式"
  value={state.duration}
  onChange={e => state.duration = e}
  options={[

diff --git a/src/utils/ffmpeg.ts b/src/utils/ffmpeg.ts
@@ -24,17 +24,16 @@ export async function getFFmpeg(): Promise<FFmpeg> {
  return ffmpeg
 }
 
-
-
-export async function fixCorrupted(input: Blob, ext: string = 'mp4'): Promise<ArrayBufferLike> {
+export async function fixCorrupted(input: Blob, ext: string = 'mp4', copy: boolean = true): Promise<ArrayBufferLike> {
  await ensureInit()
 
+ const option = copy ? ['-c', 'copy'] : []
  const inputFile = `input.${ext}`
  const outputFile = `output.${ext}`
 
  const original = await input.arrayBuffer()
  await ffmpeg.writeFile(inputFile, new Uint8Array(original))
- await ffmpeg.exec(['-i', inputFile, '-c', 'copy', outputFile])
+ await ffmpeg.exec(['-i', inputFile, ...option, outputFile])
  const data = await ffmpeg.readFile(outputFile)
  return (data as Uint8Array).buffer
 }