Removed custom keyextractor of flatlist in musicList due to weird behaviours and still using special icon button for web

front/components/UI/MusicItem.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/prop-types */
 import React, { useMemo, memo } from 'react';
-import { StyleSheet, ViewStyle, Image } from 'react-native';
+import { StyleSheet, ViewStyle, Image, Platform } from 'react-native';
 import {
 	Column,
 	HStack,
@@ -12,7 +12,7 @@ import {
 	IconButton,
 } from 'native-base';
 import { HeartAdd, HeartRemove, Play } from 'iconsax-react-native';
-// import IconButton from './IconButton';
+import WebIconButton from './IconButton';
 import Spacer from '../../components/UI/Spacer';
 import { useTranslation } from 'react-i18next';
 
@@ -167,28 +167,48 @@ function MusicItemComponent(props: MusicItemType) {
 				</Text>
 				{screenSize === 'xl' && <Spacer height="xs" />}
 				<Row style={styles.songContainer}>
-					<Text isTruncated numberOfLines={1} style={{
-						flexShrink: 1,
-					}}>{props.song}</Text>
-					<IconButton
-						icon={
-							props.liked ? (
-								<HeartRemove
-									size={screenSize === 'xl' ? 24 : 18}
-									color={colors.primary[700]}
-									variant="Bold"
-								/>
-							) : (
-								<HeartAdd
-									size={screenSize === 'xl' ? 24 : 18}
-									color={colors.primary[300]}
-								/>
-							)
-						}
-						onPress={() => {
-							props.onLike(!props.liked);
+					<Text
+						isTruncated
+						numberOfLines={1}
+						style={{
+							flexShrink: 1,
 						}}
-					/>
+					>
+						{props.song}
+					</Text>
+					{Platform.OS === 'web' ? (
+						<WebIconButton
+							colorActive={colors.text[700]}
+							color={colors.primary[300]}
+							icon={HeartAdd}
+							iconActive={HeartRemove}
+							activeVariant="Bold"
+							size={screenSize === 'xl' ? 24 : 18}
+							isActive={props.liked}
+							onPress={props.onLike}
+						/>
+					) : (
+						<IconButton
+							variant={'unstyled'}
+							icon={
+								props.liked ? (
+									<HeartRemove
+										size={screenSize === 'xl' ? 24 : 18}
+										color={colors.primary[700]}
+										variant="Bold"
+									/>
+								) : (
+									<HeartAdd
+										size={screenSize === 'xl' ? 24 : 18}
+										color={colors.primary[300]}
+									/>
+								)
+							}
+							onPress={() => {
+								props.onLike(!props.liked);
+							}}
+						/>
+					)}
 				</Row>
 			</Column>
 			{[formattedLastScore, formattedBestScore].map((value, index) => (

front/components/UI/MusicList.tsx

@@ -107,9 +107,6 @@ function MusicListCC({
 	const { mutateAsync } = useLikeSongMutation();
 	const navigation = useNavigation();
 	const { colors } = useTheme();
-	// since we can not easily extract a unique key for each
-	// item because there is multiple time the same song played
-	const musicItemTracker = useRef<Map<number, number>>(new Map());
 
 	if (!musics) {
 		return <LoadingView />;
@@ -136,14 +133,7 @@ function MusicListCC({
 				/>
 			)}
 			keyExtractor={(item) => {
-				if (!musicItemTracker.current.has(item.id)) {
-					musicItemTracker.current.set(item.id, 0);
-				}
-				const count = musicItemTracker.current.get(item.id)!;
-				musicItemTracker.current.set(item.id, count + 1);
-				// this is fine because the musics are
-				// always returned in the same order of play
-				return `${item.id}-${count}`;
+				return `${item.id}`;
 			}}
 			ListFooterComponent={
 				hasMore ? (