first commit

src/component/Viewers/MusicPlayer/Playlist.tsx

@@ -0,0 +1,48 @@
+import { ListItemIcon, ListItemText, MenuProps } from "@mui/material";
+import { FileResponse } from "../../../api/explorer.ts";
+import { SquareMenu, SquareMenuItem } from "../../FileManager/ContextMenu/ContextMenu.tsx";
+import FileIcon from "../../FileManager/Explorer/FileIcon.tsx";
+
+export interface PlaylistProps extends MenuProps {
+  file: FileResponse;
+  playlist: FileResponse[];
+  playIndex: (index: number, volume?: number) => void;
+}
+
+const Playlist = ({ file, playlist, playIndex, onClose, ...rest }: PlaylistProps) => {
+  return (
+    <SquareMenu
+      MenuListProps={{
+        dense: true,
+      }}
+      anchorOrigin={{
+        vertical: "bottom",
+        horizontal: "right",
+      }}
+      transformOrigin={{
+        vertical: "top",
+        horizontal: "right",
+      }}
+      onClose={onClose}
+      {...rest}
+    >
+      {playlist.map((item, index) => (
+        <SquareMenuItem key={item.id} onClick={() => playIndex(index)} selected={item.path == file.path}>
+          <ListItemIcon>
+            <FileIcon
+              sx={{ px: 0, py: 0, height: "20px" }}
+              file={item}
+              variant={"small"}
+              iconProps={{
+                fontSize: "small",
+              }}
+            />
+          </ListItemIcon>
+          <ListItemText>{item.name}</ListItemText>
+        </SquareMenuItem>
+      ))}
+    </SquareMenu>
+  );
+};
+
+export default Playlist;