From 74d1e344498baaa421badcaae31dff98cd69aa63 Mon Sep 17 00:00:00 2001 From: Puyodead1 Date: Mon, 4 Sep 2023 19:57:45 -0400 Subject: [PATCH] implement splash screen --- package.json | 1 + pnpm-lock.yaml | 8 ++++ public/splashscreen.css | 80 +++++++++++++++++++++++++++++++++++++++ public/splashscreen.html | 19 ++++++++++ src-tauri/src/main.rs | 21 ++++++++-- src-tauri/tauri.conf.json | 15 ++++++-- src/App.tsx | 3 ++ 7 files changed, 140 insertions(+), 7 deletions(-) create mode 100644 public/splashscreen.css create mode 100644 public/splashscreen.html diff --git a/package.json b/package.json index 6eb9125..cdd87dc 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,7 @@ "@mdi/react": "^1.6.1", "@mui/material": "^5.13.0", "@spacebarchat/spacebar-api-types": "0.37.49", + "@tauri-apps/api": "^1.4.0", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 2c22bee..e5ae9a2 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -35,6 +35,9 @@ dependencies: '@spacebarchat/spacebar-api-types': specifier: 0.37.49 version: 0.37.49 + '@tauri-apps/api': + specifier: ^1.4.0 + version: 1.4.0 '@testing-library/jest-dom': specifier: ^5.16.5 version: 5.16.5 @@ -2915,6 +2918,11 @@ packages: transitivePeerDependencies: - supports-color + /@tauri-apps/api@1.4.0: + resolution: {integrity: sha512-Jd6HPoTM1PZSFIzq7FB8VmMu3qSSyo/3lSwLpoapW+lQ41CL5Dow2KryLg+gyazA/58DRWI9vu/XpEeHK4uMdw==} + engines: {node: '>= 14.6.0', npm: '>= 6.6.0', yarn: '>= 1.19.1'} + dev: false + /@tauri-apps/cli-darwin-arm64@1.4.0: resolution: {integrity: sha512-nA/ml0SfUt6/CYLVbHmT500Y+ijqsuv5+s9EBnVXYSLVg9kbPUZJJHluEYK+xKuOj6xzyuT/+rZFMRapmJD3jQ==} engines: {node: '>= 10'} diff --git a/public/splashscreen.css b/public/splashscreen.css new file mode 100644 index 0000000..150c56a --- /dev/null +++ b/public/splashscreen.css @@ -0,0 +1,80 @@ +* { + padding: 0; + margin: 0; +} + +body { + overflow: hidden; + background: url(Spacebar.png); + background-size: cover; +} + +img { + max-width: 100%; + max-height: 100vh; + margin: auto; +} + +.loader-wrapper { + height: 100vh; + display: flex; + justify-content: center; + align-items: flex-end; +} + +.lds-ellipsis { + display: inline-block; + position: relative; + width: 80px; + height: 80px; + } + .lds-ellipsis div { + position: absolute; + top: 33px; + width: 13px; + height: 13px; + border-radius: 50%; + background: #fff; + animation-timing-function: cubic-bezier(0, 1, 1, 0); + } + .lds-ellipsis div:nth-child(1) { + left: 8px; + animation: lds-ellipsis1 0.6s infinite; + } + .lds-ellipsis div:nth-child(2) { + left: 8px; + animation: lds-ellipsis2 0.6s infinite; + } + .lds-ellipsis div:nth-child(3) { + left: 32px; + animation: lds-ellipsis2 0.6s infinite; + } + .lds-ellipsis div:nth-child(4) { + left: 56px; + animation: lds-ellipsis3 0.6s infinite; + } + @keyframes lds-ellipsis1 { + 0% { + transform: scale(0); + } + 100% { + transform: scale(1); + } + } + @keyframes lds-ellipsis3 { + 0% { + transform: scale(1); + } + 100% { + transform: scale(0); + } + } + @keyframes lds-ellipsis2 { + 0% { + transform: translate(0, 0); + } + 100% { + transform: translate(24px, 0); + } + } + \ No newline at end of file diff --git a/public/splashscreen.html b/public/splashscreen.html new file mode 100644 index 0000000..1209153 --- /dev/null +++ b/public/splashscreen.html @@ -0,0 +1,19 @@ + + + + + + + Splashscreen + + +
+
+
+
+
+
+
+
+ + diff --git a/src-tauri/src/main.rs b/src-tauri/src/main.rs index f5c5be2..3d875f7 100644 --- a/src-tauri/src/main.rs +++ b/src-tauri/src/main.rs @@ -1,8 +1,21 @@ // Prevents additional console window on Windows in release, DO NOT REMOVE!! #![cfg_attr(not(debug_assertions), windows_subsystem = "windows")] -fn main() { - tauri::Builder::default() - .run(tauri::generate_context!()) - .expect("error while running tauri application"); +use tauri::Manager; + +#[tauri::command] +async fn close_splashscreen(window: tauri::Window) { + // Close splashscreen + if let Some(splashscreen) = window.get_window("splashscreen") { + splashscreen.close().unwrap(); + } + // Show main window + window.get_window("main").unwrap().show().unwrap(); +} + +fn main() { + tauri::Builder::default() + .invoke_handler(tauri::generate_handler![close_splashscreen]) + .run(tauri::generate_context!()) + .expect("error while running tauri application"); } diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json index ab0d0bd..bb45158 100644 --- a/src-tauri/tauri.conf.json +++ b/src-tauri/tauri.conf.json @@ -56,11 +56,20 @@ "windows": [ { "fullscreen": false, - "height": 600, "resizable": true, "title": "Spacebar", - "width": 800, - "maximized": true + "maximized": true, + "visible": false, + "label": "main" + }, + { + "width": 400, + "height": 200, + "decorations": false, + "url": "splashscreen.html", + "label": "splashscreen", + "resizable": false, + "center": true } ] } diff --git a/src/App.tsx b/src/App.tsx index 3f51bd5..badfceb 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -6,6 +6,7 @@ import LoginPage from "./pages/LoginPage"; import NotFoundPage from "./pages/NotFound"; import RegistrationPage from "./pages/RegistrationPage"; +import { invoke } from "@tauri-apps/api"; import { reaction } from "mobx"; import Loader from "./components/Loader"; import OfflineBanner from "./components/banners/OfflineBanner"; @@ -54,6 +55,8 @@ function App() { logger.debug("Loading complete"); app.setAppLoading(false); + // @ts-expect-error check if tauri api is deined + if (window.__TAURI__) invoke("close_splashscreen"); return dispose; }, []);