Frontend rewrite

.github/workflows/test.yml

@@ -0,0 +1,21 @@
+name: CI
+on: push
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Enable Corepack
+        run: corepack enable
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'yarn'
+      - name: Install modules
+        run: yarn install --immutable
+      - name: Run Jest tests
+        run: yarn test
+      - name: Run TypeScript type checker
+        run: yarn test:types
+      - name: Run Prettier formatting checker
+        run: yarn test:prettier

.gitignore

@@ -10,9 +10,19 @@
 /.npmrc
 /npm-debug.log
 /public/
+/.cache/
 /.parcel-cache/
 
-# Backend
+# Yarn
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
+
+# Composer
 /vendor/
 /.slim-cache/
 

.parcelrc

@@ -1,4 +1,4 @@
 {
-  "extends": ["@parcel/config-default"],
-  "reporters":  ["...", "parcel-reporter-static-files-copy"]
+    "extends": ["@parcel/config-default"],
+    "reporters":  ["...", "parcel-reporter-static-files-copy"],
 }

.prettierrc

@@ -0,0 +1,5 @@
+{
+    "singleQuote": true,
+    "jsxSingleQuote": false,
+    "tabWidth": 4
+}

.yarnrc.yml

@@ -0,0 +1,5 @@
+compressionLevel: mixed
+
+enableGlobalCache: false
+
+nodeLinker: node-modules

build.sh

@@ -11,21 +11,21 @@ if [ "$APP_ENV" == 'dev' ]; then
     fi
 
     composer install
-    npm install
+    yarn install
 
     if [ "$1" == '--serve' ]; then
         composer run dev-server & \
-        npm run dev-server
+        yarn run dev-server
         exit 0
     fi
 
-    npm run build
+    yarn run build
     exit 0
 fi
 
 echo "Building soundboard in production mode..."
 rm -rf .slim-cache
 composer install --no-dev --optimize-autoloader
-npm install
-BASE_URL=${BASE_URL:=/} npm run build-production
+yarn install
+BASE_URL=${BASE_URL:=/} yarn run build-production
 exit 0

frontend/@types/ogv.d.ts

@@ -0,0 +1,103 @@
+// TODO: Finish these types + create a PR on the ogv.js repository?
+
+declare module 'ogv' {
+    type OGVVersion = string;
+
+    interface OGVCompat {
+        supported(component: 'OGVDecoder' | 'OGVPlayer'): boolean;
+    }
+
+    interface OGVLoaderBase {
+        base: string | undefined;
+    }
+
+    interface OGVLoaderWeb extends OGVLoaderBase {}
+
+    class OGVMediaError {
+        code: number;
+        message: string;
+    }
+
+    class OGVJSElement extends HTMLElement {}
+
+    interface OGVPlayerOptions {
+        base?: string;
+        worker?: unknown;
+        webGL?: unknown;
+        forceWebGL?: unknown;
+        stream?: unknown;
+
+        audioContext?: AudioContext;
+        audioDestination?: AudioNode;
+        audioBackendFactory?: unknown;
+
+        // Experimental pthreads multithreading mode, if built.
+        threading?: unknown;
+        // Experimental SIMD mode, if built.
+        simd?: unknown;
+
+        debug?: boolean;
+        debugFilter?: RegExp;
+    }
+
+    class OGVPlayer extends OGVJSElement {
+        constructor(options: OGVPlayerOptions);
+
+        src: string;
+        readonly buffered: TimeRanges;
+        readonly seekable: TimeRanges;
+        currentTime: number;
+        readonly duration: number;
+        readonly paused: boolean;
+        readonly ended: boolean;
+        readonly seeking: boolean;
+        muted: boolean;
+        poster: string;
+        readonly videoWidth: number;
+        readonly ogvjsVideoFrameRate: number;
+        readonly ogvjsAudioChannels: number;
+        readonly ogvjsAudioSampleRate: number;
+        width: number;
+        height: number;
+        autoplay: boolean;
+        controls: boolean;
+        loop: boolean;
+        crossOrigin: string | null;
+        readonly currentSrc: string | null;
+        readonly defaultMuted: boolean;
+        readonly defaultPlaybackRate: number;
+        readonly error: OGVMediaError | null;
+        preload: string;
+        readonly readyState: number;
+        readonly networkState: number;
+        playbackRate: number;
+        readonly played: TimeRanges;
+        volume: number;
+
+        load(): void;
+        canPlayType(type: string): '' | 'probably' | 'maybe';
+        play(): void;
+        pause(): void;
+        fastSeek(time: number): void;
+    }
+
+    export const OGVCompat: OGVCompat;
+    export const OGVVersion: OGVVersion;
+    export const OGVLoader: OGVLoaderWeb;
+    export { OGVPlayer };
+}
+
+declare module 'ogv/dist/ogv-support' {
+    // TODO: This file should just export OGVCompat and OGVVersion → file issue at ogv.js?
+    declare global {
+        const OGVCompat: OGVCompat;
+        const OGVVersion: OGVVersion;
+    }
+}
+
+declare module 'ogv/dist/ogv-version' {
+    // TODO: This file should just export OGVVersion → file issue at ogv.js?
+    declare global {
+        const OGVVersion: OGVVersion;
+    }
+}

