myxelium/Bridge-Multi
1
0
Fork 0
mirror of https://github.com/Myxelium/Bridge-Multi.git synced 2026-04-09 05:09:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve update UI

Browse Source
This commit is contained in:
Geomitron
2024-07-10 23:15:38 -05:00
parent ba357d5fea
commit 0c8b20c3e9
9 changed files with 53 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src-angular/app/components/settings/settings.component.html
View File

@@ -139,10 +139,10 @@
<div class="absolute bottom-8 right-8 flex gap-6">
<div class="join">
<button *ngIf="updateAvailable" class="join-item btn btn-primary" (click)="downloadUpdate()">
<button *ngIf="updateAvailable === 'yes'" class="join-item btn btn-primary" (click)="downloadUpdate()">
<i class="bi text-xl" [ngClass]="updateDownloaded ? 'bi-arrow-repeat' : 'bi-cloud-arrow-down'"></i>{{ downloadUpdateText }}
</button>
<button *ngIf="updateAvailable === null" class="join-item btn btn-warning" [class.disabled]="updateRetrying" (click)="retryUpdate()">
<button *ngIf="updateAvailable === 'error'" class="join-item btn btn-warning" [class.disabled]="updateRetrying" (click)="retryUpdate()">
<i class="bi bi-arrow-repeat text-xl" [class.loading]="updateRetrying"></i>{{ retryUpdateText }}
</button>
<button class="join-item btn btn-outline btn-disabled">{{ currentVersion }}</button>

42
src-angular/app/components/settings/settings.component.ts
View File

