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

2
front/Navigation.tsx
View File

@@ -24,10 +24,10 @@ import TextButton from './components/TextButton';
const protectedRoutes = () => ({
Play: { component: PlayView, options: { title: translate('play') } },
Home: { component: HomeView, options: { title: translate('welcome') } },
Settings: { component: SetttingsNavigator, options: { title: 'Settings' } },
Song: { component: SongLobbyView, options: { title: translate('play') } },
Play: { component: PlayView, options: { title: translate('play') } },
Score: { component: ScoreView, options: { title: translate('score') } },
Search: { component: SearchView, options: { title: translate('search') } },
User: { component: ProfileView, options: { title: translate('user') } },

46
front/components/PartitionView.tsx
View File

@@ -1,7 +1,7 @@
// Inspired from OSMD example project
// https://github.com/opensheetmusicdisplay/react-opensheetmusicdisplay/blob/master/src/lib/OpenSheetMusicDisplay.jsx
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 { useWindowDimensions } from 'react-native';
@@ -14,23 +14,19 @@ type PartitionViewProps = {
}
const PartitionView = (props: PartitionViewProps) => {
const WINDOW_SIZE = 4;
const [osmd, setOsmd] = useState<OSMD>();
const colorScheme = useColorScheme();
const [currentWindowIndex, setCurrentWindowIndex] = useState(0);
const dimensions = useWindowDimensions();
const OSMD_DIV_ID = 'osmd-div';
const options = {
const options: IOSMDOptions = {
darkMode: colorScheme == 'dark',
drawComposer: false,
drawCredits: false,
drawLyrics: false,
drawPartNames: false,
// followCursor: true,
cursorsOptions: [{ type: CursorType.Standard, color: 'green', alpha: 0.5, follow: true }],
drawFromMeasureNumber: 1,
drawUpToMeasureNumber: WINDOW_SIZE,
stretchLastSystemLine: true,
followCursor: false,
renderSingleHorizontalStaffline: true,
cursorsOptions: [{ type: CursorType.Standard, color: 'green', alpha: 0.5, follow: false }],
autoResize: false,
}
@@ -41,7 +37,6 @@ const PartitionView = (props: PartitionViewProps) => {
_osmd.render();
props.onPartitionReady();
_osmd.cursor.show();
console.log(_osmd.Sheet.DefaultStartTempoInBpm)
});
setOsmd(_osmd);
}, []);
@@ -60,33 +55,18 @@ const PartitionView = (props: PartitionViewProps) => {
return;
}
const currentTimestamp = new Fraction(props.timestamp, 1000, undefined, true);
const currentMeasure = osmd.Sheet.getSourceMeasureFromTimeStamp(currentTimestamp);
const cursorMeasure = osmd.cursor.NotesUnderCursor().at(0)!.SourceMeasure;
const cursorMeasuresWindowIndex = new Fraction(cursorMeasure.measureListIndex, WINDOW_SIZE).WholeValue;
const currentMeasuresWindowIndex = new Fraction(currentMeasure.measureListIndex, WINDOW_SIZE).WholeValue;
// Move Measure Draw
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();
let previousCursorPosition = -1;
let currentCursorPosition = osmd.cursor.cursorElement.offsetLeft;
while(osmd.cursor.NotesUnderCursor().at(0)!.getAbsoluteTimestamp().lt(currentTimestamp) && !osmd.cursor.iterator.EndReached) {
previousCursorPosition = currentCursorPosition;
osmd.cursor.next();
osmd.cursor.show();
setCurrentWindowIndex((idx) => idx + 1);
// Update
} else {
while(osmd.cursor.NotesUnderCursor().at(0)!.getAbsoluteTimestamp().lt(currentTimestamp) && !osmd.cursor.iterator.EndReached) {
osmd.cursor.next();
osmd.cursor.show();
}
currentCursorPosition = osmd.cursor.cursorElement.offsetLeft;
document.getElementById(OSMD_DIV_ID).scrollBy(currentCursorPosition - previousCursorPosition, 0)
}
}, [props.timestamp]);
return (<div id={OSMD_DIV_ID} />);
return (<div id={OSMD_DIV_ID} style={{ width: '100%', overflow: 'hidden' }} />);
}
export default PartitionView;