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 { useProjectStore } from '../stores/projectStore';
import { INSTRUMENT_GROUPS, FLUIDR3_INSTRUMENT_MAP } from '../constants/generalMidiConstants'; import { INSTRUMENT_GROUPS, FLUIDR3_INSTRUMENT_MAP } from '../constants/generalMidiConstants';
import { KGMidiTrack, type InstrumentType } from '../core/track/KGMidiTrack'; import { KGMidiTrack, type InstrumentType } from '../core/track/KGMidiTrack';
import { KGAudioTrack } from '../core/track/KGAudioTrack';
const InstrumentSelection: React.FC = () => { const InstrumentSelection: React.FC = () => {
const { const {
@@ -53,14 +54,15 @@ const InstrumentSelection: React.FC = () => {
} }
}; };
const previewImage = FLUIDR3_INSTRUMENT_MAP[currentInstrumentKey]?.image || 'piano.png'; const isAudioTrack = targetTrack instanceof KGAudioTrack;
const previewAlt = FLUIDR3_INSTRUMENT_MAP[currentInstrumentKey]?.displayName || currentInstrumentKey; 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; const hasTargetTrack = !!targetTrack;
return ( return (
<div className="instrument-selection"> <div className="instrument-selection">
<div className="instrument-selection-header"> <div className="instrument-selection-header">
<h3>{hasTargetTrack ? `${previewAlt.toString()}` : ''}</h3> <h3>{hasTargetTrack ? previewAlt : ''}</h3>
<button className="instrument-selection-close-btn" onClick={closeInstrumentSelection}>✕</button> <button className="instrument-selection-close-btn" onClick={closeInstrumentSelection}>✕</button>
</div> </div>
<div className="instrument-selection-top"> <div className="instrument-selection-top">
@@ -76,6 +78,7 @@ const InstrumentSelection: React.FC = () => {
)} )}
<div className="instrument-name-overlay">{hasTargetTrack ? targetTrack.getName() : ''}</div> <div className="instrument-name-overlay">{hasTargetTrack ? targetTrack.getName() : ''}</div>
</div> </div>
{!isAudioTrack && (
<div className="instrument-selection-bottom"> <div className="instrument-selection-bottom">
<div className="instrument-groups"> <div className="instrument-groups">
<div className="instrument-groups-list"> <div className="instrument-groups-list">
@@ -104,6 +107,7 @@ const InstrumentSelection: React.FC = () => {
</div> </div>
</div> </div>
</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="track-name-and-volume">
<div className="instrument-image"> <div className="instrument-image">
{isAudioTrack ? ( {isAudioTrack ? (
<div style={{ width: 64, height: 64, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '28px', color: 'var(--text-secondary, #999)' }}> <img
<FaFileAudio /> src={`${import.meta.env.BASE_URL}resources/instruments/speaker.png`}
</div> alt="Audio Track"
width="64"
height="64"
/>
) : ( ) : (
<img <img
src={`${import.meta.env.BASE_URL}resources/instruments/${String(FLUIDR3_INSTRUMENT_MAP[currentInstrument as keyof typeof FLUIDR3_INSTRUMENT_MAP]?.image || 'piano.png')}`} src={`${import.meta.env.BASE_URL}resources/instruments/${String(FLUIDR3_INSTRUMENT_MAP[currentInstrument as keyof typeof FLUIDR3_INSTRUMENT_MAP]?.image || 'piano.png')}`}