now using dims from cursor file info to set correct ratios for the partition display independantly of the front end platform

front/components/Play/PartitionMagic.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { View, ImageBackground, Image, Platform } from 'react-native';
+import { View } from 'react-native';
 import API from '../../API';
 import { useQuery } from '../../Queries';
 import { PianoCC } from '../../views/PlayView';
@@ -7,7 +7,7 @@ import Animated, { useSharedValue, withTiming, Easing } from 'react-native-reani
 import { CursorInfoItem } from '../../models/SongCursorInfos';
 import { PianoNotes } from '../../state/SoundPlayerSlice';
 import { Audio } from 'expo-av';
-import { SvgContainer, GetSvgDims } from './SvgContainer';
+import { SvgContainer } from './SvgContainer';
 
 // note we are also using timestamp in a context
 export type ParitionMagicProps = {
@@ -42,7 +42,6 @@ const PartitionMagic = ({ songID, onEndReached, onError, onReady }: ParitionMagi
 	const { data, isLoading, isError } = useQuery(API.getSongCursorInfos(songID));
 	const [currentCurIdx, setCurrentCurIdx] = React.useState(-1);
 	const partitionOffset = useSharedValue(0);
-	const [partitionDims, setPartitionDims] = React.useState<[number, number]>([0, 1]);
 	const pianoCC = React.useContext(PianoCC);
 	const pianoSounds = React.useRef<Record<string, Audio.Sound>>();
 	const cursorPaddingVertical = 10;
@@ -57,9 +56,6 @@ const PartitionMagic = ({ songID, onEndReached, onError, onReady }: ParitionMagi
 	const cursorLeft = (data?.cursors[0]?.x ?? 0) - cursorPaddingHorizontal;
 
 	React.useEffect(() => {
-		GetSvgDims(getSVGURL(songID), (w, h) => {
-			setPartitionDims([w, h]);
-		});
 		if (!pianoSounds.current) {
 			Promise.all(
 				Object.entries(PianoNotes).map(([midiNumber, noteResource]) =>
@@ -77,6 +73,9 @@ const PartitionMagic = ({ songID, onEndReached, onError, onReady }: ParitionMagi
 			);
 		}
 	}, []);
+	const partitionDims = React.useMemo<[number, number]>(() => {
+		return [data?.pageWidth ?? 0, data?.pageHeight ?? 1];
+	}, [data]);
 
 	React.useEffect(() => {
 		if (isLoading) {

front/components/Play/SvgContainer.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ViewStyle, ImageBackground, Platform, Image } from 'react-native';
+import { ViewStyle, ImageBackground, Platform } from 'react-native';
 import { SvgCssUri } from 'react-native-svg/css';
 
 type SvgContainerProps = {
@@ -8,19 +8,6 @@ type SvgContainerProps = {
 	style?: ViewStyle;
 };
 
-export const GetSvgDims = (url: string, success: (w: number, h: number) => void) => {
-	if (Platform.OS === 'web') {
-		React.useEffect(() => {
-			Image.getSize(url, (w, h) => {
-				success(w, h);
-			});
-		}, [url]);
-		return;
-	}
-	// success(470.1052279999999, 275);
-	success(6146.845969199998, 408.00000000000006);
-};
-
 export const SvgContainer = ({ url, onReady, style }: SvgContainerProps) => {
 	if (Platform.OS === 'web') {
 		return <ImageBackground source={{ uri: url }} onLoad={onReady} style={style} />;

front/models/SongCursorInfos.ts

@@ -3,6 +3,7 @@ import ResponseHandler from './ResponseHandler';
 
 export const SongCursorInfosValidator = yup.object({
 	pageWidth: yup.number().required(),
+	pageHeight: yup.number().required(),
 	cursors: yup
 		.array()
 		.of(
@@ -35,6 +36,7 @@ export const SongCursorInfosHandler: ResponseHandler<
 	validator: SongCursorInfosValidator,
 	transformer: (songCursorInfos: yup.InferType<typeof SongCursorInfosValidator>) => ({
 		pageWidth: songCursorInfos.pageWidth,
+		pageHeight: songCursorInfos.pageHeight,
 		cursors: songCursorInfos.cursors.map((cursor) => ({
 			x: cursor.x,
 			y: cursor.y,
@@ -67,5 +69,6 @@ export interface CursorInfoItem {
 
 export interface SongCursorInfos {
 	pageWidth: number;
+	pageHeight: number;
 	cursors: CursorInfoItem[];
 }