advancement on oneClick model AND lazy loading react windows

2026-07-03 14:08:25 +02:00 · 2022-12-24 18:19:59 +01:00
parent 6c5190eacb
commit 2aed523480
19 changed files with 440 additions and 47 deletions
@@ -1,31 +1,40 @@
-//@ts-ignore
 import { createRoot } from 'react-dom/client';
 import { HashRouter } from 'react-router-dom';
-import App from './windows/App';
-import Launcher from './windows/Launcher';
 import 'tailwindcss/tailwind.css';
 import './index.css'
-import OneClickDownloadMap from './windows/OneClick/OneClickDownloadMap';
-import OneClickDownloadPlaylist from './windows/OneClick/OneClickDownloadPlaylist';

 const launcherContainer = document.getElementById('launcher');
 const oneclickDownloadMapContainer = document.getElementById('oneclick-download-map');
 const oneclickDownloadPlaylistContainer = document.getElementById('oneclick-download-playlist');
+const oneclickDownloadModelContainer = document.getElementById('oneclick-download-model');

-if(!!launcherContainer){
-    createRoot(launcherContainer).render(<Launcher/>);
+if(launcherContainer){
+    import("./windows/Launcher").then(reactWindow => {
+        createRoot(launcherContainer).render(<reactWindow.default/>);
+    });
 }
-else if(!!oneclickDownloadMapContainer){
-    createRoot(oneclickDownloadMapContainer).render(<OneClickDownloadMap/>);
+else if(oneclickDownloadMapContainer){
+    import("./windows/OneClick/OneClickDownloadMap").then(reactWindow => {
+        createRoot(oneclickDownloadMapContainer).render(<reactWindow.default/>);
+    });
 }
-else if(!!oneclickDownloadPlaylistContainer){
-    createRoot(oneclickDownloadPlaylistContainer).render(<OneClickDownloadPlaylist/>);
+else if(oneclickDownloadPlaylistContainer){
+    import("./windows/OneClick/OneClickDownloadPlaylist").then(reactWindow => {
+        createRoot(oneclickDownloadPlaylistContainer).render(<reactWindow.default/>);
+    });
+}
+else if(oneclickDownloadModelContainer){
+    import("./windows/OneClick/OneClickDownloadModel").then(reactWindow => {
+        createRoot(oneclickDownloadModelContainer).render(<reactWindow.default/>);
+    });
 }
 else{
    const root = document.getElementById('root');
-    createRoot(root).render(
-        <HashRouter>
-            <App />
-        </HashRouter>
-    );
+    import("./windows/App").then(reactWindow => {
+        createRoot(root).render(
+            <HashRouter>
+                <reactWindow.default/>
+            </HashRouter>
+        );
+    });
 }
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <link rel="stylesheet" href="https://use.typekit.net/okr8ven.css">
+    <meta charset="utf-8" />
+    <meta
+      http-equiv="Content-Security-Policy"
+      content="script-src 'self' 'unsafe-inline'"
+    />
+  </head>
+  <body>
+    <div id="oneclick-download-model"></div>
+  </body>
+</html>
@@ -0,0 +1,25 @@
+import { MSModel } from "shared/models/model-saber/model-saber.model";
+import { IpcService } from "../ipc.service";
+
+export class ModelSaberService {
+
+    private static instance: ModelSaberService;
+
+    public static getInstance(): ModelSaberService{
+        if(!ModelSaberService.instance){ ModelSaberService.instance = new ModelSaberService(); }
+        return ModelSaberService.instance;
+    }
+
+    private readonly ipc: IpcService;
+
+    private constructor(){
+        this.ipc = IpcService.getInstance();
+    }
+
+    public async getModelById(id: number|string): Promise<MSModel>{
+        const res = await this.ipc.send<MSModel>("ms-get-model-by-id", {args: id});
+        if(!res.success){ return null; }
+        return res.data;
+    }
+
+}
@@ -0,0 +1,45 @@
+import { useEffect, useState } from "react";
+import { IpcService } from "renderer/services/ipc.service";
+import { ThemeService } from "renderer/services/theme.service";
+import { ModelSaberService } from "renderer/services/thrird-partys/model-saber.service";
+import { MSModel } from "shared/models/model-saber/model-saber.model";
+
+export default function OneClickDownloadModel() {
+
+    const ipc = IpcService.getInstance();
+    const themeService = ThemeService.getInstance();
+    const modelSaber = ModelSaberService.getInstance();
+
+    const [model, setModel] = useState<MSModel>(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'); }
+        });
+
+        const promise = new Promise(async (resolve, reject) => {
+
+            const infos = await ipc.send<{id: string, type: string}>("one-click-model-info");
+
+            if(!infos.success){ reject(); }
+
+            const model = await modelSaber.getModelById(infos.data.id);
+            
+            setModel(() => model);
+
+            // Download model
+
+        });
+
+        return () => {
+            sub.unsubscribe();
+        }
+    }, [])
+    
+
+    return (
+        <div>OneClickDownloadModel</div>
+    )
+}