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
front/components/Play/PartitionMagic.tsx
+46 -57
View File
@@ -18,8 +18,6 @@ export type ParitionMagicProps = {
}; };
const getSVGURL = (songID: number) => { 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); return API.getPartitionSvgUrl(songID);
}; };
@@ -59,12 +57,6 @@ const PartitionMagic = ({ songID, onEndReached, onError, onReady }: ParitionMagi
const cursorLeft = (data?.cursors[0]?.x ?? 0) - cursorPaddingHorizontal; const cursorLeft = (data?.cursors[0]?.x ?? 0) - cursorPaddingHorizontal;
React.useEffect(() => { React.useEffect(() => {
if (Platform.OS === 'web') {
Image.getSize(getSVGURL(songID), (w, h) => {
setPartitionDims([w, h]);
});
return;
}
GetSvgDims(getSVGURL(songID), (w, h) => { GetSvgDims(getSVGURL(songID), (w, h) => {
setPartitionDims([w, h]); setPartitionDims([w, h]);
}); });
@@ -131,65 +123,62 @@ const PartitionMagic = ({ songID, onEndReached, onError, onReady }: ParitionMagi
); );
return ( return (
<> <View
style={{
flex: 1,
alignItems: 'flex-start',
position: 'relative',
overflow: 'hidden',
}}
>
<View <View
style={{ style={{
flex: 1, position: 'absolute',
alignItems: 'flex-start', aspectRatio: partitionDims[0] / partitionDims[1],
position: 'relative', height: '100%',
overflow: 'hidden',
}} }}
> >
<View <Animated.View
style={{ style={{
position: 'absolute', position: 'absolute',
aspectRatio: partitionDims[0] / partitionDims[1],
height: '100%', height: '100%',
aspectRatio: partitionDims[0] / partitionDims[1],
left: `${partitionOffset.value * 100}%`,
display: 'flex',
alignItems: 'stretch',
justifyContent: 'flex-start',
}} }}
> >
<Animated.View {!isLoading && !isError && (
style={{ <SvgContainer
position: 'absolute', url={getSVGURL(songID)}
height: '100%', onReady={() => {
aspectRatio: partitionDims[0] / partitionDims[1], console.log('ready');
left: `${partitionOffset.value * 100}%`, console.log(partitionDims);
}} onReady();
> }}
{!isLoading && !isError && ( style={{
<SvgContainer aspectRatio: partitionDims[0] / partitionDims[1],
url={getSVGURL(songID)} }}
onReady={() => { />
console.log('ready'); )}
console.log(partitionDims); </Animated.View>
onReady(); <Animated.View
}} style={{
style={{ position: 'absolute',
// check to avoid NaN left: `${(cursorLeft / partitionDims[0]) * 100}%`,
// aspectRatio: partitionDims[1] top: `${(cursorTop / partitionDims[1]) * 100}%`,
// ? partitionDims[0] / partitionDims[1] backgroundColor: 'rgba(96, 117, 249, 0.33)',
// : undefined, width: `${(cursorWidth / partitionDims[0]) * 100}%`,
height: '100%', height: `${(cursorHeight / partitionDims[1]) * 100}%`,
}} borderWidth: cursorBorderWidth,
/> borderColor: '#101014',
)} borderStyle: 'solid',
</Animated.View> borderRadius: cursorBorderWidth * 2,
<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> </View>
</> </View>
); );
}; };
front/components/Play/SvgContainer.tsx
+7 -26
View File
@@ -1,7 +1,6 @@
import React from 'react'; import React from 'react';
import { ViewStyle, ImageBackground, Platform, Image } from 'react-native'; import { ViewStyle, ImageBackground, Platform, Image } from 'react-native';
import { SvgCssUri } from 'react-native-svg/css'; import { SvgCssUri } from 'react-native-svg/css';
import Svg, { Path, Text, G } from 'react-native-svg';
type SvgContainerProps = { type SvgContainerProps = {
url: string; url: string;
@@ -18,39 +17,21 @@ export const GetSvgDims = (url: string, success: (w: number, h: number) => void)
}, [url]); }, [url]);
return; return;
} }
success(470.1052279999999, 275); // success(470.1052279999999, 275);
success(6146.845969199998, 408.00000000000006);
}; };
export const SvgContainer = ({ url, onReady, style }: SvgContainerProps) => { export const SvgContainer = ({ url, onReady, style }: SvgContainerProps) => {
if (Platform.OS === 'web') { if (Platform.OS === 'web') {
return ( return <ImageBackground source={{ uri: url }} onLoad={onReady} style={style} />;
<ImageBackground
source={{ uri: url }}
onLoad={onReady}
style={[
{
// aspectRatio: dims[0] / dims[1],
},
style,
]}
/>
);
} }
return ( return (
<SvgCssUri <SvgCssUri
uri={url} uri={url}
style={[ style={style}
{ // force to not look at the width and height of the actual file
// aspectRatio: 2545.469353542076 / 193.5, height={undefined}
// aspectRatio: 470 / 275, width={undefined}
},
style,
]}
// onLayout={(e) => {
// const { width, height } = e.nativeEvent.layout;
// getDims(width, height);
// }}
onLoad={onReady} onLoad={onReady}
/> />
); );
front/views/PlayView.tsx
+1 -1
View File
@@ -79,7 +79,7 @@ export const PianoCC = createContext<PianoCanvasContext>({
}); });
const PlayView = ({ songId, route }: RouteProps<PlayViewProps>) => { const PlayView = ({ songId, route }: RouteProps<PlayViewProps>) => {
songId = 13; songId = 4;
const [type, setType] = useState<'practice' | 'normal'>(); const [type, setType] = useState<'practice' | 'normal'>();
const accessToken = useSelector((state: RootState) => state.user.accessToken); const accessToken = useSelector((state: RootState) => state.user.accessToken);
const navigation = useNavigation(); const navigation = useNavigation();