Merge pull request #10 from muzik-apps/app-player-redesign

App player redesign
muzik-apps · Jan 24, 2024 · 9626c66 · 9626c66
2 parents 94e0a48 + 8a48b87
commit 9626c66
Show file tree

Hide file tree

Showing 22 changed files with 852 additions and 70 deletions.
diff --git a/muzik-offline/src-tauri/Cargo.lock b/muzik-offline/src-tauri/Cargo.lock
diff --git a/muzik-offline/src-tauri/src/app/controller.rs b/muzik-offline/src-tauri/src/app/controller.rs
@@ -0,0 +1,40 @@
+use tauri::Runtime;
+use tauri::LogicalSize;
+
+#[tauri::command]
+pub fn toggle_miniplayer_view<R: Runtime>(window: tauri::Window<R>, open_mini_player: bool){
+    if open_mini_player == true{
+        if is_os_windows() == false{
+            let _ = window.set_decorations(false);
+        }
+        let _ = window.set_resizable(false);
+        let _ = window.set_size(LogicalSize::new(218.0, 376.0));
+    }
+    else{
+        if is_os_windows() == false{
+            let _ = window.set_decorations(true);
+        }
+        let _ = window.set_resizable(true);
+        let _ = window.set_size(LogicalSize::new(980.0, 623.0));
+        let _ = window.set_always_on_top(false);
+    }
+}
+
+#[tauri::command]
+pub fn toggle_app_pin<R: Runtime>(window: tauri::Window<R>, pin_app: bool){
+    if pin_app == true{
+        let _ = window.set_always_on_top(true);
+    }
+    else{
+        let _ = window.set_always_on_top(false);
+    }
+}
+
+fn is_os_windows() -> bool {
+    if cfg!(target_os = "windows") {
+        return true;
+    }
+    else{
+        return false;
+    }
+}
diff --git a/muzik-offline/src-tauri/src/app/mod.rs b/muzik-offline/src-tauri/src/app/mod.rs
@@ -0,0 +1 @@
+pub mod controller;
diff --git a/muzik-offline/src-tauri/src/main.rs b/muzik-offline/src-tauri/src/main.rs
@@ -1,6 +1,7 @@
 // Prevents additional console window on Windows in release, DO NOT REMOVE!!
 #![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
 
+mod app;
 mod commands;
 mod music;
 mod components;
@@ -14,6 +15,8 @@ use utils::music_list_organizer::MLO;
 use crate::socials::discord_rpc::DiscordRpc;
 use std::sync::Mutex;
 
+use crate::app::controller::{toggle_app_pin, toggle_miniplayer_view};
+
 use crate::commands::metadata_retriever::get_all_songs;
 
 use crate::commands::general_commands::{open_in_file_manager, resize_frontend_image_to_fixed_height};
@@ -42,6 +45,10 @@ fn main() {
         .manage(Mutex::new(MLO::new()))
         .manage(Mutex::new(DiscordRpc::new().expect("failed to initialize discord rpc")))
         .invoke_handler(tauri::generate_handler![
+                            //WINDOW CONTROL
+                            toggle_app_pin,
+                            toggle_miniplayer_view,
+
                             //GENERAL COMMANDS
                             get_all_songs, 
                             open_in_file_manager,

diff --git a/muzik-offline/src-tauri/tauri.conf.json b/muzik-offline/src-tauri/tauri.conf.json
@@ -18,6 +18,14 @@
       },
       "window": {
         "all": false,
+        "close": true,
+        "hide": true,
+        "show": true,
+        "maximize": true,
+        "minimize": true,
+        "unmaximize": true,
+        "unminimize": true,
+        "startDragging": true,
         "setFullscreen": true,
         "setResizable": true
       },
@@ -68,7 +76,7 @@
         "minWidth": 980,
         "minHeight": 623,
         "titleBarStyle": "Transparent",
-        "decorations": true,
+        "decorations": false,
         "center": true
       }
     ]

