Start linting with eslint

src/global.d.ts

@@ -1 +0,0 @@
-declare module "*.mp3";

src/lib/js/index.ts

@@ -1,8 +1,8 @@
 document.addEventListener("DOMContentLoaded", () => {
-    let flashButtons = document.querySelectorAll(".notification .delete");
+    const flashButtons = document.querySelectorAll(".notification .delete");
 
     flashButtons.forEach((button) => {
-        let flash = button.parentNode;
+        const flash = button.parentNode;
 
         if (flash == null) {
             console.error(

src/music/Mseq_-_Journey.mp3.d.ts

@@ -0,0 +1,2 @@
+declare const mseq: string;
+export default mseq;

src/music/MusicPlayer.tsx

@@ -56,7 +56,7 @@ class MusicPlayer extends React.Component<MusicPlayerProps, State> {
         );
     }
 
-    componentDidUpdate() {
+    async componentDidUpdate() {
         const context = this.audioState.audioContext;
         const source = this.audioState.audioSource;
         const volume = this.audioState.audioVolume;
@@ -73,16 +73,16 @@ class MusicPlayer extends React.Component<MusicPlayerProps, State> {
             // before we can actually play.
             //
             // Luckily, this has no adverse effects on Firefox.
-            context.resume().then(() => {
-                source
-                    .play()
-                    .then(() => {
-                        console.info("Started playing audio");
-                    })
-                    .catch((error) => {
-                        console.error(`Could not play audio: ${error}`);
-                    });
-            });
+            try {
+                await context.resume();
+                await source.play();
+            } catch (error) {
+                if (error instanceof DOMException) {
+                    console.error(`Could not play audio: ${error.message}`);
+                } else {
+                    throw error;
+                }
+            }
         } else {
             source.pause();
         }

src/music/components/indicator.tsx

@@ -17,10 +17,6 @@ type IndicatorDispatch = {
 type Props = IndicatorProps & IndicatorDispatch;
 
 class Indicator extends React.Component<Props, State> {
-    click() {
-        this.props.play();
-    }
-
     render() {
         const button_classes = classNames({
             button: true,
@@ -40,7 +36,7 @@ class Indicator extends React.Component<Props, State> {
         return (
             <button
                 type="button"
-                onClick={this.click.bind(this)}
+                onClick={this.click}
                 className={button_classes}
             >
                 <span className="icon is-medium">
@@ -49,6 +45,10 @@ class Indicator extends React.Component<Props, State> {
             </button>
         );
     }
+
+    click = () => {
+        this.props.play();
+    };
 }
 
 function mapStateToProps(state: State): IndicatorProps {

src/music/components/visualizer.tsx

@@ -35,7 +35,7 @@ class CanvasDrawer {
         this.scene = new three.Scene();
 
         // Make a bunch of boxes to represent the bars
-        this.boxes = Array(analyser.frequencyBinCount);
+        this.boxes = new Array(analyser.frequencyBinCount) as Array<three.Mesh>;
         const width = 2 / analyser.frequencyBinCount;
         for (let freq = 0; freq < analyser.frequencyBinCount; freq++) {
             const geometry = new three.BoxGeometry(1, 1, 1);
@@ -83,31 +83,13 @@ class CanvasDrawer {
         this.renderer.setSize(canvas.width, canvas.height, false);
 
         // Set up canvas resizing
-        window.addEventListener("resize", this.resize.bind(this));
+        window.addEventListener("resize", this.resize);
 
         // Run the first, set the first animation frame time and start requesting
         // animation frames
         this.resize();
         this.lastTime = 0;
-        this.animationFrame = requestAnimationFrame(this.render.bind(this));
-    }
-
-    render(time: number) {
-        // Set our animation frame to 0, so that if we stop, we don't try to cancel a past animation frame
-        this.animationFrame = 0;
-        // Update elapsed time
-        const elapsed = time - this.lastTime;
-        this.lastTime = time;
-
-        const camera = this.camera;
-        const renderer = this.renderer;
-        const scene = this.scene;
-
-        this.scaleBoxes();
-        this.rotateCamera(elapsed);
-
-        renderer.render(scene, camera);
-        this.animationFrame = requestAnimationFrame(this.render.bind(this));
+        this.animationFrame = requestAnimationFrame(this.render);
     }
 
     scaleBoxes() {
@@ -145,7 +127,31 @@ class CanvasDrawer {
         camera.lookAt(0, 0, 0);
     }
 
-    resize() {
+    stop() {
+        if (this.animationFrame != 0) {
+            cancelAnimationFrame(this.animationFrame);
+        }
+    }
+
+    render = (time: number) => {
+        // Set our animation frame to 0, so that if we stop, we don't try to cancel a past animation frame
+        this.animationFrame = 0;
+        // Update elapsed time
+        const elapsed = time - this.lastTime;
+        this.lastTime = time;
+
+        const camera = this.camera;
+        const renderer = this.renderer;
+        const scene = this.scene;
+
+        this.scaleBoxes();
+        this.rotateCamera(elapsed);
+
+        renderer.render(scene, camera);
+        this.animationFrame = requestAnimationFrame(this.render);
+    };
+
+    resize = () => {
         const canvas = this.canvas;
 
         if (canvas.parentElement === null) {
@@ -166,19 +172,13 @@ class CanvasDrawer {
         canvas.height = 0;
         canvas.width = 0;
 
-        let height = canvas.parentElement.clientHeight;
-        let width = canvas.parentElement.clientWidth;
+        const height = canvas.parentElement.clientHeight;
+        const width = canvas.parentElement.clientWidth;
 
         this.camera.aspect = width / height;
         this.camera.updateProjectionMatrix();
         this.renderer.setSize(width, height, false);
-    }
-
-    stop() {
-        if (this.animationFrame != 0) {
-            cancelAnimationFrame(this.animationFrame);
-        }
-    }
+    };
 }
 
 class Visualizer extends React.Component<VisualizerProps, State> {

src/music/index.tsx

@@ -9,7 +9,11 @@ import mseq from "./Mseq_-_Journey.mp3";
 
 const rootElement = document.getElementById("playerUI");
 
-const root = createRoot(rootElement!);
+if (rootElement === null) {
+    throw Error("DOM seems to have failed to load. Something went very wrong.");
+}
+
+const root = createRoot(rootElement);
 root.render(
     <Provider store={store}>
         <MusicPlayer />

src/music/store/index.ts

@@ -13,7 +13,7 @@ const rootReducer = combineReducers<State>({
 
 export const store = createStore(
     rootReducer,
-    // @ts-ignore - These properties are set by the devtools extension
+    // @ts-expect-error - These properties are set by the devtools extension
     window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
 );
 

src/music/store/music/reducers.ts

@@ -26,24 +26,24 @@ const initialState: MusicState = {
 
 export const musicStateReducer = createReducer<MusicState>(
     {
-        // @ts-ignore - These appear to be working, even if functions
+        // @ts-expect-error - These appear to be working, even if functions
         // are technically prohibited, and were recommended upstream
         [setTitle]: (state: MusicState, title: Title): MusicState => {
             return update(state, {
                 title: { $set: title },
             });
         },
-        // @ts-ignore - These appear to be working, even if functions
+        // @ts-expect-error - These appear to be working, even if functions
         // are technically prohibited, and were recommended upstream
         [togglePlay]: (state: MusicState): MusicState => {
             return update(state, { $toggle: ["playing"] });
         },
-        // @ts-ignore - These appear to be working, even if functions
+        // @ts-expect-error - These appear to be working, even if functions
         // are technically prohibited, and were recommended upstream
         [toggleMute]: (state: MusicState): MusicState => {
             return update(state, { $toggle: ["muted"] });
         },
-        // @ts-ignore - These appear to be working, even if functions
+        // @ts-expect-error - These appear to be working, even if functions
         // are technically prohibited, and were recommended upstream
         [setSource]: (state: MusicState, source: string): MusicState => {
             return update(state, { source: { $set: source } });