Format

Author: thetarnav

packages/audio/dev/index.tsx

@@ -5,19 +5,63 @@ import { createAudio, AudioState } from "../src/index.js";
 // import { play, pause } from "solid-heroicons/solid";
 // import { speakerWave } from "solid-heroicons/outline";
 
-type IconPath = {path: () => JSX.Element; outline?: boolean; mini?: boolean}
-type IconProps = JSX.SvgSVGAttributes<SVGSVGElement> & {path: IconPath}
+type IconPath = { path: () => JSX.Element; outline?: boolean; mini?: boolean };
+type IconProps = JSX.SvgSVGAttributes<SVGSVGElement> & { path: IconPath };
 
 const Icon = (props: IconProps) => {
   const [internal, external] = splitProps(props, ["path"]);
-  return (<svg viewBox={internal.path.mini ? "0 0 20 20" : "0 0 24 24"} fill={internal.path.outline ? "none" : "currentColor"} stroke={internal.path.outline ? "currentColor" : "none"} stroke-width={internal.path.outline ? 1.5 : undefined} {...external}>
-    {internal.path.path()}
-  </svg>);
+  return (
+    <svg
+      viewBox={internal.path.mini ? "0 0 20 20" : "0 0 24 24"}
+      fill={internal.path.outline ? "none" : "currentColor"}
+      stroke={internal.path.outline ? "currentColor" : "none"}
+      stroke-width={internal.path.outline ? 1.5 : undefined}
+      {...external}
+    >
+      {internal.path.path()}
+    </svg>
+  );
 };
 
-const play: IconPath = { path: () => <><path fill-rule="evenodd" d="M4.5 5.653c0-1.426 1.529-2.33 2.779-1.643l11.54 6.348c1.295.712 1.295 2.573 0 3.285L7.28 19.991c-1.25.687-2.779-.217-2.779-1.643V5.653z" clip-rule="evenodd"/></>, outline: false, mini: false };
-const pause: IconPath = { path: () => <><path fill-rule="evenodd" d="M6.75 5.25a.75.75 0 01.75-.75H9a.75.75 0 01.75.75v13.5a.75.75 0 01-.75.75H7.5a.75.75 0 01-.75-.75V5.25zm7.5 0A.75.75 0 0115 4.5h1.5a.75.75 0 01.75.75v13.5a.75.75 0 01-.75.75H15a.75.75 0 01-.75-.75V5.25z" clip-rule="evenodd"/></>, outline: false, mini: false };
-const speakerWave: IconPath = { path: () => <><path stroke-linecap="round" stroke-linejoin="round" d="M19.114 5.636a9 9 0 010 12.728M16.463 8.288a5.25 5.25 0 010 7.424M6.75 8.25l4.72-4.72a.75.75 0 011.28.53v15.88a.75.75 0 01-1.28.53l-4.72-4.72H4.51c-.88 0-1.704-.507-1.938-1.354A9.01 9.01 0 012.25 12c0-.83.112-1.633.322-2.396C2.806 8.756 3.63 8.25 4.51 8.25H6.75z"/></>, outline: true, mini: false };
+const play: IconPath = {
+  path: () => (
+    <>
+      <path
+        fill-rule="evenodd"
+        d="M4.5 5.653c0-1.426 1.529-2.33 2.779-1.643l11.54 6.348c1.295.712 1.295 2.573 0 3.285L7.28 19.991c-1.25.687-2.779-.217-2.779-1.643V5.653z"
+        clip-rule="evenodd"
+      />
+    </>
+  ),
+  outline: false,
+  mini: false,
+};
+const pause: IconPath = {
+  path: () => (
+    <>
+      <path
+        fill-rule="evenodd"
+        d="M6.75 5.25a.75.75 0 01.75-.75H9a.75.75 0 01.75.75v13.5a.75.75 0 01-.75.75H7.5a.75.75 0 01-.75-.75V5.25zm7.5 0A.75.75 0 0115 4.5h1.5a.75.75 0 01.75.75v13.5a.75.75 0 01-.75.75H15a.75.75 0 01-.75-.75V5.25z"
+        clip-rule="evenodd"
+      />
+    </>
+  ),
+  outline: false,
+  mini: false,
+};
+const speakerWave: IconPath = {
+  path: () => (
+    <>
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M19.114 5.636a9 9 0 010 12.728M16.463 8.288a5.25 5.25 0 010 7.424M6.75 8.25l4.72-4.72a.75.75 0 011.28.53v15.88a.75.75 0 01-1.28.53l-4.72-4.72H4.51c-.88 0-1.704-.507-1.938-1.354A9.01 9.01 0 012.25 12c0-.83.112-1.633.322-2.396C2.806 8.756 3.63 8.25 4.51 8.25H6.75z"
+      />
+    </>
+  ),
+  outline: true,
+  mini: false,
+};
 
 const formatTime = (time: number) => new Date(time * 1000).toISOString().substr(14, 8);
 

