Remove volume slider and description text from player
Cleaner UI - metadata already tells the story. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
-10
@@ -1112,11 +1112,6 @@
|
|||||||
|
|
||||||
<!-- generated only: artifact playback + sharing -->
|
<!-- generated only: artifact playback + sharing -->
|
||||||
<div id="generatedBlock" style="display:none;">
|
<div id="generatedBlock" style="display:none;">
|
||||||
<div class="engine-line" id="generatedTransform">
|
|
||||||
Reimagined as classic game-console music<br />
|
|
||||||
using the Wario Synthesis Engine.
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div style="display:flex; justify-content:center; margin-top: 14px; margin-bottom: 14px;">
|
<div style="display:flex; justify-content:center; margin-top: 14px; margin-bottom: 14px;">
|
||||||
<button id="playPauseBtn" class="primary" type="button">Play</button>
|
<button id="playPauseBtn" class="primary" type="button">Play</button>
|
||||||
</div>
|
</div>
|
||||||
@@ -1132,11 +1127,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="volume-control" id="generatedVolumeRow" style="margin-top: 14px; opacity: 0.75;">
|
|
||||||
<label for="motifVolume" style="min-width: auto;">Volume</label>
|
|
||||||
<input type="range" id="motifVolume" min="0" max="1" step="0.01" value="0.8" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div style="margin-top: 14px;">
|
<div style="margin-top: 14px;">
|
||||||
<button id="copyLinkBtn" type="button" disabled>Copy link</button>
|
<button id="copyLinkBtn" type="button" disabled>Copy link</button>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
+2
-7
@@ -31,7 +31,6 @@ class MotifApp {
|
|||||||
private preGenSupport!: HTMLElement;
|
private preGenSupport!: HTMLElement;
|
||||||
private generatedBlock!: HTMLElement;
|
private generatedBlock!: HTMLElement;
|
||||||
private playPauseBtn!: HTMLButtonElement;
|
private playPauseBtn!: HTMLButtonElement;
|
||||||
private motifVolumeSlider!: HTMLInputElement;
|
|
||||||
private detailsToggle!: HTMLElement;
|
private detailsToggle!: HTMLElement;
|
||||||
private previewBtn!: HTMLButtonElement;
|
private previewBtn!: HTMLButtonElement;
|
||||||
private previewStopBtn!: HTMLButtonElement;
|
private previewStopBtn!: HTMLButtonElement;
|
||||||
@@ -122,7 +121,6 @@ class MotifApp {
|
|||||||
this.preGenSupport = document.getElementById('preGenSupport')!;
|
this.preGenSupport = document.getElementById('preGenSupport')!;
|
||||||
this.generatedBlock = document.getElementById('generatedBlock')!;
|
this.generatedBlock = document.getElementById('generatedBlock')!;
|
||||||
this.playPauseBtn = document.getElementById('playPauseBtn') as HTMLButtonElement;
|
this.playPauseBtn = document.getElementById('playPauseBtn') as HTMLButtonElement;
|
||||||
this.motifVolumeSlider = document.getElementById('motifVolume') as HTMLInputElement;
|
|
||||||
this.detailsToggle = document.getElementById('detailsToggle')!;
|
this.detailsToggle = document.getElementById('detailsToggle')!;
|
||||||
this.previewBtn = document.getElementById('previewBtn') as HTMLButtonElement;
|
this.previewBtn = document.getElementById('previewBtn') as HTMLButtonElement;
|
||||||
this.previewStopBtn = document.getElementById('previewStopBtn') as HTMLButtonElement;
|
this.previewStopBtn = document.getElementById('previewStopBtn') as HTMLButtonElement;
|
||||||
@@ -172,9 +170,6 @@ class MotifApp {
|
|||||||
// Motif
|
// Motif
|
||||||
this.motifBtn.addEventListener('click', () => this.handleMotif());
|
this.motifBtn.addEventListener('click', () => this.handleMotif());
|
||||||
this.playPauseBtn.addEventListener('click', () => void this.handlePlayPause());
|
this.playPauseBtn.addEventListener('click', () => void this.handlePlayPause());
|
||||||
this.motifVolumeSlider.addEventListener('input', () => {
|
|
||||||
this.motifEngine.setVolume(parseFloat(this.motifVolumeSlider.value));
|
|
||||||
});
|
|
||||||
|
|
||||||
// Preview inside selected source only
|
// Preview inside selected source only
|
||||||
this.previewBtn.addEventListener('click', () => void this.handlePreviewToggle());
|
this.previewBtn.addEventListener('click', () => void this.handlePreviewToggle());
|
||||||
@@ -523,7 +518,7 @@ class MotifApp {
|
|||||||
|
|
||||||
// Generate a variation using the procedural role-mapping mode
|
// Generate a variation using the procedural role-mapping mode
|
||||||
await this.motifEngine.generateFromMIDI(this.currentMIDI.events, 'procedural');
|
await this.motifEngine.generateFromMIDI(this.currentMIDI.events, 'procedural');
|
||||||
this.motifEngine.setVolume(parseFloat(this.motifVolumeSlider.value) || 0.8);
|
this.motifEngine.setVolume(0.8);
|
||||||
|
|
||||||
await this.motifEngine.play();
|
await this.motifEngine.play();
|
||||||
|
|
||||||
@@ -830,7 +825,7 @@ class MotifApp {
|
|||||||
this.stopPreview();
|
this.stopPreview();
|
||||||
await unlockAudio();
|
await unlockAudio();
|
||||||
|
|
||||||
this.motifEngine.setVolume(parseFloat(this.motifVolumeSlider.value) || 0.8);
|
this.motifEngine.setVolume(0.8);
|
||||||
await this.motifEngine.play();
|
await this.motifEngine.play();
|
||||||
if (this.motifResumeProgress > 0) this.motifEngine.seek(this.motifResumeProgress);
|
if (this.motifResumeProgress > 0) this.motifEngine.seek(this.motifResumeProgress);
|
||||||
this.isMotifPlaying = true;
|
this.isMotifPlaying = true;
|
||||||
|
|||||||
Reference in New Issue
Block a user