BuboBubo/rsgp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Rework the interface a bit

Browse Source
This commit is contained in:
Raphaël Forment
2025-10-13 12:41:39 +02:00
parent 51e7c44c93
commit 467558efd2
23 changed files with 218 additions and 224 deletions
Download Patch File Download Diff File Expand all files Collapse all files

398
src/App.svelte
View File

@ -5,8 +5,8 @@
import WelcomeModal from "./lib/components/WelcomeModal.svelte";
import ProcessorPopup from "./lib/components/ProcessorPopup.svelte";
import { engines } from "./lib/audio/engines/registry";
import type { SynthEngine, PitchLock } from "./lib/audio/engines/SynthEngine";
import type { EngineType } from "./lib/audio/engines/SynthEngine";
import type { SynthEngine, PitchLock } from "./lib/audio/engines/base/SynthEngine";
import type { EngineType } from "./lib/audio/engines/base/SynthEngine";
import { AudioService } from "./lib/audio/services/AudioService";
import { downloadWAV } from "./lib/audio/utils/WAVEncoder";
import { loadVolume, saveVolume, loadDuration, saveDuration, loadPitchLockEnabled, savePitchLockEnabled, loadPitchLockFrequency, savePitchLockFrequency } from "./lib/utils/settings";
@ -45,6 +45,7 @@
let selectionStart = $state<number | null>(null);
let selectionEnd = $state<number | null>(null);
let canUndo = $state(false);
let sidebarOpen = $state(false);
const showDuration = $derived(engineType !== 'sample');
const showRandomButton = $derived(engineType === 'generative');
@ -256,6 +257,7 @@
currentParams = null;
isProcessed = false;
clearSelection();
sidebarOpen = false;
if (engineType === 'generative') {
generateRandom();
@ -393,25 +395,28 @@
showModal = false;
await audioService.initialize();
}
function toggleSidebar() {
sidebarOpen = !sidebarOpen;
}
</script>
<svelte:window onkeydown={keyboardHandler} />
<div class="container">
{#if sidebarOpen}
<div class="sidebar-overlay" onclick={toggleSidebar} onkeydown={(e) => e.key === 'Escape' && toggleSidebar()} role="button" tabindex="-1" aria-label="Close sidebar"></div>
{/if}
<div class="top-bar">
<div class="mode-buttons">
{#each engines as currentEngine, index}
<button
class="engine-button"
class:active={currentEngineIndex === index}
data-description={currentEngine.getDescription()}
onclick={() => switchEngine(index)}
>
{currentEngine.getName()}
</button>
{/each}
</div>
<div class="controls-group">
<button class="hamburger" onclick={toggleSidebar} aria-label="Toggle engine menu">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<line x1="3" y1="6" x2="21" y2="6"/>
<line x1="3" y1="12" x2="21" y2="12"/>
<line x1="3" y1="18" x2="21" y2="18"/>
</svg>
</button>
<h1 class="app-title">Poof: a sample generator</h1>
<div class="controls-group">
{#if showPitchLock}
<div class="control-item pitch-lock-control">
<div class="control-header">
@ -477,7 +482,23 @@
</div>
</div>
<div class="main-area">
<div class="content-wrapper">
<div class="sidebar" class:open={sidebarOpen}>
<div class="sidebar-content">
{#each engines as currentEngine, index}
<button
class="engine-button"
class:active={currentEngineIndex === index}
data-description={currentEngine.getDescription()}
onclick={() => switchEngine(index)}
>
{currentEngine.getName()}
</button>
{/each}
</div>
</div>
<div class="main-area">
<div class="waveform-container">
{#if showFileDropZone}
<div
@ -552,6 +573,7 @@
<VUMeter buffer={currentBuffer} {playbackPosition} />
</div>
</div>
</div>
{#if showModal}
<WelcomeModal onclose={closeModal} />
@ -568,33 +590,105 @@
.top-bar {
display: flex;
flex-direction: column;
gap: 0.75rem;
padding: 0.5rem;
flex-direction: row;
align-items: center;
gap: 0.5rem;
padding: 0.35rem 0.5rem;
background-color: #1a1a1a;
border-bottom: 1px solid #333;
width: 100%;
box-sizing: border-box;
overflow: hidden;
}
.mode-buttons {
.content-wrapper {
flex: 1;
display: flex;
gap: 0.5rem;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
flex-direction: row;
overflow: hidden;
}
.sidebar {
display: flex;
flex-direction: column;
position: fixed;
left: -100%;
top: 0;
width: 70%;
max-width: 300px;
height: 100%;
background-color: #1a1a1a;
border-right: 1px solid #333;
z-index: 2000;
transition: left 0.3s ease;
}
.sidebar.open {
left: 0;
}
.sidebar-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1999;
}
.hamburger {
display: flex;
align-items: center;
justify-content: center;
padding: 0.25rem;
background-color: transparent;
border: 1px solid #3a3a3a;
color: #fff;
cursor: pointer;
transition: border-color 0.2s, background-color 0.2s;
}
.hamburger svg {
width: 20px;
height: 20px;
}
.hamburger:hover {
border-color: #646cff;
background-color: #0f0f0f;
}
.app-title {
font-size: 0.8rem;
font-weight: 600;
color: #fff;
margin: 0;
padding: 0;
letter-spacing: 0.05em;
white-space: nowrap;
}
.sidebar-content {
display: flex;
flex-direction: column;
gap: 0;
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: thin;
scrollbar-color: #444 transparent;
padding-bottom: 0.25rem;
height: 100%;
}
.mode-buttons::-webkit-scrollbar {
height: 4px;
.sidebar-content::-webkit-scrollbar {
width: 4px;
}
.mode-buttons::-webkit-scrollbar-track {
.sidebar-content::-webkit-scrollbar-track {
background: transparent;
}
.mode-buttons::-webkit-scrollbar-thumb {
.sidebar-content::-webkit-scrollbar-thumb {
background: #444;
border-radius: 0;
}
@ -603,10 +697,14 @@
opacity: 0.7;
position: relative;
flex-shrink: 0;
font-size: 0.85rem;
padding: 0.5rem 0.75rem;
font-size: 0.75rem;
padding: 0.5rem 0.5rem;
white-space: nowrap;
min-width: calc(25vw - 1rem);
overflow: hidden;
text-overflow: ellipsis;
text-align: left;
border: none;
border-bottom: 1px solid #2a2a2a;
}
.engine-button:hover {
@ -621,15 +719,15 @@
.engine-button::after {
content: attr(data-description);
position: absolute;
top: 100%;
left: 0;
top: 0;
left: 100%;
margin-left: 0.5rem;
padding: 0.5rem 0.75rem;
background-color: #0a0a0a;
border: 1px solid #444;
color: #ccc;
font-size: 0.85rem;
font-size: 0.75rem;
width: 200px;
max-width: 90vw;
white-space: normal;
word-wrap: break-word;
pointer-events: none;
@ -641,19 +739,25 @@
.controls-group {
display: flex;
flex-direction: column;
gap: 0.75rem;
width: 100%;
flex-direction: row;
gap: 0.25rem;
align-items: center;
margin-left: auto;
flex-shrink: 1;
min-width: 0;
}
.control-item {
display: flex;
flex-direction: column;
gap: 0.35rem;
flex-direction: row;
gap: 0.5rem;
align-items: center;
background-color: #0f0f0f;
padding: 0.5rem 0.65rem;
padding: 0.25rem 0.5rem;
border: 1px solid #2a2a2a;
transition: border-color 0.2s;
flex: 1 1 auto;
min-width: 0;
}
.control-item:hover {
@ -662,38 +766,39 @@
.control-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 0.5rem;
gap: 0.25rem;
}
.control-header label {
font-size: 0.75rem;
font-size: 0.65rem;
text-transform: uppercase;
letter-spacing: 0.05em;
letter-spacing: 0.03em;
color: #999;
font-weight: 500;
white-space: nowrap;
}
.control-value-display {
font-size: 0.8rem;
font-size: 0.65rem;
color: #fff;
font-weight: 600;
font-variant-numeric: tabular-nums;
min-width: 3.5rem;
min-width: 2rem;
text-align: right;
}
.control-item input[type="range"] {
width: 100%;
min-width: 80px;
max-width: 120px;
margin: 0;
}
.custom-checkbox {
display: flex;
align-items: center;
gap: 0.35rem;
gap: 0.25rem;
cursor: pointer;
user-select: none;
}
@ -709,8 +814,6 @@
display: flex;
align-items: center;
justify-content: center;
width: 14px;
height: 14px;
border: 1px solid #3a3a3a;
background-color: #1a1a1a;
transition: all 0.2s;
@ -733,25 +836,35 @@
}
.checkbox-text {
font-size: 0.7rem;
font-size: 0.6rem;
text-transform: uppercase;
letter-spacing: 0.05em;
letter-spacing: 0.03em;
color: #999;
font-weight: 500;
}
.checkbox-box {
width: 11px;
height: 11px;
}
.checkbox-box svg {
width: 7px;
height: 7px;
}
.custom-checkbox:hover .checkbox-text {
color: #aaa;
}
.pitch-input {
width: 100%;
width: 50px;
min-width: 0;
padding: 0.35rem 0.5rem;
padding: 0.2rem 0.3rem;
background-color: #1a1a1a;
border: 1px solid #3a3a3a;
color: #fff;
font-size: 0.85rem;
font-size: 0.7rem;
font-weight: 600;
transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
font-variant-numeric: tabular-nums;
@ -784,163 +897,44 @@
font-weight: 400;
}
@media (min-width: 640px) {
.controls-group {
flex-direction: row;
flex-wrap: wrap;
}
.control-item {
min-width: 140px;
flex: 1;
}
.pitch-lock-control {
min-width: 160px;
}
.control-item input[type="range"] {
min-width: 80px;
}
}
@media (min-width: 768px) {
.top-bar {
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 1rem;
.sidebar {
position: static;
left: 0;
width: 12%;
min-width: 120px;
max-width: 200px;
transition: none;
height: auto;
}
.mode-buttons {
flex: 1;
overflow-x: auto;
padding-bottom: 0;
max-width: 60%;
.sidebar-overlay {
display: none;
}
.engine-button {
font-size: 0.9rem;
padding: 0.6rem 1rem;
min-width: auto;
.hamburger {
display: none;
}
.app-title {
font-size: 1rem;
}
.engine-button::after {
display: block;
width: 250px;
}
.engine-button:hover::after {
opacity: 1;
}
.controls-group {
width: auto;
flex-shrink: 0;
gap: 0.5rem;
flex-wrap: nowrap;
}
.control-item {
min-width: 120px;
padding: 0.45rem 0.6rem;
}
.pitch-lock-control {
min-width: 140px;
}
.control-header label {
font-size: 0.7rem;
}
.control-value-display {
font-size: 0.75rem;
min-width: 3rem;
}
.checkbox-text {
font-size: 0.65rem;
}
.checkbox-box {
width: 13px;
height: 13px;
}
.checkbox-box svg {
width: 9px;
height: 9px;
}
.pitch-input {
font-size: 0.8rem;
padding: 0.3rem 0.45rem;
}
.control-item input[type="range"] {
min-width: 70px;
}
}
@media (min-width: 1024px) {
.mode-buttons {
max-width: 65%;
}
.control-item {
.sidebar {
width: 10%;
min-width: 140px;
padding: 0.5rem 0.65rem;
}
.pitch-lock-control {
min-width: 160px;
}
.control-header label {
font-size: 0.75rem;
}
.control-value-display {
font-size: 0.8rem;
min-width: 3.5rem;
}
.checkbox-text {
font-size: 0.7rem;
}
.checkbox-box {
width: 14px;
height: 14px;
}
.checkbox-box svg {
width: 10px;
height: 10px;
}
.pitch-input {
font-size: 0.85rem;
padding: 0.35rem 0.5rem;
}
.control-item input[type="range"] {
min-width: 90px;
}
}
@media (min-width: 1280px) {
.control-item {
min-width: 160px;
}
.pitch-lock-control {
min-width: 180px;
}
.control-item input[type="range"] {
min-width: 110px;
max-width: 180px;
}
}
@ -1037,13 +1031,13 @@
-webkit-appearance: none;
appearance: none;
background: transparent;
height: 20px;
height: 1.5rem;
border-radius: 0;
}
input[type="range"]::-webkit-slider-track {
background: #333;
height: 4px;
height: 0.375rem;
border: 1px solid #444;
border-radius: 0;
}
@ -1051,13 +1045,13 @@
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 16px;
height: 16px;
width: 1rem;
height: 1rem;
background: #fff;
border: 1px solid #000;
border-radius: 0;
cursor: pointer;
margin-top: -6px;
margin-top: -0.375rem;
}
input[type="range"]::-webkit-slider-thumb:hover {
@ -1066,14 +1060,14 @@
input[type="range"]::-moz-range-track {
background: #333;
height: 4px;
height: 0.375rem;
border: 1px solid #444;
border-radius: 0;
}
input[type="range"]::-moz-range-thumb {
width: 16px;
height: 16px;
width: 1rem;
height: 1rem;
background: #fff;
border: 1px solid #000;
border-radius: 0;

2
src/lib/audio/engines/AdditiveEngine.ts
View File

@ -1,4 +1,4 @@
import type { SynthEngine, PitchLock } from './SynthEngine';
import type { SynthEngine, PitchLock } from './base/SynthEngine';
enum EnvCurve {
Linear,

2
src/lib/audio/engines/BassDrum.ts
View File

@ -1,4 +1,4 @@
import type { PitchLock, SynthEngine } from './SynthEngine';
import type { PitchLock, SynthEngine } from './base/SynthEngine';
interface BassDrumParams {
// Core frequency (base pitch of the kick)

2
src/lib/audio/engines/Benjolin.ts
View File

@ -1,4 +1,4 @@
import type { SynthEngine, PitchLock } from './SynthEngine';
import type { SynthEngine, PitchLock } from './base/SynthEngine';
interface BenjolinParams {
// Core oscillators

2
src/lib/audio/engines/DubSiren.ts
View File

@ -1,4 +1,4 @@
import type { SynthEngine, PitchLock } from './SynthEngine';
import type { SynthEngine, PitchLock } from './base/SynthEngine';
enum OscillatorWaveform {
Sine,

2
src/lib/audio/engines/DustNoise.ts
View File

@ -1,4 +1,4 @@
import type { SynthEngine, PitchLock } from './SynthEngine';
import type { SynthEngine, PitchLock } from './base/SynthEngine';
interface DustNoiseParams {
// Dust density and character

2
src/lib/audio/engines/FourOpFM.ts
View File

@ -1,4 +1,4 @@
import type { SynthEngine, PitchLock } from './SynthEngine';
import type { SynthEngine, PitchLock } from './base/SynthEngine';
enum EnvCurve {
Linear,

2
src/lib/audio/engines/HiHat.ts
View File

@ -1,4 +1,4 @@
import type { PitchLock, SynthEngine } from './SynthEngine';
import type { PitchLock, SynthEngine } from './base/SynthEngine';
interface HiHatParams {
// Decay time (0 = closed/tight, 1 = open/long)

2
src/lib/audio/engines/Input.ts
View File

@ -1,4 +1,4 @@
import type { SynthEngine, PitchLock } from './SynthEngine';
import type { SynthEngine, PitchLock } from './base/SynthEngine';
interface InputParams {
recorded: boolean;

2
src/lib/audio/engines/KarplusStrong.ts
View File

@ -1,4 +1,4 @@
import type { SynthEngine, PitchLock } from './SynthEngine';
import type { SynthEngine, PitchLock } from './base/SynthEngine';
type HarmonicMode =
| 'single' // Just fundamental

2
src/lib/audio/engines/NoiseDrum.ts
View File

@ -1,4 +1,4 @@
import type { SynthEngine } from './SynthEngine';
import type { SynthEngine } from './base/SynthEngine';
interface NoiseDrumParams {
// Noise characteristics

2
src/lib/audio/engines/ParticleNoise.ts
View File

@ -1,4 +1,4 @@
import type { SynthEngine, PitchLock } from './SynthEngine';
import type { SynthEngine, PitchLock } from './base/SynthEngine';
interface ParticleNoiseParams {
// Particle characteristics

2
src/lib/audio/engines/PhaseDistortionFM.ts
View File

@ -1,4 +1,4 @@
import type { SynthEngine, PitchLock } from './SynthEngine';
import type { SynthEngine, PitchLock } from './base/SynthEngine';
enum PDWaveform {
Sine,

2
src/lib/audio/engines/Ring.ts
View File

@ -1,4 +1,4 @@
import type { SynthEngine, PitchLock } from './SynthEngine';
import type { SynthEngine, PitchLock } from './base/SynthEngine';
enum LFOWaveform {
Sine,

2
src/lib/audio/engines/Sample.ts
View File

@ -1,4 +1,4 @@
import type { SynthEngine, PitchLock } from './SynthEngine';
import type { SynthEngine, PitchLock } from './base/SynthEngine';
interface SampleParams {
loaded: boolean;

2
src/lib/audio/engines/Snare.ts
View File

@ -1,4 +1,4 @@
import type { PitchLock, SynthEngine } from './SynthEngine';
import type { PitchLock, SynthEngine } from './base/SynthEngine';
interface SnareParams {
// Core frequency (base pitch of the snare)

6
src/lib/audio/engines/SubtractiveThreeOsc.ts
View File

@ -1,5 +1,5 @@
import { CsoundEngine, type CsoundParameter } from './CsoundEngine';
import type { PitchLock } from './SynthEngine';
import { CsoundEngine, type CsoundParameter } from './base/CsoundEngine';
import type { PitchLock } from './base/SynthEngine';
enum Waveform {
Sine = 0,
@ -39,7 +39,7 @@ export interface SubtractiveThreeOscParams {
export class SubtractiveThreeOsc extends CsoundEngine<SubtractiveThreeOscParams> {
getName(): string {
return 'Subtractive 3-OSC';
return '3OSC';
}
getDescription(): string {

2
src/lib/audio/engines/TwoOpFM.ts
View File

@ -1,4 +1,4 @@
import type { SynthEngine, PitchLock } from './SynthEngine';
import type { SynthEngine, PitchLock } from './base/SynthEngine';
enum EnvCurve {
Linear,

2
src/lib/audio/engines/WavetableEngine.ts
View File

@ -1,4 +1,4 @@
import type { SynthEngine, PitchLock } from './SynthEngine';
import type { SynthEngine, PitchLock } from './base/SynthEngine';
interface WavetableParams {
bankIndex: number;

2
src/lib/audio/engines/ZzfxEngine.ts
View File

@ -1,4 +1,4 @@
import type { SynthEngine, PitchLock } from './SynthEngine';
import type { SynthEngine, PitchLock } from './base/SynthEngine';
// @ts-ignore
import { ZZFX } from 'zzfx';

0
src/lib/audio/engines/CsoundEngine.ts → src/lib/audio/engines/base/CsoundEngine.ts
View File

0
src/lib/audio/engines/SynthEngine.ts → src/lib/audio/engines/base/SynthEngine.ts
View File

2
src/lib/audio/engines/registry.ts
View File

@ -1,4 +1,4 @@
import type { SynthEngine } from './SynthEngine';
import type { SynthEngine } from './base/SynthEngine';
import { FourOpFM } from './FourOpFM';
import { TwoOpFM } from './TwoOpFM';
import { PhaseDistortionFM } from './PhaseDistortionFM';