mirrors
/
webminidisc
mirror of https://github.com/cybercase/webminidisc.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge titleSource and titleFormat UI controls

This commit is contained in:
Stefano Brilli 2021-01-22 17:09:54 +01:00
parent b79b1916d4
commit b80f72b051
3 changed files with 18 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/components/convert-dialog.tsx
View File

@ -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>

11
src/redux/actions.ts
View File

@ -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,13 +359,11 @@ 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;
title = await getTrackNameFromMediaTags(file, titleFormat);
} catch (err) {
console.error(err);
}
}
const extStartIndex = title.lastIndexOf('.');
if (extStartIndex > 0) {

11
src/redux/convert-dialog-feature.ts
View File

@ -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);