+
+
+ );
+};
+
+export default JKSessionMyTrack;
diff --git a/jam-ui/src/components/client/JKSessionRemoteTracks.js b/jam-ui/src/components/client/JKSessionRemoteTracks.js
new file mode 100644
index 000000000..28d79c372
--- /dev/null
+++ b/jam-ui/src/components/client/JKSessionRemoteTracks.js
@@ -0,0 +1,76 @@
+import React, { useMemo } from 'react';
+import { useCurrentSessionContext } from '../../context/CurrentSessionContext';
+import { useAuth } from '../../context/UserAuth';
+import JKSessionAudioInputs from './JKSessionAudioInputs';
+import { getAvatarUrl, getInstrumentIcon45 } from '../../helpers/utils';
+
+const JKSessionRemoteTracks = ({ mixerHelper, sessionModel }) => {
+ const { currentSession } = useCurrentSessionContext();
+ const { currentUser } = useAuth();
+
+ const remoteParticipantsData = useMemo(() => {
+ if (!currentSession || !currentUser) return [];
+
+ // Get all participants (including current user)
+ const allParticipants = sessionModel.participants();
+
+ // Filter out current user to get remote participants
+ const remoteParticipants = allParticipants.filter(participant =>
+ participant.user.id !== currentUser.id
+ );
+
+ // Compute tracks for each remote participant
+ return remoteParticipants.map(participant => {
+ const tracks = [];
+ const connStatsClientId = participant.client_role === 'child' && participant.parent_client_id
+ ? participant.parent_client_id
+ : participant.client_id;
+
+ const photoUrl = getAvatarUrl(participant.user.photo_url);
+ const name = participant.user.name;
+
+ for (const track of participant.tracks || []) {
+ const mixerData = mixerHelper.findMixerForTrack(participant.client_id, track, false, mixerHelper.mixMode);
+ const hasMixer = !!mixerData.mixer;
+
+ const instrumentIcon = getInstrumentIcon45(track.instrument);
+ const trackName = `${name}: ${track.instrument}`;
+
+ tracks.push({
+ track,
+ mixerFinder: [participant.client_id, track, false],
+ mixers: mixerData,
+ hasMixer,
+ name,
+ trackName,
+ instrumentIcon,
+ photoUrl,
+ clientId: participant.client_id,
+ connStatsClientId
+ });
+ }
+
+ return {
+ participant,
+ tracks,
+ hasChat: false // Remote participants don't have chat in this context
+ };
+ });
+ }, [currentSession, currentUser, sessionModel, mixerHelper]);
+
+ return (
+
+
+
+ window.open(`https://profile.jamkazam.com/user/${clientId}`, '_blank')}
+ >
+ {trackName}
+
+ window.open(`https://profile.jamkazam.com/user/${clientId}`, '_blank')}
+ >
+ 
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+ setShowMenu(!showMenu)}>...
+ {showMenu && (
+
+
+ )}
+ { console.log('Configure'); setShowMenu(false); }}>Configure
+ { console.log('Instrument'); setShowMenu(false); }}>Instrument
+ {!isRemote && { console.log('Plugin'); setShowMenu(false); }}>Plugin
}
+
+ {connectionStateJsx}
+
+ +
+
+ {remoteParticipantsData.map(({ participant, tracks, hasChat }) => (
+
+ );
+};
+
+export default JKSessionRemoteTracks;
diff --git a/jam-ui/src/components/client/JKSessionScreen.js b/jam-ui/src/components/client/JKSessionScreen.js
index 4d418d13b..ae704a26a 100644
--- a/jam-ui/src/components/client/JKSessionScreen.js
+++ b/jam-ui/src/components/client/JKSessionScreen.js
@@ -27,6 +27,9 @@ import { MessageType } from '../../helpers/MessageFactory.js';
import { Alert, Col, Row, Button, Card, CardBody, Modal, ModalHeader, ModalBody, ModalFooter, CardHeader, Badge } from 'reactstrap';
import FalconCardHeader from '../common/FalconCardHeader';
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';
import JKSessionInviteModal from './JKSessionInviteModal.js';
import JKSessionVolumeModal from './JKSessionVolumeModal.js';
@@ -76,6 +79,7 @@ const JKSessionScreen = () => {
const [currentOrLastSession, setCurrentOrLastSession] = useState(null);
const [sessionGuardsPassed, setSessionGuardsPassed] = useState(false);
const [myTracks, setMyTracks] = useState([]);
+ const [chat, setChat] = useState(null);
const [mixers, setMixers] = useState([]);
//state for settings modal
@@ -435,13 +439,27 @@ const JKSessionScreen = () => {
useEffect(() => {
setMyTracks(mixerHelper.myTracks);
console.log("My Tracks changing", mixerHelper.myTracks)
+
+ // Handle chat mixer like web project
+ if (mixerHelper.chatMixer) {
+ const chat = {
+ mixers: mixerHelper.chatMixer,
+ mode: mixerHelper.mixMode,
+ photoUrl: mixerHelper.myTracks.length > 0 ? mixerHelper.myTracks[0].photoUrl : '',
+ name: 'Chat' // Default name for chat
+ };
+ setChat(chat);
+ } else {
+ setChat(null);
+ }
+
// Update mixers based on myTracks
const updatedMixers = mixerHelper.myTracks.map(track => {
return track.mixers;
}).filter(mixer => mixer !== undefined);
console.log("Updated Mixers:", updatedMixers);
setMixers(updatedMixers);
- }, [mixerHelper.myTracks])
+ }, [mixerHelper.myTracks, mixerHelper.chatMixer, mixerHelper.mixMode])
useEffect(() => {
fetchFriends();
@@ -558,46 +576,33 @@ const JKSessionScreen = () => {
Audio Inputs
-
-
{
- myTracks.length === 0 ? (
-
-
+ No mixers available
- ) : (
- myTracks.map((track, index) => (
- {
-
- ))
- )
- }
+
Session Mix
-
-
+
- {/*
+
-
*/}
+
Attach Media
-
-
-
-
-
-
-
+ {/*
-
+
*/}
Debug Information
@@ -696,7 +701,7 @@ const JKSessionScreen = () => {
Current Session: {JSON.stringify(currentSession)}
+
+ );
+};
+
+export default TrackDiagnostics;
diff --git a/jam-ui/src/helpers/utils.js b/jam-ui/src/helpers/utils.js
index 486aef2a7..d6cfc3f03 100644
--- a/jam-ui/src/helpers/utils.js
+++ b/jam-ui/src/helpers/utils.js
@@ -1,5 +1,100 @@
import moment from 'moment';
+import avatar_generic from '../assets/img/avatar_generic.png';
+import { server_to_client_instrument_map, client_to_server_instrument_map } from './globals.js';
+
+// Instrument icon imports
+import accordion24 from '../assets/img/instruments/icon_instrument_accordion24.png';
+import acoustic_guitar24 from '../assets/img/instruments/icon_instrument_acoustic_guitar24.png';
+import banjo24 from '../assets/img/instruments/icon_instrument_banjo24.png';
+import bass_guitar24 from '../assets/img/instruments/icon_instrument_bass_guitar24.png';
+import cello24 from '../assets/img/instruments/icon_instrument_cello24.png';
+import clarinet24 from '../assets/img/instruments/icon_instrument_clarinet24.png';
+import computer24 from '../assets/img/instruments/icon_instrument_computer24.png';
+import default24 from '../assets/img/instruments/icon_instrument_default24.png';
+import drums24 from '../assets/img/instruments/icon_instrument_drums24.png';
+import electric_guitar24 from '../assets/img/instruments/icon_instrument_electric_guitar24.png';
+import euphonium24 from '../assets/img/instruments/icon_instrument_euphonium24.png';
+import flute24 from '../assets/img/instruments/icon_instrument_flute24.png';
+import french_horn24 from '../assets/img/instruments/icon_instrument_french_horn24.png';
+import harmonica24 from '../assets/img/instruments/icon_instrument_harmonica24.png';
+import keyboard24 from '../assets/img/instruments/icon_instrument_keyboard24.png';
+import mandolin24 from '../assets/img/instruments/icon_instrument_mandolin24.png';
+import oboe24 from '../assets/img/instruments/icon_instrument_oboe24.png';
+import other24 from '../assets/img/instruments/icon_instrument_other24.png';
+import piano24 from '../assets/img/instruments/icon_instrument_piano24.png';
+import saxophone24 from '../assets/img/instruments/icon_instrument_saxophone24.png';
+import trombone24 from '../assets/img/instruments/icon_instrument_trombone24.png';
+import trumpet24 from '../assets/img/instruments/icon_instrument_trumpet24.png';
+import tuba24 from '../assets/img/instruments/icon_instrument_tuba24.png';
+import ukulele24 from '../assets/img/instruments/icon_instrument_ukulele24.png';
+import upright_bass24 from '../assets/img/instruments/icon_instrument_upright_bass24.png';
+import double_bass24 from '../assets/img/instruments/icon_instrument_double_bass24.png';
+import viola24 from '../assets/img/instruments/icon_instrument_viola24.png';
+import violin24 from '../assets/img/instruments/icon_instrument_violin24.png';
+import voice24 from '../assets/img/instruments/icon_instrument_voice24.png';
+
+import accordion45 from '../assets/img/instruments/icon_instrument_accordion45.png';
+import acoustic_guitar45 from '../assets/img/instruments/icon_instrument_acoustic_guitar45.png';
+import banjo45 from '../assets/img/instruments/icon_instrument_banjo45.png';
+import bass_guitar45 from '../assets/img/instruments/icon_instrument_bass_guitar45.png';
+import cello45 from '../assets/img/instruments/icon_instrument_cello45.png';
+import clarinet45 from '../assets/img/instruments/icon_instrument_clarinet45.png';
+import computer45 from '../assets/img/instruments/icon_instrument_computer45.png';
+import default45 from '../assets/img/instruments/icon_instrument_default45.png';
+import drums45 from '../assets/img/instruments/icon_instrument_drums45.png';
+import electric_guitar45 from '../assets/img/instruments/icon_instrument_electric_guitar45.png';
+import euphonium45 from '../assets/img/instruments/icon_instrument_euphonium45.png';
+import flute45 from '../assets/img/instruments/icon_instrument_flute45.png';
+import french_horn45 from '../assets/img/instruments/icon_instrument_french_horn45.png';
+import harmonica45 from '../assets/img/instruments/icon_instrument_harmonica45.png';
+import keyboard45 from '../assets/img/instruments/icon_instrument_keyboard45.png';
+import mandolin45 from '../assets/img/instruments/icon_instrument_mandolin45.png';
+import oboe45 from '../assets/img/instruments/icon_instrument_oboe45.png';
+import other45 from '../assets/img/instruments/icon_instrument_other45.png';
+import piano45 from '../assets/img/instruments/icon_instrument_piano45.png';
+import saxophone45 from '../assets/img/instruments/icon_instrument_saxophone45.png';
+import trombone45 from '../assets/img/instruments/icon_instrument_trombone45.png';
+import trumpet45 from '../assets/img/instruments/icon_instrument_trumpet45.png';
+import tuba45 from '../assets/img/instruments/icon_instrument_tuba45.png';
+import ukulele45 from '../assets/img/instruments/icon_instrument_ukulele45.png';
+import upright_bass45 from '../assets/img/instruments/icon_instrument_upright_bass45.png';
+import double_bass45 from '../assets/img/instruments/icon_instrument_double_bass45.png';
+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 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';
+import bass_guitar256 from '../assets/img/instruments/icon_instrument_bass_guitar256.png';
+import cello256 from '../assets/img/instruments/icon_instrument_cello256.png';
+import clarinet256 from '../assets/img/instruments/icon_instrument_clarinet256.png';
+import computer256 from '../assets/img/instruments/icon_instrument_computer256.png';
+import default256 from '../assets/img/instruments/icon_instrument_default256.png';
+import drums256 from '../assets/img/instruments/icon_instrument_drums256.png';
+import electric_guitar256 from '../assets/img/instruments/icon_instrument_electric_guitar256.png';
+import euphonium256 from '../assets/img/instruments/icon_instrument_euphonium256.png';
+import flute256 from '../assets/img/instruments/icon_instrument_flute256.png';
+import french_horn256 from '../assets/img/instruments/icon_instrument_french_horn256.png';
+import harmonica256 from '../assets/img/instruments/icon_instrument_harmonica256.png';
+import keyboard256 from '../assets/img/instruments/icon_instrument_keyboard256.png';
+import mandolin256 from '../assets/img/instruments/icon_instrument_mandolin256.png';
+import oboe256 from '../assets/img/instruments/icon_instrument_oboe256.png';
+import other256 from '../assets/img/instruments/icon_instrument_other256.png';
+import piano256 from '../assets/img/instruments/icon_instrument_piano256.png';
+import saxophone256 from '../assets/img/instruments/icon_instrument_saxophone256.png';
+import trombone256 from '../assets/img/instruments/icon_instrument_trombone256.png';
+import trumpet256 from '../assets/img/instruments/icon_instrument_trumpet256.png';
+import tuba256 from '../assets/img/instruments/icon_instrument_tuba256.png';
+import ukulele256 from '../assets/img/instruments/icon_instrument_ukulele256.png';
+import upright_bass256 from '../assets/img/instruments/icon_instrument_upright_bass256.png';
+import double_bass256 from '../assets/img/instruments/icon_instrument_double_bass256.png';
+import viola256 from '../assets/img/instruments/icon_instrument_viola256.png';
+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;
//===============================
@@ -539,7 +634,205 @@ export const SKIPPED_NETWORK_TEST = -1;
export const getAvatarUrl = (photo_url) => {
- return photo_url ? photo_url : "/assets/shared/avatar_generic.png";
+ return photo_url ? photo_url : avatar_generic;
+};
+
+// Instrument icon mappings
+const icon_map_base = {
+ "accordion": "accordion",
+ "acoustic guitar": "acoustic_guitar",
+ "banjo": "banjo",
+ "bass guitar": "bass_guitar",
+ "cello": "cello",
+ "clarinet": "clarinet",
+ "computer": "computer",
+ "_default": "default",
+ "drums": "drums",
+ "percussion": "drums",
+ "electric guitar": "electric_guitar",
+ "euphonium": "euphonium",
+ "flute": "flute",
+ "french horn": "french_horn",
+ "harmonica": "harmonica",
+ "keyboard": "keyboard",
+ "mandolin": "mandolin",
+ "oboe": "oboe",
+ "other": "other",
+ "piano": "piano",
+ "saxophone": "saxophone",
+ "trombone": "trombone",
+ "trumpet": "trumpet",
+ "tuba": "tuba",
+ "ukulele": "ukulele",
+ "upright bass": "upright_bass",
+ "double bass": "double_bass",
+ "viola": "viola",
+ "violin": "violin",
+ "voice": "voice"
+};
+
+const instrumentIconMap24 = {
+ "accordion": { asset: accordion24, name: "accordion" },
+ "acoustic guitar": { asset: acoustic_guitar24, name: "acoustic guitar" },
+ "banjo": { asset: banjo24, name: "banjo" },
+ "bass guitar": { asset: bass_guitar24, name: "bass guitar" },
+ "cello": { asset: cello24, name: "cello" },
+ "clarinet": { asset: clarinet24, name: "clarinet" },
+ "computer": { asset: computer24, name: "computer" },
+ "_default": { asset: default24, name: "_default" },
+ "drums": { asset: drums24, name: "drums" },
+ "percussion": { asset: drums24, name: "percussion" },
+ "electric guitar": { asset: electric_guitar24, name: "electric guitar" },
+ "euphonium": { asset: euphonium24, name: "euphonium" },
+ "flute": { asset: flute24, name: "flute" },
+ "french horn": { asset: french_horn24, name: "french horn" },
+ "harmonica": { asset: harmonica24, name: "harmonica" },
+ "keyboard": { asset: keyboard24, name: "keyboard" },
+ "mandolin": { asset: mandolin24, name: "mandolin" },
+ "oboe": { asset: oboe24, name: "oboe" },
+ "other": { asset: other24, name: "other" },
+ "piano": { asset: piano24, name: "piano" },
+ "saxophone": { asset: saxophone24, name: "saxophone" },
+ "trombone": { asset: trombone24, name: "trombone" },
+ "trumpet": { asset: trumpet24, name: "trumpet" },
+ "tuba": { asset: tuba24, name: "tuba" },
+ "ukulele": { asset: ukulele24, name: "ukulele" },
+ "upright bass": { asset: upright_bass24, name: "upright bass" },
+ "double bass": { asset: double_bass24, name: "double bass" },
+ "viola": { asset: viola24, name: "viola" },
+ "violin": { asset: violin24, name: "violin" },
+ "voice": { asset: voice24, name: "voice" }
+};
+
+const instrumentIconMap45 = {
+ "accordion": { asset: accordion45, name: "accordion" },
+ "acoustic guitar": { asset: acoustic_guitar45, name: "acoustic guitar" },
+ "banjo": { asset: banjo45, name: "banjo" },
+ "bass guitar": { asset: bass_guitar45, name: "bass guitar" },
+ "cello": { asset: cello45, name: "cello" },
+ "clarinet": { asset: clarinet45, name: "clarinet" },
+ "computer": { asset: computer45, name: "computer" },
+ "_default": { asset: default45, name: "_default" },
+ "drums": { asset: drums45, name: "drums" },
+ "percussion": { asset: drums45, name: "percussion" },
+ "electric guitar": { asset: electric_guitar45, name: "electric guitar" },
+ "euphonium": { asset: euphonium45, name: "euphonium" },
+ "flute": { asset: flute45, name: "flute" },
+ "french horn": { asset: french_horn45, name: "french horn" },
+ "harmonica": { asset: harmonica45, name: "harmonica" },
+ "keyboard": { asset: keyboard45, name: "keyboard" },
+ "mandolin": { asset: mandolin45, name: "mandolin" },
+ "oboe": { asset: oboe45, name: "oboe" },
+ "other": { asset: other45, name: "other" },
+ "piano": { asset: piano45, name: "piano" },
+ "saxophone": { asset: saxophone45, name: "saxophone" },
+ "trombone": { asset: trombone45, name: "trombone" },
+ "trumpet": { asset: trumpet45, name: "trumpet" },
+ "tuba": { asset: tuba45, name: "tuba" },
+ "ukulele": { asset: ukulele45, name: "ukulele" },
+ "upright bass": { asset: upright_bass45, name: "upright bass" },
+ "double bass": { asset: double_bass45, name: "double bass" },
+ "viola": { asset: viola45, name: "viola" },
+ "violin": { asset: violin45, name: "violin" },
+ "voice": { asset: voice45, name: "voice" }
+};
+
+const instrumentIconMap256 = {
+ "accordion": { asset: accordion256, name: "accordion" },
+ "acoustic guitar": { asset: acoustic_guitar256, name: "acoustic guitar" },
+ "banjo": { asset: banjo256, name: "banjo" },
+ "bass guitar": { asset: bass_guitar256, name: "bass guitar" },
+ "cello": { asset: cello256, name: "cello" },
+ "clarinet": { asset: clarinet256, name: "clarinet" },
+ "computer": { asset: computer256, name: "computer" },
+ "_default": { asset: default256, name: "_default" },
+ "drums": { asset: drums256, name: "drums" },
+ "percussion": { asset: drums256, name: "percussion" },
+ "electric guitar": { asset: electric_guitar256, name: "electric guitar" },
+ "euphonium": { asset: euphonium256, name: "euphonium" },
+ "flute": { asset: flute256, name: "flute" },
+ "french horn": { asset: french_horn256, name: "french horn" },
+ "harmonica": { asset: harmonica256, name: "harmonica" },
+ "keyboard": { asset: keyboard256, name: "keyboard" },
+ "mandolin": { asset: mandolin256, name: "mandolin" },
+ "oboe": { asset: oboe256, name: "oboe" },
+ "other": { asset: other256, name: "other" },
+ "piano": { asset: piano256, name: "piano" },
+ "saxophone": { asset: saxophone256, name: "saxophone" },
+ "trombone": { asset: trombone256, name: "trombone" },
+ "trumpet": { asset: trumpet256, name: "trumpet" },
+ "tuba": { asset: tuba256, name: "tuba" },
+ "ukulele": { asset: ukulele256, name: "ukulele" },
+ "upright bass": { asset: upright_bass256, name: "upright bass" },
+ "double bass": { asset: double_bass256, name: "double bass" },
+ "viola": { asset: viola256, name: "viola" },
+ "violin": { asset: violin256, name: "violin" },
+ "voice": { asset: voice256, name: "voice" }
+};
+
+const notSpecifiedText = "Not specified";
+
+export const getInstrumentIconMap24 = () => {
+ return instrumentIconMap24;
+};
+
+export const getInstrumentIconMap45 = () => {
+ return instrumentIconMap45;
+};
+
+export const getInstrumentIconMap256 = () => {
+ return instrumentIconMap256;
+};
+
+export const getInstrumentIcon24 = (instrument) => {
+ if (instrument in instrumentIconMap24) {
+ return instrumentIconMap24[instrument].asset;
+ }
+ return instrumentIconMap24["_default"].asset;
+};
+
+export const getInstrumentIcon45 = (instrument) => {
+ if (instrument in instrumentIconMap45) {
+ return instrumentIconMap45[instrument].asset;
+ }
+ return instrumentIconMap45["_default"].asset;
+};
+
+export const getInstrumentIcon256 = (instrument) => {
+ if (instrument in instrumentIconMap256) {
+ return instrumentIconMap256[instrument].asset;
+ }
+ return instrumentIconMap256["_default"].asset;
+};
+
+export const getInstrumentId = (instrumentId) => {
+ return instrumentId ? instrumentId : notSpecifiedText;
+};
+
+// meant to pass in a bunch of images with an instrument-id attribute on them.
+export const setInstrumentAssetPath = ($elements) => {
+ // Adapted for React - assuming $elements is an array of elements
+ $elements.forEach(element => {
+ if (element.tagName === 'IMG') {
+ const instrument = element.getAttribute('instrument-id');
+ element.src = getInstrumentIcon24(instrument);
+ }
+ });
+};
+
+// creates an array with entries like [{ id: "drums", description: "Drums"}, ]
+export const listInstruments = () => {
+ const instrumentArray = [];
+ Object.keys(server_to_client_instrument_map).forEach(key => {
+ instrumentArray.push({ "id": server_to_client_instrument_map[key].client_id, "description": key });
+ });
+ return instrumentArray;
+};
+
+export const convertClientInstrumentToServer = (clientId) => {
+ const serverInstrument = client_to_server_instrument_map[clientId];
+ if (!serverInstrument) return 'other';
+ else return serverInstrument.server_id;
};
export const dkeys = (d) => {
@@ -550,4 +843,4 @@ export const dkeys = (d) => {
}
}
return keys;
-};
\ No newline at end of file
+};
diff --git a/jam-ui/src/hooks/useMixerHelper.js b/jam-ui/src/hooks/useMixerHelper.js
index ea46ed64d..941b89f5a 100644
--- a/jam-ui/src/hooks/useMixerHelper.js
+++ b/jam-ui/src/hooks/useMixerHelper.js
@@ -8,8 +8,8 @@ import { useCurrentSessionContext } from '../context/CurrentSessionContext';
import { useJamServerContext } from '../context/JamServerContext.js';
import { useGlobalContext } from '../context/GlobalContext.js';
import { useVuContext } from '../context/VuContext.js';
-import { getAvatarUrl } from '../helpers/utils.js';
-import { set } from 'lodash';
+import { getAvatarUrl, getInstrumentIcon45, getInstrumentIcon24 } from '../helpers/utils.js';
+
const useMixerHelper = () => {
const allMixersRef = useRef({});
@@ -385,7 +385,7 @@ const useMixerHelper = () => {
? participant.parent_client_id
: server.clientId;
- //console.debug("useMixerHelper: my participant", participant, { connStatsClientId });
+ console.debug("useMixerHelper: my participant", participant, { connStatsClientId });
const photoUrl = getAvatarUrl(participant.user.photo_url);
const name = participant.user.name;
@@ -394,21 +394,9 @@ const useMixerHelper = () => {
const mixerData = findMixerForTrack(participant.client_id, track, true, mixMode);
const hasMixer = !!mixerData.mixer;
- const instrumentIcon = 'icon 45'; //TODO: get instrument icon
+ const instrumentIcon = getInstrumentIcon45(track.instrument);
const trackName = `${name}: ${track.instrument}`;
- // console.debug("useMixerHelper: myTrack added", {
- // track,
- // mixerData,
- // hasMixer,
- // name,
- // trackName,
- // instrumentIcon,
- // photoUrl,
- // clientId: participant.client_id,
- // connStatsClientId
- // });
-
tracks.push({
track,
mixerFinder: [participant.client_id, track, true],
@@ -606,7 +594,7 @@ const useMixerHelper = () => {
const data = {
isOpener: isOpener,
shortFilename: context.JK.getNameOfFile(serverBackingTrack.filename),
- instrumentIcon: context.JK.getInstrumentIcon45(serverBackingTrack.instrument_id),
+ instrumentIcon: getInstrumentIcon45(serverBackingTrack.instrument_id),
photoUrl: "/assets/content/icon_recording.png",
showLoop: isOpener && !session.isPlayingRecording(),
track: serverBackingTrack,
@@ -657,7 +645,7 @@ const useMixerHelper = () => {
logger.warn("ignoring wrong amount of mixers for JamTrack in mixdown mode");
return _jamTracks;
} else {
- const instrumentIcon = context.JK.getInstrumentIcon24('other');
+ const instrumentIcon = getInstrumentIcon24('other');
const part = null;
const instrumentName = 'Custom Mix';
const trackName = 'Custom Mix';
@@ -707,7 +695,7 @@ const useMixerHelper = () => {
jamTrackMixers.splice(jamTrackMixers.indexOf(mixer), 1);
const oneOfTheTracks = correspondingTracks[0];
- const instrumentIcon = context.JK.getInstrumentIcon24(oneOfTheTracks.instrument.id);
+ const instrumentIcon = getInstrumentIcon24(oneOfTheTracks.instrument.id);
const part = oneOfTheTracks.part;
@@ -781,7 +769,7 @@ const useMixerHelper = () => {
}
const oneOfTheTracks = correspondingTracks[0];
- const instrumentIcon = context.JK.getInstrumentIcon24(oneOfTheTracks.instrument_id);
+ const instrumentIcon = getInstrumentIcon24(oneOfTheTracks.instrument_id);
let userName = oneOfTheTracks.user.name;
if (!userName) {
userName = oneOfTheTracks.user.first_name + ' ' + oneOfTheTracks.user.last_name;
Connection Diagnostics
+
+
+
+ Client ID:
+ {connStatsClientId}
+
+
+ Latency:
+ {diagnostics.latency}
+
+
+ Jitter:
+ {diagnostics.jitter}
+
+
+ Packet Loss:
+ {diagnostics.packetLoss}
+
+
+ Bitrate:
+ {diagnostics.bitrate}
+
+
+ Quality:
+ {diagnostics.connectionQuality}
+
+