4track 0.1.0

package/dist/components/TransportButtons.svelte

@@ -0,0 +1,299 @@
+<script lang="ts">
+  import type { AudioEngine } from ".."
+  import Light from "./els/Light.svelte"
+  import { playFx, playLoop, stopLoop } from "../fx/soundfx"
+  import btnNormalImg from '../assets/btn_normal.png'
+  import btnPressedImg from '../assets/btn_pressed.png'
+  import { btnRecSvg, btnPlaySvg, btnPauseSvg, btnRewSvg, btnFwdSvg, btnStopSvg } from '../assets/svg-icons.js'
+
+  const btnIcons: Record<string, string> = {
+    record: btnRecSvg,
+    play: btnPlaySvg,
+    pause: btnPauseSvg,
+    rew: btnRewSvg,
+    ffwd: btnFwdSvg,
+    stop: btnStopSvg,
+  }
+
+  let {
+    engine,
+    selectedTrack,
+    speed = $bindable(0),
+    recordEngaged = $bindable(false),
+  }: {
+    engine: AudioEngine
+    selectedTrack: number
+    speed: number
+    recordEngaged: boolean
+  } = $props()
+
+  let btns = $state({
+    record: { pressed: false },
+    play: { pressed: false },
+    rew: { pressed: false },
+    ffwd: { pressed: false },
+    stop: { pressed: false },
+    pause: { pressed: false },
+  })
+
+  let isPaused = $state(false)
+
+  $effect(() => {
+    let timer: ReturnType<typeof setInterval> | undefined
+
+    // Trigger stop when rewinding and reaching the end
+    if (speed < 0 && engine.position + speed / 50 <= 0) {
+      clicky("stop")
+    }
+    if (engine.position + speed / 50 > engine.duration) {
+      clicky("stop")
+    }
+
+    if (speed != 0) {
+      timer = setInterval(() => {
+        var newpos = Math.max(0, engine.position + speed / 50)
+        newpos = Math.min(newpos, engine.duration)
+        engine.seek(newpos)
+      }, 10)
+    }
+
+    return () => {
+      clearInterval(timer)
+    }
+  })
+
+  function reset() {
+    engine.stop()
+    engine.stopMonitoring()
+    speed = 0
+    recordEngaged = false
+
+    Object.entries(btns).forEach(([type, btn]) => {
+      if (type == "pause") return
+      btn.pressed = false
+    })
+  }
+
+  function clicky(btnType: string) {
+    switch (btnType) {
+      case "play":
+        if (btns.play.pressed) return
+        playFx("play")
+        if (btns.ffwd.pressed || btns.rew.pressed) {
+          stopLoop("ffwd")
+          playFx("stop")
+        }
+        reset()
+        btns.play.pressed = true
+        if (!isPaused) engine.play()
+        break
+      case "stop":
+        reset()
+        playFx("stop")
+        stopLoop("ffwd")
+
+        break
+      case "pause":
+        isPaused = !isPaused
+        btns.pause.pressed = isPaused
+        if (isPaused) {
+          playFx("pause")
+
+          engine.stop()
+          if (btns.record.pressed) {
+            engine.startMonitoring(selectedTrack)
+          }
+        } else {
+          playFx("pause")
+
+          if (btns.record.pressed) {
+            engine.record(selectedTrack)
+          } else if (btns.play.pressed) {
+            engine.play()
+          }
+        }
+        break
+      case "record":
+        if (btns.record.pressed) return
+        playFx("record")
+        if (btns.ffwd.pressed || btns.rew.pressed) {
+          stopLoop("ffwd")
+          playFx("stop")
+        }
+        reset()
+        btns.record.pressed = true
+        btns.play.pressed = true
+        recordEngaged = true
+        if (isPaused) {
+          engine.startMonitoring(selectedTrack)
+        } else {
+          engine.record(selectedTrack)
+        }
+        break
+      case "rew":
+        if (btns.play.pressed || btns.ffwd.pressed) {
+          playFx("stop")
+        }
+        reset()
+        if (engine.position != 0) {
+          playLoop("ffwd")
+          btns.rew.pressed = true
+          speed = -8
+        }
+        break
+      case "ffwd":
+        if (btns.play.pressed || btns.rew.pressed) {
+          playFx("stop")
+        }
+        reset()
+        playLoop("ffwd")
+        btns.ffwd.pressed = true
+        speed = 8
+        break
+    }
+  }
+</script>
+
+<div class="ctrlButtons" style:--btn-normal="url({btnNormalImg})" style:--btn-pressed="url({btnPressedImg})">
+  <div class="rec-light">
+    <Light
+      color="red"
+      active={btns.record.pressed}
+      pulsing={btns.record.pressed && isPaused ? "slow" : false}
+    />
+  </div>
+  <div class="btnLabels">
+    {#each Object.entries(btns) as [type, btn]}
+      <div class="btnLabel ui-label {type}">{type}</div>
+    {/each}
+  </div>
+  <div class="controlBtns">
+    <div class="imgBtns">
+      {#each Object.entries(btns) as [type, btn]}
+        <button
+          type="button"
+          class="btn {type}"
+          class:active={btn.pressed}
+          onmousedown={() => clicky(type)}
+          style:--btn-icon="url('{btnIcons[type]}')"
+        >
+        </button>
+      {/each}
+    </div>
+    <div class="after">&nbsp;</div>
+  </div>
+</div>
+
+<style>
+  .rec-light {
+    position: absolute;
+    height: 3cqw;
+    width: 3cqw;
+    left: -0.5cqw;
+    &.active {
+      opacity: 1;
+    }
+    /* &:before {
+      display: block;
+      content: " ";
+      border-top: 2px solid white;
+      width: 10px;
+    } */
+  }
+
+  .ctrlButtons {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    /* container-type: size; */
+    flex: 1; /* if parent container is flex */
+    padding: 0 0 0 2cqw;
+    position: relative;
+  }
+  .controlBtns {
+    background: linear-gradient(to bottom right, #3d3c43, #646468);
+    width: 100%;
+    border-radius: 0.5cqw;
+    box-shadow:
+      inset 0.45cqw 0.45cqw 1.4cqw rgba(0, 0, 0, 0.6),
+      inset -0.01cqw -0.1cqw 0.1cqw rgba(255, 255, 255, 0.5);
+    display: flex;
+    flex-direction: column;
+    padding-top: 0.23cqw;
+    padding-left: 0.15cqw;
+    padding-right: 0.15cqw;
+    perspective: 182cqw;
+  }
+  .imgBtns {
+    padding: 0.1cqw;
+    border-radius: 0.45cqw;
+    background-color: #212121;
+    display: flex;
+  }
+  .btnLabels {
+    display: flex;
+    width: 99%;
+    div {
+      flex: 1;
+      text-align: center;
+      padding-bottom: 0.5cqw;
+    }
+    .record {
+      color: rgb(200, 60, 35);
+      text-shadow: 0px 0px 2px #0000007d;
+      transform: translateX(-0.8cqw);
+      &:before {
+        content: "─ ";
+        color: white;
+        opacity: 0.4;
+      }
+    }
+  }
+  .btn {
+    appearance: none;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+    background-color: transparent;
+    background-image: var(--btn-normal);
+    background-size: cover;
+    background-position: center;
+    flex: 1;
+    aspect-ratio: 70 / 87;
+    margin-right: 0.2cqw;
+    box-shadow: 3.4cqw 3.4cqw 5cqw rgba(0, 0, 0, 0.6);
+    position: relative;
+
+    &:before {
+      display: block;
+      content: " ";
+      position: absolute;
+      top: 18%;
+      width: 100%;
+      height: 17%;
+      background-image: var(--btn-icon);
+      background-size: contain;
+      background-position: center;
+      mix-blend-mode: overlay;
+      background-repeat: no-repeat;
+    }
+  }
+  .btn.active,
+  .btn:active {
+    background-image: var(--btn-pressed);
+    box-shadow:
+      inset 1.1cqw 0 3.4cqw rgba(0, 0, 0, 0.4),
+      2.3cqw 2.3cqw 4.5cqw rgba(0, 0, 0, 0.6);
+
+    &:before {
+      top: 31%;
+      transform: rotateX(32deg);
+    }
+  }
+  .btn.active + .btn.active {
+    box-shadow: 2.3cqw 2.3cqw 4.5cqw rgba(0, 0, 0, 0.6);
+  }
+  .after {
+    height: 5cqh;
+  }
+</style>

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

@@ -0,0 +1,10 @@
+import type { AudioEngine } from "..";
+type $$ComponentProps = {
+    engine: AudioEngine;
+    selectedTrack: number;
+    speed: number;
+    recordEngaged: boolean;
+};
+declare const TransportButtons: import("svelte").Component<$$ComponentProps, {}, "speed" | "recordEngaged">;
+type TransportButtons = ReturnType<typeof TransportButtons>;
+export default TransportButtons;

package/dist/components/els/DigitRoller.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/DigitRoller.svelte.d.ts

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

package/dist/components/els/Knob.svelte

@@ -0,0 +1,267 @@
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<script lang="ts">
+  let rotating = $state(false)
+  let _dragStart = $state(0)
+  let _dragDelta = $state(0)
+  let containerEl = $state()
+  let yStart = $state()
+
+  let internalValue = $state(0) // always between 0-1, transalte later
+
+  let {
+    min,
+    max,
+    value = $bindable(),
+    onchange,
+    label,
+    labelLeft,
+    labelRight,
+    color,
+  } = $props()
+
+  const startRotate = (e) => {
+    // triggered once
+    rotating = true
+    _dragStart = normalizeValue(value) // is this copying the value or becoming a reference?
+    _dragDelta = 0
+    yStart = e.clientY
+
+    // needed to keep tracking pointermove, even if it is outside
+    e.target.setPointerCapture(e.pointerId)
+  }
+
+  const rotate = (e) => {
+    // trigggered continously
+    if (!rotating) return // not sure why/if its needed?
+
+    const rect = containerEl.getBoundingClientRect()
+    const yMove = yStart - e.clientY // it should be the difference from where it initially started.
+
+    // max drag area is 4 times the height
+    _dragDelta = yMove / rect.height / 4
+    internalValue = Math.max(0, Math.min(_dragStart + _dragDelta, 1))
+
+    // Trigger Callback
+    onchange?.(denormalizeValue(internalValue))
+  }
+
+  const stopRotate = (e) => {
+    rotating = false
+    e.target.releasePointerCapture?.(e.pointerId)
+  }
+
+  // Take the value and put it on a 0-1 scale
+  function denormalizeValue(internalValue: number) {
+    var spread = max - min
+    return min + internalValue * spread
+  }
+
+  function normalizeValue(val: number) {
+    var spread = max - min
+    return (val - min) / spread
+  }
+
+  // Ensures that the button goes from 8-4o'clock
+  // Deliberately a bit extended at start and end.
+  function mapToKnob(val: number) {
+    return val * 0.73 - 0.37
+  }
+</script>
+
+<div class="knob-frame {color}">
+  <div class="knob-label">{label}</div>
+  <div class="knobx">
+    <div
+      class="knobcontainer"
+      bind:this={containerEl}
+      onpointermove={rotate}
+      onpointerup={stopRotate}
+      onpointerleave={stopRotate}
+    >
+      <div class="knob" onpointerdown={startRotate} class:dragging={rotating}>
+        <div class="layer1">
+          <div class="layer2">
+            <div class="layer3">
+              <div
+                class="layer4"
+                style="rotate: {mapToKnob(normalizeValue(value))}turn"
+              >
+                <div class="layer5">
+                  <div class="line1"></div>
+                  <div class="line2"></div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="labels">
+      <span class="ui-label">&nbsp;{labelLeft}</span>
+      <span class="ui-label">&nbsp;{labelRight}</span>
+    </div>
+  </div>
+</div>
+
+<style>
+  .knobx {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    user-select: none;
+    container-type: inline-size;
+    width: 12cqh;
+  }
+  .knob-label {
+    position: absolute;
+    margin-top: -2.5cqh;
+    margin-left: -2.8cqw;
+    text-transform: uppercase;
+    color: rgba(255, 255, 255, 0.6);
+    font-size: 1.8cqh;
+    letter-spacing: 0.1cqh;
+    text-align: right;
+    font-weight: bold;
+  }
+  .knobcontainer {
+    width: 90cqw;
+    aspect-ratio: 1 / 1;
+    display: flex;
+    user-select: none;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    margin-bottom: -5cqw;
+
+    &:before {
+      content: " ";
+      position: absolute;
+      display: block;
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+      background: conic-gradient(
+        from 0deg at 50% 50%,
+        /* 12 o'clock (0°) */ rgba(255, 255, 255, 0.5) 0deg 1deg,
+        transparent 1deg 29deg,
+        /* 13:00 (30°) */ rgba(255, 255, 255, 0.5) 29deg 31deg,
+        transparent 31deg 59deg,
+        /* 14:00 (60°) */ rgba(255, 255, 255, 0.5) 59deg 61deg,
+        transparent 61deg 89deg,
+        /* 15:00 (90°) */ rgba(255, 255, 255, 0.5) 89deg 91deg,
+        transparent 91deg 119deg,
+        /* 16:00 (120°) */ rgba(255, 255, 255, 0.5) 119deg 121deg,
+        transparent 121deg 239deg,
+        /* 8:00 (240°) */ rgba(255, 255, 255, 0.5) 239deg 241deg,
+        transparent 241deg 269deg,
+        /* 9:00 (270°) */ rgba(255, 255, 255, 0.5) 269deg 271deg,
+        transparent 271deg 299deg,
+        /* 10:00 (300°) */ rgba(255, 255, 255, 0.5) 299deg 301deg,
+        transparent 301deg 329deg,
+        /* 11:00 (330°) */ rgba(255, 255, 255, 0.5) 329deg 331deg,
+        transparent 331deg 359deg,
+        /* 12 o'clock wrap */ rgba(255, 255, 255, 0.5) 359deg 360deg
+      );
+    }
+  }
+  .knob {
+    width: 66cqw;
+    aspect-ratio: 1 / 1;
+    border-radius: 100%;
+    background-color: rgb(32, 32, 32);
+    cursor: grab;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+
+    .layer1 {
+      position: absolute;
+      display: block;
+      width: 90%;
+      height: 90%;
+      border-radius: 100%;
+      background: linear-gradient(to right, #a9a9a9, #5c5c5c);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .layer2 {
+      display: block;
+      width: 85%;
+      height: 85%;
+      border-radius: 100%;
+      background: linear-gradient(to bottom right, #8e8e8e 35%, #4a4a4a 65%);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      box-shadow: 30cqw 23cqw 25cqw rgba(0, 0, 0, 0.4);
+    }
+
+    .layer3 {
+      border-radius: 100%;
+      display: block;
+      width: 80%;
+      height: 80%;
+      background-color: #979797;
+      box-shadow:
+        inset 3cqw 3cqw 3cqw rgba(255, 255, 255, 0.5),
+        inset -1.5cqw -1.5cqw 3cqw rgba(50, 50, 50, 0.7);
+    }
+    .layer4 {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      max-width: 70vw;
+      mix-blend-mode: overlay;
+
+      .line1 {
+        position: absolute;
+        background-color: #ededed;
+        width: 6cqw;
+        height: 15cqw;
+        left: calc(50% - 3cqw);
+        border-radius: 5cqw;
+      }
+      .line2 {
+        position: absolute;
+        background-color: #ededed;
+        width: 6cqw;
+        height: 6cqw;
+        left: calc(50% - 3cqw);
+        top: -12cqw;
+        border-radius: 1.5cqw;
+      }
+    }
+  }
+  .knob.dragging {
+    cursor: grabbing;
+  }
+
+  .labels {
+    display: flex;
+    width: 100%;
+    span {
+      flex: 1;
+      text-align: center;
+    }
+  }
+
+  .green .line1,
+  .green .line2 {
+    background-color: #60ac8f !important;
+  }
+
+  .pink .line1,
+  .pink .line2 {
+    background-color: #f5c68b !important;
+  }
+
+  .red .line1,
+  .red .line2 {
+    background-color: #b04a4a !important;
+  }
+</style>

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

@@ -0,0 +1,12 @@
+declare const Knob: import("svelte").Component<{
+    min: any;
+    max: any;
+    value?: any;
+    onchange: any;
+    label: any;
+    labelLeft: any;
+    labelRight: any;
+    color: any;
+}, {}, "value">;
+type Knob = ReturnType<typeof Knob>;
+export default Knob;