diff --git a/electron-builder.yml b/electron-builder.yml index b172f29..cd23df3 100644 --- a/electron-builder.yml +++ b/electron-builder.yml @@ -7,6 +7,7 @@ buildDependenciesFromSource: true extraResources: - './splashscreen.html' + - './updaterScreen.html' - 'resources/**' - './roboticsacademy.db' files: diff --git a/roboticsacademy.db b/roboticsacademy.db index f016859..8bd4afb 100644 Binary files a/roboticsacademy.db and b/roboticsacademy.db differ diff --git a/src/main/appWindow.ts b/src/main/appWindow.ts index 3aae38c..2741af9 100644 --- a/src/main/appWindow.ts +++ b/src/main/appWindow.ts @@ -1,17 +1,63 @@ -import { app, BrowserWindow } from 'electron' +import { is } from '@electron-toolkit/utils' +import { app, BrowserWindow, shell } from 'electron' import { join } from 'path' -export function createUpdaterWindow(): BrowserWindow { +export function createSplashWindow(info): BrowserWindow { + const win = new BrowserWindow({ + width: 525, + height: 300, + frame: false, + transparent: true, + alwaysOnTop: true, + webPreferences: { + devTools: !app.isPackaged, + nodeIntegration: false, + webSecurity: true, + sandbox: false, + contextIsolation: true + } + }) + + const splashScreenSrc = app.isPackaged + ? join(process.resourcesPath, 'splashscreen.html') + : join(__dirname, './../../', 'splashscreen.html') + + win.loadFile(splashScreenSrc) + + if (!app.isPackaged) { + // win.webContents.openDevTools() + } else win.webContents.openDevTools = () => {} + + win.webContents.on('did-finish-load', () => { + win.webContents + .executeJavaScript( + ` + const version = document.getElementById('version') + version.textContent = '${info.appVersion}' + ` + ) + .then((result) => { + console.log('Executed in renderer:', result) + }) + .catch(console.error) + }) + + return win +} + +export function createUpdaterWindow(version: string): BrowserWindow { const win = new BrowserWindow({ width: 500, height: 250, frame: false, transparent: true, + show: false, + resizable: false, + maximizable: false, alwaysOnTop: true, - x: 0, - y: 0, webPreferences: { preload: join(__dirname, './../preload/index.js'), + devTools: !app.isPackaged, nodeIntegration: false, webSecurity: true, sandbox: false, @@ -25,19 +71,88 @@ export function createUpdaterWindow(): BrowserWindow { win.loadFile(updaterScreenSrc) - // win.webContents.on('did-finish-load', () => { - // win.webContents - // .executeJavaScript( - // ` - // const version = document.getElementById('version') - // version.textContent = '${appVersion}' - // ` - // ) - // .then((result) => { - // console.log('Executed in renderer:', result) - // }) - // .catch(console.error) - // }) + // dev tool + if (!app.isPackaged) { + // win.webContents.openDevTools() + } else win.webContents.openDevTools = () => {} + + win.webContents.on('did-finish-load', () => { + win.webContents + .executeJavaScript( + ` + const version = document.getElementById('update-version') + version.textContent = '${version}' + ` + ) + .then((result) => { + console.log('Executed in renderer:', result) + }) + .catch(console.error) + }) return win } + +export const createWindow = async (): Promise => { + let mainWindow: BrowserWindow | null = + new BrowserWindow({ + width: 1280, + height: 720, + minWidth: 1280, + minHeight: 720, + show: false, + frame: false, + alwaysOnTop: false, + transparent: false, + focusable: true, + icon: join(__dirname, './../../resources/icons/icon.png'), + autoHideMenuBar: true, + webPreferences: { + preload: join(__dirname, '../preload/index.js'), + devTools: !app.isPackaged, + nodeIntegration: false, + webSecurity: true, + sandbox: false, + contextIsolation: true + } + }) || null + + // + mainWindow.webContents.session.webRequest.onHeadersReceived((details, callback) => { + if (details.responseHeaders === undefined) return + callback({ + responseHeaders: Object.fromEntries( + Object.entries(details.responseHeaders).filter( + (header) => !/x-frame-options/i.test(header[0]) + ) + ) + }) + }) + mainWindow.webContents.setWindowOpenHandler((details) => { + shell.openExternal(details.url) + return { action: 'deny' } + }) + + // Load the remote URL for development or the local html file for production. + if (is.dev && process.env['ELECTRON_RENDERER_URL']) { + mainWindow.loadURL(process.env['ELECTRON_RENDERER_URL']) + } else { + mainWindow.loadFile(join(__dirname, '../renderer/index.html')) + } + + // dev tool + if (!app.isPackaged) { + // mainWindow.webContents.openDevTools() + } else mainWindow.webContents.openDevTools = () => {} + + // window resize/close func + mainWindow.on('closed', (_e) => { + mainWindow = null + }) + mainWindow.on('maximize', () => {}) + mainWindow.on('unmaximize', () => {}) + // Event listener for when the window is restored from minimized state + mainWindow.on('restore', () => {}) + + return mainWindow +} diff --git a/src/main/index.ts b/src/main/index.ts index ea58991..2062c77 100644 --- a/src/main/index.ts +++ b/src/main/index.ts @@ -30,7 +30,7 @@ import { updateCommands, updateCommandUtils } from './db' -import { createUpdaterWindow } from './appWindow' +import { createSplashWindow, createUpdaterWindow, createWindow } from './appWindow' const isMac = process.platform === 'darwin' let mainWindow: BrowserWindow | null = null @@ -43,112 +43,16 @@ autoUpdater.autoDownload = false // connected to database export const db: Database = dbInit() -// splash screen -function createSplashWindow(): BrowserWindow { - const win = new BrowserWindow({ - width: 525, - height: 300, - frame: false, - transparent: true, - alwaysOnTop: true, - webPreferences: { - nodeIntegration: false, - webSecurity: true, - sandbox: false, - contextIsolation: true - } - }) - - const splashScreenSrc = app.isPackaged - ? join(process.resourcesPath, 'splashscreen.html') - : join(__dirname, './../../', 'splashscreen.html') - - win.loadFile(splashScreenSrc) - - win.webContents.on('did-finish-load', () => { - win.webContents - .executeJavaScript( - ` - const version = document.getElementById('version') - version.textContent = '${appVersion}' - ` - ) - .then((result) => { - console.log('Executed in renderer:', result) - }) - .catch(console.error) - }) - - return win -} - -// updater window - -// main window -const createWindow = async (): Promise => { - mainWindow = new BrowserWindow({ - width: 1280, - height: 720, - minWidth: 1280, - minHeight: 720, - show: false, - frame: false, - alwaysOnTop: false, - transparent: false, - focusable: true, - icon: join(__dirname, './../../resources/icons/icon.png'), - autoHideMenuBar: true, - webPreferences: { - preload: join(__dirname, '../preload/index.js'), - nodeIntegration: false, - webSecurity: true, - sandbox: false, - contextIsolation: true - } - }) - - // - mainWindow.webContents.session.webRequest.onHeadersReceived((details, callback) => { - if (details.responseHeaders === undefined) return - callback({ - responseHeaders: Object.fromEntries( - Object.entries(details.responseHeaders).filter( - (header) => !/x-frame-options/i.test(header[0]) - ) - ) - }) - }) - mainWindow.webContents.setWindowOpenHandler((details) => { - shell.openExternal(details.url) - return { action: 'deny' } - }) - - // Load the remote URL for development or the local html file for production. - if (is.dev && process.env['ELECTRON_RENDERER_URL']) { - mainWindow.loadURL(process.env['ELECTRON_RENDERER_URL']) - } else { - mainWindow.loadFile(join(__dirname, '../renderer/index.html')) - } - - // window resize/close func - mainWindow.on('closed', (_e) => { - mainWindow = null - }) - mainWindow.on('maximize', () => {}) - mainWindow.on('unmaximize', () => {}) - // Event listener for when the window is restored from minimized state - mainWindow.on('restore', () => {}) - - return mainWindow -} - app.whenReady().then(async () => { // disable http-cache app.commandLine.appendSwitch('disable-http-cache') // check update - autoUpdater.checkForUpdates() - + try { + autoUpdater.checkForUpdates() + } catch (error) { + console.log(error) + } //Store data await insertCommandData(db) await insertCommandUtilsData(db) @@ -224,6 +128,8 @@ app.whenReady().then(async () => { //* App Window Resize // minimize the window ipcMain.on('app_window:MINIMIZE', (_event) => { + if (mainWindow === null || mainWindow === undefined) return + if (!mainWindow?.isMinimized()) { mainWindow?.minimize() } @@ -401,24 +307,29 @@ app.whenReady().then(async () => { ipcMain.handle('updater:OPEN_LINK', (_event, url: string) => { try { shell.openExternal(url) - } catch (error) {} + } catch (error) { + console.log(error) + } }) ipcMain.handle('updater:CLOSE_WINDOW', (_event) => { try { - if (updaterWindow) updaterWindow.destroy() + if (updaterWindow != null) updaterWindow.destroy() } catch (error) {} }) //@ Disappering splash screen and show main screen after 3 seconds. try { - const splashScreen: BrowserWindow = createSplashWindow() - updaterWindow = createUpdaterWindow() - const mainScreen: BrowserWindow = await createWindow() + const splashScreen: BrowserWindow = createSplashWindow({ appVersion }) + // const mainScreen: BrowserWindow = await createWindow() + + mainWindow = await createWindow() + // updaterWindow.show() - updaterWindow.show() - mainScreen.once('ready-to-show', () => { + mainWindow?.once('ready-to-show', () => { setTimeout( () => { - // mainScreen.show() + // updaterWindow = createUpdaterWindow('2.0.1') + // updaterWindow.show() + mainWindow?.show() splashScreen.destroy() }, app.isPackaged ? 3000 : 0 @@ -459,7 +370,8 @@ app.on('window-all-closed', (_e) => { // Auto Updater autoUpdater.on('update-available', (info) => { - console.log('====================================') - console.log('info ', info) - console.log('====================================') + updaterWindow = createUpdaterWindow(info.version) + setTimeout(() => { + updaterWindow?.show() + }, 10 * 1000) }) diff --git a/src/renderer/src/components/utlits/TopBar.tsx b/src/renderer/src/components/utlits/TopBar.tsx index a68a908..2ed1aba 100644 --- a/src/renderer/src/components/utlits/TopBar.tsx +++ b/src/renderer/src/components/utlits/TopBar.tsx @@ -1,10 +1,10 @@ +import { Dispatch, FC, SetStateAction, useState } from 'react' import { WindowMinIcon, WindowMaximizeIcon, WindowCloseIcon, WindowUnMaximizeIcon } from '@renderer/assets/icons/Icons' -import { Dispatch, FC, SetStateAction, useState } from 'react' import PropTypes from 'prop-types' import { ResponseStatus } from '@renderer/utils/enums' import { Logo } from '@renderer/assets' diff --git a/updaterScreen.html b/updaterScreen.html index cfc77f6..ad55f38 100644 --- a/updaterScreen.html +++ b/updaterScreen.html @@ -12,8 +12,8 @@ position: absolute; top: 0; left: 0; - height: 100%; - width: 100%; + width: 500px; + height: 250px; overflow: hidden !important; margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', @@ -53,9 +53,16 @@ } } + .draggable { + -webkit-user-select: none; + user-select: none; + -webkit-app-region: drag; + } + /* start */ .updater-container { height: 100%; + width: 100%; display: flex; flex-direction: column; justify-content: start; @@ -64,28 +71,33 @@ } /* header */ .header { - width: 100%; - height: 2.5rem; + width: 500px; + height: 2rem; display: flex; justify-content: space-between; align-items: center; - padding: 0px 12px; + padding: 0px 0px; background-color: #d9d9d9; box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.2); } - .header > .header-logo { + .header-logo-title { + display: flex; + align-items: center; + gap: 8px; + cursor: pointer; + } + .header > .header-logo-title > .header-logo { margin-left: 12px; - height: 2rem; - width: 2rem; + height: 1.5rem; + width: 1.5rem; } - .header > .header-title { - font-size: 16px; + .header > .header-logo-title > .header-title { + font-size: 14px; font-weight: 500; opacity: 80%; - margin-left: -60px; } .header > .header-close { - padding: 7px 20px; + padding: 2px 8px 3px 8px; fill: #333; cursor: pointer; transition-duration: 300ms; @@ -162,6 +174,7 @@ color: rgba(0, 51, 255, 0.89); font-size: 12px; margin-left: 84px; + cursor: pointer; } .footer > .powered { display: flex; @@ -196,8 +209,10 @@
- - Robotics Academy Desktop Update Available +
+ + Robotics Academy Desktop Update Available +

A new version of Robotics Academy Desktop Available.

-

Do you want to download version 2.0.1 ?

+

Do you want to download version 2.0.1 ?

Version on your system 2.0.0

@@ -246,7 +261,7 @@
-
change log
+
Powered by @@ -271,14 +286,25 @@ noButton.addEventListener('click', closeWindowFunc) // element to open link - const yesButton = document.getElementById('button-yes') - yesButton.addEventListener('click', async () => { + const openLink = async () => { try { - window.api.updaterWindowOpenLink('https://google.com') + let url = `https://github.com/JdeRobot/RoboticsAcademy-Desktop/releases/` + const version = document.getElementById('update-version') + + if (version && version.textContent.length > 0) { + url += `tag/${version.textContent}` + } + + window.api.updaterWindowOpenLink(url) } catch (err) { console.log(err) } - }) + } + // elements link + const yesButton = document.getElementById('button-yes') + const changeLog = document.getElementById('change-log') + yesButton.addEventListener('click', openLink) + changeLog.addEventListener('click', openLink)