4track 0.1.10 → 0.1.12

package/dist/audio/engine.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { AudioEngineConfig, MicStatus, PlayState } from "../types.js";
+import type { AudioEngineConfig, MicStatus, PlayState, ProjectMeta } from "../types.js";
 import { Track } from "./track.svelte.js";
 export declare class AudioEngine {
     playState: PlayState;
@@ -8,6 +8,7 @@ export declare class AudioEngine {
     latencyInfo: string;
     trimValue: number;
     recordingVolume: number;
+    meta: ProjectMeta;
     tracks: Track[];
     /** Rounds a time value to 2 decimal places for position display. */
     private roundPosition;

package/dist/audio/engine.svelte.js

@@ -16,6 +16,7 @@ export class AudioEngine {
     latencyInfo = $state("");
     trimValue = $state(-1);
     recordingVolume = $state(0.75);
+    meta = $state({ artist: "", title: "", comment: "" });
     tracks;
     /** Rounds a time value to 2 decimal places for position display. */
     roundPosition(seconds) {
@@ -577,12 +578,13 @@ export class AudioEngine {
     // ─── Save / Load ────────────────────────────────────────────────────
     /** Serializes all tracks and settings into a compressed .4trk binary blob. */
     exportProject() {
-        return _exportProject(this.tracks, this.config, this.masterVolume);
+        return _exportProject(this.tracks, this.config, this.masterVolume, this.meta);
     }
     /** Loads a .4trk file, restoring all track buffers, mixer settings, and master volume. */
     async importProject(file) {
-        const { masterVolume } = await _importProject(file, this.tracks, () => this.ensureContext());
+        const { masterVolume, meta } = await _importProject(file, this.tracks, () => this.ensureContext());
         this.setMasterVolume(masterVolume);
+        this.meta = meta;
         this.rewind();
     }
     // ─── Cleanup ────────────────────────────────────────────────────────

package/dist/audio/project-io.d.ts

@@ -1,6 +1,7 @@
 import { Track } from './track.svelte.js';
-import type { AudioEngineConfig } from '../types.js';
-export declare function exportProject(tracks: Track[], config: AudioEngineConfig, masterVolume: number): Promise<Blob>;
+import type { AudioEngineConfig, ProjectMeta } from '../types.js';
+export declare function exportProject(tracks: Track[], config: AudioEngineConfig, masterVolume: number, meta?: ProjectMeta): Promise<Blob>;
 export declare function importProject(file: File | Blob, tracks: Track[], ensureContext: () => AudioContext): Promise<{
     masterVolume: number;
+    meta: ProjectMeta;
 }>;

package/dist/audio/project-io.js

@@ -3,7 +3,7 @@
 // Uses integer quantization from ./pcm.ts for compact storage.
 import { Track } from './track.svelte.js';
 import { quantizePCM, dequantizePCM } from './pcm.js';
-export async function exportProject(tracks, config, masterVolume) {
+export async function exportProject(tracks, config, masterVolume, meta = { artist: '', title: '', comment: '' }) {
     const trackMeta = [];
     const pcmParts = [];
     for (const track of tracks) {
@@ -37,6 +37,12 @@ export async function exportProject(tracks, config, masterVolume) {
         masterVolume,
         tracks: trackMeta,
     };
+    if (meta.artist)
+        metadata.artist = meta.artist.slice(0, 64);
+    if (meta.title)
+        metadata.title = meta.title.slice(0, 64);
+    if (meta.comment)
+        metadata.comment = meta.comment.slice(0, 256);
     const encoder = new TextEncoder();
     const metaBytes = encoder.encode(JSON.stringify(metadata));
     const metaLength = new Uint32Array([metaBytes.length]);
@@ -84,5 +90,12 @@ export async function importProject(file, tracks, ensureContext) {
         if (track.panNode)
             track.panNode.pan.value = track.pan;
     }
-    return { masterVolume: metadata.masterVolume ?? 1.0 };
+    return {
+        masterVolume: metadata.masterVolume ?? 1.0,
+        meta: {
+            artist: metadata.artist ?? '',
+            title: metadata.title ?? '',
+            comment: metadata.comment ?? '',
+        },
+    };
 }

package/dist/components/FourTrack.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { AudioEngine } from "../audio/engine.svelte.js"
-  import type { HiddenTrackConfig, LoadStatus } from "../types.js"
+  import type { HiddenTrackConfig, LoadStatus, ProjectMeta } from "../types.js"
   import casetteHissUrl from "../assets/casette_hiss_compressed.mp3"
   import noiseImg from "../assets/noise_50.jpg"
   import logoImg from "../assets/logo.svg?url"
@@ -23,6 +23,7 @@
     initialProject,
     status = $bindable<LoadStatus>("idle"),
     loadProgress = $bindable(0),
+    meta = $bindable<ProjectMeta>({ artist: "", title: "", comment: "" }),
   }: {
     hiddenTracks?: HiddenTrackConfig[]
     onready?: (detail: { engine: AudioEngine }) => void
@@ -31,6 +32,7 @@
     initialProject?: string | File
     status?: LoadStatus
     loadProgress?: number
+    meta?: ProjectMeta
   } = $props()
 
   let engine: AudioEngine | null = $state(null)
@@ -39,6 +41,7 @@
   let recordEngaged = $state(false)
   let resetTransport: (() => void) | undefined = $state()
 
+
   async function fetchWithProgress(url: string): Promise<File> {
     const response = await fetch(url)
     const contentLength = response.headers.get("Content-Length")
@@ -76,7 +79,10 @@
     engine = new AudioEngine({ hiddenTracks })
     engine.initAudioContext()
 
-    save = () => engine!.exportProject()
+    save = () => {
+      engine!.meta = { ...meta }
+      return engine!.exportProject()
+    }
     load = async (source: File | string) => {
       status = "loading"
       loadProgress = 0
@@ -84,6 +90,7 @@
         const file =
           typeof source === "string" ? await fetchWithProgress(source) : source
         await engine!.importProject(file)
+        meta = { ...engine!.meta }
         resetTransport?.()
         status = "ready"
       } catch (e) {

package/dist/components/FourTrack.svelte.d.ts

@@ -1,5 +1,5 @@
 import { AudioEngine } from "../audio/engine.svelte.js";
-import type { HiddenTrackConfig, LoadStatus } from "../types.js";
+import type { HiddenTrackConfig, LoadStatus, ProjectMeta } from "../types.js";
 type $$ComponentProps = {
     hiddenTracks?: HiddenTrackConfig[];
     onready?: (detail: {
@@ -10,7 +10,8 @@ type $$ComponentProps = {
     initialProject?: string | File;
     status?: LoadStatus;
     loadProgress?: number;
+    meta?: ProjectMeta;
 };
-declare const FourTrack: import("svelte").Component<$$ComponentProps, {}, "save" | "load" | "status" | "loadProgress">;
+declare const FourTrack: import("svelte").Component<$$ComponentProps, {}, "meta" | "save" | "load" | "status" | "loadProgress">;
 type FourTrack = ReturnType<typeof FourTrack>;
 export default FourTrack;

package/dist/components/els/DigitRoller.svelte

@@ -22,7 +22,14 @@
     const digit = Math.floor(value)
     const fraction = value - digit
 
-    const eased = divisor == 1 ? fraction : sigmoidEase(fraction, divisor == 10 ? 12 : 50, divisor == 10 ? 0.98 : 0.9995)
+    const eased =
+      divisor == 1
+        ? fraction
+        : sigmoidEase(
+            fraction,
+            divisor == 10 ? 12 : 50,
+            divisor == 10 ? 0.98 : 0.9995,
+          )
     roller.style.transform = pos(digit + eased)
   })
 </script>

package/dist/index.d.ts

@@ -1,4 +1,4 @@
 export { AudioEngine } from './audio/engine.svelte.js';
 export { Track } from './audio/track.svelte.js';
 export { default as FourTrack } from './components/FourTrack.svelte';
-export type { AudioEngineConfig, HiddenTrackConfig, TrimFxConfig, ProjectMetadata, TrackMeta, PlayState, LoadStatus } from './types.js';
+export type { AudioEngineConfig, HiddenTrackConfig, TrimFxConfig, ProjectMetadata, ProjectMeta, TrackMeta, PlayState, LoadStatus } from './types.js';

package/dist/types.d.ts

@@ -34,6 +34,14 @@ export interface ProjectMetadata {
     bitDepth: number;
     masterVolume: number;
     tracks: TrackMeta[];
+    artist?: string;
+    title?: string;
+    comment?: string;
+}
+export interface ProjectMeta {
+    artist: string;
+    title: string;
+    comment: string;
 }
 export type PlayState = 'stopped' | 'playing' | 'paused' | 'recording';
 export type MicStatus = 'unsupported' | 'prompt' | 'denied' | 'no-device' | 'inactive' | 'active' | 'error';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "4track",
-  "version": "0.1.10",
+  "version": "0.1.12",
   "description": "A 4-track cassette recorder component for Svelte 5",
   "license": "GPL-3.0-only",
   "author": "Andre Boekhorst",

package/dist/components/els/DigitRollerFirst.svelte

@@ -1,82 +0,0 @@
-<script lang="ts">
-  let { digit = 0 } = $props()
-
-  let roller: HTMLDivElement
-  let prev = -1
-  let wrapping = false
-  const step = 100 / 12
-  const pos = (d: number) => `translateY(${-step * (1 + d)}%)`
-
-  function jumpTo(transform: string) {
-    roller.style.transition = "none"
-    roller.style.transform = transform
-    roller.offsetHeight
-    roller.style.transition = ""
-  }
-
-  $effect(() => {
-    const d = +digit
-    if (!roller) return
-
-    if (prev === -1) {
-      jumpTo(pos(d))
-    } else if (prev === 9 && d === 0) {
-      wrapping = true
-      roller.style.transform = `translateY(${-step * 11}%)`
-    } else if (prev === 0 && d === 9) {
-      wrapping = true
-      roller.style.transform = `translateY(0%)`
-    } else {
-      wrapping = false
-      roller.style.transform = pos(d)
-    }
-
-    prev = d
-  })
-
-  function onTransitionEnd() {
-    if (!wrapping) return
-    wrapping = false
-    jumpTo(pos(+digit))
-  }
-</script>
-
-<div class="digits">
-  <div class="roller" bind:this={roller} ontransitionend={onTransitionEnd}>
-    {#each [9, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0] as n}
-      <div class="digit"><span>{n}</span></div>
-    {/each}
-  </div>
-</div>
-
-<style>
-  .digits {
-    overflow: hidden;
-    height: 20cqw;
-    width: 17cqw;
-    text-align: center;
-    color: #cfcdd3;
-    background: linear-gradient(to bottom, #474748, #000000, #545454);
-    border-right: 2px solid rgb(33, 33, 33);
-    font-family: sans-serif;
-    &:nth-child(1) {
-      transform: translateY(-1.5cqw);
-    }
-    &:nth-child(2) {
-      transform: translateY(-0.5cqw);
-    }
-    &:nth-child(3) {
-      transform: translateY(-2cqw);
-    }
-  }
-  .roller {
-    transition: 0.4s ease transform;
-  }
-  .digit {
-    font-size: 35cqh;
-    /* letter-spacing: 7cqw; */
-  }
-  .span {
-    padding-left: 1cqw;
-  }
-</style>

package/dist/components/els/DigitRollerFirst.svelte.d.ts

@@ -1,5 +0,0 @@
-declare const DigitRollerFirst: import("svelte").Component<{
-    digit?: number;
-}, {}, "">;
-type DigitRollerFirst = ReturnType<typeof DigitRollerFirst>;
-export default DigitRollerFirst;