From aa731c96d0ab6ed02b0b7a412d44ef4b5f63c8b0 Mon Sep 17 00:00:00 2001 From: Nuwan Date: Sun, 15 Feb 2026 14:10:34 +0530 Subject: [PATCH] enhancements to UI and functional issues --- .../icon_instrument_accordion45_inverted.svg | 1 + ..._instrument_acoustic_guitar45_inverted.svg | 1 + .../icon_instrument_banjo45_inverted.svg | 1 + ...icon_instrument_bass_guitar45_inverted.svg | 1 + .../icon_instrument_cello45_inverted.svg | 1 + .../icon_instrument_clarinet45_inverted.svg | 1 + .../icon_instrument_computer45_inverted.svg | 1 + .../icon_instrument_default45_inverted.svg | 1 + ...icon_instrument_double_bass45_inverted.svg | 1 + .../icon_instrument_drums45_inverted.svg | 1 + ..._instrument_electric_guitar45_inverted.svg | 1 + .../icon_instrument_euphonium45_inverted.svg | 1 + .../icon_instrument_flute45_inverted.svg | 1 + ...icon_instrument_french_horn45_inverted.svg | 1 + .../icon_instrument_harmonica45_inverted.svg | 1 + .../icon_instrument_keyboard45_inverted.svg | 1 + .../icon_instrument_mandolin45_inverted.svg | 1 + .../icon_instrument_oboe45_inverted.svg | 1 + .../icon_instrument_other45_inverted.svg | 1 + .../icon_instrument_piano45_inverted.svg | 1 + .../icon_instrument_saxophone45_inverted.svg | 1 + .../icon_instrument_trombone45_inverted.svg | 1 + .../icon_instrument_trumpet45_inverted.svg | 1 + .../icon_instrument_tuba45_inverted.svg | 1 + .../icon_instrument_ukelele45_inverted.svg | 1 + .../icon_instrument_unknown45_inverted.svg | 22 ++ ...con_instrument_upright_bass45_inverted.svg | 1 + .../icon_instrument_viola45_inverted.svg | 1 + .../icon_instrument_violin45_inverted.svg | 1 + .../icon_instrument_vocal45_inverted.svg | 1 + .../icon_instrument_voice45_inverted.svg | 1 + .../components/client/JKSessionChatButton.js | 2 +- .../client/JKSessionInstrumentModal.js | 31 +- .../components/client/JKSessionMyTrack.css | 32 ++- .../src/components/client/JKSessionMyTrack.js | 2 +- .../components/client/JKSessionOpenMenu.js | 2 +- .../client/JKSessionRemoteTracks.js | 4 +- .../src/components/client/JKSessionScreen.js | 266 ++++++++++-------- jam-ui/src/components/common/WindowPortal.js | 15 - jam-ui/src/helpers/utils.js | 77 +++++ jam-ui/src/hooks/useVuHelpers.js | 15 +- web/app/views/api_music_sessions/show.rabl | 2 +- 42 files changed, 320 insertions(+), 180 deletions(-) create mode 100644 jam-ui/src/assets/img/instruments/icon_instrument_accordion45_inverted.svg create mode 100644 jam-ui/src/assets/img/instruments/icon_instrument_acoustic_guitar45_inverted.svg create mode 100644 jam-ui/src/assets/img/instruments/icon_instrument_banjo45_inverted.svg create mode 100644 jam-ui/src/assets/img/instruments/icon_instrument_bass_guitar45_inverted.svg create mode 100644 jam-ui/src/assets/img/instruments/icon_instrument_cello45_inverted.svg create mode 100644 jam-ui/src/assets/img/instruments/icon_instrument_clarinet45_inverted.svg create mode 100644 jam-ui/src/assets/img/instruments/icon_instrument_computer45_inverted.svg create mode 100644 jam-ui/src/assets/img/instruments/icon_instrument_default45_inverted.svg create mode 100644 jam-ui/src/assets/img/instruments/icon_instrument_double_bass45_inverted.svg create mode 100644 jam-ui/src/assets/img/instruments/icon_instrument_drums45_inverted.svg create mode 100644 jam-ui/src/assets/img/instruments/icon_instrument_electric_guitar45_inverted.svg create mode 100644 jam-ui/src/assets/img/instruments/icon_instrument_euphonium45_inverted.svg create mode 100644 jam-ui/src/assets/img/instruments/icon_instrument_flute45_inverted.svg create mode 100644 jam-ui/src/assets/img/instruments/icon_instrument_french_horn45_inverted.svg create mode 100644 jam-ui/src/assets/img/instruments/icon_instrument_harmonica45_inverted.svg create mode 100644 jam-ui/src/assets/img/instruments/icon_instrument_keyboard45_inverted.svg create mode 100644 jam-ui/src/assets/img/instruments/icon_instrument_mandolin45_inverted.svg create mode 100644 jam-ui/src/assets/img/instruments/icon_instrument_oboe45_inverted.svg create mode 100644 jam-ui/src/assets/img/instruments/icon_instrument_other45_inverted.svg create mode 100644 jam-ui/src/assets/img/instruments/icon_instrument_piano45_inverted.svg create mode 100644 jam-ui/src/assets/img/instruments/icon_instrument_saxophone45_inverted.svg create mode 100644 jam-ui/src/assets/img/instruments/icon_instrument_trombone45_inverted.svg create mode 100644 jam-ui/src/assets/img/instruments/icon_instrument_trumpet45_inverted.svg create mode 100644 jam-ui/src/assets/img/instruments/icon_instrument_tuba45_inverted.svg create mode 100644 jam-ui/src/assets/img/instruments/icon_instrument_ukelele45_inverted.svg create mode 100644 jam-ui/src/assets/img/instruments/icon_instrument_unknown45_inverted.svg create mode 100644 jam-ui/src/assets/img/instruments/icon_instrument_upright_bass45_inverted.svg create mode 100644 jam-ui/src/assets/img/instruments/icon_instrument_viola45_inverted.svg create mode 100644 jam-ui/src/assets/img/instruments/icon_instrument_violin45_inverted.svg create mode 100644 jam-ui/src/assets/img/instruments/icon_instrument_vocal45_inverted.svg create mode 100644 jam-ui/src/assets/img/instruments/icon_instrument_voice45_inverted.svg diff --git a/jam-ui/src/assets/img/instruments/icon_instrument_accordion45_inverted.svg b/jam-ui/src/assets/img/instruments/icon_instrument_accordion45_inverted.svg new file mode 100644 index 000000000..f7a8f4b74 --- /dev/null +++ b/jam-ui/src/assets/img/instruments/icon_instrument_accordion45_inverted.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/jam-ui/src/assets/img/instruments/icon_instrument_acoustic_guitar45_inverted.svg b/jam-ui/src/assets/img/instruments/icon_instrument_acoustic_guitar45_inverted.svg new file mode 100644 index 000000000..5e4744d76 --- /dev/null +++ b/jam-ui/src/assets/img/instruments/icon_instrument_acoustic_guitar45_inverted.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/jam-ui/src/assets/img/instruments/icon_instrument_banjo45_inverted.svg b/jam-ui/src/assets/img/instruments/icon_instrument_banjo45_inverted.svg new file mode 100644 index 000000000..e16f90ab0 --- /dev/null +++ b/jam-ui/src/assets/img/instruments/icon_instrument_banjo45_inverted.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/jam-ui/src/assets/img/instruments/icon_instrument_bass_guitar45_inverted.svg b/jam-ui/src/assets/img/instruments/icon_instrument_bass_guitar45_inverted.svg new file mode 100644 index 000000000..28ff5fe33 --- /dev/null +++ b/jam-ui/src/assets/img/instruments/icon_instrument_bass_guitar45_inverted.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/jam-ui/src/assets/img/instruments/icon_instrument_cello45_inverted.svg b/jam-ui/src/assets/img/instruments/icon_instrument_cello45_inverted.svg new file mode 100644 index 000000000..bd4c147a9 --- /dev/null +++ b/jam-ui/src/assets/img/instruments/icon_instrument_cello45_inverted.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/jam-ui/src/assets/img/instruments/icon_instrument_clarinet45_inverted.svg b/jam-ui/src/assets/img/instruments/icon_instrument_clarinet45_inverted.svg new file mode 100644 index 000000000..ae5d82247 --- /dev/null +++ b/jam-ui/src/assets/img/instruments/icon_instrument_clarinet45_inverted.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/jam-ui/src/assets/img/instruments/icon_instrument_computer45_inverted.svg b/jam-ui/src/assets/img/instruments/icon_instrument_computer45_inverted.svg new file mode 100644 index 000000000..214468f67 --- /dev/null +++ b/jam-ui/src/assets/img/instruments/icon_instrument_computer45_inverted.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/jam-ui/src/assets/img/instruments/icon_instrument_default45_inverted.svg b/jam-ui/src/assets/img/instruments/icon_instrument_default45_inverted.svg new file mode 100644 index 000000000..91062dd8e --- /dev/null +++ b/jam-ui/src/assets/img/instruments/icon_instrument_default45_inverted.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/jam-ui/src/assets/img/instruments/icon_instrument_double_bass45_inverted.svg b/jam-ui/src/assets/img/instruments/icon_instrument_double_bass45_inverted.svg new file mode 100644 index 000000000..c46f8d492 --- /dev/null +++ b/jam-ui/src/assets/img/instruments/icon_instrument_double_bass45_inverted.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/jam-ui/src/assets/img/instruments/icon_instrument_drums45_inverted.svg b/jam-ui/src/assets/img/instruments/icon_instrument_drums45_inverted.svg new file mode 100644 index 000000000..53a19f8a0 --- /dev/null +++ b/jam-ui/src/assets/img/instruments/icon_instrument_drums45_inverted.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/jam-ui/src/assets/img/instruments/icon_instrument_electric_guitar45_inverted.svg b/jam-ui/src/assets/img/instruments/icon_instrument_electric_guitar45_inverted.svg new file mode 100644 index 000000000..58eaaa1f9 --- /dev/null +++ b/jam-ui/src/assets/img/instruments/icon_instrument_electric_guitar45_inverted.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/jam-ui/src/assets/img/instruments/icon_instrument_euphonium45_inverted.svg b/jam-ui/src/assets/img/instruments/icon_instrument_euphonium45_inverted.svg new file mode 100644 index 000000000..0da0fc2d7 --- /dev/null +++ b/jam-ui/src/assets/img/instruments/icon_instrument_euphonium45_inverted.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/jam-ui/src/assets/img/instruments/icon_instrument_flute45_inverted.svg b/jam-ui/src/assets/img/instruments/icon_instrument_flute45_inverted.svg new file mode 100644 index 000000000..a5c50b27d --- /dev/null +++ b/jam-ui/src/assets/img/instruments/icon_instrument_flute45_inverted.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/jam-ui/src/assets/img/instruments/icon_instrument_french_horn45_inverted.svg b/jam-ui/src/assets/img/instruments/icon_instrument_french_horn45_inverted.svg new file mode 100644 index 000000000..d3091de15 --- /dev/null +++ b/jam-ui/src/assets/img/instruments/icon_instrument_french_horn45_inverted.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/jam-ui/src/assets/img/instruments/icon_instrument_harmonica45_inverted.svg b/jam-ui/src/assets/img/instruments/icon_instrument_harmonica45_inverted.svg new file mode 100644 index 000000000..a18cdce27 --- /dev/null +++ b/jam-ui/src/assets/img/instruments/icon_instrument_harmonica45_inverted.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/jam-ui/src/assets/img/instruments/icon_instrument_keyboard45_inverted.svg b/jam-ui/src/assets/img/instruments/icon_instrument_keyboard45_inverted.svg new file mode 100644 index 000000000..3bd66899d --- /dev/null +++ b/jam-ui/src/assets/img/instruments/icon_instrument_keyboard45_inverted.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/jam-ui/src/assets/img/instruments/icon_instrument_mandolin45_inverted.svg b/jam-ui/src/assets/img/instruments/icon_instrument_mandolin45_inverted.svg new file mode 100644 index 000000000..b29f0f67a --- /dev/null +++ b/jam-ui/src/assets/img/instruments/icon_instrument_mandolin45_inverted.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/jam-ui/src/assets/img/instruments/icon_instrument_oboe45_inverted.svg b/jam-ui/src/assets/img/instruments/icon_instrument_oboe45_inverted.svg new file mode 100644 index 000000000..c14c05c2f --- /dev/null +++ b/jam-ui/src/assets/img/instruments/icon_instrument_oboe45_inverted.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/jam-ui/src/assets/img/instruments/icon_instrument_other45_inverted.svg b/jam-ui/src/assets/img/instruments/icon_instrument_other45_inverted.svg new file mode 100644 index 000000000..91062dd8e --- /dev/null +++ b/jam-ui/src/assets/img/instruments/icon_instrument_other45_inverted.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/jam-ui/src/assets/img/instruments/icon_instrument_piano45_inverted.svg b/jam-ui/src/assets/img/instruments/icon_instrument_piano45_inverted.svg new file mode 100644 index 000000000..4b650ee54 --- /dev/null +++ b/jam-ui/src/assets/img/instruments/icon_instrument_piano45_inverted.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/jam-ui/src/assets/img/instruments/icon_instrument_saxophone45_inverted.svg b/jam-ui/src/assets/img/instruments/icon_instrument_saxophone45_inverted.svg new file mode 100644 index 000000000..6a9836d4d --- /dev/null +++ b/jam-ui/src/assets/img/instruments/icon_instrument_saxophone45_inverted.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/jam-ui/src/assets/img/instruments/icon_instrument_trombone45_inverted.svg b/jam-ui/src/assets/img/instruments/icon_instrument_trombone45_inverted.svg new file mode 100644 index 000000000..18bc2f045 --- /dev/null +++ b/jam-ui/src/assets/img/instruments/icon_instrument_trombone45_inverted.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/jam-ui/src/assets/img/instruments/icon_instrument_trumpet45_inverted.svg b/jam-ui/src/assets/img/instruments/icon_instrument_trumpet45_inverted.svg new file mode 100644 index 000000000..d3f2504df --- /dev/null +++ b/jam-ui/src/assets/img/instruments/icon_instrument_trumpet45_inverted.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/jam-ui/src/assets/img/instruments/icon_instrument_tuba45_inverted.svg b/jam-ui/src/assets/img/instruments/icon_instrument_tuba45_inverted.svg new file mode 100644 index 000000000..defcf14cb --- /dev/null +++ b/jam-ui/src/assets/img/instruments/icon_instrument_tuba45_inverted.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/jam-ui/src/assets/img/instruments/icon_instrument_ukelele45_inverted.svg b/jam-ui/src/assets/img/instruments/icon_instrument_ukelele45_inverted.svg new file mode 100644 index 000000000..16856a0dc --- /dev/null +++ b/jam-ui/src/assets/img/instruments/icon_instrument_ukelele45_inverted.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/jam-ui/src/assets/img/instruments/icon_instrument_unknown45_inverted.svg b/jam-ui/src/assets/img/instruments/icon_instrument_unknown45_inverted.svg new file mode 100644 index 000000000..15e41b23b --- /dev/null +++ b/jam-ui/src/assets/img/instruments/icon_instrument_unknown45_inverted.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + \ No newline at end of file diff --git a/jam-ui/src/assets/img/instruments/icon_instrument_upright_bass45_inverted.svg b/jam-ui/src/assets/img/instruments/icon_instrument_upright_bass45_inverted.svg new file mode 100644 index 000000000..c46f8d492 --- /dev/null +++ b/jam-ui/src/assets/img/instruments/icon_instrument_upright_bass45_inverted.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/jam-ui/src/assets/img/instruments/icon_instrument_viola45_inverted.svg b/jam-ui/src/assets/img/instruments/icon_instrument_viola45_inverted.svg new file mode 100644 index 000000000..92d4286b0 --- /dev/null +++ b/jam-ui/src/assets/img/instruments/icon_instrument_viola45_inverted.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/jam-ui/src/assets/img/instruments/icon_instrument_violin45_inverted.svg b/jam-ui/src/assets/img/instruments/icon_instrument_violin45_inverted.svg new file mode 100644 index 000000000..6bfa87711 --- /dev/null +++ b/jam-ui/src/assets/img/instruments/icon_instrument_violin45_inverted.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/jam-ui/src/assets/img/instruments/icon_instrument_vocal45_inverted.svg b/jam-ui/src/assets/img/instruments/icon_instrument_vocal45_inverted.svg new file mode 100644 index 000000000..e942fe736 --- /dev/null +++ b/jam-ui/src/assets/img/instruments/icon_instrument_vocal45_inverted.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/jam-ui/src/assets/img/instruments/icon_instrument_voice45_inverted.svg b/jam-ui/src/assets/img/instruments/icon_instrument_voice45_inverted.svg new file mode 100644 index 000000000..e942fe736 --- /dev/null +++ b/jam-ui/src/assets/img/instruments/icon_instrument_voice45_inverted.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/jam-ui/src/components/client/JKSessionChatButton.js b/jam-ui/src/components/client/JKSessionChatButton.js index 022d97b65..5c1b4b839 100644 --- a/jam-ui/src/components/client/JKSessionChatButton.js +++ b/jam-ui/src/components/client/JKSessionChatButton.js @@ -52,7 +52,7 @@ const JKSessionChatButton = ({ sessionId }) => { Chat Chat diff --git a/jam-ui/src/components/client/JKSessionInstrumentModal.js b/jam-ui/src/components/client/JKSessionInstrumentModal.js index 87126a119..53d03ca25 100644 --- a/jam-ui/src/components/client/JKSessionInstrumentModal.js +++ b/jam-ui/src/components/client/JKSessionInstrumentModal.js @@ -8,7 +8,7 @@ import { Table, Input, } from 'reactstrap'; -import { listInstruments, getInstrumentIcon45, convertClientInstrumentToServer } from '../../helpers/utils'; +import { listInstruments, getInstrumentIcon45, convertClientInstrumentToServer, getInstrumentIcon45_inverted } from '../../helpers/utils'; import { server_to_client_instrument_map, ASSIGNMENT } from '../../helpers/globals'; import { useJamClient } from '../../context/JamClientContext'; @@ -58,13 +58,6 @@ const JKSessionInstrumentModal = ({ isOpen, toggle, onSave }) => { - {/* - - - - - - */} {instruments.map((instrument) => ( { className={selectedInstrumentId === instrument.id ? 'table-active' : ''} style={{ cursor: 'pointer' }} > - - - + ))}
IconInstrumentSelect
+ setSelectedInstrumentId(instrument.id)} - style={{ margin: 0 }} + style={{ marginLeft: 3, marginRight: 6 }} /> + {instrument.description} - -   - {instrument.description} - - + {instrument.description} +
- diff --git a/jam-ui/src/components/client/JKSessionRemoteTracks.js b/jam-ui/src/components/client/JKSessionRemoteTracks.js index 73c388476..a1b39d980 100644 --- a/jam-ui/src/components/client/JKSessionRemoteTracks.js +++ b/jam-ui/src/components/client/JKSessionRemoteTracks.js @@ -3,7 +3,7 @@ import { useSelector } from 'react-redux'; import { selectActiveSession } from '../../store/features/activeSessionSlice'; import { useAuth } from '../../context/UserAuth'; import JKSessionAudioInputs from './JKSessionAudioInputs'; -import { getAvatarUrl, getInstrumentIcon45 } from '../../helpers/utils'; +import { getAvatarUrl, getInstrumentIcon45_inverted } from '../../helpers/utils'; const JKSessionRemoteTracks = ({ mixerHelper, sessionModel }) => { // Phase 4: Replace CurrentSessionContext with Redux @@ -35,7 +35,7 @@ const JKSessionRemoteTracks = ({ mixerHelper, sessionModel }) => { const mixerData = mixerHelper.findMixerForTrack(participant.client_id, track, false, mixerHelper.mixMode); const hasMixer = !!mixerData.mixer; - const instrumentIcon = getInstrumentIcon45(track.instrument_id || track.instrument); + const instrumentIcon = getInstrumentIcon45_inverted(track.instrument_id || track.instrument); const trackName = name; tracks.push({ diff --git a/jam-ui/src/components/client/JKSessionScreen.js b/jam-ui/src/components/client/JKSessionScreen.js index 1937ef68c..4af887c18 100644 --- a/jam-ui/src/components/client/JKSessionScreen.js +++ b/jam-ui/src/components/client/JKSessionScreen.js @@ -3,7 +3,6 @@ import React, { useEffect, useRef, useState, memo, useMemo, useCallback } from ' import { useParams, useHistory } from 'react-router-dom'; import { useDispatch, useSelector } from 'react-redux'; -//import useJamServer, { ConnectionStatus } from '../../hooks/useJamServer' import useGearUtils from '../../hooks/useGearUtils' import useSessionUtils from '../../hooks/useSessionUtils.js'; import useSessionModel from '../../hooks/useSessionModel.js'; @@ -63,8 +62,8 @@ import { MessageType } from '../../helpers/MessageFactory.js'; import { Alert, Col, Row, Button, Card, CardBody, Modal, ModalHeader, ModalBody, ModalFooter, CardHeader, Badge, UncontrolledTooltip, Spinner } from 'reactstrap'; import FalconCardHeader from '../common/FalconCardHeader'; -import SessionTrackVU from './SessionTrackVU.js'; -import JKSessionMyTrack from './JKSessionMyTrack.js'; +//import SessionTrackVU from './SessionTrackVU.js'; +//import JKSessionMyTrack from './JKSessionMyTrack.js'; import JKSessionAudioInputs from './JKSessionAudioInputs.js'; import JKSessionRemoteTracks from './JKSessionRemoteTracks.js'; import JKSessionSettingsModal from './JKSessionSettingsModal.js'; @@ -99,6 +98,7 @@ import openIcon from '../../assets/img/client/open.svg'; import chatIcon from '../../assets/img/client/chat.svg'; import attachIcon from '../../assets/img/client/attach.svg'; import resyncIcon from '../../assets/img/client/resync.svg'; +import helpIcon from '../../assets/img/client/help.svg'; const JKSessionScreen = () => { const logger = console; // Replace with another logging mechanism if needed @@ -215,14 +215,14 @@ const JKSessionScreen = () => { // Stable callback for backing track popup close const handleBackingTrackClose = useCallback(() => { - console.log('JKSessionScreen: Backing Track Popup closing'); + // console.log('JKSessionScreen: Backing Track Popup closing'); dispatch(closeModal('backingTrack')); dispatch(clearBackingTrackData()); }, [dispatch]); // Stable callback for backing track close in main screen const handleBackingTrackMainClose = useCallback(async () => { - console.log('JKSessionScreen: Backing Track main screen close requested'); + // console.log('JKSessionScreen: Backing Track main screen close requested'); await closeMedia(); // Also clear the backing track popup data dispatch(clearBackingTrackData()); @@ -240,7 +240,7 @@ const JKSessionScreen = () => { // JamTrack close handler (used by both player and session screen) const handleJamTrackClose = useCallback(async () => { - console.log('Closing jam track'); + // console.log('Closing jam track'); try { // Call the close jam track API await closeJamTrack({ id: currentSession.id }); @@ -254,14 +254,14 @@ const JKSessionScreen = () => { toast.success('JamTrack closed successfully'); } catch (error) { - console.error('Error closing jam track:', error); + // console.error('Error closing jam track:', error); toast.error('Failed to close JamTrack'); } }, [currentSession, dispatch]); // Metronome close handler (used by both popup and session track) const handleMetronomeClose = useCallback(async () => { - console.log('JKSessionScreen: Closing metronome'); + // console.log('JKSessionScreen: Closing metronome'); try { // Call jamClient to close metronome await jamClient.SessionCloseMetronome(); @@ -273,14 +273,14 @@ const JKSessionScreen = () => { toast.success('Metronome closed successfully'); } catch (error) { - console.error('Error closing metronome:', error); + // console.error('Error closing metronome:', error); toast.error('Failed to close metronome'); } }, [jamClient, closeMetronome]); // Stable callback for JamTrack player popup close (WindowPortal X button or ESC) const handleJamTrackPlayerClose = useCallback(async () => { - console.log('JKSessionScreen: JamTrack Player Popup closing'); + // console.log('JKSessionScreen: JamTrack Player Popup closing'); // Call the full close handler to clean up everything await handleJamTrackClose(); }, [handleJamTrackClose]); @@ -307,7 +307,7 @@ const JKSessionScreen = () => { // Fetch session data when URL sessionId changes useEffect(() => { if (sessionIdFromUrl && sessionIdFromUrl !== sessionId) { - console.log('Fetching active session:', sessionIdFromUrl); + // console.log('Fetching active session:', sessionIdFromUrl); dispatch(fetchActiveSession(sessionIdFromUrl)); } }, [sessionIdFromUrl, sessionId, dispatch]); @@ -318,17 +318,17 @@ const JKSessionScreen = () => { // Alert callback handler - routes backend alerts to appropriate handlers const alertCallbackHandler = (type, text) => { - console.log('[AlertCallback] type:', type, 'text:', text); + // console.log('[AlertCallback] type:', type, 'text:', text); // BACKEND_MIXER_CHANGE = 2 if (type === 2) { - console.log('[AlertCallback] BACKEND_MIXER_CHANGE:', text); + // console.log('[AlertCallback] BACKEND_MIXER_CHANGE:', text); if (sessionModel && sessionModel.onBackendMixerChanged) { sessionModel.onBackendMixerChanged(type, text); } } // Alert code 40: Audio profile issues (common with built-in audio) if (type === 40) { - console.warn('[AlertCallback] Audio profile alert (40):', text); + // console.warn('[AlertCallback] Audio profile alert (40):', text); } // Handle other alert types as needed }; @@ -346,29 +346,29 @@ const JKSessionScreen = () => { useEffect(() => { if (!isConnected || !jamClient) return; - console.debug("-DEBUG- JKSessionScreen: isConnected changed to true"); + // console.debug("-DEBUG- JKSessionScreen: isConnected changed to true"); guardOnJoinSession(); }, [isConnected, jamClient]); // Added jamClient to dependencies for stability const guardOnJoinSession = async () => { - console.log("-DEBUG- JKSessionScreen: guardOnJoinSession") + // console.log("-DEBUG- JKSessionScreen: guardOnJoinSession") try { const musicSessionResp = await getSessionHistory(sessionIdFromUrl); const musicSession = await musicSessionResp.json(); - logger.log("-DEBUG- JKSessionScreen: fetched session history: ", musicSession); + // logger.log("-DEBUG- JKSessionScreen: fetched session history: ", musicSession); dispatch(setSessionId(musicSession.id)); // Phase 4: dispatch to Redux const musicianAccessOnJoin = musicSession.musician_access; const shouldVerifyNetwork = musicSession.musician_access; const clientRole = await jamClient.getClientParentChildRole(); - logger.log("-DEBUG- JKSessionScreen: musicianAccessOnJoin when joining session: " + musicianAccessOnJoin); - logger.log("-DEBUG- JKSessionScreen: clientRole when joining session: " + clientRole); - logger.log("-DEBUG- JKSessionScreen: currentSessionId when joining session: " + currentSessionIdRef.current); + // logger.log("-DEBUG- JKSessionScreen: musicianAccessOnJoin when joining session: " + musicianAccessOnJoin); + // logger.log("-DEBUG- JKSessionScreen: clientRole when joining session: " + clientRole); + // logger.log("-DEBUG- JKSessionScreen: currentSessionId when joining session: " + currentSessionIdRef.current); if (clientRole === CLIENT_ROLE.CHILD) { - logger.debug("-DEBUG- JKSessionScreen: client is configured to act as child. skipping all checks. assuming 0 tracks"); + // logger.debug("-DEBUG- JKSessionScreen: client is configured to act as child. skipping all checks. assuming 0 tracks"); dispatch(setUserTracks([])); //skipping all checks. assuming 0 tracks @@ -379,26 +379,26 @@ const JKSessionScreen = () => { try { await guardAgainstInvalidConfiguration(app, shouldVerifyNetwork); const result = await SessionPageEnter(); - logger.log("-DEBUG- JKSessionScreen: SessionPageEnter result: ", result); + // logger.log("-DEBUG- JKSessionScreen: SessionPageEnter result: ", result); try { await guardAgainstActiveProfileMissing(app, result); - logger.log("-DEBUG- JKSessionScreen: user has an active profile"); + // logger.log("-DEBUG- JKSessionScreen: user has an active profile"); try { const tracks = await sessionModel.waitForSessionPageEnterDone(); dispatch(setUserTracks(tracks)); - logger.log("-DEBUG- JKSessionScreen: userTracks: ", tracks); + // logger.log("-DEBUG- JKSessionScreen: userTracks: ", tracks); try { await ensureAppropriateProfile(musicianAccessOnJoin) - logger.log("-DEBUG- JKSessionScreen: user has passed all session guards") + // logger.log("-DEBUG- JKSessionScreen: user has passed all session guards") dispatch(setGuardsPassed(true)) } catch (error) { - logger.error("-DEBUG- JKSessionScreen: User profile is not appropriate for session:", error); + // logger.error("-DEBUG- JKSessionScreen: User profile is not appropriate for session:", error); // If error doesn't control navigation, show alert (legacy behavior shows dialog) if (!error?.controlled_location) { - logger.debug("-DEBUG- JKSessionScreen: Profile guard failed, showing alert"); + // logger.debug("-DEBUG- JKSessionScreen: Profile guard failed, showing alert"); // TODO: Replace with proper JKSessionProfileDialog component alert( 'Your current audio profile is not suitable for multi-user sessions.\n\n' + @@ -412,12 +412,12 @@ const JKSessionScreen = () => { // If controlled_location is true, the error handler already redirected } } catch (error) { - logger.error("-DEBUG- JKSessionScreen: Error: waiting for session page enter to complete:", error); + // logger.error("-DEBUG- JKSessionScreen: Error: waiting for session page enter to complete:", error); if (error === "timeout") { //TODO: show some error } else if (error === 'session_over') { // do nothing; session ended before we got the user track info. just bail - logger.debug("-DEBUG- JKSessionScreen: Error:: session is over; bailing"); + // logger.debug("-DEBUG- JKSessionScreen: Error:: session is over; bailing"); } else { //TODO: show some error } @@ -426,16 +426,16 @@ const JKSessionScreen = () => { } } catch (error) { // Active profile is missing, redirect to home or if the error has a location, redirect there - logger.error("-DEBUG- JKSessionScreen: Error: Active profile is missing or invalid:", error); + // logger.error("-DEBUG- JKSessionScreen: Error: Active profile is missing or invalid:", error); } } catch (error) { // Invalid configuration, redirect to home await sessionModel.handleLeaveSession(); //TODO: handle redirection - logger.error("-DEBUG- JKSessionScreen: Error: Invalid configuration:", error); + // logger.error("-DEBUG- JKSessionScreen: Error: Invalid configuration:", error); } } catch (error) { - logger.error("-DEBUG- JKSessionScreen: Error: Error fetching session history:", error); + // logger.error("-DEBUG- JKSessionScreen: Error: Error fetching session history:", error); //TODO: Show some error } }; @@ -452,7 +452,7 @@ const JKSessionScreen = () => { return; } - console.log('[Track Sync] Mixers ready, scheduling track sync calls'); + // console.log('[Track Sync] Mixers ready, scheduling track sync calls'); // First sync: Initial setup (~1s after join) const timer1 = setTimeout(() => { @@ -503,7 +503,7 @@ const JKSessionScreen = () => { let clientRole = await jamClient.getClientParentChildRole(); const parentClientId = await jamClient.getParentClientId(); - console.debug('role when joining session: ' + clientRole + ', parentClientId: ' + parentClientId); + // console.debug('role when joining session: ' + clientRole + ', parentClientId: ' + parentClientId); @@ -526,20 +526,20 @@ const JKSessionScreen = () => { //const clientId = await jamClient.clientID(); const clientId = server.clientId; - console.log("joining session " + sessionId + " as client " + JSON.stringify(clientId) + " with role " + clientRole + " and parent client " + parentClientId); + // console.log("joining session " + sessionId + " as client " + JSON.stringify(clientId) + " with role " + clientRole + " and parent client " + parentClientId); const latency = await jamClient.FTUEGetExpectedLatency().latency - console.log("joinSession parameters: ", { - client_id: clientId, - ip_address: server.publicIP, - as_musician: true, - tracks: userTracks, - session_id: sessionId, - client_role: clientRole, - parent_client_id: parentClientId, - audio_latency: latency, - }); + // console.log("joinSession parameters: ", { + // client_id: clientId, + // ip_address: server.publicIP, + // as_musician: true, + // tracks: userTracks, + // session_id: sessionId, + // client_role: clientRole, + // parent_client_id: parentClientId, + // audio_latency: latency, + // }); joinSessionRest({ client_id: clientId, @@ -551,20 +551,20 @@ const JKSessionScreen = () => { parent_client_id: parentClientId, audio_latency: latency, }).then(async (response) => { - console.debug("joinSessionRest response received", response.errors); + // console.debug("joinSessionRest response received", response.errors); if (response.errors) { throw new Error("Unable to join session: " + JSON.stringify(response.errors)); } else { const data = await response.json(); - console.debug("join session response xxx: ", data); + // console.debug("join session response xxx: ", data); // Update Redux state - user has successfully joined dispatch(joinActiveSession.fulfilled(data, '', { sessionId, options: {} })); if (!inSession()) { // the user has left the session before they got joined. We need to issue a leave again to the server to make sure they are out - logger.debug("user left before fully joined to session. telling server again that they have left"); + // logger.debug("user left before fully joined to session. telling server again that they have left"); sessionModel.leaveSessionRest(); } @@ -647,7 +647,7 @@ const JKSessionScreen = () => { } }).catch((xhr) => { - console.error("joinSessionRest error: ", xhr); + // console.error("joinSessionRest error: ", xhr); let leaveBehavior; sessionModel.updateCurrentSession(null); @@ -874,15 +874,15 @@ const JKSessionScreen = () => { const doStartRecording = (params) => { startRecording({ music_session_id: currentSession.id, recordVideo: params.recordVideo }).then(async (recording) => { const currentRecordingId = recording.id; - console.debug("Recording started with ID: ", currentRecordingId); + // console.debug("Recording started with ID: ", currentRecordingId); const groupedTracks = groupTracksToClient(recording); try { await jamClient.StartMediaRecording(currentRecordingId, groupedTracks, params); } catch (error) { - console.error("Error starting media recording:", error); + // console.error("Error starting media recording:", error); } }).catch((error) => { - console.error("Error starting recording:", error); + // console.error("Error starting recording:", error); }); } @@ -900,7 +900,7 @@ const JKSessionScreen = () => { // Close metronome if open before leaving if (metronomeState.isOpen) { - console.log('Closing metronome before leaving session'); + // console.log('Closing metronome before leaving session'); closeMetronome(); } @@ -929,7 +929,7 @@ const JKSessionScreen = () => { // Navigate to sessions page using React Router history.push('/sessions'); } catch (error) { - console.error('Error submitting feedback or leaving session:', error); + // console.error('Error submitting feedback or leaving session:', error); toast.error('Failed to submit feedback or leave session'); } finally { setLeaveLoading(false); @@ -944,7 +944,7 @@ const JKSessionScreen = () => { // Reset metronome state when component unmounts (session ends) if (metronomeState.isOpen) { - console.log('Resetting metronome state on session cleanup'); + // console.log('Resetting metronome state on session cleanup'); resetMetronome(); } @@ -959,7 +959,7 @@ const JKSessionScreen = () => { // Check if user can use video (subscription/permission check) const canVideo = () => { // This would need to be implemented based on user subscription logic - console.debug("JKSessionScreen: Checking video permission for user", currentSession); + // console.debug("JKSessionScreen: Checking video permission for user", currentSession); return currentSession?.can_use_video || false; }; @@ -984,11 +984,11 @@ const JKSessionScreen = () => { const videoUrl = `${response.url}&audiooff=true`; // Open video URL in new browser window/tab - console.debug("JKSessionScreen: Opening video conferencing URL", videoUrl); + // console.debug("JKSessionScreen: Opening video conferencing URL", videoUrl); openExternalLink(videoUrl); } catch (error) { - console.error('Failed to get video room URL:', error); + // console.error('Failed to get video room URL:', error); // Handle error - could show error message to user toast.error('Failed to start video session'); } finally { @@ -1001,7 +1001,7 @@ const JKSessionScreen = () => { const showVideoUpgradePrompt = () => { // Implementation for showing upgrade modal/banner // This could use a modal context or toast notification - console.log('Show video upgrade prompt'); + // console.log('Show video upgrade prompt'); toast.warning(, { autoClose: false }); }; @@ -1023,7 +1023,7 @@ const JKSessionScreen = () => { try { await jamClient.LaunchBroadcastSettings(); } catch (e) { - console.error(e); + // console.error(e); } }; @@ -1037,7 +1037,7 @@ const JKSessionScreen = () => { await resyncAudio(); // Silent success (matches legacy behavior) } catch (error) { - console.error('Audio resync failed:', error); + // console.error('Audio resync failed:', error); if (error.message === 'timeout') { toast.error('Audio resync timed out. Please try again.'); } else { @@ -1073,7 +1073,7 @@ const JKSessionScreen = () => { // Show warnings if any (e.g., backend may not fully support this type) if (validation.warnings) { validation.warnings.forEach(warning => { - console.warn('Attachment warning:', warning); + // console.warn('Attachment warning:', warning); }); } @@ -1109,17 +1109,17 @@ const JKSessionScreen = () => { }, [uploadStatus]); const handleBackingTrackSelected = async (result) => { - console.log('JKSessionScreen: handleBackingTrackSelected called with:', result); - console.log('JKSessionScreen: Current state - showBackingTrackPopup:', showBackingTrackPopup, 'popupGuard:', popupGuard); + // console.log('JKSessionScreen: handleBackingTrackSelected called with:', result); + // console.log('JKSessionScreen: Current state - showBackingTrackPopup:', showBackingTrackPopup, 'popupGuard:', popupGuard); try { - console.log('JKSessionScreen: Calling jamClient.SessionOpenBackingTrackFile...'); + // console.log('JKSessionScreen: Calling jamClient.SessionOpenBackingTrackFile...'); // Open the backing track file await jamClient.SessionOpenBackingTrackFile(result.file, false); - console.log('JKSessionScreen: jamClient.SessionOpenBackingTrackFile completed'); + // console.log('JKSessionScreen: jamClient.SessionOpenBackingTrackFile completed'); // Set up data for the popup (don't store jamClient in Redux - it's not serializable) - console.log('JKSessionScreen: Setting backing track data...'); + // console.log('JKSessionScreen: Setting backing track data...'); dispatch(setBackingTrackData({ backingTrack: result.file, session: currentSession, @@ -1127,24 +1127,24 @@ const JKSessionScreen = () => { })); // Show the popup - console.log('JKSessionScreen: Setting showBackingTrackPopup to true...'); + // console.log('JKSessionScreen: Setting showBackingTrackPopup to true...'); dispatch(openModal('backingTrack')); - console.log('JKSessionScreen: handleBackingTrackSelected completed successfully'); + // console.log('JKSessionScreen: handleBackingTrackSelected completed successfully'); //TODO: In the legacy client, the popup window was opened as a native window through the client. decide whether we need to replicate that behavior here or do it through the browser only } catch (error) { - console.error('JKSessionScreen: Error opening backing track:', error); + // console.error('JKSessionScreen: Error opening backing track:', error); toast.error('Failed to open backing track'); } }; const handleJamTrackSelect = async (jamTrack) => { - console.log('Jam track selected:', jamTrack); + // console.log('Jam track selected:', jamTrack); try { // Fetch jam track details with stems const response = await getJamTrack({ id: jamTrack.id }); const jamTrackWithStems = await response.json(); - console.log('Jam track data:', jamTrackWithStems); + // console.log('Jam track data:', jamTrackWithStems); // Set the selected jam track and stems (for display on session screen) dispatch(setSelectedJamTrack(jamTrackWithStems)); @@ -1159,13 +1159,13 @@ const JKSessionScreen = () => { toast.success(`Loaded JamTrack: ${jamTrackWithStems.name}`); } catch (error) { - console.error('Error loading jam track:', error); + // console.error('Error loading jam track:', error); toast.error('Failed to load JamTrack'); } }; const handleMetronomeSelected = async () => { - console.log('Opening metronome'); + // console.log('Opening metronome'); try { // Check if currently recording - can't open metronome while recording if (currentlyRecording) { @@ -1202,7 +1202,7 @@ const JKSessionScreen = () => { const meter = 1; const cricket = false; - console.log(`Opening metronome controls with default settings: bpm=${bpm}, sound=${soundName}, meter=${meter}`); + // console.log(`Opening metronome controls with default settings: bpm=${bpm}, sound=${soundName}, meter=${meter}`); // Inform server about metronome opening (like legacy SessionStore) await openMetronome({ id: currentSession.id }); @@ -1227,7 +1227,7 @@ const JKSessionScreen = () => { toast.success('Metronome opened successfully'); } catch (error) { - console.error('Error opening metronome:', error); + // console.error('Error opening metronome:', error); toast.error('Failed to open metronome'); } }; @@ -1260,11 +1260,18 @@ const JKSessionScreen = () => { return unstable; } catch (error) { - console.error('Error checking NTP stability:', error); + // console.error('Error checking NTP stability:', error); return []; } }; + const handleAudioConfigClick = () => { + //dispatch(openModal('audioConfig')); + // console.log('Audio configuration options coming soon'); + alert('Audio configuration modal is not implemented yet'); + + } + return ( {!isConnected &&
Connecting to backend...
} @@ -1275,24 +1282,24 @@ const JKSessionScreen = () => {
- dispatch(openModal('jamTrack'))} onMetronomeSelected={handleMetronomeSelected} /> @@ -1310,11 +1317,11 @@ const JKSessionScreen = () => { onClick={handleAttachClick} disabled={isUploading} > - Attach + Attach {isUploading ? 'Uploading...' : 'Attach'}
@@ -1323,7 +1330,12 @@ const JKSessionScreen = () => {
-
Audio Inputs
+
Audio Inputs + + {/* */} + Help + Settings +
{
-
Session Mix
+
Session Mix + + Help + +
{ {/* JamTrack Section - Show stems when player is ready */} {selectedJamTrack && jamTrackStems.length > 0 && - (jamTrackDownloadState.state === 'synchronized' || jamTrackDownloadState.state === 'idle') && ( - <> -
- - - )} + (jamTrackDownloadState.state === 'synchronized' || jamTrackDownloadState.state === 'idle') && ( + <> +
+ + + )} {/* Backing Track Section - Show track when player is open */} {showBackingTrackPlayer && mixerHelper.backingTracks && mixerHelper.backingTracks.length > 0 && ( @@ -1543,7 +1559,7 @@ const JKSessionScreen = () => { currentSession={{ ...currentSession, privacy: musicianAccess }} loading={settingsLoading} onSave={async (payload) => { - console.log('Session settings :', payload); + // console.log('Session settings :', payload); try { setSettingsLoading(true); @@ -1569,12 +1585,12 @@ const JKSessionScreen = () => { ...payload }); const data = await response.json(); - console.log('Updated session settings response:', data); + // console.log('Updated session settings response:', data); dispatch(updateSessionData(data)); // Phase 4: dispatch to Redux dispatch(closeModal('settings')); toast.success('Session settings updated successfully'); } catch (error) { - console.error('Error updating session settings:', error); + // console.error('Error updating session settings:', error); toast.error('Failed to update session settings'); } finally { setSettingsLoading(false); @@ -1593,7 +1609,7 @@ const JKSessionScreen = () => { loading={inviteLoading} onSubmit={async (invitees) => { setSessionInvitees(invitees); - console.log('Submitted invitees:', invitees); + // console.log('Submitted invitees:', invitees); const inviteeIds = invitees.map(i => i.id) const payload = { inviteeIds: inviteeIds.join() @@ -1605,12 +1621,12 @@ const JKSessionScreen = () => { ...payload }); const data = await response.json(); - console.log('Updated session settings response:', data); + // console.log('Updated session settings response:', data); dispatch(updateSessionData(data)); // Phase 4: dispatch to Redux dispatch(closeModal('invite')); toast.success('Invitations sent successfully'); } catch (error) { - console.error('Error updating session settings:', error); + // console.error('Error updating session settings:', error); toast.error('Failed to send invitations'); } finally { setInviteLoading(false); @@ -1643,7 +1659,7 @@ const JKSessionScreen = () => {
- +

Adjust the volume of each audio track (yours and others) in the Session Mix to get the mix where you want it (i.e. where it sounds good and well balanced to you). Any volume changes you make will affect only what you hear. They don’t affect the volume of what others hear in the session. Everyone has their own customizable session mix.

Note that your session mix is the mix that will be used for any recordings you make and for any broadcasts you stream. If another musician in your session makes a recording or streams a broadcast, it will use that musician’s session mix, not yours.

@@ -1664,7 +1680,7 @@ const JKSessionScreen = () => { currentUser={backingTrackData.currentUser} isPopup={true} onClose={() => { - console.log('JKSessionScreen: JKSessionBackingTrackPlayer onClose called'); + // console.log('JKSessionScreen: JKSessionBackingTrackPlayer onClose called'); dispatch(closeModal('backingTrack')); dispatch(clearBackingTrackData()); }} @@ -1720,12 +1736,12 @@ const JKSessionScreen = () => { {/* Media Controls Popup - Only show when explicitly opened */} {showMediaControlsPopup && !popupGuard && (() => { - console.log('JKSessionScreen: RENDERING Media Controls Popup - showMediaControlsPopup:', showMediaControlsPopup, 'popupGuard:', popupGuard); + // console.log('JKSessionScreen: RENDERING Media Controls Popup - showMediaControlsPopup:', showMediaControlsPopup, 'popupGuard:', popupGuard); setPopupGuard(true); // Set guard immediately to prevent re-renders return ( { - console.log('JKSessionScreen: Media Controls Popup closing'); + // console.log('JKSessionScreen: Media Controls Popup closing'); dispatch(closeModal('mediaControls')); setMediaControlsOpened(false); setPopupGuard(false); // Reset guard when closing @@ -1735,7 +1751,7 @@ const JKSessionScreen = () => { windowId="media-controls" > { - console.log('JKSessionScreen: JKPopupMediaControls onClose called'); + // console.log('JKSessionScreen: JKPopupMediaControls onClose called'); dispatch(closeModal('mediaControls')); setMediaControlsOpened(false); setPopupGuard(false); // Reset guard when closing diff --git a/jam-ui/src/components/common/WindowPortal.js b/jam-ui/src/components/common/WindowPortal.js index dc113ba73..8ed02f2b6 100644 --- a/jam-ui/src/components/common/WindowPortal.js +++ b/jam-ui/src/components/common/WindowPortal.js @@ -68,21 +68,6 @@ const WindowPortal = ({ newWindow.document.body.style.backgroundColor = '#f8f9fa'; newWindow.document.body.style.overflow = 'hidden'; - // Copy all stylesheets from parent window to popup - const stylesheets = Array.from(document.querySelectorAll('link[rel="stylesheet"], style')); - stylesheets.forEach(sheet => { - if (sheet.tagName === 'LINK') { - const newLink = newWindow.document.createElement('link'); - newLink.rel = 'stylesheet'; - newLink.href = sheet.href; - newWindow.document.head.appendChild(newLink); - } else if (sheet.tagName === 'STYLE') { - const newStyle = newWindow.document.createElement('style'); - newStyle.textContent = sheet.textContent; - newWindow.document.head.appendChild(newStyle); - } - }); - // Add window ID for identification if (windowId) { newWindow.windowId = windowId; diff --git a/jam-ui/src/helpers/utils.js b/jam-ui/src/helpers/utils.js index 2c529f372..79fef2b68 100644 --- a/jam-ui/src/helpers/utils.js +++ b/jam-ui/src/helpers/utils.js @@ -64,6 +64,36 @@ import viola45 from '../assets/img/instruments/icon_instrument_viola45.png'; import violin45 from '../assets/img/instruments/icon_instrument_violin45.png'; import voice45 from '../assets/img/instruments/icon_instrument_voice45.png'; +import accordion45_inverted from '../assets/img/instruments/icon_instrument_accordion45_inverted.svg'; +import acoustic_guitar45_inverted from '../assets/img/instruments/icon_instrument_acoustic_guitar45_inverted.svg'; +import banjo45_inverted from '../assets/img/instruments/icon_instrument_banjo45_inverted.svg'; +import bass_guitar45_inverted from '../assets/img/instruments/icon_instrument_bass_guitar45_inverted.svg'; +import cello45_inverted from '../assets/img/instruments/icon_instrument_cello45_inverted.svg'; +import clarinet45_inverted from '../assets/img/instruments/icon_instrument_clarinet45_inverted.svg'; +import computer45_inverted from '../assets/img/instruments/icon_instrument_computer45_inverted.svg'; +import default45_inverted from '../assets/img/instruments/icon_instrument_default45_inverted.svg'; +import drums45_inverted from '../assets/img/instruments/icon_instrument_drums45_inverted.svg'; +import electric_guitar45_inverted from '../assets/img/instruments/icon_instrument_electric_guitar45_inverted.svg'; +import euphonium45_inverted from '../assets/img/instruments/icon_instrument_euphonium45_inverted.svg'; +import flute45_inverted from '../assets/img/instruments/icon_instrument_flute45_inverted.svg'; +import french_horn45_inverted from '../assets/img/instruments/icon_instrument_french_horn45_inverted.svg'; +import harmonica45_inverted from '../assets/img/instruments/icon_instrument_harmonica45_inverted.svg'; +import keyboard45_inverted from '../assets/img/instruments/icon_instrument_keyboard45_inverted.svg'; +import mandolin45_inverted from '../assets/img/instruments/icon_instrument_mandolin45_inverted.svg'; +import oboe45_inverted from '../assets/img/instruments/icon_instrument_oboe45_inverted.svg'; +import other45_inverted from '../assets/img/instruments/icon_instrument_other45_inverted.svg'; +import piano45_inverted from '../assets/img/instruments/icon_instrument_piano45_inverted.svg'; +import saxophone45_inverted from '../assets/img/instruments/icon_instrument_saxophone45_inverted.svg'; +import trombone45_inverted from '../assets/img/instruments/icon_instrument_trombone45_inverted.svg'; +import trumpet45_inverted from '../assets/img/instruments/icon_instrument_trumpet45_inverted.svg'; +import tuba45_inverted from '../assets/img/instruments/icon_instrument_tuba45_inverted.svg'; +import ukulele45_inverted from '../assets/img/instruments/icon_instrument_ukelele45_inverted.svg'; +import upright_bass45_inverted from '../assets/img/instruments/icon_instrument_upright_bass45_inverted.svg'; +import double_bass45_inverted from '../assets/img/instruments/icon_instrument_double_bass45_inverted.svg'; +import viola45_inverted from '../assets/img/instruments/icon_instrument_viola45_inverted.svg'; +import violin45_inverted from '../assets/img/instruments/icon_instrument_violin45_inverted.svg'; +import voice45_inverted from '../assets/img/instruments/icon_instrument_voice45_inverted.svg'; + import accordion256 from '../assets/img/instruments/icon_instrument_accordion256.png'; import acoustic_guitar256 from '../assets/img/instruments/icon_instrument_acoustic_guitar256.png'; import banjo256 from '../assets/img/instruments/icon_instrument_banjo256.png'; @@ -95,6 +125,9 @@ import violin256 from '../assets/img/instruments/icon_instrument_violin256.png'; import voice256 from '../assets/img/instruments/icon_instrument_voice256.png'; + + + export const isIterableArray = array => Array.isArray(array) && !!array.length; //=============================== @@ -737,6 +770,39 @@ const instrumentIconMap45 = { "voice": { asset: voice45, name: "voice" } }; +const instrumentIconMap45_inverted = { + "accordion": { asset: accordion45_inverted, name: "accordion" }, + "acoustic guitar": { asset: acoustic_guitar45_inverted, name: "acoustic guitar" }, + "banjo": { asset: banjo45_inverted, name: "banjo" }, + "bass guitar": { asset: bass_guitar45_inverted, name: "bass guitar" }, + "cello": { asset: cello45_inverted, name: "cello" }, + "clarinet": { asset: clarinet45_inverted, name: "clarinet" }, + "computer": { asset: computer45_inverted, name: "computer" }, + "_default": { asset: default45_inverted, name: "_default" }, + "drums": { asset: drums45_inverted, name: "drums" }, + "percussion": { asset: drums45_inverted, name: "percussion" }, + "electric guitar": { asset: electric_guitar45_inverted, name: "electric guitar" }, + "euphonium": { asset: euphonium45_inverted, name: "euphonium" }, + "flute": { asset: flute45_inverted, name: "flute" }, + "french horn": { asset: french_horn45_inverted, name: "french horn" }, + "harmonica": { asset: harmonica45_inverted, name: "harmonica" }, + "keyboard": { asset: keyboard45_inverted, name: "keyboard" }, + "mandolin": { asset: mandolin45_inverted, name: "mandolin" }, + "oboe": { asset: oboe45_inverted, name: "oboe" }, + "other": { asset: other45_inverted, name: "other" }, + "piano": { asset: piano45_inverted, name: "piano" }, + "saxophone": { asset: saxophone45_inverted, name: "saxophone" }, + "trombone": { asset: trombone45_inverted, name: "trombone" }, + "trumpet": { asset: trumpet45_inverted, name: "trumpet" }, + "tuba": { asset: tuba45_inverted, name: "tuba" }, + "ukulele": { asset: ukulele45_inverted, name: "ukulele" }, + "upright bass": { asset: upright_bass45_inverted, name: "upright bass" }, + "double bass": { asset: double_bass45_inverted, name: "double bass" }, + "viola": { asset: viola45_inverted, name: "viola" }, + "violin": { asset: violin45_inverted, name: "violin" }, + "voice": { asset: voice45_inverted, name: "voice" } +}; + const instrumentIconMap256 = { "accordion": { asset: accordion256, name: "accordion" }, "acoustic guitar": { asset: acoustic_guitar256, name: "acoustic guitar" }, @@ -780,6 +846,10 @@ export const getInstrumentIconMap45 = () => { return instrumentIconMap45; }; +export const getInstrumentIconMap45_inverted = () => { + return instrumentIconMap45_inverted; +}; + export const getInstrumentIconMap256 = () => { return instrumentIconMap256; }; @@ -798,6 +868,13 @@ export const getInstrumentIcon45 = (instrument) => { return instrumentIconMap45["_default"].asset; }; +export const getInstrumentIcon45_inverted = (instrument) => { + if (instrument in instrumentIconMap45_inverted) { + return instrumentIconMap45_inverted[instrument].asset; + } + return instrumentIconMap45_inverted["_default"].asset; +}; + export const getInstrumentName = (instrument) => { if (instrument in instrumentIconMap45) { return instrumentIconMap45[instrument].name; diff --git a/jam-ui/src/hooks/useVuHelpers.js b/jam-ui/src/hooks/useVuHelpers.js index 8c2445973..a021bba47 100644 --- a/jam-ui/src/hooks/useVuHelpers.js +++ b/jam-ui/src/hooks/useVuHelpers.js @@ -140,18 +140,18 @@ export default function useVuHelpers() { const lightThreshold = (lightCount - i) / lightCount; const isOn = level >= lightThreshold; - let bgClass = 'bg-secondary'; // Default off state + let bgClass = 'vu-bg-secondary'; // Default off state if (isOn) { if (clipping) { - bgClass = 'bg-danger'; // Red for clipping + bgClass = 'vu-bg-danger'; // Red for clipping } else { const positionFromBottom = lightCount - 1 - i; if (positionFromBottom >= Math.floor(lightCount * 0.75)) { // Red zone (top 25%) - bgClass = 'bg-danger'; + bgClass = 'vu-bg-danger'; } else if (positionFromBottom >= Math.floor(lightCount * 0.5)) { // Yellow zone (middle 25%) - bgClass = 'bg-warning'; + bgClass = 'vu-bg-warning'; } else { // Green zone (bottom 50%) - bgClass = 'bg-success'; + bgClass = 'vu-bg-success'; } } } @@ -162,9 +162,10 @@ export default function useVuHelpers() { className={bgClass} style={{ height: `${lightHeight}px`, - width: `${lightWidth}px`, + width: `25px`, marginTop: '1px', - borderRadius: '2px' + borderRadius: '2px', + border: '1px solid #eee' }} /> ); diff --git a/web/app/views/api_music_sessions/show.rabl b/web/app/views/api_music_sessions/show.rabl index 9f779394c..54dd04b74 100644 --- a/web/app/views/api_music_sessions/show.rabl +++ b/web/app/views/api_music_sessions/show.rabl @@ -63,7 +63,7 @@ else attributes :ip_address, :client_id, :joined_session_at, :audio_latency, :id, :metronome_open, :is_jamblaster, :client_role, :parent_client_id, :client_id_int node :user do |connection| - { :id => connection.user.id, :photo_url => connection.user.photo_url, :name => connection.user.name, :is_friend => connection.user.friends?(current_user), :connection_state => connection.aasm_state, :subscription => connection.user.subscription_plan_code } + { :id => connection.user.id, :photo_url => connection.user.photo_url, :v2_photo_url => connection.user.v2_photo_url, :name => connection.user.name, :is_friend => connection.user.friends?(current_user), :connection_state => connection.aasm_state, :subscription => connection.user.subscription_plan_code } end child(:tracks => :tracks) {