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
public/resources/instruments/speaker.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 571 KiB

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>
);
};
src/components/track/TrackInfoItem.tsx
+6 -3
View File
@@ -273,9 +273,12 @@ const TrackInfoItem: React.FC<TrackInfoItemProps> = ({
<div className="track-name-and-volume">
<div className="instrument-image">
{isAudioTrack ? (
<div style={{ width: 64, height: 64, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '28px', color: 'var(--text-secondary, #999)' }}>
<FaFileAudio />
</div>
<img
src={`${import.meta.env.BASE_URL}resources/instruments/speaker.png`}
alt="Audio Track"
width="64"
height="64"
/>
) : (
<img
src={`${import.meta.env.BASE_URL}resources/instruments/${String(FLUIDR3_INSTRUMENT_MAP[currentInstrument as keyof typeof FLUIDR3_INSTRUMENT_MAP]?.image || 'piano.png')}`}