zoriya/Chromacase
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Cleanup parition view

Browse Source
This commit is contained in:
Clément Le Bihan
2023-09-05 11:24:43 +02:00
parent 66d792715e
commit 7d33f85cbc
1 changed files with 5 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files
front/components/PartitionView.tsx
+5 -89
View File
@@ -1,7 +1,7 @@
/* eslint-disable no-mixed-spaces-and-tabs */ /* eslint-disable no-mixed-spaces-and-tabs */
// Inspired from OSMD example project // Inspired from OSMD example project
// https://github.com/opensheetmusicdisplay/react-opensheetmusicdisplay/blob/master/src/lib/OpenSheetMusicDisplay.jsx // https://github.com/opensheetmusicdisplay/react-opensheetmusicdisplay/blob/master/src/lib/OpenSheetMusicDisplay.jsx
import React, { useEffect, useState } from 'react'; import React, { useEffect } from 'react';
import { import {
CursorType, CursorType,
Fraction, Fraction,
@@ -10,9 +10,6 @@ import {
Note, Note,
} from 'opensheetmusicdisplay'; } from 'opensheetmusicdisplay';
import useColorScheme from '../hooks/colorScheme'; import useColorScheme from '../hooks/colorScheme';
import { useWindowDimensions } from 'react-native';
import SoundFont from 'soundfont-player';
import * as SAC from 'standardized-audio-context';
import { PianoCursorPosition } from './PartitionVisualizer/PhaserCanvas'; import { PianoCursorPosition } from './PartitionVisualizer/PhaserCanvas';
type PartitionViewProps = { type PartitionViewProps = {
@@ -25,12 +22,7 @@ type PartitionViewProps = {
}; };
const PartitionView = (props: PartitionViewProps) => { const PartitionView = (props: PartitionViewProps) => {
const [osmd, setOsmd] = useState<OSMD>();
const [soundPlayer, setSoundPlayer] = useState<SoundFont.Player>();
// const audioContext = new SAC.AudioContext();
// const [wholeNoteLength, setWholeNoteLength] = useState(0); // Length of Whole note, in ms (?)
const colorScheme = useColorScheme(); const colorScheme = useColorScheme();
const dimensions = useWindowDimensions();
const OSMD_DIV_ID = 'osmd-div'; const OSMD_DIV_ID = 'osmd-div';
const options: IOSMDOptions = { const options: IOSMDOptions = {
darkMode: colorScheme == 'dark', darkMode: colorScheme == 'dark',
@@ -61,32 +53,6 @@ const PartitionView = (props: PartitionViewProps) => {
return duration; return duration;
}; };
const playNotesUnderCursor = () => {
osmd!.cursor
.NotesUnderCursor()
.filter((note) => note.isRest() == false)
.filter((note) => note.Pitch) // Pitch Can be null, avoiding them
.forEach((note) => {
// Put your hands together for https://github.com/jimutt/osmd-audio-player/blob/master/src/internals/noteHelpers.ts
// const fixedKey =
// note.ParentVoiceEntry.ParentVoice.Parent.SubInstruments.at(0)?.fixedKey ?? 0;
// const midiNumber = note.halfTone - fixedKey * 12;
// // console.log('Expecting midi ' + midiNumber);
// const duration = getActualNoteLength(note);
// const gain = note.ParentVoiceEntry.ParentVoice.Volume;
// soundPlayer!.play(midiNumber.toString(), audioContext.currentTime, {
// duration,
// gain,
// });
});
};
const getShortedNoteUnderCursor = () => {
return osmd!.cursor
.NotesUnderCursor()
.sort((n1, n2) => n1.Length.CompareTo(n2.Length))
.at(0);
};
useEffect(() => { useEffect(() => {
const _osmd = new OSMD(OSMD_DIV_ID, options); const _osmd = new OSMD(OSMD_DIV_ID, options);
Promise.all([ Promise.all([
@@ -131,12 +97,12 @@ const PartitionView = (props: PartitionViewProps) => {
}); });
_osmd.cursor.next(); _osmd.cursor.next();
} }
console.log('curPos', curPos); // console.log('curPos', curPos);
_osmd.cursor.reset(); _osmd.cursor.reset();
_osmd.cursor.hide(); _osmd.cursor.hide();
console.log('timestamp cursor', _osmd.cursor.iterator.CurrentSourceTimestamp); // console.log('timestamp cursor', _osmd.cursor.iterator.CurrentSourceTimestamp);
console.log('timestamp cursor', _osmd.cursor.iterator.CurrentVoiceEntries); // console.log('timestamp cursor', _osmd.cursor.iterator.CurrentVoiceEntries);
console.log('current measure index', _osmd.cursor.iterator.CurrentMeasureIndex); // console.log('current measure index', _osmd.cursor.iterator.CurrentMeasureIndex);
const osmdCanvas = document.querySelector('#' + OSMD_DIV_ID + ' canvas'); const osmdCanvas = document.querySelector('#' + OSMD_DIV_ID + ' canvas');
// Ty https://github.com/jimutt/osmd-audio-player/blob/ec205a6e46ee50002c1fa8f5999389447bba7bbf/src/PlaybackEngine.ts#LL77C12-L77C63 // Ty https://github.com/jimutt/osmd-audio-player/blob/ec205a6e46ee50002c1fa8f5999389447bba7bbf/src/PlaybackEngine.ts#LL77C12-L77C63
props.onPartitionReady( props.onPartitionReady(
@@ -152,58 +118,8 @@ const PartitionView = (props: PartitionViewProps) => {
); );
// Do not show cursor before actuall start // Do not show cursor before actuall start
}); });
setOsmd(_osmd);
}, []); }, []);
// Re-render manually (otherwise done by 'autoResize' option), to fix disappearing cursor
useEffect(() => {
if (osmd && osmd.IsReadyToRender()) {
osmd.render();
if (!osmd.cursor.hidden) {
osmd.cursor.show();
}
}
}, [dimensions]);
useEffect(() => {
if (!osmd) {
return;
}
if (props.timestamp > 0 && osmd.cursor.hidden && !osmd.cursor.iterator.EndReached) {
osmd.cursor.show();
playNotesUnderCursor();
return;
}
let previousCursorPosition = -1;
let currentCursorPosition = osmd.cursor.cursorElement.offsetLeft;
let shortestNote = getShortedNoteUnderCursor();
while (
!osmd.cursor.iterator.EndReached &&
(shortestNote?.isRest
? timestampToMs(shortestNote?.getAbsoluteTimestamp() ?? new Fraction(-1)) +
timestampToMs(shortestNote?.Length ?? new Fraction(-1)) <
props.timestamp
: timestampToMs(shortestNote?.getAbsoluteTimestamp() ?? new Fraction(-1)) <
props.timestamp)
) {
previousCursorPosition = currentCursorPosition;
osmd.cursor.next();
if (osmd.cursor.iterator.EndReached) {
osmd.cursor.hide(); // Lousy fix for https://github.com/opensheetmusicdisplay/opensheetmusicdisplay/issues/1338
// soundPlayer.stop();
props.onEndReached();
} else {
// Shamelessly stolen from https://github.com/jimutt/osmd-audio-player/blob/ec205a6e46ee50002c1fa8f5999389447bba7bbf/src/PlaybackEngine.ts#LL223C7-L224C1
playNotesUnderCursor();
currentCursorPosition = osmd.cursor.cursorElement.offsetLeft;
document
.getElementById(OSMD_DIV_ID)
?.scrollBy(currentCursorPosition - previousCursorPosition, 0);
shortestNote = getShortedNoteUnderCursor();
}
}
}, [props.timestamp]);
return <div id={OSMD_DIV_ID} style={{ width: '100%', overflow: 'hidden' }} />; return <div id={OSMD_DIV_ID} style={{ width: '100%', overflow: 'hidden' }} />;
}; };