fix(webui): resolve issue with playlist's context menu

tsirysndr · tsirysndr · commit d291f94378ea · 2022-11-21T18:31:42.000+03:00
chore: bump version code
diff --git a/Cargo.lock b/Cargo.lock
diff --git a/Cargo.toml b/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "music-player"
-version = "0.2.0-alpha.3"
+version = "0.2.0-alpha.4"
 edition = "2021"
 repository = "https://github.com/tsirysndr/music-player"
 license = "MIT"
@@ -76,7 +76,7 @@ version = "0.1.1"
 
 [dependencies.music-player-webui]
 path = "webui"
-version = "0.1.4"
+version = "0.1.5"
 
 [dependencies.music-player-discovery]
 path = "discovery"
diff --git a/webui/Cargo.toml b/webui/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "music-player-webui"
-version = "0.1.4"
+version = "0.1.5"
 edition = "2021"
 repository = "https://github.com/tsirysndr/music-player"
 license = "MIT"
diff --git a/webui/musicplayer/build/asset-manifest.json b/webui/musicplayer/build/asset-manifest.json
@@ -1,7 +1,7 @@
 {
   "files": {
     "main.css": "/static/css/main.56b69c4b.css",
-    "main.js": "/static/js/main.6bead8a2.js",
+    "main.js": "/static/js/main.2a80932d.js",
     "static/js/787.26bf0a29.chunk.js": "/static/js/787.26bf0a29.chunk.js",
     "static/media/RockfordSans-ExtraBold.otf": "/static/media/RockfordSans-ExtraBold.1513e8fd97078bfb7708.otf",
     "static/media/RockfordSans-Bold.otf": "/static/media/RockfordSans-Bold.c9f599ae01b13e565598.otf",
@@ -10,11 +10,11 @@
     "static/media/RockfordSans-Light.otf": "/static/media/RockfordSans-Light.b4a12e8abb38f7d105c4.otf",
     "index.html": "/index.html",
     "main.56b69c4b.css.map": "/static/css/main.56b69c4b.css.map",
-    "main.6bead8a2.js.map": "/static/js/main.6bead8a2.js.map",
+    "main.2a80932d.js.map": "/static/js/main.2a80932d.js.map",
     "787.26bf0a29.chunk.js.map": "/static/js/787.26bf0a29.chunk.js.map"
   },
   "entrypoints": [
     "static/css/main.56b69c4b.css",
-    "static/js/main.6bead8a2.js"
+    "static/js/main.2a80932d.js"
   ]
 }