frontend/api.ts

@@ -0,0 +1,35 @@
+import { config } from './config';
+
+export type SampleKey = string;
+
+export interface Sample {
+    // from server
+    path: string;
+    name: string;
+    hash: string;
+    mtime: number;
+    categories: string[];
+
+    // added on client
+    key: SampleKey;
+    url: string;
+}
+
+export async function fetchSamples(signal?: AbortSignal): Promise<Sample[]> {
+    const url = `${config.apiBaseUrl}/samples`;
+
+    // TODO: Remove 'force-cache'
+    const res = await fetch(url, { cache: 'force-cache', signal });
+    if (res.status !== 200) {
+        throw new Error(`Server replied with ${res.status} ${res.statusText}`);
+    }
+
+    const data = await res.json();
+    return data.samples.map((sampleData: any) => ({
+        ...sampleData,
+        hash: sampleData.id,
+        mtime: sampleData.mtime * 1000,
+        key: sampleData.path,
+        url: `${url}/${sampleData.path}`,
+    }));
+}

frontend/components/App.tsx

@@ -0,0 +1,74 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+
+import { fetchSamples, type Sample } from '../api';
+import { usePreference } from '../helpers/preferences';
+import { Search } from '../helpers/Search';
+import { sortSamples } from '../helpers/sortSamples';
+import { BlockedOverlay } from './BlockedOverlay';
+
+import { Header } from './Header';
+import { PlayerContextProvider } from './PlayerContext';
+import {
+    SampleList,
+    type SampleListImperativeHandle,
+} from './SampleList/SampleList';
+
+function useSamples(): Sample[] {
+    const [samples, setSamples] = useState<Sample[]>([]);
+
+    useEffect(() => {
+        async function handleFetchSamples(signal: AbortSignal) {
+            try {
+                const samples = await fetchSamples(signal);
+                sortSamples(samples);
+                setSamples(samples);
+            } catch (error) {
+                if (
+                    error instanceof DOMException &&
+                    error.name === 'AbortError'
+                ) {
+                    // Fetch was aborted
+                    return;
+                }
+                throw error;
+            }
+        }
+
+        const controller = new AbortController();
+        void handleFetchSamples(controller.signal);
+        return () => controller.abort();
+    }, []);
+
+    return samples;
+}
+
+export default function App() {
+    const [theme] = usePreference('theme');
+    useEffect(() => {
+        document.body.setAttribute('data-theme', theme);
+    }, [theme]);
+
+    const [query, setQuery] = useState('');
+    const samples = useSamples();
+
+    const sampleListRef = useRef<SampleListImperativeHandle>(null);
+
+    const search = useMemo(() => new Search(samples), [samples]);
+    const filteredSamples = useMemo(
+        () => search.filter(query),
+        [search, query],
+    );
+
+    return (
+        <PlayerContextProvider
+            samples={samples}
+            filteredSamples={filteredSamples}
+            sampleListRef={sampleListRef}
+            search={search}
+        >
+            <BlockedOverlay />
+            <Header query={query} onQueryChange={setQuery} />
+            <SampleList ref={sampleListRef} samples={filteredSamples} />
+        </PlayerContextProvider>
+    );
+}

frontend/components/BlockedOverlay.tsx

@@ -0,0 +1,49 @@
+import { useEffect, useState } from 'react';
+
+import { player } from '../helpers/Player';
+
+export function BlockedOverlay(): JSX.Element | null {
+    const [isBlocked, setBlocked] = useState(false);
+
+    useEffect(() => {
+        function handleBlocked() {
+            setBlocked(true);
+        }
+
+        player.addEventListener('blocked', handleBlocked);
+        return () => {
+            player.removeEventListener('blocked', handleBlocked);
+        };
+    }, []);
+
+    useEffect(() => {
+        if (!isBlocked) {
+            return;
+        }
+
+        function handleInteraction() {
+            setBlocked(false);
+            player.playBlockedSamples();
+        }
+
+        window.addEventListener('click', handleInteraction);
+        window.addEventListener('keypress', handleInteraction);
+        return () => {
+            window.removeEventListener('click', handleInteraction);
+            window.removeEventListener('keypress', handleInteraction);
+        };
+    }, [isBlocked]);
+
+    if (!isBlocked) {
+        return null;
+    }
+
+    return (
+        <div className="BlockedOverlay">
+            <div className="BlockedOverlay__content">
+                <h1>Autoplay Blocked</h1>
+                <p>Click or press any key to continue</p>
+            </div>
+        </div>
+    );
+}