From 578268bfd28ed5cf7666deaa2a7e802f09ff556f Mon Sep 17 00:00:00 2001
From: Sophia <me@sophia-dev.io>
Date: Wed, 20 Sep 2023 12:04:18 +0900
Subject: [PATCH] fix music list play pause button bug

---
 .../src/components/MusicList/Item.tsx         | 121 ++++++++++++++++++
 .../src/components/MusicList/index.tsx        |  96 ++------------
 schema.graphql                                |   2 -
 3 files changed, 133 insertions(+), 86 deletions(-)
 create mode 100644 apps/renderer/src/components/MusicList/Item.tsx

diff --git a/apps/renderer/src/components/MusicList/Item.tsx b/apps/renderer/src/components/MusicList/Item.tsx
new file mode 100644
index 0000000..c743fe9
--- /dev/null
+++ b/apps/renderer/src/components/MusicList/Item.tsx
@@ -0,0 +1,121 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+
+import { Box, Typography } from "@mui/material";
+import PlayArrowRoundedIcon from "@mui/icons-material/PlayArrowRounded";
+import PauseRoundedIcon from "@mui/icons-material/PauseRounded";
+
+import { AlbumArt } from "@components/AlbumArt";
+import { DisabledText } from "@styles/components";
+import { useMusicSelection } from "@components/Selection";
+import { usePlayer } from "@components/Player/context";
+
+import { formatDuration } from "@utils/duration";
+import { MinimalMusic } from "@utils/types";
+
+import { AlbumInformation, Column, Label, PlayPauseButton, Item as Root } from "@components/MusicList/index.styles";
+
+export interface ItemProps {
+    item: MinimalMusic;
+    musics: MinimalMusic[];
+    index: number;
+    withAlbum?: boolean;
+
+    onClick: (e: React.MouseEvent<HTMLDivElement, MouseEvent>, index: number) => void;
+    onKeyDown: (e: React.KeyboardEvent<HTMLDivElement>, index: number) => void;
+    onPlayPauseClick: (e: React.MouseEvent<HTMLButtonElement>, index: number) => void;
+}
+
+export function Item({ item, index, onClick, onKeyDown, onPlayPauseClick, musics, withAlbum = false }: ItemProps) {
+    const selection = useMusicSelection();
+    const player = usePlayer();
+    const currentMusic = player.getCurrentMusic();
+    const { t } = useTranslation();
+    const isActive = currentMusic?.id === item.id;
+
+    const handleItemClick = React.useCallback(
+        (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+            onClick(e, index);
+        },
+        [index, onClick],
+    );
+
+    const handleItemKeyDown = React.useCallback(
+        (e: React.KeyboardEvent<HTMLDivElement>) => {
+            onKeyDown(e, index);
+        },
+        [index, onKeyDown],
+    );
+
+    const handlePlayPauseClick = React.useCallback(
+        (e: React.MouseEvent<HTMLButtonElement>) => {
+            onPlayPauseClick(e, index);
+        },
+        [index, onPlayPauseClick],
+    );
+
+    return (
+        <Root
+            tabIndex={0}
+            odd={index % 2 !== 0}
+            key={item.id}
+            isActive={isActive}
+            onClick={handleItemClick}
+            onKeyDown={handleItemKeyDown}
+            selected={selection?.selectedIndices.includes(index) || false}
+        >
+            {withAlbum && (!index || item.album?.id !== musics[index - 1].album?.id) && (
+                <AlbumInformation>
+                    <AlbumArt albumArt={item.albumArt} />
+                    <Box mt={1}>
+                        <Typography
+                            variant="body1"
+                            overflow="hidden"
+                            textOverflow="ellipsis"
+                            whiteSpace="nowrap"
+                            color="text.primary"
+                        >
+                            {item.album?.title || t("common.unknown-album")}
+                        </Typography>
+                        {item.year && (
+                            <Typography component={DisabledText} variant="body2">
+                                {item.year}
+                            </Typography>
+                        )}
+                    </Box>
+                </AlbumInformation>
+            )}
+            <Column columnWidth="44px">
+                <PlayPauseButton withoutBorder albumArt={item.albumArt} onClick={handlePlayPauseClick}>
+                    {(!isActive || !player.isPlaying) && <PlayArrowRoundedIcon />}
+                    {isActive && player.isPlaying && <PauseRoundedIcon />}
+                </PlayPauseButton>
+            </Column>
+            <Column columnWidth="43%">
+                <Typography component={Label} variant="body1" fontSize="0.9rem">
+                    {item.title}
+                </Typography>
+            </Column>
+            <Column columnWidth="18%">
+                <Typography component={Label} variant="body1" fontSize="0.9rem">
+                    {item.artists[0].name}
+                </Typography>
+            </Column>
+            <Column columnWidth="18%">
+                <Typography component={Label} variant="body1" fontSize="0.9rem">
+                    {item.album?.title || t("common.unknown-album")}
+                </Typography>
+            </Column>
+            <Column columnWidth="18%">
+                <Typography component={Label} variant="body1" fontSize="0.9rem">
+                    {item.genre[0] || t("common.unknown-genre")}
+                </Typography>
+            </Column>
+            <Column columnWidth="7%">
+                <Typography component={Label} variant="body1" fontSize="0.9rem" textAlign="right">
+                    {formatDuration(item.duration)}
+                </Typography>
+            </Column>
+        </Root>
+    );
+}
diff --git a/apps/renderer/src/components/MusicList/index.tsx b/apps/renderer/src/components/MusicList/index.tsx
index 9853db5..ca29cce 100644
--- a/apps/renderer/src/components/MusicList/index.tsx
+++ b/apps/renderer/src/components/MusicList/index.tsx
@@ -1,30 +1,15 @@
 import React from "react";
