48 lines
1.4 KiB
TypeScript
48 lines
1.4 KiB
TypeScript
import { Component } from "solid-js";
|
|
import { RecordTabSvg, RecordDesktopSvg } from "../Icons";
|
|
import Button from "~/entrypoints/popup/Button";
|
|
import { AppState, RecordingArea } from "../types";
|
|
|
|
interface RecordingControlsProps {
|
|
state: AppState;
|
|
startRecording: (area: RecordingArea) => void;
|
|
stopRecording: () => void;
|
|
}
|
|
|
|
const RecordingControls: Component<RecordingControlsProps> = (props) => {
|
|
return (
|
|
<>
|
|
{props.state === AppState.RECORDING && (
|
|
<Button name="End Recording" onClick={props.stopRecording} />
|
|
)}
|
|
|
|
{props.state === AppState.STARTING && (
|
|
<div class="flex flex-row items-center gap-2 w-full justify-center">
|
|
<div class="py-4">Your recording is starting</div>
|
|
</div>
|
|
)}
|
|
|
|
{props.state === AppState.READY && (
|
|
<div class="flex flex-row items-center gap-2 w-full justify-center">
|
|
<button
|
|
class="btn bg-indigo-100 text-base hover:bg-primary hover:text-white w-6/12"
|
|
onClick={() => props.startRecording("tab")}
|
|
>
|
|
<RecordTabSvg />
|
|
Record Tab
|
|
</button>
|
|
|
|
<button
|
|
class="btn bg-teal-50 text-base hover:bg-primary hover:text-white"
|
|
onClick={() => props.startRecording("desktop")}
|
|
>
|
|
<RecordDesktopSvg />
|
|
Record Desktop
|
|
</button>
|
|
</div>
|
|
)}
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default RecordingControls;
|