fixes

src/components/pages/Composer/ComposerCanvas.tsx

@@ -17,7 +17,7 @@ import {APP_NAME} from "$config"
 import Memoized from '$cmp/shared/Utility/Memoized';
 import {ThemeProvider} from '$stores/ThemeStore/ThemeProvider';
 import {clamp, colorToRGB, nearestEven} from '$lib/Utilities';
-import type {Column} from '$lib/Songs/SongClasses';
+import type {NoteColumn} from '$lib/Songs/SongClasses';
 import type {ComposerSettingsDataType} from '$lib/BaseSettings';
 import {isColumnVisible, RenderColumn} from '$cmp/pages/Composer/RenderColumn';
 import {TimelineButton} from './TimelineButton';
@@ -32,7 +32,7 @@ type ClickEventType = 'up' | 'down-slider' | 'down-stage'
 
 interface ComposerCanvasProps {
     data: {
-        columns: Column[],
+        columns: NoteColumn[],
         isPlaying: boolean,
         isRecordingAudio: boolean,
         song: ComposedSong

src/components/pages/Composer/ComposerKeyboard.tsx

@@ -1,5 +1,5 @@
 import ComposerNote from "$cmp/pages/Composer/ComposerNote"
-import {Column, InstrumentData} from "$lib/Songs/SongClasses"
+import {NoteColumn, InstrumentData} from "$lib/Songs/SongClasses"
 import {NoteNameType, Pitch, TEMPO_CHANGERS} from "$config"
 import {Instrument, ObservableNote} from "$lib/Instrument"
 import {ComposerSettingsDataType} from "$lib/BaseSettings"
@@ -14,7 +14,7 @@ interface ComposerKeyboardProps {
         instruments: InstrumentData[]
         isRecordingAudio: boolean
         currentLayer: number,
-        currentColumn: Column,
+        currentColumn: NoteColumn,
         pitch: Pitch,
         settings: ComposerSettingsDataType
         isPlaying: boolean,

src/components/pages/Composer/ComposerTools.tsx

@@ -1,7 +1,7 @@
 import {AppButton} from "$cmp/shared/Inputs/AppButton"
 import {DecoratedCard} from "$cmp/shared/layout/DecoratedCard"
 import {hasTooltip, Tooltip} from "$cmp/shared/Utility/Tooltip"
-import {Column} from "$lib/Songs/SongClasses"
+import {NoteColumn} from "$lib/Songs/SongClasses"
 import {memo, useState} from "react"
 import {FaAngleDown, FaAngleUp, FaCopy, FaEraser, FaPaste, FaTrash} from "react-icons/fa"
 import {MdPhotoSizeSelectSmall, MdSelectAll} from "react-icons/md"
@@ -13,7 +13,7 @@ interface ComposerToolsProps {
         hasCopiedColumns: boolean
         selectedColumns: number[]
         layer: number
-        undoHistory: Column[][]
+        undoHistory: NoteColumn[][]
     }
     functions: {
         toggleTools: () => void

src/components/pages/Composer/MidiParser/TrackInfo.tsx

@@ -8,6 +8,8 @@ import {Theme} from '$stores/ThemeStore/ThemeProvider'
 import {hasTooltip, Tooltip} from '$cmp/shared/Utility/Tooltip'
 import {NumericalInput} from './Numericalinput'
 import {prettyPrintInstrumentName} from '$lib/Utilities'
+import {Column} from "$cmp/shared/layout/Column";
+import {Row} from "$cmp/shared/layout/Row";
 
 interface TrackProps {
     data: CustomTrack
@@ -22,19 +24,22 @@ export function TrackInfo({data, index, onChange, theme, instruments}: TrackProp
     const background = {backgroundColor: theme.layer('menu_background', 0.15).toString()}
     const [offset, setOffset] = useState(`${data.localOffset ?? ""}`)
     const debouncedOffset = useDebounce<string>(offset, 600)
+
     useEffect(() => {
         const parsedOffset = parseInt(debouncedOffset)
         const localOffset = Number.isFinite(parsedOffset) ? parsedOffset : null
         setOffset(`${localOffset ?? ""}`)
         onChange(index, {localOffset})
     }, [debouncedOffset, onChange, index]);
+
     useEffect(() => {
         setOffset(`${data.localOffset ?? ""}`)
     }, [data.localOffset])
+
     const onMaxScaleChange = useCallback((maxScaling: number) => {
         onChange(index, {maxScaling: Math.max(0, maxScaling)})
     }, [onChange, index])
-    return <div className='midi-track-column' style={background}>
+    return <Column gap={'0.5rem'} className='midi-track-column' style={background}>
         <div className='midi-track-wrapper'>
             <div className='midi-track-center'>
                 <input type='checkbox' onChange={() => onChange(index, {selected: !data.selected})}
@@ -52,6 +57,7 @@ export function TrackInfo({data, index, onChange, theme, instruments}: TrackProp
                     className='midi-select'
                     style={{
                         marginLeft: '0.2rem',
+                        paddingRight: '1.5rem'
                     }}
                 >
                     {instruments.map((ins, i) =>
@@ -68,20 +74,22 @@ export function TrackInfo({data, index, onChange, theme, instruments}: TrackProp
                 />
             </div>
         </div>
-        <div
-            className='midi-track-data'
+        <Column
+            padding={'0.4rem'}
+            gap={'0.2rem'}
             style={{
-                display: dataShown ? "flex" : "none"
+                display: dataShown ? "flex" : "none",
+                borderTop: 'solid 0.1rem var(--secondary)'
             }}
         >
-            <div className={'midi-track-data-row'}>
+            <Row align={'center'} justify={'between'}>
                 <div className={hasTooltip(true)}>
                     <Tooltip>
                         Changes the index of each note by this amount.
                     </Tooltip>
                     Local track notes offset
                 </div>
-                <div className={'row'} style={{gap: '0.3rem'}}>
+                <Row gap={'0.3rem'}>
                     <button
                         onClick={() => setOffset(`${Number(offset) - 1}`)}
                         className='midi-btn-small'
@@ -100,9 +108,9 @@ export function TrackInfo({data, index, onChange, theme, instruments}: TrackProp
                         className='midi-btn-small'
                     >+
                     </button>
-                </div>
-            </div>
-            <div className={'midi-track-data-row'}>
+                </Row>
+            </Row>
+            <Row align={'center'} justify={'between'}>
                 <div className={hasTooltip(true)}>
                     <Tooltip>
                         Scale down/up the notes which are out of scale by theose octaves.
@@ -114,32 +122,32 @@ export function TrackInfo({data, index, onChange, theme, instruments}: TrackProp
                     placeholder='No scaling'
                     onChange={onMaxScaleChange}
                 />
-            </div>
-            <div className='midi-track-data-row'>
+            </Row>
+            <Row align={'center'} justify={'between'}>
                 <div>Instrument</div>
                 <div>{data.track.instrument.name}</div>
-            </div>
-            <div className='midi-track-data-row'>
+            </Row>
+            <Row align={'center'} justify={'between'}>
                 <div>Number of notes</div>
                 <div>{data.track.notes.length}</div>
-            </div>
-            <div className='midi-track-data-row'>
+            </Row>
+            <Row align={'center'} justify={'between'}>
                 <div>Accidentals</div>
                 <div>{data.numberOfAccidentals}</div>
-            </div>
-            <div className='midi-track-data-row'>
+            </Row>
+            <Row align={'center'} justify={'between'}>
                 <div>Out of range ({data.outOfRangeBounds.upper + data.outOfRangeBounds.lower})</div>
-                <div className='row' style={{width: 'fit-content'}}>
-                    <div className='row' style={{marginRight: '0.4rem'}}>
+                <Row style={{width: 'fit-content'}}>
+                    <Row style={{marginRight: '0.4rem'}}>
                         <FaArrowUp style={{marginRight: '0.2rem'}}/>
                         {data.outOfRangeBounds.upper}
-                    </div>
-                    <div className='row'>
+                    </Row>
+                    <Row>
                         <FaArrowDown style={{marginRight: '0.2rem'}}/>
                         {data.outOfRangeBounds.lower}
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
+                    </Row>
+                </Row>
+            </Row>
+        </Column>
+    </Column>
 }

src/components/pages/Composer/MidiParser/index.tsx

@@ -2,7 +2,7 @@ import {Component} from 'react'
 import {FileElement, FilePicker} from '$cmp/shared/Inputs/FilePicker'
 import {Midi, Track} from '@tonejs/midi'
 import {delay, groupNotesByIndex, isAudioFormat, isVideoFormat, mergeLayers} from '$lib/Utilities'
-import {Column, ColumnNote, InstrumentData, MidiNote} from '$lib/Songs/SongClasses'
+import {NoteColumn, ColumnNote, InstrumentData, MidiNote} from '$lib/Songs/SongClasses'
 import {ComposedSong} from '$lib/Songs/ComposedSong'
 import {BASE_PATH, Pitch, PITCHES} from '$config'
 import {logger} from '$stores/LoggerStore'
@@ -16,6 +16,8 @@ import {DecoratedCard} from '$cmp/shared/layout/DecoratedCard'
 import {TrackInfo} from './TrackInfo'
 import {NumericalInput} from './Numericalinput'
 import {basicPitchLoader} from '$lib/BasicPitchLoader'
+import {Row} from "$cmp/shared/layout/Row";
+import {Column} from "$cmp/shared/layout/Column";
 
 interface MidiImportProps {
     data: {
@@ -249,16 +251,16 @@ class MidiImport extends Component<MidiImportProps, MidiImportState> {
             }
             groupedNotes.push([...row, ...sorted.splice(0, amount)])
         }
-        const columns: Column[] = []
+        const columns: NoteColumn[] = []
         let previousTime = 0
         groupedNotes.forEach(notes => {
             const note = notes[0]
             if (!note) return
             const elapsedTime = note.time - previousTime
             const emptyColumns = Math.floor((elapsedTime - bpmToMs) / bpmToMs)
-            const noteColumn = new Column()
+            const noteColumn = new NoteColumn()
             previousTime = note.time
-            if (emptyColumns > -1) new Array(emptyColumns).fill(0).forEach(() => columns.push(new Column())) // adds empty columns
+            if (emptyColumns > -1) new Array(emptyColumns).fill(0).forEach(() => columns.push(new NoteColumn())) // adds empty columns
             noteColumn.notes = notes.map(note => {
                 const layer = new NoteLayer()
                 layer.set(note.layer, true)
@@ -358,9 +360,9 @@ class MidiImport extends Component<MidiImportProps, MidiImportState> {
             isRelative={false}
             offset="0.1rem"
         >
-            <div className='column floating-midi-content'>
-                <div
-                    className='midi-row separator-border'
+            <Column className='floating-midi-content' gap={'0.3rem'}>
+                <Row
+                    className='separator-border'
                     style={{width: '100%'}}
                 >
                     <FilePicker onPick={handleFile} as='buffer'>
@@ -381,9 +383,9 @@ class MidiImport extends Component<MidiImportProps, MidiImportState> {
                     >
                         Close
                     </button>
-                </div>
+                </Row>
 
-                <div className='midi-table-row'>
+                <Row justify={'between'} align={'center'}>
                     <div style={{marginRight: '0.5rem'}}>Bpm:</div>
                     <NumericalInput
                         value={bpm}
@@ -392,8 +394,8 @@ class MidiImport extends Component<MidiImportProps, MidiImportState> {
                         style={midiInputsStyle}
                         step={5}
                     />
-                </div>
-                <div className='midi-table-row'>
+                </Row>
+                <Row justify={'between'} align={'center'}>
                     <div className='row flex-centered'>
                         <span style={{marginRight: '0.5rem'}}>Global note offset: </span>
                         <HelpTooltip buttonStyle={{width: '1.2rem', height: '1.2rem'}}>
@@ -409,36 +411,36 @@ class MidiImport extends Component<MidiImportProps, MidiImportState> {
                         style={midiInputsStyle}
                         step={1}
                     />
-                </div>
-                <div className='midi-table-row'>
+                </Row>
+                <Row justify={'between'} align={'center'}>
                     <div style={{marginRight: '0.5rem'}}>Pitch:</div>
                     <PitchSelect
                         style={{width: '5rem', ...midiInputsStyle}}
                         selected={pitch}
                         onChange={changePitch}
                     />
-                </div>
-                <div className='midi-table-row'>
-                    <div className='row'>
+                </Row>
+                <Row justify={'between'} align={'center'}>
+                    <Row align={'center'}>
                         <div style={{marginRight: '0.5rem'}}>Include accidentals:</div>
                         <Switch
                             checked={includeAccidentals}
                             onChange={this.toggleAccidentals}
                             styleOuter={midiInputsStyle}
                         />
-                    </div>
-                    <div className='row'>
+                    </Row>
+                    <Row align={'center'}>
                         <div style={{marginRight: '0.5rem'}}>Ignore empty tracks:</div>
                         <Switch
                             checked={ignoreEmptytracks}
                             onChange={(b) => this.setState({ignoreEmptytracks: b})}
                             styleOuter={midiInputsStyle}
                         />
-                    </div>
-                </div>
-                {tracks.length > 0 && <div className='midi-column separator-border' style={{width: '100%'}}>
-                    <div className='midi-column' style={{width: '100%'}}>
-                        <div>Select midi tracks</div>
+                    </Row>
+                </Row>
+                {tracks.length > 0 && <Column className='separator-border' style={{width: '100%'}}>
+                    <Column style={{width: '100%'}}>
+                        <div style={{textAlign: 'center'}}>Select midi tracks</div>
                         {tracks.map((track, i) =>
                             !(ignoreEmptytracks && track.track.notes.length === 0) &&
                             <TrackInfo
@@ -450,8 +452,8 @@ class MidiImport extends Component<MidiImportProps, MidiImportState> {
                                 theme={theme}
                             />
                         )}
-                    </div>
-                </div>
+                    </Column>
+                </Column>
                 }
                 {tracks.length > 0 &&
                     <table>
@@ -474,7 +476,7 @@ class MidiImport extends Component<MidiImportProps, MidiImportState> {
                         </tbody>
                     </table>
                 }
-            </div>
+            </Column>
         </DecoratedCard>
     }
 }

src/components/pages/MidiSetup/index.tsx

@@ -59,6 +59,7 @@ export default class MidiSetup extends Component<{}, MidiSetupState> {
         this.mounted = false
         this.state.audioPlayer.destroy()
         MIDIProvider.removeInputsListener(this.midiStateChange)
+        MIDIProvider.removeListener(this.handleMidi)
         AudioProvider.clear()
     }
 

src/components/pages/Player/Keyboard.css

@@ -7,6 +7,7 @@
     justify-items: center;
     align-items: center;
     margin-bottom: 2vh;
+    touch-action: none;
 }
 
 .keyboard-5 {

src/components/pages/Player/PlayerKeyboard.tsx

@@ -166,6 +166,7 @@ export default class KeyboardPlayer extends Component<KeyboardPlayerProps, Keybo
             })
             notes.push(obj)
         }
+        await delay(2000) //add an initial delay to let the user prepare
         playerControlsStore.setSong(song)
         playerControlsStore.clearPages()
         playerControlsStore.resetScore()