{
- if (sort && sort.by === sortType) {
- if (sort.order === SortOrder.ASC) {
+const getIcon = (
+ sortBy: SortBy,
+ sortOrder: SortOrder,
+ sortByTarget: SortBy,
+) => {
+ if (sortBy === sortByTarget) {
+ if (sortOrder === 'Asc') {
return 'angle-up';
}
@@ -23,7 +27,8 @@ type Props = {
export default function TracksListHeader(props: Props) {
const { enableSort } = props;
- const sort = useLibraryStore((state) => state.sort);
+ const sortBy = useLibraryStore((state) => state.sortBy);
+ const sortOrder = useLibraryStore((state) => state.sortOrder);
return (
@@ -34,32 +39,32 @@ export default function TracksListHeader(props: Props) {
);
diff --git a/src/renderer/components/TracksListHeaderCell/TracksListHeaderCell.module.css b/src/components/TracksListHeaderCell/TracksListHeaderCell.module.css
similarity index 100%
rename from src/renderer/components/TracksListHeaderCell/TracksListHeaderCell.module.css
rename to src/components/TracksListHeaderCell/TracksListHeaderCell.module.css
diff --git a/src/renderer/components/TracksListHeaderCell/TracksListHeaderCell.tsx b/src/components/TracksListHeaderCell/TracksListHeaderCell.tsx
similarity index 95%
rename from src/renderer/components/TracksListHeaderCell/TracksListHeaderCell.tsx
rename to src/components/TracksListHeaderCell/TracksListHeaderCell.tsx
index 3b15f3ed7..ddb79a956 100644
--- a/src/renderer/components/TracksListHeaderCell/TracksListHeaderCell.tsx
+++ b/src/components/TracksListHeaderCell/TracksListHeaderCell.tsx
@@ -2,7 +2,7 @@ import React, { useCallback } from 'react';
import cx from 'classnames';
import Icon from 'react-fontawesome';
-import { SortBy } from '../../../shared/types/museeks';
+import { SortBy } from '../../generated/typings';
import { useLibraryAPI } from '../../stores/useLibraryStore';
import styles from './TracksListHeaderCell.module.css';
diff --git a/src/renderer/components/VolumeControl/VolumeControl.module.css b/src/components/VolumeControl/VolumeControl.module.css
similarity index 97%
rename from src/renderer/components/VolumeControl/VolumeControl.module.css
rename to src/components/VolumeControl/VolumeControl.module.css
index 8725192b1..bb3ea9b5f 100644
--- a/src/renderer/components/VolumeControl/VolumeControl.module.css
+++ b/src/components/VolumeControl/VolumeControl.module.css
@@ -4,7 +4,6 @@
}
.volumeControl {
- -webkit-app-region: no-drag;
background-color: var(--header-bg);
position: absolute;
z-index: 10;
diff --git a/src/renderer/components/VolumeControl/VolumeControl.tsx b/src/components/VolumeControl/VolumeControl.tsx
similarity index 100%
rename from src/renderer/components/VolumeControl/VolumeControl.tsx
rename to src/components/VolumeControl/VolumeControl.tsx
diff --git a/src/renderer/elements/Button/Button.module.css b/src/elements/Button/Button.module.css
similarity index 90%
rename from src/renderer/elements/Button/Button.module.css
rename to src/elements/Button/Button.module.css
index 9d98ca285..b93fe9175 100644
--- a/src/renderer/elements/Button/Button.module.css
+++ b/src/elements/Button/Button.module.css
@@ -7,6 +7,10 @@
cursor: pointer;
&:active {
+ opacity: 0.7;
+ }
+
+ &[disabled] {
opacity: 0.5;
}
}
diff --git a/src/renderer/elements/Button/Button.tsx b/src/elements/Button/Button.tsx
similarity index 100%
rename from src/renderer/elements/Button/Button.tsx
rename to src/elements/Button/Button.tsx
diff --git a/src/renderer/elements/ExternalLink/ExternalLink.module.css b/src/elements/ExternalLink/ExternalLink.module.css
similarity index 100%
rename from src/renderer/elements/ExternalLink/ExternalLink.module.css
rename to src/elements/ExternalLink/ExternalLink.module.css
diff --git a/src/renderer/elements/ExternalLink/ExternalLink.tsx b/src/elements/ExternalLink/ExternalLink.tsx
similarity index 85%
rename from src/renderer/elements/ExternalLink/ExternalLink.tsx
rename to src/elements/ExternalLink/ExternalLink.tsx
index 635819c5a..d97cdac59 100644
--- a/src/renderer/elements/ExternalLink/ExternalLink.tsx
+++ b/src/elements/ExternalLink/ExternalLink.tsx
@@ -1,9 +1,8 @@
import React, { useCallback } from 'react';
+import { open } from '@tauri-apps/plugin-shell';
import styles from './ExternalLink.module.css';
-const { shell } = window.MuseeksAPI;
-
type Props = {
children: string;
href: string;
@@ -13,7 +12,7 @@ export default function ExternalLink(props: Props) {
const openLink = useCallback(
(e: React.SyntheticEvent) => {
e.preventDefault();
- shell.openExternal(props.href);
+ open(props.href);
},
[props.href],
);
diff --git a/src/renderer/elements/Heart/Heart.module.css b/src/elements/Heart/Heart.module.css
similarity index 100%
rename from src/renderer/elements/Heart/Heart.module.css
rename to src/elements/Heart/Heart.module.css
diff --git a/src/renderer/elements/Heart/Heart.tsx b/src/elements/Heart/Heart.tsx
similarity index 100%
rename from src/renderer/elements/Heart/Heart.tsx
rename to src/elements/Heart/Heart.tsx
diff --git a/src/renderer/elements/Nav/Nav.module.css b/src/elements/Nav/Nav.module.css
similarity index 100%
rename from src/renderer/elements/Nav/Nav.module.css
rename to src/elements/Nav/Nav.module.css
diff --git a/src/renderer/elements/Nav/Nav.tsx b/src/elements/Nav/Nav.tsx
similarity index 100%
rename from src/renderer/elements/Nav/Nav.tsx
rename to src/elements/Nav/Nav.tsx
diff --git a/src/renderer/elements/Toast/Toast.module.css b/src/elements/Toast/Toast.module.css
similarity index 93%
rename from src/renderer/elements/Toast/Toast.module.css
rename to src/elements/Toast/Toast.module.css
index 896491f39..1707a6bdb 100644
--- a/src/renderer/elements/Toast/Toast.module.css
+++ b/src/elements/Toast/Toast.module.css
@@ -5,6 +5,7 @@
border-top-color: var(--border-color);
border-right-color: var(--border-color);
border-bottom-color: var(--border-color);
+ border-radius: var(--border-radius);
color: var(--text);
box-shadow: 0 5px 3px -5px rgba(0 0 0 0.5);
padding: 15px;
diff --git a/src/renderer/elements/Toast/Toast.tsx b/src/elements/Toast/Toast.tsx
similarity index 100%
rename from src/renderer/elements/Toast/Toast.tsx
rename to src/elements/Toast/Toast.tsx
diff --git a/src/renderer/elements/ViewMessage/ViewMessage.module.css b/src/elements/ViewMessage/ViewMessage.module.css
similarity index 100%
rename from src/renderer/elements/ViewMessage/ViewMessage.module.css
rename to src/elements/ViewMessage/ViewMessage.module.css
diff --git a/src/renderer/elements/ViewMessage/ViewMessage.tsx b/src/elements/ViewMessage/ViewMessage.tsx
similarity index 100%
rename from src/renderer/elements/ViewMessage/ViewMessage.tsx
rename to src/elements/ViewMessage/ViewMessage.tsx
diff --git a/src/generated/typings/index.ts b/src/generated/typings/index.ts
new file mode 100644
index 000000000..b77364840
--- /dev/null
+++ b/src/generated/typings/index.ts
@@ -0,0 +1,13 @@
+/**
+ * Re-export of types generates by ts-rs
+ */
+export type { Config } from './Config';
+export type { DefaultView } from './DefaultView';
+export type { IPCEvent } from './IPCEvent';
+export type { NumberOf } from './NumberOf';
+export type { Playlist } from './Playlist';
+export type { Progress } from './Progress';
+export type { Repeat } from './Repeat';
+export type { SortBy } from './SortBy';
+export type { SortOrder } from './SortOrder';
+export type { Track } from './Track';
diff --git a/src/hooks/useCover.ts b/src/hooks/useCover.ts
new file mode 100644
index 000000000..df2d6e48f
--- /dev/null
+++ b/src/hooks/useCover.ts
@@ -0,0 +1,22 @@
+import { useEffect, useState } from 'react';
+
+import { Track } from '../generated/typings';
+import library from '../lib/library';
+
+/**
+ * Given a track, get its associated cover as an Image src
+ */
+export default function useCover(track: Track): string | null {
+ const [coverPath, setCoverPath] = useState
(null);
+
+ useEffect(() => {
+ const refreshCover = async () => {
+ const cover = await library.getCover(track.path);
+ setCoverPath(cover);
+ };
+
+ refreshCover();
+ }, [track.path]);
+
+ return coverPath;
+}
diff --git a/src/renderer/hooks/useDebounce.ts b/src/hooks/useDebounce.ts
similarity index 100%
rename from src/renderer/hooks/useDebounce.ts
rename to src/hooks/useDebounce.ts
diff --git a/src/hooks/useFilteredTracks.ts b/src/hooks/useFilteredTracks.ts
new file mode 100644
index 000000000..4150e7cea
--- /dev/null
+++ b/src/hooks/useFilteredTracks.ts
@@ -0,0 +1,23 @@
+import { useMemo } from 'react';
+
+import { filterTracks, sortTracks } from '../lib/utils-library';
+import SORT_ORDERS from '../lib/sort-orders';
+import useLibraryStore from '../stores/useLibraryStore';
+import { Track } from '../generated/typings';
+import { stripAccents } from '../lib/utils-id3';
+
+export default function useFilteredTracks(tracks: Track[]): Track[] {
+ const search = useLibraryStore((state) => stripAccents(state.search));
+ const sortBy = useLibraryStore((state) => state.sortBy);
+ const sortOrder = useLibraryStore((state) => state.sortOrder);
+
+ // Filter and sort TracksList
+ // sorting being a costly operation, do it after filtering
+ const filteredTracks = useMemo(
+ () =>
+ sortTracks(filterTracks(tracks, search), SORT_ORDERS[sortBy][sortOrder]),
+ [tracks, search, sortBy, sortOrder],
+ );
+
+ return filteredTracks;
+}
diff --git a/src/renderer/hooks/usePlayingTrack.ts b/src/hooks/usePlayingTrack.ts
similarity index 66%
rename from src/renderer/hooks/usePlayingTrack.ts
rename to src/hooks/usePlayingTrack.ts
index 6153b3c01..7ce434f40 100644
--- a/src/renderer/hooks/usePlayingTrack.ts
+++ b/src/hooks/usePlayingTrack.ts
@@ -1,7 +1,7 @@
-import { TrackModel } from '../../shared/types/museeks';
+import { Track } from '../generated/typings';
import usePlayerStore from '../stores/usePlayerStore';
-export default function usePlayingTrack(): TrackModel | null {
+export default function usePlayingTrack(): Track | null {
return usePlayerStore((state) => {
if (state.queue.length > 0 && state.queueCursor !== null) {
return state.queue[state.queueCursor];
diff --git a/src/renderer/hooks/usePlayingTrackCurrentTime.ts b/src/hooks/usePlayingTrackCurrentTime.ts
similarity index 100%
rename from src/renderer/hooks/usePlayingTrackCurrentTime.ts
rename to src/hooks/usePlayingTrackCurrentTime.ts
diff --git a/src/renderer/hooks/usePlayingTrackID.ts b/src/hooks/usePlayingTrackID.ts
similarity index 100%
rename from src/renderer/hooks/usePlayingTrackID.ts
rename to src/hooks/usePlayingTrackID.ts
diff --git a/src/shared/lib/__tests__/ipc-channels.test.ts b/src/lib/__tests__/ipc-channels.test.ts
similarity index 100%
rename from src/shared/lib/__tests__/ipc-channels.test.ts
rename to src/lib/__tests__/ipc-channels.test.ts
diff --git a/src/shared/lib/__tests__/themes.test.ts b/src/lib/__tests__/themes.test.ts
similarity index 90%
rename from src/shared/lib/__tests__/themes.test.ts
rename to src/lib/__tests__/themes.test.ts
index da0d293b8..653b425e0 100644
--- a/src/shared/lib/__tests__/themes.test.ts
+++ b/src/lib/__tests__/themes.test.ts
@@ -1,6 +1,8 @@
import { describe, test, expect } from 'vitest';
-import { themes } from '../themes';
+import { themes as themesMap } from '../themes';
+
+const themes = Object.values(themesMap);
describe('themes', () => {
test('themes should have a unique identifier', () => {
diff --git a/src/lib/config.ts b/src/lib/config.ts
new file mode 100644
index 000000000..c503358d3
--- /dev/null
+++ b/src/lib/config.ts
@@ -0,0 +1,49 @@
+import { invoke } from '@tauri-apps/api/core';
+
+import type { Config } from '../generated/typings';
+
+import { logAndNotifyError } from './utils';
+
+/**
+ * Config Bridge for the UI to communicate with the backend
+ */
+class ConfigManager {
+ initialConfig: Config | null = null;
+
+ /**
+ * Get the initial value of the config at the time of instantiation.
+ * Should only be used when starting the app.
+ */
+ getInitial(key: T): Config[T] {
+ if (window.__MUSEEKS_INITIAL_CONFIG == undefined) {
+ throw new Error('Config has not been injected from the back-end');
+ }
+
+ return window.__MUSEEKS_INITIAL_CONFIG[key];
+ }
+
+ async getAll(): Promise {
+ // TODO: check data shape?
+ return invoke('plugin:config|get_config');
+ }
+
+ async get(key: T): Promise {
+ const config = await this.getAll();
+ return config[key];
+ }
+
+ async set(key: T, value: Config[T]): Promise {
+ const config = await this.getAll();
+ config[key] = value;
+
+ try {
+ invoke('plugin:config|set_config', { config });
+ } catch (err) {
+ logAndNotifyError(err);
+ }
+
+ return;
+ }
+}
+
+export default new ConfigManager();
diff --git a/src/lib/icons.ts b/src/lib/icons.ts
new file mode 100644
index 000000000..392129a83
--- /dev/null
+++ b/src/lib/icons.ts
@@ -0,0 +1,23 @@
+/* eslint-disable import/no-unresolved */
+
+import NEXT from '../assets/icons/player-next.svg?raw';
+import PAUSE from '../assets/icons/player-pause.svg?raw';
+import PLAY from '../assets/icons/player-play.svg?raw';
+import PREVIOUS from '../assets/icons/player-previous.svg?raw';
+import QUEUE from '../assets/icons/player-queue.svg?raw';
+import REPEAT_ONE from '../assets/icons/player-repeat-one.svg?raw';
+import REPEAT from '../assets/icons/player-repeat.svg?raw';
+import SHUFFLE from '../assets/icons/player-shuffle.svg?raw';
+
+const icons = {
+ NEXT,
+ PAUSE,
+ PLAY,
+ PREVIOUS,
+ QUEUE,
+ REPEAT_ONE,
+ REPEAT,
+ SHUFFLE,
+};
+
+export default icons;
diff --git a/src/shared/lib/ipc-channels.ts b/src/lib/ipc-channels.ts
similarity index 100%
rename from src/shared/lib/ipc-channels.ts
rename to src/lib/ipc-channels.ts
diff --git a/src/lib/library.ts b/src/lib/library.ts
new file mode 100644
index 000000000..7995e9d06
--- /dev/null
+++ b/src/lib/library.ts
@@ -0,0 +1,106 @@
+import { convertFileSrc, invoke } from '@tauri-apps/api/core';
+
+import type { Playlist, Track } from '../generated/typings';
+
+/**
+ * Library Bridge for the UI to communicate with the backend
+ */
+const library = {
+ // ---------------------------------------------------------------------------
+ // Playlists read/write actions
+ // ---------------------------------------------------------------------------
+
+ async getAllTracks(): Promise> {
+ return invoke('plugin:database|get_all_tracks');
+ },
+
+ async getTracks(trackIDs: Array): Promise> {
+ return invoke('plugin:database|get_tracks', {
+ ids: trackIDs,
+ });
+ },
+
+ async updateTrack(track: Track) {
+ // TODO:
+ throw new Error('Not implemented');
+ },
+
+ async removeTracks(trackIDs: Array): Promise> {
+ return invoke('plugin:database|remove_tracks', {
+ ids: trackIDs,
+ });
+ },
+
+ async importTracks(importPaths: Array): Promise {
+ return invoke('plugin:database|import_tracks_to_library', {
+ importPaths,
+ });
+ },
+
+ // ---------------------------------------------------------------------------
+ // Playlists read/write actions
+ // ---------------------------------------------------------------------------
+
+ async getAllPlaylists(): Promise> {
+ return invoke('plugin:database|get_all_playlists');
+ },
+
+ async getPlaylist(id: string): Promise {
+ return invoke('plugin:database|get_playlist', {
+ id,
+ });
+ },
+
+ async createPlaylist(name: string, tracks: Array): Promise {
+ return invoke('plugin:database|create_playlist', {
+ name,
+ tracks,
+ });
+ },
+
+ async renamePlaylist(id: string, name: string): Promise {
+ return invoke('plugin:database|rename_playlist', {
+ id,
+ name,
+ });
+ },
+
+ async setPlaylistTracks(
+ id: string,
+ tracks: Array,
+ ): Promise {
+ return invoke('plugin:database|set_playlist_tracks', {
+ id,
+ tracks,
+ });
+ },
+
+ async deletePlaylist(id: string): Promise {
+ return invoke('plugin:database|delete_playlist', {
+ id,
+ });
+ },
+
+ // ---------------------------------------------------------------------------
+ // Misc.
+ // ---------------------------------------------------------------------------
+ async reset(): Promise {
+ return invoke('plugin:database|reset');
+ },
+
+ async getCover(path: string): Promise {
+ const cover = await invoke('plugin:cover|get_cover', {
+ path,
+ });
+
+ if (cover === null) {
+ return null;
+ }
+
+ return cover.startsWith('data:') ? cover : convertFileSrc(cover);
+ },
+
+ // removeTracks
+};
+
+export default library;
diff --git a/src/shared/lib/logger.ts b/src/lib/logger.ts
similarity index 100%
rename from src/shared/lib/logger.ts
rename to src/lib/logger.ts
diff --git a/src/renderer/lib/player.ts b/src/lib/player.ts
similarity index 65%
rename from src/renderer/lib/player.ts
rename to src/lib/player.ts
index 3114973ed..971afdf56 100644
--- a/src/renderer/lib/player.ts
+++ b/src/lib/player.ts
@@ -1,4 +1,9 @@
-import { TrackModel } from '../../shared/types/museeks';
+import { convertFileSrc } from '@tauri-apps/api/core';
+
+import { Track } from '../generated/typings';
+
+import config from './config';
+import { logAndNotifyError } from './utils';
interface PlayerOptions {
playbackRate?: number;
@@ -17,9 +22,7 @@ interface PlayerOptions {
*/
class Player {
private audio: HTMLAudioElement;
- private durationThresholdReached: boolean;
- private track: TrackModel | null;
- public threshold: number;
+ private track: Track | null;
constructor(options?: PlayerOptions) {
const mergedOptions = {
@@ -36,13 +39,11 @@ class Player {
this.audio.defaultPlaybackRate = mergedOptions.playbackRate;
// eslint-disable-next-line
// @ts-ignore
- this.audio.setSinkId(mergedOptions.audioOutputDevice);
+ // TODO:
+ // this.audio.setSinkId(mergedOptions.audioOutputDevice);
this.audio.playbackRate = mergedOptions.playbackRate;
this.audio.volume = mergedOptions.volume;
this.audio.muted = mergedOptions.muted;
-
- this.threshold = 0.75;
- this.durationThresholdReached = false;
}
async play() {
@@ -90,21 +91,22 @@ class Player {
}
async setOutputDevice(deviceID: string) {
- // eslint-disable-next-line
- // @ts-ignore
- await this.audio.setSinkId(deviceID);
+ try {
+ // eslint-disable-next-line
+ // @ts-ignore
+ await this.audio.setSinkId(deviceID);
+ } catch (err) {
+ logAndNotifyError(err);
+ }
}
getTrack() {
return this.track;
}
- setTrack(track: TrackModel) {
+ setTrack(track: Track) {
this.track = track;
- this.audio.src = window.MuseeksAPI.library.parseUri(track.path);
-
- // When we change song, need to update the thresholdReached indicator.
- this.durationThresholdReached = false;
+ this.audio.src = convertFileSrc(track.path);
}
setCurrentTime(currentTime: number) {
@@ -118,28 +120,16 @@ class Player {
isPaused() {
return this.audio.paused;
}
-
- isThresholdReached() {
- if (
- !this.durationThresholdReached &&
- this.audio.currentTime >= this.audio.duration * this.threshold
- ) {
- this.durationThresholdReached = true;
- }
-
- return this.durationThresholdReached;
- }
}
/**
* Export a singleton by default, for the sake of simplicity (and we only need
* one anyway)
*/
-const { config } = window.MuseeksAPI;
export default new Player({
- volume: config.__initialConfig['audioVolume'],
- playbackRate: config.__initialConfig['audioPlaybackRate'],
- audioOutputDevice: config.__initialConfig['audioOutputDevice'],
- muted: config.__initialConfig['audioMuted'],
+ volume: config.getInitial('audio_volume'),
+ playbackRate: config.getInitial('audio_playback_rate'),
+ audioOutputDevice: config.getInitial('audio_output_device'),
+ muted: config.getInitial('audio_muted'),
});
diff --git a/src/lib/query.ts b/src/lib/query.ts
new file mode 100644
index 000000000..3382ebccb
--- /dev/null
+++ b/src/lib/query.ts
@@ -0,0 +1,17 @@
+import { QueryClient } from '@tanstack/react-query';
+
+import router from '../views/router';
+
+export const queryClient = new QueryClient();
+
+export function invalidate() {
+ // Need to call mutate with undefined to make sure stale-while-revalidate is
+ // reset (otherwise, we'd see a "no tracks in the library" instead of "loading")
+ queryClient.invalidateQueries({
+ exact: true,
+ queryKey: ['tracks'],
+ });
+
+ // Reload the route data
+ router.revalidate();
+}
diff --git a/src/lib/sort-orders.ts b/src/lib/sort-orders.ts
new file mode 100644
index 000000000..43c4013ab
--- /dev/null
+++ b/src/lib/sort-orders.ts
@@ -0,0 +1,68 @@
+import { SortOrder, SortBy, Track } from '../generated/typings';
+import { Path } from '../types/museeks';
+
+import { stripAccents } from './utils-id3';
+
+// For perforances reasons, otherwise _.orderBy will perform weird check
+// the is far more resource/time impactful
+const getArtist = (t: Track): string =>
+ stripAccents(t.artists.toString().toLowerCase());
+const getGenre = (t: Track): string =>
+ stripAccents(t.genres.toString().toLowerCase());
+const getAlbum = (t: Track): string => stripAccents(t.album.toLowerCase());
+const getTitle = (t: Track): string => stripAccents(t.title.toLowerCase());
+
+type TrackKeys = Path