Merge pull request #14 from gallegretti/volume-mixer

Simple audio mixer

Author: gallegretti

src/dialogs/dialog-audio-mixer/audio-mixer-track.tsx

@@ -0,0 +1,52 @@
+import { Slider } from "@mui/material";
+import { Track } from "../../alphatab-types/alphatab-types";
+import styled from "@emotion/styled";
+import { useEffect, useState } from "react";
+
+interface AudioMixerTrack {
+  track: Track;
+  onVolumeChange: (track: Track, volume: number) => void;
+}
+
+const AudioMixerLayout = styled('div')({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  height: '300px',
+  width: '200px'
+});
+
+const AudioMixerTrackName = styled('p')({
+  height: '120px',
+  textAlign: 'center'
+});
+
+const VerticalVolumeSlider = styled(Slider)({
+  '& .MuiSlider-thumb': {
+    borderRadius: '2px',
+    height: '10px'
+  },
+})
+
+export function AudioMixerTrack(props: AudioMixerTrack) {
+  const [volumeState, setVolumeState] = useState(props.track.playbackInfo.volume);
+
+  useEffect(() => {
+    props.track.playbackInfo.volume = volumeState;
+    props.onVolumeChange(props.track, volumeState);
+  }, [volumeState]);
+
+  return (
+    <AudioMixerLayout>
+      <AudioMixerTrackName>{props.track.name}</AudioMixerTrackName>
+      <VerticalVolumeSlider
+        min={0}
+        max={16}
+        marks
+        value={volumeState}
+        onChange={(_, volume) => setVolumeState(volume as number)}
+        orientation="vertical"
+      />
+    </AudioMixerLayout>
+  );
+}

src/dialogs/dialog-audio-mixer/dialog-audio-mixer.tsx

@@ -0,0 +1,31 @@
+import { Dialog } from "@mui/material";
+import { Score, Track } from "../../alphatab-types/alphatab-types";
+import styled from "@emotion/styled";
+import { AudioMixerTrack } from "./audio-mixer-track";
+
+interface AudioMixerProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onVolumeChange: (track: Track, volume: number) => void;
+  score: Score;
+}
+
+const TrackLayout = styled('div')({
+  display: 'flex',
+  height: '360px'
+});
+
+export function DialogAudioMixer(props: AudioMixerProps) {
+  return (
+    <Dialog
+      open={props.isOpen}
+      onClose={props.onClose}
+    >
+      <TrackLayout>
+        {props.score.tracks.map((track) => (
+          <AudioMixerTrack key={track.index} track={track} onVolumeChange={props.onVolumeChange} />
+        ))}
+      </TrackLayout>
+    </Dialog>
+  );
+}

src/editor-skeleton/alphatab-viewport/alphatab-viewport.tsx

