feat: optimize UI styles and UX effects to enhance user immersion

pnpm tauri add process

package.json

@@ -24,6 +24,7 @@
     "@tauri-apps/plugin-dialog": "~2",
     "@tauri-apps/plugin-log": "~2",
     "@tauri-apps/plugin-opener": "^2",
+    "@tauri-apps/plugin-process": "~2",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.2"

src-tauri/Cargo.toml

@@ -24,4 +24,5 @@ serde = { version = "1", features = ["derive"] }
 serde_json = "1"
 tauri-plugin-log = "2"
 tauri-plugin-dialog = "2"
+tauri-plugin-process = "2"
 

src-tauri/capabilities/default.json

@@ -7,8 +7,12 @@
   ],
   "permissions": [
     "core:default",
+    "core:window:allow-maximize",
+    "core:window:allow-unmaximize",
+    "core:window:allow-minimize",
     "opener:default",
     "log:default",
-    "dialog:default"
+    "dialog:default",
+    "process:default"
   ]
 }

src-tauri/src/lib.rs

@@ -7,6 +7,7 @@ fn greet(name: &str) -> String {
 #[cfg_attr(mobile, tauri::mobile_entry_point)]
 pub fn run() {
     tauri::Builder::default()
+        .plugin(tauri_plugin_process::init())
         .plugin(tauri_plugin_dialog::init())
         .plugin(tauri_plugin_log::Builder::new().build())
         .plugin(tauri_plugin_opener::init())

src-tauri/tauri.conf.json

@@ -13,6 +13,7 @@
     "windows": [
       {
         "title": "pocketplayer",
+        "decorations": false,
         "width": 800,
         "height": 600
       }

src/app/app.component.html

@@ -5,6 +5,8 @@
     <mat-grid-tile
       colspan="1"
       rowspan="1"
+      (mouseenter)="handleMouseEnterButton()"
+      (mouseleave)="handleMouseLeaveButton()"
       [ngStyle]="{ 'background-color': bgColor }"
     >
       <button
@@ -18,6 +20,7 @@
       </button>
       <button
         mat-icon-button
+        (click)="handleMinimizeWindowButton()"
         [ngStyle]="{ 'color': fgColor, 'background-color': bgColor, 'border-width': 0 }"
       >
         <mat-icon>
@@ -26,6 +29,7 @@
       </button>
       <button
         mat-icon-button
+        (click)="handleMaximizeWindowButton()"
         [ngStyle]="{ 'color': fgColor, 'background-color': bgColor, 'border-width': 0 }"
       >
         <mat-icon>
@@ -34,6 +38,7 @@
       </button>
       <button
         mat-icon-button
+        (click)="handleExitAppButton()"
         [ngStyle]="{ 'color': fgColor, 'background-color': bgColor, 'border-width': 0 }"
       >
         <mat-icon>
@@ -47,7 +52,7 @@
       [ngStyle]="{ 'background-color': bgColor }"
     >
       <video
-        [src]="video_path"
+        [src]="videoPath"
         controls
         autoplay
         (pause)="handleVideoPause()"

src/app/app.component.ts

@@ -7,8 +7,10 @@ import { RouterOutlet } from '@angular/router';
 import { MatIconModule } from '@angular/material/icon';
 import { MatGridListModule } from '@angular/material/grid-list';
 import { invoke, convertFileSrc } from "@tauri-apps/api/core";
+import { getCurrentWindow } from '@tauri-apps/api/window';
 import { trace, info, error, attachConsole } from '@tauri-apps/plugin-log';
 import { open as openDialog } from '@tauri-apps/plugin-dialog';
+import { exit, relaunch } from '@tauri-apps/plugin-process';
 
 @Component({
   selector: 'app-root',
@@ -24,11 +26,13 @@ import { open as openDialog } from '@tauri-apps/plugin-dialog';
 })
 export class AppComponent {
 
-  video_path = "";
+  videoPath = "";
   blackHexString = "#000000";
   whiteHexString = "#ffffff";
   fgColor = this.blackHexString;
   bgColor = this.whiteHexString;
+  isMaximized = false;
+  isFileOpen = false;
 
   handleOpenVideoFileButton() {
     info("OpenVideoFileButton is clicked.");
@@ -42,7 +46,8 @@ export class AppComponent {
         const path = this.normalizePathString(file.toString());
         info("The file selected by the user is: " + path);
         // https://v2.tauri.app/reference/javascript/api/namespacecore/#convertfilesrc
-        this.video_path = convertFileSrc(path);
+        this.videoPath = convertFileSrc(path);
+        this.isFileOpen = true;
         this.bgColor = this.blackHexString;
         this.fgColor = this.whiteHexString;
       }
@@ -61,6 +66,41 @@ export class AppComponent {
     this.fgColor = this.blackHexString;
   }
 
+  async handleMinimizeWindowButton() {
+    info("User minimized the window");
+    await getCurrentWindow().minimize();
+  }
+
+  async handleMaximizeWindowButton() {
+    info("User maximized the window");
+    if (this.isMaximized) {
+      await getCurrentWindow().unmaximize();
+      this.isMaximized = false;
+    } else {
+      await getCurrentWindow().maximize();
+      this.isMaximized = true;
+    }
+  }
+
+  async handleExitAppButton() {
+    info("User exit the app");
+    await exit(0);
+  }
+
+  handleMouseEnterButton() {
+    info("mouse entered.");
+    if (this.isFileOpen) {
+      this.fgColor = this.whiteHexString;
+    }
+  }
+
+  handleMouseLeaveButton() {
+    info("mouse left.");
+    if (this.isFileOpen) {
+      this.fgColor = this.blackHexString;
+    }
+  }
+
   normalizePathString = (path: string) => {
     // remove quotation marks from both ends of a string
     if (path.startsWith('"')) {