From c2a6e0f4d3c3b6dc7e4b5178c3c186b60b8287c2 Mon Sep 17 00:00:00 2001
From: Nuwan <nuwanchaturanga@gmail.com>
Date: Thu, 8 Jan 2026 21:07:55 +0530
Subject: [PATCH] working on backing tracks

---
 .../client/JKSessionBackingTrack.js           | 177 ++++++++++++++++++
 .../src/components/client/JKSessionMyTrack.js |   2 +-
 .../src/components/client/JKSessionScreen.js  |  24 ++-
 3 files changed, 200 insertions(+), 3 deletions(-)
 create mode 100644 jam-ui/src/components/client/JKSessionBackingTrack.js

diff --git a/jam-ui/src/components/client/JKSessionBackingTrack.js b/jam-ui/src/components/client/JKSessionBackingTrack.js
new file mode 100644
index 000000000..330082cfd
--- /dev/null
+++ b/jam-ui/src/components/client/JKSessionBackingTrack.js
@@ -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;
\ No newline at end of file
diff --git a/jam-ui/src/components/client/JKSessionMyTrack.js b/jam-ui/src/components/client/JKSessionMyTrack.js
index 50a77e2e7..7503fb22d 100644
--- a/jam-ui/src/components/client/JKSessionMyTrack.js
+++ b/jam-ui/src/components/client/JKSessionMyTrack.js
@@ -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) {
diff --git a/jam-ui/src/components/client/JKSessionScreen.js b/jam-ui/src/components/client/JKSessionScreen.js
index ae412fcc4..fee5c7e43 100644
--- a/jam-ui/src/components/client/JKSessionScreen.js
+++ b/jam-ui/src/components/client/JKSessionScreen.js
@@ -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)
-