packages/audio/src/index.ts

@@ -28,11 +28,11 @@ export type AudioEventHandlers = {
 // Helper for producing the audio source
 const unwrapSource = (src: AudioSource) => {
   if (src instanceof HTMLAudioElement) {
-    return src
+    return src;
   }
   const player = new Audio();
-  setAudioSrc(player, src)
-  return player
+  setAudioSrc(player, src);
+  return player;
 };
 
 function setAudioSrc(el: HTMLAudioElement, src: AudioSource) {
@@ -58,15 +58,15 @@ export const makeAudio = (
 
   onMount(() => {
     for (const [name, handler] of Object.entries(handlers)) {
-      player.addEventListener(name, handler as any)
+      player.addEventListener(name, handler as any);
     }
   });
   onCleanup(() => {
     player.pause();
     for (const [name, handler] of Object.entries(handlers)) {
-      player.removeEventListener(name, handler as any)
+      player.removeEventListener(name, handler as any);
     }
-  })
+  });
 
   return player;
 };
@@ -194,7 +194,12 @@ export const createAudio = (
     volume: 0,
   });
 
-  const { play, pause, setVolume: _setVolume, seek } = makeAudioPlayer(store.player, {
+  const {
+    play,
+    pause,
+    setVolume: _setVolume,
+    seek,
+  } = makeAudioPlayer(store.player, {
     loadeddata: () => {
       setStore({
         state: AudioState.READY,
@@ -217,9 +222,9 @@ export const createAudio = (
   });
 
   const setVolume = (volume: number) => {
-    setStore("volume", volume)
-    _setVolume(volume)
-  }
+    setStore("volume", volume);
+    _setVolume(volume);
+  };
 
   // Bind reactive properties as needed
   if (src instanceof Function) {
@@ -228,7 +233,7 @@ export const createAudio = (
       if (newSrc instanceof HTMLAudioElement) {
         setStore("player", newSrc);
       } else {
-        setAudioSrc(store.player, newSrc)
+        setAudioSrc(store.player, newSrc);
       }
       seek(0);
     });

packages/audio/test/index.test.ts

@@ -74,12 +74,12 @@ describe("createAudio", () => {
     }));
 
   it("should set the COMPLETE state when audio ends", () => {
-    const [[audio], dispose] = createRoot(dispose => [createAudio({} as MediaSource), dispose])
-    expect(audio.state).toBe(AudioState.LOADING)
+    const [[audio], dispose] = createRoot(dispose => [createAudio({} as MediaSource), dispose]);
+    expect(audio.state).toBe(AudioState.LOADING);
 
     audio.player.dispatchEvent(new Event("ended"));
-    expect(audio.state).toBe(AudioState.COMPLETE)
+    expect(audio.state).toBe(AudioState.COMPLETE);
 
     dispose();
-  })
-});
+  });
+});