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:
parent
c3d8076590
commit
281c6eba7f
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
Loading…
Reference in New Issue