From bf4b84e1f87cd717c4944eae97298411d3bcc0da Mon Sep 17 00:00:00 2001
From: Arthur Jamet <arthur.jamet@gmail.com>
Date: Tue, 2 May 2023 15:04:05 +0100
Subject: [PATCH] Front: Partition: Infinite Scroll

---
 front/Navigation.tsx               |  2 +-
 front/components/PartitionView.tsx | 46 +++++++++---------------------
 2 files changed, 14 insertions(+), 34 deletions(-)

diff --git a/front/Navigation.tsx b/front/Navigation.tsx
index 5426a26..44b7152 100644
--- a/front/Navigation.tsx
+++ b/front/Navigation.tsx
@@ -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') } },
diff --git a/front/components/PartitionView.tsx b/front/components/PartitionView.tsx
index e582a49..bc4bd25 100644
--- a/front/components/PartitionView.tsx
+++ b/front/components/PartitionView.tsx
@@ -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;