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

Succesfully displayed a partition with correct size

Browse Source
This commit is contained in:
Clément Le Bihan
2023-11-27 19:02:32 +01:00
parent e8e6012bf2
commit b33ff55167
3 changed files with 54 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -18,8 +18,6 @@ export type ParitionMagicProps = {
};
const getSVGURL = (songID: number) => {
// return 'https://www.svgrepo.com/show/148626/test.svg';
// return 'https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.3.0/flags/1x1/ad.svg';
return API.getPartitionSvgUrl(songID);
};
@@ -59,12 +57,6 @@ const PartitionMagic = ({ songID, onEndReached, onError, onReady }: ParitionMagi
const cursorLeft = (data?.cursors[0]?.x ?? 0) - cursorPaddingHorizontal;
React.useEffect(() => {
if (Platform.OS === 'web') {
Image.getSize(getSVGURL(songID), (w, h) => {
setPartitionDims([w, h]);
});
return;
}
GetSvgDims(getSVGURL(songID), (w, h) => {
setPartitionDims([w, h]);
});
@@ -131,65 +123,62 @@ const PartitionMagic = ({ songID, onEndReached, onError, onReady }: ParitionMagi
);
return (
<>
<View
style={{
flex: 1,
alignItems: 'flex-start',
position: 'relative',
overflow: 'hidden',
}}
>
<View
style={{
flex: 1,
alignItems: 'flex-start',
position: 'relative',
overflow: 'hidden',
position: 'absolute',
aspectRatio: partitionDims[0] / partitionDims[1],
height: '100%',
}}
>
<View
<Animated.View
style={{
position: 'absolute',
aspectRatio: partitionDims[0] / partitionDims[1],
height: '100%',
aspectRatio: partitionDims[0] / partitionDims[1],
left: `${partitionOffset.value * 100}%`,
display: 'flex',
alignItems: 'stretch',
justifyContent: 'flex-start',
}}
>
<Animated.View
style={{
position: 'absolute',
height: '100%',
aspectRatio: partitionDims[0] / partitionDims[1],
left: `${partitionOffset.value * 100}%`,
}}
>
{!isLoading && !isError && (
<SvgContainer
url={getSVGURL(songID)}
onReady={() => {
console.log('ready');
console.log(partitionDims);
onReady();
}}
style={{
// check to avoid NaN
// aspectRatio: partitionDims[1]
// ? partitionDims[0] / partitionDims[1]
// : undefined,
height: '100%',
}}
/>
)}
</Animated.View>
<Animated.View
style={{
position: 'absolute',
left: `${(cursorLeft / partitionDims[0]) * 100}%`,
top: `${(cursorTop / partitionDims[1]) * 100}%`,
backgroundColor: 'rgba(96, 117, 249, 0.33)',
width: `${(cursorWidth / partitionDims[0]) * 100}%`,
height: `${(cursorHeight / partitionDims[1]) * 100}%`,
borderWidth: cursorBorderWidth,
borderColor: '#101014',
borderStyle: 'solid',
borderRadius: cursorBorderWidth * 2,
}}
/>
</View>
{!isLoading && !isError && (
<SvgContainer
url={getSVGURL(songID)}
onReady={() => {
console.log('ready');
console.log(partitionDims);
onReady();
}}
style={{
aspectRatio: partitionDims[0] / partitionDims[1],
}}
/>
)}
</Animated.View>
<Animated.View
style={{
position: 'absolute',
left: `${(cursorLeft / partitionDims[0]) * 100}%`,
top: `${(cursorTop / partitionDims[1]) * 100}%`,
backgroundColor: 'rgba(96, 117, 249, 0.33)',
width: `${(cursorWidth / partitionDims[0]) * 100}%`,
height: `${(cursorHeight / partitionDims[1]) * 100}%`,
borderWidth: cursorBorderWidth,
borderColor: '#101014',
borderStyle: 'solid',
borderRadius: cursorBorderWidth * 2,
}}
/>
</View>
</>
</View>
);
};

33
front/components/Play/SvgContainer.tsx
View File

@@ -1,7 +1,6 @@
import React from 'react';
import { ViewStyle, ImageBackground, Platform, Image } from 'react-native';
import { SvgCssUri } from 'react-native-svg/css';
import Svg, { Path, Text, G } from 'react-native-svg';
type SvgContainerProps = {
url: string;
@@ -18,39 +17,21 @@ export const GetSvgDims = (url: string, success: (w: number, h: number) => void)
}, [url]);
return;
}
success(470.1052279999999, 275);
// 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={[
{
// aspectRatio: dims[0] / dims[1],
},
style,
]}
/>
);
return <ImageBackground source={{ uri: url }} onLoad={onReady} style={style} />;
}
return (
<SvgCssUri
uri={url}
style={[
{
// aspectRatio: 2545.469353542076 / 193.5,
// aspectRatio: 470 / 275,
},
style,
]}
// onLayout={(e) => {
// const { width, height } = e.nativeEvent.layout;
// getDims(width, height);
// }}
style={style}
// force to not look at the width and height of the actual file
height={undefined}
width={undefined}
onLoad={onReady}
/>
);

2
front/views/PlayView.tsx
View File

@@ -79,7 +79,7 @@ export const PianoCC = createContext<PianoCanvasContext>({
});
const PlayView = ({ songId, route }: RouteProps<PlayViewProps>) => {
songId = 13;
songId = 4;
const [type, setType] = useState<'practice' | 'normal'>();
const accessToken = useSelector((state: RootState) => state.user.accessToken);
const navigation = useNavigation();