[DEV] integrate menue on thack

2024-08-30 00:35:00 +02:00 · 2024-08-30 00:35:00 +02:00 · 093994b4b3
commit 093994b4b3
parent 1dba2ab9a1
7 changed files with 121 additions and 86 deletions
--- a/front2/src/components/track/DisplayTrack.tsx
+++ b/front2/src/components/track/DisplayTrack.tsx
@ -2,16 +2,24 @@ import { Suspense } from 'react';

 import { Flex, Text } from '@chakra-ui/react';
 import { LuMusic2, LuPlay } from 'react-icons/lu';
+import { useNavigate } from 'react-router-dom';

 import { Track } from '@/back-api';
 import { Covers } from '@/components/Cover';
+import { ContextMenu, MenuElement } from '@/components/contextMenu/ContextMenu';
 import { DisplayTrackSkeleton } from '@/components/track/DisplayTrackSkeleton';
 import { useActivePlaylistService } from '@/service/ActivePlaylist';

 export type DisplayTrackProps = {
  track: Track;
+  onClick?: () => void;
+  contextMenu?: MenuElement[];
 };
-export const DisplayTrack = ({ track }: DisplayTrackProps) => {
+export const DisplayTrack = ({
+  track,
+  onClick,
+  contextMenu,
+}: DisplayTrackProps) => {
  const { trackActive } = useActivePlaylistService();
  return (
    <Flex direction="row" width="full" height="full">
@ -26,6 +34,7 @@ export const DisplayTrack = ({ track }: DisplayTrackProps) => {
            <LuMusic2 size="50" height="full" />
          )
        }
+        onClick={onClick}
      />
      <Flex
        direction="column"
@ -33,6 +42,7 @@ export const DisplayTrack = ({ track }: DisplayTrackProps) => {
        height="full"
        paddingLeft="5px"
        overflowX="hidden"
+        onClick={onClick}
      >
        <Text
          as="span"
@ -49,6 +59,7 @@ export const DisplayTrack = ({ track }: DisplayTrackProps) => {
          [{track.track}] {track.name}
        </Text>
      </Flex>
+      <ContextMenu elements={contextMenu} />
    </Flex>
  );
 };
--- a/front2/src/components/track/DisplayTrackFull.tsx
+++ b/front2/src/components/track/DisplayTrackFull.tsx
@ -13,98 +13,99 @@ import { useSpecificGender } from '@/service/Gender';

 export type DisplayTrackProps = {
  track: Track;
+  onClick?: () => void;
 };
-export const DisplayTrackFull = ({ track }: DisplayTrackProps) => {
+export const DisplayTrackFull = ({ track, onClick }: DisplayTrackProps) => {
  const { trackActive } = useActivePlaylistService();
  const { dataAlbum } = useSpecificAlbum(track?.albumId);
  const { dataGender } = useSpecificGender(track?.genderId);
  const { dataArtists } = useSpecificArtists(track?.artists);
  return (
-    <Suspense fallback={<DisplayTrackSkeleton />}>
-      <Flex direction="row" width="full" height="full">
-        <Covers
-          data={track?.covers}
-          size="50"
-          //height="full"
-          marginY="auto"
-          iconEmpty={
-            trackActive?.id === track.id ? (
-              <LuPlay size="50" />
-            ) : (
-              <LuMusic2 size="50" />
-            )
-          }
-        />
-        <Flex
-          direction="column"
-          width="full"
-          height="full"
-          paddingLeft="5px"
-          overflowX="hidden"
+    <Flex direction="row" width="full" height="full">
+      <Covers
+        data={track?.covers}
+        size="50"
+        //height="full"
+        marginY="auto"
+        iconEmpty={
+          trackActive?.id === track.id ? (
+            <LuPlay size="50" />
+          ) : (
+            <LuMusic2 size="50" />
+          )
+        }
+        onClick={onClick}
+      />
+      <Flex
+        direction="column"
+        width="full"
+        height="full"
+        paddingLeft="5px"
+        overflowX="hidden"
+        onClick={onClick}
+      >
+        <Text
+          as="span"
+          align="left"
+          fontSize="20px"
+          fontWeight="bold"
+          userSelect="none"
+          marginRight="auto"
+          overflow="hidden"
+          noOfLines={1}
+          color={trackActive?.id === track.id ? 'green.700' : undefined}
        >
+          {track.name} {track.track && ` [${track.track}]`}
+        </Text>
+        {dataAlbum && (
          <Text
            as="span"
            align="left"
-            fontSize="20px"
+            fontSize="15px"
            fontWeight="bold"
            userSelect="none"
            marginRight="auto"
            overflow="hidden"
            noOfLines={1}
+            marginY="auto"
            color={trackActive?.id === track.id ? 'green.700' : undefined}
          >
-            {track.name} {track.track && ` [${track.track}]`}
+            Album {dataAlbum.name}
          </Text>
-          {dataAlbum && (
-            <Text
-              as="span"
-              align="left"
-              fontSize="15px"
-              fontWeight="bold"
-              userSelect="none"
-              marginRight="auto"
-              overflow="hidden"
-              noOfLines={1}
-              marginY="auto"
-              color={trackActive?.id === track.id ? 'green.700' : undefined}
-            >
-              Album {dataAlbum.name}
-            </Text>
-          )}
-          {dataArtists && (
-            <Text
-              as="span"
-              align="left"
-              fontSize="15px"
-              fontWeight="bold"
-              userSelect="none"
-              marginRight="auto"
-              overflow="hidden"
-              noOfLines={1}
-              marginY="auto"
-              color={trackActive?.id === track.id ? 'green.700' : undefined}
-            >
-              Artist(s): {dataArtists.map((data) => data.name).join(', ')}
-            </Text>
-          )}
-          {dataGender && (
-            <Text
-              as="span"
-              align="left"
-              fontSize="15px"
-              fontWeight="bold"
-              userSelect="none"
-              marginRight="auto"
-              overflow="hidden"
-              noOfLines={1}
-              marginY="auto"
-              color={trackActive?.id === track.id ? 'green.700' : undefined}
-            >
-              Gender: {dataGender.name}
-            </Text>
-          )}
-        </Flex>
+        )}
+        {dataArtists && (
+          <Text
+            as="span"
+            align="left"
+            fontSize="15px"
+            fontWeight="bold"
+            userSelect="none"
+            marginRight="auto"
+            overflow="hidden"
+            noOfLines={1}
+            marginY="auto"
+            color={trackActive?.id === track.id ? 'green.700' : undefined}
+          >
+            Artist(s): {dataArtists.map((data) => data.name).join(', ')}
+          </Text>
+        )}
+        {dataGender && (
+          <Text
+            as="span"
+            align="left"
+            fontSize="15px"
+            fontWeight="bold"
+            userSelect="none"
+            marginRight="auto"
+            overflow="hidden"
+            noOfLines={1}
+            marginY="auto"
+            color={trackActive?.id === track.id ? 'green.700' : undefined}
+          >
+            Gender: {dataGender.name}
+          </Text>
+        )}
      </Flex>
-    </Suspense>
+    </Flex>
  );
 };
--- a/front2/src/scene/album/AlbumDetailPage.tsx
+++ b/front2/src/scene/album/AlbumDetailPage.tsx
@ -97,9 +97,11 @@ export const AlbumDetailPage = () => {
                boxShadow: 'outline-over',
                bgColor: mode('#FFFFFFF7', '#000000F7'),
              }}
-              onClick={() => onSelectItem(data.id)}
            >
-              <DisplayTrack track={data} />
+              <DisplayTrack
+                track={data}
+                onClick={() => onSelectItem(data.id)}
+              />
            </Box>
          ))}
          <EmptyEnd />
