Moved context menu from QueueSongss to Queue and updated context menu popup position

src/App.tsx

@@ -1,4 +1,4 @@
-import React, { createRef, MutableRefObject, ReactEventHandler, useEffect, useRef, useState } from "react";
+import React, { MutableRefObject, useEffect, useRef, useState } from "react";
 import { convertFileSrc, invoke } from "@tauri-apps/api/core";
 import "./App.css";
 import { Config, playbackInfo } from "./types";
@@ -6,12 +6,21 @@ import { Config, playbackInfo } from "./types";
 // import { listen } from "@tauri-apps/api/event";
 // import { fetch } from "@tauri-apps/plugin-http";
 import { getCurrentWebviewWindow } from "@tauri-apps/api/webviewWindow";
-import { getCurrentWindow, LogicalPosition } from "@tauri-apps/api/window";
+import { cursorPosition, LogicalPosition, PhysicalPosition } from "@tauri-apps/api/window";
 import { Menu, Submenu, SubmenuOptions } from "@tauri-apps/api/menu";
-import { listen } from "@tauri-apps/api/event";
+import { TauriEvent } from "@tauri-apps/api/event";
+
 
 const appWindow = getCurrentWebviewWindow();
 
+type Location = "Library" | { "Playlist": string };
+
+// This needs to be changed to properly reflect cursor position
+// this will do for now.
+async function contextMenuPosition(event: React.MouseEvent)  {
+  return new PhysicalPosition(event.clientX, event.clientY);
+}
+
 function App() {
   const library = useState<JSX.Element[]>([]);
   const [queue, setQueue] = useState<JSX.Element[]>([]);
@@ -19,8 +28,10 @@ function App() {
   const [playlists, setPlaylists] = useState<JSX.Element[]>([]);
   const [viewName, setViewName] = useState("Library");
   const playlistsInfo= useRef<PlaylistInfo[]>([]);
-  const selectedSong = useRef<SongProps>();
+  const selectedSongMain = useRef<SongProps>();
-  const setSelected = (props: SongProps) =>  {selectedSong.current = props;} 
+  const selectedSongQueue = useRef<selectedQueueSong>({uuid: "0", index: 0, location: "Library"});
+  const setSelectedSongMain = (props: SongProps) =>  {selectedSongMain.current = props;} 
+  const setSelectedSongQueue = (song: selectedQueueSong) => {selectedSongQueue.current = song; console.log(selectedSongQueue)}
 
   const [nowPlaying, setNowPlaying] = useState<JSX.Element>(
     <NowPlaying
@@ -63,6 +74,7 @@ function App() {
                   location={ song[1] as "Library" | {"Playlist" : string}}
                   index={i+1}
                   key={ Math.floor((Math.random() * 100_000_000_000) + 1) + '_' + Date.now() }
+                  setSelectedSong={ setSelectedSongQueue }
                 />
               )
             )
@@ -79,19 +91,20 @@ function App() {
   }, []);
 
   useEffect(() => {
-    const invoke_: any = invoke("start_controller").then(() => {});
+    invoke("start_controller").then(() => {});
   }, [])
 
+
   return (
     <main>
       <div className="container">
         <div className="leftSide">
-          <PlaylistHead playlists={ playlists } setPlaylists={ setPlaylists } setViewName={ setViewName } setLibrary={ library[1] } playlistsInfo={ playlistsInfo } setSelected={ setSelected } />
+          <PlaylistHead playlists={ playlists } setPlaylists={ setPlaylists } setViewName={ setViewName } setLibrary={ library[1] } playlistsInfo={ playlistsInfo } setSelected={ setSelectedSongMain } />
-          <MainView lib_ref={ library } viewName={ viewName } playlistsInfo={ playlistsInfo } setSelected={ setSelected } selectedSong={ selectedSong} />
+          <MainView lib_ref={ library } viewName={ viewName } playlistsInfo={ playlistsInfo } setSelected={ setSelectedSongMain } selectedSong={ selectedSongMain} />
         </div>
         <div className="rightSide">
           { nowPlaying }
-          <Queue songs={ queue } />
+          <Queue songs={ queue } selectedSong={ selectedSongQueue } />
         </div>
       </div>
       <div className="bottom">
@@ -121,11 +134,9 @@ interface PlaylistHeadProps {
 function PlaylistHead({ playlists, setPlaylists, setViewName, setLibrary, playlistsInfo, setSelected }: PlaylistHeadProps) {
   function getPlaylist(playlist: PlaylistInfo) {
     invoke('get_playlist', { uuid: playlist.uuid }).then((list) => {      
-      let i = 0;
+      setLibrary([...(list as any[]).map((song, i) => {
-      setLibrary([...(list as any[]).map((song) => {
         // console.log(song);
         const reload = () => getPlaylist(playlist)
-        i++;
         return (
           <Song
             key={ song.uuid + Math.floor(Math.random() * 100_000_000_000) }
@@ -137,7 +148,7 @@ function PlaylistHead({ playlists, setPlaylists, setViewName, setLibrary, playli
             tags={ song.tags }
             playlists={ playlistsInfo }
             reload = { reload }
-            index = { i - 1 }
+            index = { i }
             setSelected={ setSelected }
           />
         )
@@ -167,7 +178,7 @@ function PlaylistHead({ playlists, setPlaylists, setViewName, setLibrary, playli
                   { id: "delete_playlist" + list.uuid, text: "Delete Playlist", action: deletePlaylist }
                 ]
               });
-              menu.popup();
+              menu.popup(await contextMenuPosition(event));
             }
 
             return (
@@ -251,7 +262,7 @@ function MainView({ lib_ref, viewName, playlistsInfo, setSelected, selectedSong
     async function clickHandler(event: React.MouseEvent) {
       event.preventDefault();
 
-      const _ = await invoke('get_playlists');
+      await invoke('get_playlists');
       let removeText = "Remove from Library";
       if (selectedSong.current!.playerLocation != "Library") {
         removeText = "Remove from Playlist";
@@ -273,11 +284,8 @@ function MainView({ lib_ref, viewName, playlistsInfo, setSelected, selectedSong
             } as SubmenuOptions
           ),
         { id: "remove_from_lib_playlist" + selectedSong.current!.location + selectedSong.current!.uuid, text: removeText, action: removeLibPlaylist },
-      ]
+      ]});
-    })
+      menu.popup(await contextMenuPosition(event));
-  ;
-      const pos = new LogicalPosition(event.clientX, event.clientY);
-      menu.popup(pos);
     }
 
 
@@ -466,32 +474,24 @@ function NowPlaying({ title, artist, album, artwork }: NowPlayingProps) {
 
 interface QueueProps {
   songs: JSX.Element[],
+  // song element. put the proper type here :]???
+  selectedSong: MutableRefObject<selectedQueueSong>,
 }
 
-function Queue({ songs }: QueueProps) {
+interface selectedQueueSong {
-  return (
+  uuid: string,
-    <section className="Queue">
+  index: number
-      { songs }
+  location: Location,
-    </section>
-  )
 }
 
-interface QueueSongProps {
+function Queue({ songs, selectedSong, }: QueueProps) {
-  song: any,
-  location: "Library" | {"Playlist": string},
-  index: number,
-}
-
-function QueueSong({ song, location, index }: QueueSongProps) {
-  // console.log(song.tags);
-
    const removeFromQueue = () => {
-    invoke('remove_from_queue', { index: index }).then(() => {})
+        invoke('remove_from_queue', { index: selectedSong.current.index }).then(() => {})
       }
       const playNow = () => {
-    invoke('play_now', { uuid: song.uuid, location: location }).then(() => {})
+        invoke('play_now', { uuid: selectedSong.current.uuid, location: selectedSong.current.location }).then(() => {})
       }
-  const playNext = () => invoke('play_next_queue', { uuid: song.uuid, location }).then(() => {});
+      const playNext = () => invoke('play_next_queue', { uuid: selectedSong.current.uuid, location: selectedSong.current.location }).then(() => {});
       const clearQueue = () => invoke('clear_queue').then();
 
       async function menuHandler(event: React.MouseEvent) {
@@ -499,17 +499,40 @@ function QueueSong({ song, location, index }: QueueSongProps) {
 
         const menu = await Menu.new({
          items: [
-       { id: "play_now" + index, text: "Play Now", action: playNow },
+           { id: "play_now" + selectedSong.current.index, text: "Play Now", action: playNow },
-       { id: "play_next_" + song.uuid + index, text: "Play Next in Queue", action: playNext },
+           { id: "play_next_" + selectedSong.current.uuid + selectedSong.current.index, text: "Play Next in Queue", action: playNext },
-       { id: "remove_queue" + song.uuid + index, text: "Remove from Queue", action: removeFromQueue },
+           { id: "remove_queue" + selectedSong.current.uuid + selectedSong.current.index, text: "Remove from Queue", action: removeFromQueue },
            { id: "clear_queue", text: "Clear Queue", action: clearQueue },
          ]
         })
-    menu.popup();
+        menu.popup(await contextMenuPosition(event));
       }
 
   return (
-    <div className="queueSong unselectable"  onAuxClickCapture={ removeFromQueue } onDoubleClickCapture={ playNow } onContextMenu={ menuHandler }>
+    <section className="Queue"
+      onAuxClickCapture={ removeFromQueue }
+      onDoubleClick={ playNow }
+      onContextMenu={ menuHandler }
+      >
+      { songs }
+    </section>
+  )
+}
+
+interface QueueSongProps {
+  song: any,
+  location: Location,
+  index: number,
+  setSelectedSong: (song: selectedQueueSong) => void,
+}
+
+function QueueSong({ song, location, index, setSelectedSong }: QueueSongProps) {
+  // console.log(song.tags);
+
+  let setSelected = () => setSelectedSong({uuid: song.uuid, index: index, location: location })
+
+  return (
+    <div className="queueSong unselectable"  onAuxClickCapture={ setSelected } onClick={ setSelected } onContextMenu={ setSelected }>
       <img className="queueSongCoverArt" src={ convertFileSrc('abc') + '?' + song.uuid } key={ 'coverArt_' + song.uuid }/>
       <div className="queueSongTags">
         <p className="queueSongTitle">{ song.tags.TrackTitle }</p>
@@ -530,3 +553,4 @@ function getConfig(): any {
     }
   })
 }
+