@@ -15,9 +15,9 @@ export class SettingsComponent implements OnInit {
public isSng: FormControl<boolean>
public isCompactTable: FormControl<boolean>
updateAvailable: boolean | null = false
updateAvailable: 'yes' | 'no' | 'error' = 'no'
loginClicked = false
downloadUpdateText = 'Update available'
downloadUpdateText = 'Download Update'
retryUpdateText = 'Failed to check for update'
updateDownloading = false
updateDownloaded = false
@@ -36,18 +36,18 @@ export class SettingsComponent implements OnInit {
async ngOnInit() {
window.electron.on.updateAvailable(result => {
this.updateAvailable = result !== null
this.updateAvailable = result !== null ? 'yes' : 'no'
this.updateRetrying = false
if (result !== null) {
this.downloadUpdateText = `Update available (${result.version})`
this.downloadUpdateText = `Download Update (${result.version})`
}
this.ref.detectChanges()
})
window.electron.on.updateError(err => {
console.log(err)
this.updateAvailable = null
this.updateAvailable = 'error'
this.updateRetrying = false
this.retryUpdateText = `Failed to check for update: ${err}`
this.retryUpdateText = 'Failed to check for update'
this.ref.detectChanges()
})
window.electron.invoke.getCurrentVersion().then(version => {
@@ -94,22 +94,26 @@ export class SettingsComponent implements OnInit {
return _.capitalize(text)
}
downloadUpdate() {
async downloadUpdate() {
if (this.updateDownloaded) {
window.electron.emit.quitAndInstall()
} else if (!this.updateDownloading) {
this.updateDownloading = true
window.electron.emit.downloadUpdate()
this.downloadUpdateText = 'Downloading... (0%)'
window.electron.on.updateProgress(result => {
this.downloadUpdateText = `Downloading... (${result.percent.toFixed(0)}%)`
this.ref.detectChanges()
})
window.electron.on.updateDownloaded(() => {
this.downloadUpdateText = 'Quit and install update'
this.updateDownloaded = true
this.ref.detectChanges()
})
if (await window.electron.invoke.getPlatform() === 'darwin') { // Thanks Apple...
this.openUrl('https://github.com/Geomitron/Bridge/releases/latest')
} else {
this.updateDownloading = true
window.electron.emit.downloadUpdate()
this.downloadUpdateText = 'Downloading... (0%)'
window.electron.on.updateProgress(result => {
this.downloadUpdateText = `Downloading... (${result.percent.toFixed(0)}%)`
this.ref.detectChanges()
})
window.electron.on.updateDownloaded(() => {
this.downloadUpdateText = 'Quit and install update'
this.updateDownloaded = true
this.ref.detectChanges()
})
}
}
}

10
src-angular/app/components/toolbar/toolbar.component.html
View File

@@ -1,11 +1,11 @@
<div class="navbar p-0 min-h-0 bg-base-100" style="-webkit-app-region: drag">
<div style="-webkit-app-region: no-drag">
<button class="btn btn-square btn-ghost rounded-none px-11" routerLinkActive="btn-active" routerLink="/browse">Browse</button>
<!-- TODO <a class="btn btn-square btn-ghost rounded-none" routerLinkActive="btn-active" routerLink="/library">Library</a> -->
<button class="btn btn-square btn-ghost rounded-none px-11 flex flex-nowrap" routerLinkActive="btn-active" routerLink="/settings">
<div *ngIf="updateAvailable" class="badge badge-accent badge-xs"></div>
<i *ngIf="updateAvailable === null" class="bi bi-exclamation-triangle-fill text-warning"></i>
<button class="btn btn-ghost rounded-none" routerLinkActive="btn-active" routerLink="/browse">Browse</button>
<!-- TODO <a class="btn btn-ghost rounded-none" routerLinkActive="btn-active" routerLink="/library">Library</a> -->
<button class="btn btn-ghost rounded-none flex flex-nowrap" routerLinkActive="btn-active" routerLink="/settings">
<i *ngIf="updateAvailable === 'error'" class="bi bi-exclamation-triangle-fill text-warning"></i>
Settings
<div *ngIf="updateAvailable === 'yes'" class="badge badge-accent badge-sm">Update Available</div>
</button>
</div>
<div class="flex-1"></div>

6
src-angular/app/components/toolbar/toolbar.component.ts
View File

@@ -7,7 +7,7 @@ import { ChangeDetectorRef, Component, OnInit } from '@angular/core'
export class ToolbarComponent implements OnInit {
isMaximized: boolean
updateAvailable: boolean | null = false
updateAvailable: 'yes' | 'no' | 'error' = 'no'
constructor(private ref: ChangeDetectorRef) { }
@@ -23,11 +23,11 @@ export class ToolbarComponent implements OnInit {
})
window.electron.on.updateAvailable(result => {
this.updateAvailable = result !== null
this.updateAvailable = result !== null ? 'yes' : 'no'
this.ref.detectChanges()
})
window.electron.on.updateError(() => {
this.updateAvailable = null
this.updateAvailable = 'error'
this.ref.detectChanges()
})
this.updateAvailable = await window.electron.invoke.getUpdateAvailable()

3
src-electron/IpcHandler.ts
View File

@@ -2,12 +2,13 @@ import { IpcInvokeHandlers, IpcToMainEmitHandlers } from '../src-shared/interfac
import { download } from './ipc/DownloadHandler.ipc.js'
import { getSettings, setSettings } from './ipc/SettingsHandler.ipc.js'
import { downloadUpdate, getCurrentVersion, getUpdateAvailable, quitAndInstall, retryUpdate } from './ipc/UpdateHandler.ipc.js'
import { isMaximized, maximize, minimize, openUrl, quit, restore, showFile, showFolder, showOpenDialog, toggleDevTools } from './ipc/UtilHandlers.ipc.js'
import { getPlatform, isMaximized, maximize, minimize, openUrl, quit, restore, showFile, showFolder, showOpenDialog, toggleDevTools } from './ipc/UtilHandlers.ipc.js'
export function getIpcInvokeHandlers(): IpcInvokeHandlers {
return {
getSettings,
getCurrentVersion,
getPlatform,
getUpdateAvailable,
isMaximized,
showOpenDialog,

10
src-electron/ipc/UpdateHandler.ipc.ts
View File

@@ -4,24 +4,24 @@ import { inspect } from 'util'
import { UpdateProgress } from '../../src-shared/interfaces/update.interface.js'
import { emitIpcEvent } from '../main.js'
let updateAvailable: boolean | null = false
let updateAvailable: 'yes' | 'no' | 'error' = 'no'
let downloading = false
electronUpdater.autoUpdater.autoDownload = false
electronUpdater.autoUpdater.logger = null
electronUpdater.autoUpdater.on('error', (err: Error) => {
updateAvailable = null
updateAvailable = 'error'
emitIpcEvent('updateError', inspect(err))
})
electronUpdater.autoUpdater.on('update-available', (info: electronUpdater.UpdateInfo) => {
updateAvailable = true
updateAvailable = 'yes'
emitIpcEvent('updateAvailable', info)
})
electronUpdater.autoUpdater.on('update-not-available', () => {
updateAvailable = false
updateAvailable = 'no'
emitIpcEvent('updateAvailable', null)
})
@@ -30,7 +30,7 @@ export async function retryUpdate() {
try {
await electronUpdater.autoUpdater.checkForUpdates()
} catch (err) {
updateAvailable = null
updateAvailable = 'error'
emitIpcEvent('updateError', inspect(err))
}
}

4
src-electron/ipc/UtilHandlers.ipc.ts
View File

@@ -44,3 +44,7 @@ export function showFolder(folderPath: string) {
export function showFile(filePath: string) {
shell.showItemInFolder(filePath)
}
export async function getPlatform() {
return process.platform
}

1
src-electron/preload.ts
View File

@@ -20,6 +20,7 @@ const electronApi: ContextBridgeApi = {
invoke: {
getSettings: getInvoker('getSettings'),
getCurrentVersion: getInvoker('getCurrentVersion'),
getPlatform: getInvoker('getPlatform'),
getUpdateAvailable: getInvoker('getUpdateAvailable'),
isMaximized: getInvoker('isMaximized'),
showOpenDialog: getInvoker('showOpenDialog'),

12
src-shared/interfaces/ipc.interface.ts
View File

@@ -1,9 +1,9 @@
import { OpenDialogOptions, OpenDialogReturnValue } from 'electron'
import { UpdateInfo } from 'electron-updater'
import { Settings } from '../Settings'
import { Download, DownloadProgress } from './download.interface'
import { UpdateProgress } from './update.interface'
import { Settings } from '../Settings.js'
import { Download, DownloadProgress } from './download.interface.js'
import { UpdateProgress } from './update.interface.js'
export interface ContextBridgeApi {
invoke: IpcInvokeHandlers
@@ -29,9 +29,13 @@ export interface IpcInvokeEvents {
input: void
output: string
}
getPlatform: {
input: void
output: NodeJS.Platform
}
getUpdateAvailable: {
input: void
output: boolean | null
output: 'yes' | 'no' | 'error'
}
isMaximized: {
input: void