fix: fix major bugs in build

-  ESP Web Tools wasn't loading due to the Content Security Policy
-  Sound files were not being bundled properly
- fix permissions check on notifications

Author: ZanzyTHEbar

GUI/ETVR/package.json

@@ -13,6 +13,8 @@
     "tauri": "tauri",
     "tauri:dev": "tauri dev",
     "tauri:build": "tauri build",
+    "tauri:build:dev": "tauri build --debug",
+    "tauri:clean": "cd src-tauri && cargo clean",
     "docs": "jsdoc -c jsdoc.conf.json",
     "lint": "eslint --ext .js,.ts,.jsx,.tsx src",
     "format": "yarn run lint --fix & yarn prettier --write \"src/**/*.{js,jsx,ts,tsx}\""
@@ -74,4 +76,4 @@
     "yarn": "^1.22.19",
     "yup": "^0.32.11"
   }
-}
+}

GUI/ETVR/assets/audio/EyeTrackApp_Audio_compleated.wav GUI/ETVR/public/audio/EyeTrackApp_Audio_compleated.wav

@@ -31,7 +31,7 @@ features = [ "derive",]
 
 [dependencies.tauri]
 version = "1.1.1"
-features = [ "isolation", "protocol-asset", "fs-all", "shell-sidecar", "dialog-all", "http-all", "icon-ico", "notification-all", "os-all", "path-all", "process-relaunch", "shell-open", "system-tray", "window-center", "window-close", "window-hide", "window-maximize", "window-minimize", "window-set-decorations", "window-set-focus", "window-set-fullscreen", "window-set-size", "window-start-dragging", "window-unmaximize", "window-unminimize",]
+features = [ "protocol-asset", "fs-all", "shell-sidecar", "dialog-all", "http-all", "icon-ico", "notification-all", "os-all", "path-all", "process-relaunch", "shell-open", "system-tray", "window-center", "window-close", "window-hide", "window-maximize", "window-minimize", "window-set-decorations", "window-set-focus", "window-set-fullscreen", "window-set-size", "window-start-dragging", "window-unmaximize", "window-unminimize",]
 
 [dependencies.tauri-plugin-window-state]
 git = "https://github.com/tauri-apps/tauri-plugin-window-state/"
@@ -59,7 +59,7 @@ features = [ "full",]
 
 [build-dependencies.tauri-build]
 version = "1.1.1"
-features = [ "isolation",]
+features = []
 
 [profile.dev]
 debug = 0

GUI/ETVR/assets/audio/EyeTrackApp_Audio_notif.mp3 GUI/ETVR/public/audio/EyeTrackApp_Audio_notif.mp3

@@ -11,12 +11,6 @@
     "version": "1.0.0"
   },
   "tauri": {
-    "pattern": {
-      "use": "isolation",
-      "options": {
-        "dir": "../dist-isolation"
-      }
-    },
     "allowlist": {
       "all": false,
       "clipboard": {
@@ -165,7 +159,10 @@
       }
     },
     "security": {
-      "csp": "default-src blob: data: filesystem: ws: wss: http: https: tauri: 'unsafe-eval' 'unsafe-inline' 'self' img-src: 'self' asset: https://asset.localhost"
+      "csp": "script-src: 'self' https://unpkg.com/esp-web-tools@9.2.0/dist/web/install-button.js?module; default-src blob: data: filesystem: ws: wss: http: https: tauri: 'unsafe-eval' 'unsafe-inline' 'self' img-src: 'self' asset: https://asset.localhost",
+      "dangerousDisableAssetCspModification": [
+        "script-src"
+      ]
     },
     "updater": {
       "active": false,
@@ -203,4 +200,4 @@
       "iconAsTemplate": true
     }
   }
-}
+}

GUI/ETVR/assets/audio/EyeTrackApp_Audio_start.wav GUI/ETVR/public/audio/EyeTrackApp_Audio_start.wav

@@ -1,15 +1,8 @@
-import { isPermissionGranted, requestPermission } from '@tauri-apps/api/notification'
 import { Toaster, ToasterStore, Transition, useToaster } from 'solid-headless'
 import { createEffect, createSignal, For, onCleanup } from 'solid-js'
 import CustomToast from './CustomToast'
 import { INotifications } from '@static/types/interfaces'
