From c522258d04a00ec63d8c25e2c9da3596617ac7df Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Le=20Bihan?= <clement.lebihan773@gmail.com>
Date: Sat, 14 Oct 2023 00:17:20 +0200
Subject: [PATCH] Added some animations/transition time and move back to a
 static position cursor

---
 front/components/Play/PartitionMagic.tsx | 124 ++++++++++++-----------
 1 file changed, 65 insertions(+), 59 deletions(-)

diff --git a/front/components/Play/PartitionMagic.tsx b/front/components/Play/PartitionMagic.tsx
index d7993ff..7a84cad 100644
--- a/front/components/Play/PartitionMagic.tsx
+++ b/front/components/Play/PartitionMagic.tsx
@@ -1,21 +1,11 @@
 import * as React from 'react';
-import { ActivityIndicator, View, ImageBackground, Platform } from 'react-native';
+import { View, ImageBackground, Platform } from 'react-native';
 import API from '../../API';
 import { useQuery } from '../../Queries';
 import { SvgCssUri } from 'react-native-svg';
 import { PianoCC } from '../../views/PlayView';
-import { Button } from 'native-base';
-import Animated, { useSharedValue, withTiming, withSpring, Easing } from 'react-native-reanimated';
-import { CursorInfoItem, SongCursorInfos } from '../../models/SongCursorInfos';
-
-const myFindLast = <T,>(a: T[], p: (_: T, _2: number) => boolean) => {
-	for (let i = a.length - 1; i >= 0; i--) {
-		if (p(a[i]!, i)) {
-			return a[i];
-		}
-	}
-	return undefined;
-};
+import Animated, { useSharedValue, withTiming, Easing } from 'react-native-reanimated';
+import { CursorInfoItem } from '../../models/SongCursorInfos';
 
 // note we are also using timestamp in a context
 export type ParitionMagicProps = {
@@ -30,9 +20,28 @@ const getSVGURL = (songID: number) => {
 	return 'https://cdn.discordapp.com/attachments/717080637038788731/1161704545785757816/4.svg?ex=653944ab&is=6526cfab&hm=2416ee2cb414cc42fa9de8af58b8db544479d35f13393d76f02e8d9fe27aff45&';
 };
 
-const SVGContainer = ({ songID, onReady }: { songID: number; onReady: () => void }) => {
+const SVGContainer = ({
+	songID,
+	onReady,
+	w,
+	h,
+}: {
+	songID: number;
+	onReady: () => void;
+	w: number;
+	h: number;
+}) => {
 	if (Platform.OS === 'web') {
-		return <img src={getSVGURL(songID)} onLoad={(e) => onReady()} />;
+		return (
+			<img
+				src={getSVGURL(songID)}
+				onLoad={(e) => onReady()}
+				style={{
+					height: '100%',
+					// aspectRatio: w / h,
+				}}
+			/>
+		);
 	} else {
 		return <SvgCssUri uri={getSVGURL(songID)} />;
 	}
@@ -56,80 +65,77 @@ const PartitionMagic = ({ songID, paused, onEndReached, onError, onReady }: Pari
 	const { data, isLoading, isError } = useQuery(API.getSongCursorInfos(songID));
 	const [currentCurIdx, setCurrentCurIdx] = React.useState(0);
 	const partitionOffset = useSharedValue(0);
-	const cursorPosition = useSharedValue(0);
 	const pianoCC = React.useContext(PianoCC);
 	const partitionWidth = 16573;
 	const partitionHeight = 402;
 
-	getCursorToPlay(data?.cursors ?? [], currentCurIdx, pianoCC.timestamp, (cursor, idx) => {
-		partitionOffset.value = -cursor.x + data!.cursors[0]!.x;
+	const cursorPaddingVertical = 10;
+	const cursorPaddingHorizontal = 3;
 
-		// cursorPosition.value = cursor.x;
+	const cursorBorderWidth = (data?.cursors[currentCurIdx]?.width ?? 0) / 6;
+	const cursorWidth = (data?.cursors[currentCurIdx]?.width ?? 0) + cursorPaddingHorizontal * 2;
+	const cursorHeight = (data?.cursors[currentCurIdx]?.height ?? 0) + cursorPaddingVertical * 2;
+	const cursorTop = (data?.cursors[currentCurIdx]?.y ?? 0) - cursorPaddingVertical;
+	const cursorLeft = (data?.cursors[0]?.x ?? 0) - cursorPaddingHorizontal;
+
+	getCursorToPlay(data?.cursors ?? [], currentCurIdx, pianoCC.timestamp, (cursor, idx) => {
+		partitionOffset.value = withTiming(-(cursor.x - data!.cursors[0]!.x) / partitionWidth, {
+			duration: 75,
+			easing: Easing.inOut(Easing.ease),
+		});
 		setCurrentCurIdx(idx);
-		// 	duration: 75,
-		// 	// easing: Easing.inOut(Easing.ease),
-		// });
 	});
 
-	const handlePress = () => {
-		partitionOffset.value = withSpring(partitionOffset.value - 50);
-	};
 	return (
 		<>
 			<View
 				style={{
 					flex: 1,
-					flexDirection: 'row',
 					alignItems: 'flex-start',
-					overflow: 'hidden',
 					position: 'relative',
 				}}
 			>
-				<Animated.View
+				<View
 					style={{
 						position: 'absolute',
+						aspectRatio: partitionWidth / partitionHeight,
 						height: '100%',
-						left: partitionOffset,
 					}}
 				>
-					<ImageBackground
-						source={{ uri: getSVGURL(songID) }}
-						onLoad={onReady}
+					<Animated.View
 						style={{
-							aspectRatio: partitionWidth / partitionHeight,
+							position: 'absolute',
 							height: '100%',
-							position: 'relative',
+							aspectRatio: partitionWidth / partitionHeight,
+							left: `${partitionOffset.value * 100}%`,
 						}}
 					>
-						<Animated.View
+						<ImageBackground
+							source={{ uri: getSVGURL(songID) }}
+							onLoad={onReady}
 							style={{
-								position: 'absolute',
-								left: `${(data?.cursors[0]?.x ?? 0) / partitionWidth * 100}%`,
-								top: `${(data?.cursors[0]?.y ?? 0) / partitionHeight * 100}%`,
-								backgroundColor: 'rgba(96, 117, 249, 0.33)',
-								width: `${30 / partitionWidth * 100}%`, // 46,
-								height: `${144 / partitionHeight * 100}%`, // 160,
+								aspectRatio: partitionWidth / partitionHeight,
+								height: '100%',
+								position: 'relative',
 							}}
 						/>
-					</ImageBackground>
-					{/* <SVGContainer songID={songID} onReady={onReady} /> */}
-				</Animated.View>
-				{/* <View
-					style={{
-						position: 'absolute',
-						left: (data?.cursors[0]?.x ?? 0) - 5,
-						top: data?.cursors[0]?.y ?? 0,
-						backgroundColor: 'rgba(96, 117, 249, 0.33)',
-						borderRadius: 20,
-						borderWidth: 5,
-						borderColor: '#101014',
-						borderStyle: 'solid',
-						paddingVertical: 16,
-					}}
-				> */}
-				{/* </View> */}
+					</Animated.View>
+					<Animated.View
+						style={{
+							position: 'absolute',
+							left: `${(cursorLeft / partitionWidth) * 100}%`,
+							top: `${(cursorTop / partitionHeight) * 100}%`,
+							backgroundColor: 'rgba(96, 117, 249, 0.33)',
+							width: `${(cursorWidth / partitionWidth) * 100}%`,
+							height: `${(cursorHeight / partitionHeight) * 100}%`,
+							borderWidth: cursorBorderWidth,
+							borderColor: '#101014',
+							borderStyle: 'solid',
+							borderRadius: cursorBorderWidth * 2,
+						}}
+					/>
+				</View>
 			</View>
-			<Button onPress={handlePress}>Move</Button>
 		</>
 	);
 };