@@ -16,7 +16,7 @@ const AlphaTabContainer = styled('div')`
   overflow-y: auto;
   position: absolute;
   top: 96px;
-  left: 120px;
+  left: 140px;
   right: 0;
   bottom: 0;
   padding-right: 20px;

src/editor-skeleton/editor-left-menu.tsx

@@ -11,7 +11,7 @@ const SideMenuDiv = styled('div')(({ theme }) => ({
   top: 0,
   left: 0,
   bottom: 0,
-  width: '120px',
+  width: '140px',
   display: 'flex',
   alignContent: 'stretch',
   zIndex: '1001',

src/editor-skeleton/editor-player-controls/editor-player-controls.tsx

@@ -6,13 +6,15 @@ import MetronomeGlyph from '@glyphs/player-controls/metronome';
 import RepeatGlyph from '@glyphs/player-controls/repeat';
 import VolumeControlComponent from './volume-control';
 import EditorPlayerSpeedComponent from './editor-player-speed';
+import AudioMixerGlyph from '@glyphs/player-controls/audio-mixer';
 
 interface EditorPlayerControlsProps {
   playPause: () => void;
   isPlaying: boolean;
   isCountIn: boolean;
   isMetronome: boolean;
   isLooping: boolean;
+  onOpenVolumeMixer: () => void;
   onLoopingChange: (isLooping: boolean) => void;
   onCountInChange: (countIn: boolean) => void;
   onMetronomeChange: (metronome: boolean) => void;
@@ -65,7 +67,9 @@ export default function EditorPlayerControls(props: EditorPlayerControlsProps) {
 
   return (
     <EditorPlayerControlsDiv>
-      <EditorPlayerControlsLeft />
+      <EditorPlayerControlsLeft>
+        <AudioMixerGlyph onClick={props.onOpenVolumeMixer} selected={false} disabled={false} />
+      </EditorPlayerControlsLeft>
       <EditorPlayerControlsMid>
         <PlayPauseGlyph selected={props.isPlaying} onClick={props.playPause} disabled={false} />
       </EditorPlayerControlsMid>

src/editor-skeleton/editor.tsx

@@ -24,6 +24,8 @@ import EditorActionDispatcher from '../editor/editor-action-dispatcher';
 import EditorScoreState from '../editor/editor-score-state';
 import exportGuitarPro from './editor-export/export-guitar-pro';
 import exportMidi from './editor-export/export-midi';
+import { DialogAudioMixer } from '@dialogs/dialog-audio-mixer/dialog-audio-mixer';
+import useDialog from '@hooks/use-dialog';
 
 function useForceUpdate() {
   const [_, setValue] = useState(0); // integer state
@@ -56,7 +58,7 @@ const AppContent = styled('div')({
 
 const AppEditorControls = styled('div')({
   position: 'absolute',
-  left: '120px',
+  left: '140px',
   right: 0,
   zIndex: 999,
 })
@@ -202,6 +204,12 @@ export default function Editor({ hasDialog }: { hasDialog: boolean }) {
 
   const score = (): Score | null => api?.score ?? null;
 
+  const setTrackVolume = (track: Track, volume: number) => {
+    if (api) {
+      api.changeTrackVolume([track], volume);
+    }
+  }
+
   const setVolume = (volume: number) => {
     if (api) {
       api.masterVolume = volume;
@@ -243,8 +251,22 @@ export default function Editor({ hasDialog }: { hasDialog: boolean }) {
     editorActions.clearUndoAndRedoHistory();
   };
 
+  const {
+    openDialog: openAudioMixerDialog,
+    closeDialog: closeAudioMixerDialog,
+    isDialogOpen: isAudioMixerDialogOpen
+  } = useDialog();
+
   return (
     <AppContainer>
+      {api?.score && (
+        <DialogAudioMixer
+          isOpen={isAudioMixerDialogOpen}
+          onClose={closeAudioMixerDialog}
+          score={api.score}
+          onVolumeChange={setTrackVolume}
+        />
+      )}
       <AppContent>
         <EditorLeftMenu
           tracks={api?.score?.tracks ?? null}
@@ -290,6 +312,7 @@ export default function Editor({ hasDialog }: { hasDialog: boolean }) {
         onCountInChange={setCountIn}
         onMetronomeChange={setMetronome}
         onLoopingChange={setIsLooping}
+        onOpenVolumeMixer={openAudioMixerDialog}
         isCountIn={api?.countInVolume !== 0}
         isMetronome={api?.metronomeVolume !== 0}
         isPlaying={api?.playerState === 1}

src/glyphs/player-controls/audio-mixer.tsx

@@ -0,0 +1,28 @@
+/* eslint-disable max-len */
+import React from 'react';
+import { Tooltip } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { DynamicGlyphProps } from '../dynamics/dynamic';
+import { useGlyphColor } from '../glyphColor';
+import baseSvgStyle from '../glyphBaseSvgStyle';
+
+export default function AudioMixerGlyph(props: DynamicGlyphProps) {
+  const color = useGlyphColor(props);
+  const { t } = useTranslation();
+  return (
+    <Tooltip title={t('Audio Mixer')}>
+      <svg onClick={props.onClick} style={baseSvgStyle(props)} height="28px" width="28px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink"
+        viewBox="0 0 64 64" xmlSpace="preserve">
+        <line fill="none" stroke={color} stroke-width="2" stroke-miterlimit="10" x1="12" y1="19" x2="12" y2="64" />
+        <line fill="none" stroke={color} stroke-width="2" stroke-miterlimit="10" x1="52" y1="0" x2="52" y2="45" />
+        <line fill="none" stroke={color} stroke-width="2" stroke-miterlimit="10" x1="32" y1="38" x2="32" y2="64" />
+        <line fill="none" stroke={color} stroke-width="2" stroke-miterlimit="10" x1="32" y1="0" x2="32" y2="26" />
+        <circle fill="none" stroke={color} stroke-width="2" stroke-miterlimit="10" cx="12" cy="13" r="6" />
+        <circle fill="none" stroke={color} stroke-width="2" stroke-miterlimit="10" cx="52" cy="51" r="6" />
+        <circle fill="none" stroke={color} stroke-width="2" stroke-miterlimit="10" cx="32" cy="32" r="6" />
+        <line fill="none" stroke={color} stroke-width="2" stroke-miterlimit="10" x1="12" y1="0" x2="12" y2="7" />
+        <line fill="none" stroke={color} stroke-width="2" stroke-miterlimit="10" x1="52" y1="57" x2="52" y2="64" />
+      </svg>
+    </Tooltip>
+  );
+}

src/i18n.ts

@@ -190,6 +190,7 @@ const resources: Resource = {
         'move_cursor_previous_bar': 'Mover cursor para a barra anterior',
         'move_cursor_previous_bar_shortcut': 'Ctrl + Seta para esquerda',
       },
+      'Audio Mixer': 'Mixer de Áudio',
       'How long the note should be played': 'Por quanto tempo a nota deve ser tocada',
       'How strong the note should be played': 'Quão forte a nota deve ser tocada',
       'Getting started': 'Básico',