Auto update sampler label (#11)

* Fix useObservable hook return types

* Automatically update pad label on change src

* Disable double-tap to zoom

src/components/ButtonPad/ButtonPad.css

@@ -5,6 +5,7 @@
   border-radius: 8px;
   position: relative;
   overflow: hidden;
+  touch-action: manipulation;
 
   & canvas {
     position: absolute;

src/components/SampleControls/SampleControls.tsx

@@ -1,5 +1,6 @@
 import { Component, createSignal } from 'solid-js';
 
+import { LABEL_CHAR_LIMIT } from 'src/defaults/constants';
 import { useObservable } from 'src/hooks/useObservable';
 import { SamplerModel } from 'src/models';
 import { KnobWrapper } from '../Knob/KnobWrapper';
@@ -23,7 +24,7 @@ export const SampleControls: Component<SampleControlsProps> = (props) => {
             <input
               type="text"
               value={label()}
-              maxlength="12"
+              maxlength={LABEL_CHAR_LIMIT}
               class="sampleLabel"
               onInput={(e) => setLabel(e.currentTarget.value)}
               onKeyUp={(e) => {

src/components/SampleExplorer/SampleExplorer.css

@@ -53,6 +53,7 @@
     display: flex;
     align-items: stretch;
     transition: background-color 0.15s;
+    touch-action: manipulation;
 
     & div {
       overflow-x: scroll;

src/defaults/constants.ts

@@ -6,3 +6,6 @@ export const DB_CLICK_THRESHOLD = 200;
 
 /** The number of samples in a waveform image */
 export const WAVEFORM_SIZE = 760;
+
+/** Maximum Sampler label length */
+export const LABEL_CHAR_LIMIT = 12;

src/hooks/useObservable.ts

@@ -1,15 +1,15 @@
-import { onMount, createSignal, onCleanup, Accessor } from 'solid-js';
+import { onMount, createSignal, onCleanup, Accessor, Setter } from 'solid-js';
 import { Observable, ObservableReadonly } from 'src/utils';
 
 export function useObservable<T>(
   observable: Observable<T>,
-): [Accessor<T>, (value: T) => void];
+): [Accessor<T>, Setter<T>];
 export function useObservable<T>(
   observable: ObservableReadonly<T>,
 ): [Accessor<T>];
 export function useObservable<T>(
   observable: Observable<T> | ObservableReadonly<T>,
-): [Accessor<T>, (value: T) => void] | [T] {
+): [Accessor<T>, (v: T) => void] | [Accessor<T>] {
   const [signal, setSignal] = createSignal(observable.value);
   const updateFunc = (v: T) => {
     setSignal(() => v);

src/models/SamplerModel.ts

@@ -1,5 +1,7 @@
+import { LABEL_CHAR_LIMIT } from 'src/defaults/constants';
 import { AppStore } from 'src/store';
 import { Observable } from 'src/utils';
+import { getFilename } from 'src/utils/getFilename';
 
 export class SamplerModel {
   public readonly src: Observable<string>;
@@ -16,15 +18,20 @@ export class SamplerModel {
 
   private readonly _preservePitch = new Observable(false);
 
-  private readonly onSrcUpdate = async (src: string) => {
-    if (!src) {
-      return;
-    }
+  private async updateBuffer(): Promise<void> {
     const data = await AppStore.instance.getSampleBlob(this.src.value);
     if (!data) {
       throw new Error(`Sample '${this.src.value}' not found`);
     }
     this._buffer.value = await data.arrayBuffer();
+  }
+
+  private readonly onSrcUpdate = async (src: string) => {
+    this.label.value = getFilename(src).substring(0, LABEL_CHAR_LIMIT);
+    if (!src) {
+      return;
+    }
+    await this.updateBuffer();
   };
 
   private readonly onBufferUpdate = async () => {

src/utils/getFilename.ts

@@ -0,0 +1,9 @@
+/**
+ * Get the filename without extension from a full path
+ * @param path full file path
+ * @returns
+ */
+export function getFilename(path: string): string {
+  const fileWithExt = path.split(/.*[\/|\\]/).at(-1) ?? '';
+  return fileWithExt.replace(/\..*$/, '');
+}