--- a/front2/src/scene/artist/ArtistAlbumDetailPage.tsx
+++ b/front2/src/scene/artist/ArtistAlbumDetailPage.tsx
@ -1,12 +1,13 @@
 import { Box, Flex, Text } from '@chakra-ui/react';
 import { LuDisc3, LuUser } from 'react-icons/lu';
-import { useParams } from 'react-router-dom';
+import { Route, Routes, useNavigate, useParams } from 'react-router-dom';

 import { Covers } from '@/components/Cover';
 import { EmptyEnd } from '@/components/EmptyEnd';
 import { PageLayout } from '@/components/Layout/PageLayout';
 import { PageLayoutInfoCenter } from '@/components/Layout/PageLayoutInfoCenter';
 import { TopBar } from '@/components/TopBar/TopBar';
+import { TrackEditPopUp } from '@/components/popup/TrackEditPopUp';
 import { DisplayTrack } from '@/components/track/DisplayTrack';
 import { useActivePlaylistService } from '@/service/ActivePlaylist';
 import { useSpecificAlbum } from '@/service/Album';
@ -23,8 +24,8 @@ export const ArtistAlbumDetailPage = () => {
  const { dataArtist } = useSpecificArtist(artistIdInt);
  const { dataAlbum } = useSpecificAlbum(albumIdInt);
  const { tracksOnAnAlbum } = useTracksOfAnAlbum(albumIdInt);
+  const navigate = useNavigate();
  const onSelectItem = (trackId: number) => {
-    //navigate(`/artist/${artistIdInt}/album/${albumId}`);
    let currentPlay = 0;
    const listTrackId: number[] = [];
    if (!tracksOnAnAlbum) {
@ -126,13 +127,29 @@ export const ArtistAlbumDetailPage = () => {
                boxShadow: 'outline-over',
                bgColor: mode('#FFFFFFF7', '#000000F7'),
              }}
-              onClick={() => onSelectItem(data.id)}
            >
-              <DisplayTrack track={data} />
+              <DisplayTrack
+                track={data}
+                onClick={() => onSelectItem(data.id)}
+                contextMenu={[
+                  {
+                    name: 'Edit',
+                    onClick: () => {
+                      navigate(
+                        `/artist/${artistIdInt}/album/${albumId}/edit/${data.id}`
+                      );
+                    },
+                  },
+                  { name: 'Add Playlist', onClick: () => {} },
+                ]}
+              />
            </Box>
          ))}
          <EmptyEnd />
        </Flex>
