- {isWindows() &&
}
+
+
+
+
-
-
+
{children}
+
+ {store.queueOpen && (
+
+
Queue
+
+ )}
+
+
+
-
);
}
diff --git a/src/assets/preact.svg b/src/assets/preact.svg
deleted file mode 100644
index 2d23db7..0000000
--- a/src/assets/preact.svg
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/src/components/player.tsx b/src/components/player.tsx
new file mode 100644
index 0000000..e7039a9
--- /dev/null
+++ b/src/components/player.tsx
@@ -0,0 +1,229 @@
+import { As } from "@kobalte/core";
+import { ComponentProps, Match, Switch } from "solid-js";
+
+import * as Icons from "@/icons";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
+
+import { setStore, store } from "@/contexts/player";
+
+import player from "@/lib/player";
+import { formatDuration } from "@/lib/duration";
+import { parseDuration } from "@/lib/time";
+import { A } from "@solidjs/router";
+import { cn } from "@/lib/utils";
+
+function VolumeIcon() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+function PlayPauseIcon() {
+ return (
+
+
+
+
+
+
+
+
+ );
+}
+
+function RepeatIcon() {
+ return (
+
}>
+
+
+
+
+
+
+
+ );
+}
+
+export default function Player() {
+ return (
+
+
+
+
+
{store.track.title}
+
+ {store.track.artists.map((artist, i) => (
+ <>
+
+ {artist.name}
+
+ {i < store.track.artists.length - 1 && ", "}
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {formatDuration(parseDuration(store.progress))}
+
+
{
+ const rect = event.currentTarget.getBoundingClientRect();
+ const x = event.clientX - rect.left;
+ const width = rect.width;
+ const progress = x / width;
+
+ player.seek(progress * store.duration);
+ }}
+ >
+
+
+
+ {formatDuration(parseDuration(store.duration))}
+
+
+
+
+
+
+
+
+
+
+
+
+ {
+ setStore((store) => ({
+ ...store,
+ volume: Number(event.currentTarget.value),
+ muted: false,
+ }));
+ }}
+ min={0}
+ step={0.01}
+ max={1}
+ />
+
+
+
+ );
+}
+
+interface ButtonProps extends ComponentProps<"button"> {
+ tooltip?: string;
+ children: any;
+
+ onClick?: () => void;
+}
+function Button(props: ButtonProps) {
+ return (
+
+
+
+ {props.children}
+
+
+ {props.tooltip}
+
+ );
+}
diff --git a/src/components/sidebar.tsx b/src/components/sidebar.tsx
deleted file mode 100644
index daedc2a..0000000
--- a/src/components/sidebar.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import { useCallback, useEffect } from "preact/hooks";
-
-import { cn } from "@/lib/utils";
-import { dragging } from "@/store";
-
-const { isDragging } = dragging.value;
-
-export default function Sidebar() {
- return (
-
- );
-}
-
-function Divider() {
- function onMouseDown() {
- dragging.value = {
- ...dragging.value,
- isDragging: true,
- };
- }
-
- function onMouseUp() {
- dragging.value = {
- ...dragging.value,
- isDragging: false,
- };
- }
-
- const handler = useCallback(
- (event: MouseEvent) => {
- if (dragging.value.isDragging) {
- const width = Math.min(Math.max(200, event.clientX), 320);
- dragging.value = {
- ...dragging.value,
- width,
- };
- localStorage.setItem("sidebar-width", width.toString());
- }
- },
- [dragging.value.isDragging],
- );
-
- useEffect(() => {
- window.addEventListener("mousemove", handler);
- window.addEventListener("mouseup", onMouseUp);
-
- return () => {
- window.removeEventListener("mousemove", handler);
- window.removeEventListener("mouseup", onMouseUp);
- };
- }, [isDragging]);
-
- return (
-
- );
-}
diff --git a/src/components/sidebar/index.tsx b/src/components/sidebar/index.tsx
new file mode 100644
index 0000000..7aad058
--- /dev/null
+++ b/src/components/sidebar/index.tsx
@@ -0,0 +1,112 @@
+import { As } from "@kobalte/core";
+import { A } from "@solidjs/router";
+import { createSignal, useContext } from "solid-js";
+
+import * as Icons from "@/icons";
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuSeparator,
+ DropdownMenuTrigger,
+} from "../ui/dropdown-menu";
+import Playlists from "./playlists";
+import { cn } from "@/lib/utils";
+import { UserContext } from "@/contexts/user";
+import { sizes } from "@/lib/store";
+
+const links = [
+ {
+ href: "/",
+ name: "Library",
+ icon: Icons.FolderLibraryStroke,
+ },
+ {
+ href: "/search",
+ name: "Search",
+ icon: Icons.FileSearchStroke,
+ },
+];
+
+export default function Sidebar() {
+ const [open, setOpen] = createSignal(false);
+ const { user } = useContext(UserContext);
+
+ return (
+
+ );
+}
diff --git a/src/components/sidebar/playlists.tsx b/src/components/sidebar/playlists.tsx
new file mode 100644
index 0000000..05d37a0
--- /dev/null
+++ b/src/components/sidebar/playlists.tsx
@@ -0,0 +1,34 @@
+import { A } from "@solidjs/router";
+import { For, Show, createResource } from "solid-js";
+
+import * as Icons from "@/icons";
+import { getPlaylists } from "@/lib/playlists";
+
+export default function Playlists() {
+ const [playlists] = createResource(getPlaylists);
+
+ return (
+
Loading...}>
+
+ {(playlist) => {
+ const Icon =
+ playlist.playlist_type === "folder"
+ ? Icons.Folder01Stroke
+ : Icons.Playlist03Stroke;
+
+ return (
+
+
+ {playlist.name}
+
+ );
+ }}
+
+
+ );
+}
diff --git a/src/components/title-bar.tsx b/src/components/title-bar.tsx
deleted file mode 100644
index 97a3b9d..0000000
--- a/src/components/title-bar.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import { isWindows } from "@tauri-apps/api/helpers/os-check";
-import { appWindow } from "@tauri-apps/api/window";
-
-export default function TitleBar() {
- return (
-
- {isWindows() && }
-
- );
-}
-
-function Windows() {
- return (
-
-
-
-
-
- );
-}
diff --git a/src/components/ui/dropdown-menu.tsx b/src/components/ui/dropdown-menu.tsx
new file mode 100644
index 0000000..65bd6c3
--- /dev/null
+++ b/src/components/ui/dropdown-menu.tsx
@@ -0,0 +1,184 @@
+import type { Component, ComponentProps } from "solid-js"
+import { splitProps } from "solid-js"
+
+import { DropdownMenu as DropdownMenuPrimitive } from "@kobalte/core"
+import { TbCheck, TbChevronRight, TbCircle } from "solid-icons/tb"
+
+import { cn } from "@/lib/utils"
+
+const DropdownMenu: Component
= (props) => {
+ return
+}
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+
+const DropdownMenuContent: Component = (props) => {
+ const [, rest] = splitProps(props, ["class"])
+ return (
+
+
+
+ )
+}
+
+const DropdownMenuItem: Component = (props) => {
+ const [, rest] = splitProps(props, ["class"])
+ return (
+
+ )
+}
+
+const DropdownMenuShortcut: Component> = (props) => {
+ const [, rest] = splitProps(props, ["class"])
+ return
+}
+
+const DropdownMenuLabel: Component & { inset?: boolean }> = (props) => {
+ const [, rest] = splitProps(props, ["class", "inset"])
+ return (
+
+ )
+}
+
+const DropdownMenuSeparator: Component = (
+ props
+) => {
+ const [, rest] = splitProps(props, ["class"])
+ return (
+
+ )
+}
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub
+
+const DropdownMenuSubTrigger: Component = (
+ props
+) => {
+ const [, rest] = splitProps(props, ["class", "children"])
+ return (
+
+ {props.children}
+
+
+ )
+}
+
+const DropdownMenuSubContent: Component = (
+ props
+) => {
+ const [, rest] = splitProps(props, ["class"])
+ return (
+
+ )
+}
+
+const DropdownMenuCheckboxItem: Component = (
+ props
+) => {
+ const [, rest] = splitProps(props, ["class", "children"])
+ return (
+
+
+
+
+
+
+ {props.children}
+
+ )
+}
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group
+
+const DropdownMenuGroupLabel: Component = (
+ props
+) => {
+ const [, rest] = splitProps(props, ["class"])
+ return (
+
+ )
+}
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+
+const DropdownMenuRadioItem: Component = (
+ props
+) => {
+ const [, rest] = splitProps(props, ["class", "children"])
+ return (
+
+
+
+
+
+
+ {props.children}
+
+ )
+}
+
+export {
+ DropdownMenu,
+ DropdownMenuTrigger,
+ DropdownMenuPortal,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuShortcut,
+ DropdownMenuLabel,
+ DropdownMenuSeparator,
+ DropdownMenuSub,
+ DropdownMenuSubTrigger,
+ DropdownMenuSubContent,
+ DropdownMenuCheckboxItem,
+ DropdownMenuGroup,
+ DropdownMenuGroupLabel,
+ DropdownMenuRadioGroup,
+ DropdownMenuRadioItem
+}
diff --git a/src/components/ui/tooltip.tsx b/src/components/ui/tooltip.tsx
new file mode 100644
index 0000000..9ee81b1
--- /dev/null
+++ b/src/components/ui/tooltip.tsx
@@ -0,0 +1,28 @@
+import { splitProps, type Component } from "solid-js"
+
+import { Tooltip as TooltipPrimitive } from "@kobalte/core"
+
+import { cn } from "@/lib/utils"
+
+const Tooltip: Component = (props) => {
+ return
+}
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent: Component = (props) => {
+ const [, rest] = splitProps(props, ["class"])
+ return (
+
+
+
+ )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent }
diff --git a/src/contexts/player.tsx b/src/contexts/player.tsx
new file mode 100644
index 0000000..cce4dc5
--- /dev/null
+++ b/src/contexts/player.tsx
@@ -0,0 +1,76 @@
+import { createStore } from "solid-js/store";
+
+import player from "@/lib/player";
+import type { Track } from "@/types/track";
+
+interface PlayerStore {
+ playing: boolean;
+ progress: number;
+ duration: number;
+
+ muted: boolean;
+ volume: number;
+
+ track: Track;
+
+ queueOpen: boolean;
+
+ shuffle: boolean;
+ repeat: "none" | "one" | "all";
+}
+
+const [store, setStore] = createStore({
+ playing: false,
+ progress: 0,
+ duration: 0,
+
+ muted: false,
+ volume: 0.5,
+
+ track: player.getTrack(),
+
+ queueOpen: false,
+
+ shuffle: false,
+ repeat: "none",
+});
+
+const audio = player.getAudio();
+
+audio.addEventListener("play", () =>
+ setStore((store) => ({ ...store, playing: true })),
+);
+
+audio.addEventListener("pause", () =>
+ setStore((store) => ({ ...store, playing: false })),
+);
+
+audio.addEventListener("ended", () =>
+ setStore((store) => ({ ...store, playing: false })),
+);
+
+audio.addEventListener("timeupdate", () => {
+ setStore((store) => ({
+ ...store,
+ progress: Math.floor(audio.currentTime),
+ duration: Math.floor(audio.duration),
+ }));
+});
+
+audio.addEventListener("volumechange", () => {
+ setStore((store) => ({
+ ...store,
+ muted: audio.muted,
+ volume: audio.volume,
+ }));
+});
+
+player.on("track", (track) => {
+ setStore((store) => ({
+ ...store,
+ track,
+ progress: 0,
+ }));
+});
+
+export { store, setStore };
diff --git a/src/contexts/user.tsx b/src/contexts/user.tsx
new file mode 100644
index 0000000..4443127
--- /dev/null
+++ b/src/contexts/user.tsx
@@ -0,0 +1,46 @@
+import { fetchAPI } from "@/lib/api";
+import { Show } from "solid-js";
+import { createContext, createResource, JSX } from "solid-js";
+
+const DEFAULT_USER = {
+ id: "",
+ name: "Miguel da Mota",
+ email: "miguel@damota.de",
+ initials: "",
+};
+
+export const UserContext = createContext({
+ user: DEFAULT_USER,
+});
+
+export function UserProvider(props: { children: JSX.Element }) {
+ const [user] = createResource(getMe);
+
+ return (
+ Loading...}>
+
+ {props.children}
+
+
+ );
+}
+
+export function getInitials(name: string) {
+ const [first, ...others] = name.split(" ");
+
+ let initials = first[0];
+
+ if (others.length > 0) {
+ initials += others[0][0];
+ }
+
+ return initials.toUpperCase();
+}
+
+async function getMe(): Promise {
+ const user = await fetchAPI("/me");
+
+ user.initials = getInitials(user.name);
+
+ return user;
+}
diff --git a/src/hooks/use-bindings.ts b/src/hooks/use-bindings.ts
new file mode 100644
index 0000000..9034f94
--- /dev/null
+++ b/src/hooks/use-bindings.ts
@@ -0,0 +1,16 @@
+const bindings = new Map void>();
+
+export function useBindings() {
+ window.addEventListener("keydown", (event) => {
+ if (bindings.has(event.key)) {
+ event.preventDefault();
+ bindings.get(event.key)?.(event);
+ }
+ });
+}
+
+export function bind(key: string, callback: (event: KeyboardEvent) => void) {
+ bindings.set(key, callback);
+}
+
+bind("a", () => console.log("a was pressed"));
diff --git a/src/index.css b/src/index.css
new file mode 100644
index 0000000..0de36cd
--- /dev/null
+++ b/src/index.css
@@ -0,0 +1,56 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@font-face {
+ font-family: "Rubik";
+ font-weight: 400;
+ src: url("/assets/fonts/Rubik-Regular.woff2");
+}
+@font-face {
+ font-family: "Rubik";
+ font-weight: 700;
+ src: url("/assets/fonts/Rubik-Bold.woff2");
+}
+@font-face {
+ font-family: "Rubik";
+ font-weight: 900;
+ src: url("/assets/fonts/Rubik-Black.woff2");
+}
+
+* {
+ @apply border-border;
+}
+
+:root {
+ --radius: 0.5rem;
+}
+
+body {
+ font-family: "Rubik";
+ overscroll-behavior-y: none;
+
+ height: 100%;
+ line-height: normal;
+ min-height: 600px;
+ min-width: 800px;
+
+ @apply bg-primary text-primary relative select-none;
+}
+
+.space {
+ @apply rounded-lg p-4;
+}
+
+hr {
+ @apply border-0 border-t;
+}
+
+.playlist-row {
+ @apply grid grid-cols-[48px,1fr,.5fr,128px,48px] items-center gap-4 rounded-md px-4 py-2 md:grid-cols-[48px,1fr,.5fr,128px,128px,48px];
+}
+
+/* Custom classes */
+.headline {
+ @apply text-3xl font-bold;
+}
diff --git a/src/lib/api.ts b/src/lib/api.ts
new file mode 100644
index 0000000..73e3496
--- /dev/null
+++ b/src/lib/api.ts
@@ -0,0 +1,25 @@
+const API_URL = "http://localhost:9000";
+
+const ACCESS_TOKEN =
+ "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE3Mzg0MjY1MDMsInVzZXJfaWQiOiI1a3hERGNvSFpTQkM3dUVZc20zRnZrdEsifQ.Z3xceSQKjDg5nHQel3jGlUDjWiCjDUmhFgJtrirxyew";
+
+export async function fetchAPI(
+ url: string,
+ options?: RequestInit,
+): Promise {
+ const response = await fetch(`${API_URL}${url}`, {
+ ...options,
+ headers: {
+ authorization: `Bearer ${ACCESS_TOKEN}`,
+ ...options?.headers,
+ },
+ });
+
+ if (!response.ok) {
+ throw new Error("Network response was not ok");
+ }
+
+ const body = await response.json();
+
+ return body;
+}
diff --git a/src/lib/duration.ts b/src/lib/duration.ts
new file mode 100644
index 0000000..8c4faf5
--- /dev/null
+++ b/src/lib/duration.ts
@@ -0,0 +1,15 @@
+import type { ParseDuration } from "./time";
+
+export function formatDuration({ hours, minutes, seconds }: ParseDuration) {
+ let output = "";
+
+ if (hours) {
+ output += hours.toString().padStart(2, "0") + ":";
+ }
+
+ output += minutes.toString().padStart(2, "0") + ":";
+
+ output += seconds.toString().padStart(2, "0");
+
+ return output;
+}
diff --git a/src/lib/player/chunk-cache.ts b/src/lib/player/chunk-cache.ts
new file mode 100644
index 0000000..65dc958
--- /dev/null
+++ b/src/lib/player/chunk-cache.ts
@@ -0,0 +1,21 @@
+import Chunk from "./chunk";
+
+class ChunkCache {
+ private cache = new Map();
+
+ get(index: number) {
+ return this.cache.get(index);
+ }
+
+ set(chunk: Chunk) {
+ this.cache.set(chunk.getIndex(), chunk.getBuffer());
+ }
+
+ clear() {
+ this.cache.clear();
+ }
+}
+
+const chunkCache = new ChunkCache();
+
+export default chunkCache;
diff --git a/src/lib/player/chunk-queue.ts b/src/lib/player/chunk-queue.ts
new file mode 100644
index 0000000..e29453b
--- /dev/null
+++ b/src/lib/player/chunk-queue.ts
@@ -0,0 +1,73 @@
+import { Player } from ".";
+
+import Chunk from "./chunk";
+import chunkCache from "./chunk-cache";
+
+export default class ChunkQueue {
+ private queue = new Map();
+
+ private index = -1;
+
+ constructor(private readonly player: Player) {
+ this.index = player.currentChunk;
+ }
+
+ next() {
+ const next = this.queue.get(this.index);
+
+ if (!next) {
+ return null;
+ }
+
+ // Delete entry from queue.
+ this.queue.delete(this.index);
+
+ // Increment index.
+ this.index++;
+
+ return next;
+ }
+
+ enqueue(chunk: Chunk) {
+ this.queue.set(chunk.getIndex(), chunk.getBuffer());
+
+ this.player.emit("queue");
+ }
+
+ /**
+ * Clear
+ */
+ clear() {
+ this.queue.clear();
+ }
+
+ setIndex(index: number) {
+ this.index = index;
+ }
+
+ get size() {
+ return this.queue.size;
+ }
+
+ private async getChunk(index: number) {
+ const cached = chunkCache.get(index);
+
+ if (cached) {
+ return new Chunk(cached, index);
+ }
+
+ const response = await fetch(
+ this.player
+ .getPlaybackInfo()
+ .stream_url.replace("{chunk}", String(index))!,
+ );
+ const buffer = await response.arrayBuffer();
+
+ return new Chunk(buffer, index);
+ }
+
+ async load(index: number) {
+ const chunk = await this.getChunk(index);
+ this.enqueue(chunk);
+ }
+}
diff --git a/src/lib/player/chunk.ts b/src/lib/player/chunk.ts
new file mode 100644
index 0000000..15fbae3
--- /dev/null
+++ b/src/lib/player/chunk.ts
@@ -0,0 +1,14 @@
+export default class Chunk {
+ constructor(
+ private readonly _buffer: ArrayBuffer,
+ private readonly _index: number,
+ ) {}
+
+ getIndex() {
+ return this._index;
+ }
+
+ getBuffer() {
+ return this._buffer;
+ }
+}
diff --git a/src/lib/player/index.ts b/src/lib/player/index.ts
new file mode 100644
index 0000000..76fad57
--- /dev/null
+++ b/src/lib/player/index.ts
@@ -0,0 +1,319 @@
+import ChunkQueue from "./chunk-queue";
+import type { Events, EventListeners } from "./types/player";
+
+import { DEFAULT_PLAYBACK_INFO, PlaybackInfo } from "./types/playback-info";
+import { DEFAULT_TRACK, type Track } from "@/types/track";
+import chunkCache from "./chunk-cache";
+
+const CHUNK_LENGTH = 5,
+ PRELOAD_CHUNKS = 3;
+
+export class Player {
+ static audio = new Audio();
+
+ private _listeners = new Map();
+ private _initialized = false;
+
+ private track = DEFAULT_TRACK;
+
+ private queue = new ChunkQueue(this);
+
+ private playbackInfo: PlaybackInfo = DEFAULT_PLAYBACK_INFO;
+ // private state
+
+ private sourceBuffer: SourceBuffer | null = null;
+
+ currentChunk = 0;
+
+ constructor() {
+ navigator.mediaSession.setActionHandler("pause", () => this.playPause());
+ navigator.mediaSession.setActionHandler("play", () => this.playPause());
+
+ this.createMediaSource = this.createMediaSource.bind(this);
+ this.sourceOpen = this.sourceOpen.bind(this);
+
+ // this.startStateUpdate = this.startStateUpdate.bind(this);
+ // this.updateState = this.updateState.bind(this);
+
+ this.reset = this.reset.bind(this);
+ this.play = this.play.bind(this);
+ this.playPause = this.playPause.bind(this);
+ this.runQueue = this.runQueue.bind(this);
+
+ this.changeTrack = this.changeTrack.bind(this);
+ this.processNextChunk = this.processNextChunk.bind(this);
+
+ this.registerEvents = this.registerEvents.bind(this);
+
+ this.registerEvents();
+ }
+
+ private registerEvents() {
+ this.on("queue", this.runQueue);
+ }
+
+ getAudio() {
+ return Player.audio;
+ }
+
+ getTrack(): Track {
+ return this.track;
+ }
+
+ /**
+ * Change track.
+ */
+ async changeTrack(track: Track, progress = 0) {
+ // If track is the same, just play/pause
+ if (this.track.id === track.id && !progress) {
+ this.playPause();
+ return;
+ }
+
+ this.reset();
+
+ Player.audio.pause();
+
+ if (this.track.id !== track.id) {
+ this.queue.clear();
+ }
+
+ this.track = track;
+ await this.fetchPlaybackInfo();
+
+ this.emit("track", track);
+
+ // Update mediaSession
+ if ("mediaSession" in navigator) {
+ navigator.mediaSession.metadata = new MediaMetadata({
+ title: track.title,
+ artist: track.artists.map((artist) => artist.name).join(", "),
+ album: "Unknown",
+ // artwork: [
+ // {
+ // src: track.image,
+ // sizes: "1280x1280",
+ // type: "image/jpg",
+ // },
+ // ],
+ });
+ }
+
+ this.queue = new ChunkQueue(this);
+
+ this._progress = progress;
+ this.currentChunk = getChunkFromTime(progress);
+
+ this.play();
+ }
+ private _progress = 0;
+
+ private _checkedSecond = 0;
+ private processNextChunk() {
+ const second = Math.floor(Player.audio.currentTime);
+
+ if (second % CHUNK_LENGTH !== 0 || this._checkedSecond === second) {
+ return;
+ }
+
+ this._checkedSecond = second;
+
+ const nextChunk = this.currentChunk + 1;
+ this.queue.setIndex(nextChunk);
+
+ if (nextChunk > this.playbackInfo.max_chunks) {
+ this.sourceBuffer?.removeEventListener("updateend", this.runQueue);
+ return;
+ }
+
+ this.queue.load(nextChunk);
+
+ this.currentChunk = nextChunk;
+ }
+
+ private async fetchPlaybackInfo() {
+ const { id } = this.track;
+
+ const data = await fetch(`http://localhost:9001/tracks/${id}`).then((res) =>
+ res.json(),
+ );
+
+ this.playbackInfo = data;
+ }
+
+ private createMediaSource() {
+ const mediaSource = new MediaSource();
+
+ const audio = this.getAudio();
+ audio.src = URL.createObjectURL(mediaSource);
+
+ audio.currentTime = this._progress;
+
+ mediaSource.addEventListener("sourceopen", () => {
+ this.sourceOpen(mediaSource);
+ });
+ }
+
+ private async sourceOpen(mediaSource: MediaSource) {
+ const { queue } = this;
+ queue.clear();
+ chunkCache.clear();
+
+ this.sourceBuffer = mediaSource.addSourceBuffer(this.getSourceBufferType());
+
+ --this.currentChunk;
+
+ this.queue.setIndex(0);
+ await this.queue.load(0);
+
+ this.queue.setIndex(++this.currentChunk);
+
+ // Prleoad x chunks.
+ for (let i = 0; i < PRELOAD_CHUNKS; i++) {
+ if (this.currentChunk > this.playbackInfo.max_chunks) {
+ break;
+ }
+
+ // Fetch chunk.
+ this.queue.load(this.currentChunk++);
+ }
+
+ --this.currentChunk;
+
+ this.sourceBuffer.addEventListener("updateend", this.runQueue);
+
+ Player.audio.addEventListener("timeupdate", this.processNextChunk);
+ }
+
+ private getSourceBufferType(): string {
+ const types = ["audio/mp4", 'audio/mp4; codecs="flac"'];
+
+ for (const type of types) {
+ if (MediaSource.isTypeSupported(type)) {
+ return type;
+ }
+ }
+
+ return "";
+ }
+
+ private runQueue() {
+ const { queue } = this;
+
+ if (queue.size === 0 || this.sourceBuffer?.updating) {
+ return;
+ }
+
+ const buffer = queue.next();
+
+ if (!buffer) {
+ return;
+ }
+
+ try {
+ this.sourceBuffer?.appendBuffer(buffer);
+ } catch (error) {
+ console.error(error);
+ }
+ }
+
+ private play() {
+ if (!this._initialized) {
+ this.createMediaSource();
+
+ this._initialized = true;
+ }
+
+ Player.audio.play();
+ }
+
+ playPause() {
+ if (!this.track.id) return;
+
+ const audio = this.getAudio();
+
+ if (audio.paused) {
+ this.play();
+ } else {
+ audio.pause();
+ }
+ }
+
+ private reset() {
+ this._initialized = false;
+
+ if (this.sourceBuffer) {
+ this.sourceBuffer.removeEventListener("updateend", this.runQueue);
+ }
+
+ Player.audio.removeEventListener("timeupdate", this.processNextChunk);
+ }
+
+ public getPlaybackInfo() {
+ return this.playbackInfo;
+ }
+
+ /// Controls
+ get volume() {
+ return Player.audio.volume;
+ }
+
+ set volume(value: number) {
+ Player.audio.volume = value;
+ }
+
+ get muted() {
+ return Player.audio.muted;
+ }
+
+ set muted(value: boolean) {
+ Player.audio.muted = value;
+ }
+
+ get currentTime() {
+ return Player.audio.currentTime;
+ }
+
+ isPlaying() {
+ return !Player.audio.paused;
+ }
+
+ seek(progress: number) {
+ this.changeTrack(this.track, progress);
+ }
+
+ /// Events
+ public emit(event: E, ...args: unknown[]) {
+ const listeners: EventListeners[Events][] =
+ this._listeners.get(event) ?? [];
+
+ // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/ban-ts-comment
+ // @ts-expect-error
+ listeners.forEach((listener) => listener(...args));
+ }
+
+ public on(event: E, listener: EventListeners[E]) {
+ const eventListeners = this._listeners.get(event) ?? [];
+
+ eventListeners.push(listener);
+
+ this._listeners.set(event, eventListeners);
+ }
+
+ public off(event: E, listener: EventListeners[E]) {
+ const eventListeners = this._listeners.get(event) ?? [];
+
+ this._listeners.set(
+ event,
+ eventListeners.filter((eventListener) => eventListener !== listener),
+ );
+ }
+}
+
+const player = new Player();
+
+export default player;
+
+function getChunkFromTime(time: number) {
+ return Math.floor(time / CHUNK_LENGTH);
+}
diff --git a/src/lib/player/types/playback-info.ts b/src/lib/player/types/playback-info.ts
new file mode 100644
index 0000000..f9b5ca8
--- /dev/null
+++ b/src/lib/player/types/playback-info.ts
@@ -0,0 +1,13 @@
+export interface PlaybackInfo {
+ id: string;
+ duration: number;
+ max_chunks: number;
+ stream_url: string;
+}
+
+export const DEFAULT_PLAYBACK_INFO: PlaybackInfo = {
+ id: "",
+ duration: 0,
+ max_chunks: 0,
+ stream_url: "",
+};
diff --git a/src/lib/player/types/player.ts b/src/lib/player/types/player.ts
new file mode 100644
index 0000000..d8fb6d5
--- /dev/null
+++ b/src/lib/player/types/player.ts
@@ -0,0 +1,26 @@
+import type { Track } from "@/types/track";
+
+export interface PlayerState {
+ playing: boolean;
+ loading: boolean;
+
+ volume: number;
+ progress: number;
+ track: Track;
+}
+
+// eslint-disable-next-line @typescript-eslint/ban-types
+export interface EventListeners extends Record {
+ track: (track: Track) => void;
+ queue: (chunk: number) => void;
+ state: (state: PlayerState) => void;
+ progress: (progress: number) => void;
+}
+
+export type Events =
+ | "track"
+ | "queue"
+ | "state"
+ | "progress"
+ | "play"
+ | "pause";
diff --git a/src/lib/playlists.ts b/src/lib/playlists.ts
index 36376e8..bf5120b 100644
--- a/src/lib/playlists.ts
+++ b/src/lib/playlists.ts
@@ -1,8 +1,46 @@
-interface Playlist {
- id: string;
- name: string;
+import { Playlist } from "@/types/playlist";
+import { fetchAPI } from "./api";
+
+const playlists = new Map();
+
+export async function getPlaylist(playlistId: string): Promise {
+ if (playlists.has(playlistId)) {
+ return playlists.get(playlistId)!;
+ }
+
+ const playlist = await fetchAPI(`/playlists/${playlistId}`);
+
+ playlists.set(playlistId, playlist);
+
+ return playlist;
}
-export function getPlaylists(): Playlist[] {
- return [];
+export async function getPlaylists(): Promise {
+ return fetchAPI("/me/playlists");
+}
+
+export function parseDuration(seconds: string | number) {
+ const hours = Math.floor(Number(seconds) / 3600);
+ seconds = Number(seconds) % 3600;
+
+ let minutes: string | number = Math.floor(seconds / 60);
+ seconds = seconds % 60;
+
+ let output = "";
+
+ if (hours > 0) {
+ output += `${hours}h `;
+ }
+
+ if (minutes > 0) {
+ if (minutes < 10 && hours > 0) minutes = `0${minutes}`;
+
+ output += `${minutes}m `;
+ }
+
+ if (seconds < 10) seconds = `0${seconds}`;
+
+ output += `${seconds}s`;
+
+ return output;
}
diff --git a/src/lib/store.ts b/src/lib/store.ts
new file mode 100644
index 0000000..94ec5f4
--- /dev/null
+++ b/src/lib/store.ts
@@ -0,0 +1,6 @@
+import { createStore } from "solid-js/store";
+
+export const [sizes, setSizes] = createStore({
+ sidebar: 320,
+ queue: 320,
+});
diff --git a/src/lib/time.ts b/src/lib/time.ts
new file mode 100644
index 0000000..bbc2f88
--- /dev/null
+++ b/src/lib/time.ts
@@ -0,0 +1,23 @@
+import time from "dayjs";
+
+import duration from "dayjs/plugin/duration";
+
+time.extend(duration);
+
+export default time;
+
+export interface ParseDuration {
+ hours: number;
+ minutes: number;
+ seconds: number;
+}
+
+export function parseDuration(seconds: number): ParseDuration {
+ const hours = Math.floor(seconds / 3600);
+ seconds = seconds % 3600;
+
+ const minutes = Math.floor(seconds / 60);
+ seconds = seconds % 60;
+
+ return { hours, minutes, seconds };
+}
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index ac680b3..951433c 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -1,6 +1,7 @@
-import { type ClassValue, clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
+import type { ClassValue } from "clsx"
+import { clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
export function cn(...inputs: ClassValue[]) {
- return twMerge(clsx(inputs));
-}
+ return twMerge(clsx(inputs))
+}
\ No newline at end of file
diff --git a/src/main.tsx b/src/main.tsx
index 53aed15..330ca07 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,13 +1,35 @@
-import { invoke } from "@tauri-apps/api/tauri";
-import { render } from "preact";
+/* @refresh reload */
+import { Route, Router } from "@solidjs/router";
+import { lazy } from "solid-js";
+import { render } from "solid-js/web";
+
+import "./index.css";
import App from "./App";
-import "./styles.css";
+const Library = lazy(() => import("./routes/library"));
+const Search = lazy(() => import("./routes/search"));
+const Artist = lazy(() => import("./routes/artists/[id]"));
+const Playlist = lazy(() => import("./routes/playlists/[id]"));
+const User = lazy(() => import("./routes/users/[id]"));
+const NotFound = lazy(() => import("./routes/not-found"));
-render(, document.getElementById("root")!);
+const root = document.getElementById("root");
-// Hide splashscreen when loaded.
-document.addEventListener("DOMContentLoaded", () =>
- invoke("close_splashscreen"),
+render(
+ () => (
+
+
+
+
+
+
+
+
+
+
+
+
+ ),
+ root!,
);
diff --git a/src/routes/artists/[id].tsx b/src/routes/artists/[id].tsx
new file mode 100644
index 0000000..9298fae
--- /dev/null
+++ b/src/routes/artists/[id].tsx
@@ -0,0 +1,16 @@
+import { useParams } from "@solidjs/router";
+import { createResource } from "solid-js";
+
+import { fetchAPI } from "@/lib/api";
+import { Artist as ArtistType } from "@/types/artist";
+
+export default function Artist() {
+ const params = useParams<{ artistId: string }>();
+ const [artist] = createResource(() => params.artistId, getArtist);
+
+ return {artist()?.name}
;
+}
+
+async function getArtist(artistId: string): Promise {
+ return fetchAPI(`/artists/${artistId}`);
+}
diff --git a/src/routes/library.tsx b/src/routes/library.tsx
new file mode 100644
index 0000000..77edf58
--- /dev/null
+++ b/src/routes/library.tsx
@@ -0,0 +1,7 @@
+export default function Library() {
+ return (
+
+
Library
+
+ );
+}
diff --git a/src/routes/not-found.tsx b/src/routes/not-found.tsx
new file mode 100644
index 0000000..905d7ff
--- /dev/null
+++ b/src/routes/not-found.tsx
@@ -0,0 +1,15 @@
+export default function NotFound() {
+ return (
+
+ );
+}
diff --git a/src/routes/playlists/[id].tsx b/src/routes/playlists/[id].tsx
new file mode 100644
index 0000000..86113b0
--- /dev/null
+++ b/src/routes/playlists/[id].tsx
@@ -0,0 +1,59 @@
+import { A, useParams } from "@solidjs/router";
+import { For, Show, createResource } from "solid-js";
+
+import { getPlaylist, parseDuration } from "@/lib/playlists";
+import NotFound from "../not-found";
+import Track from "./track";
+
+export default function Playlist() {
+ const params = useParams<{ playlistId: string }>();
+ const [playlist] = createResource(() => params.playlistId, getPlaylist);
+
+ return (
+ }>
+
+
+
+
+
+
+ Title
+ Album
+ Date added
+ Duration
+
+
}>
+ {(track) =>
}
+
+
+ 😭 No tracks...
+
+ );
+}
diff --git a/src/routes/playlists/track.tsx b/src/routes/playlists/track.tsx
new file mode 100644
index 0000000..6aa8888
--- /dev/null
+++ b/src/routes/playlists/track.tsx
@@ -0,0 +1,62 @@
+import { A } from "@solidjs/router";
+import { For, createSignal } from "solid-js";
+
+import * as Icons from "@/icons";
+
+import { Track as TrackType } from "@/types/track";
+import time, { parseDuration } from "@/lib/time";
+import { cn } from "@/lib/utils";
+import player from "@/lib/player";
+
+interface TrackProps {
+ track: TrackType;
+}
+
+export default function Track({ track }: TrackProps) {
+ const [liked, setLiked] = createSignal(false);
+
+ return (
+ player.changeTrack(track)}
+ >
+
+
+
{track.title}
+
+
+ {(artist, i) => (
+ <>
+
+ {artist.name}
+
+ {i() < track.artists.length - 1 && ", "}
+
+ )}
+
+
+
+
None
+
+ {Intl.DateTimeFormat("en-US", { dateStyle: "medium" }).format(
+ new Date(track.added_at),
+ )}
+
+
+ {time.duration(parseDuration(track.duration_ms)).format("m:ss")}
+
+
+
+
+
SEarch
;
+}
diff --git a/src/routes/settings.tsx b/src/routes/settings.tsx
new file mode 100644
index 0000000..8d4cc9e
--- /dev/null
+++ b/src/routes/settings.tsx
@@ -0,0 +1,7 @@
+export default function Settings() {
+ return (
+
+
Settings
+
+ );
+}
diff --git a/src/routes/users/[id].tsx b/src/routes/users/[id].tsx
new file mode 100644
index 0000000..8733475
--- /dev/null
+++ b/src/routes/users/[id].tsx
@@ -0,0 +1,154 @@
+import { A, useParams } from "@solidjs/router";
+import { For, Show, createResource, createSignal, useContext } from "solid-js";
+
+import { fetchAPI } from "@/lib/api";
+import { Playlist } from "@/types/playlist";
+import NotFound from "../not-found";
+import { UserContext } from "@/contexts/user";
+import { cn } from "@/lib/utils";
+
+export default function User() {
+ const { user: loggedInUser } = useContext(UserContext);
+ const params = useParams<{ userId: string }>();
+
+ const [user] = createResource(() => params.userId, getUser);
+ const [playlists] = createResource(() => params.userId, getUserPlaylists);
+
+ const isSelf = loggedInUser.id === user()?.id;
+
+ const [followed, setFollowed] = createSignal(false);
+
+ return (
+ }
+ children={Loading...
}
+ />
+ }
+ >
+
+
+ );
+}
+
+const users = new Map();
+
+async function getUser(userId: string): Promise {
+ if (users.has(userId)) {
+ return users.get(userId)!;
+ }
+
+ const user = await fetchAPI(`/users/${userId}`);
+
+ users.set(userId, user);
+
+ return user;
+}
+
+async function getUserPlaylists(userId: string): Promise {
+ return fetchAPI(`/users/${userId}/playlists`);
+}
+
+interface UserType {
+ id: string;
+ name: string;
+}
diff --git a/src/store/index.ts b/src/store/index.ts
deleted file mode 100644
index b2c21e6..0000000
--- a/src/store/index.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { signal } from "@preact/signals";
-
-export const dragging = signal({
- isDragging: false,
- width: Number(localStorage.getItem("sidebar-width") ?? 256),
-});
diff --git a/src/styles.css b/src/styles.css
deleted file mode 100644
index fe41075..0000000
--- a/src/styles.css
+++ /dev/null
@@ -1,35 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@font-face {
- font-family: "Rubik";
- font-weight: 400;
- src: url("./assets/fonts/Rubik-Regular.woff2");
-}
-@font-face {
- font-family: "Rubik";
- font-weight: 700;
- src: url("./assets/fonts/Rubik-Bold.woff2");
-}
-@font-face {
- font-family: "Rubik";
- font-weight: 900;
- src: url("./assets/fonts/Rubik-Black.woff2");
-}
-
-body {
- font-family: "Rubik";
- background-color: #131317;
- color: #eeeeff;
- overflow: hidden;
- border-radius: 10px;
-}
-
-* {
- @apply border-border;
-}
-
-body {
- @apply select-none bg-primary text-primary;
-}
diff --git a/src/types/artist.ts b/src/types/artist.ts
new file mode 100644
index 0000000..e17d98b
--- /dev/null
+++ b/src/types/artist.ts
@@ -0,0 +1,4 @@
+export interface Artist {
+ id: string;
+ name: string;
+}
diff --git a/src/types/playlist.ts b/src/types/playlist.ts
new file mode 100644
index 0000000..337fae8
--- /dev/null
+++ b/src/types/playlist.ts
@@ -0,0 +1,13 @@
+import { Artist } from "./artist";
+import { Track } from "./track";
+
+export interface Playlist {
+ id: string;
+ name: string;
+ playlist_type: "playlist" | "folder";
+ parent_id: string | null;
+ creator: Artist;
+ tracks: Track[];
+ tracks_count: number;
+ duration: number;
+}
diff --git a/src/types/track.ts b/src/types/track.ts
new file mode 100644
index 0000000..5e8cbfc
--- /dev/null
+++ b/src/types/track.ts
@@ -0,0 +1,19 @@
+import { Artist } from "./artist";
+
+export interface Track {
+ id: string;
+ title: string;
+ image: string;
+ duration: number;
+ artists: Artist[];
+
+ added_at?: string;
+}
+
+export const DEFAULT_TRACK: Track = {
+ id: "",
+ title: "",
+ image: "",
+ duration: 0,
+ artists: [],
+};
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 1d50fc6..88bdda7 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,74 +1,6 @@
-import type { Config } from "tailwindcss";
-
-const config = {
+/** @type {import('tailwindcss').Config} */
+export default {
darkMode: ["class"],
- content: ["./src/**/*.{ts,tsx}"],
- prefix: "",
- theme: {
- container: {
- center: true,
- padding: "2rem",
- screens: {
- "2xl": "1400px",
- },
- },
- extend: {
- textColor: {},
-
- backgroundColor: {
- primary: "#131317",
- secondary: "#16161C",
- tertiary: "#23202C",
- },
-
- colors: {
- accent: "#959EEE",
- border: "#232332",
-
- primary: "#EEEEFF",
- secondary: "#7A7A9A",
-
- input: "hsl(var(--input))",
- ring: "hsl(var(--ring))",
- destructive: {
- DEFAULT: "hsl(var(--destructive))",
- foreground: "hsl(var(--destructive-foreground))",
- },
- muted: {
- DEFAULT: "hsl(var(--muted))",
- foreground: "hsl(var(--muted-foreground))",
- },
- popover: {
- DEFAULT: "hsl(var(--popover))",
- foreground: "hsl(var(--popover-foreground))",
- },
- card: {
- DEFAULT: "hsl(var(--card))",
- foreground: "hsl(var(--card-foreground))",
- },
- },
- borderRadius: {
- lg: "var(--radius)",
- md: "calc(var(--radius) - 2px)",
- sm: "calc(var(--radius) - 4px)",
- },
- keyframes: {
- "accordion-down": {
- from: { height: "0" },
- to: { height: "var(--radix-accordion-content-height)" },
- },
- "accordion-up": {
- from: { height: "var(--radix-accordion-content-height)" },
- to: { height: "0" },
- },
- },
- animation: {
- "accordion-down": "accordion-down 0.2s ease-out",
- "accordion-up": "accordion-up 0.2s ease-out",
- },
- },
- },
- plugins: [require("tailwindcss-animate")],
-} satisfies Config;
-
-export default config;
+ content: ["./src/**/*.{html,js,jsx,md,mdx,ts,tsx}"],
+ presets: [require("./ui.preset.js")],
+};
diff --git a/tsconfig.json b/tsconfig.json
index 17e7e8e..9abaeea 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,33 +1,38 @@
{
"compilerOptions": {
- "target": "ESNext",
+ "target": "ES2020",
"useDefineForClassFields": true,
"module": "ESNext",
- "lib": ["ESNext", "DOM", "DOM.Iterable"],
+ "lib": [
+ "ES2020",
+ "DOM",
+ "DOM.Iterable"
+ ],
"skipLibCheck": true,
- "allowJs": true,
- /* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
- "jsx": "react-jsx",
- "jsxImportSource": "preact",
- /* Linting */
+ "jsx": "preserve",
+ "jsxImportSource": "solid-js",
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true,
"baseUrl": ".",
"paths": {
- "@/*": ["./src/*"]
+ "@/*": [
+ "./src/*"
+ ]
}
},
- "exclude": ["./src-tauri"],
+ "include": [
+ "src"
+ ],
"references": [
{
"path": "./tsconfig.node.json"
}
]
-}
+}
\ No newline at end of file
diff --git a/ui.config.json b/ui.config.json
new file mode 100644
index 0000000..b1fdf65
--- /dev/null
+++ b/ui.config.json
@@ -0,0 +1,11 @@
+{
+ "tsx": true,
+ "componentDir": "./src/components/ui",
+ "tailwind": {
+ "config": "tailwind.config.ts",
+ "css": "src/index.css"
+ },
+ "aliases": {
+ "path": "@/*"
+ }
+}
\ No newline at end of file
diff --git a/ui.preset.js b/ui.preset.js
new file mode 100644
index 0000000..3100743
--- /dev/null
+++ b/ui.preset.js
@@ -0,0 +1,103 @@
+const { fontFamily } = require("tailwindcss/defaultTheme");
+
+/**@type {import("tailwindcss").Config} */
+module.exports = {
+ darkMode: ["class"],
+ content: ["./src/**/*.{js,jsx,md,mdx,ts,tsx}"],
+ theme: {
+ container: {
+ center: true,
+ padding: "2rem",
+ screens: {
+ "2xl": "1400px",
+ },
+ },
+ extend: {
+ textColor: {},
+
+ backgroundColor: {
+ primary: "#131317",
+ secondary: "#16161C",
+ tertiary: "#23202C",
+ },
+
+ colors: {
+ accent: "#959EEE",
+ border: "#232332",
+
+ primary: "#EEEEFF",
+ secondary: "#7A7A9A",
+
+ // destructive: {
+ // DEFAULT: "hsl(var(--destructive))",
+ // foreground: "hsl(var(--destructive-foreground))",
+ // },
+ // info: {
+ // DEFAULT: "hsl(var(--info))",
+ // foreground: "hsl(var(--info-foreground))",
+ // },
+ // success: {
+ // DEFAULT: "hsl(var(--success))",
+ // foreground: "hsl(var(--success-foreground))",
+ // },
+ // warning: {
+ // DEFAULT: "hsl(var(--warning))",
+ // foreground: "hsl(var(--warning-foreground))",
+ // },
+ // error: {
+ // DEFAULT: "hsl(var(--error))",
+ // foreground: "hsl(var(--error-foreground))",
+ // },
+ // muted: {
+ // DEFAULT: "hsl(var(--muted))",
+ // foreground: "hsl(var(--muted-foreground))",
+ // },
+ // accent: {
+ // DEFAULT: "hsl(var(--accent))",
+ // foreground: "hsl(var(--accent-foreground))",
+ // },
+ // popover: {
+ // DEFAULT: "hsl(var(--popover))",
+ // foreground: "hsl(var(--popover-foreground))",
+ // },
+ // card: {
+ // DEFAULT: "hsl(var(--card))",
+ // foreground: "hsl(var(--card-foreground))",
+ // },
+ },
+ borderRadius: {
+ lg: "var(--radius)",
+ md: "calc(var(--radius) - 2px)",
+ sm: "calc(var(--radius) - 4px)",
+ },
+ fontFamily: {
+ sans: ["Inter", ...fontFamily.sans],
+ },
+ keyframes: {
+ "accordion-down": {
+ from: { height: 0 },
+ to: { height: "var(--kb-accordion-content-height)" },
+ },
+ "accordion-up": {
+ from: { height: "var(--kb-accordion-content-height)" },
+ to: { height: 0 },
+ },
+ "content-show": {
+ from: { opacity: 0, transform: "scale(0.96)" },
+ to: { opacity: 1, transform: "scale(1)" },
+ },
+ "content-hide": {
+ from: { opacity: 1, transform: "scale(1)" },
+ to: { opacity: 0, transform: "scale(0.96)" },
+ },
+ },
+ animation: {
+ "accordion-down": "accordion-down 0.2s ease-out",
+ "accordion-up": "accordion-up 0.2s ease-out",
+ "content-show": "content-show 0.2s ease-out",
+ "content-hide": "content-hide 0.2s ease-out",
+ },
+ },
+ },
+ plugins: [require("tailwindcss-animate")],
+};
diff --git a/vite.config.ts b/vite.config.ts
index 00e426d..5f0c09d 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,17 +1,15 @@
import path from "node:path";
import { defineConfig } from "vite";
-import preact from "@preact/preset-vite";
+import solid from "vite-plugin-solid";
-// https://vitejs.dev/config/
-export default defineConfig(async () => ({
- plugins: [preact()],
+export default defineConfig({
+ plugins: [solid()],
resolve: {
alias: {
"@": path.resolve(__dirname, "src"),
},
preserveSymlinks: true,
- dedupe: ["react", "react-dom"],
},
// Vite options tailored for Tauri development and only applied in `tauri dev` or `tauri build`
@@ -27,4 +25,4 @@ export default defineConfig(async () => ({
ignored: ["**/src-tauri/**"],
},
},
-}));
+});