mirror of
https://github.com/Zagrios/bs-manager.git
synced 2026-07-03 14:08:25 +02:00
[chore] prettify + config prettier
This commit is contained in:
MathieuG-P
@@ -13,8 +13,8 @@ import { PageStateService } from "../services/page-state.service";
|
||||
import { SharedContentsPage } from "../pages/shared-contents-page.component";
|
||||
import "tailwindcss/tailwind.css";
|
||||
import { BsmIframeView } from "../components/shared/iframe-view.component";
|
||||
import 'tippy.js/dist/tippy.css';
|
||||
import 'tippy.js/animations/shift-away-subtle.css';
|
||||
import "tippy.js/dist/tippy.css";
|
||||
import "tippy.js/animations/shift-away-subtle.css";
|
||||
import { MapsManagerService } from "renderer/services/maps-manager.service";
|
||||
import { PlaylistsManagerService } from "renderer/services/playlists-manager.service";
|
||||
import { ModelsManagerService } from "renderer/services/models-management/models-manager.service";
|
||||
@@ -25,7 +25,6 @@ import { OsDiagnosticService } from "renderer/services/os-diagnostic.service";
|
||||
import { useService } from "renderer/hooks/use-service.hook";
|
||||
|
||||
export default function App() {
|
||||
|
||||
useService(OsDiagnosticService);
|
||||
const themeService = useService(ThemeService);
|
||||
const pageState = useService(PageStateService);
|
||||
@@ -40,82 +39,82 @@ export default function App() {
|
||||
|
||||
useEffect(() => {
|
||||
themeService.theme$.subscribe(() => {
|
||||
if(themeService.isDark || (themeService.isOS && window.matchMedia('(prefers-color-scheme: dark)').matches)){ return document.documentElement.classList.add('dark'); }
|
||||
document.documentElement.classList.remove('dark');
|
||||
if (themeService.isDark || (themeService.isOS && window.matchMedia("(prefers-color-scheme: dark)").matches)) {
|
||||
return document.documentElement.classList.add("dark");
|
||||
}
|
||||
document.documentElement.classList.remove("dark");
|
||||
});
|
||||
|
||||
checkOneClicks();
|
||||
|
||||
}, []);
|
||||
|
||||
const checkOneClicks = async () => {
|
||||
|
||||
if(config.get("not-remind-oneclick") === true){ return; }
|
||||
if (config.get("not-remind-oneclick") === true) {
|
||||
return;
|
||||
}
|
||||
|
||||
await timer(3_000).toPromise();
|
||||
|
||||
const oneClicks = await Promise.all([
|
||||
maps.isDeepLinksEnabled(),
|
||||
playlists.isDeepLinksEnabled(),
|
||||
models.isDeepLinksEnabled()
|
||||
]);
|
||||
const oneClicks = await Promise.all([maps.isDeepLinksEnabled(), playlists.isDeepLinksEnabled(), models.isDeepLinksEnabled()]);
|
||||
|
||||
if(!oneClicks.some(enabled => enabled === false)){ return; }
|
||||
if (!oneClicks.some(enabled => enabled === false)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const choice = await notification.notifyWarning({
|
||||
title: "notifications.settings.additional-content.deep-link.check-all-enabled.title",
|
||||
title: "notifications.settings.additional-content.deep-link.check-all-enabled.title",
|
||||
desc: "notifications.settings.additional-content.deep-link.check-all-enabled.description",
|
||||
duration: 10_000,
|
||||
actions: [
|
||||
{id: "0", title: "notifications.settings.additional-content.deep-link.check-all-enabled.actions.settings"},
|
||||
{id: "1", title: "notifications.settings.additional-content.deep-link.check-all-enabled.actions.not-remind", cancel: true}
|
||||
]
|
||||
{ id: "0", title: "notifications.settings.additional-content.deep-link.check-all-enabled.actions.settings" },
|
||||
{ id: "1", title: "notifications.settings.additional-content.deep-link.check-all-enabled.actions.not-remind", cancel: true },
|
||||
],
|
||||
});
|
||||
|
||||
if(choice === "0"){
|
||||
if (choice === "0") {
|
||||
return navigate("/settings#one-clicks");
|
||||
}
|
||||
|
||||
if(choice === "1"){
|
||||
if (choice === "1") {
|
||||
config.set("not-remind-oneclick", true);
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
pageState.setLocation(location);
|
||||
|
||||
if(!location.hash){ return; }
|
||||
if (!location.hash) {
|
||||
return;
|
||||
}
|
||||
|
||||
const hash = location.hash.replace("#", "");
|
||||
const el = document.getElementById(hash);
|
||||
|
||||
if(!el){ return; }
|
||||
if (!el) {
|
||||
return;
|
||||
}
|
||||
|
||||
el.scrollIntoView({block: "start", behavior: "smooth"});
|
||||
el.scrollIntoView({ block: "start", behavior: "smooth" });
|
||||
}, [location]);
|
||||
|
||||
}, [location])
|
||||
|
||||
|
||||
return (
|
||||
<div className="relative w-screen h-screen overflow-hidden flex bg-light-main-color-1 dark:bg-main-color-1 z-0 max-w-full">
|
||||
<Modal/>
|
||||
<NavBar/>
|
||||
<NotificationOverlay/>
|
||||
<BsmIframeView/>
|
||||
<div className="relative flex flex-col grow max-w-full min-w-0">
|
||||
<TitleBar template="index.html"/>
|
||||
<div className="bg-light-main-color-2 dark:bg-main-color-2 relative rounded-tl-lg grow overflow-hidden max-w-full">
|
||||
<Routes>
|
||||
<Route path="/bs-version/:versionNumber" element={<VersionViewer/>}/>
|
||||
<Route path="/shared" element={<SharedContentsPage/>}/>
|
||||
<Route path="/settings" element={<SettingsPage/>}/>
|
||||
<Route path="*" element={<AvailableVersionsList/>}/>
|
||||
</Routes>
|
||||
<BsmProgressBar/>
|
||||
return (
|
||||
<div className="relative w-screen h-screen overflow-hidden flex bg-light-main-color-1 dark:bg-main-color-1 z-0 max-w-full">
|
||||
<Modal />
|
||||
<NavBar />
|
||||
<NotificationOverlay />
|
||||
<BsmIframeView />
|
||||
<div className="relative flex flex-col grow max-w-full min-w-0">
|
||||
<TitleBar template="index.html" />
|
||||
<div className="bg-light-main-color-2 dark:bg-main-color-2 relative rounded-tl-lg grow overflow-hidden max-w-full">
|
||||
<Routes>
|
||||
<Route path="/bs-version/:versionNumber" element={<VersionViewer />} />
|
||||
<Route path="/shared" element={<SharedContentsPage />} />
|
||||
<Route path="/settings" element={<SettingsPage />} />
|
||||
<Route path="*" element={<AvailableVersionsList />} />
|
||||
</Routes>
|
||||
<BsmProgressBar />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
);
|
||||
}
|
||||
|
||||
@@ -9,7 +9,6 @@ import { ThemeService } from "../services/theme.service";
|
||||
import { WindowManagerService } from "../services/window-manager.service";
|
||||
|
||||
export default function Launcher() {
|
||||
|
||||
const themeService = ThemeService.getInstance();
|
||||
const updaterService = AutoUpdaterService.getInstance();
|
||||
const windowService = WindowManagerService.getInstance();
|
||||
@@ -20,20 +19,25 @@ export default function Launcher() {
|
||||
|
||||
const t = useTranslation();
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
const sub = themeService.theme$.subscribe(() => {
|
||||
if(themeService.isDark || (themeService.isOS && window.matchMedia('(prefers-color-scheme: dark)').matches)){ document.documentElement.classList.add('dark'); }
|
||||
else { document.documentElement.classList.remove('dark'); }
|
||||
if (themeService.isDark || (themeService.isOS && window.matchMedia("(prefers-color-scheme: dark)").matches)) {
|
||||
document.documentElement.classList.add("dark");
|
||||
} else {
|
||||
document.documentElement.classList.remove("dark");
|
||||
}
|
||||
});
|
||||
|
||||
updaterService.isUpdateAvailable().then(available => {
|
||||
if(!available){ return windowService.openThenCloseAll("index.html"); }
|
||||
if (!available) {
|
||||
return windowService.openThenCloseAll("index.html");
|
||||
}
|
||||
setText("auto-update.downloading");
|
||||
updaterService.downloadUpdate().then(installed => {
|
||||
if(!installed){ return windowService.openThenCloseAll("index.html"); }
|
||||
updaterService.quitAndInstall()
|
||||
if (!installed) {
|
||||
return windowService.openThenCloseAll("index.html");
|
||||
}
|
||||
updaterService.quitAndInstall();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -42,16 +46,16 @@ export default function Launcher() {
|
||||
|
||||
return (
|
||||
<div className="w-full h-full">
|
||||
<TitleBar template="launcher.html"/>
|
||||
<TitleBar template="launcher.html" />
|
||||
<div className="relative flex flex-col items-center justify-center pt-10">
|
||||
<motion.div ref={constraintsRef}>
|
||||
<motion.div drag dragConstraints={constraintsRef} animate={{rotate: [0, 10, 0]}} transition={{ duration: .6, repeat: Infinity, repeatDelay: 1.6 }}>
|
||||
<BsManagerIcon className="w-52 cursor-pointer"/>
|
||||
<motion.div drag dragConstraints={constraintsRef} animate={{ rotate: [0, 10, 0] }} transition={{ duration: 0.6, repeat: Infinity, repeatDelay: 1.6 }}>
|
||||
<BsManagerIcon className="w-52 cursor-pointer" />
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
<span className="relative text-lg mt-16 mb-24 uppercase italic text-main-color-1 dark:text-gray-200">{t(text)}</span>
|
||||
<BsmProgressBar/>
|
||||
<BsmProgressBar />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@@ -12,10 +12,9 @@ import { BeatSaverService } from "renderer/services/thrird-partys/beat-saver.ser
|
||||
import { WindowManagerService } from "renderer/services/window-manager.service";
|
||||
import { timer } from "rxjs";
|
||||
import { BsvMapDetail } from "shared/models/maps";
|
||||
import defaultImage from '../../../../assets/images/default-version-img.jpg'
|
||||
import defaultImage from "../../../../assets/images/default-version-img.jpg";
|
||||
|
||||
export default function OneClickDownloadMap() {
|
||||
|
||||
const ipc = IpcService.getInstance();
|
||||
const bsv = BeatSaverService.getInstance();
|
||||
const mapsDownloader = MapsDownloaderService.getInstance();
|
||||
@@ -31,70 +30,70 @@ export default function OneClickDownloadMap() {
|
||||
const title = mapInfo ? mapInfo.name : null;
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
const sub = themeService.theme$.subscribe(() => {
|
||||
if(themeService.isDark || (themeService.isOS && window.matchMedia('(prefers-color-scheme: dark)').matches)){ document.documentElement.classList.add('dark'); }
|
||||
else { document.documentElement.classList.remove('dark'); }
|
||||
if (themeService.isDark || (themeService.isOS && window.matchMedia("(prefers-color-scheme: dark)").matches)) {
|
||||
document.documentElement.classList.add("dark");
|
||||
} else {
|
||||
document.documentElement.classList.remove("dark");
|
||||
}
|
||||
});
|
||||
|
||||
progressBar.open();
|
||||
|
||||
const promise = new Promise<void>(async (resolve, reject) => {
|
||||
try {
|
||||
const ipcRes = await ipc.send<{ id: string; isHash: boolean }>("one-click-map-info");
|
||||
|
||||
try{
|
||||
|
||||
const ipcRes = await ipc.send<{id: string, isHash: boolean}>("one-click-map-info");
|
||||
|
||||
if(!ipcRes.success){ return reject(ipcRes.error); }
|
||||
if (!ipcRes.success) {
|
||||
return reject(ipcRes.error);
|
||||
}
|
||||
|
||||
const mapDetails = ipcRes.data.isHash ? (await bsv.getMapDetailsFromHashs([ipcRes.data.id])).at(0) : await bsv.getMapDetailsById(ipcRes.data.id);
|
||||
|
||||
|
||||
setMapInfo(() => mapDetails);
|
||||
|
||||
|
||||
const res = await mapsDownloader.oneClickInstallMap(mapDetails);
|
||||
|
||||
progressBar.complete();
|
||||
|
||||
if(!res){ return reject(); }
|
||||
if (!res) {
|
||||
return reject();
|
||||
}
|
||||
|
||||
await timer(300).toPromise();
|
||||
|
||||
resolve();
|
||||
}
|
||||
catch(e){
|
||||
} catch (e) {
|
||||
reject(e);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
promise.catch(() => {
|
||||
notification.notifySystem({title: t("notifications.types.error"), body: t("notifications.maps.one-click-install.error")});
|
||||
notification.notifySystem({ title: t("notifications.types.error"), body: t("notifications.maps.one-click-install.error") });
|
||||
});
|
||||
|
||||
promise.then(() => {
|
||||
notification.notifySystem({title: "OneClick", body: t("notifications.maps.one-click-install.success")});
|
||||
notification.notifySystem({ title: "OneClick", body: t("notifications.maps.one-click-install.success") });
|
||||
});
|
||||
|
||||
promise.finally(() =>{
|
||||
promise.finally(() => {
|
||||
windows.close("oneclick-download-map.html");
|
||||
});
|
||||
|
||||
return () => {
|
||||
sub.unsubscribe();
|
||||
}
|
||||
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="relative w-screen h-screen overflow-hidden">
|
||||
{cover && <BsmImage className="absolute top-0 left-0 w-full h-full object-cover" image={cover}/>}
|
||||
{cover && <BsmImage className="absolute top-0 left-0 w-full h-full object-cover" image={cover} />}
|
||||
<div className="w-full h-full backdrop-brightness-50 backdrop-blur-md flex flex-col justify-start items-center gap-10">
|
||||
<TitleBar template="oneclick-download-map.html"/>
|
||||
<BsmImage className="aspect-square w-1/2 object-cover rounded-md shadow-black shadow-lg" placeholder={defaultImage} image={cover} errorImage={defaultImage}/>
|
||||
<TitleBar template="oneclick-download-map.html" />
|
||||
<BsmImage className="aspect-square w-1/2 object-cover rounded-md shadow-black shadow-lg" placeholder={defaultImage} image={cover} errorImage={defaultImage} />
|
||||
<h1 className="overflow-hidden font-bold italic text-xl text-gray-200 tracking-wide w-full text-center whitespace-nowrap text-ellipsis px-2">{title}</h1>
|
||||
</div>
|
||||
<BsmProgressBar/>
|
||||
<BsmProgressBar />
|
||||
</div>
|
||||
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@@ -10,19 +10,18 @@ import { ThemeService } from "renderer/services/theme.service";
|
||||
import { ModelSaberService } from "renderer/services/thrird-partys/model-saber.service";
|
||||
import { WindowManagerService } from "renderer/services/window-manager.service";
|
||||
import { MSModel } from "shared/models/models/model-saber.model";
|
||||
import defaultImage from '../../../../assets/images/default-version-img.jpg'
|
||||
import defaultImage from "../../../../assets/images/default-version-img.jpg";
|
||||
import { ModelsDownloaderService } from "renderer/services/models-management/models-downloader.service";
|
||||
import { useService } from "renderer/hooks/use-service.hook";
|
||||
|
||||
export default function OneClickDownloadModel() {
|
||||
|
||||
const ipc = useService(IpcService)
|
||||
const ipc = useService(IpcService);
|
||||
const themeService = useService(ThemeService);
|
||||
const modelSaber = useService(ModelSaberService)
|
||||
const progress = useService(ProgressBarService)
|
||||
const modelDownloader = useService(ModelsDownloaderService)
|
||||
const windows = useService(WindowManagerService)
|
||||
const notification = useService(NotificationService)
|
||||
const modelSaber = useService(ModelSaberService);
|
||||
const progress = useService(ProgressBarService);
|
||||
const modelDownloader = useService(ModelsDownloaderService);
|
||||
const windows = useService(WindowManagerService);
|
||||
const notification = useService(NotificationService);
|
||||
|
||||
const [model, setModel] = useState<MSModel>(null);
|
||||
const t = useTranslation();
|
||||
@@ -31,59 +30,64 @@ export default function OneClickDownloadModel() {
|
||||
const title = model ? model.name : null;
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
const sub = themeService.theme$.subscribe(() => {
|
||||
if(themeService.isDark || (themeService.isOS && window.matchMedia('(prefers-color-scheme: dark)').matches)){ document.documentElement.classList.add('dark'); }
|
||||
else { document.documentElement.classList.remove('dark'); }
|
||||
if (themeService.isDark || (themeService.isOS && window.matchMedia("(prefers-color-scheme: dark)").matches)) {
|
||||
document.documentElement.classList.add("dark");
|
||||
} else {
|
||||
document.documentElement.classList.remove("dark");
|
||||
}
|
||||
});
|
||||
|
||||
const promise = new Promise(async (resolve, reject) => {
|
||||
const infos = await ipc.send<{ id: string; type: string }>("one-click-model-info");
|
||||
|
||||
const infos = await ipc.send<{id: string, type: string}>("one-click-model-info");
|
||||
|
||||
if(!infos.success){ return reject(); }
|
||||
if (!infos.success) {
|
||||
return reject();
|
||||
}
|
||||
|
||||
const model = await modelSaber.getModelById(infos.data.id);
|
||||
|
||||
if(!model){ return reject(); }
|
||||
|
||||
if (!model) {
|
||||
return reject();
|
||||
}
|
||||
|
||||
setModel(() => model);
|
||||
|
||||
progress.open();
|
||||
|
||||
const res = await modelDownloader.oneClickInstallModel(model);
|
||||
|
||||
if(!res){ return reject(); }
|
||||
if (!res) {
|
||||
return reject();
|
||||
}
|
||||
|
||||
resolve(res);
|
||||
|
||||
});
|
||||
|
||||
promise.catch(() => {
|
||||
notification.notifySystem({title: t("notifications.types.error"), body: t("notifications.models.one-click-install.error")});
|
||||
})
|
||||
notification.notifySystem({ title: t("notifications.types.error"), body: t("notifications.models.one-click-install.error") });
|
||||
});
|
||||
|
||||
promise.then(() => {
|
||||
notification.notifySystem({title: "OneClick", body: t("notifications.models.one-click-install.success")});
|
||||
notification.notifySystem({ title: "OneClick", body: t("notifications.models.one-click-install.success") });
|
||||
});
|
||||
|
||||
promise.finally(() => windows.close("oneclick-download-model.html"));
|
||||
|
||||
return () => {
|
||||
sub.unsubscribe();
|
||||
}
|
||||
}, [])
|
||||
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="relative w-screen h-screen overflow-hidden">
|
||||
{cover && <BsmImage className="absolute top-0 left-0 w-full h-full object-cover" image={cover}/>}
|
||||
{cover && <BsmImage className="absolute top-0 left-0 w-full h-full object-cover" image={cover} />}
|
||||
<div className="w-full h-full backdrop-brightness-50 backdrop-blur-md flex flex-col justify-start items-center gap-10">
|
||||
<TitleBar template="oneclick-download-model.html"/>
|
||||
<BsmImage className="aspect-[1/1] w-1/2 object-cover rounded-md shadow-black shadow-lg" placeholder={defaultImage} image={cover} errorImage={defaultImage}/>
|
||||
<TitleBar template="oneclick-download-model.html" />
|
||||
<BsmImage className="aspect-[1/1] w-1/2 object-cover rounded-md shadow-black shadow-lg" placeholder={defaultImage} image={cover} errorImage={defaultImage} />
|
||||
<h1 className="overflow-hidden font-bold italic text-xl text-gray-200 tracking-wide w-full text-center whitespace-nowrap text-ellipsis px-2">{title}</h1>
|
||||
</div>
|
||||
<BsmProgressBar/>
|
||||
<BsmProgressBar />
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
import { motion } from "framer-motion";
|
||||
import { useEffect, useRef, useState } from "react"
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { BsmProgressBar } from "renderer/components/progress-bar/bsm-progress-bar.component";
|
||||
import { BsmImage } from "renderer/components/shared/bsm-image.component";
|
||||
import TitleBar from "renderer/components/title-bar/title-bar.component";
|
||||
import { useObservable } from "renderer/hooks/use-observable.hook";
|
||||
import { useTranslation } from "renderer/hooks/use-translation.hook";
|
||||
import { IpcService } from "renderer/services/ipc.service"
|
||||
import { IpcService } from "renderer/services/ipc.service";
|
||||
import { NotificationService } from "renderer/services/notification.service";
|
||||
import { PlaylistDownloaderService } from "renderer/services/playlist-downloader.service";
|
||||
import { ThemeService } from "renderer/services/theme.service";
|
||||
@@ -13,10 +13,9 @@ import { BeatSaverService } from "renderer/services/thrird-partys/beat-saver.ser
|
||||
import { WindowManagerService } from "renderer/services/window-manager.service";
|
||||
import { map, filter } from "rxjs/operators";
|
||||
import { BsvPlaylist } from "shared/models/maps/beat-saver.model";
|
||||
import defaultImage from '../../../../assets/images/default-version-img.jpg';
|
||||
import defaultImage from "../../../../assets/images/default-version-img.jpg";
|
||||
|
||||
export default function OneClickDownloadPlaylist() {
|
||||
|
||||
const ipc = IpcService.getInstance();
|
||||
const bSaver = BeatSaverService.getInstance();
|
||||
const themeService = ThemeService.getInstance();
|
||||
@@ -26,41 +25,53 @@ export default function OneClickDownloadPlaylist() {
|
||||
const notification = NotificationService.getInstance();
|
||||
|
||||
const [playlist, setPlaylist] = useState<BsvPlaylist>(null);
|
||||
const downloadedMap = useObservable(playlistDownloader.progress$.pipe(filter(download => !!download), map(download => [...(download.downloadedMaps ?? []), download?.current])), []);
|
||||
const downloadedMap = useObservable(
|
||||
playlistDownloader.progress$.pipe(
|
||||
filter(download => !!download),
|
||||
map(download => [...(download.downloadedMaps ?? []), download?.current])
|
||||
),
|
||||
[]
|
||||
);
|
||||
const t = useTranslation();
|
||||
|
||||
const cover = playlist ? playlist.playlistImage : null;
|
||||
const title = playlist ? playlist.name : null;
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
const sub = themeService.theme$.subscribe(() => {
|
||||
if(themeService.isDark || (themeService.isOS && window.matchMedia('(prefers-color-scheme: dark)').matches)){ document.documentElement.classList.add('dark'); }
|
||||
else { document.documentElement.classList.remove('dark'); }
|
||||
if (themeService.isDark || (themeService.isOS && window.matchMedia("(prefers-color-scheme: dark)").matches)) {
|
||||
document.documentElement.classList.add("dark");
|
||||
} else {
|
||||
document.documentElement.classList.remove("dark");
|
||||
}
|
||||
});
|
||||
|
||||
const promise = new Promise(async (resolve, reject) => {
|
||||
const infos = await ipc.send<{ bpListUrl: string; id: string }>("one-click-playlist-info");
|
||||
|
||||
const infos = await ipc.send<{bpListUrl: string, id: string}>("one-click-playlist-info");
|
||||
|
||||
if(!infos.success){ return reject(infos.error); }
|
||||
if (!infos.success) {
|
||||
return reject(infos.error);
|
||||
}
|
||||
|
||||
bSaver.getPlaylistDetailsById(infos.data.id).then(details => setPlaylist(details));
|
||||
|
||||
playlistDownloader.oneClickInstallPlaylist(infos.data.bpListUrl).toPromise().then(res => {
|
||||
resolve(res);
|
||||
}).catch(() => {
|
||||
reject();
|
||||
});
|
||||
|
||||
playlistDownloader
|
||||
.oneClickInstallPlaylist(infos.data.bpListUrl)
|
||||
.toPromise()
|
||||
.then(res => {
|
||||
resolve(res);
|
||||
})
|
||||
.catch(() => {
|
||||
reject();
|
||||
});
|
||||
});
|
||||
|
||||
promise.catch(() => {
|
||||
notification.notifySystem({title: t("notifications.types.error"), body: t("notifications.playlists.one-click-install.error")});
|
||||
})
|
||||
notification.notifySystem({ title: t("notifications.types.error"), body: t("notifications.playlists.one-click-install.error") });
|
||||
});
|
||||
|
||||
promise.then(() => {
|
||||
notification.notifySystem({title: "OneClick", body: t("notifications.playlists.one-click-install.success")});
|
||||
notification.notifySystem({ title: "OneClick", body: t("notifications.playlists.one-click-install.success") });
|
||||
});
|
||||
|
||||
promise.finally(() => {
|
||||
@@ -69,35 +80,32 @@ export default function OneClickDownloadPlaylist() {
|
||||
|
||||
return () => {
|
||||
sub.unsubscribe();
|
||||
}
|
||||
|
||||
};
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
setTimeout(() => mapsContainer.current.scrollTo({
|
||||
left: mapsContainer.current.scrollWidth,
|
||||
behavior: "smooth"
|
||||
}), 500);
|
||||
}, [downloadedMap])
|
||||
|
||||
|
||||
setTimeout(
|
||||
() =>
|
||||
mapsContainer.current.scrollTo({
|
||||
left: mapsContainer.current.scrollWidth,
|
||||
behavior: "smooth",
|
||||
}),
|
||||
500
|
||||
);
|
||||
}, [downloadedMap]);
|
||||
|
||||
return (
|
||||
<div className="relative w-screen h-screen overflow-hidden">
|
||||
{playlist && <BsmImage className="absolute top-0 left-0 w-full h-full" image={playlist.playlistImage}/>}
|
||||
{playlist && <BsmImage className="absolute top-0 left-0 w-full h-full" image={playlist.playlistImage} />}
|
||||
<div className="w-full h-full backdrop-brightness-50 backdrop-blur-md flex flex-col justify-start items-center">
|
||||
<TitleBar template="oneclick-download-playlist.html"/>
|
||||
<BsmImage className="mt-2 aspect-square w-1/2 object-cover rounded-md shadow-black shadow-lg" placeholder={defaultImage} image={cover} errorImage={defaultImage}/>
|
||||
<TitleBar template="oneclick-download-playlist.html" />
|
||||
<BsmImage className="mt-2 aspect-square w-1/2 object-cover rounded-md shadow-black shadow-lg" placeholder={defaultImage} image={cover} errorImage={defaultImage} />
|
||||
<h1 className="mt-4 overflow-hidden font-bold italic text-xl text-gray-200 tracking-wide w-full text-center whitespace-nowrap text-ellipsis px-2">{title}</h1>
|
||||
<div className="w-full py-3 flex items-center justify-center max-w-full overflow-x-scroll overflow-y-hidden scrollbar scrollbar-thin scrollbar-track-transparent scrollbar-thumb-neutral-900" ref={mapsContainer}>
|
||||
<div className="flex justify-start items-start gap-2.5">
|
||||
{downloadedMap?.map(map => (
|
||||
map?.versions?.at(0)?.coverURL && <motion.img layout="position" key={map.id} className="block aspect-square w-14 object-cover rounded-md shadow-black shadow-md" src={map?.versions?.at(0)?.coverURL} initial={{scale: 0}} animate={{scale: 1}} whileHover={{rotate: 5}}/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-start items-start gap-2.5">{downloadedMap?.map(map => map?.versions?.at(0)?.coverURL && <motion.img layout="position" key={map.id} className="block aspect-square w-14 object-cover rounded-md shadow-black shadow-md" src={map?.versions?.at(0)?.coverURL} initial={{ scale: 0 }} animate={{ scale: 1 }} whileHover={{ rotate: 5 }} />)}</div>
|
||||
</div>
|
||||
</div>
|
||||
<BsmProgressBar/>
|
||||
<BsmProgressBar />
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user