feat(05-03): add header with close link to backing track section

Matches JamTrack section format by adding a header showing
"Backing Track: {filename}" with a close link.

Changes:
- Added h5 header in JKSessionScreen with backing track filename
- Added close link with FontAwesome times icon
- Removed duplicate internal header from JKSessionBackingTrack component
- Now displays: "Backing Track: {shortFilename}" at the top
- Close link triggers handleBackingTrackMainClose

Format now matches JamTrack section:
- Header with name and close link
- Single track with instrument icon and mixer controls
- Consistent styling with border separator

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
Nuwan 2026-01-15 23:00:12 +05:30
parent c3d8076590
commit 281c6eba7f
2 changed files with 16 additions and 43 deletions

View File

@ -62,49 +62,7 @@ const JKSessionBackingTrack = ({
<div className={trackClasses}>
<div className="disabled-track-overlay" />
<div className="session-track-contents">
{/* Backing Track Header with Close Icon */}
<div className="name" style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
fontWeight: 'bold',
color: '#495057',
marginBottom: '8px'
}}>
<span>Backing Track</span>
<a
href="#"
onClick={(e) => {
e.preventDefault();
handleClose();
}}
style={{
color: '#6c757d',
textDecoration: 'none',
fontSize: '1.2em',
cursor: 'pointer'
}}
title="Close Backing Track"
>
<FontAwesomeIcon icon={faTimes} />
</a>
</div>
{/* File Name - centered where user name would be */}
<div style={{
textAlign: 'center',
fontSize: '14px',
color: '#495057',
marginBottom: '8px',
wordWrap: 'break-word',
lineHeight: '1.2',
minHeight: '40px', // Space for avatar area
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
}}>
{getFileName(backingTrack)}
</div>
{/* Track display - header removed, now shown in parent */}
{/* Instrument Icon */}
<div

View File

@ -1102,6 +1102,21 @@ const JKSessionScreen = () => {
<>
<div style={{ borderLeft: '1px solid #ddd', paddingLeft: '1rem' }}></div>
<div className='backingTrack'>
<h5>
Backing Track: {mixerHelper.backingTracks[0].shortFilename || 'Audio File'}
<a
href="#"
className="text-muted ml-2"
onClick={(e) => {
e.preventDefault();
handleBackingTrackMainClose();
}}
style={{ fontSize: '1.2em', textDecoration: 'none' }}
title="Close Backing Track"
>
<FontAwesomeIcon icon="times" /> Close
</a>
</h5>
<JKSessionBackingTrack
backingTrack={mixerHelper.backingTracks[0]}
mixers={mixerHelper.backingTracks[0].mixers}