From 3ce69228a8cb59341f9f036b6b62d973c4e0fc0c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cl=C3=A9ment=20Le=20Bihan?= Date: Sat, 14 Oct 2023 00:46:36 +0200 Subject: [PATCH] Tested with short and worked 1st try added dynamic Image dimensions detection and now calling onEndreached on last cursorposition --- front/API.ts | 121 ++++++++++++++++++++++- front/components/Play/PartitionMagic.tsx | 69 +++++++++---- front/views/PlayView.tsx | 15 +-- 3 files changed, 175 insertions(+), 30 deletions(-) diff --git a/front/API.ts b/front/API.ts index 2fa781f..0dbaf34 100644 --- a/front/API.ts +++ b/front/API.ts @@ -9004,9 +9004,128 @@ export default class API { } ] }`); + const res2 = JSON.parse(`{ + "pageWidth": 37.01052279999999, + "cursors": [ + { + "x": 112.48751999999999, + "y": 105, + "width": 30, + "height": 120, + "notes": [ + { + "note": 62, + "gain": 1, + "duration": 1000 + }, + { + "note": 45, + "gain": 1, + "duration": 2000 + } + ], + "timestamp": 0, + "timing": 1000 + }, + { + "x": 152.87370140000002, + "y": 105, + "width": 30, + "height": 120, + "notes": [ + { + "note": 65, + "gain": 1, + "duration": 1000 + } + ], + "timestamp": 1000, + "timing": 1000 + }, + { + "x": 193.5266428, + "y": 105, + "width": 30, + "height": 120, + "notes": [], + "timestamp": 2000, + "timing": 2000 + }, + { + "x": 271.5475256, + "y": 105, + "width": 30, + "height": 120, + "notes": [ + { + "note": 62, + "gain": 1, + "duration": 1000 + }, + { + "note": 45, + "gain": 1, + "duration": 2000 + } + ], + "timestamp": 4000, + "timing": 1000 + }, + { + "x": 306.93923119999994, + "y": 105, + "width": 30, + "height": 120, + "notes": [ + { + "note": 65, + "gain": 1, + "duration": 1000 + } + ], + "timestamp": 5000, + "timing": 1000 + }, + { + "x": 342.33093679999996, + "y": 105, + "width": 30, + "height": 120, + "notes": [ + { + "note": 64, + "gain": 1, + "duration": 1000 + }, + { + "note": 45, + "gain": 1, + "duration": 2000 + } + ], + "timestamp": 6000, + "timing": 1000 + }, + { + "x": 377.7226423999999, + "y": 105, + "width": 30, + "height": 120, + "notes": [ + { + "note": 62, + "gain": 1, + "duration": 1000 + } + ], + "timestamp": 7000, + "timing": 1000 + } + ] + }`); return { key: ['cursorInfos', songId], - exec: async () => res as SongCursorInfos, + exec: async () => res2 as SongCursorInfos, } } } diff --git a/front/components/Play/PartitionMagic.tsx b/front/components/Play/PartitionMagic.tsx index 7a84cad..7ad42bf 100644 --- a/front/components/Play/PartitionMagic.tsx +++ b/front/components/Play/PartitionMagic.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { View, ImageBackground, Platform } from 'react-native'; +import { View, ImageBackground, Platform, Image } from 'react-native'; import API from '../../API'; import { useQuery } from '../../Queries'; import { SvgCssUri } from 'react-native-svg'; @@ -10,13 +10,13 @@ import { CursorInfoItem } from '../../models/SongCursorInfos'; // note we are also using timestamp in a context export type ParitionMagicProps = { songID: number; - paused: boolean; onEndReached: () => void; onError: (err: string) => void; onReady: () => void; }; const getSVGURL = (songID: number) => { + return 'https://cdn.discordapp.com/attachments/717080637038788731/1162519992722530354/Short.mxl_1.svg?ex=653c3c1c&is=6529c71c&hm=1788e4abe532f4a2af8c24cae6dadcfde369eaf58322f051ecd1d9110d8b699a&'; return 'https://cdn.discordapp.com/attachments/717080637038788731/1161704545785757816/4.svg?ex=653944ab&is=6526cfab&hm=2416ee2cb414cc42fa9de8af58b8db544479d35f13393d76f02e8d9fe27aff45&'; }; @@ -61,13 +61,15 @@ const getCursorToPlay = ( } }; -const PartitionMagic = ({ songID, paused, onEndReached, onError, onReady }: ParitionMagicProps) => { +const PartitionMagic = ({ songID, onEndReached, onError, onReady }: ParitionMagicProps) => { const { data, isLoading, isError } = useQuery(API.getSongCursorInfos(songID)); const [currentCurIdx, setCurrentCurIdx] = React.useState(0); const partitionOffset = useSharedValue(0); + const [partitionDims, setPartitionDims] = React.useState<[number, number]>([0, 0]); const pianoCC = React.useContext(PianoCC); - const partitionWidth = 16573; - const partitionHeight = 402; + + // const partitionWidth = 16573; + // const partitionDims[1] = 402; const cursorPaddingVertical = 10; const cursorPaddingHorizontal = 3; @@ -78,13 +80,44 @@ const PartitionMagic = ({ songID, paused, onEndReached, onError, onReady }: Pari 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), + React.useEffect(() => { + Image.getSize(getSVGURL(songID), (w, h) => { + setPartitionDims([w, h]); }); - setCurrentCurIdx(idx); - }); + }, []); + + React.useEffect(() => { + if (isLoading) { + return; + } + if (isError) { + onError('Error while loading partition'); + return; + } + }, [isLoading, isError]); + + const transitionDuration = 75; + + getCursorToPlay( + data?.cursors ?? [], + currentCurIdx, + pianoCC.timestamp - transitionDuration, + (cursor, idx) => { + partitionOffset.value = withTiming( + -(cursor.x - data!.cursors[0]!.x) / partitionDims[0], + { + duration: transitionDuration, + easing: Easing.inOut(Easing.ease), + }, + () => { + if (idx === data!.cursors.length - 1) { + onEndReached(); + } + } + ); + setCurrentCurIdx(idx); + } + ); return ( <> @@ -98,7 +131,7 @@ const PartitionMagic = ({ songID, paused, onEndReached, onError, onReady }: Pari @@ -106,7 +139,7 @@ const PartitionMagic = ({ songID, paused, onEndReached, onError, onReady }: Pari style={{ position: 'absolute', height: '100%', - aspectRatio: partitionWidth / partitionHeight, + aspectRatio: partitionDims[0] / partitionDims[1], left: `${partitionOffset.value * 100}%`, }} > @@ -114,7 +147,7 @@ const PartitionMagic = ({ songID, paused, onEndReached, onError, onReady }: Pari source={{ uri: getSVGURL(songID) }} onLoad={onReady} style={{ - aspectRatio: partitionWidth / partitionHeight, + aspectRatio: partitionDims[0] / partitionDims[1], height: '100%', position: 'relative', }} @@ -123,11 +156,11 @@ const PartitionMagic = ({ songID, paused, onEndReached, onError, onReady }: Pari ) => { > setPartitionRendered(true)} - onEndReached={() => {}} - onError={() => {}} - /> - {/* setPartitionRendered(true)} - /> */} + onError={() => { + console.log('error from partition magic'); + }} + /> {!partitionRendered && }