make filebrowser full width in narrow mode, add toasts for adding items

AuthorKonata <konata@posteo.jp>
Date
Commit58f0d75e94022de486375a3805739d9a7f62181b
Parent5f1b52f
3 files changed, 10 insertions(+), 18 deletions(-)
▾Mwebclient/src/components/FileBrowser.css
@@ -132,18 +132,10 @@
.file-browser {
z-index: 1;
position: absolute;
width: 80%;
width: 100%;
box-shadow: 0 0 40px rgba(0, 0, 0, 0.8);
}
.file-browser-overlay {
z-index: 1;
position: absolute;
left: 80%;
height: 100%;
width: 20%;
}
.hidden {
display: none;
}
▾Mwebclient/src/components/FileBrowser.tsx
@@ -15,7 +15,7 @@ import {
} from "solid-js";
import type { MediaFile, FileListing, Directory } from "music-server-shared/types";
import type { AppOptions, PlaylistItem } from "../types";
import { generateUUID, joinPath, LocalStorageValues } from "../utils";
import { generateUUID, joinPath, LocalStorageValues, toast } from "../utils";
import { ClosedFolderSVG, DownSVG, MusicSVG, RefreshSVG, UpSVG } from "./SVG";
import { clearCoverCache as deleteCover, clearDirectoryCache, getCover, listFiles } from "../offline";
import { DownloadButton } from "./DownloadButton";
@@ -95,6 +95,9 @@ export default function FileBrowser(props: FileBrowserProps) {
element.scrollTop = element.scrollHeight;
}
const addedToast = toast("", "info");
addedToast.hideToast();
async function playFiles(fileName: string, recursive: boolean, queue: boolean, item?: MediaFile) {
if (recursive) {
setLoadingActions(loadingActions() + 1);
@@ -116,7 +119,11 @@ export default function FileBrowser(props: FileBrowserProps) {
const addAction = () => {
if (newPlaylist.length !== 0 && oldLength === 0) props.playTrack(newPlaylist[0]);
props.setPlaylist([...oldPlaylist, ...newPlaylist]);
addedToast.hideToast();
addedToast.options.text = `Added ${newPlaylist.length} tracks`;
addedToast.showToast();
if (queue) scrollPlaylistToBottom();
else props.setShowFileBrowser(false);
};
if (
props.options.duplicateWarning &&
@@ -321,11 +328,6 @@ export default function FileBrowser(props: FileBrowserProps) {
<LoadingScreen text="Loading files from subdirectories, this might take a while.." />
</Show>
</div>
<div
class="file-browser-overlay"
style={{ display: props.showFileBrowser() ? "block" : "none" }}
onClick={() => props.setShowFileBrowser(false)}
/>
</>
);
}
▾Mwebclient/src/components/Playlist.tsx
@@ -66,7 +66,7 @@ export default function Playlist(props: PlaylistProps) {
async function syncPlaylist() {
if (syncing()) return;
setSyncing(true);
const progressToast = toast("Syncing files in playlist...", "progress");
const progressToast = toast("Started playlist sync", "info");
try {
const itemsToSync: PlaylistItem[] = [];
const playlist = props.playlist();
@@ -85,8 +85,6 @@ export default function Playlist(props: PlaylistProps) {
});
await Promise.allSettled(downloadPromises);
toast("Playlist sync completed", "success");
} catch (e) {
toast("Playlist sync failed", "error", e);
} finally {
progressToast.hideToast();
setSyncing(false);