Cleanup of the control bar code in the PLayview

front/components/Play/PlayViewControlBar.tsx

@@ -14,6 +14,7 @@ type PlayViewControlBarProps = {
 	time: number;
 	paused: boolean;
 	score: number;
+	disabled: boolean;
 	onResume: () => void;
 	onPause: () => void;
 	onEnd: () => void;
@@ -24,6 +25,7 @@ const PlayViewControlBar = ({
 	time,
 	paused,
 	score,
+	disabled,
 	onResume,
 	onPause,
 	onEnd,
@@ -112,6 +114,7 @@ const PlayViewControlBar = ({
 				<IconButton
 					size="sm"
 					variant="solid"
+					disabled={disabled}
 					icon={
 						<Icon
 							as={Ionicons}
@@ -127,19 +130,16 @@ const PlayViewControlBar = ({
 						}
 					}}
 				/>
-				{true && (
-					<>
-						<IconButton
-							size="sm"
-							colorScheme="coolGray"
-							variant="solid"
-							icon={<Icon as={Ionicons} name="stop" />}
-							onPress={() => {
-								onEnd();
-							}}
-						/>
-					</>
-				)}
+				<IconButton
+					size="sm"
+					colorScheme="coolGray"
+					variant="solid"
+					disabled={disabled}
+					icon={<Icon as={Ionicons} name="stop" />}
+					onPress={() => {
+						onEnd();
+					}}
+				/>
 				<Text color={textColor[900]}>
 					{time < 0
 						? paused
@@ -180,4 +180,11 @@ const PlayViewControlBar = ({
 	);
 };
 
+PlayViewControlBar.defaultProps = {
+	onResume: () => {},
+	onPause: () => {},
+	onEnd: () => {},
+	disabled: false,
+};
+
 export default PlayViewControlBar;

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