feat: sound themes

Author: aradzie

docs/translations_report.md

@@ -373,6 +373,7 @@
   "settings.recoverKeys.prefix": "Unlock a next key only when:",
   "settings.repeatWords.description": "Repeat each word a number of times. Type a word for the first time to develop your muscle memory. Typing the same word consecutively should be easier.",
   "settings.repeatWords.label": "Repeat each word:",
+  "settings.soundTheme.label": "Sound Theme:",
   "settings.soundVolume.label": "Volume:",
   "settings.sounds.allSoundsValue": "All Sounds",
   "settings.sounds.errorSoundsOnlyValue": "Error Sounds Only",

package-lock.json

@@ -5,8 +5,8 @@ import { nullPlayer, WebAudioPlayer } from "./player.ts";
 import {
   type Player,
   type PlayerConfig,
+  type PlayerId,
   type SoundAssets,
-  type SoundName,
 } from "./types.ts";
 
 class PlayerLoader {
@@ -65,23 +65,23 @@ class PlayerLoader {
   }
 }
 
-const loaders = new Map<SoundName, PlayerLoader>();
+const loaders = new Map<PlayerId, PlayerLoader>();
 
 export function loadSounds(assets: SoundAssets) {
-  for (const [name, config] of Object.entries(assets)) {
-    let loader = loaders.get(name);
+  for (const [id, config] of Object.entries(assets)) {
+    let loader = loaders.get(id);
     if (loader == null || loader.config !== config) {
       loader = new PlayerLoader(config);
-      loaders.set(name, loader);
+      loaders.set(id, loader);
       loader.load().catch(catchError);
     }
   }
 }
 
-export function playSound(name: SoundName, volume: number = 1) {
-  const loader = loaders.get(name);
+export function playSound(id: PlayerId, volume: number = 1) {
+  const loader = loaders.get(id);
   if (loader == null) {
-    throw new Error(String(name));
+    throw new Error(String(id));
   }
   loader
     .init()

packages/keybr-intl/lib/messages/ar.json

@@ -1,7 +1,7 @@
-export type SoundName = symbol | string | number;
+export type PlayerId = symbol | string | number;
 
 export type SoundAssets = {
-  readonly [name: SoundName]: PlayerConfig;
+  readonly [id: PlayerId]: PlayerConfig;
 };
 
 export type PlayerConfig = {

packages/keybr-intl/lib/messages/bg.json

@@ -1 +1,2 @@
 export * from "./player.ts";
+export * from "./settings.ts";

packages/keybr-intl/lib/messages/ca.json

@@ -1,36 +1,51 @@
 import { type Settings, useSettings } from "@keybr/settings";
-import { loadSounds, playSound } from "@keybr/sound";
-import { Feedback, PlaySounds, textDisplayProps } from "@keybr/textinput";
+import { Feedback } from "@keybr/textinput";
 import { useMemo } from "react";
-import { TextInputSound, textInputSounds } from "./assets.ts";
+import { PlaySounds, soundProps, SoundTheme } from "./settings.ts";
+import { Theme } from "./sound.ts";
+import { themeDefault } from "./themes/default.ts";
+import { themeMechanical1 } from "./themes/mechanical1.ts";
+import { themeTypewriter1 } from "./themes/typewriter1.ts";
 
 export function useSoundPlayer() {
   const { settings } = useSettings();
   return useMemo(() => makeSoundPlayer(settings), [settings]);
 }
 
 export function makeSoundPlayer(settings: Settings) {
-  const playSounds = settings.get(textDisplayProps.playSounds);
-  const soundVolume = settings.get(textDisplayProps.soundVolume);
-  loadSounds(textInputSounds);
+  const playSounds = settings.get(soundProps.playSounds);
+  const soundVolume = settings.get(soundProps.soundVolume);
+  const soundTheme = settings.get(soundProps.soundTheme);
+  const theme = loadTheme(soundTheme);
   return (feedback: Feedback) => {
     if (playSounds === PlaySounds.All) {
       switch (feedback) {
         case Feedback.Succeeded:
         case Feedback.Recovered:
-          playSound(TextInputSound.Click, soundVolume);
+          theme.play("click", soundVolume);
           break;
         case Feedback.Failed:
-          playSound(TextInputSound.Blip, soundVolume);
+          theme.play("blip", soundVolume);
           break;
       }
     }
     if (playSounds === PlaySounds.ErrorsOnly) {
       switch (feedback) {
         case Feedback.Failed:
-          playSound(TextInputSound.Blip, soundVolume);
+          theme.play("blip", soundVolume);
           break;
       }
     }
   };
 }
+
+function loadTheme(soundTheme: SoundTheme) {
+  switch (soundTheme) {
+    case SoundTheme.MECHANICAL1:
+      return new Theme(themeMechanical1);
+    case SoundTheme.TYPEWRITER1:
+      return new Theme(themeTypewriter1);
+    default:
+      return new Theme(themeDefault);
+  }
+}

packages/keybr-intl/lib/messages/cs.json

@@ -0,0 +1,43 @@
+import { Enum, type EnumItem } from "@keybr/lang";
+import { enumProp, itemProp, numberProp } from "@keybr/settings";
+
+export enum PlaySounds {
+  None = 1,
+  ErrorsOnly = 2,
+  All = 3,
+}
+
+export class SoundTheme implements EnumItem {
+  static readonly DEFAULT = new SoundTheme("default", "Default");
+  static readonly MECHANICAL1 = new SoundTheme("mechanical1", "Mechanical");
+  static readonly TYPEWRITER1 = new SoundTheme("typewriter1", "Typewriter");
+
+  static readonly ALL = new Enum<SoundTheme>(
+    SoundTheme.DEFAULT,
+    SoundTheme.MECHANICAL1,
+    SoundTheme.TYPEWRITER1,
+  );
+
+  private constructor(
+    readonly id: string,
+    readonly name: string,
+  ) {}
+
+  toString() {
+    return this.id;
+  }
+
+  toJSON() {
+    return this.id;
+  }
+}
+
+export const soundProps = {
+  playSounds: enumProp("textInput.playSounds", PlaySounds, PlaySounds.None),
+  soundVolume: numberProp("textInput.soundVolume", 0.5, { min: 0, max: 1 }),
+  soundTheme: itemProp(
+    "textInput.soundTheme",
+    SoundTheme.ALL,
+    SoundTheme.DEFAULT,
+  ),
+} as const;

packages/keybr-intl/lib/messages/da.json

@@ -0,0 +1,35 @@
+import { randomSample } from "@keybr/rand";
+import {
+  loadSounds,
+  type PlayerConfig,
+  type PlayerId,
+  playSound,
+  type SoundAssets,
+} from "@keybr/sound";
+
+export type SoundId = "click" | "blip";
+
+export type ThemeConfig = Record<SoundId, readonly PlayerConfig[]>;
+
+export class Theme {
+  readonly #assets: Record<SoundId, SoundAssets>;
+
+  constructor(theme: ThemeConfig) {
+    const click = collect("click", theme.click);
+    const blip = collect("blip", theme.blip);
+    this.#assets = { click, blip };
+    loadSounds({ ...click, ...blip });
+  }
+
+  play(id: SoundId, volume: number) {
+    playSound(randomSample(Object.keys(this.#assets[id])), volume);
+  }
+}
+
+function collect(id: string, configs: readonly PlayerConfig[]): SoundAssets {
+  const sounds = {} as Record<PlayerId, PlayerConfig>;
+  for (let i = 0; i < configs.length; i++) {
+    sounds[`${id}-${i}`] = configs[i];
+  }
+  return sounds;
+}

packages/keybr-intl/lib/messages/de.json

@@ -0,0 +1,7 @@
+import { type PlayerConfig } from "@keybr/sound";
+import blipMp3 from "../../assets/blip.mp3";
+import blipWav from "../../assets/blip.wav";
+
+export const blip = {
+  urls: [blipMp3, blipWav],
+} as const satisfies PlayerConfig;

packages/keybr-intl/lib/messages/el.json

@@ -0,0 +1,9 @@
+import clickMp3 from "../../assets/default-click.mp3";
+import clickWav from "../../assets/default-click.wav";
+import { type ThemeConfig } from "../sound.ts";
+import { blip } from "./common.ts";
+
+export const themeDefault = {
+  blip: [blip],
+  click: [{ urls: [clickMp3, clickWav] }],
+} as const satisfies ThemeConfig;

packages/keybr-intl/lib/messages/en.json

@@ -0,0 +1,23 @@
+import click1Mp3 from "../../assets/mechanical1-click1.mp3";
+import click1Wav from "../../assets/mechanical1-click1.wav";
+import click2Mp3 from "../../assets/mechanical1-click2.mp3";
+import click2Wav from "../../assets/mechanical1-click2.wav";
+import click3Mp3 from "../../assets/mechanical1-click3.mp3";
+import click3Wav from "../../assets/mechanical1-click3.wav";
+import click4Mp3 from "../../assets/mechanical1-click4.mp3";
+import click4Wav from "../../assets/mechanical1-click4.wav";
+import click5Mp3 from "../../assets/mechanical1-click5.mp3";
+import click5Wav from "../../assets/mechanical1-click5.wav";
+import { type ThemeConfig } from "../sound.ts";
+import { blip } from "./common.ts";
+
+export const themeMechanical1 = {
+  blip: [blip],
+  click: [
+    { urls: [click1Mp3, click1Wav] },
+    { urls: [click2Mp3, click2Wav] },
+    { urls: [click3Mp3, click3Wav] },
+    { urls: [click4Mp3, click4Wav] },
+    { urls: [click5Mp3, click5Wav] },
+  ],
+} as const satisfies ThemeConfig;

packages/keybr-intl/lib/messages/eo.json

@@ -0,0 +1,23 @@
+import click1Mp3 from "../../assets/typewriter1-click1.mp3";
+import click1Wav from "../../assets/typewriter1-click1.wav";
+import click2Mp3 from "../../assets/typewriter1-click2.mp3";
+import click2Wav from "../../assets/typewriter1-click2.wav";
+import click3Mp3 from "../../assets/typewriter1-click3.mp3";
+import click3Wav from "../../assets/typewriter1-click3.wav";
+import click4Mp3 from "../../assets/typewriter1-click4.mp3";
+import click4Wav from "../../assets/typewriter1-click4.wav";
+import click5Mp3 from "../../assets/typewriter1-click5.mp3";
+import click5Wav from "../../assets/typewriter1-click5.wav";
+import { type ThemeConfig } from "../sound.ts";
+import { blip } from "./common.ts";
+
+export const themeTypewriter1 = {
+  blip: [blip],
+  click: [
+    { urls: [click1Mp3, click1Wav] },
+    { urls: [click2Mp3, click2Wav] },
+    { urls: [click3Mp3, click3Wav] },
+    { urls: [click4Mp3, click4Wav] },
+    { urls: [click5Mp3, click5Wav] },
+  ],
+} as const satisfies ThemeConfig;

packages/keybr-intl/lib/messages/es.json

@@ -6,6 +6,8 @@
   "main": "lib/index.ts",
   "types": ".types/index.d.ts",
   "dependencies": {
+    "@keybr/lang": "*",
+    "@keybr/rand": "*",
     "@keybr/settings": "*",
     "@keybr/sound": "*",
     "@keybr/textinput": "*"