Function Recorder

src/App.tsx:841–983

()

    }

    function Recorder() {
        return (
            <div class="flex flex-col gap-3 h-full">
                <div class="m-3">
                    <h2 class="text-xl font-bold h-fit">Device Configuration</h2>
                    <hr class="my-2" />
                    <div class="flex flex-col gap-1">
                        <section class="flex items-center gap-2">
                            <h3 class="text-sm font-bold my-0 h-fit w-32">Microphone</h3>
                            <select
                                class="border p-1 text-xs w-full"
                                disabled={microphones.loading}
                                onchange={(e) => set_microphone(e.target.value)}
                            >
                                <Suspense>
                                    <For each={microphones()!}>
                                        {(device) => (
                                            <option value={device.name} selected={device.is_selected}>
                                                {device.name}
                                            </option>
                                        )}
                                    </For>
                                </Suspense>
                            </select>
                        </section>
                        <section class="flex items-center gap-2">
                            <h3 class="text-sm font-bold my-0 h-fit w-32">Speaker</h3>
                            <select
                                class="border p-1 text-xs w-full"
                                disabled={speakers.loading}
                                onchange={(e) => set_speaker(e.target.value)}
                            >
                                <Suspense>
                                    <For each={speakers()!}>
                                        {(device) => (
                                            <option value={device.name} selected={device.is_selected}>
                                                {device.name}
                                            </option>
                                        )}
                                    </For>
                                </Suspense>
                            </select>
                        </section>
                        <section class="flex items-center gap-2">
                            <h3 class="text-sm font-bold my-0 h-fit w-32">Subtitle</h3>
                            <input type="checkbox" onchange={(e) => update_is_transcript(e.target.checked)} checked={general_config()?.transcript} />
                        </section>
                    </div>
                </div>
                <Show when={general_config()?.transcript}>
                    <div class="m-3">
                        <h2 class="text-xl font-bold h-fit">Subtitle Configuration</h2>
                        <hr class="my-2" />
                        <div class="flex flex-col gap-1">
                            <ListModelSection />
                            <ListLanguageSection />
                            <TranscriberTranslateSection />
                        </div>