-import { useTranslation } from "react-i18next";
 
 import { VirtualizedList } from "ui";
 
-import { Box, Typography } from "@mui/material";
-import PlayArrowRoundedIcon from "@mui/icons-material/PlayArrowRounded";
-import PauseRoundedIcon from "@mui/icons-material/PauseRounded";
-
 import { useLayout } from "@components/Layout/context";
 import { usePlayer } from "@components/Player/context";
 import { useMusicSelection } from "@components/Selection";
+import { Item } from "@components/MusicList/Item";
 
-import {
-    AlbumInformation,
-    Column,
-    Item,
-    Label,
-    PlayPauseButton,
-    Root,
-    ShrinkList,
-} from "@components/MusicList/index.styles";
+import { Root, ShrinkList } from "@components/MusicList/index.styles";
 
 import { MinimalMusic } from "@utils/types";
-import { formatDuration } from "@utils/duration";
-import { AlbumArt } from "@components/AlbumArt";
-import { DisabledText } from "@styles/components";
 
 export interface MusicListProps {
     musics: MinimalMusic[];
@@ -32,10 +17,8 @@ export interface MusicListProps {
 }
 
 export function MusicList({ musics, withAlbum = false }: MusicListProps) {
-    const { t } = useTranslation();
     const { view } = useLayout();
     const player = usePlayer();
-    const currentMusic = player.getCurrentMusic();
     const selection = useMusicSelection();
 
     const handlePlayPauseClick = React.useCallback(
@@ -43,7 +26,8 @@ export function MusicList({ musics, withAlbum = false }: MusicListProps) {
             e.preventDefault();
             e.stopPropagation();
 
-            if (player.currentIndex === index) {
+            const currentMusic = player.playlist[player.currentIndex];
+            if (currentMusic && currentMusic.id === musics[index].id) {
                 if (player.isPlaying) {
                     player.pause();
                 } else {
@@ -92,71 +76,15 @@ export function MusicList({ musics, withAlbum = false }: MusicListProps) {
             <List items={musics} estimateSize={() => 56} scrollElement={view}>
                 {(item, index) => (
                     <Item
-                        tabIndex={0}
-                        odd={index % 2 !== 0}
+                        item={item}
+                        index={index}
                         key={item.id}
-                        isActive={currentMusic?.id === item.id}
-                        onClick={e => handleItemClick(e, index)}
-                        onKeyDown={e => handleItemKeyDown(e, index)}
-                        selected={selection?.selectedIndices.includes(index) || false}
-                    >
-                        {withAlbum && (!index || item.album?.id !== musics[index - 1].album?.id) && (
-                            <AlbumInformation>
-                                <AlbumArt albumArt={item.albumArt} />
-                                <Box mt={1}>
-                                    <Typography
-                                        variant="body1"
-                                        overflow="hidden"
-                                        textOverflow="ellipsis"
-                                        whiteSpace="nowrap"
-                                        color="text.primary"
-                                    >
-                                        {item.album?.title || t("common.unknown-album")}
-                                    </Typography>
-                                    {item.year && (
-                                        <Typography component={DisabledText} variant="body2">
-                                            {item.year}
-                                        </Typography>
-                                    )}
-                                </Box>
-                            </AlbumInformation>
-                        )}
-                        <Column columnWidth="44px">
-                            <PlayPauseButton
-                                withoutBorder
-                                albumArt={item.albumArt}
-                                onClick={e => handlePlayPauseClick(e, index)}
-                            >
-                                {(player.currentIndex !== index || !player.isPlaying) && <PlayArrowRoundedIcon />}
-                                {player.currentIndex === index && player.isPlaying && <PauseRoundedIcon />}
-                            </PlayPauseButton>
-                        </Column>
-                        <Column columnWidth="43%">
-                            <Typography component={Label} variant="body1" fontSize="0.9rem">
-                                {item.title}
-                            </Typography>
-                        </Column>
-                        <Column columnWidth="18%">
-                            <Typography component={Label} variant="body1" fontSize="0.9rem">
-                                {item.artists[0].name}
-                            </Typography>
-                        </Column>
-                        <Column columnWidth="18%">
-                            <Typography component={Label} variant="body1" fontSize="0.9rem">
-                                {item.album?.title || t("common.unknown-album")}
-                            </Typography>
-                        </Column>
-                        <Column columnWidth="18%">
-                            <Typography component={Label} variant="body1" fontSize="0.9rem">
-                                {item.genre[0] || t("common.unknown-genre")}
-                            </Typography>
-                        </Column>
-                        <Column columnWidth="7%">
-                            <Typography component={Label} variant="body1" fontSize="0.9rem" textAlign="right">
-                                {formatDuration(item.duration)}
-                            </Typography>
-                        </Column>
-                    </Item>
+                        onClick={handleItemClick}
+                        onKeyDown={handleItemKeyDown}
+                        onPlayPauseClick={handlePlayPauseClick}
+                        musics={musics}
+                        withAlbum={withAlbum}
+                    />
                 )}
             </List>
         </Root>
diff --git a/schema.graphql b/schema.graphql
index 4c96600..8ed3283 100644
--- a/schema.graphql
+++ b/schema.graphql
@@ -34,8 +34,6 @@ type AlbumArt {
   createdAt: DateTime!
   updatedAt: DateTime!
   url: String!
-  width: Int!
-  height: Int!
 }
 
 type Album {