+        <Routes>
+          <Route path="edit/:trackId" element={<TrackEditPopUp />} />
+        </Routes>
      </PageLayout>
    </>
  );
--- a/front2/src/scene/artist/ArtistRoutes.tsx
+++ b/front2/src/scene/artist/ArtistRoutes.tsx
@ -12,7 +12,7 @@ export const ArtistRoutes = () => {
      <Route path="all" element={<ArtistsPage />} />
      <Route path=":artistId" element={<ArtistDetailPage />} />
      <Route
-        path=":artistId/album/:albumId"
+        path=":artistId/album/:albumId/*"
        element={<ArtistAlbumDetailPage />}
      />
      <Route path="*" element={<Error404 />} />
--- a/front2/src/scene/gender/GenderDetailPage.tsx
+++ b/front2/src/scene/gender/GenderDetailPage.tsx
@ -95,9 +95,11 @@ export const GenderDetailPage = () => {
                boxShadow: 'outline-over',
                bgColor: mode('#FFFFFFF7', '#000000F7'),
              }}
-              onClick={() => onSelectItem(data.id)}
            >
-              <DisplayTrack track={data} />
+              <DisplayTrack
+                track={data}
+                onClick={() => onSelectItem(data.id)}
+              />
            </Box>
          ))}
          <EmptyEnd />
--- a/front2/src/scene/track/TracksStartLetterDetailPage.tsx
+++ b/front2/src/scene/track/TracksStartLetterDetailPage.tsx
@ -90,9 +90,11 @@ export const TracksStartLetterDetailPage = () => {
                  boxShadow: 'outline-over',
                  bgColor: mode('#FFFFFFF7', '#000000F7'),
                }}
-                onClick={() => onSelectItem(data.id)}
              >
-                <DisplayTrackFull track={data} />
+                <DisplayTrackFull
+                  track={data}
+                  onClick={() => onSelectItem(data.id)}
+                />
              </Box>
            ))}
          <EmptyEnd />