zoriya/Chromacase
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added some animations/transition time and move back to a static position cursor

Browse Source
This commit is contained in:
Clément Le Bihan
2023-10-14 00:17:20 +02:00
parent f91ab4c430
commit c522258d04
1 changed files with 65 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

124
front/components/Play/PartitionMagic.tsx
View File

@@ -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>
</>
);
};