feat: add toggle to record
29 unmodified lines303132333435363738234 unmodified linesExpand all27327427527627627727827928028128228328414 unmodified lines29 unmodified linesimport Settings from "./components/Settings";import MicRecorder from "./components/MicRecorder";import { Link } from "./components/ui/link";import { css } from "styled-system/css";import { toggleToRecord } from "./lib/settings";
const App = () => { const collection = () => createListCollection({234 unmodified linesExpand all or pick file </Button> )} /> <MicRecorder selectedAccount={selectedAccount} /> <MicRecorder selectedAccount={selectedAccount} holdToRecord={!toggleToRecord()} /> {/*<IconButton size="sm" onClick={() => getAudioClipboard().then((file) => {14 unmodified lines121234561 unmodified line891011121314151616 unmodified lines33343536373839404142127 unmodified linesExpand all1701711721731711721731741751741751761771781791801811821831841851861871881891901911921931941951961971981771992002012022039 unmodified linesimport { createSignal, onCleanup } from "solid-js";import { MicIcon } from "lucide-solid";import { createSignal, onCleanup, Show } from "solid-js";import { CircleStopIcon, MicIcon } from "lucide-solid";import { IconButton } from "./ui/icon-button";import { Popover } from "./ui/popover";import { AtprotoDid } from "@atcute/lexicons/syntax";import { addTask } from "../lib/task";1 unmodified lineimport { createTimeDifferenceFromNow } from "@solid-primitives/date";
type MicRecorderProps = { selectedAccount: () => AtprotoDid | undefined; holdToRecord?: boolean;};
const MicRecorder = (props: MicRecorderProps) => { const [isRecording, setIsRecording] = createSignal(false);16 unmodified lines : "audio/webm;codecs=opus"; const fallbackMimeType = isSafari ? "audio/mp4" : "audio/webm";
const startRecording = async () => { if (isRecording()) return;
try { audioChunks = [];
if (!window.MediaRecorder) {127 unmodified linesExpand all {...anchorProps()} size="md" variant={isRecording() ? "solid" : "subtle"} colorPalette={isRecording() ? "red" : undefined} onMouseDown={startRecording} onMouseUp={stopRecording} onMouseLeave={stopRecording} onTouchStart={startRecording} onTouchEnd={stopRecording} onClick={ !props.holdToRecord ? () => (isRecording() ? stopRecording() : startRecording()) : undefined } onMouseDown={props.holdToRecord ? startRecording : undefined} onMouseUp={props.holdToRecord ? stopRecording : undefined} onMouseLeave={props.holdToRecord ? stopRecording : undefined} onTouchStart={ props.holdToRecord ? (e) => { e.preventDefault(); // Prevent mouse emulation startRecording(); } : undefined } onTouchEnd={ props.holdToRecord ? (e) => { e.preventDefault(); stopRecording(); } : undefined } > <MicIcon /> {isRecording() ? <CircleStopIcon /> : <MicIcon />} </IconButton> )} /> <Popover.Positioner>9 unmodified lines32 unmodified lines333435363738394041424344309 unmodified linesExpand all35435535635735835936036136236336436536636736836937037137237337437537651 unmodified lines32 unmodified lines showVisualizer as showVisualizerSetting, backgroundColor as backgroundColorSetting, frameRate as frameRateSetting, useDominantColorAsBg as useDominantColorAsBgSetting, toggleToRecordSetting, Setting, toggleToRecord, setToggleToRecord,} from "~/lib/settings";import { handleResolver } from "~/lib/at";import { toaster } from "~/components/Toaster";import { createListCollection, Select } from "~/components/ui/select";309 unmodified linesExpand all <Drawer.Body> <Stack gap="4"> <Accounts /> <Stack> <FormLabel>user interface</FormLabel> <Stack gap="0" border="1px solid var(--colors-border-default)" borderBottomWidth="3px" rounded="xs" > <SettingCheckbox label="use toggle to record" setting={toggleToRecordSetting} signal={[toggleToRecord, setToggleToRecord]} /> </Stack> </Stack> <Stack> <FormLabel>processing</FormLabel> <Stack gap="0" border="1px solid var(--colors-border-default)"51 unmodified lines12345611 unmodified lines18192021222324252627282930313233import { createSignal } from "solid-js";
export const setting = <T>(key: string) => { return { get: () => { const value = localStorage.getItem(key);11 unmodified linesexport const showProfilePicture = setting<boolean>("showProfilePicture");export const useDominantColorAsBg = setting<boolean>("useDominantColorAsBg");export const backgroundColor = setting<string>("backgroundColor");export const frameRate = setting<number>("frameRate");
export const toggleToRecordSetting = setting<boolean>("toggleToRecord");const [_toggleToRecord, _setToggleToRecord] = createSignal<boolean>( toggleToRecordSetting.get() ?? false,);export const toggleToRecord = _toggleToRecord;export const setToggleToRecord = ( value: boolean | ((prev: boolean) => boolean),) => { const newAccounts = _setToggleToRecord(value); toggleToRecordSetting.set(newAccounts);};