feat: add warning for outdated browsers (#1537)
This commit is contained in:
parent
c87586aebb
commit
5007646ff0
11
package-lock.json
generated
11
package-lock.json
generated
@ -25,6 +25,7 @@
|
||||
"axios": "^0.27.0",
|
||||
"codemirror": "^6.0.1",
|
||||
"core-js": "^3.16.0",
|
||||
"detect-browser": "^5.3.0",
|
||||
"echarts": "^5.2.2",
|
||||
"echarts-gl": "^2.0.8",
|
||||
"hls.js": "^1.3.3",
|
||||
@ -4991,6 +4992,11 @@
|
||||
"node": ">=0.4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/detect-browser": {
|
||||
"version": "5.3.0",
|
||||
"resolved": "https://registry.npmjs.org/detect-browser/-/detect-browser-5.3.0.tgz",
|
||||
"integrity": "sha512-53rsFbGdwMwlF7qvCt0ypLM5V5/Mbl0szB7GPN8y9NCcbknYOeVVXdrXEq+90IwAfrrzt6Hd+u2E2ntakICU8w=="
|
||||
},
|
||||
"node_modules/dir-glob": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
|
||||
@ -14179,6 +14185,11 @@
|
||||
"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
|
||||
"integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ=="
|
||||
},
|
||||
"detect-browser": {
|
||||
"version": "5.3.0",
|
||||
"resolved": "https://registry.npmjs.org/detect-browser/-/detect-browser-5.3.0.tgz",
|
||||
"integrity": "sha512-53rsFbGdwMwlF7qvCt0ypLM5V5/Mbl0szB7GPN8y9NCcbknYOeVVXdrXEq+90IwAfrrzt6Hd+u2E2ntakICU8w=="
|
||||
},
|
||||
"dir-glob": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
|
||||
|
@ -40,6 +40,7 @@
|
||||
"axios": "^0.27.0",
|
||||
"codemirror": "^6.0.1",
|
||||
"core-js": "^3.16.0",
|
||||
"detect-browser": "^5.3.0",
|
||||
"echarts": "^5.2.2",
|
||||
"echarts-gl": "^2.0.8",
|
||||
"hls.js": "^1.3.3",
|
||||
|
@ -1,6 +1,10 @@
|
||||
{
|
||||
"App": {
|
||||
"Notifications": {
|
||||
"BrowserWarnings": {
|
||||
"Headline": "Veralteter Browser",
|
||||
"Description": "Die verwendete {name} Version ({version}) ist veraltet und wird nicht vollständig unterstützt. Mainsail benötigt die Version {minVersion} oder höher."
|
||||
},
|
||||
"DependencyDescription": "Die momentane {name} Version unterstützt nicht alle Funktionen von Mainsail. Aktualisiere {name} mindestens auf Version {neededVersion}.",
|
||||
"DependencyName": "Abhängigkeit: {name}",
|
||||
"DismissAll": "Alles verwerfen",
|
||||
|
@ -1,6 +1,10 @@
|
||||
{
|
||||
"App": {
|
||||
"Notifications": {
|
||||
"BrowserWarnings": {
|
||||
"Headline": "Outdated Browser",
|
||||
"Description": "{name} is outdated and not fully supported. The current version is {version}, but Mainsail requires version {minVersion} or higher."
|
||||
},
|
||||
"DependencyDescription": "The current {name} version does not support all features of Mainsail. Update {name} to at least {neededVersion}.",
|
||||
"DependencyName": "Dependency: {name}",
|
||||
"DismissAll": "Dismiss all",
|
||||
|
@ -5,6 +5,9 @@ import i18n from '@/plugins/i18n.js'
|
||||
import { RootStateDependency } from '@/store/types'
|
||||
import { sha256 } from 'js-sha256'
|
||||
import { PrinterStateKlipperConfigWarning } from '@/store/printer/types'
|
||||
import { detect } from 'detect-browser'
|
||||
import semver from 'semver'
|
||||
import { minBrowserVersions } from '@/store/variables'
|
||||
|
||||
export const getters: GetterTree<GuiNotificationState, any> = {
|
||||
getNotifications: (state, getters) => {
|
||||
@ -22,12 +25,15 @@ export const getters: GetterTree<GuiNotificationState, any> = {
|
||||
// moonraker warnings
|
||||
notifications = notifications.concat(getters['getNotificationsMoonrakerWarnings'])
|
||||
|
||||
// moonraker failed compontents
|
||||
// moonraker failed components
|
||||
notifications = notifications.concat(getters['getNotificationsMoonrakerFailedComponents'])
|
||||
|
||||
// klipper warnings
|
||||
notifications = notifications.concat(getters['getNotificationsKlipperWarnings'])
|
||||
|
||||
// browser warnings
|
||||
notifications = notifications.concat(getters['getNotificationsBrowserWarnings'])
|
||||
|
||||
const mapType = {
|
||||
normal: 2,
|
||||
high: 1,
|
||||
@ -270,6 +276,50 @@ export const getters: GetterTree<GuiNotificationState, any> = {
|
||||
return notifications
|
||||
},
|
||||
|
||||
getNotificationsBrowserWarnings: (state, getters, rootState) => {
|
||||
const notifications: GuiNotificationStateEntry[] = []
|
||||
|
||||
const browser = detect()
|
||||
const date = rootState.server.system_boot_at ?? new Date()
|
||||
|
||||
// stop here, because no browser detected
|
||||
if (browser === null) return notifications
|
||||
|
||||
// output browser information to console
|
||||
window.console.debug(`Browser: ${browser.name} ${browser.version}, OS: ${browser.os}`)
|
||||
|
||||
// find browser requirement
|
||||
const minBrowserVersion = minBrowserVersions.find(
|
||||
(entry) => entry.name.toLowerCase() === browser.name.toLowerCase()
|
||||
)
|
||||
|
||||
// stop here, because no browser requirement found
|
||||
if (minBrowserVersion === undefined) return notifications
|
||||
|
||||
if (
|
||||
semver.valid(browser.version) &&
|
||||
semver.valid(minBrowserVersion.version) &&
|
||||
semver.gt(minBrowserVersion.version, browser.version ?? '0.0.0')
|
||||
) {
|
||||
notifications.push({
|
||||
id: `browserWarning/${minBrowserVersion.name}/${minBrowserVersion.version}`,
|
||||
priority: 'critical',
|
||||
title: i18n.t('App.Notifications.BrowserWarnings.Headline').toString(),
|
||||
description: i18n
|
||||
.t('App.Notifications.BrowserWarnings.Description', {
|
||||
name: minBrowserVersion.name,
|
||||
version: browser.version,
|
||||
minVersion: minBrowserVersion.version,
|
||||
})
|
||||
.toString(),
|
||||
date,
|
||||
dismissed: false,
|
||||
} as GuiNotificationStateEntry)
|
||||
}
|
||||
|
||||
return notifications
|
||||
},
|
||||
|
||||
getDismiss: (state, getters, rootState) => {
|
||||
const currentTime = new Date()
|
||||
const systemBootAt = rootState.server.system_boot_at ?? new Date()
|
||||
|
@ -3,6 +3,7 @@ export const defaultPrimaryColor = '#2196f3'
|
||||
|
||||
export const minKlipperVersion = 'v0.11.0-97'
|
||||
export const minMoonrakerVersion = 'v0.8.0-38'
|
||||
export const minBrowserVersions = [{ name: 'safari', version: '16.5.2' }]
|
||||
|
||||
export const colorArray = ['#F44336', '#8e379d', '#03DAC5', '#3F51B5', '#ffde03', '#009688', '#E91E63']
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user