import { For } from "solid-js";
import { CheckIcon, ChevronsUpDownIcon } from "lucide-solid";
import { Button } from "./components/ui/button";
import { Card } from "./components/ui/card";
import { Stack, Box, StackProps, HStack, VStack } from "styled-system/jsx";
import { FileUpload } from "./components/ui/file-upload";
import { Text } from "./components/ui/text";
import { AtprotoDid } from "@atcute/lexicons/syntax";
import {
Account,
accounts,
selectedAccount,
setSelectedAccount,
} from "./lib/accounts";
import { Toaster } from "~/components/Toaster";
import { createListCollection, Select } from "./components/ui/select";
import { addTask, tasks, TaskState } from "./lib/task";
import Task from "./components/FileTask";
import Settings from "./components/Settings";
import MicRecorder from "./components/MicRecorder";
import { Link } from "./components/ui/link";
// Pre-compute waveform SVG paths at module load (viewBox: 200 wide × 100 tall).
// translateX(-50%) on a 200%-wide SVG scrolls exactly one screen width → seamless loop.
const makeSineStrokePath = (y: number, amp: number, λ: number): string => {
let d = `M0,${y}`;
for (let x = 0.5; x <= 200.5; x += 0.5) {
d += ` L${x.toFixed(1)},${(y + amp * Math.sin((2 * Math.PI * x) / λ)).toFixed(2)}`;
}
return d;
};
const makeSineFillPath = (y: number, amp: number, λ: number): string => {
return makeSineStrokePath(y, amp, λ) + ` L200,100 L0,100 Z`;
};
// Each track: y position (0-100), amplitude, wavelength, scroll speed, delay, opacity weight.
// λ must divide 100 (the scroll offset in viewBox units) for a seamless loop:
// sin(2π × 100/λ) = sin(0) only when 100/λ is a whole number → λ ∈ {20, 25, 50, …}
const WAVE_TRACKS = [
{ fillD: makeSineFillPath(10, 2.0, 20), strokeD: makeSineStrokePath(10, 2.0, 20), dur: '30s', delay: '0s', op: 0.90 },
{ fillD: makeSineFillPath(22, 3.2, 25), strokeD: makeSineStrokePath(22, 3.2, 25), dur: '44s', delay: '-8s', op: 0.55 },
{ fillD: makeSineFillPath(34, 1.5, 20), strokeD: makeSineStrokePath(34, 1.5, 20), dur: '24s', delay: '-14s', op: 1.00 },
{ fillD: makeSineFillPath(46, 3.5, 25), strokeD: makeSineStrokePath(46, 3.5, 25), dur: '38s', delay: '-5s', op: 0.50 },
{ fillD: makeSineFillPath(56, 2.0, 20), strokeD: makeSineStrokePath(56, 2.0, 20), dur: '33s', delay: '-20s', op: 0.80 },
{ fillD: makeSineFillPath(68, 2.8, 50), strokeD: makeSineStrokePath(68, 2.8, 50), dur: '52s', delay: '-12s', op: 0.45 },
{ fillD: makeSineFillPath(79, 1.8, 25), strokeD: makeSineStrokePath(79, 1.8, 25), dur: '28s', delay: '-18s', op: 0.70 },
{ fillD: makeSineFillPath(90, 2.2, 20), strokeD: makeSineStrokePath(90, 2.2, 20), dur: '36s', delay: '-3s', op: 0.60 },
];
const App = () => {
const collection = () =>
createListCollection({
items: accounts().map((account) => ({
label: account.handle ?? account.did,
value: account.did,
})),
});
const AccountSelect = () => (
setSelectedAccount(details.value[0] as AtprotoDid)
}
collection={collection()}
>
{selectedAccount() ? "@" : ""}
{(item) => (
@{item.label}
)}
);
return (
<>
trill
- 1. upload a voice memo or record one.
- 2. it will automatically be converted to a video
-
3. (optional) add an account to enable bluesky integration.
e.files.forEach((file) => addTask(selectedAccount(), file))
}
/>
account.did === selectedAccount(),
)}
/>
/made by{" "}
{Math.random() < 0.98 ? "dawn" : "90008"}
/
source on{" "}
tangled
);
};
export default App;
type TasksProps = StackProps & {
currentTasks: TaskState[];
selectedAccount: Account | undefined;
};
const Tasks = (props: TasksProps) => (
no files processed (yet!)
}
>
{(process) => Task(process, props.selectedAccount)}
);
const getAudioClipboard = async () => {
try {
const clipboardItems = await navigator.clipboard.read();
for (const item of clipboardItems) {
console.log(item);
const type = item.types.find((type) => type.startsWith("audio/"));
if (type) {
const blob = await item.getType(type);
const file = new File([blob], `audio.${type.split("/")[1]}`, { type });
return file;
}
}
return;
} catch (err) {
console.error(err);
return;
}
};
const Upload = (props: FileUpload.RootProps) => {
return (
drop your files here
(
)}
/>
{/*
getAudioClipboard().then((file) => {
if (!file) return;
addTask(selectedAccount(), file);
})
}
variant="subtle"
>
*/}
);
};