-import { notifications } from '@store/ui/selectors'
-
-let permissionGranted = await isPermissionGranted()
-if (!permissionGranted) {
-    const permission = await requestPermission()
-    permissionGranted = permission === 'granted'
-}
+import { notifications, showNotifications } from '@store/ui/selectors'
 
 const ToastNotificationWindow = () => {
     const notifs = useToaster(notifications() as ToasterStore<INotifications>)
@@ -24,7 +17,7 @@ const ToastNotificationWindow = () => {
     }
 
     createEffect(() => {
-        if (permissionGranted) {
+        if (showNotifications()) {
             if (notifs().length > 0) {
                 console.log('[Notifications]: Notifcations Added', notifs().length)
                 setIsOpen(true)

GUI/ETVR/src-tauri/Cargo.lock

@@ -8,4 +8,5 @@ export const menuOpenStatus = createMemo(() => uiState().menuOpen)
 export const connectedUserName = createMemo(() => uiState().connectedUser)
 export const showCameraView = createMemo(() => uiState().showCameraView)
 export const notifications = createMemo(() => uiState().notifications)
+export const showNotifications = createMemo(() => uiState().showNotifications)
 export const hideHeaderButtons = createMemo(() => uiState().hideHeaderButtons)

GUI/ETVR/src-tauri/Cargo.toml

@@ -9,12 +9,6 @@ interface IMenuOpen {
     y: number
 }
 
-interface IProgressBar {
-    progress: number
-    msg: string
-    show: boolean
-}
-
 export interface INewMenu {
     children: JSXElement
     ref: HTMLElement | null
@@ -35,6 +29,7 @@ export interface IUiStore {
     showCameraView?: boolean
     connectedUser: string
     notifications?: ToasterStore<INotifications>
+    showNotifications?: boolean
     hideHeaderButtons: boolean
 }
 
@@ -46,6 +41,7 @@ export const defaultState = {
     connectedUser: '',
     showCameraView: false,
     notifications: new ToasterStore<INotifications>(),
+    showNotifications: false,
     hideHeaderButtons: false,
 }
 
@@ -107,4 +103,12 @@ export const setShowCameraView = (showCameraView: boolean) => {
     )
 }
 
+export const setShowNotifications = (showNotifications: boolean) => {
+    setState(
+        produce((s) => {
+            s.showNotifications = showNotifications
+        }),
+    )
+}
+
 export const uiState = createMemo(() => state)

GUI/ETVR/src-tauri/tauri.conf.json

@@ -1,6 +1,7 @@
 import { invoke } from '@tauri-apps/api/tauri'
 import { appWindow } from '@tauri-apps/api/window'
 import { doGHRequest } from '@utils/hooks/api/useGHReleases'
+import { checkPermission } from '@utils/hooks/notifications'
 import { generateWebsocketClients } from '@utils/hooks/websocket'
 
 export const handleTitlebar = () => {
@@ -30,7 +31,7 @@ export const handleAppBoot = () => {
     })
 
     // TODO: call these after the MDNS service is up and running and discoveres the camera's
-    // TODO: Implement a websocket client that can be used to connect to the camera'susing the `tauri-plugin-websocket` rust crate
+    checkPermission()
     generateWebsocketClients()
     doGHRequest()
 }
@@ -52,12 +53,12 @@ export const handleSound = async (
     if ('Audio' in window) {
         const a = new Audio()
         if (a.canPlayType && a.canPlayType('audio/ogg; codecs="vorbis"').replace(/no/, ''))
-            a.src = ('assets/audio/' + soundfile_ogg) as string
+            a.src = ('audio/' + soundfile_ogg) as string
         else if (a.canPlayType && a.canPlayType('audio/mpeg;').replace(/no/, ''))
-            a.src = ('assets/audio/' + soundfile_mp) as string
+            a.src = ('audio/' + soundfile_mp) as string
         else if (a.canPlayType && a.canPlayType('audio/mp4; codecs="mp4a.40.2"').replace(/no/, ''))
-            a.src = ('assets/audio/' + soundfile_ma) as string
-        else a.src = ('assets/audio/' + soundfile_mp) as string
+            a.src = ('audio/' + soundfile_ma) as string
+        else a.src = ('audio/' + soundfile_mp) as string
 
         a.play()
         return

GUI/ETVR/src/components/Notifications/index.tsx

@@ -1,10 +1,15 @@
 /* eslint-disable */
 
-import { sendNotification } from '@tauri-apps/api/notification'
+import {
+    sendNotification,
+    isPermissionGranted,
+    requestPermission,
+} from '@tauri-apps/api/notification'
 import { handleSound } from '../app'
 import { ENotificationAction, ENotificationType } from '@static/types/enums'
 import { INotifications, INotificationAction } from '@static/types/interfaces'
-import { notifications } from '@store/ui/selectors'
+import { notifications, showNotifications } from '@store/ui/selectors'
+import { setShowNotifications } from '@store/ui/ui'
 
 /**
  * Send notification to the WebView Window using the browser API
@@ -20,19 +25,23 @@ export const notify = (title: string, body: string | undefined) => {
  * @param {INotifications} notification Notification message
  */
 export const addNotification = (notification: INotifications) => {
-    const { title, message, action } = notification
-    NotificationType(action, {
-        callbackOS: () => {
-            sendNotification({
-                title,
-                body: message,
-            })
-        },
-        callbackApp: () => {
-            handleSound('EyeTrackApp_Audio_notif.mp3')
-            notifications()?.create(notification)
-        },
-    })
+    if (showNotifications()) {
+        const { title, message, action } = notification
+        NotificationType(action, {
+            callbackOS: () => {
+                sendNotification({
+                    title,
+                    body: message,
+                })
+            },
+            callbackApp: () => {
+                handleSound('EyeTrackApp_Audio_notif.mp3')
+                notifications()?.create(notification)
+            },
+        })
+        return
+    }
+    checkPermission()
 }
 
 const NotificationType = (
@@ -47,5 +56,15 @@ const NotificationType = (
     }
 }
 
+export const checkPermission = async () => {
+    let permissionGranted = await isPermissionGranted()
+
+    if (!permissionGranted) {
+        const permission = await requestPermission()
+        permissionGranted = permission === 'granted'
+    }
+    setShowNotifications(permissionGranted)
+}
+
 // export imported enum
 export { ENotificationType, ENotificationAction }