Cleanup of the control bar code in the PLayview

front/views/PlayView.tsx

@@ -487,163 +487,10 @@ const PlayView = ({ songId, route }: RouteProps<PlayViewProps>) => {
 					time={time}
 					paused={paused}
 					song={song.data}
-					onEnd={() => {}}
-					onPause={() => {}}
-					onResume={() => {}}
+					onEnd={onEnd}
+					onPause={onPause}
+					onResume={onResume}
 				/>
-
-				{/* <Row
-					justifyContent="space-between"
-					style={{
-						maxHeight: 100,
-						width: '100%',
-						display: 'flex',
-						flexGrow: 0,
-						flexShrink: 0,
-						alignItems: 'center',
-						borderRadius: 12,
-						backgroundColor: 'rgba(16, 16, 20, 0.5)',
-						//@ts-expect-error backdropFilter is not in the types
-						backdropFilter: 'blur(2px)',
-						padding: 10,
-						marginTop: 20,
-					}}
-				>
-					<View
-						style={{
-							flexGrow: 0,
-							flexShrink: 3,
-							justifyContent: 'center',
-							alignItems: 'center',
-							marginRight: 40,
-						}}
-					>
-						<View
-							style={{
-								display: 'flex',
-								flexDirection: 'row',
-								gap: 20,
-								maxWidth: '100%',
-							}}
-						>
-							<Image
-								src={song.data.cover}
-								alt="cover"
-								size={'sm'}
-								borderRadius={8}
-								style={{
-									flexShrink: 0,
-								}}
-							/>
-							<View
-								style={{
-									display: 'flex',
-									flexDirection: 'column',
-									justifyContent: 'center',
-									gap: 8,
-									flex: 1,
-								}}
-							>
-								<Text
-									color={textColor[800]}
-									fontSize={14}
-									maxW={'100%'}
-									isTruncated
-								>
-									{song.data.name}
-								</Text>
-								<Text
-									color={textColor[900]}
-									fontSize={12}
-									maxW={'100%'}
-									isTruncated
-								>
-									{song.data.artistId}
-								</Text>
-							</View>
-						</View>
-					</View>
-					<View
-						style={{
-							flexGrow: 1,
-							flexShrink: 0,
-							display: 'flex',
-							flexDirection: 'row',
-							justifyContent: 'center',
-							alignItems: 'center',
-							gap: 25,
-						}}
-					>
-						<IconButton
-							size="sm"
-							variant="solid"
-							icon={
-								<Icon
-									as={Ionicons}
-									color={colors.coolGray[900]}
-									name={paused ? 'play' : 'pause'}
-								/>
-							}
-							onPress={() => {
-								if (paused) {
-									onResume();
-								} else {
-									onPause();
-								}
-							}}
-						/>
-						{midiKeyboardFound && (
-							<>
-								<IconButton
-									size="sm"
-									colorScheme="coolGray"
-									variant="solid"
-									icon={<Icon as={Ionicons} name="stop" />}
-									onPress={() => {
-										onEnd();
-									}}
-								/>
-							</>
-						)}
-						<Text color={textColor[900]}>
-							{time < 0
-								? paused
-									? '0:00'
-									: Math.floor((time % 60000) / 1000)
-											.toFixed(0)
-											.toString()
-								: `${Math.floor(time / 60000)}:${Math.floor((time % 60000) / 1000)
-										.toFixed(0)
-										.toString()
-										.padStart(2, '0')}`}
-						</Text>
-						<StarProgress
-							value={score}
-							max={100}
-							starSteps={[50, 75, 90]}
-							style={{
-								flexGrow: 1,
-								flexShrink: 1,
-								marginTop: 10,
-								marginBottom: 10,
-								minWidth: 200,
-							}}
-						/> 
-					</View>
-					<View
-						style={{
-							flex: 1,
-							justifyContent: 'space-evenly',
-							alignItems: 'center',
-							flexDirection: 'row',
-							marginLeft: 40,
-							maxWidth: 250,
-							minWidth: 120,
-						}}
-					>
-						<MetronomeControls paused={paused} bpm={bpm.current} />
-					</View>
-				</Row> */}
 			</SafeAreaView>
 			{colorScheme === 'dark' && (
 				<LinearGradient