create one click install playlist window

src/main/ipcs/beat-saver-ipcs.ts

@@ -35,4 +35,15 @@ ipcMain.on("bsv-get-map-details-by-id", async (event, request: IpcRequest<string
     }).catch(e => {
         utlis.ipcSend(request.responceChannel, {success: false, error: e});
     })
+});
+
+ipcMain.on("bsv-get-playlist-details-by-id", async (event, request: IpcRequest<string>) => {
+    const utlis = UtilsService.getInstance();
+    const bsvService = BeatSaverService.getInstance();
+
+    bsvService.getPlaylistPage(request.args).then(maps => {
+        utlis.ipcSend(request.responceChannel, {success: true, data: maps});
+    }).catch(e => {
+        utlis.ipcSend(request.responceChannel, {success: false, error: e});
+    })
 });

src/main/services/additional-content/local-playlists-manager.service.ts

@@ -1,6 +1,5 @@
 import path from "path";
-import { BehaviorSubject } from "rxjs";
-import { Observable } from "rxjs";
+import { BehaviorSubject, Observable } from "rxjs";
 import { BSVersion } from "shared/bs-version.interface";
 import { BsvPlaylist, BsvPlaylistPage } from "shared/models/maps/beat-saver.model";
 import { BSLocalVersionService } from "../bs-local-version.service";
@@ -47,12 +46,12 @@ export class LocalPlaylistsManagerService {
         this.windows = WindowManagerService.getInstance();
 
         this.deepLink.addLinkOpenedListener(this.DEEP_LINKS.BeatSaver, link => {
+
             log.info("DEEP-LINK RECEIVED FROM", this.DEEP_LINKS.BeatSaver, link);
             const url = new URL(link);
             const bplistUrl = url.host === "playlist" ? url.pathname.replace("/", "") : "";
-            const playlistId = this.getPlaylistIdFromDownloadUrl(bplistUrl);
 
-            this.openOneClickDownloadPlaylistWindow(playlistId);
+            this.openOneClickDownloadPlaylistWindow(bplistUrl);
 
         });
 
@@ -91,10 +90,10 @@ export class LocalPlaylistsManagerService {
         // TODO
     }
 
-    private openOneClickDownloadPlaylistWindow(playlistId: string): void{
+    private openOneClickDownloadPlaylistWindow(downloadUrl: string): void{
 
-        ipcMain.once("one-click-playlist-info", async (event, req: IpcRequest<void>) => {
-            this.utils.ipcSend(req.responceChannel, {success: true, data: playlistId});
+        ipcMain.on("one-click-playlist-info", async (event, req: IpcRequest<void>) => {
+            this.utils.ipcSend(req.responceChannel, {success: true, data: {bpListUrl: downloadUrl, id: this.getPlaylistIdFromDownloadUrl(downloadUrl)}});
         });
 
         this.windows.openWindow("oneclick-download-playlist.html");

src/main/services/thrid-party/beat-saver/beat-saver-api.service.ts

@@ -1,6 +1,6 @@
 import { ApiResult } from "renderer/models/api/api.model";
 import { BsvMapDetail } from "shared/models/maps";
-import { BsvPlaylistPage, MapFilter, SearchParams, SearchResponse } from "shared/models/maps/beat-saver.model";
+import { BsvPlaylist, BsvPlaylistPage, MapFilter, SearchParams, SearchResponse } from "shared/models/maps/beat-saver.model";
 import  fetch from "node-fetch"
 
 export class BeatSaverApiService {
@@ -121,13 +121,13 @@ export class BeatSaverApiService {
 
     }
 
-    public async getPlaylistDetails(id: number): Promise<ApiResult<BsvPlaylistPage>>{
+    public async getPlaylistDetails(id: string): Promise<ApiResult<BsvPlaylist>>{
 
-        const res = await fetch(`${this.bsaverApiUrl}/playlists/id/${id}`);
+        const res = await fetch(`${this.bsaverApiUrl}/playlists/id/${id}/0`);
 
         const data = await res.json() as BsvPlaylistPage;
 
-        return {status: res.status, data};
+        return {status: res.status, data: data.playlist};
 
     }
 

src/main/services/thrid-party/beat-saver/beat-saver.service.ts

@@ -66,7 +66,7 @@ export class BeatSaverService {
 
     }
 
-    public async getPlaylistPage(id: number): Promise<BsvPlaylistPage>{
+    public async getPlaylistPage(id: string): Promise<BsvPlaylist>{
 
         const res = await this.bsaverApi.getPlaylistDetails(id);
         return res.data;

src/renderer/services/thrird-partys/beat-saver.service.ts

@@ -1,5 +1,5 @@
 import { BsvMapDetail } from "shared/models/maps";
-import { SearchParams } from "shared/models/maps/beat-saver.model";
+import { BsvPlaylist, BsvPlaylistPage, SearchParams } from "shared/models/maps/beat-saver.model";
 import { IpcService } from "../ipc.service";
 
 export class BeatSaverService {
@@ -32,6 +32,11 @@ export class BeatSaverService {
         return res.data ?? []
     }
 
+    public async getPlaylistDetailsById(id: string): Promise<BsvPlaylist>{
+        const res = await this.ipc.send<BsvPlaylist>("bsv-get-playlist-details-by-id", {args: id});
+        return res.data ?? null;
+    }
+
 
 
 }

src/renderer/windows/OneClick/OneClickDownloadPlaylist.tsx

@@ -1,5 +1,58 @@
+import { useEffect, 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 { IpcService } from "renderer/services/ipc.service"
+import { ProgressBarService } from "renderer/services/progress-bar.service";
+import { ThemeService } from "renderer/services/theme.service";
+import { BeatSaverService } from "renderer/services/thrird-partys/beat-saver.service";
+import { BsvPlaylist } from "shared/models/maps/beat-saver.model";
+import defaultImage from '../../../../assets/images/default-version-img.jpg';
+
 export default function OneClickDownloadPlaylist() {
-  return (
-    <div>OneClickDownloadPlaylist</div>
-  )
+
+    const ipc = IpcService.getInstance();
+    const bSaver = BeatSaverService.getInstance();
+    const progress = ProgressBarService.getInstance();
+    const themeService = ThemeService.getInstance();
+
+    const [playlist, setPlaylist] = useState<BsvPlaylist>(null);
+
+    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'); }
+        });
+
+        progress.open();
+      
+        ipc.send<{bpListUrl: string, id: string}>("one-click-playlist-info").then(res => {
+
+            console.log(res);
+            
+            const playlistId = res.data.id;
+            const downloadUrl = res.data.bpListUrl;
+
+            bSaver.getPlaylistDetailsById(playlistId).then(playlist => setPlaylist(() => playlist));
+
+        });
+    
+    }, []);
+    
+
+    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}/>}
+            <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}/>
+                <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/>
+        </div>
+    )
 }