From baba15693b34cc4bffdba98683d818663fe11c7e Mon Sep 17 00:00:00 2001 From: Nuwan Date: Mon, 8 Dec 2025 23:28:48 +0530 Subject: [PATCH] wip sesssion screen base functions --- .../client/JKSessionInstrumentModal.js | 95 +++++++++++++++++++ .../components/client/JKSessionMyTrack.css | 4 +- .../src/components/client/JKSessionMyTrack.js | 51 +++++++++- .../src/components/client/JKSessionScreen.js | 14 ++- jam-ui/src/helpers/utils.js | 7 ++ 5 files changed, 165 insertions(+), 6 deletions(-) create mode 100644 jam-ui/src/components/client/JKSessionInstrumentModal.js diff --git a/jam-ui/src/components/client/JKSessionInstrumentModal.js b/jam-ui/src/components/client/JKSessionInstrumentModal.js new file mode 100644 index 000000000..be93c5ec2 --- /dev/null +++ b/jam-ui/src/components/client/JKSessionInstrumentModal.js @@ -0,0 +1,95 @@ +import React, { useState, useEffect } from 'react'; +import { + Modal, + ModalHeader, + ModalBody, + ModalFooter, + Button, + Form, + FormGroup, + Label, + Input, +} from 'reactstrap'; +import { listInstruments, getInstrumentIcon45, convertClientInstrumentToServer } from '../../helpers/utils'; +import { server_to_client_instrument_map } from '../../helpers/globals'; + +const JKSessionInstrumentModal = ({ isOpen, toggle, currentInstrument, onSave }) => { + const [selectedInstrumentId, setSelectedInstrumentId] = useState(null); + const [instruments, setInstruments] = useState([]); + + useEffect(() => { + if (isOpen) { + // Get sorted list of instruments + const instrumentList = listInstruments().sort((a, b) => + a.description.localeCompare(b.description) + ); + setInstruments(instrumentList); + + // Find current instrument's client ID + if (currentInstrument) { + const currentMapping = Object.values(server_to_client_instrument_map).find( + mapping => mapping.server_id === currentInstrument + ); + if (currentMapping) { + setSelectedInstrumentId(currentMapping.client_id); + } + } + } + }, [isOpen, currentInstrument]); + + const handleSave = () => { + if (selectedInstrumentId !== null) { + onSave(selectedInstrumentId); + toggle(); + } + }; + + const handleCancel = () => { + toggle(); + }; + + return ( + + + Select Instrument + + +
+ {instruments.map((instrument) => ( + +
+ {instrument.description} +
+ + + ))} +
+ + + + + + + ); +}; + +export default JKSessionInstrumentModal; diff --git a/jam-ui/src/components/client/JKSessionMyTrack.css b/jam-ui/src/components/client/JKSessionMyTrack.css index 2c1e82e6c..157e679a4 100644 --- a/jam-ui/src/components/client/JKSessionMyTrack.css +++ b/jam-ui/src/components/client/JKSessionMyTrack.css @@ -60,7 +60,9 @@ } .track-instrument { - text-align: center; + display: flex; + justify-content: center; + align-items: center; margin-bottom: 8px; } diff --git a/jam-ui/src/components/client/JKSessionMyTrack.js b/jam-ui/src/components/client/JKSessionMyTrack.js index 02b6b2993..b4aa54ba6 100644 --- a/jam-ui/src/components/client/JKSessionMyTrack.js +++ b/jam-ui/src/components/client/JKSessionMyTrack.js @@ -1,17 +1,24 @@ 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 JKSessionInstrumentModal from './JKSessionInstrumentModal'; +import { UncontrolledTooltip } from 'reactstrap'; +import { getInstrumentName } from '../../helpers/utils'; +import { ASSIGNMENT } from '../../helpers/globals'; import './JKSessionMyTrack.css'; const JKSessionMyTrack = ({ track, mixers, hasMixer, name, trackName, instrumentIcon, photoUrl, clientId, connStatsClientId, mode, isChat = false, isRemote = false }) => { const mixerHelper = useMixersContext(); + const jamClient = useJamClient(); const { convertPanToPercent } = usePanHelpers(); const [pan, setPan] = useState(0); const [showMenu, setShowMenu] = useState(false); const [showDiagnostics, setShowDiagnostics] = useState(false); + const [showInstrumentModal, setShowInstrumentModal] = useState(false); useEffect(() => { if (mixers?.mixer) { @@ -36,6 +43,20 @@ const JKSessionMyTrack = ({ track, mixers, hasMixer, name, trackName, instrument /> ) : null; + const handleInstrumentClick = () => { + setShowInstrumentModal(true); + }; + + const handleInstrumentSave = (instrumentId) => { + // For user's own track, use TRACK1 + jamClient.TrackSetInstrument(ASSIGNMENT.TRACK1, instrumentId); + setShowInstrumentModal(false); + }; + + const handleInstrumentModalClose = () => { + setShowInstrumentModal(false); + }; + return (
@@ -54,9 +75,27 @@ const JKSessionMyTrack = ({ track, mixers, hasMixer, name, trackName, instrument > avatar
-
- instrument +
+ remote?: {JSON.stringify(isRemote)}
+
+ instrument + {!isRemote && vst} +
+ {isRemote && ( + + {getInstrumentName(track?.instrument)} + + )}

+ {!isRemote && ( + + )}
); }; diff --git a/jam-ui/src/components/client/JKSessionScreen.js b/jam-ui/src/components/client/JKSessionScreen.js index ae704a26a..350bead7f 100644 --- a/jam-ui/src/components/client/JKSessionScreen.js +++ b/jam-ui/src/components/client/JKSessionScreen.js @@ -24,7 +24,7 @@ import { getSessionHistory, getSession, joinSession as joinSessionRest, updateSe import { CLIENT_ROLE, RECORD_TYPE_AUDIO, RECORD_TYPE_BOTH } from '../../helpers/globals'; import { MessageType } from '../../helpers/MessageFactory.js'; -import { Alert, Col, Row, Button, Card, CardBody, Modal, ModalHeader, ModalBody, ModalFooter, CardHeader, Badge } from 'reactstrap'; +import { Alert, Col, Row, Button, Card, CardBody, Modal, ModalHeader, ModalBody, ModalFooter, CardHeader, Badge, UncontrolledTooltip } from 'reactstrap'; import FalconCardHeader from '../common/FalconCardHeader'; import SessionTrackVU from './SessionTrackVU.js'; import JKSessionMyTrack from './JKSessionMyTrack.js'; @@ -36,6 +36,7 @@ import JKSessionVolumeModal from './JKSessionVolumeModal.js'; import JKSessionRecordingModal from './JKSessionRecordingModal.js'; import { SESSION_PRIVACY_MAP } from '../../helpers/globals.js'; import { toast } from 'react-toastify'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; const JKSessionScreen = () => { const logger = console; // Replace with another logging mechanism if needed @@ -575,7 +576,7 @@ const JKSessionScreen = () => {
-
Audio Inputs
+
Audio Inputs
{ myTracks={myTracks} chat={chat} mixerHelper={mixerHelper} - isRemote={false} + isRemote={true} /> { toggle={() => setShowRecordingModal(!showRecordingModal)} onSubmit={handleRecordingSubmit} /> + + +
+

Set the input level of your Audio Inputs for each of your tracks to a healthy level. It's important to set your input level correctly. If your level is set too high, you'll get distortion or clipping of your audio. If set too low, your audio signal will be too weak, which can cause noise and degrade your audio quality when you and others use the session mix to increase your volume in the mix.

+

For instructions on how to set your Audio Input levels, read this help article.

+
+ ) } diff --git a/jam-ui/src/helpers/utils.js b/jam-ui/src/helpers/utils.js index d6cfc3f03..2c529f372 100644 --- a/jam-ui/src/helpers/utils.js +++ b/jam-ui/src/helpers/utils.js @@ -798,6 +798,13 @@ export const getInstrumentIcon45 = (instrument) => { return instrumentIconMap45["_default"].asset; }; +export const getInstrumentName = (instrument) => { + if (instrument in instrumentIconMap45) { + return instrumentIconMap45[instrument].name; + } + return instrumentIconMap45["_default"].name; +}; + export const getInstrumentIcon256 = (instrument) => { if (instrument in instrumentIconMap256) { return instrumentIconMap256[instrument].asset;