From 8f1b6c1c5ef8edfdc2ddf994605d05ba4dac4a2a Mon Sep 17 00:00:00 2001 From: Stefano Brilli Date: Tue, 27 Jul 2021 11:37:33 +0200 Subject: [PATCH] fix: bugs, cosmetic changes, and optimizations --- src/components/main-rows.tsx | 8 ++++++-- src/components/main.tsx | 4 ++-- src/components/rename-dialog.tsx | 28 ++++++++++++++++++---------- src/services/netmd-mock.ts | 6 +++--- src/services/netmd.ts | 22 +++++++++++++++------- 5 files changed, 44 insertions(+), 24 deletions(-) diff --git a/src/components/main-rows.tsx b/src/components/main-rows.tsx index d500d0d..07c5258 100644 --- a/src/components/main-rows.tsx +++ b/src/components/main-rows.tsx @@ -18,7 +18,7 @@ import DeleteIcon from '@material-ui/icons/Delete'; import { DraggableProvided } from 'react-beautiful-dnd'; -const useStyles = makeStyles((theme: any) => ({ +const useStyles = makeStyles(theme => ({ currentTrackRow: { color: theme.palette.primary.main, '& > td': { @@ -66,6 +66,10 @@ const useStyles = makeStyles((theme: any) => ({ durationCell: { whiteSpace: 'nowrap', }, + durationCellSecondary: { + whiteSpace: 'nowrap', + color: theme.palette.text.secondary, + }, durationCellTime: { verticalAlign: 'middle', }, @@ -191,7 +195,7 @@ export function GroupRow({ group, onRename, onDelete }: GroupRowProps) { {group.fullWidthTitle ? `${group.fullWidthTitle} / ` : ``} {group.title || `No Name`} - + {formatTimeFromFrames( group.tracks.map(n => n.duration).reduce((a, b) => a + b), diff --git a/src/components/main.tsx b/src/components/main.tsx index 51483d2..73a749f 100644 --- a/src/components/main.tsx +++ b/src/components/main.tsx @@ -137,8 +137,8 @@ function isCurrentTrack(track: Track, deviceStatus: DeviceStatus | null) { export const Main = (props: {}) => { let dispatch = useDispatch(); - let disc = useShallowEqualSelector(state => state.main.disc); - let deviceName = useShallowEqualSelector(state => state.main.deviceName); + const disc = useShallowEqualSelector(state => state.main.disc); + const deviceName = useShallowEqualSelector(state => state.main.deviceName); const deviceStatus = useShallowEqualSelector(state => state.main.deviceStatus); const { vintageMode } = useShallowEqualSelector(state => state.appState); diff --git a/src/components/rename-dialog.tsx b/src/components/rename-dialog.tsx index d306810..6d2341f 100644 --- a/src/components/rename-dialog.tsx +++ b/src/components/rename-dialog.tsx @@ -42,11 +42,12 @@ export const RenameDialog = (props: {}) => { const what = renameDialogGroupIndex !== null ? `Group` : renameDialogIndex < 0 ? `Disc` : `Track`; - const handleCancelRename = () => { + const handleCancelRename = useCallback(() => { dispatch(renameDialogActions.setVisible(false)); - }; + }, [dispatch]); - const handleDoRename = () => { + const handleDoRename = useCallback(() => { + console.log(renameDialogGroupIndex, renameDialogIndex); if (renameDialogGroupIndex !== null) { // Just rename the group with this range dispatch( @@ -73,7 +74,7 @@ export const RenameDialog = (props: {}) => { ); } handleCancelRename(); // Close the dialog - }; + }, [dispatch, handleCancelRename, renameDialogFullWidthTitle, renameDialogGroupIndex, renameDialogIndex, renameDialogTitle]); const handleChange = useCallback( (event: React.ChangeEvent) => { @@ -89,6 +90,17 @@ export const RenameDialog = (props: {}) => { [dispatch] ); + const handleEnterKeyEvent = useCallback( + (event: React.KeyboardEvent) => { + if (event.key === `Enter`) { + event.stopPropagation(); + event.preventDefault(); + handleDoRename(); + } + }, + [handleDoRename] + ); + const { vintageMode } = useShallowEqualSelector(state => state.appState); if (vintageMode) { const p = { @@ -121,9 +133,7 @@ export const RenameDialog = (props: {}) => { type="text" fullWidth value={renameDialogTitle} - onKeyDown={event => { - event.key === `Enter` && handleDoRename(); - }} + onKeyDown={handleEnterKeyEvent} onChange={handleChange} /> {allowFullWidth && ( @@ -134,9 +144,7 @@ export const RenameDialog = (props: {}) => { fullWidth className={classes.marginUpDown} value={renameDialogFullWidthTitle} - onKeyDown={event => { - event.key === `Enter` && handleDoRename(); - }} + onKeyDown={handleEnterKeyEvent} onChange={handleFullWidthChange} /> )} diff --git a/src/services/netmd-mock.ts b/src/services/netmd-mock.ts index 8871b1c..5e1e97e 100644 --- a/src/services/netmd-mock.ts +++ b/src/services/netmd-mock.ts @@ -140,8 +140,8 @@ class NetMDMockService implements NetMDService { return JSON.parse(JSON.stringify(this._getDisc())); } - async renameGroup(groupBegin: number, newName: string, newFullWidth?: string) { - let group = this._groupsDef.slice(1).find(n => n.index === groupBegin); + async renameGroup(gropuIndex: number, newName: string, newFullWidth?: string) { + let group = this._groupsDef.slice(1).find(n => n.index === gropuIndex); if (!group) { return; } @@ -328,7 +328,7 @@ class NetMDMockService implements NetMDService { @asyncMutex async pause() { - console.log('pause'); + this._status.state = 'paused'; } @asyncMutex diff --git a/src/services/netmd.ts b/src/services/netmd.ts index 4b675d0..9d94970 100644 --- a/src/services/netmd.ts +++ b/src/services/netmd.ts @@ -96,7 +96,6 @@ export class NetMDUSBService implements NetMDService { } private async listContentUsingCache() { - // listContent takes a long time to execute (>3000ms), so I think caching it should speed up the app if (!this.cachedContentList) { console.log("There's no cached version of the TOC, caching"); this.cachedContentList = await listContent(this.netmdInterface!); @@ -173,13 +172,17 @@ export class NetMDUSBService implements NetMDService { } @asyncMutex - async renameGroup(groupBegin: number, newName: string, newFullWidthName?: string) { + async renameGroup(groupIndex: number, newName: string, newFullWidthName?: string) { const disc = await this.listContentUsingCache(); - let thisGroup = disc.groups.find(n => n.tracks[0].index === groupBegin); - if (!thisGroup) return; + let thisGroup = disc.groups.find(g => g.index === groupIndex); + if (!thisGroup) { + return; + } thisGroup.title = newName; - if (newFullWidthName !== undefined) thisGroup.fullWidthTitle = newFullWidthName; + if (newFullWidthName !== undefined) { + thisGroup.fullWidthTitle = newFullWidthName; + } await this.writeRawTitles(compileDiscTitles(disc)); } @@ -187,7 +190,10 @@ export class NetMDUSBService implements NetMDService { async addGroup(groupBegin: number, groupLength: number, title: string) { const disc = await this.listContentUsingCache(); let ungrouped = disc.groups.find(n => n.title === null); - if (!ungrouped) return; // You can only group tracks that aren't already in a different group, if there's no such tracks, there's no point to continue + if (!ungrouped) { + return; // You can only group tracks that aren't already in a different group, if there's no such tracks, there's no point to continue + } + let ungroupedLengthBeforeGroup = ungrouped.tracks.length; let thisGroupTracks = ungrouped.tracks.filter(n => n.index >= groupBegin && n.index < groupBegin + groupLength); @@ -200,12 +206,14 @@ export class NetMDUSBService implements NetMDService { if (!isSequential(thisGroupTracks.map(n => n.index))) { throw new Error('Invalid sequence of tracks!'); } + disc.groups.push({ title, fullWidthTitle: '', - index: groupBegin, + index: disc.groups.length, tracks: thisGroupTracks, }); + disc.groups = disc.groups.filter(g => g.tracks.length !== 0).sort((a, b) => a.tracks[0].index - b.tracks[0].index); await this.writeRawTitles(compileDiscTitles(disc)); }