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

Front: Partition: Infinite Scroll

Browse Source
This commit is contained in:
Arthur Jamet
2023-05-02 15:04:05 +01:00
parent 03ac681dd6
commit bf4b84e1f8
2 changed files with 14 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
front/Navigation.tsx
+1 -1
View File
@@ -24,10 +24,10 @@ import TextButton from './components/TextButton';
const protectedRoutes = () => ({ const protectedRoutes = () => ({
Play: { component: PlayView, options: { title: translate('play') } },
Home: { component: HomeView, options: { title: translate('welcome') } }, Home: { component: HomeView, options: { title: translate('welcome') } },
Settings: { component: SetttingsNavigator, options: { title: 'Settings' } }, Settings: { component: SetttingsNavigator, options: { title: 'Settings' } },
Song: { component: SongLobbyView, options: { title: translate('play') } }, Song: { component: SongLobbyView, options: { title: translate('play') } },
Play: { component: PlayView, options: { title: translate('play') } },
Score: { component: ScoreView, options: { title: translate('score') } }, Score: { component: ScoreView, options: { title: translate('score') } },
Search: { component: SearchView, options: { title: translate('search') } }, Search: { component: SearchView, options: { title: translate('search') } },
User: { component: ProfileView, options: { title: translate('user') } }, User: { component: ProfileView, options: { title: translate('user') } },
front/components/PartitionView.tsx
+13 -33
View File
@@ -1,7 +1,7 @@
// 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, useState } from 'react';
import { CursorType, Fraction, OpenSheetMusicDisplay as OSMD } from 'opensheetmusicdisplay'; import { CursorType, Fraction, OpenSheetMusicDisplay as OSMD, IOSMDOptions } from 'opensheetmusicdisplay';
import useColorScheme from '../hooks/colorScheme'; import useColorScheme from '../hooks/colorScheme';
import { useWindowDimensions } from 'react-native'; import { useWindowDimensions } from 'react-native';
@@ -14,23 +14,19 @@ type PartitionViewProps = {
} }
const PartitionView = (props: PartitionViewProps) => { const PartitionView = (props: PartitionViewProps) => {
const WINDOW_SIZE = 4;
const [osmd, setOsmd] = useState<OSMD>(); const [osmd, setOsmd] = useState<OSMD>();
const colorScheme = useColorScheme(); const colorScheme = useColorScheme();
const [currentWindowIndex, setCurrentWindowIndex] = useState(0);
const dimensions = useWindowDimensions(); const dimensions = useWindowDimensions();
const OSMD_DIV_ID = 'osmd-div'; const OSMD_DIV_ID = 'osmd-div';
const options = { const options: IOSMDOptions = {
darkMode: colorScheme == 'dark', darkMode: colorScheme == 'dark',
drawComposer: false, drawComposer: false,
drawCredits: false, drawCredits: false,
drawLyrics: false, drawLyrics: false,
drawPartNames: false, drawPartNames: false,
// followCursor: true, followCursor: false,
cursorsOptions: [{ type: CursorType.Standard, color: 'green', alpha: 0.5, follow: true }], renderSingleHorizontalStaffline: true,
drawFromMeasureNumber: 1, cursorsOptions: [{ type: CursorType.Standard, color: 'green', alpha: 0.5, follow: false }],
drawUpToMeasureNumber: WINDOW_SIZE,
stretchLastSystemLine: true,
autoResize: false, autoResize: false,
} }
@@ -41,7 +37,6 @@ const PartitionView = (props: PartitionViewProps) => {
_osmd.render(); _osmd.render();
props.onPartitionReady(); props.onPartitionReady();
_osmd.cursor.show(); _osmd.cursor.show();
console.log(_osmd.Sheet.DefaultStartTempoInBpm)
}); });
setOsmd(_osmd); setOsmd(_osmd);
}, []); }, []);
@@ -60,33 +55,18 @@ const PartitionView = (props: PartitionViewProps) => {
return; return;
} }
const currentTimestamp = new Fraction(props.timestamp, 1000, undefined, true); const currentTimestamp = new Fraction(props.timestamp, 1000, undefined, true);
const currentMeasure = osmd.Sheet.getSourceMeasureFromTimeStamp(currentTimestamp); let previousCursorPosition = -1;
const cursorMeasure = osmd.cursor.NotesUnderCursor().at(0)!.SourceMeasure; let currentCursorPosition = osmd.cursor.cursorElement.offsetLeft;
const cursorMeasuresWindowIndex = new Fraction(cursorMeasure.measureListIndex, WINDOW_SIZE).WholeValue; while(osmd.cursor.NotesUnderCursor().at(0)!.getAbsoluteTimestamp().lt(currentTimestamp) && !osmd.cursor.iterator.EndReached) {
const currentMeasuresWindowIndex = new Fraction(currentMeasure.measureListIndex, WINDOW_SIZE).WholeValue; previousCursorPosition = currentCursorPosition;
// Move Measure Draw osmd.cursor.next();
if (currentMeasuresWindowIndex != currentWindowIndex) {
const nextFourMeasuresIndex = currentMeasure.measureListIndex + 1;
console.log('Next Window Start Index', nextFourMeasuresIndex)
osmd.setOptions({
drawFromMeasureNumber: nextFourMeasuresIndex,
drawUpToMeasureNumber: nextFourMeasuresIndex + WINDOW_SIZE - 1,
});
osmd.cursor.hide();
osmd.render();
osmd.cursor.resetIterator();
osmd.cursor.show(); osmd.cursor.show();
setCurrentWindowIndex((idx) => idx + 1); currentCursorPosition = osmd.cursor.cursorElement.offsetLeft;
// Update document.getElementById(OSMD_DIV_ID).scrollBy(currentCursorPosition - previousCursorPosition, 0)
} else {
while(osmd.cursor.NotesUnderCursor().at(0)!.getAbsoluteTimestamp().lt(currentTimestamp) && !osmd.cursor.iterator.EndReached) {
osmd.cursor.next();
osmd.cursor.show();
}
} }
}, [props.timestamp]); }, [props.timestamp]);
return (<div id={OSMD_DIV_ID} />); return (<div id={OSMD_DIV_ID} style={{ width: '100%', overflow: 'hidden' }} />);
} }
export default PartitionView; export default PartitionView;