♻️ Move export option definition to their components

app/src/pages/Editor/ExportDocumentDialog.tsx

@@ -1,60 +1,25 @@
-import React, { MutableRefObject, useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { RootState } from '../../state';
 import { useDispatch, useSelector, useStore } from 'react-redux';
 import { setExportPopup } from '../../state/editor';
 import path from 'path';
 import { FilePickerWithText } from '../../components/FilePicker';
-import { FileFilter } from 'electron';
 import { toast } from 'react-hot-toast';
 import { Document } from '../../core/document';
 import { assertSome, switchExtension } from '../../util';
 import { Button, Combobox, Dialog, FormField, majorScale } from 'evergreen-ui';
-import { Video } from './ExportOptions/Video';
-import { Otio } from './ExportOptions/Otio';
-import { Audio } from './ExportOptions/Audio';
-import { Subtitles } from './ExportOptions/Subtitles';
+import { exportDefinition as audioExportDefinition } from './ExportOptions/Audio';
+import { exportDefinition as videoExportDefinition } from './ExportOptions/Video';
+import { exportDefinition as otioExportDefinition } from './ExportOptions/Otio';
+import { exportDefinition as subtitleExportDefinition } from './ExportOptions/Subtitles';
 import { getHomePath } from '../../../main_process/ipc/ipc_client';
+import { ExportType } from './ExportOptions';
 
-type ExportType = {
-  type: string;
-  defaultExtension: string;
-  filters: FileFilter[];
-  // We pass a ref as onExport which the function will set to its export function
-  component: (props: {
-    exportCallbackRef: MutableRefObject<(document: Document, path: string) => Promise<void>>;
-    outputPath: string;
-    setOutputPath: (path: string) => void;
-  }) => JSX.Element;
-};
-
-const exportValues: (ExportType & { filters: FileFilter[] })[] = [
-  {
-    type: 'audio',
-    defaultExtension: '.mp3',
-    filters: [{ name: 'Audio Files', extensions: ['mp3', 'wav', 'ogg', 'wma', 'aac'] }],
-    component: Audio,
-  },
-  {
-    type: 'video',
-    defaultExtension: '.mp4',
-    filters: [{ name: 'Video Files', extensions: ['mp4', 'mkv', 'gif'] }],
-    component: Video,
-  },
-  {
-    type: 'OpenTimelineIO',
-    defaultExtension: '_proj',
-    filters: [],
-    component: Otio,
-  },
-  {
-    type: 'Subtitles',
-    defaultExtension: '.vtt',
-    filters: [
-      { name: 'WebVTT Files', extensions: ['vtt'] },
-      { name: 'SRT Files', extensions: ['srt'] },
-    ],
-    component: Subtitles,
-  },
+const exportValues: ExportType[] = [
+  audioExportDefinition,
+  videoExportDefinition,
+  otioExportDefinition,
+  subtitleExportDefinition,
 ];
 
 export function ExportDocumentDialog(): JSX.Element {

app/src/pages/Editor/ExportOptions/Audio.tsx

@@ -1,6 +1,14 @@
 import React, { MutableRefObject } from 'react';
 import { DocumentGenerator, Document } from '../../../core/document';
 import { exportAudio } from '../../../core/ffmpeg';
+import { ExportType } from './index';
+
+export const exportDefinition: ExportType = {
+  type: 'audio',
+  defaultExtension: '.mp3',
+  filters: [{ name: 'Audio Files', extensions: ['mp3', 'wav', 'ogg', 'wma', 'aac'] }],
+  component: Audio,
+};
 
 export function Audio({
   exportCallbackRef,

app/src/pages/Editor/ExportOptions/Otio.tsx

@@ -6,6 +6,14 @@ import { assertSome } from '../../../util';
 import { useSelector, useStore } from 'react-redux';
 import { exportOtio } from '../../../core/otio';
 import path from 'path';
+import { ExportType } from './index';
+
+export const exportDefinition: ExportType = {
+  type: 'OpenTimelineIO',
+  defaultExtension: '_proj',
+  filters: [],
+  component: Otio,
+};
 
 export function Otio({
   exportCallbackRef,

app/src/pages/Editor/ExportOptions/Subtitles.tsx

@@ -6,6 +6,17 @@ import { useSelector } from 'react-redux';
 import { RootState } from '../../../state';
 import { SubtitleFormat } from '@audapolis/webvtt-writer';
 import { switchExtension } from '../../../util';
+import { ExportType } from './index';
+
+export const exportDefinition: ExportType = {
+  type: 'Subtitles',
+  defaultExtension: '.vtt',
+  filters: [
+    { name: 'WebVTT Files', extensions: ['vtt'] },
+    { name: 'SRT Files', extensions: ['srt'] },
+  ],
+  component: Subtitles,
+};
 
 export function Subtitles({
   exportCallbackRef,

app/src/pages/Editor/ExportOptions/Video.tsx

@@ -14,6 +14,14 @@ import { player } from '../../../core/player';
 import { DocumentGenerator, Document } from '../../../core/document';
 import { exportVideo, isSeperateSubtitleTrackSupported } from '../../../core/ffmpeg';
 import { contentToVtt } from '../../../core/webvtt';
+import { ExportType } from './index';
+
+export const exportDefinition: ExportType = {
+  type: 'video',
+  defaultExtension: '.mp4',
+  filters: [{ name: 'Video Files', extensions: ['mp4', 'mkv', 'gif'] }],
+  component: Video,
+};
 
 export function Video({
   exportCallbackRef,

app/src/pages/Editor/ExportOptions/index.ts

@@ -0,0 +1,15 @@
+import { FileFilter } from 'electron';
+import { MutableRefObject } from 'react';
+import { Document } from '../../../core/document';
+
+export type ExportType = {
+  type: string;
+  defaultExtension: string;
+  filters: FileFilter[];
+  // We pass a ref as onExport which the type specific export component will set to its export function
+  component: (props: {
+    exportCallbackRef: MutableRefObject<(document: Document, path: string) => Promise<void>>;
+    outputPath: string;
+    setOutputPath: (path: string) => void;
+  }) => JSX.Element;
+};