Merge titleSource and titleFormat UI controls

src/components/convert-dialog.tsx

@@ -49,7 +49,8 @@ const useStyles = makeStyles(theme => ({
         flexDirection: 'column',
     },
     titleFormControl: {
-        marginTop: theme.spacing(1),
+        minWidth: 170,
+        marginTop: 4,
     },
 }));
 
@@ -57,7 +58,7 @@ export const ConvertDialog = (props: { files: File[] }) => {
     const dispatch = useDispatch();
     const classes = useStyles();
 
-    let { visible, format, titleSource, titleFormat } = useShallowEqualSelector(state => state.convertDialog);
+    let { visible, format, titleFormat } = useShallowEqualSelector(state => state.convertDialog);
 
     const handleClose = useCallback(() => {
         dispatch(convertDialogActions.setVisible(false));
@@ -73,16 +74,6 @@ export const ConvertDialog = (props: { files: File[] }) => {
         [dispatch]
     );
 
-    const handleChangeTitleSource = useCallback(
-        (ev, newTitleSource) => {
-            if (newTitleSource === null) {
-                return;
-            }
-            dispatch(convertDialogActions.setTitleSource(newTitleSource));
-        },
-        [dispatch]
-    );
-
     const handleChangeTitleFormat = useCallback(
         (event: React.ChangeEvent<{ value: any }>) => {
             dispatch(convertDialogActions.setTitleFormat(event.target.value));
@@ -92,8 +83,8 @@ export const ConvertDialog = (props: { files: File[] }) => {
 
     const handleConvert = useCallback(() => {
         handleClose();
-        dispatch(convertAndUpload(props.files, format, titleSource, titleFormat));
-    }, [dispatch, props, format, titleSource, titleFormat, handleClose]);
+        dispatch(convertAndUpload(props.files, format, titleFormat));
+    }, [dispatch, props, format, titleFormat, handleClose]);
 
     return (
         <Dialog
@@ -127,25 +118,16 @@ export const ConvertDialog = (props: { files: File[] }) => {
                         <Typography component="label" variant="caption" color="textSecondary">
                             Track title
                         </Typography>
-                        <ToggleButtonGroup value={titleSource} exclusive onChange={handleChangeTitleSource} size="small">
-                            <ToggleButton className={classes.toggleButton} value="file">
-                                Filename
-                            </ToggleButton>
-                            <ToggleButton className={classes.toggleButton} value="media">
-                                Media tags
-                            </ToggleButton>
-                        </ToggleButtonGroup>
-                    </FormControl>
-                    {titleSource === 'media' ? (
                         <FormControl className={classes.titleFormControl}>
                             <Select value={titleFormat} color="secondary" input={<Input />} onChange={handleChangeTitleFormat}>
+                                <MenuItem value={`filename`}>Filename</MenuItem>
                                 <MenuItem value={`title`}>Title</MenuItem>
                                 <MenuItem value={`album-title`}>Album - Title</MenuItem>
                                 <MenuItem value={`artist-title`}>Artist - Title</MenuItem>
                                 <MenuItem value={`artist-album-title`}>Artist - Album - Title</MenuItem>
                             </Select>
                         </FormControl>
-                    ) : null}
+                    </FormControl>
                 </div>
             </DialogContent>
             <DialogActions>

src/redux/actions.ts

@@ -11,7 +11,7 @@ import { Wireformat, getTracks } from 'netmd-js';
 import { AnyAction } from '@reduxjs/toolkit';
 import { getAvailableCharsForTrackTitle, framesToSec, sleepWithProgressCallback, sleep } from '../utils';
 import * as mm from 'music-metadata-browser';
-import { TitleSourceType, TitleFormatType, UploadFormat } from './convert-dialog-feature';
+import { TitleFormatType, UploadFormat } from './convert-dialog-feature';
 
 export function control(action: 'play' | 'stop' | 'next' | 'prev' | 'goto', params?: unknown) {
     return async function(dispatch: AppDispatch, getState: () => RootState) {
@@ -261,10 +261,13 @@ async function getTrackNameFromMediaTags(file: File, titleFormat: TitleFormatTyp
         case 'artist-album-title': {
             return `${artist} - ${album} - ${title}`;
         }
+        case 'filename': {
+            return file.name;
+        }
     }
 }
 
-export function convertAndUpload(files: File[], format: UploadFormat, titleSource: TitleSourceType, titleFormat: TitleFormatType) {
+export function convertAndUpload(files: File[], format: UploadFormat, titleFormat: TitleFormatType) {
     return async function(dispatch: AppDispatch, getState: () => RootState) {
         const { audioExportService, netmdService } = serviceRegistry;
         const wireformat = WireformatDict[format];
@@ -356,12 +359,10 @@ export function convertAndUpload(files: File[], format: UploadFormat, titleSourc
             const { file, data } = item;
 
             let title = file.name;
-            if (titleSource === 'media') {
-                try {
-                    title = (await getTrackNameFromMediaTags(file, titleFormat)) ?? file.name;
-                } catch (err) {
-                    console.error(err);
-                }
+            try {
+                title = await getTrackNameFromMediaTags(file, titleFormat);
+            } catch (err) {
+                console.error(err);
             }
 
             const extStartIndex = title.lastIndexOf('.');

src/redux/convert-dialog-feature.ts

@@ -2,22 +2,19 @@ import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 import { enableBatching } from 'redux-batched-actions';
 import { savePreference, loadPreference } from '../utils';
 
-export type TitleSourceType = 'file' | 'media';
-export type TitleFormatType = 'title' | 'album-title' | 'artist-title' | 'artist-album-title';
+export type TitleFormatType = 'filename' | 'title' | 'album-title' | 'artist-title' | 'artist-album-title';
 export type UploadFormat = 'SP' | 'LP2' | 'LP4';
 
 export interface ConvertDialogFeature {
     visible: boolean;
     format: UploadFormat;
-    titleSource: TitleSourceType;
     titleFormat: TitleFormatType;
 }
 
 const initialState: ConvertDialogFeature = {
     visible: false,
     format: loadPreference('uploadFormat', 'LP2') as UploadFormat,
-    titleSource: loadPreference('trackTitleSource', 'file') as TitleSourceType,
-    titleFormat: loadPreference('trackTitleFormat', 'title') as TitleFormatType,
+    titleFormat: loadPreference('trackTitleFormat', 'filename') as TitleFormatType,
 };
 
 const slice = createSlice({
@@ -31,10 +28,6 @@ const slice = createSlice({
             state.format = action.payload;
             savePreference('uploadFormat', state.format);
         },
-        setTitleSource: (state, action: PayloadAction<TitleSourceType>) => {
-            state.titleSource = action.payload;
-            savePreference('trackTitleSource', state.titleSource);
-        },
         setTitleFormat: (state, action: PayloadAction<TitleFormatType>) => {
             state.titleFormat = action.payload;
             savePreference('trackTitleFormat', state.titleFormat);