3dtours/KGStudio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: assigned an image as audio track's instrument-preview background

Browse Source
This commit is contained in:
Xiaohan-Tian
2026-04-10 12:30:57 -07:00
parent 83f4bfe47f
commit 21a19918b5
3 changed files with 13 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/InstrumentSelection.tsx
+7 -3
View File
@@ -3,6 +3,7 @@ import './InstrumentSelection.css';
import { useProjectStore } from '../stores/projectStore';
import { INSTRUMENT_GROUPS, FLUIDR3_INSTRUMENT_MAP } from '../constants/generalMidiConstants';
import { KGMidiTrack, type InstrumentType } from '../core/track/KGMidiTrack';
import { KGAudioTrack } from '../core/track/KGAudioTrack';
const InstrumentSelection: React.FC = () => {
const {
@@ -53,14 +54,15 @@ const InstrumentSelection: React.FC = () => {
}
};
const previewImage = FLUIDR3_INSTRUMENT_MAP[currentInstrumentKey]?.image || 'piano.png';
const previewAlt = FLUIDR3_INSTRUMENT_MAP[currentInstrumentKey]?.displayName || currentInstrumentKey;
const isAudioTrack = targetTrack instanceof KGAudioTrack;
const previewImage = isAudioTrack ? 'speaker.png' : (FLUIDR3_INSTRUMENT_MAP[currentInstrumentKey]?.image || 'piano.png');
const previewAlt = isAudioTrack ? 'Audio Track' : (FLUIDR3_INSTRUMENT_MAP[currentInstrumentKey]?.displayName || currentInstrumentKey);
const hasTargetTrack = !!targetTrack;
return (
<div className="instrument-selection">
<div className="instrument-selection-header">
<h3>{hasTargetTrack ? `${previewAlt.toString()}` : ''}</h3>
<h3>{hasTargetTrack ? previewAlt : ''}</h3>
<button className="instrument-selection-close-btn" onClick={closeInstrumentSelection}>✕</button>
</div>
<div className="instrument-selection-top">
@@ -76,6 +78,7 @@ const InstrumentSelection: React.FC = () => {
)}
<div className="instrument-name-overlay">{hasTargetTrack ? targetTrack.getName() : ''}</div>
</div>
{!isAudioTrack && (
<div className="instrument-selection-bottom">
<div className="instrument-groups">
<div className="instrument-groups-list">
@@ -104,6 +107,7 @@ const InstrumentSelection: React.FC = () => {
</div>
</div>
</div>
)}
</div>
);
};