86 lines
2.2 KiB
TypeScript
86 lines
2.2 KiB
TypeScript
import { onMount } from "solid-js";
|
|
import Login from "~/entrypoints/popup/Login";
|
|
import Settings from "~/entrypoints/popup/Settings";
|
|
import Header from "./components/Header";
|
|
import RecordingControls from "./components/RecordingControls";
|
|
import AudioPicker from "./components/AudioPicker";
|
|
import { useAppState } from "./hooks/useAppState";
|
|
import { useAudioDevices } from "./hooks/useAudioDevices";
|
|
import { AppState } from "./types";
|
|
|
|
function App() {
|
|
const {
|
|
state,
|
|
isSettingsOpen,
|
|
startRecording,
|
|
stopRecording,
|
|
openSettings,
|
|
closeSettings,
|
|
} = useAppState();
|
|
|
|
const {
|
|
audioDevices,
|
|
selectedAudioDevice,
|
|
mic,
|
|
hasPermissions,
|
|
isChecking,
|
|
checkAudioDevices,
|
|
handleMicToggle,
|
|
selectAudioDevice,
|
|
} = useAudioDevices();
|
|
|
|
// Listen for mic status updates from background
|
|
onMount(() => {
|
|
browser.runtime.onMessage.addListener((message) => {
|
|
if (message.type === "popup:mic-status") {
|
|
setMic(message.status);
|
|
}
|
|
});
|
|
});
|
|
|
|
const handleStartRecording = (area: "tab" | "desktop") => {
|
|
startRecording(area, mic(), selectedAudioDevice(), hasPermissions());
|
|
};
|
|
|
|
const handleStopRecording = () => {
|
|
stopRecording(mic(), selectedAudioDevice());
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
{isSettingsOpen() ? (
|
|
<Settings goBack={closeSettings} />
|
|
) : (
|
|
<div class="flex flex-col gap-4 p-5">
|
|
<Header openSettings={openSettings} />
|
|
|
|
{state() === AppState.LOGIN ? (
|
|
<Login />
|
|
) : (
|
|
<>
|
|
<RecordingControls
|
|
state={state()}
|
|
startRecording={handleStartRecording}
|
|
stopRecording={handleStopRecording}
|
|
/>
|
|
|
|
{state() === AppState.READY && (
|
|
<AudioPicker
|
|
mic={mic}
|
|
audioDevices={audioDevices}
|
|
selectedAudioDevice={selectedAudioDevice}
|
|
isChecking={isChecking}
|
|
onMicToggle={handleMicToggle}
|
|
onCheckAudio={checkAudioDevices}
|
|
onSelectDevice={selectAudioDevice}
|
|
/>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default App;
|