diff --git a/webui/musicplayer/build/index.html b/webui/musicplayer/build/index.html
@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>Music Player</title><script defer="defer" src="/static/js/main.6bead8a2.js"></script><link href="/static/css/main.56b69c4b.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>Music Player</title><script defer="defer" src="/static/js/main.2a80932d.js"></script><link href="/static/css/main.56b69c4b.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
diff --git a/webui/musicplayer/build/static/js/main.2a80932d.js b/webui/musicplayer/build/static/js/main.2a80932d.js
diff --git a/webui/musicplayer/build/static/js/main.2a80932d.js.LICENSE.txt b/webui/musicplayer/build/static/js/main.2a80932d.js.LICENSE.txt
diff --git a/webui/musicplayer/build/static/js/main.2a80932d.js.map b/webui/musicplayer/build/static/js/main.2a80932d.js.map
diff --git a/webui/musicplayer/build/static/js/main.6bead8a2.js.map b/webui/musicplayer/build/static/js/main.6bead8a2.js.map
diff --git a/webui/musicplayer/src/Components/AlbumDetails/AlbumDetails.tsx b/webui/musicplayer/src/Components/AlbumDetails/AlbumDetails.tsx
@@ -150,6 +150,11 @@ export type AlbumDetailsProps = {
   onEditPlaylist: (id: string, name: string, description?: string) => void;
   recentPlaylists: any[];
   onAddTrackToPlaylist: (playlistId: string, trackId: string) => void;
+  onPlayPlaylist: (
+    playlistId: string,
+    shuffle: boolean,
+    position?: number
+  ) => void;
 };
 
 const AlbumDetails: FC<AlbumDetailsProps> = (props) => {
diff --git a/webui/musicplayer/src/Components/Albums/Albums.tsx b/webui/musicplayer/src/Components/Albums/Albums.tsx
@@ -90,6 +90,11 @@ export type AlbumsProps = {
   onDeletePlaylist: (id: string) => void;
   onEditFolder: (id: string, name: string) => void;
   onEditPlaylist: (id: string, name: string, description?: string) => void;
+  onPlayPlaylist: (
+    playlistId: string,
+    shuffle: boolean,
+    position?: number
+  ) => void;
 };
 
 export type AlbumProps = {
diff --git a/webui/musicplayer/src/Components/ArtistDetails/ArtistDetails.tsx b/webui/musicplayer/src/Components/ArtistDetails/ArtistDetails.tsx
@@ -171,6 +171,11 @@ export type ArtistDetailsProps = {
   onEditPlaylist: (id: string, name: string, description?: string) => void;
   recentPlaylists: any[];
   onAddTrackToPlaylist: (playlistId: string, trackId: string) => void;
+  onPlayPlaylist: (
+    playlistId: string,
+    shuffle: boolean,
+    position?: number
+  ) => void;
 };
 
 const ArtistDetails: FC<ArtistDetailsProps> = (props) => {
diff --git a/webui/musicplayer/src/Components/Artists/Artists.tsx b/webui/musicplayer/src/Components/Artists/Artists.tsx
@@ -82,6 +82,11 @@ export type ArtistsProps = {
   onDeletePlaylist: (id: string) => void;
   onEditFolder: (id: string, name: string) => void;
   onEditPlaylist: (id: string, name: string, description?: string) => void;
+  onPlayPlaylist: (
+    playlistId: string,
+    shuffle: boolean,
+    position?: number
+  ) => void;
 };
 
 const Artists: FC<ArtistsProps> = (props) => {
diff --git a/webui/musicplayer/src/Components/Folder/Folder.tsx b/webui/musicplayer/src/Components/Folder/Folder.tsx
@@ -178,6 +178,11 @@ export type FolderProps = {
   onDeletePlaylist: (id: string) => void;
   onEditFolder: (id: string, name: string) => void;
   onEditPlaylist: (id: string, name: string, description?: string) => void;
+  onPlayPlaylist: (
+    playlistId: string,
+    shuffle: boolean,
+    position?: number
+  ) => void;
 };
 
 const Folder: FC<FolderProps> = (props) => {
diff --git a/webui/musicplayer/src/Components/Playlists/ContextMenu/index.tsx b/webui/musicplayer/src/Components/Playlists/ContextMenu/index.tsx
@@ -1,9 +1,7 @@
-import { Menu } from "baseui/menu";
-import { FC, useState } from "react";
+import { StatefulMenu } from "baseui/menu";
+import { FC } from "react";
 import { PlayList as PlaylistIcon } from "@styled-icons/remix-fill";
 import styled from "@emotion/styled";
-import EditPlaylistModal from "../EditPlaylistModal";
-import DeleteConfirmationModal from "../DeleteConfirmationModal";
 
 const IconWrapper = styled.div`
   height: 40px;
@@ -59,19 +57,14 @@ const ContextMenu: FC<ContextMenuProps> = ({ close, playlist, handlers }) => {
           <Title>{playlist.name}</Title>
         </PlaylistDetails>
       </Header>
-      <Menu
+      <StatefulMenu
         overrides={{
           List: {
             style: {
               boxShadow: "none",
             },
           },
           ListItem: {
-            props: {
-              onClick: (x: any) => {
-                handlers[x.target.innerText as Label]();
-              },
-            },
             style: () => ({
               ":hover": {
                 backgroundColor: "#f7f7f8",
@@ -109,6 +102,10 @@ const ContextMenu: FC<ContextMenuProps> = ({ close, playlist, handlers }) => {
             label: "Delete Playlist",
           },
         ]}
+        onItemSelect={({ item }) => {
+          handlers[item.label as Label](playlist.id);
+          close();
+        }}
       />
     </div>
   );
diff --git a/webui/musicplayer/src/Components/Playlists/FolderContextMenu/index.tsx b/webui/musicplayer/src/Components/Playlists/FolderContextMenu/index.tsx
@@ -1,5 +1,5 @@
 import styled from "@emotion/styled";
-import { Menu } from "baseui/menu";
+import { StatefulMenu } from "baseui/menu";
 import { FC } from "react";
 import { Folder as FolderIcon } from "@styled-icons/bootstrap";
 
@@ -54,19 +54,14 @@ const FolderContextMenu: FC<FolderContextProps> = ({
           <Title>{folder.name}</Title>
         </FolderDetails>
       </Header>
-      <Menu
+      <StatefulMenu
         overrides={{
           List: {
             style: {
               boxShadow: "none",
             },
           },
           ListItem: {
-            props: {
-              onClick: (x: any) => {
-                handlers[x.target.innerText as Label]();
-              },
-            },
             style: () => ({
               ":hover": {
                 backgroundColor: "#f7f7f8",
@@ -88,6 +83,10 @@ const FolderContextMenu: FC<FolderContextProps> = ({
             label: "Create Playlist",
           },
         ]}
+        onItemSelect={({ item }) => {
+          handlers[item.label as Label]();
+          close();
+        }}
       />
     </div>
   );
diff --git a/webui/musicplayer/src/Components/Playlists/Playlists.tsx b/webui/musicplayer/src/Components/Playlists/Playlists.tsx
@@ -86,6 +86,7 @@ const Folder: FC<FolderProps> = ({
         placement="rightTop"
         isOpen={isOpen}
         autoFocus={false}
+        onClickOutside={() => setIsOpen(false)}
         content={() => (
           <FolderContextMenu
             close={() => setIsOpen(false)}
@@ -108,7 +109,6 @@ const Folder: FC<FolderProps> = ({
             e.preventDefault();
             setIsOpen(true);
           }}
-          onBlur={() => setIsOpen(false)}
         >
           <FolderItem>
             <FolderIcon size={18} style={{ marginRight: 10 }} />
@@ -145,22 +145,28 @@ export type PlaylistProps = {
   playlist: any;
   onDeletePlaylist: (id: string) => void;
   onEditPlaylist: (id: string, name: string, description?: string) => void;
+  onPlayPlaylist: (
+    playlistId: string,
+    shuffle: boolean,
+    position?: number
+  ) => void;
 };
 
 const Playlist: FC<PlaylistProps> = ({
   playlist,
   id,
   onDeletePlaylist,
   onEditPlaylist,
+  onPlayPlaylist,
 }) => {
   const [isOpen, setIsOpen] = useState(false);
   const [editPlaylistModalIsOpen, setEditPlaylistModalIsOpen] =
     useState<boolean>(false);
   const [deleteConfirmationModalIsOpen, setDeleteConfirmationModalIsOpen] =
     useState<boolean>(false);
   const handlers = {
-    "Play Now": () => {},
-    Shuffle: () => {},
+    "Play Now": (id: string) => onPlayPlaylist(id, false),
+    Shuffle: (id: string) => onPlayPlaylist(id, true),
     "Play Next": () => {},
     "Add to Playlist": () => {},
     "Move to Folder": () => {},
@@ -173,6 +179,7 @@ const Playlist: FC<PlaylistProps> = ({
         placement="rightTop"
         isOpen={isOpen}
         autoFocus={false}
+        onClickOutside={() => setIsOpen(false)}
         content={() => (
           <ContextMenu
             close={() => setIsOpen(false)}
@@ -195,7 +202,6 @@ const Playlist: FC<PlaylistProps> = ({
             e.preventDefault();
             setIsOpen(true);
           }}
-          onBlur={() => setIsOpen(false)}
         >
           <Item
             active={playlist.id === id}
@@ -237,6 +243,11 @@ export type PlaylistsProps = {
   onDeletePlaylist: (id: string) => void;
   onEditFolder: (id: string, name: string) => void;
   onEditPlaylist: (id: string, name: string, description?: string) => void;
+  onPlayPlaylist: (
+    playlistId: string,
+    shuffle: boolean,
+    position?: number
+  ) => void;
 };
 
 const Playlists: FC<PlaylistsProps> = ({
@@ -248,6 +259,7 @@ const Playlists: FC<PlaylistsProps> = ({
   onDeletePlaylist,
   onEditFolder,
   onEditPlaylist,
+  onPlayPlaylist,
 }) => {
   const { id } = useParams();
   const [newFolderModalOpen, setNewFolderModalOpen] = useState(false);
@@ -330,6 +342,7 @@ const Playlists: FC<PlaylistsProps> = ({
           playlist={playlist}
           onDeletePlaylist={onDeletePlaylist}
           onEditPlaylist={onEditPlaylist}
+          onPlayPlaylist={onPlayPlaylist}
         />
       ))}
     </Container>
diff --git a/webui/musicplayer/src/Components/SearchResults/SearchResults.tsx b/webui/musicplayer/src/Components/SearchResults/SearchResults.tsx
@@ -55,6 +55,11 @@ export type SearchResultsProps = {
   onEditFolder: (id: string, name: string) => void;
   onEditPlaylist: (id: string, name: string, description?: string) => void;
   onAddTrackToPlaylist: (playlistId: string, trackId: string) => void;
+  onPlayPlaylist: (
+    playlistId: string,
+    shuffle: boolean,
+    position?: number
+  ) => void;
   recentPlaylists: any[];
 };
 
diff --git a/webui/musicplayer/src/Components/Sidebar/Sidebar.tsx b/webui/musicplayer/src/Components/Sidebar/Sidebar.tsx
@@ -25,6 +25,11 @@ export type SidebarProps = {
   onDeletePlaylist: (id: string) => void;
   onEditFolder: (id: string, name: string) => void;
   onEditPlaylist: (id: string, name: string, description?: string) => void;
+  onPlayPlaylist: (
+    playlistId: string,
+    shuffle: boolean,
+    position?: number
+  ) => void;
 };
 
 const Sidebar: FC<SidebarProps> = (props) => {
diff --git a/webui/musicplayer/src/Components/Tracks/Tracks.tsx b/webui/musicplayer/src/Components/Tracks/Tracks.tsx
@@ -43,6 +43,11 @@ export type TracksProps = {
   onPlayTrackAt: (position: number) => void;
   onRemoveTrackAt: (position: number) => void;
   onSearch: (query: string) => void;
+  onPlayPlaylist: (
+    playlistId: string,
+    shuffle: boolean,
+    position?: number
+  ) => void;
   recentPlaylists: any[];
 };
 
diff --git a/webui/musicplayer/src/Containers/AlbumDetails/index.tsx b/webui/musicplayer/src/Containers/AlbumDetails/index.tsx
@@ -34,6 +34,7 @@ const AlbumDetailsPage = () => {
     playNext,
     playTrackAt,
     removeTrackAt,
+    playPlaylist,
   } = usePlayback();
   const { onSearch } = useSearch();
   const album =
@@ -97,6 +98,9 @@ const AlbumDetailsPage = () => {
       onDeletePlaylist={(id) => deletePlaylist({ variables: { id } })}
       onEditFolder={(id, name) => renameFolder({ variables: { id, name } })}
       onEditPlaylist={(id, name) => renamePlaylist({ variables: { id, name } })}
+      onPlayPlaylist={(playlistId, shuffle, position) =>
+        playPlaylist({ variables: { playlistId, position, shuffle } })
+      }
       recentPlaylists={playlists}
     />
   );
diff --git a/webui/musicplayer/src/Containers/Albums/index.tsx b/webui/musicplayer/src/Containers/Albums/index.tsx
@@ -20,6 +20,7 @@ const AlbumsPage = () => {
     playNext,
     playTrackAt,
     removeTrackAt,
+    playPlaylist,
   } = usePlayback();
   const navigate = useNavigate();
   const { onSearch } = useSearch();
@@ -71,6 +72,9 @@ const AlbumsPage = () => {
       onEditPlaylist={(id, name, description) =>
         renamePlaylist({ variables: { id, name } })
       }
+      onPlayPlaylist={(playlistId, shuffle, position) =>
+        playPlaylist({ variables: { playlistId, position, shuffle } })
+      }
     />
   );
 };
diff --git a/webui/musicplayer/src/Containers/ArtistDetails/index.tsx b/webui/musicplayer/src/Containers/ArtistDetails/index.tsx
@@ -34,6 +34,7 @@ const ArtistDetailsPage = () => {
     playNext,
     playTrackAt,
     removeTrackAt,
+    playPlaylist,
   } = usePlayback();
   const { onSearch } = useSearch();
   const artist = !loading && data ? data.artist : {};
@@ -108,6 +109,9 @@ const ArtistDetailsPage = () => {
       onDeletePlaylist={(id) => deletePlaylist({ variables: { id } })}
       onEditFolder={(id, name) => renameFolder({ variables: { id, name } })}
       onEditPlaylist={(id, name) => renamePlaylist({ variables: { id, name } })}
+      onPlayPlaylist={(playlistId, shuffle, position) =>
+        playPlaylist({ variables: { playlistId, position, shuffle } })
+      }
       recentPlaylists={playlists}
     />
   );
diff --git a/webui/musicplayer/src/Containers/Artists/index.tsx b/webui/musicplayer/src/Containers/Artists/index.tsx
diff --git a/webui/musicplayer/src/Containers/Folder/index.tsx b/webui/musicplayer/src/Containers/Folder/index.tsx
diff --git a/webui/musicplayer/src/Containers/Search/index.tsx b/webui/musicplayer/src/Containers/Search/index.tsx
diff --git a/webui/musicplayer/src/Containers/Tracks/index.tsx b/webui/musicplayer/src/Containers/Tracks/index.tsx

Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>Music Player</title><script defer="defer" src="/static/js/main.6bead8a2.js"></script><link href="/static/css/main.56b69c4b.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
	`1`	+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>Music Player</title><script defer="defer" src="/static/js/main.2a80932d.js"></script><link href="/static/css/main.56b69c4b.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>