diff --git a/muzik-offline/src/assets/icons/General/ListIcon.tsx b/muzik-offline/src/assets/icons/General/ListIcon.tsx
@@ -0,0 +1,9 @@
+const ListIcon = () => {
+    return (
+        <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M9.2201 6H22.1001M9.2201 12.48H22.1001M9.2201 18.96H22.1001M4.1001 6V6.0128M4.1001 12.48V12.4928M4.1001 18.96V18.9728" stroke="#ECECEC" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+        </svg>
+    )
+}
+
+export default ListIcon
diff --git a/muzik-offline/src/assets/icons/index.ts b/muzik-offline/src/assets/icons/index.ts
@@ -48,6 +48,7 @@ import Edit from './General/Edit';
 import BarsAnimated from './Media/BarsAnimated';
 import Overlap from './Layout/Overlap';
 import Minimize from './Layout/Minimize';
+import ListIcon from './General/ListIcon';
 
 export {
     Next_page, Prev_page, Search, 
@@ -62,5 +63,6 @@ export {
     NullMusicCoverTwo, NullMusicCoverThree, NullMusicCoverFour, NullCoverNull,
     NullArtistCoverOne, NullArtistCoverTwo, NullArtistCoverThree, NullArtistCoverFour,
     CheckGreen, CrossRed, InformationCircleContainedOrange, InformationCircleContainedBlue,
-    EditImage, Edit, BarsAnimated, Overlap, Minimize
+    EditImage, Edit, BarsAnimated, Overlap, Minimize,
+    ListIcon, 
 }
diff --git a/muzik-offline/src/interface/App/App.tsx b/muzik-offline/src/interface/App/App.tsx
@@ -12,8 +12,10 @@ import { AnimatePresence } from "framer-motion";
 import { useWallpaperStore, useSavedObjectStore, useToastStore } from "store";
 import { SavedObject } from "@database/saved_object";
 import { isPermissionGranted, requestPermission } from '@tauri-apps/api/notification';
+import { MiniPlayer } from "@App/index";
 
 const App = () => {
+  const [openMiniPlayer, setOpenMiniPlayer] = useState<boolean>(false);
   const [openSettings, setOpenSettings] = useState<boolean>(false);
   const [FSplayerState, setFSplayerState] = useState<boolean>(false);
   const [FloatingHNState, setFloatingHNState] = useState<boolean>(false);
@@ -53,61 +55,73 @@ const App = () => {
     }
   }
 
+  async function ToggleMiniPlayer(){
+    let MPV = openMiniPlayer;
+    setOpenMiniPlayer(!openMiniPlayer);
+    await invoke("toggle_miniplayer_view", {openMiniPlayer: !MPV});
+  }
+
   useEffect(() => {
     checkOSType();
     checkAndRequestNotificationPermission();
     connect_to_discord();
   }, [])
 
   return (
-    <Router>
-      <div 
-        className={"app_container " + (local_store.OStype ===  OSTYPEenum.Linux || !local_store.AppThemeBlur ? " linux-config " : "")} 
-        data-theme={local_store.ThemeColour} 
-        wallpaper-opacity={local_store.WallpaperOpacityAmount}
-        onContextMenu={(e) => e.preventDefault()}>
-          <div className={"background_img " + (wallpaper && wallpaper.DisplayWallpaper ? "" : local_store.BGColour)}>
-            {wallpaper && wallpaper.DisplayWallpaper && (<img src={wallpaper.DisplayWallpaper} alt="wallpaper"/>)}
-          </div>
-          <div className={"app_darkness_layer " + (wallpaper && wallpaper.DisplayWallpaper ? "image_layer" : "color_layer")}>
-            {
-              local_store.OStype ===  OSTYPEenum.Windows ? 
-                <HeaderWindows toggleSettings={toggleSettings}/>
-                :
-                local_store.OStype ===  OSTYPEenum.macOS ? 
-                <HeaderMacOS toggleSettings={toggleSettings}/> 
-                :
-                <HeaderLinuxOS toggleSettings={toggleSettings}/>
+    <>
+    { !openMiniPlayer ?
+      <Router>
+        <div 
+          className={"app_container " + (local_store.OStype ===  OSTYPEenum.Linux || !local_store.AppThemeBlur ? " linux-config " : "")} 
+          data-theme={local_store.ThemeColour} 
+          wallpaper-opacity={local_store.WallpaperOpacityAmount}
+          onContextMenu={(e) => e.preventDefault()}>
+            <div className={"background_img " + (wallpaper && wallpaper.DisplayWallpaper ? "" : local_store.BGColour)}>
+              {wallpaper && wallpaper.DisplayWallpaper && (<img src={wallpaper.DisplayWallpaper} alt="wallpaper"/>)}
+            </div>
+            <div className={"app_darkness_layer " + (wallpaper && wallpaper.DisplayWallpaper ? "image_layer" : "color_layer")}>
+              {
+                local_store.OStype ===  OSTYPEenum.Windows ? 
+                  <HeaderWindows toggleSettings={toggleSettings}/>
+                  :
+                  local_store.OStype ===  OSTYPEenum.macOS ? 
+                  <HeaderMacOS toggleSettings={toggleSettings}/> 
+                  :
+                  <HeaderLinuxOS toggleSettings={toggleSettings}/>
               }
-            <div className="main_app_container">
-              <div className="left_sidebar">
-                <LeftSidebar />
-              </div>
-              <div className="center_activity">
-                    <AnimatePresence>
-                      <Routes>
-                            <Route path="/" element={<AllTracks/>}/>
-                            <Route path="/AllArtists" element={<AllArtists/>}/>
-                            <Route path="/AllAlbums" element={<AllAlbums/>}/>
-                            <Route path="/AllGenres" element={<AllGenres/>}/>
-                            <Route path="/AllPlaylists" element={<AllPlaylists/>}/>
-                            <Route path="/SearchPage" element={<SearchPage/>}/>
-                            <Route path="/AlbumDetails/:album_key/:artist_name" element={<AlbumDetails/>}/>
-                            <Route path="/ArtistCatalogue/:artist_name" element={<ArtistCatalogue/>}/>
-                            <Route path="/GenreView/:genre_key" element={<GenreView/>}/>
-                            <Route path="/PlaylistView/:playlist_key" element={<PlaylistView/>}/>
-                      </Routes>
-                    </AnimatePresence>
+              <div className="main_app_container">
+                <div className="left_sidebar">
+                  <LeftSidebar />
+                </div>
+                <div className="center_activity">
+                      <AnimatePresence>
+                        <Routes>
+                              <Route path="/" element={<AllTracks/>}/>
+                              <Route path="/AllArtists" element={<AllArtists/>}/>
+                              <Route path="/AllAlbums" element={<AllAlbums/>}/>
+                              <Route path="/AllGenres" element={<AllGenres/>}/>
+                              <Route path="/AllPlaylists" element={<AllPlaylists/>}/>
+                              <Route path="/SearchPage" element={<SearchPage/>}/>
+                              <Route path="/AlbumDetails/:album_key/:artist_name" element={<AlbumDetails/>}/>
+                              <Route path="/ArtistCatalogue/:artist_name" element={<ArtistCatalogue/>}/>
+                              <Route path="/GenreView/:genre_key" element={<GenreView/>}/>
+                              <Route path="/PlaylistView/:playlist_key" element={<PlaylistView/>}/>
+                        </Routes>
+                      </AnimatePresence>
+                </div>
               </div>
+                <AppMusicPlayer openPlayer={openPlayer} toggleFloatingHNState={toggleFloatingHNState} openMiniPlayer={ToggleMiniPlayer}/>
+                <Settings openSettings={openSettings} closeSettings={closeSetting}/>
+                <FSMusicPlayer openPlayer={FSplayerState} closePlayer={closePlayer}/>
+                <HistoryNextFloating FloatingHNState={FloatingHNState} toggleFloatingHNState={toggleFloatingHNState}/>
+                <NotifyBottomRight/>
             </div>
-              <AppMusicPlayer openPlayer={openPlayer} toggleFloatingHNState={toggleFloatingHNState}/>
-              <Settings openSettings={openSettings} closeSettings={closeSetting}/>
-              <FSMusicPlayer openPlayer={FSplayerState} closePlayer={closePlayer}/>
-              <HistoryNextFloating FloatingHNState={FloatingHNState} toggleFloatingHNState={toggleFloatingHNState}/>
-              <NotifyBottomRight/>
-          </div>
-      </div>
-    </Router>
+        </div>
+      </Router>
+      :
+      <MiniPlayer isOpen={openMiniPlayer} closeMiniPlayer={ToggleMiniPlayer}/>
+    }
+    </>
   );
 }