feat: add warning for outdated browsers (#1537)

This commit is contained in:
Stefan Dej 2023-09-19 20:01:07 +02:00 committed by GitHub
parent c87586aebb
commit 5007646ff0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 72 additions and 1 deletions

11
package-lock.json generated
View File

@ -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",

View File

@ -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",

View File

@ -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",

View File

@ -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",

View File

@ -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()

View File

@ -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']