) => {if(e.target === e.currentTarget)props.closeModal(false)}}>
+
+ props.closeModal(true)}>
+
+ props.closeModal(false)}>
+
+
+
+ )
+}
+
+export default DeleteSongModal
\ No newline at end of file
diff --git a/muzik-offline/src/interface/components/modals/EqualizerModal.tsx b/muzik-offline/src/interface/components/modals/EqualizerModal.tsx
new file mode 100644
index 0000000..2b44cbb
--- /dev/null
+++ b/muzik-offline/src/interface/components/modals/EqualizerModal.tsx
@@ -0,0 +1,145 @@
+import EqualizerSlider from "@components/sliders/EqualizerSlider";
+import { modal_variants } from "@content/index";
+import { selectedGeneralSettingEnum, toastType, AudioLabPreset } from "@muziktypes/index";
+import { useToastStore, useSavedObjectStore, useSavedPresetsValues, FlatAudioLab } from "@store/index";
+import { motion } from "framer-motion";
+import { FunctionComponent, useState } from "react";
+import "@styles/components/modals/EqualizerModal.scss";
+import { ChevronDown } from "@assets/icons";
+import DropDownMenuLarge from "@components/input/DropDownMenuLarge";
+
+type EqualizerModalProps = {
+ isOpen: boolean;
+ closeModal: () => void;
+}
+
+const EqualizerModal: FunctionComponent
+
+
+
+
+ Are you sure you want to delete {props.title}?
+delete
+cancel
+) => {if(e.target === e.currentTarget)props.closeModal();}}>
+
+
+
+ )
+}
+
+export default EqualizerModal
\ No newline at end of file
diff --git a/muzik-offline/src/interface/components/music/AppMusicPlayer.tsx b/muzik-offline/src/interface/components/music/AppMusicPlayer.tsx
index 71b627b..1ed8ae8 100644
--- a/muzik-offline/src/interface/components/music/AppMusicPlayer.tsx
+++ b/muzik-offline/src/interface/components/music/AppMusicPlayer.tsx
@@ -8,6 +8,7 @@ import { invoke } from "@tauri-apps/api/core";
import { changeVolumeLevel, changeSeekerPosition, changeVolumeLevelBtnPress, dragSeeker, pauseSong, playSong, repeatToggle, shuffleToggle, setVolumeLevel, reconfigurePlayer_AtEndOfSong, playPreviousSong, playNextSong, changeSeekerPositionBtnPress } from "@utils/playerControl";
import { AirplayCastModal, MusicPopOver } from "@components/index";
import { OSTYPEenum } from "@muziktypes/index";
+import { RepeatingLevel } from "@database/player";
type AppMusicPlayerProps = {
openPlayer: () => void;
@@ -40,7 +41,7 @@ const AppMusicPlayer : FunctionComponentEqualizer(Ineffective with rodio)
+
+
+
+ :
+
+
+ }
+
+
+
+
+
+
+
+ setAudioLabPreset(e.target.value)}/>
+ {
+ map.has(AudioLabPreset) ?
+ {local_store.AudioLabPreset}
+
+
+ delete preset
+create a new preset
+
+
+
+ { ["12dB", "6dB", "0dB", "-6dB", "-12dB"].map((value) =>
+ {value}
) }
+
+
+
+ {resetPresetName(); setAudioLab({ ... AudioLab, SixtyTwoHz: value })}}/>
+ {resetPresetName(); setAudioLab({ ... AudioLab, OneTwentyFiveHz: value })}}/>
+ {resetPresetName(); setAudioLab({ ... AudioLab, TwoFiftyHz: value })}}/>
+ {resetPresetName(); setAudioLab({ ... AudioLab, FiveHundredHz: value })}}/>
+ {resetPresetName(); setAudioLab({ ... AudioLab, OnekHz: value })}}/>
+ {resetPresetName(); setAudioLab({ ... AudioLab, TwokHz: value })}}/>
+ {resetPresetName(); setAudioLab({ ... AudioLab, FourkHz: value })}}/>
+ {resetPresetName(); setAudioLab({ ... AudioLab, EightkHz: value })}}/>
+ {resetPresetName(); setAudioLab({ ... AudioLab, SixteenkHz: value })}}/>
+
+
- 0 ? " coloured" : "")}
+
- {Player.repeatingLevel === 2 ?
+ {Player.repeatingLevel === RepeatingLevel.REPEAT_ONE ?
= (props: FSMusicPlay
const [wasMaximized, setWasMaximized] = useState(false);
const [isDoneOpening, setIsDoneOpening] = useState(false);
+ const [isDoneClosing, setIsDoneClosing] = useState(false);
+ const { isMaximised } = useIsMaximisedStore((state) => { return { isMaximised: state.isMaximised}; });
const {local_store} = useSavedObjectStore((state) => { return { local_store: state.local_store}; });
const {Player} = usePlayerStore((state) => { return { Player: state.Player}; });
const { setappFS, appFS } = useIsFSStore((state) => { return { setappFS: state.setFS, appFS: state.isFS}; });
@@ -56,79 +58,88 @@ const FSMusicPlayer: FunctionComponent = (props: FSMusicPlay
useEffect(() => {
if(props.openPlayer === true){
+ setIsDoneClosing(false);
const delay = setTimeout(() => { setIsDoneOpening(true); }, local_store.Animations ? 1000 : 290);
return () => clearTimeout(delay);
+ } else if(props.openPlayer === false){
+ setIsDoneOpening(false);
+ const delay = setTimeout(() => { setIsDoneClosing(true); }, local_store.Animations ? 1000 : 290);
+ return () => clearTimeout(delay);
}
- else setIsDoneOpening(false);
}, [props.openPlayer])
return (
-
-
-
-
- {props.openPlayer && isDoneOpening &&
-
- {!Player.playingSongMetadata && ![song-art]({getCoverURL("NULL_COVER_NULL")})
}
- {/**no song is loaded onto the player */}
- {Player.playingSongMetadata && Player.playingSongMetadata.cover_uuid && (})
)}
- {/**there is cover art */}
- {Player.playingSongMetadata && !Player.playingSongMetadata.cover_uuid && 
}
- {/**the cover art is null */}
- }
-
-
- {local_store.OStype === OSTYPEenum.Windows && appFS === false ?
- {
+ if(appFS === true)switchtoNONFS();
+ props.closePlayer();
+ }}/>
+
+
+
+ }
+
+
+
+
+
+ {
- if(appFS === true)switchtoNONFS();
- props.closePlayer();
- }}/>
-
-
-
- }
+ }
+ {props.openPlayer && isDoneOpening &&
+
+
-
-
+ {props.openPlayer && isDoneOpening &&
+
+ {!Player.playingSongMetadata && }
+ {/**no song is loaded onto the player */}
+ {Player.playingSongMetadata && Player.playingSongMetadata.cover_uuid && ()}
+ {/**there is cover art */}
+ {Player.playingSongMetadata && !Player.playingSongMetadata.cover_uuid && }
+ {/**the cover art is null */}
+ }
+
+
+ {local_store.OStype === OSTYPEenum.Windows && appFS === false ?
+
- :
-
+
+ :
+ { appFS === false &&
+ (
+ )
+ }
+
+ <>
+
+ close
+fullscreen
+
{ appFS === false &&
- (
+ (
)
}
-
- <>
+ { appFS === false ? (<>
- close
fullscreen
+fullscreen
) : (<>minimize
) }
- { appFS === false &&
- (
- )
- }
-
- { appFS === false ? (<>
-
- }
- {props.openPlayer && isDoneOpening &&
- close
-fullscreen
) : (<>minimize
) } -
- Loading...
}>
-
- Loading...
}>
-
+ Loading...
}>
+
+ Loading...
}>
+ {Player.playingSongMetadata ? Player.playingSongMetadata.artist : "No song is playing"}
- 0 ? " coloured" : "")}
+ RepeatingLevel.NO_REPEAT ? " coloured" : "")}
whileTap={{scale: 0.98}} onClick={repeatToggle}>
- {Player.repeatingLevel === 2 ?
+ {Player.repeatingLevel === RepeatingLevel.REPEAT_ONE ?
= (props: EqualizerSliderProps) => {
+ const [current_val, setValue] = useState(props.value);
+
+ useEffect(() => {setValue(props.value)}, [props.value])
+
+ return (
+
+
+ )
+}
+
+export default EqualizerSlider
\ No newline at end of file
diff --git a/muzik-offline/src/interface/layouts/AboutSettings.tsx b/muzik-offline/src/interface/layouts/AboutSettings.tsx
index 31bd0d9..aa44b74 100644
--- a/muzik-offline/src/interface/layouts/AboutSettings.tsx
+++ b/muzik-offline/src/interface/layouts/AboutSettings.tsx
@@ -11,7 +11,7 @@ const AboutSettings = () => {
+ setValue(Number.parseInt(e.target.value))}
+ onMouseUp={() => props.updateValue(current_val)}
+ style={{backgroundSize: current_val.toString() + "% 100%"}}/>
+
+ {props.frequency}
+Copyright 2024 muzik-apps. All rights reserved.
-Version "0.6.2"
+Version "0.7.0"
open("https://github.com/muzik-apps/muzik-offline")}>
muzik-offline
diff --git a/muzik-offline/src/interface/layouts/AudioLabSettings.tsx b/muzik-offline/src/interface/layouts/AudioLabSettings.tsx
new file mode 100644
index 0000000..f1bd418
--- /dev/null
+++ b/muzik-offline/src/interface/layouts/AudioLabSettings.tsx
@@ -0,0 +1,211 @@
+import { ChevronDown } from "@assets/icons";
+import { DropDownMenuLarge } from "@components/index";
+import { SavedObject } from "@database/saved_object";
+import { selectedGeneralSettingEnum } from "@muziktypes/index";
+import { useSavedObjectStore } from "@store/index";
+import "@styles/layouts/AudioLabSettings.scss";
+import { invoke } from "@tauri-apps/api/core";
+import { stopSong } from "@utils/playerControl";
+import { motion } from "framer-motion";
+import { FunctionComponent, useEffect, useState } from "react";4
+
+const settings_data: {
+ key: number;
+ title: string;
+ dropDownName: selectedGeneralSettingEnum;
+ options: string[]
+}[] = [
+ /*{
+ key: 1,
+ title: "Audio quality of music",
+ dropDownName: selectedGeneralSettingEnum.AudioQuality,
+ options: ["Lossless(24b/192kHz)", "Lossless(24b/48kHz)", "High(320kbps)", "Medium(192kbps)", "Low(128kbps)"]
+ },*/
+ {
+ key: 2,
+ title: "Playback speed of music",
+ dropDownName: selectedGeneralSettingEnum.PlayBackSpeed,
+ options: ["0.25", "0.5", "0.75", "1", "1.25", "1.5", "1.75", "2"]
+ },
+ {
+ key: 3,
+ title: "Seamless, fade-in/out audio transitions(will only apply on next song)",
+ dropDownName: selectedGeneralSettingEnum.AudioTransition,
+ options: ["Yes", "No"]
+ }
+]
+
+type AudioLabSettingsProps = {
+ openEqualiser: () => void;
+}
+
+const AudioLabSettings: FunctionComponent = (_props: AudioLabSettingsProps) => {
+ const [selectedGeneralSetting, setselectedGeneralSetting] = useState(selectedGeneralSettingEnum.Nothing);
+ const {local_store, setStore} = useSavedObjectStore((state) => { return { local_store: state.local_store, setStore: state.setStore}; });
+ const [currentOutputDevice, setOutputDevice] = useState("default");
+ const [outputDevices, setOutputDevices] = useState([]);
+ const [audioBackend, setAudioBackend] = useState<"rodio" | "kira">(local_store.player);
+
+ function toggleDropDown(arg: selectedGeneralSettingEnum){
+ if(arg === selectedGeneralSetting)setselectedGeneralSetting(selectedGeneralSettingEnum.Nothing);
+ else setselectedGeneralSetting(arg);
+ }
+
+ async function setStoreValue(arg: string, type: string){
+ let temp: SavedObject = local_store;
+ temp[type as keyof SavedObject] = arg as never;
+ setStore(temp);
+ setselectedGeneralSetting(selectedGeneralSettingEnum.Nothing);
+ if (type === selectedGeneralSettingEnum.PlayBackSpeed){
+ await invoke("set_playback_speed", {player: local_store.player, speed: parseFloat(arg)});
+ }
+ if (type === selectedGeneralSettingEnum.OutputDevice){
+ await invoke("set_output_device", {deviceName: arg});
+ setOutputDevice(arg);
+ }
+ }
+
+ function changeAudioBackend(arg: "rodio" | "kira"){
+ if(arg === local_store.player)return;
+ setAudioBackend(arg);
+ stopSong().then(() => {
+ let temp: SavedObject = local_store;
+ temp.player = arg;
+ setStore(temp);
+ }).catch((err) => {
+ console.error(err);
+ setAudioBackend(local_store.player);
+ });
+ }
+
+ useEffect(() => {
+ const setup = () => {
+ if (local_store.OutputDevice === "") {
+ invoke("get_default_output_device").then((res) => {
+ setOutputDevice(res);
+ });
+ } else {
+ setOutputDevice(local_store.OutputDevice);
+ }
+
+ invoke("get_output_devices").then((res) => {
+ setOutputDevices(res);
+ });
+ }
+
+ setup();
+ }, []);
+
+ return (
+
+ Audio Lab Settings
+
+ Select your audio backend
+ changeAudioBackend("rodio")}>
+
+ 
+
+ Rodio
+
+
+
+ - More stable and faster
+ - More developed specifically for audio playback
+ - Supports output device switching
+
+
+
+
+ - - No equaliser support
+ - - No audio effects
+
+
+
+
+ changeAudioBackend("kira")}>
+
+ 
+
+ Kira
+
+
+
+ - More developed specifically for game audio playback
+ - Supports 3D spatial audio(coming soon)
+ - Supports sound effects and equaliser(coming soon)
+
+
+
+
+ - - Can be slow and unstable for large files
+ - - No support for switching output device in app
+
+
+
+
+ {
+ settings_data.map((value) =>
+
+ {value.title}
+
+ toggleDropDown(value.dropDownName)}>
+ {local_store[(value.dropDownName.toString() as keyof SavedObject)]}
+
+
+
+
+ Output device
+
+ { local_store.player === "rodio" ?
+ toggleDropDown(selectedGeneralSettingEnum.OutputDevice)}>
+ {currentOutputDevice}
+
+
+
+ :
+
+ default
+
+ Equaliser
+
+
+ Open equaliser
+
+
+ */}
+
+
+ )
+}
+
+export default AudioLabSettings
\ No newline at end of file
diff --git a/muzik-offline/src/interface/layouts/GeneralSettings.tsx b/muzik-offline/src/interface/layouts/GeneralSettings.tsx
index bd37ada..e7465e7 100644
--- a/muzik-offline/src/interface/layouts/GeneralSettings.tsx
+++ b/muzik-offline/src/interface/layouts/GeneralSettings.tsx
@@ -40,7 +40,6 @@ const settings_data: {
}
]
-
const GeneralSettings = () => {
const [selectedGeneralSetting, setselectedGeneralSetting] = useState(selectedGeneralSettingEnum.Nothing);
const {local_store, setStore} = useSavedObjectStore((state) => { return { local_store: state.local_store, setStore: state.setStore}; });
@@ -101,7 +100,7 @@ const GeneralSettings = () => {
{
settings_data.map((value) =>
value.dropDownName !== selectedGeneralSettingEnum.AlwaysRoundedCornersWindows ||
- (value.dropDownName === selectedGeneralSettingEnum.AlwaysRoundedCornersWindows && local_store.OStype === OSTYPEenum.Windows) ?
+ (value.dropDownName === selectedGeneralSettingEnum.AlwaysRoundedCornersWindows && (local_store.OStype === OSTYPEenum.Windows || local_store.OStype === OSTYPEenum.Linux)) ?
{value.title}
@@ -143,4 +142,4 @@ const GeneralSettings = () => {
)
}
-export default GeneralSettings
\ No newline at end of file
+export default GeneralSettings
diff --git a/muzik-offline/src/interface/layouts/SearchSongs.tsx b/muzik-offline/src/interface/layouts/SearchSongs.tsx
index 7a4ed04..f272e20 100644
--- a/muzik-offline/src/interface/layouts/SearchSongs.tsx
+++ b/muzik-offline/src/interface/layouts/SearchSongs.tsx
@@ -1,4 +1,4 @@
-import { RectangleSongBox, GeneralContextMenu, AddSongToPlaylistModal, PropertiesModal, EditPropertiesModal } from "@components/index";
+import { RectangleSongBox, GeneralContextMenu, AddSongToPlaylistModal, PropertiesModal, EditPropertiesModal, DeleteSongModal } from "@components/index";
import { contextMenuEnum, contextMenuButtons } from "@muziktypes/index";
import { useRef, useEffect, useReducer } from "react";
import "@styles/layouts/SearchSongs.scss";
@@ -8,7 +8,7 @@ import { reducerType, useSearchStore } from "@store/index";
import { useNavigate } from "react-router-dom";
import { SearchSongsState, searchSongsReducer } from "@store/reducerStore";
import { addThisSongToPlayLater, addThisSongToPlayNext, playThisListNow, startPlayingNewSong } from "@utils/playerControl";
-import { closeContextMenu, closeEditPropertiesModal, closePlaylistModal, closePropertiesModal, processArrowKeysInput, selectThisSong, setSongList } from "@utils/reducerUtils";
+import { closeContextMenu, closeDeleteSongModal, closeEditPropertiesModal, closePlaylistModal, closePropertiesModal, processArrowKeysInput, selectThisSong, setSongList } from "@utils/reducerUtils";
import Skeleton, { SkeletonTheme } from "react-loading-skeleton";
import 'react-loading-skeleton/dist/skeleton.css';
@@ -29,6 +29,7 @@ const SearchSongs = () => {
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.EditSong){ dispatch({ type: reducerType.SET_EDIT_SONG_MODAL, payload: true}); }
+ else if(arg === contextMenuButtons.Delete){ dispatch({ type: reducerType.SET_DELETE_MODAL, payload: true}); }
else if(arg === contextMenuButtons.PlayNext && state.songMenuToOpen){
addThisSongToPlayNext([state.songMenuToOpen.id]);
closeContextMenu(dispatch);
@@ -75,7 +76,7 @@ const SearchSongs = () => {
else if(ev.target.id !== "gsearch" && state.selected >= 1 && state.selected <= state.SongList.length){
dispatch({type: reducerType.SET_SONG_MENU, payload: state.SongList[state.selected - 1]});
if(((ev.ctrlKey || ev.metaKey) && (ev.key === "p" || ev.key === "P" )) || ev.key === "Enter")chooseOption(contextMenuButtons.Play);
- else if((ev.ctrlKey || ev.metaKey) && (ev.key === "i" || ev.key === "I"))chooseOption(contextMenuButtons.ShowInfo);
+ else if((ev.ctrlKey || ev.metaKey) && !ev.shiftKey && (ev.key === "i" || ev.key === "I"))chooseOption(contextMenuButtons.ShowInfo);
else if((ev.ctrlKey || ev.metaKey) && ev.shiftKey && (ev.key === "a" || ev.key === "A"))chooseOption(contextMenuButtons.AddToPlaylist);
else if((ev.ctrlKey || ev.metaKey) && ev.shiftKey && (ev.key === "n" || ev.key === "N"))chooseOption(contextMenuButtons.PlayNext);
else if((ev.ctrlKey || ev.metaKey) && ev.shiftKey && (ev.key === "l" || ev.key === "L"))chooseOption(contextMenuButtons.PlayLater);
@@ -155,6 +156,7 @@ const SearchSongs = () => {
closePropertiesModal(dispatch)} />
closeEditPropertiesModal(dispatch)} />
closePlaylistModal(dispatch)} />
+ closeDeleteSongModal(dispatch, state.songMenuToOpen, deleteSong)} />
)
}
diff --git a/muzik-offline/src/interface/layouts/index.ts b/muzik-offline/src/interface/layouts/index.ts
index c6aa351..ecdfb83 100644
--- a/muzik-offline/src/interface/layouts/index.ts
+++ b/muzik-offline/src/interface/layouts/index.ts
@@ -9,6 +9,7 @@ import SearchPlaylists from './SearchPlaylists';
import AdvancedSettings from './AdvancedSettings';
import SecuritySettings from './SecuritySettings';
import AboutSettings from './AboutSettings';
+import AudioLabSettings from './AudioLabSettings';
import MusicFoldersSettings from './MusicFoldersSettings';
import ExportSettings from './ExportSettings';
@@ -16,5 +17,5 @@ export {
GeneralSettings, AppearanceSettings, HistoryNextFloating,
SearchSongs, SearchArtists, SearchAlbums, SearchGenres,
SearchPlaylists, AdvancedSettings, SecuritySettings, AboutSettings,
- MusicFoldersSettings, ExportSettings
+ AudioLabSettings, MusicFoldersSettings, ExportSettings
}
\ No newline at end of file
diff --git a/muzik-offline/src/interface/pages/AlbumDetails.tsx b/muzik-offline/src/interface/pages/AlbumDetails.tsx
index 75a1dfe..c7bc07f 100644
--- a/muzik-offline/src/interface/pages/AlbumDetails.tsx
+++ b/muzik-offline/src/interface/pages/AlbumDetails.tsx
@@ -1,5 +1,5 @@
import { useEffect, useReducer, useRef } from "react";
-import { AddSongToPlaylistModal, EditPropertiesModal, GeneralContextMenu, LargeResizableCover, LoaderAnimated, PropertiesModal, RectangleSongBox } from "@components/index";
+import { AddSongToPlaylistModal, DeleteSongModal, EditPropertiesModal, GeneralContextMenu, LargeResizableCover, LoaderAnimated, PropertiesModal, RectangleSongBox } from "@components/index";
import "@styles/pages/AlbumDetails.scss";
import { motion } from "framer-motion";
import { Play, Shuffle } from "@assets/icons";
@@ -10,7 +10,7 @@ import { getAlbumSongs, getCoverURL, getRandomCover, secondsToTimeFormat } from
import { ViewportList } from "react-viewport-list";
import { albumDetailsReducer, AlbumDetailsState } from "@store/reducerStore";
import { startPlayingNewSong, playThisListNow, addThisSongToPlayLater, addThisSongToPlayNext } from "@utils/playerControl";
-import { closeContextMenu, closeEditPropertiesModal, closePlaylistModal, closePropertiesModal, processArrowKeysInput, selectThisSong, setSongList } from "@utils/reducerUtils";
+import { closeContextMenu, closeDeleteSongModal, closeEditPropertiesModal, closePlaylistModal, closePropertiesModal, processArrowKeysInput, selectThisSong, setSongList } from "@utils/reducerUtils";
import { variants_list } from "@content/index";
import { reducerType } from "@store/index";
@@ -31,6 +31,7 @@ const AlbumDetails = () => {
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.EditSong){ dispatch({ type: reducerType.SET_EDIT_SONG_MODAL, payload: true}); }
+ else if(arg === contextMenuButtons.Delete){ dispatch({ type: reducerType.SET_DELETE_MODAL, payload: true}); }
else if(arg === contextMenuButtons.PlayNext && state.songMenuToOpen){
addThisSongToPlayNext([state.songMenuToOpen.id]);
closeContextMenu(dispatch);
@@ -96,7 +97,7 @@ const AlbumDetails = () => {
else if(ev.target.id !== "gsearch" && state.selected >= 1 && state.selected <= state.SongList.length){
dispatch({type: reducerType.SET_SONG_MENU, payload: state.SongList[state.selected - 1]});
if(((ev.ctrlKey || ev.metaKey) && (ev.key === "p" || ev.key === "P" )) || ev.key === "Enter")chooseOption(contextMenuButtons.Play);
- else if((ev.ctrlKey || ev.metaKey) && (ev.key === "i" || ev.key === "I"))chooseOption(contextMenuButtons.ShowInfo);
+ else if((ev.ctrlKey || ev.metaKey) && !ev.shiftKey && (ev.key === "i" || ev.key === "I"))chooseOption(contextMenuButtons.ShowInfo);
else if((ev.ctrlKey || ev.metaKey) && ev.shiftKey && (ev.key === "a" || ev.key === "A"))chooseOption(contextMenuButtons.AddToPlaylist);
else if((ev.ctrlKey || ev.metaKey) && ev.shiftKey && (ev.key === "n" || ev.key === "N"))chooseOption(contextMenuButtons.PlayNext);
else if((ev.ctrlKey || ev.metaKey) && ev.shiftKey && (ev.key === "l" || ev.key === "L"))chooseOption(contextMenuButtons.PlayLater);
@@ -194,6 +195,7 @@ const AlbumDetails = () => {
closePropertiesModal(dispatch)} />
closeEditPropertiesModal(dispatch)} />
closePlaylistModal(dispatch)} />
+ closeDeleteSongModal(dispatch, state.songMenuToOpen, deleteSong)} />
)
}
diff --git a/muzik-offline/src/interface/pages/AllTracks.tsx b/muzik-offline/src/interface/pages/AllTracks.tsx
index 664c5b6..818f2d5 100644
--- a/muzik-offline/src/interface/pages/AllTracks.tsx
+++ b/muzik-offline/src/interface/pages/AllTracks.tsx
@@ -2,14 +2,14 @@ import { contextMenuButtons, contextMenuEnum } from "@muziktypes/index";
import { motion } from "framer-motion";
import { useRef, useEffect, useReducer } from "react";
import { ChevronDown, FolderPlus, Shuffle } from "@assets/icons";
-import { AddSongToPlaylistModal, DropDownMenuSmall, EditPropertiesModal, GeneralContextMenu, PropertiesModal, RectangleSongBox } from "@components/index";
+import { AddSongToPlaylistModal, DeleteSongModal, DropDownMenuSmall, EditPropertiesModal, GeneralContextMenu, PropertiesModal, RectangleSongBox } from "@components/index";
import { ViewportList } from 'react-viewport-list';
import { local_albums_db, local_songs_db } from "@database/database";
import { useNavigate } from "react-router-dom";
import { AllTracksState, alltracksReducer, reducerType } from "store";
import { addThisSongToPlayLater, addThisSongToPlayNext, playThisListNow, startPlayingNewSong } from "utils/playerControl";
import "@styles/pages/AllTracks.scss";
-import { closeContextMenu, closeEditPropertiesModal, closePlaylistModal, closePropertiesModal, openFileDialogDND, processArrowKeysInput, processDragEvents, selectSortOption, selectThisSong, setOpenedDDM, setSongList } from "utils/reducerUtils";
+import { closeContextMenu, closeDeleteSongModal, closeEditPropertiesModal, closePlaylistModal, closePropertiesModal, openFileDialogDND, processArrowKeysInput, processDragEvents, selectSortOption, selectThisSong, setOpenedDDM, setSongList } from "utils/reducerUtils";
import Skeleton, { SkeletonTheme } from "react-loading-skeleton";
import 'react-loading-skeleton/dist/skeleton.css';
@@ -29,6 +29,7 @@ const AllTracks = () => {
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.EditSong){ dispatch({ type: reducerType.SET_EDIT_SONG_MODAL, payload: true}); }
+ else if(arg === contextMenuButtons.Delete){ dispatch({ type: reducerType.SET_DELETE_MODAL, payload: true}); }
else if(arg === contextMenuButtons.PlayNext && state.songMenuToOpen){
addThisSongToPlayNext([state.songMenuToOpen.id]);
closeContextMenu(dispatch);
@@ -82,7 +83,7 @@ const AllTracks = () => {
else if(ev.target.id !== "gsearch" && state.selected >= 1 && state.selected <= state.SongList.length){
dispatch({type: reducerType.SET_SONG_MENU, payload: state.SongList[state.selected - 1]});
if(((ev.ctrlKey || ev.metaKey) && (ev.key === "p" || ev.key === "P" )) || ev.key === "Enter")chooseOption(contextMenuButtons.Play);
- else if((ev.ctrlKey || ev.metaKey) && (ev.key === "i" || ev.key === "I"))chooseOption(contextMenuButtons.ShowInfo);
+ else if((ev.ctrlKey || ev.metaKey) && !ev.shiftKey && (ev.key === "i" || ev.key === "I"))chooseOption(contextMenuButtons.ShowInfo);
else if((ev.ctrlKey || ev.metaKey) && ev.shiftKey && (ev.key === "a" || ev.key === "A"))chooseOption(contextMenuButtons.AddToPlaylist);
else if((ev.ctrlKey || ev.metaKey) && ev.shiftKey && (ev.key === "n" || ev.key === "N"))chooseOption(contextMenuButtons.PlayNext);
else if((ev.ctrlKey || ev.metaKey) && ev.shiftKey && (ev.key === "l" || ev.key === "L"))chooseOption(contextMenuButtons.PlayLater);
@@ -204,6 +205,7 @@ const AllTracks = () => {
closePropertiesModal(dispatch)} />
closeEditPropertiesModal(dispatch)} />
closePlaylistModal(dispatch)} />
+ closeDeleteSongModal(dispatch, state.songMenuToOpen, deleteSong)} />
)
}
diff --git a/muzik-offline/src/interface/pages/GenreView.tsx b/muzik-offline/src/interface/pages/GenreView.tsx
index 037e93b..272122b 100644
--- a/muzik-offline/src/interface/pages/GenreView.tsx
+++ b/muzik-offline/src/interface/pages/GenreView.tsx
@@ -3,7 +3,7 @@ import { useEffect, useReducer, useRef } from "react";
import { useNavigate, useParams } from "react-router-dom";
import { getGenreSongs, secondsToTimeFormat } from "utils";
import { motion } from "framer-motion";
-import { AddSongToPlaylistModal, EditPropertiesModal, GeneralContextMenu, LargeResizableCover, PropertiesModal, RectangleSongBox } from "@components/index";
+import { AddSongToPlaylistModal, DeleteSongModal, EditPropertiesModal, GeneralContextMenu, LargeResizableCover, PropertiesModal, RectangleSongBox } from "@components/index";
import { Play, Shuffle } from "@assets/icons";
import { local_albums_db, local_genres_db } from "@database/database";
import "@styles/pages/GenreView.scss";
@@ -11,7 +11,7 @@ import { ViewportList } from "react-viewport-list";
import { GenreViewState, genreViewReducer } from "store/reducerStore";
import { variants_list } from "@content/index";
import { reducerType } from "store";
-import { closeContextMenu, closeEditPropertiesModal, closePlaylistModal, closePropertiesModal, processArrowKeysInput, selectThisSong, setSongList } from "utils/reducerUtils";
+import { closeContextMenu, closeDeleteSongModal, closeEditPropertiesModal, closePlaylistModal, closePropertiesModal, processArrowKeysInput, selectThisSong, setSongList } from "utils/reducerUtils";
import { addThisSongToPlayLater, addThisSongToPlayNext, playThisListNow, startPlayingNewSong } from "utils/playerControl";
const GenreView = () => {
@@ -31,6 +31,7 @@ const GenreView = () => {
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.EditSong){ dispatch({ type: reducerType.SET_EDIT_SONG_MODAL, payload: true}); }
+ else if(arg === contextMenuButtons.Delete){ dispatch({ type: reducerType.SET_DELETE_MODAL, payload: true}); }
else if(arg === contextMenuButtons.PlayNext && state.songMenuToOpen){
addThisSongToPlayNext([state.songMenuToOpen.id]);
closeContextMenu(dispatch);
@@ -101,7 +102,7 @@ const GenreView = () => {
else if(ev.target.id !== "gsearch" && state.selected >= 1 && state.selected <= state.SongList.length){
dispatch({type: reducerType.SET_SONG_MENU, payload: state.SongList[state.selected - 1]});
if(((ev.ctrlKey || ev.metaKey) && (ev.key === "p" || ev.key === "P" )) || ev.key === "Enter")chooseOption(contextMenuButtons.Play);
- else if((ev.ctrlKey || ev.metaKey) && (ev.key === "i" || ev.key === "I"))chooseOption(contextMenuButtons.ShowInfo);
+ else if((ev.ctrlKey || ev.metaKey) && !ev.shiftKey && (ev.key === "i" || ev.key === "I"))chooseOption(contextMenuButtons.ShowInfo);
else if((ev.ctrlKey || ev.metaKey) && ev.shiftKey && (ev.key === "a" || ev.key === "A"))chooseOption(contextMenuButtons.AddToPlaylist);
else if((ev.ctrlKey || ev.metaKey) && ev.shiftKey && (ev.key === "n" || ev.key === "N"))chooseOption(contextMenuButtons.PlayNext);
else if((ev.ctrlKey || ev.metaKey) && ev.shiftKey && (ev.key === "l" || ev.key === "L"))chooseOption(contextMenuButtons.PlayLater);
@@ -190,6 +191,7 @@ const GenreView = () => {
closePropertiesModal(dispatch)} />
closeEditPropertiesModal(dispatch)} />
closePlaylistModal(dispatch)} />
+ closeDeleteSongModal(dispatch, state.songMenuToOpen, deleteSong)} />
)
}
diff --git a/muzik-offline/src/interface/pages/PlaylistView.tsx b/muzik-offline/src/interface/pages/PlaylistView.tsx
index b5734cb..a131544 100644
--- a/muzik-offline/src/interface/pages/PlaylistView.tsx
+++ b/muzik-offline/src/interface/pages/PlaylistView.tsx
@@ -114,7 +114,7 @@ const PlaylistView = () => {
else if(ev.target.id !== "gsearch" && state.selected >= 1 && state.selected <= state.SongList.length){
dispatch({type: reducerType.SET_SONG_MENU, payload: state.SongList[state.selected - 1]});
if(((ev.ctrlKey || ev.metaKey) && (ev.key === "p" || ev.key === "P" )) || ev.key === "Enter")chooseOption(contextMenuButtons.Play);
- else if((ev.ctrlKey || ev.metaKey) && (ev.key === "i" || ev.key === "I"))chooseOption(contextMenuButtons.ShowInfo);
+ else if((ev.ctrlKey || ev.metaKey) && !ev.shiftKey && (ev.key === "i" || ev.key === "I"))chooseOption(contextMenuButtons.ShowInfo);
else if((ev.ctrlKey || ev.metaKey) && ev.shiftKey && (ev.key === "a" || ev.key === "A"))chooseOption(contextMenuButtons.AddToPlaylist);
else if((ev.ctrlKey || ev.metaKey) && ev.shiftKey && (ev.key === "n" || ev.key === "N"))chooseOption(contextMenuButtons.PlayNext);
else if((ev.ctrlKey || ev.metaKey) && ev.shiftKey && (ev.key === "l" || ev.key === "L"))chooseOption(contextMenuButtons.PlayLater);
diff --git a/muzik-offline/src/interface/pages/Settings.tsx b/muzik-offline/src/interface/pages/Settings.tsx
index 89605b5..aa2d0cb 100644
--- a/muzik-offline/src/interface/pages/Settings.tsx
+++ b/muzik-offline/src/interface/pages/Settings.tsx
@@ -1,10 +1,10 @@
import { motion } from 'framer-motion';
import { FunctionComponent, useState, useEffect } from 'react';
import "@styles/pages/Settings.scss";
-import { ChevronDown, ComponentIcon, InformationCircleContained, Layout, SettingsIcon, FolderSearch, File } from "@icons/index";
-import { DeleteDiretoryModal, ExportModal, SettingsNavigator, WallpapersSelectionModal } from '@components/index';
+import { ChevronDown, ComponentIcon, InformationCircleContained, Layout, SettingsIcon, WaveForm, FolderSearch, File } from "@icons/index";
+import { DeleteDiretoryModal, EqualizerModal, ExportModal, SettingsNavigator, WallpapersSelectionModal } from '@components/index';
import { selectedSettingENUM } from 'types';
-import { AppearanceSettings, GeneralSettings, AdvancedSettings, AboutSettings, MusicFoldersSettings, ExportSettings } from '@layouts/index';
+import { AppearanceSettings, GeneralSettings, AdvancedSettings, AboutSettings, AudioLabSettings, MusicFoldersSettings, ExportSettings } from '@layouts/index';
import { useSavedObjectStore } from 'store';
type SettingsProps = {
@@ -23,11 +23,13 @@ const Settings: FunctionComponent = (props: SettingsProps) => {
const {local_store,} = useSavedObjectStore((state) => { return { local_store: state.local_store}; });
const [currentPath, setCurrentPath] = useState(null);
const [wallpapersModal, setWallpapersModal] = useState(false);
+ const [equaliserModal, setEqualiserModal] = useState(false);
const [uuids, setUuids] = useState(null);
function convertToEnum(arg: string){
if(arg === selectedSettingENUM.General)return selectedSettingENUM.General;
else if(arg === selectedSettingENUM.Appearance)return selectedSettingENUM.Appearance;
+ else if(arg === selectedSettingENUM.AudioLab)return selectedSettingENUM.AudioLab;
else if(arg === selectedSettingENUM.MusicFolders)return selectedSettingENUM.MusicFolders;
else if(arg === selectedSettingENUM.Security)return selectedSettingENUM.Security;
else if(arg === selectedSettingENUM.ExportSongs)return selectedSettingENUM.ExportSongs;
@@ -58,6 +60,7 @@ const Settings: FunctionComponent = (props: SettingsProps) => {
+
{/**/}
@@ -72,6 +75,8 @@ const Settings: FunctionComponent = (props: SettingsProps) => {
return setWallpapersModal(true)}/>
+ case selectedSettingENUM.AudioLab:
+ return setEqualiserModal(true)}/>
case selectedSettingENUM.MusicFolders:
return
//case selectedSettingENUM.Security:
@@ -92,6 +97,7 @@ const Settings: FunctionComponent = (props: SettingsProps) => {
setCurrentPath(null)}/>
setWallpapersModal(false)}/>
setUuids(null)}/>
+ setEqualiserModal(false)}/>
)
}
diff --git a/muzik-offline/src/interface/styles/App/App.scss b/muzik-offline/src/interface/styles/App/App.scss
index 8dbf635..3c4363a 100644
--- a/muzik-offline/src/interface/styles/App/App.scss
+++ b/muzik-offline/src/interface/styles/App/App.scss
@@ -92,6 +92,6 @@ body {
.windows-app-config{
border: 1.5px solid $songs-container-border-col;
border-radius: 8px;
- border-right: 2px solid $songs-container-border-col;
- border-bottom: 2px solid $songs-container-border-col;
+ border-right: 1.8px solid $songs-container-border-col;
+ border-bottom: 1.8px solid $songs-container-border-col;
}
\ No newline at end of file
diff --git a/muzik-offline/src/interface/styles/components/input/DropDownMenuLarge.scss b/muzik-offline/src/interface/styles/components/input/DropDownMenuLarge.scss
index dbfa744..a86de09 100644
--- a/muzik-offline/src/interface/styles/components/input/DropDownMenuLarge.scss
+++ b/muzik-offline/src/interface/styles/components/input/DropDownMenuLarge.scss
@@ -5,17 +5,19 @@
border-radius: 10px;
background: $app-theme-col;
padding: 5px;
- z-index: $z-index-8000;
+ padding-top: 0px;
+ padding-bottom: 0px;
height: 0px;
opacity: 0;
+ border: 2px solid $songs-container-border-col;
+ box-shadow: $box-shadow-10-10-25;
div{
+ margin-top: -5px;
+ margin-bottom: -5px;
h4{
font-size: 13px;
- height: 13px;
- margin-top: 9px;
- margin-bottom: 9px;
- width: 100%;
+ width: calc(100% - 5px);
color: $root-app-navigator-hover-col;
}
}
diff --git a/muzik-offline/src/interface/styles/components/input/DropDownMenuSmall.scss b/muzik-offline/src/interface/styles/components/input/DropDownMenuSmall.scss
index 5da0587..53124b3 100644
--- a/muzik-offline/src/interface/styles/components/input/DropDownMenuSmall.scss
+++ b/muzik-offline/src/interface/styles/components/input/DropDownMenuSmall.scss
@@ -8,6 +8,8 @@
z-index: $z-index-8000;
height: 0px;
opacity: 0;
+ border: 1px solid $songs-container-border-col;
+ box-shadow: $box-shadow-10-10-25;
div{
h4{
diff --git a/muzik-offline/src/interface/styles/components/modals/EqualizerModal.scss b/muzik-offline/src/interface/styles/components/modals/EqualizerModal.scss
new file mode 100644
index 0000000..40abe7b
--- /dev/null
+++ b/muzik-offline/src/interface/styles/components/modals/EqualizerModal.scss
@@ -0,0 +1,151 @@
+@import "../../constants/constants";
+
+.EqualizerModal{
+ position: absolute;
+ width: 100vw;
+ height: 100vh;
+ top: 0;
+ left: 0;
+ background: $blur-element;
+ flex-direction: column;
+ display: none;
+ justify-content: center;
+ align-items: center;
+ z-index: $z-index-9999;
+
+ /* Track */
+ ::-webkit-scrollbar-track { margin-top: 0px; margin-bottom: 20px; }
+
+ .modal{
+ width: 70%;
+ height: 500px;
+ padding: 20px;
+ border: 1px solid $songs-container-border-col;
+ background: var(--var-songs-container-bg-col);
+ backdrop-filter: var(--var-bg-blur-150);
+ -webkit-backdrop-filter: var(--var-bg-blur-150);
+ border-radius: 20px;
+ box-shadow: $box-shadow-10-10-25;
+
+ h2{
+ font-size: 20px;
+ margin-top: 0px;
+ margin-bottom: 20px;
+ }
+
+ .sub-heading{
+ display: flex;
+ margin-bottom: 20px;
+ .setting_dropdown{
+ display: flex;
+ position: relative;
+ .setting_dropdown{
+ width: 156px;
+ height: 40px;
+ border-radius: 10px;
+ background: $app-theme-col;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+
+ h4{
+ font-size: 13px;
+ height: 13px;
+ margin-left: 4px;
+ color: $root-app-navigator-hover-col;
+ }
+
+ .chevron_icon{
+ width: 32px;
+ height: 32px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ margin-right: 4px;
+ svg{
+ path{
+ stroke: $root-app-navigator-hover-col;
+ }
+ }
+ }
+ }
+
+ .DropDownMenu_container{
+ position: absolute;
+ top: 45px;
+ z-index: $z-index-9250;
+ }
+ }
+
+ input[type="text"]{
+ flex-grow: 1;
+ height: 40px;
+ border-radius: 10px;
+ background: $gray-stroke-20;
+ border: none;
+ outline: none;
+ padding: 0px 0px 0px 0px;
+ padding-left: 4px;
+ padding-right: 4px;
+ font-size: 13px;
+ color: $white-900;
+ font-family: 'inter-italic-regular', sans-serif;
+ font-style: italic;
+ margin-left: 20px;
+ }
+
+ .button-delete, .button-create{
+ width: 156px;
+ height: 40px;
+ border-radius: 10px;
+ background: $app-theme-col;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-left: 20px;
+ color: $root-app-navigator-hover-col;
+
+ }
+ }
+
+ .equalizer_container{
+ height: calc(100% - 105px);
+ display: flex;
+
+ .decibel_labels{
+ height: calc(100% - 33px);
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ .decibel_level{
+ width: 156px;
+ height: 40px;
+ border-radius: 10px;
+ background: $on-hover-song;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+ }
+
+ .equalizer_border{
+ height: 100%;
+ width: calc(100% - 176px);
+ border-radius: 10px;
+ background: $on-hover-song;
+ margin-left: 20px;
+
+ .equalizer{
+ display: flex;
+ justify-content: space-evenly;
+ height: 100%;
+ }
+ }
+ }
+
+ }
+}
+
+.EqualizerModal-visible{
+ display: flex;
+}
\ No newline at end of file
diff --git a/muzik-offline/src/interface/styles/components/music/FSMusicPlayer.scss b/muzik-offline/src/interface/styles/components/music/FSMusicPlayer.scss
index a5e664d..178e865 100644
--- a/muzik-offline/src/interface/styles/components/music/FSMusicPlayer.scss
+++ b/muzik-offline/src/interface/styles/components/music/FSMusicPlayer.scss
@@ -1,35 +1,32 @@
@import "../../constants/constants";
-.FSMusicPlayer{
- min-width: 980px;
+.FSMusicPlayer-hold{
width: 100%;
- height: 110vh;
+ height: 100vh;
overflow: hidden;
- display: flex;
- align-items: center;
- z-index: $z-index-9000;
- user-select: none;
- justify-content: center;
position: absolute;
- background: $gray-1000;
+ display: none;
+ top: 0;
+ z-index: $z-index-9000;
- .FSMusicPlayer-container{
- position: relative;
+ .FSMusicPlayer{
min-width: 980px;
width: 100%;
height: 110vh;
-
- .background-img{
+ overflow: hidden;
+ display: flex;
+ align-items: center;
+ user-select: none;
+ justify-content: center;
+ background: $gray-1000;
+
+ .FSMusicPlayer-container{
+ position: relative;
min-width: 980px;
width: 100%;
height: 110vh;
- display: flex;
- overflow: hidden;
- justify-content: center;
- align-items: center;
- transform: scale(1.8);
-
- .image-container{
+
+ .background-img{
min-width: 980px;
width: 100%;
height: 110vh;
@@ -37,84 +34,103 @@
overflow: hidden;
justify-content: center;
align-items: center;
- filter: blur(30px);
- -webkit-filter: blur(30px);
-
- img{
- display: inline;
- min-width: 100%;
- margin: 0 auto;
- height: 100%;
- object-fit: cover;
- opacity: 0.7;
- }
-
- svg{
+ transform: scale(1.8);
+
+ .image-container{
+ min-width: 980px;
width: 100%;
- height: 100%;
- opacity: 0.5;
+ height: 110vh;
+ display: flex;
+ overflow: hidden;
+ justify-content: center;
+ align-items: center;
+ filter: blur(30px);
+ -webkit-filter: blur(30px);
+
+ img{
+ display: inline;
+ min-width: 100%;
+ margin: 0 auto;
+ height: 100%;
+ object-fit: cover;
+ opacity: 0.7;
+ }
+
+ svg{
+ width: 100%;
+ height: 100%;
+ opacity: 0.5;
+ }
}
+
+ .rotate { animation: rotate 40s linear infinite normal; }
+
+ @keyframes rotate { to { transform: rotate(360deg); } }
}
-
- .rotate { animation: rotate 40s linear infinite normal; }
-
- @keyframes rotate { to { transform: rotate(360deg); } }
- }
-
- .frontward_facing_player{
- min-width: 980px;
- width: 100%;
- height: 110vh;
- margin-top: -110vh;
- background: $blur-element;
- position: absolute;
-
- .navbar_container{
+
+ .frontward_facing_player{
+ min-width: 980px;
width: 100%;
- }
-
- .navbar_buttons{
- margin-top: 10px;
- display: flex;
- justify-content: space-between;
- background: $on-hover-song;
- width: fit-content;
- margin-left: auto;
- margin-right: auto;
- height: fit-content;
- padding: 9px;
- border-radius: 24px;
-
- .close_full_screen_player_btn, .toggle_full_screen_player_btn{
- width: 34px;
- height: 34px;
+ height: 110vh;
+ margin-top: -110vh;
+ background: $blur-element;
+ position: absolute;
+
+ .navbar_container{
+ width: 100%;
+ }
+
+ .navbar_buttons{
+ margin-top: 10px;
display: flex;
- justify-content: center;
- align-items: center;
- border-radius: 15px;
- background: $white-900;
- width: 157px;
- transition: all 0.1s ease-in-out;
-
- h3{
- font-size: 13px;
- margin-left: 9px;
- color: $gray-1000;
+ justify-content: space-between;
+ background: $on-hover-song;
+ width: fit-content;
+ margin-left: auto;
+ margin-right: auto;
+ height: fit-content;
+ padding: 9px;
+ border-radius: 24px;
+
+ .close_full_screen_player_btn, .toggle_full_screen_player_btn{
+ width: 34px;
+ height: 34px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border-radius: 15px;
+ background: $white-900;
+ width: 157px;
transition: all 0.1s ease-in-out;
+
+ h3{
+ font-size: 13px;
+ margin-left: 9px;
+ color: $gray-1000;
+ transition: all 0.1s ease-in-out;
+ }
+ }
+
+ .give-margin{
+ margin-right: 9px;
}
}
-
- .give-margin{
- margin-right: 9px;
+
+ .main_visible_content{
+ display: flex;
+ justify-content: space-around;
+ height: calc(100vh - 74px);
+ align-items: center;
}
}
-
- .main_visible_content{
- display: flex;
- justify-content: space-around;
- height: calc(100vh - 74px);
- align-items: center;
- }
}
}
+}
+
+.FSMusicPlayer-hold-visible{
+ display: block;
+}
+
+.FSMusicPlayer-border{
+ border-radius: 8px;
}
\ No newline at end of file
diff --git a/muzik-offline/src/interface/styles/components/navbar/Header.scss b/muzik-offline/src/interface/styles/components/navbar/Header.scss
index 49562b4..94c1e66 100644
--- a/muzik-offline/src/interface/styles/components/navbar/Header.scss
+++ b/muzik-offline/src/interface/styles/components/navbar/Header.scss
@@ -69,6 +69,7 @@
.user_controls{
display: flex;
+ align-items: center;
.user_account{
display: flex;
@@ -154,27 +155,36 @@
}
.linux{
- width: 120px;
+ width: 110px;
+ height: 28px;
+
.button_area, #maximize{
border-radius: 50%;
- width: 32px;
+ width: 28px;
+ height: 28px;
background: $flags-blur;
}
.inter_changeable_btn{
- width: 32px;
+ width: 28px;
+ height: 28px;
margin-left: 12px;
margin-right: 11px;
#restore{
margin-right: 45px;
+ top: 2px;
.restore_sub_area{
border-radius: 50%;
- width: 32px;
+ width: 28px;
}
}
}
+
+ #close:hover{background: #92929226;}
+
+ #close:active{background: #F1707A;}
}
.window_controls_section-hidden{
diff --git a/muzik-offline/src/interface/styles/components/sliders/EqualizerSlider.scss b/muzik-offline/src/interface/styles/components/sliders/EqualizerSlider.scss
new file mode 100644
index 0000000..fab9e10
--- /dev/null
+++ b/muzik-offline/src/interface/styles/components/sliders/EqualizerSlider.scss
@@ -0,0 +1,144 @@
+@import "../../constants/constants";
+
+.EqualizerSlider{
+ margin-top: 20px;
+ margin-bottom: 20px;
+ height: calc(100% - 40px);
+ margin-left: 10px;
+ margin-right: 10px;
+ width: 45px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ overflow: hidden;
+
+ .input-container{
+ height: 100%;
+ display: flex;
+ align-items: center;
+ -webkit-transform:rotate(90deg);
+ -moz-transform:rotate(90deg);
+ -o-transform:rotate(90deg);
+ transform:rotate(270deg);
+
+ input[type="range"] {
+ appearance: none;
+ -webkit-appearance: none;
+ width: calc(100vh - 371px);
+ height: 10px;
+ background: $white-900;
+ border-radius: 50px;
+ background-image: linear-gradient($app-theme-col, $app-theme-col);
+ background-size: 50% 100%;
+ background-repeat: no-repeat;
+ }
+
+ input[type="range"]::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ height: 14px;
+ width: 14px;
+ border-radius: 50%;
+ cursor: grab;
+ box-shadow: 0 0 2px 0 #555;
+ transition: transform 0.2s ease-in-out;
+ background: $app-theme-col;
+ }
+
+ input[type="range"]::-moz-range-thumb {
+ -webkit-appearance: none;
+ appearance: none;
+ height: 14px;
+ width: 14px;
+ border-radius: 50%;
+ cursor: grab;
+ box-shadow: 0 0 2px 0 #555;
+ transition: transform 0.2s ease-in-out;
+ background: $app-theme-col;
+ }
+
+ input[type="range"]:hover::-webkit-slider-thumb {
+ background: $app-theme-col;
+ transform: scale(1.2);
+ }
+
+ input[type="range"]:hover::-moz-range-thumb {
+ background: $app-theme-col;
+ transform: scale(1.2);
+ }
+
+ input[type="range"]::-webkit-slider-runnable-track {
+ -webkit-appearance: none;
+ appearance: none;
+ box-shadow: none;
+ border: none;
+ background: transparent;
+ }
+
+ input[type="range"]::-moz-range-track {
+ -webkit-appearance: none;
+ appearance: none;
+ box-shadow: none;
+ border: none;
+ background: transparent;
+ }
+ }
+
+ h4{
+ margin-top: 10px;
+ margin-bottom: 0px;
+ height: 24px;
+ font-size: 12px;
+ width: 45px;
+ text-align: center;
+ }
+}
+
+@media only screen and (min-height: 650px){
+ .EqualizerSlider{
+ .input-container{
+ input[type="range"] {
+ width: calc(90vh - 371px);
+ }
+ }
+ }
+}
+
+@media only screen and (min-height: 750px){
+ .EqualizerSlider{
+ .input-container{
+ input[type="range"] {
+ width: calc(80vh - 371px);
+ }
+ }
+ }
+}
+
+@media only screen and (min-height: 850px){
+ .EqualizerSlider{
+ .input-container{
+ input[type="range"] {
+ width: calc(70vh - 371px);
+ }
+ }
+ }
+}
+
+@media only screen and (min-height: 950px){
+ .EqualizerSlider{
+ .input-container{
+ input[type="range"] {
+ width: calc(60vh - 371px);
+ }
+ }
+ }
+}
+
+@media only screen and (min-height: 1050px){
+ .EqualizerSlider{
+ .input-container{
+ input[type="range"] {
+ width: calc(50vh - 371px);
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/muzik-offline/src/interface/styles/constants/_constants.scss b/muzik-offline/src/interface/styles/constants/_constants.scss
index f4e4d1b..1f0184d 100644
--- a/muzik-offline/src/interface/styles/constants/_constants.scss
+++ b/muzik-offline/src/interface/styles/constants/_constants.scss
@@ -1,4 +1,3 @@
-
:root{
color: #ececec;/*white-900*/
font-family: 'inter-regular', sans-serif;
@@ -81,7 +80,6 @@
//add more themes...
-
//wallpaper opacity values
[wallpaper-opacity='10']{
--wallpaper-foreground-top-value-opacity: 0.625;
diff --git a/muzik-offline/src/interface/styles/layouts/AdvancedSettings.scss b/muzik-offline/src/interface/styles/layouts/AdvancedSettings.scss
index b0b70c5..faa2df1 100644
--- a/muzik-offline/src/interface/styles/layouts/AdvancedSettings.scss
+++ b/muzik-offline/src/interface/styles/layouts/AdvancedSettings.scss
@@ -48,7 +48,7 @@
h4{
font-size: 13px;
- height: 13px;
+ height: min-content;
margin-left: 4px;
color: $root-app-navigator-hover-col;
}
diff --git a/muzik-offline/src/interface/styles/layouts/AppearanceSettings.scss b/muzik-offline/src/interface/styles/layouts/AppearanceSettings.scss
index 748c92e..f4fd6e7 100644
--- a/muzik-offline/src/interface/styles/layouts/AppearanceSettings.scss
+++ b/muzik-offline/src/interface/styles/layouts/AppearanceSettings.scss
@@ -3,7 +3,7 @@
.AppearanceSettings{
height: calc(100% - 20px);
padding-left: 15px;
- padding-right: 8px;
+ padding-right: 9px;
padding-top: 10px;
padding-bottom: 10px;
diff --git a/muzik-offline/src/interface/styles/layouts/AudioLabSettings.scss b/muzik-offline/src/interface/styles/layouts/AudioLabSettings.scss
new file mode 100644
index 0000000..7bc3d36
--- /dev/null
+++ b/muzik-offline/src/interface/styles/layouts/AudioLabSettings.scss
@@ -0,0 +1,138 @@
+@import "../constants/constants";
+
+.AudioLabSettings{
+ height: calc(100% - 20px);
+ padding-left: 15px;
+ padding-right: 4px;
+ padding-top: 10px;
+ padding-bottom: 10px;
+
+ h2{
+ font-size: 24px;
+ height: 24px;
+ margin-top: 0px;
+ margin-bottom: 23px;
+ }
+
+
+ .AudioLabSettings_container{
+ height: calc(100vh - 127px);
+ width: 100%;
+ overflow-y: auto;
+
+ h5{
+ font-size: 13px;
+ height: 13px;
+ margin-top: 19px;
+ margin-bottom: 15px;
+ }
+
+ .audio-backend{
+ display: flex;
+ justify-content: space-between;
+ border-radius: 16px;
+ background: $on-hover-song;
+ padding: 10px;
+ width: calc(100% - 24px);
+ align-items: center;
+ margin-bottom: 20px;
+
+ .logo{
+ width: 125px;
+ height: 125px;
+ flex-shrink: 0;
+ display: flex;
+ overflow: hidden;
+ justify-content: center;
+ align-items: center;
+ margin-left: 25px;
+ border-radius: 50%;
+
+ img{
+ display: inline;
+ min-width: 100%;
+ margin: 0 auto;
+ height: 100%;
+ object-fit: cover;
+ }
+ }
+ }
+
+ .selected{
+ width: calc(100% - 30px);
+ border: 3px solid $app-theme-col;
+ }
+
+ .setting{
+ display: flex;
+ align-items: center;
+ width: calc(100% - 24px);
+ height: 50px;
+ border-radius: 16px;
+ background: $on-hover-song;
+ justify-content: space-between;
+ padding-left: 15px;
+ padding-right: 5px;
+ margin-bottom: 20px;
+ position: relative;
+ overflow: visible;
+
+ h3{
+ font-size: 13px;
+ }
+
+ .setting_dropdown{
+ display: flex;
+
+ .setting_dropdown{
+ width: 156px;
+ height: 40px;
+ border-radius: 10px;
+ background: $app-theme-col;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+
+ h4{
+ font-size: 13px;
+ height: min-content;
+ margin-left: 4px;
+ color: $root-app-navigator-hover-col;
+ }
+
+ .chevron_icon{
+ width: 32px;
+ height: 32px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ margin-right: 4px;
+ svg{
+ path{
+ stroke: $root-app-navigator-hover-col;
+ }
+ }
+ }
+ }
+
+ .greyed_out{
+ background: $flags-blur;
+ }
+
+ .DropDownMenu_container{
+ position: absolute;
+ right: 5px;
+ top: 55px;
+ z-index: $z-index-9250;
+ }
+
+ .DropDownMenu_container_last{
+ position: absolute;
+ right: 5px;
+ bottom: 55px;
+ z-index: $z-index-9250;
+ }
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/muzik-offline/src/interface/styles/layouts/GeneralSettings.scss b/muzik-offline/src/interface/styles/layouts/GeneralSettings.scss
index 1533c77..187ed8e 100644
--- a/muzik-offline/src/interface/styles/layouts/GeneralSettings.scss
+++ b/muzik-offline/src/interface/styles/layouts/GeneralSettings.scss
@@ -48,7 +48,7 @@
h4{
font-size: 13px;
- height: 13px;
+ height: min-content;
margin-left: 4px;
color: $root-app-navigator-hover-col;
}
diff --git a/muzik-offline/src/store/index.ts b/muzik-offline/src/store/index.ts
index c731770..9a07c38 100644
--- a/muzik-offline/src/store/index.ts
+++ b/muzik-offline/src/store/index.ts
@@ -1,12 +1,14 @@
import { create } from 'zustand';
import { devtools, persist } from 'zustand/middleware';
-import { firstRunState, FSState, MaximisedState, PlayerInterface, PlayingPositionInterface, portState, QueueInterface, SavedDirectoriesInterface, SavedObjectInterface, searchInterface, toastInterface, viewableSideElInterface, wallpaperInterface } from './storeTypes';
+import { firstRunState, FSState, MaximisedState, PlayerInterface, PlayingPositionInterface, portState, QueueInterface, SavedDirectoriesInterface, SavedObjectInterface, searchInterface, toastInterface, viewableSideElInterface, wallpaperInterface, SavedPresetsValues } from './storeTypes';
import { emptyDirectories } from '@database/directories';
import { emptyPlayer } from '@database/player';
import { emptySavedObject } from '@database/saved_object';
import { viewableSideElements } from '@database/side_elements';
import { alltracksReducer, AllTracksState } from './reducerStore';
import { reducerType, AllTracksStateInterface, Action } from './reducerTypes';
+import { AudioLabPreset } from '@muziktypes/index';
+import { premade_audio_labs } from '@content/index';
export type{
AllTracksStateInterface, Action
@@ -17,6 +19,18 @@ export {
alltracksReducer, AllTracksState,
}
+export const FlatAudioLab: AudioLabPreset = {
+ SixtyTwoHz: 50,
+ OneTwentyFiveHz: 50,
+ TwoFiftyHz: 50,
+ FiveHundredHz: 50,
+ OnekHz: 50,
+ TwokHz: 50,
+ FourkHz: 50,
+ EightkHz: 50,
+ SixteenkHz: 50,
+}
+
export const useFisrstRunStore = create()(
devtools(
persist(
@@ -186,4 +200,11 @@ export const useHistorySongs = create()(
pop_back: () => set((state) => ({ queue: state.queue.slice(0, state.queue.length - 1) })),
setQueue: (setTo) => set((_state) => ({ queue: setTo })),
}),
+)
+
+export const useSavedPresetsValues = create()(
+ (set) => ({
+ map: premade_audio_labs,
+ addValue: (key: string, value: AudioLabPreset) => set((state) => ({ map: state.map.set(key, value) })),
+ }),
)
\ No newline at end of file
diff --git a/muzik-offline/src/store/reducerStore.ts b/muzik-offline/src/store/reducerStore.ts
index 5ed70e0..843538f 100644
--- a/muzik-offline/src/store/reducerStore.ts
+++ b/muzik-offline/src/store/reducerStore.ts
@@ -18,6 +18,7 @@ export const AllTracksState: AllTracksStateInterface = {
isPlaylistModalOpen: false,
isPropertiesModalOpen: false,
isEditingSongModalOpen: false,
+ isDeleteSongModalOpen: false,
inDragDropRegion: false,
};
@@ -34,6 +35,7 @@ export const alltracksReducer = (state: AllTracksStateInterface, action: Action)
case reducerType.SET_PROPERTIES_MODAL: return { ...state, isPropertiesModalOpen: action.payload };
case reducerType.SET_EDIT_SONG_MODAL: return { ...state, isEditingSongModalOpen: action.payload };
case reducerType.SET_IN_DRAG_DROP_REGION: return { ...state, inDragDropRegion: action.payload };
+ case reducerType.SET_DELETE_MODAL: return { ...state, isDeleteSongModalOpen: action.payload };
default: return state;
}
};
@@ -47,6 +49,7 @@ export const SearchSongsState: SearchSongInterface = {
isPlaylistModalOpen: false,
isPropertiesModalOpen: false,
isEditingSongModalOpen: false,
+ isDeleteSongModalOpen: false,
};
export const searchSongsReducer = (state: SearchSongInterface, action: Action) => {
@@ -59,6 +62,7 @@ export const searchSongsReducer = (state: SearchSongInterface, action: Action) =
case reducerType.SET_PLAYLIST_MODAL: return { ...state, isPlaylistModalOpen: action.payload };
case reducerType.SET_PROPERTIES_MODAL: return { ...state, isPropertiesModalOpen: action.payload };
case reducerType.SET_EDIT_SONG_MODAL: return { ...state, isEditingSongModalOpen: action.payload };
+ case reducerType.SET_DELETE_MODAL: return { ...state, isDeleteSongModalOpen: action.payload };
default: return state;
}
};
@@ -73,6 +77,7 @@ export const AlbumDetailsState: AlbumDetailsInterface = {
isPlaylistModalOpen: false,
isPropertiesModalOpen: false,
isEditingSongModalOpen: false,
+ isDeleteSongModalOpen: false,
resizeHeader: false,
};
@@ -87,6 +92,7 @@ export const albumDetailsReducer = (state: AlbumDetailsInterface, action: Action
case reducerType.SET_PLAYLIST_MODAL: return { ...state, isPlaylistModalOpen: action.payload };
case reducerType.SET_PROPERTIES_MODAL: return { ...state, isPropertiesModalOpen: action.payload };
case reducerType.SET_EDIT_SONG_MODAL: return { ...state, isEditingSongModalOpen: action.payload };
+ case reducerType.SET_DELETE_MODAL: return { ...state, isDeleteSongModalOpen: action.payload };
case reducerType.SET_RESIZE_HEADER: return { ...state, resizeHeader: action.payload };
default: return state;
}
@@ -179,6 +185,7 @@ export const GenreViewState: GenreViewInterface = {
isPlaylistModalOpen: false,
isPropertiesModalOpen: false,
isEditingSongModalOpen: false,
+ isDeleteSongModalOpen: false,
resizeHeader: false,
};
@@ -193,6 +200,7 @@ export const genreViewReducer = (state: GenreViewInterface, action: Action) => {
case reducerType.SET_PLAYLIST_MODAL: return { ...state, isPlaylistModalOpen: action.payload };
case reducerType.SET_PROPERTIES_MODAL: return { ...state, isPropertiesModalOpen: action.payload };
case reducerType.SET_EDIT_SONG_MODAL: return { ...state, isEditingSongModalOpen: action.payload };
+ case reducerType.SET_DELETE_MODAL: return { ...state, isDeleteSongModalOpen: action.payload };
case reducerType.SET_RESIZE_HEADER: return { ...state, resizeHeader: action.payload };
default: return state;
}
diff --git a/muzik-offline/src/store/reducerTypes.ts b/muzik-offline/src/store/reducerTypes.ts
index 78e2cb1..13e8a28 100644
--- a/muzik-offline/src/store/reducerTypes.ts
+++ b/muzik-offline/src/store/reducerTypes.ts
@@ -95,6 +95,7 @@ export interface AllTracksStateInterface{
isPlaylistModalOpen: boolean,
isPropertiesModalOpen: boolean,
isEditingSongModalOpen: boolean,
+ isDeleteSongModalOpen: boolean,
inDragDropRegion: boolean,
}
@@ -107,6 +108,7 @@ export interface SearchSongInterface{
isPlaylistModalOpen: boolean,
isPropertiesModalOpen: boolean,
isEditingSongModalOpen: boolean,
+ isDeleteSongModalOpen: boolean,
}
export interface AlbumDetailsInterface{
@@ -119,6 +121,7 @@ export interface AlbumDetailsInterface{
isPlaylistModalOpen: boolean,
isPropertiesModalOpen: boolean,
isEditingSongModalOpen: boolean,
+ isDeleteSongModalOpen: boolean,
resizeHeader: boolean;
}
@@ -178,6 +181,7 @@ export interface GenreViewInterface{
isPlaylistModalOpen: boolean,
isPropertiesModalOpen: boolean,
isEditingSongModalOpen: boolean,
+ isDeleteSongModalOpen: boolean,
resizeHeader: boolean;
}
diff --git a/muzik-offline/src/store/storeTypes.ts b/muzik-offline/src/store/storeTypes.ts
index 96abc35..da64da7 100644
--- a/muzik-offline/src/store/storeTypes.ts
+++ b/muzik-offline/src/store/storeTypes.ts
@@ -2,7 +2,7 @@ import { SavedDirectories } from "@database/directories";
import { Player } from "@database/player";
import { SavedObject } from "@database/saved_object";
import { viewableSideEl } from "@database/side_elements";
-import { toast } from "@muziktypes/index";
+import { AudioLabPreset, toast } from "@muziktypes/index";
export interface MaximisedState {
isMaximised: boolean;
@@ -79,4 +79,9 @@ export interface QueueInterface{
push_front: (song: number) => void;
pop_back: () => void;
setQueue: (setTo: number[]) => void;
+}
+
+export interface SavedPresetsValues{
+ map: Map;
+ addValue: (key: string, value: AudioLabPreset) => void;
}
\ No newline at end of file
diff --git a/muzik-offline/src/types/index.ts b/muzik-offline/src/types/index.ts
index 24ede02..0ef1e59 100644
--- a/muzik-offline/src/types/index.ts
+++ b/muzik-offline/src/types/index.ts
@@ -1,6 +1,7 @@
export enum selectedSettingENUM {
General = "General",
Appearance = "Appearance",
+ AudioLab = "AudioLab",
MusicFolders = "Music Folders",
Security = "Security",
ExportSongs = "Export Songs",
@@ -17,8 +18,13 @@ export enum selectedGeneralSettingEnum{
UpcomingHistoryLimit = "UpcomingHistoryLimit",
SeekStepAmount = "SeekStepAmount",
SongLengthORremaining = "SongLengthORremaining",
+ AudioLabPreset = "AudioLabPreset",
AlwaysRoundedCornersWindows = "AlwaysRoundedCornersWindows",
AutoStartApp = "AutoStartApp",
+ AudioQuality = "AudioQuality",
+ PlayBackSpeed = "PlayBackSpeed",
+ AudioTransition = "AudioTransition",
+ OutputDevice = "OutputDevice"
}
export enum OSTYPEenum{
@@ -162,6 +168,18 @@ export interface PlaylistMD {
length: string;
}
+export interface AudioLabPreset{
+ SixtyTwoHz: number;
+ OneTwentyFiveHz: number;
+ TwoFiftyHz: number;
+ FiveHundredHz: number;
+ OnekHz: number;
+ TwokHz: number;
+ FourkHz: number;
+ EightkHz: number;
+ SixteenkHz: number;
+}
+
export interface Payload {
event: string;
seek_direction: string;
diff --git a/muzik-offline/src/utils/playerControl.ts b/muzik-offline/src/utils/playerControl.ts
index 0551059..fbf214d 100644
--- a/muzik-offline/src/utils/playerControl.ts
+++ b/muzik-offline/src/utils/playerControl.ts
@@ -5,6 +5,7 @@ import { invoke } from "@tauri-apps/api/core";
import { SavedObject } from "@database/index";
import { local_playlists_db, local_songs_db } from "@database/database";
import { getNullRandomCover } from ".";
+import { RepeatingLevel } from "@database/player";
export const addThisSongToPlayNext = async(songids: number[]) => {
//get the song queue
@@ -91,7 +92,14 @@ export async function startPlayingNewSong(song: Song){
temp.lengthOfSongInSeconds = song.duration_seconds;
temp.isPlaying = true;
const volume = (useSavedObjectStore.getState().local_store.Volume / 100);
- await invoke("load_and_play_song_from_path", { soundPath: song.path, volume: volume });
+ await invoke("load_and_play_song_from_path", {
+ soundPath: song.path,
+ player: useSavedObjectStore.getState().local_store.player,
+ volume: volume,
+ duration: song.duration_seconds,
+ playBackSpeed: parseInt(useSavedObjectStore.getState().local_store.PlayBackSpeed),
+ fadeInOut: useSavedObjectStore.getState().local_store.AudioTransition === "Yes" ? true : false
+ });
await invoke("update_metadata", { uuid: (song.cover_uuid !== null ? song.uuid : getNullRandomCover(song.id)) });
await invoke("set_player_state", { state: playerState.Playing});
usePlayerStore.getState().setPlayer(temp);
@@ -104,7 +112,14 @@ export async function loadNewSong(song: Song){
temp.lengthOfSongInSeconds = song.duration_seconds;
temp.isPlaying = false;
const volume = (useSavedObjectStore.getState().local_store.Volume / 100);
- await invoke("load_a_song_from_path", { soundPath: song.path, volume: volume });
+ await invoke("load_a_song_from_path", {
+ soundPath: song.path,
+ player: useSavedObjectStore.getState().local_store.player,
+ volume: volume,
+ duration: song.duration_seconds,
+ playBackSpeed: parseInt(useSavedObjectStore.getState().local_store.PlayBackSpeed),
+ fadeInOut: useSavedObjectStore.getState().local_store.AudioTransition === "Yes" ? true : false
+ });
await invoke("update_metadata", { uuid: (song.cover_uuid !== null ? song.uuid : getNullRandomCover(song.id)) });
usePlayerStore.getState().setPlayer(temp);
setDiscordActivity(song);
@@ -112,7 +127,7 @@ export async function loadNewSong(song: Song){
export async function playSong(){
if(usePlayerStore.getState().Player.playingSongMetadata){
- await invoke("resume_playing");
+ await invoke("resume_playing", {player: useSavedObjectStore.getState().local_store.player});
await invoke("set_player_state", { state: playerState.Playing});
let temp = usePlayerStore.getState().Player;
temp.isPlaying = true;
@@ -124,7 +139,7 @@ export async function playSong(){
export async function pauseSong(){
if(usePlayerStore.getState().Player.playingSongMetadata){
- await invoke("pause_song");
+ await invoke("pause_song", {player: useSavedObjectStore.getState().local_store.player});
await invoke("set_player_state", { state: playerState.Paused});
let temp = usePlayerStore.getState().Player;
temp.isPlaying = false;
@@ -136,7 +151,7 @@ export async function pauseSong(){
export async function stopSong(){
if(usePlayerStore.getState().Player.playingSongMetadata){
- await invoke("stop_song");
+ await invoke("stop_song", {player: useSavedObjectStore.getState().local_store.player});
await invoke("set_player_state", { state: playerState.Stopped});
let temp = usePlayerStore.getState().Player;
temp.playingSongMetadata = null;
@@ -161,7 +176,8 @@ export async function dragSeeker(){
export function changeSeekerPosition(value: number){
if(usePlayerStore.getState().Player.playingSongMetadata === null)return;
const position = (value / 100) * usePlayerStore.getState().Player.lengthOfSongInSeconds;
- invoke("seek_to", {position: position}).then(() => {if(usePlayerStore.getState().Player.wasPlayingBeforePause === true)playSong()});
+ invoke("seek_to", {player: useSavedObjectStore.getState().local_store.player, position: position})
+ .then(() => {if(usePlayerStore.getState().Player.wasPlayingBeforePause === true)playSong()});
}
export function changeSeekerPositionBtnPress(isDecreasing: boolean){
@@ -182,6 +198,7 @@ export function changeSeekerPositionBtnPress(isDecreasing: boolean){
usePlayingPositionSec.getState().setPosition(position + delta_amount);
}
invoke("seek_by", {
+ player: useSavedObjectStore.getState().local_store.player,
delta: delta_amount ? delta_amount : 10.0
}).then(() => {if(usePlayerStore.getState().Player.wasPlayingBeforePause === true)playSong()});
}
@@ -193,7 +210,7 @@ export function changeVolumeLevel(value: number){
useSavedObjectStore.getState().setStore(temp);
}
-export async function setVolumeLevel(value: number){await invoke("set_volume", {volume: value / 100});}
+export async function setVolumeLevel(value: number){await invoke("set_volume", {player: useSavedObjectStore.getState().local_store.player, volume: value / 100});}
export function changeVolumeLevelBtnPress(isDecreasing: boolean){
if(isDecreasing === true){
@@ -221,16 +238,16 @@ export async function shuffleToggle(){
export async function repeatToggle(){
let temp = usePlayerStore.getState().Player;
- temp.repeatingLevel = usePlayerStore.getState().Player.repeatingLevel + 1 > 2 ? 0 : (usePlayerStore.getState().Player.repeatingLevel + 1) as 0 | 1 | 2;
+ temp.repeatingLevel = temp.repeatingLevel === RepeatingLevel.NO_REPEAT ? RepeatingLevel.REPEAT_ONE : temp.repeatingLevel === RepeatingLevel.REPEAT_ONE ? RepeatingLevel.REPEAT_ALL : RepeatingLevel.NO_REPEAT;
usePlayerStore.getState().setPlayer(temp);
- await invoke("mlo_set_repeat_list", {repeatList: temp.repeatingLevel > 0 ? true : false});
+ await invoke("mlo_set_repeat_list", {repeatList: temp.repeatingLevel !== RepeatingLevel.NO_REPEAT ? true : false});
}
export function reconfigurePlayer_AtEndOfSong(){
- if(usePlayerStore.getState().Player.repeatingLevel === 0 || usePlayerStore.getState().Player.repeatingLevel === 1){
+ if(usePlayerStore.getState().Player.repeatingLevel === RepeatingLevel.NO_REPEAT || usePlayerStore.getState().Player.repeatingLevel === RepeatingLevel.REPEAT_ALL){
playNextSong();
}
- else if(usePlayerStore.getState().Player.repeatingLevel === 2){
+ else if(usePlayerStore.getState().Player.repeatingLevel === RepeatingLevel.REPEAT_ONE){
const song = usePlayerStore.getState().Player.playingSongMetadata;
if(song === null)return;
usePlayingPositionSec.getState().setPosition(0);
@@ -246,8 +263,8 @@ export async function playNextSong(){
usePlayingPositionSec.getState().setPosition(0);
usePlayingPosition.getState().setPosition(0);
useUpcomingSongs.getState().dequeue();
- if(useUpcomingSongs.getState().queue.length === 0 && usePlayerStore.getState().Player.repeatingLevel === 0)await stopSong();
- else if(useUpcomingSongs.getState().queue.length === 0 && usePlayerStore.getState().Player.repeatingLevel === 1){
+ if(useUpcomingSongs.getState().queue.length === 0 && usePlayerStore.getState().Player.repeatingLevel === RepeatingLevel.NO_REPEAT)await stopSong();
+ else if(useUpcomingSongs.getState().queue.length === 0 && usePlayerStore.getState().Player.repeatingLevel === RepeatingLevel.REPEAT_ALL){
const limit = Number.parseInt(useSavedObjectStore.getState().local_store.UpcomingHistoryLimit);
get_next_batch(limit).then(async() => {
if(useUpcomingSongs.getState().queue.length >= 1){
diff --git a/muzik-offline/src/utils/reducerUtils.ts b/muzik-offline/src/utils/reducerUtils.ts
index 29c6b89..80b94e9 100644
--- a/muzik-offline/src/utils/reducerUtils.ts
+++ b/muzik-offline/src/utils/reducerUtils.ts
@@ -1,9 +1,12 @@
-import { Song } from "@muziktypes/index";
+import { Song, toastType } from "@muziktypes/index";
import { Action, reducerType } from "@store/reducerTypes";
import { getCurrentWebview } from "@tauri-apps/api/webview";
import { open } from '@tauri-apps/plugin-dialog';
import { appConfigDir } from '@tauri-apps/api/path';
import { reloadLibrary } from ".";
+import { invoke } from "@tauri-apps/api/core";
+import { useToastStore } from "@store/index";
+import { local_albums_db, local_artists_db, local_genres_db, local_songs_db } from "@database/database";
export function selectThisSong(index: number, dispatch: React.Dispatch){
dispatch({ type: reducerType.SET_SELECTED, payload: index });
@@ -57,6 +60,52 @@ export function closeEditPropertiesModal(dispatch: React.Dispatch){
closeContextMenu(dispatch);
}
+export async function closeDeleteSongModal(dispatch: React.Dispatch, song: Song | null, deleteSong: boolean){
+ dispatch({ type: reducerType.SET_DELETE_MODAL, payload: false });
+ closeContextMenu(dispatch);
+ if(!deleteSong)return;
+ if(!song){
+ useToastStore.getState().setToast({
+ message: "Song not found",
+ type: toastType.error,
+ title: "Delete Song Error",
+ timeout: 3000
+ });
+ return;
+ }
+ const album_appearance_count = await local_albums_db.albums.where('title').equals(song.album).count();
+ const artist_appearance_count = await local_artists_db.artists.where('artist_name').equals(song.artist).count();
+ const genre_appearance_count = await local_genres_db.genres.where('title').equals(song.genre).count();
+
+ invoke('delete_song_metadata', {
+ path: song.path,
+ album: song.album,
+ albumAppearanceCount: album_appearance_count,
+ artist: song.artist,
+ artistAppearanceCount: artist_appearance_count,
+ genre: song.genre,
+ genreAppearanceCount: genre_appearance_count
+ }).then(() => {
+ local_songs_db.songs.where('uuid').equals(song.uuid).delete();
+ if (album_appearance_count <= 1) local_albums_db.albums.where('title').equals(song.album).delete();
+ if (artist_appearance_count <= 1) local_artists_db.artists.where('artist_name').equals(song.artist).delete();
+ if (genre_appearance_count <= 1) local_genres_db.genres.where('title').equals(song.genre).delete();
+ useToastStore.getState().setToast({
+ message: `${song.name} was sent to trash`,
+ type: toastType.success,
+ title: "Delete Song",
+ timeout: 3000
+ });
+ }).catch((err: any) => {
+ useToastStore.getState().setToast({
+ message: err,
+ type: toastType.error,
+ title: "Delete Song Error",
+ timeout: 3000
+ });
+ });
+}
+
export function closeContextMenu( dispatch: React.Dispatch, e?: React.MouseEvent,){
if(e){
if(e.target !== e.currentTarget)return;
+
+ )
+}
+
+export default AudioLabSettings
\ No newline at end of file
diff --git a/muzik-offline/src/interface/layouts/GeneralSettings.tsx b/muzik-offline/src/interface/layouts/GeneralSettings.tsx
index bd37ada..e7465e7 100644
--- a/muzik-offline/src/interface/layouts/GeneralSettings.tsx
+++ b/muzik-offline/src/interface/layouts/GeneralSettings.tsx
@@ -40,7 +40,6 @@ const settings_data: {
}
]
-
const GeneralSettings = () => {
const [selectedGeneralSetting, setselectedGeneralSetting] = useStateAudio Lab Settings
+
+ changeAudioBackend("rodio")}>
+
+ changeAudioBackend("kira")}>
+
+ {
+ settings_data.map((value) =>
+
+ Select your audio backend
+
+
+
+
+ Rodio
+
+
+
+
+ -
+
- More stable and faster +
- More developed specifically for audio playback +
- Supports output device switching +
+
+ -
+
- - No equaliser support +
- - No audio effects +
+
+
+
+ Kira
+
+
+
+
+ -
+
- More developed specifically for game audio playback +
- Supports 3D spatial audio(coming soon) +
- Supports sound effects and equaliser(coming soon) +
+
+ -
+
- - Can be slow and unstable for large files +
- - No support for switching output device in app +
+
)
+ }
+ {value.title}
+
+ toggleDropDown(value.dropDownName)}>
+
+
+
+
+ {local_store[(value.dropDownName.toString() as keyof SavedObject)]}
+
+
+
+
+ {/*Output device
+
+ { local_store.player === "rodio" ?
+ toggleDropDown(selectedGeneralSettingEnum.OutputDevice)}>
+
+
+
+ :
+
+ {currentOutputDevice}
+
+
+ }
+ default
+
+
+
+
+
+
*/}
+ Equaliser
+
+
+
+
+ Open equaliser
+{value.title}
@@ -143,4 +142,4 @@ const GeneralSettings = () => {
)
}
-export default GeneralSettings
\ No newline at end of file
+export default GeneralSettings
diff --git a/muzik-offline/src/interface/layouts/SearchSongs.tsx b/muzik-offline/src/interface/layouts/SearchSongs.tsx
index 7a4ed04..f272e20 100644
--- a/muzik-offline/src/interface/layouts/SearchSongs.tsx
+++ b/muzik-offline/src/interface/layouts/SearchSongs.tsx
@@ -1,4 +1,4 @@
-import { RectangleSongBox, GeneralContextMenu, AddSongToPlaylistModal, PropertiesModal, EditPropertiesModal } from "@components/index";
+import { RectangleSongBox, GeneralContextMenu, AddSongToPlaylistModal, PropertiesModal, EditPropertiesModal, DeleteSongModal } from "@components/index";
import { contextMenuEnum, contextMenuButtons } from "@muziktypes/index";
import { useRef, useEffect, useReducer } from "react";
import "@styles/layouts/SearchSongs.scss";
@@ -8,7 +8,7 @@ import { reducerType, useSearchStore } from "@store/index";
import { useNavigate } from "react-router-dom";
import { SearchSongsState, searchSongsReducer } from "@store/reducerStore";
import { addThisSongToPlayLater, addThisSongToPlayNext, playThisListNow, startPlayingNewSong } from "@utils/playerControl";
-import { closeContextMenu, closeEditPropertiesModal, closePlaylistModal, closePropertiesModal, processArrowKeysInput, selectThisSong, setSongList } from "@utils/reducerUtils";
+import { closeContextMenu, closeDeleteSongModal, closeEditPropertiesModal, closePlaylistModal, closePropertiesModal, processArrowKeysInput, selectThisSong, setSongList } from "@utils/reducerUtils";
import Skeleton, { SkeletonTheme } from "react-loading-skeleton";
import 'react-loading-skeleton/dist/skeleton.css';
@@ -29,6 +29,7 @@ const SearchSongs = () => {
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.EditSong){ dispatch({ type: reducerType.SET_EDIT_SONG_MODAL, payload: true}); }
+ else if(arg === contextMenuButtons.Delete){ dispatch({ type: reducerType.SET_DELETE_MODAL, payload: true}); }
else if(arg === contextMenuButtons.PlayNext && state.songMenuToOpen){
addThisSongToPlayNext([state.songMenuToOpen.id]);
closeContextMenu(dispatch);
@@ -75,7 +76,7 @@ const SearchSongs = () => {
else if(ev.target.id !== "gsearch" && state.selected >= 1 && state.selected <= state.SongList.length){
dispatch({type: reducerType.SET_SONG_MENU, payload: state.SongList[state.selected - 1]});
if(((ev.ctrlKey || ev.metaKey) && (ev.key === "p" || ev.key === "P" )) || ev.key === "Enter")chooseOption(contextMenuButtons.Play);
- else if((ev.ctrlKey || ev.metaKey) && (ev.key === "i" || ev.key === "I"))chooseOption(contextMenuButtons.ShowInfo);
+ else if((ev.ctrlKey || ev.metaKey) && !ev.shiftKey && (ev.key === "i" || ev.key === "I"))chooseOption(contextMenuButtons.ShowInfo);
else if((ev.ctrlKey || ev.metaKey) && ev.shiftKey && (ev.key === "a" || ev.key === "A"))chooseOption(contextMenuButtons.AddToPlaylist);
else if((ev.ctrlKey || ev.metaKey) && ev.shiftKey && (ev.key === "n" || ev.key === "N"))chooseOption(contextMenuButtons.PlayNext);
else if((ev.ctrlKey || ev.metaKey) && ev.shiftKey && (ev.key === "l" || ev.key === "L"))chooseOption(contextMenuButtons.PlayLater);
@@ -155,6 +156,7 @@ const SearchSongs = () => {
closePropertiesModal(dispatch)} />
closeEditPropertiesModal(dispatch)} />
closePlaylistModal(dispatch)} />
+ closeDeleteSongModal(dispatch, state.songMenuToOpen, deleteSong)} />
)
}
diff --git a/muzik-offline/src/interface/layouts/index.ts b/muzik-offline/src/interface/layouts/index.ts
index c6aa351..ecdfb83 100644
--- a/muzik-offline/src/interface/layouts/index.ts
+++ b/muzik-offline/src/interface/layouts/index.ts
@@ -9,6 +9,7 @@ import SearchPlaylists from './SearchPlaylists';
import AdvancedSettings from './AdvancedSettings';
import SecuritySettings from './SecuritySettings';
import AboutSettings from './AboutSettings';
+import AudioLabSettings from './AudioLabSettings';
import MusicFoldersSettings from './MusicFoldersSettings';
import ExportSettings from './ExportSettings';
@@ -16,5 +17,5 @@ export {
GeneralSettings, AppearanceSettings, HistoryNextFloating,
SearchSongs, SearchArtists, SearchAlbums, SearchGenres,
SearchPlaylists, AdvancedSettings, SecuritySettings, AboutSettings,
- MusicFoldersSettings, ExportSettings
+ AudioLabSettings, MusicFoldersSettings, ExportSettings
}
\ No newline at end of file
diff --git a/muzik-offline/src/interface/pages/AlbumDetails.tsx b/muzik-offline/src/interface/pages/AlbumDetails.tsx
index 75a1dfe..c7bc07f 100644
--- a/muzik-offline/src/interface/pages/AlbumDetails.tsx
+++ b/muzik-offline/src/interface/pages/AlbumDetails.tsx
@@ -1,5 +1,5 @@
import { useEffect, useReducer, useRef } from "react";
-import { AddSongToPlaylistModal, EditPropertiesModal, GeneralContextMenu, LargeResizableCover, LoaderAnimated, PropertiesModal, RectangleSongBox } from "@components/index";
+import { AddSongToPlaylistModal, DeleteSongModal, EditPropertiesModal, GeneralContextMenu, LargeResizableCover, LoaderAnimated, PropertiesModal, RectangleSongBox } from "@components/index";
import "@styles/pages/AlbumDetails.scss";
import { motion } from "framer-motion";
import { Play, Shuffle } from "@assets/icons";
@@ -10,7 +10,7 @@ import { getAlbumSongs, getCoverURL, getRandomCover, secondsToTimeFormat } from
import { ViewportList } from "react-viewport-list";
import { albumDetailsReducer, AlbumDetailsState } from "@store/reducerStore";
import { startPlayingNewSong, playThisListNow, addThisSongToPlayLater, addThisSongToPlayNext } from "@utils/playerControl";
-import { closeContextMenu, closeEditPropertiesModal, closePlaylistModal, closePropertiesModal, processArrowKeysInput, selectThisSong, setSongList } from "@utils/reducerUtils";
+import { closeContextMenu, closeDeleteSongModal, closeEditPropertiesModal, closePlaylistModal, closePropertiesModal, processArrowKeysInput, selectThisSong, setSongList } from "@utils/reducerUtils";
import { variants_list } from "@content/index";
import { reducerType } from "@store/index";
@@ -31,6 +31,7 @@ const AlbumDetails = () => {
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.EditSong){ dispatch({ type: reducerType.SET_EDIT_SONG_MODAL, payload: true}); }
+ else if(arg === contextMenuButtons.Delete){ dispatch({ type: reducerType.SET_DELETE_MODAL, payload: true}); }
else if(arg === contextMenuButtons.PlayNext && state.songMenuToOpen){
addThisSongToPlayNext([state.songMenuToOpen.id]);
closeContextMenu(dispatch);
@@ -96,7 +97,7 @@ const AlbumDetails = () => {
else if(ev.target.id !== "gsearch" && state.selected >= 1 && state.selected <= state.SongList.length){
dispatch({type: reducerType.SET_SONG_MENU, payload: state.SongList[state.selected - 1]});
if(((ev.ctrlKey || ev.metaKey) && (ev.key === "p" || ev.key === "P" )) || ev.key === "Enter")chooseOption(contextMenuButtons.Play);
- else if((ev.ctrlKey || ev.metaKey) && (ev.key === "i" || ev.key === "I"))chooseOption(contextMenuButtons.ShowInfo);
+ else if((ev.ctrlKey || ev.metaKey) && !ev.shiftKey && (ev.key === "i" || ev.key === "I"))chooseOption(contextMenuButtons.ShowInfo);
else if((ev.ctrlKey || ev.metaKey) && ev.shiftKey && (ev.key === "a" || ev.key === "A"))chooseOption(contextMenuButtons.AddToPlaylist);
else if((ev.ctrlKey || ev.metaKey) && ev.shiftKey && (ev.key === "n" || ev.key === "N"))chooseOption(contextMenuButtons.PlayNext);
else if((ev.ctrlKey || ev.metaKey) && ev.shiftKey && (ev.key === "l" || ev.key === "L"))chooseOption(contextMenuButtons.PlayLater);
@@ -194,6 +195,7 @@ const AlbumDetails = () => {