4track 0.1.9 → 0.1.10

package/dist/audio/constants.d.ts

@@ -1,4 +1,4 @@
 import type { AudioEngineConfig } from "../types.js";
-export declare const PLAYBACK_TICK_MS = 50;
+export declare const PLAYBACK_TICK_MS = 32;
 export declare const DEFAULT_CONFIG: AudioEngineConfig;
 export declare const AUDIO_CONSTRAINTS: MediaTrackConstraints;

package/dist/audio/constants.js

@@ -1,6 +1,6 @@
 // Default configuration and constraints for the audio engine.
 import workletUrl from "../assets/recorder-worklet.js?url";
-export const PLAYBACK_TICK_MS = 50;
+export const PLAYBACK_TICK_MS = 32; // 30 fps
 export const DEFAULT_CONFIG = {
     sampleRate: 32000, // 44100 | 48000 | 96000
     bitDepth: 16, // 8 = lo-fi, 16 = CD quality, 32 = float (uncompressed)

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

@@ -9,6 +9,8 @@ export declare class AudioEngine {
     trimValue: number;
     recordingVolume: number;
     tracks: Track[];
+    /** Rounds a time value to 2 decimal places for position display. */
+    private roundPosition;
     private config;
     private audioContext;
     private masterGainNode;

package/dist/audio/engine.svelte.js

@@ -17,6 +17,10 @@ export class AudioEngine {
     trimValue = $state(-1);
     recordingVolume = $state(0.75);
     tracks;
+    /** Rounds a time value to 2 decimal places for position display. */
+    roundPosition(seconds) {
+        return Math.round(seconds * 100) / 100;
+    }
     // ─── Private state ──────────────────────────────────────────────────
     config;
     // Web Audio graph
@@ -172,7 +176,7 @@ export class AudioEngine {
         const max = this.getMaxDuration();
         const clamped = Math.max(0, Math.min(seconds, max));
         this.playbackOffset = clamped;
-        this.position = Math.round(clamped * 10) / 10;
+        this.position = this.roundPosition(clamped);
         if (this.playState === "playing") {
             this.stopSources(this.activePlaybackSources);
             this.clearPlaybackTick();
@@ -219,14 +223,14 @@ export class AudioEngine {
         }
         this.playbackStartTime = startTime;
         this.playbackOffset = offsetSeconds;
-        this.position = Math.round(offsetSeconds * 10) / 10;
+        this.position = this.roundPosition(offsetSeconds);
         this.playState = "playing";
         this.playbackTickId = window.setInterval(() => {
             const elapsed = ctx.currentTime - this.playbackStartTime;
-            this.position = Math.round((this.playbackOffset + elapsed) * 10) / 10;
+            this.position = this.roundPosition(this.playbackOffset + elapsed);
             if (elapsed >= effectiveDuration) {
                 this.playbackOffset = maxDuration;
-                this.position = Math.round(maxDuration * 10) / 10;
+                this.position = this.roundPosition(maxDuration);
                 this.clearPlaybackTick();
                 this.playState = "stopped";
             }
@@ -242,7 +246,7 @@ export class AudioEngine {
             this.stopSources(this.activePlaybackSources);
         }
         this.clearPlaybackTick();
-        this.position = Math.round(this.playbackOffset * 10) / 10;
+        this.position = this.roundPosition(this.playbackOffset);
         this.playState = "paused";
     }
     /** Stops playback or recording. If recording, finalizes and merges the recorded audio. */
@@ -258,7 +262,7 @@ export class AudioEngine {
                 this.stopSources(this.activePlaybackSources);
             }
             this.clearPlaybackTick();
-            this.position = Math.round(this.playbackOffset * 10) / 10;
+            this.position = this.roundPosition(this.playbackOffset);
         }
         this.playState = "stopped";
     }
@@ -457,7 +461,7 @@ export class AudioEngine {
         this.recordingTrackIndex = trackIndex;
         this.recordingLatencySeconds = recordLatencySeconds;
         this.punchInOffset = this.playbackOffset;
-        this.position = Math.round(this.punchInOffset * 10) / 10;
+        this.position = this.roundPosition(this.punchInOffset);
         this.playState = "recording";
         // Play other tracks for overdub monitoring, start meters and position timer
         this.playOtherTracksForMonitoring(trackIndex, this.punchInOffset);

package/dist/components/TransportButtons.svelte

@@ -43,8 +43,9 @@
   $effect(() => {
     let timer: ReturnType<typeof setInterval> | undefined
 
-    // Trigger stop when rewinding and reaching the end
+    // Trigger stop when rewinding and reaching the beginning
     if (speed < 0 && engine.position + speed / 50 <= 0) {
+      engine.seek(0)
       clicky("stop")
     }
     if (engine.position + speed / 50 > engine.duration) {

package/dist/components/els/DigitRoller.svelte

@@ -1,48 +1,34 @@
 <script lang="ts">
-  let { digit = 0 } = $props()
+  let { timestamp = 0, index = 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 = ""
+  function sigmoidEase(x: number, k: number, midpoint: number) {
+    const f = (v: number) => 1 / (1 + Math.exp(-k * (v - midpoint)))
+    return (f(x) - f(0)) / (f(1) - f(0))
   }
 
   $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)
-    }
+    // Get the value at this digit position (index 0=hundreds, 1=tens, 2=ones)
+    const divisor = Math.pow(10, 2 - index) //1, 10, 100
+    const value = (timestamp / divisor) % 10
 
-    prev = d
-  })
+    // Split into whole digit and fractional part for smooth rolling
+    const digit = Math.floor(value)
+    const fraction = value - digit
 
-  function onTransitionEnd() {
-    if (!wrapping) return
-    wrapping = false
-    jumpTo(pos(+digit))
-  }
+    const eased = divisor == 1 ? fraction : sigmoidEase(fraction, divisor == 10 ? 12 : 50, divisor == 10 ? 0.98 : 0.9995)
+    roller.style.transform = pos(digit + eased)
+  })
 </script>
 
 <div class="digits">
-  <div class="roller" bind:this={roller} ontransitionend={onTransitionEnd}>
+  <div class="roller" bind:this={roller}>
     {#each [9, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0] as n}
       <div class="digit"><span>{n}</span></div>
     {/each}
@@ -69,9 +55,9 @@
       transform: translateY(-2cqw);
     }
   }
-  .roller {
+  /* .roller {
     transition: 0.4s ease transform;
-  }
+  } */
   .digit {
     font-size: 35cqh;
     /* letter-spacing: 7cqw; */

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

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

package/dist/components/els/DigitRollerFirst.svelte

@@ -0,0 +1,82 @@
+<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

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

package/dist/components/els/Timestamp.svelte

@@ -4,30 +4,21 @@
 <script lang="ts">
   let { timestamp } = $props()
   import { playFx } from "../../fx/soundfx"
+  import { Tween } from "svelte/motion"
   import DigitRoller from "./DigitRoller.svelte"
-  import counterBgImg from '../../assets/counter_bg.png'
+  import counterBgImg from "../../assets/counter_bg.png"
 
-  let correction = $state(0)
-  function count_to_str(nr: number) {
-    var cor_nr = Math.floor(nr - correction)
-    if (cor_nr < 0) cor_nr += 1000
+  const correction = new Tween(0)
 
-    if (cor_nr > 99) {
-      return cor_nr.toString()
-    } else if (cor_nr > 9) {
-      return "0" + cor_nr.toString()
-    } else {
-      return "00" + cor_nr.toString()
-    }
-  }
-
-  function get_digit(nr, i) {
-    return count_to_str(nr).charAt(i)
-  }
+  let corrected = $derived.by(() => {
+    let v = timestamp - correction.current
+    if (v < 0) v += 1000
+    return v % 1000
+  })
 
   function reset() {
     playFx("counter")
-    correction = timestamp
+    correction.set(timestamp, { duration: 400 })
   }
 </script>
 
@@ -37,9 +28,9 @@
   <div class="counter">
     <a onmousedown={() => reset()}>&nbsp;</a>
     <div class="number-ticker">
-      <DigitRoller digit={get_digit(timestamp, 0)} />
-      <DigitRoller digit={get_digit(timestamp, 1)} />
-      <DigitRoller digit={get_digit(timestamp, 2)} />
+      <DigitRoller timestamp={corrected} index={0} />
+      <DigitRoller timestamp={corrected} index={1} />
+      <DigitRoller timestamp={corrected} index={2} />
     </div>
   </div>
 </div>

package/package.json

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