working on backing tracks
This commit is contained in:
Nuwan
parent
ce30f5aabb
commit
c2a6e0f4d3
|
|
@ -0,0 +1,177 @@
|
|||
import React, { useState, useEffect } from 'react';
|
||||
import { useMixersContext } from '../../context/MixersContext';
|
||||
import { useJamClient } from '../../context/JamClientContext';
|
||||
import usePanHelpers from '../../hooks/usePanHelpers';
|
||||
import SessionTrackVU from './SessionTrackVU';
|
||||
import SessionTrackGain from './SessionTrackGain';
|
||||
import TrackDiagnostics from './TrackDiagnostics';
|
||||
import JKSessionPanModal from './JKSessionPanModal';
|
||||
import { UncontrolledTooltip } from 'reactstrap';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { faTimes } from '@fortawesome/free-solid-svg-icons';
|
||||
import './JKSessionMyTrack.css';
|
||||
|
||||
const JKSessionBackingTrack = ({
|
||||
backingTrack,
|
||||
mixers,
|
||||
onClose
|
||||
}) => {
|
||||
const mixerHelper = useMixersContext();
|
||||
const jamClient = useJamClient();
|
||||
const { convertPanToPercent } = usePanHelpers();
|
||||
const [pan, setPan] = useState(0);
|
||||
const [showMenu, setShowMenu] = useState(false);
|
||||
const [showPanModal, setShowPanModal] = useState(false);
|
||||
|
||||
console.log('JKSessionBackingTrack backingTrack:', backingTrack);
|
||||
|
||||
useEffect(() => {
|
||||
if (mixers?.mixer) {
|
||||
setPan(mixers.mixer.pan || 0);
|
||||
}
|
||||
}, [mixers]);
|
||||
|
||||
const trackClasses = `session-track backing-track has-mixer`;
|
||||
|
||||
const panStyle = {
|
||||
transform: `rotate(${pan}deg)`,
|
||||
WebkitTransform: `rotate(${pan}deg)`
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
console.log('JKSessionBackingTrack: Close clicked');
|
||||
if (onClose) {
|
||||
onClose();
|
||||
}
|
||||
};
|
||||
|
||||
const getFileName = (backingTrack) => {
|
||||
if (!backingTrack) return 'Unknown File';
|
||||
|
||||
// Extract filename from path or use provided name
|
||||
if (backingTrack.shortFilename) {
|
||||
return backingTrack.shortFilename;
|
||||
}
|
||||
if (backingTrack.filename) {
|
||||
return backingTrack.filename.split('/').pop().split('\\').pop();
|
||||
}
|
||||
return 'Audio File';
|
||||
};
|
||||
|
||||
return (
|
||||
<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>
|
||||
|
||||
{/* Instrument Icon */}
|
||||
<div
|
||||
className="track-instrument"
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
marginBottom: '8px'
|
||||
}}
|
||||
>
|
||||
<img
|
||||
height="45"
|
||||
src={backingTrack.instrumentIcon || "/assets/content/icon_recording.png"}
|
||||
width="45"
|
||||
alt="instrument"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Controls */}
|
||||
<div className="track-controls">
|
||||
<div className="vu-and-gain" style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
|
||||
<SessionTrackVU
|
||||
orientation="horizontal"
|
||||
lightCount={11}
|
||||
lightWidth={17}
|
||||
lightHeight={12}
|
||||
side="best"
|
||||
mixers={mixers}
|
||||
/>
|
||||
<SessionTrackGain mixers={mixers?.mixer} gainType="track" controlGroup="track" orientation="vertical" />
|
||||
</div>
|
||||
|
||||
<div className="track-buttons">
|
||||
<div className="track-menu-container">
|
||||
<div className="track-menu-button" onClick={() => setShowMenu(!showMenu)}>
|
||||
...
|
||||
</div>
|
||||
{showMenu && (
|
||||
<div className="track-menu">
|
||||
<div
|
||||
onClick={() => {
|
||||
setShowPanModal(true);
|
||||
setShowMenu(false);
|
||||
}}
|
||||
>
|
||||
Pan...
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<br className="clearall" />
|
||||
</div>
|
||||
<br className="clearall" />
|
||||
</div>
|
||||
|
||||
{/* Pan Modal */}
|
||||
{showPanModal && (
|
||||
<JKSessionPanModal
|
||||
isOpen={showPanModal}
|
||||
toggle={() => setShowPanModal(false)}
|
||||
mixers={mixers}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default JKSessionBackingTrack;
|
||||
|
|
@ -45,7 +45,7 @@ const JKSessionMyTrack = ({
|
|||
const [showProfilePanel, setShowProfilePanel] = useState(false);
|
||||
const [profileUser, setProfileUser] = useState(null);
|
||||
|
||||
console.log('JKSessionMyTrack instrumentIcon:', instrumentIcon);
|
||||
//console.log('JKSessionMyTrack instrumentIcon:', instrumentIcon);
|
||||
|
||||
useEffect(() => {
|
||||
if (mixers?.mixer) {
|
||||
|
|
|
|||
|
|
@ -41,6 +41,7 @@ import JKSessionJamTrackStems from './JKSessionJamTrackStems.js';
|
|||
import JKSessionOpenMenu from './JKSessionOpenMenu.js';
|
||||
import WindowPortal from '../common/WindowPortal.js';
|
||||
import JKSessionBackingTrackPlayer from './JKSessionBackingTrackPlayer.js';
|
||||
import JKSessionBackingTrack from './JKSessionBackingTrack.js';
|
||||
import JKPopupMediaControls from '../popups/JKPopupMediaControls.js';
|
||||
import { SESSION_PRIVACY_MAP } from '../../helpers/globals.js';
|
||||
import { toast } from 'react-toastify';
|
||||
|
|
@ -84,7 +85,7 @@ const JKSessionScreen = () => {
|
|||
const { globalObject, metronomeState, closeMetronome, resetMetronome } = useGlobalContext();
|
||||
const { getCurrentRecordingState, reset: resetRecordingState, currentlyRecording } = useRecordingHelpers();
|
||||
const { SessionPageEnter } = useSessionUtils();
|
||||
const { mediaSummary, openBackingTrack, openMetronome, loadJamTrack } = useMediaContext();
|
||||
const { mediaSummary, openBackingTrack, openMetronome, loadJamTrack, closeMedia } = useMediaContext();
|
||||
|
||||
// Use the session model hook
|
||||
const sessionModel = useSessionModel(app, server, null); // sessionScreen is null for now
|
||||
|
|
@ -140,6 +141,12 @@ const JKSessionScreen = () => {
|
|||
setBackingTrackData(null);
|
||||
}, []);
|
||||
|
||||
// Stable callback for backing track close in main screen
|
||||
const handleBackingTrackMainClose = useCallback(() => {
|
||||
console.log('JKSessionScreen: Backing Track main screen close requested');
|
||||
closeMedia();
|
||||
}, [closeMedia]);
|
||||
|
||||
//state for media controls popup
|
||||
const [showMediaControlsPopup, setShowMediaControlsPopup] = useState(false);
|
||||
const [mediaControlsOpened, setMediaControlsOpened] = useState(false);
|
||||
|
|
@ -997,6 +1004,20 @@ const JKSessionScreen = () => {
|
|||
</>
|
||||
)}
|
||||
|
||||
{/* Backing Track Section */}
|
||||
{mixerHelper.backingTracks && mixerHelper.backingTracks.length > 0 && (
|
||||
<>
|
||||
<div style={{ borderLeft: '1px solid #ddd', paddingLeft: '1rem' }}></div>
|
||||
<div className='backingTrack'>
|
||||
<JKSessionBackingTrack
|
||||
backingTrack={mixerHelper.backingTracks[0]}
|
||||
mixers={mixerHelper.backingTracks[0].mixers}
|
||||
onClose={handleBackingTrackMainClose}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
</div>
|
||||
|
||||
{/* Connection Status Alerts */}
|
||||
|
|
@ -1269,4 +1290,3 @@ const JKSessionScreen = () => {
|
|||
}
|
||||
|
||||
export default memo(JKSessionScreen)
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue