Update z-index values in modals and toasts and added various implemen…

…tations

README.md

@@ -6,7 +6,7 @@
 ![application](Presentation/Application.png "Application")
 <br></br>
 # muzik-offline
-A cross platform, local music player that is an offline(no streaming) version of <a href="https://github.com/waveyboym/Muzik">Muzik</a>. This app allows you to listen to music that is stored on your local machine, that being music in mp3, wav etc format.
+A cross platform, local music player that is an offline(no streaming) version of <a href="https://github.com/waveyboym/Muzik">Muzik</a>. This app allows you to listen to music that is stored on your local machine, that being music in mp3, wav, ogg and flac format.
 
 # I am a user/tester
 1. Navigate to the <a href="https://github.com/waveyboym/muzik-offline/releases">releases tab</a> and find the latest app release for your operating system.

muzik-offline/package.json

@@ -1,7 +1,7 @@
 {
   "name": "muzik-offline",
   "private": true,
-  "version": "0.1.0",
+  "version": "0.2.0",
   "type": "module",
   "scripts": {
     "dev": "vite",

muzik-offline/src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "muzik-offline"
-version = "0.1.0"
+version = "0.2.0"
 description = "A desktop music player for listening to music offline."
 authors = ["Michael"]
 license = ""

muzik-offline/src-tauri/tauri.conf.json

@@ -7,7 +7,7 @@
   },
   "package": {
     "productName": "muzik-offline",
-    "version": "0.1.0"
+    "version": "0.2.0"
   },
   "tauri": {
     "allowlist": {

muzik-offline/src/interface/components/cards/SongCardResizable.tsx

@@ -1,10 +1,8 @@
 import { motion } from 'framer-motion';
 import { FunctionComponent } from 'react';
-import { 
-    //DotHorizontal, 
-    Play } from "@icons/index";
+import { DotHorizontal, Play } from "@icons/index";
 import "@styles/components/cards/SongCardResizable.scss";
-import { getRandomCover } from 'utils';
+import { getRandomCover } from '@utils/index';
 
 type SongCardResizableProps = {
     cover: string | null;
@@ -13,6 +11,7 @@ type SongCardResizableProps = {
     keyV: number;
     navigateTo: (key: number, type: "artist" | "song") => void;
     setMenuOpenData: (key: number, co_ords: {xPos: number; yPos: number;}) => void;
+    playThisSong: (key: number) => void;
 }
 
 const SongCardResizable: FunctionComponent<SongCardResizableProps> = (props: SongCardResizableProps) => {
@@ -32,15 +31,15 @@ const SongCardResizable: FunctionComponent<SongCardResizableProps> = (props: Son
                 <motion.h3 whileTap={{scale: 0.98}} onClick={() => props.navigateTo(props.keyV, "song")}>{props.songName}</motion.h3>
                 <motion.p whileTap={{scale: 0.98}} onClick={() => props.navigateTo(props.keyV, "artist")}>{props.artist}</motion.p>
             </div>
-            <motion.div className="PlayIcon" whileTap={{scale: 0.95}}>
+            <motion.div className="PlayIcon" whileTap={{scale: 0.95}} onMouseUp={() => props.playThisSong(props.keyV)}>
                 <Play />
             </motion.div>
-            {/*<motion.div whileTap={{scale: 0.95}} onMouseUp={(e) => {
+            <motion.div whileTap={{scale: 0.95}} onMouseUp={(e) => {
                 e.preventDefault();
                 props.setMenuOpenData(props.keyV, {xPos: e.pageX - 200, yPos: e.pageY});
             }}>
                 <DotHorizontal />
-            </motion.div>*/}
+            </motion.div>
         </div>
     )
 }

muzik-offline/src/interface/components/context_menu/GeneralContextMenu.tsx

@@ -6,6 +6,7 @@ import { AddToPlaylistButton, PlayButton,
     ShowAlbumButton, 
     ShowInfoButton} from "@components/index";
 import "@styles/components/context_menu/GeneralContextMenu.scss";
+import { motion } from "framer-motion";
 
 type GeneralContextMenuProps = {
     xPos: number;
@@ -42,7 +43,10 @@ const GeneralContextMenu: FunctionComponent<GeneralContextMenuProps> = (props: G
     }
 
     return (
-        <div className="GeneralContextMenu" style={{top: getYCoord(props.yPos), left: getXCoord(props.xPos)}}>
+        <motion.div className="GeneralContextMenu" style={{top: getYCoord(props.yPos), left: getXCoord(props.xPos)}}
+        initial={{scale: 0.7, opacity: 0}}
+        animate={{scale: 1, opacity: 1}}
+        exit={{scale: 0.7, opacity: 0}}>
             <PlayButton title={props.title} chooseOption={props.chooseOption}/>
             <PlayNextButton chooseOption={props.chooseOption}/>
             <PlayLaterButton chooseOption={props.chooseOption}/>
@@ -54,7 +58,7 @@ const GeneralContextMenu: FunctionComponent<GeneralContextMenuProps> = (props: G
             {(props.CMtype === contextMenuEnum.PlaylistCM) && <ShowPlaylistButton  title={props.title} chooseOption={props.chooseOption}/>}
             {(props.CMtype === contextMenuEnum.AlbumCM) && <ShowAlbumButton  title={props.title} chooseOption={props.chooseOption}/>}
             {(props.CMtype === contextMenuEnum.PlaylistCM || props.CMtype === contextMenuEnum.SongCM) && <ShowInfoButton chooseOption={props.chooseOption}/>}
-        </div >
+        </motion.div >
     )
 }
 

muzik-offline/src/interface/components/music/HistoryUpcoming.tsx

@@ -1,17 +1,16 @@
-import { FunctionComponent, useEffect, useReducer } from "react";
+import { useEffect, useReducer } from "react";
 import { motion } from 'framer-motion';
 import "@styles/components/music/HistoryUpcoming.scss";
 import { Song, contextMenuButtons, contextMenuEnum } from "@muziktypes/index";
-import { GeneralContextMenu, SongCardResizable } from "@components/index";
+import { AddSongToPlaylistModal, GeneralContextMenu, PropertiesModal, SongCardResizable } from "@components/index";
 import { useNavigate } from "react-router-dom";
 import { local_albums_db, local_songs_db } from "@database/database";
-import { useUpcomingSongs, useHistorySongs, useSavedObjectStore, reducerType } from "store";
-import { UpcomingHistoryState, upcomingHistoryReducer } from "store/reducerStore";
-import { closeContextMenu } from "utils/reducerUtils";
+import { useUpcomingSongs, useHistorySongs, useSavedObjectStore, reducerType } from "@store/index";
+import { UpcomingHistoryState, upcomingHistoryReducer } from "@store/reducerStore";
+import { closeContextMenu, closePlaylistModal, closePropertiesModal } from "@utils/reducerUtils";
+import { addThisSongToPlayNext, addThisSongToPlayLater, playThisSongFromQueue } from "@utils/playerControl";
 
-type HistoryUpcomingProps = { closePlayer: () => void;}
-
-const HistoryUpcoming: FunctionComponent<HistoryUpcomingProps> = (props: HistoryUpcomingProps) => {
+const HistoryUpcoming = () => {
   const [state , dispatch] = useReducer(upcomingHistoryReducer, UpcomingHistoryState); 
   const {SongQueueKeys} = useUpcomingSongs((state) => { return { SongQueueKeys: state.queue}; });
   const {SongHistoryKeys} = useHistorySongs((state) => { return { SongHistoryKeys: state.queue}; });
@@ -21,26 +20,43 @@ const HistoryUpcoming: FunctionComponent<HistoryUpcomingProps> = (props: History
 
   function setMenuOpenData__SongQueue(key: number, n_co_ords: {xPos: number; yPos: number;}){
     dispatch({ type: reducerType.SET_COORDS, payload: n_co_ords });
-    const matching_song = state.SongQueue.find(song => { return song.id === key; })
+    const matching_song = state.SongQueue.find((song, index) => { 
+        if(song.id === key)dispatch({ type: reducerType.SET_KEY_INDEX_SONG_QUEUE, payload: {key,index,queueType: "SongQueue"} });
+        return song.id === key; 
+    });
     dispatch({ type: reducerType.SET_SONG_MENU, payload: matching_song ? matching_song : null });
-}
+  }
 
-function setMenuOpenData_SongHistory(key: number, n_co_ords: {xPos: number; yPos: number;}){
-    dispatch({ type: reducerType.SET_COORDS, payload: n_co_ords });
-    const matching_song = state.SongHistory.find(song => { return song.id === key; })
-    dispatch({ type: reducerType.SET_SONG_MENU, payload: matching_song ? matching_song : null });
-}
+  function setMenuOpenData_SongHistory(key: number, n_co_ords: {xPos: number; yPos: number;}){
+      dispatch({ type: reducerType.SET_COORDS, payload: n_co_ords });
+      const matching_song = state.SongHistory.find((song, index) => { 
+          if(song.id === key)dispatch({ type: reducerType.SET_KEY_INDEX_SONG_QUEUE, payload: {key,index,queueType: "SongHistory"} });
+          return song.id === key; 
+      });
+      dispatch({ type: reducerType.SET_SONG_MENU, payload: matching_song ? matching_song : null });
+  }
 
   function chooseOption(arg: contextMenuButtons){
-      if(arg === contextMenuButtons.AddToPlaylist){ console.log("Add to playlist"); }
-        else if(arg === contextMenuButtons.PlayNext && state.songMenuToOpen){ console.log("Play next"); }
-        else if(arg === contextMenuButtons.PlayLater && state.songMenuToOpen){ console.log("Play later"); }
-        else if(arg === contextMenuButtons.Play && state.songMenuToOpen){ console.log("Play"); }
+    if(arg === contextMenuButtons.ShowInfo){ dispatch({ type: reducerType.SET_PROPERTIES_MODAL, payload: true}); }
+    else if(arg === contextMenuButtons.AddToPlaylist){ dispatch({ type: reducerType.SET_PLAYLIST_MODAL, payload: true}); }
+    else if(arg === contextMenuButtons.PlayNext && state.songMenuToOpen){ 
+        addThisSongToPlayNext([state.songMenuToOpen.id]);
+        closeContextMenu(dispatch); 
+    }
+    else if(arg === contextMenuButtons.PlayLater && state.songMenuToOpen){ 
+        addThisSongToPlayLater([state.songMenuToOpen.id]);
+        closeContextMenu(dispatch); 
+    }
+    else if(arg === contextMenuButtons.Play && state.songMenuToOpen){
+        playThisSongFromQueue(state.kindex_sq.key, state.kindex_sq.index, state.kindex_sq.queueType);
+        dispatch({ type: reducerType.SET_KEY_INDEX_SONG_QUEUE, payload: {key: -1, index: -1, queueType: ""} });
+        closeContextMenu(dispatch); 
+    }
   }
 
-  async function navigateToSH(key: number, type: "artist" | "song"){
-    props.closePlayer();
-    const relatedSong = state.SongHistory.find((value) => value.id === key);
+  async function navigateTo(key: number, type: "artist" | "song", queueType: string){
+    const relatedSong = queueType === "SongHistory" ? state.SongHistory.find((value) => value.id === key)
+    : state.SongQueue.find((value) => value.id === key);
     if(!relatedSong)return;
     if(type === "song"){
         const albumres = await local_albums_db.albums.where("title").equals(relatedSong.album).toArray();
@@ -51,19 +67,6 @@ function setMenuOpenData_SongHistory(key: number, n_co_ords: {xPos: number; yPos
     }
   }
 
-  async function navigateToSQ(key: number, type: "artist" | "song"){
-      props.closePlayer();
-      const relatedSong = state.SongQueue.find((value) => value.id === key);
-      if(!relatedSong)return;
-      if(type === "song"){
-          const albumres = await local_albums_db.albums.where("title").equals(relatedSong.album).toArray();
-          navigate(`/AlbumDetails/${albumres[0].key}/undefined`);
-      }
-      else if(type === "artist"){
-          navigate(`/ArtistCatalogue/${relatedSong.artist}`); 
-      }
-  }
-
   async function setLists(){
     const limit = Number.parseInt(local_store.UpcomingHistoryLimit);
     const sqkeys = SongQueueKeys.slice(0, limit);
@@ -89,13 +92,14 @@ function setMenuOpenData_SongHistory(key: number, n_co_ords: {xPos: number; yPos
             {
                 state.SongQueue.map((song, index) => 
                     <SongCardResizable 
-                        key={song.id * index}
+                        key={index}
                         cover={song.cover} 
                         songName={song.name}
                         artist={song.artist}
                         keyV={song.id}
                         setMenuOpenData={setMenuOpenData__SongQueue}
-                        navigateTo={navigateToSQ}/>
+                        playThisSong={(key: number) => playThisSongFromQueue(key, index, "SongQueue")}
+                        navigateTo={(key: number, type: "artist" | "song") => navigateTo(key, type, "SongQueue")}/>
                 )
             }
           </div>
@@ -104,13 +108,14 @@ function setMenuOpenData_SongHistory(key: number, n_co_ords: {xPos: number; yPos
             {
                 state.SongHistory.map((song, index) => 
                     <SongCardResizable 
-                        key={song.id * index}
+                        key={index}
                         cover={song.cover} 
                         songName={song.name}
                         artist={song.artist}
                         keyV={song.id}
                         setMenuOpenData={setMenuOpenData_SongHistory}
-                        navigateTo={navigateToSH}/>
+                        playThisSong={(key: number) => playThisSongFromQueue(key, index, "SongHistory")}
+                        navigateTo={(key: number, type: "artist" | "song") => navigateTo(key, type, "SongHistory")}/>
                 )
             }
           </div>
@@ -141,6 +146,9 @@ function setMenuOpenData_SongHistory(key: number, n_co_ords: {xPos: number; yPos
               </div>
           )
       }
+
+      <PropertiesModal isOpen={state.isPropertiesModalOpen} song={state.songMenuToOpen!} closeModal={() => closePropertiesModal(dispatch)} />
+      <AddSongToPlaylistModal isOpen={state.isPlaylistModalOpen} songPath={state.songMenuToOpen ? state.songMenuToOpen.path : ""} closeModal={() => closePlaylistModal(dispatch)} />
     </div>
   )
 }