Minor fixes

src/components/controls.tsx

@@ -123,7 +123,7 @@ export const Controls = () => {
         message = 'READING TOC';
     } else if (tracks.length === 0) {
         message = `BLANKDISC`;
-    } else if (deviceStatus && deviceStatus.track !== null) {
+    } else if (deviceStatus && deviceStatus.track !== null && tracks[deviceStatus.track]) {
         message = `${deviceStatus.track + 1} - ` + tracks[deviceStatus.track].title;
     }
 

src/components/main.tsx

@@ -138,17 +138,21 @@ export const Main = (props: {}) => {
     let dispatch = useDispatch();
     let disc = useShallowEqualSelector(state => state.main.disc);
     let deviceName = useShallowEqualSelector(state => state.main.deviceName);
+    const { vintageMode } = useShallowEqualSelector(state => state.appState);
 
     const [selected, setSelected] = React.useState<number[]>([]);
     const selectedCount = selected.length;
 
     const [moveMenuAnchorEl, setMoveMenuAnchorEl] = React.useState<null | HTMLElement>(null);
-    const handleShowMoveMenu = useCallback((event: React.MouseEvent<HTMLButtonElement>) => {
-        setMoveMenuAnchorEl(event.currentTarget);
-    }, []);
+    const handleShowMoveMenu = useCallback(
+        (event: React.MouseEvent<HTMLButtonElement>) => {
+            setMoveMenuAnchorEl(event.currentTarget);
+        },
+        [setMoveMenuAnchorEl]
+    );
     const handleCloseMoveMenu = useCallback(() => {
         setMoveMenuAnchorEl(null);
-    }, []);
+    }, [setMoveMenuAnchorEl]);
     const handleMoveSelectedTrack = useCallback(
         (destIndex: number) => {
             dispatch(moveTrack(selected[0], destIndex));

src/components/rename-dialog.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { useDispatch } from 'react-redux';
 import { useShallowEqualSelector } from '../utils';
 import { actions as renameDialogActions } from '../redux/rename-dialog-feature';

src/index.css

@@ -8,3 +8,7 @@ body, html {
 #root {
     height: 100%;
 }
+
+div {
+    outline: none;
+}

src/redux/app-feature.ts

@@ -2,7 +2,7 @@ import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 import { enableBatching } from 'redux-batched-actions';
 import { savePreference, loadPreference } from '../utils';
 
-type Views = 'WELCOME' | 'MAIN';
+export type Views = 'WELCOME' | 'MAIN';
 
 export interface AppState {
     mainView: Views;

src/services/netmd-mock.ts

@@ -152,7 +152,13 @@ class NetMDMockService implements NetMDService {
             throw new Error(`Track's title too long`); // Simulates reject from device
         }
 
-        await sleep(0.5);
+        const totalSteps = 3;
+        for (let step = 0; step <= totalSteps; step++) {
+            const written = (100 / totalSteps) * step;
+            progressCallback({ written, encrypted: 100, total: 100 });
+            await sleep(1000);
+        }
+
         this._tracks.push({
             title,
             duration: 5 * 60 * 512,
@@ -161,7 +167,8 @@ class NetMDMockService implements NetMDService {
             protected: TrackFlag.unprotected,
             channel: 0,
         });
-        await sleep(0.5);
+
+        await sleep(1000);
         progressCallback({ written: 100, encrypted: 100, total: 100 });
     }