@iobroker/adapter-react-v5 8.2.2 → 8.2.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -0
- package/build/Components/Loader.js +4 -0
- package/build/Components/Loader.js.map +1 -1
- package/build/Components/Loaders/HA.d.ts +17 -0
- package/build/Components/Loaders/HA.js +60 -0
- package/build/Components/Loaders/HA.js.map +1 -0
- package/build/Components/Utils.d.ts +1 -1
- package/build/Components/Utils.js +5 -2
- package/build/Components/Utils.js.map +1 -1
- package/build/GenericApp.d.ts +1 -1
- package/build/GenericApp.js +11 -10
- package/build/GenericApp.js.map +1 -1
- package/build/Theme.js +41 -0
- package/build/Theme.js.map +1 -1
- package/build/index.d.ts +1 -0
- package/build/index.js +1 -0
- package/build/index.js.map +1 -1
- package/build/types.d.ts +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -690,6 +690,9 @@ You can find the migration instructions:
|
|
|
690
690
|
-->
|
|
691
691
|
|
|
692
692
|
## Changelog
|
|
693
|
+
### 8.2.4 (2026-05-15)
|
|
694
|
+
- (@GermanBluefox) allowed to define the theme by query parameter `?theme=dark` or `?theme=light` or `?theme=auto`
|
|
695
|
+
|
|
693
696
|
### 8.2.2 (2026-04-21)
|
|
694
697
|
- (@GermanBluefox) Force using React 18
|
|
695
698
|
|
|
@@ -10,6 +10,7 @@ import { LoaderNW } from './Loaders/NW';
|
|
|
10
10
|
import { LoaderVendor } from './Loaders/Vendor';
|
|
11
11
|
import { LoaderCommunity } from './Loaders/Community';
|
|
12
12
|
import { LoaderPT } from './Loaders/PT';
|
|
13
|
+
import { LoaderHA } from './Loaders/HA';
|
|
13
14
|
export function Loader(props) {
|
|
14
15
|
const vendorPrefix = window.vendorPrefix;
|
|
15
16
|
if (vendorPrefix === 'PT') {
|
|
@@ -21,6 +22,9 @@ export function Loader(props) {
|
|
|
21
22
|
if (vendorPrefix === 'NW') {
|
|
22
23
|
return React.createElement(LoaderNW, { themeType: "dark" });
|
|
23
24
|
}
|
|
25
|
+
if (vendorPrefix === 'HA') {
|
|
26
|
+
return React.createElement(LoaderHA, { themeType: "dark" });
|
|
27
|
+
}
|
|
24
28
|
if (vendorPrefix && vendorPrefix !== '@@vendorPrefix@@') {
|
|
25
29
|
return React.createElement(LoaderVendor, { themeType: props.themeType });
|
|
26
30
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Loader.js","sourceRoot":"./src/","sources":["Components/Loader.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACxC,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAyBxC,MAAM,UAAU,MAAM,CAAC,KAAkB;IACrC,MAAM,YAAY,GAAG,MAAM,CAAC,YAAY,CAAC;IACzC,IAAI,YAAY,KAAK,IAAI,EAAE,CAAC;QACxB,OAAO,oBAAC,QAAQ,IAAC,SAAS,EAAE,KAAK,CAAC,SAAS,GAAI,CAAC;IACpD,CAAC;IACD,IAAI,YAAY,KAAK,IAAI,EAAE,CAAC;QACxB,OAAO,oBAAC,QAAQ,IAAC,SAAS,EAAE,KAAK,CAAC,SAAS,GAAI,CAAC;IACpD,CAAC;IACD,IAAI,YAAY,KAAK,IAAI,EAAE,CAAC;QACxB,OAAO,oBAAC,QAAQ,IAAC,SAAS,EAAC,MAAM,GAAG,CAAC;IACzC,CAAC;IACD,IAAI,YAAY,IAAI,YAAY,KAAK,kBAAkB,EAAE,CAAC;QACtD,OAAO,oBAAC,YAAY,IAAC,SAAS,EAAE,KAAK,CAAC,SAAS,GAAI,CAAC;IACxD,CAAC;IACD,OAAO,oBAAC,eAAe,IAAC,SAAS,EAAE,KAAK,CAAC,SAAS,GAAI,CAAC;AAC3D,CAAC","sourcesContent":["/**\n * Copyright 2018-2025 Denis Haev (bluefox) <dogafox@gmail.com>\n *\n * MIT License\n *\n */\nimport React from 'react';\nimport type { ThemeName, ThemeType } from '../types';\nimport { LoaderMV } from './Loaders/MV';\nimport { LoaderNW } from './Loaders/NW';\nimport { LoaderVendor } from './Loaders/Vendor';\nimport { LoaderCommunity } from './Loaders/Community';\nimport { LoaderPT } from './Loaders/PT';\n\ndeclare global {\n interface Window {\n loadingBackgroundImage: undefined | string;\n loadingBackgroundColor: undefined | string;\n loadingHideLogo: undefined | 'true';\n }\n}\n\nexport interface LoaderProps {\n /** The size in pixels of this loader. */\n size?: number;\n /** The chosen theme type. */\n themeType?: ThemeType;\n /** Theme name */\n themeName?: ThemeName;\n /** @deprecated Theme name. use themeName instead */\n theme?: ThemeName;\n /** Background color */\n backgroundColor?: string;\n /** Background image URL */\n backgroundImage?: string;\n}\n\nexport function Loader(props: LoaderProps): React.JSX.Element {\n const vendorPrefix = window.vendorPrefix;\n if (vendorPrefix === 'PT') {\n return <LoaderPT themeType={props.themeType} />;\n }\n if (vendorPrefix === 'MV') {\n return <LoaderMV themeType={props.themeType} />;\n }\n if (vendorPrefix === 'NW') {\n return <LoaderNW themeType=\"dark\" />;\n }\n if (vendorPrefix && vendorPrefix !== '@@vendorPrefix@@') {\n return <LoaderVendor themeType={props.themeType} />;\n }\n return <LoaderCommunity themeType={props.themeType} />;\n}\n"]}
|
|
1
|
+
{"version":3,"file":"Loader.js","sourceRoot":"./src/","sources":["Components/Loader.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACxC,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACxC,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAyBxC,MAAM,UAAU,MAAM,CAAC,KAAkB;IACrC,MAAM,YAAY,GAAG,MAAM,CAAC,YAAY,CAAC;IACzC,IAAI,YAAY,KAAK,IAAI,EAAE,CAAC;QACxB,OAAO,oBAAC,QAAQ,IAAC,SAAS,EAAE,KAAK,CAAC,SAAS,GAAI,CAAC;IACpD,CAAC;IACD,IAAI,YAAY,KAAK,IAAI,EAAE,CAAC;QACxB,OAAO,oBAAC,QAAQ,IAAC,SAAS,EAAE,KAAK,CAAC,SAAS,GAAI,CAAC;IACpD,CAAC;IACD,IAAI,YAAY,KAAK,IAAI,EAAE,CAAC;QACxB,OAAO,oBAAC,QAAQ,IAAC,SAAS,EAAC,MAAM,GAAG,CAAC;IACzC,CAAC;IACD,IAAI,YAAY,KAAK,IAAI,EAAE,CAAC;QACxB,OAAO,oBAAC,QAAQ,IAAC,SAAS,EAAC,MAAM,GAAG,CAAC;IACzC,CAAC;IACD,IAAI,YAAY,IAAI,YAAY,KAAK,kBAAkB,EAAE,CAAC;QACtD,OAAO,oBAAC,YAAY,IAAC,SAAS,EAAE,KAAK,CAAC,SAAS,GAAI,CAAC;IACxD,CAAC;IACD,OAAO,oBAAC,eAAe,IAAC,SAAS,EAAE,KAAK,CAAC,SAAS,GAAI,CAAC;AAC3D,CAAC","sourcesContent":["/**\n * Copyright 2018-2025 Denis Haev (bluefox) <dogafox@gmail.com>\n *\n * MIT License\n *\n */\nimport React from 'react';\nimport type { ThemeName, ThemeType } from '../types';\nimport { LoaderMV } from './Loaders/MV';\nimport { LoaderNW } from './Loaders/NW';\nimport { LoaderVendor } from './Loaders/Vendor';\nimport { LoaderCommunity } from './Loaders/Community';\nimport { LoaderPT } from './Loaders/PT';\nimport { LoaderHA } from './Loaders/HA';\n\ndeclare global {\n interface Window {\n loadingBackgroundImage: undefined | string;\n loadingBackgroundColor: undefined | string;\n loadingHideLogo: undefined | 'true';\n }\n}\n\nexport interface LoaderProps {\n /** The size in pixels of this loader. */\n size?: number;\n /** The chosen theme type. */\n themeType?: ThemeType;\n /** Theme name */\n themeName?: ThemeName;\n /** @deprecated Theme name. use themeName instead */\n theme?: ThemeName;\n /** Background color */\n backgroundColor?: string;\n /** Background image URL */\n backgroundImage?: string;\n}\n\nexport function Loader(props: LoaderProps): React.JSX.Element {\n const vendorPrefix = window.vendorPrefix;\n if (vendorPrefix === 'PT') {\n return <LoaderPT themeType={props.themeType} />;\n }\n if (vendorPrefix === 'MV') {\n return <LoaderMV themeType={props.themeType} />;\n }\n if (vendorPrefix === 'NW') {\n return <LoaderNW themeType=\"dark\" />;\n }\n if (vendorPrefix === 'HA') {\n return <LoaderHA themeType=\"dark\" />;\n }\n if (vendorPrefix && vendorPrefix !== '@@vendorPrefix@@') {\n return <LoaderVendor themeType={props.themeType} />;\n }\n return <LoaderCommunity themeType={props.themeType} />;\n}\n"]}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { ThemeType } from '../../types';
|
|
3
|
+
interface LogoProps {
|
|
4
|
+
themeType?: ThemeType;
|
|
5
|
+
size?: number;
|
|
6
|
+
/** Background color */
|
|
7
|
+
backgroundColor?: string;
|
|
8
|
+
/** Background image URL */
|
|
9
|
+
backgroundImage?: string;
|
|
10
|
+
}
|
|
11
|
+
/**
|
|
12
|
+
* Vendor specific loader
|
|
13
|
+
*
|
|
14
|
+
* @param props Properties
|
|
15
|
+
*/
|
|
16
|
+
export declare function LoaderHA(props: LogoProps): React.JSX.Element;
|
|
17
|
+
export {};
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
const FLICKER_STYLE_ID = 'loader-ha-flicker-keyframes';
|
|
3
|
+
const FLICKER_KEYFRAMES = `
|
|
4
|
+
@keyframes loaderHA-flicker {
|
|
5
|
+
0% { filter: drop-shadow(0 0 4px #db0a33); opacity: 1; }
|
|
6
|
+
15% { filter: drop-shadow(0 0 10px #db0a33) hue-rotate(-2deg); opacity: 0.97; }
|
|
7
|
+
30% { filter: drop-shadow(0 0 6px #db0a33); opacity: 1; }
|
|
8
|
+
45% { filter: drop-shadow(0 0 14px #e61a38) hue-rotate(-3deg); opacity: 0.94; }
|
|
9
|
+
60% { filter: drop-shadow(0 0 7px #db0a33) hue-rotate(-1deg); opacity: 1; }
|
|
10
|
+
75% { filter: drop-shadow(0 0 11px #e61a38) hue-rotate(-2deg); opacity: 0.98; }
|
|
11
|
+
90% { filter: drop-shadow(0 0 5px #db0a33); opacity: 1; }
|
|
12
|
+
100% { filter: drop-shadow(0 0 4px #db0a33); opacity: 1; }
|
|
13
|
+
}`;
|
|
14
|
+
/**
|
|
15
|
+
* Vendor specific loader
|
|
16
|
+
*
|
|
17
|
+
* @param props Properties
|
|
18
|
+
*/
|
|
19
|
+
export function LoaderHA(props) {
|
|
20
|
+
const themeType = props.themeType || 'dark';
|
|
21
|
+
const size = props.size || 300;
|
|
22
|
+
React.useEffect(() => {
|
|
23
|
+
if (!window.document.getElementById(FLICKER_STYLE_ID)) {
|
|
24
|
+
const style = window.document.createElement('style');
|
|
25
|
+
style.setAttribute('id', FLICKER_STYLE_ID);
|
|
26
|
+
style.innerHTML = FLICKER_KEYFRAMES;
|
|
27
|
+
window.document.head.appendChild(style);
|
|
28
|
+
}
|
|
29
|
+
}, []);
|
|
30
|
+
return (React.createElement("div", { style: {
|
|
31
|
+
width: '100%',
|
|
32
|
+
height: '100%',
|
|
33
|
+
position: 'absolute',
|
|
34
|
+
top: 0,
|
|
35
|
+
left: 0,
|
|
36
|
+
display: 'flex',
|
|
37
|
+
alignItems: 'center',
|
|
38
|
+
justifyContent: 'center',
|
|
39
|
+
backgroundImage: props.backgroundImage && props.backgroundImage !== '@@loginBackgroundImage@@'
|
|
40
|
+
? props.backgroundImage
|
|
41
|
+
: window.loadingBackgroundImage && window.loadingBackgroundImage !== '@@loginBackgroundImage@@'
|
|
42
|
+
? `url(${window.loadingBackgroundImage})`
|
|
43
|
+
: undefined,
|
|
44
|
+
backgroundColor: props.backgroundColor && props.backgroundColor !== '@@loginBackgroundColor@@'
|
|
45
|
+
? props.backgroundColor
|
|
46
|
+
: window.loadingBackgroundColor && window.loadingBackgroundColor !== '@@loginBackgroundColor@@'
|
|
47
|
+
? window.loadingBackgroundColor
|
|
48
|
+
: themeType === 'dark'
|
|
49
|
+
? '#000'
|
|
50
|
+
: '#FFF',
|
|
51
|
+
backgroundSize: 'cover',
|
|
52
|
+
} },
|
|
53
|
+
React.createElement("svg", { width: size, height: size, viewBox: "0 0 69.6 148.1", style: {
|
|
54
|
+
fill: '#db0a33',
|
|
55
|
+
animation: 'loaderHA-flicker 5s ease-in-out infinite',
|
|
56
|
+
willChange: 'filter, opacity',
|
|
57
|
+
} },
|
|
58
|
+
React.createElement("path", { d: "M69.5,100.6c0-.4,0-.8-.2-1.1v-.7c-.2-.4-.3-.8-.5-1.2,0-.2-.2-.5-.3-.7,0,0,0-.2,0-.2,0-.2,0-.3-.2-.5l-.4-.7-.4-.6c-1-1.6-2.4-3-4.2-4.3-.3-.2-.6-.4-.9-.6,0,0-.2,0-.3-.2-.3-.2-.6-.3-.9-.5-.2,0-.3-.2-.5-.3-.3-.2-.6-.3-.9-.5,0,0-.2,0-.3-.2-1-2.7-2.4-4.9-3.8-6.7h0c2.5,0,6.6-.3,7.5-3,3.5-3,2.5-9.7,2.5-10,0-.6-.2-1.1-.4-1.7h0v-.3c.5-3-.4-7.1-.5-7.7h0l-.3-1.1c0-.3-.2-.7-.4-1,0-.4-.3-.7-.4-1,0-.3-.3-.7-.5-1s-.4-.7-.6-1c-.2-.3-.4-.6-.6-.9l-.4-.4-.4-.4-.4-.4c0,0-.3-.3-.5-.4-.3-.2-.6-.4-1-.6-.2,0-.4-.2-.5-.2-.2,0-.4,0-.6-.2-.2,0-.4,0-.6,0h-1.8c-.4,0-.8,0-1.1.2-.4,0-.7.2-1.1.4h0c-1.6-.2-2.6-1-3.1-1.7h0c2-.9,3.5-1.9,4.6-3,2.6-2.2,4-5.1,4.7-7.2,3.4-1.1,5.4-4,5.4-4h0c4.6-5.3,1.2-15.1,1.2-15.1,0,0-.8,4.2-4,5.5,0-.3-.2-.6-.3-1.1s-.3-1.1-.6-1.7c-.2-.7-.5-1.4-.9-2.2-.4-.8-.8-1.6-1.4-2.4-.5-.8-1.2-1.7-1.9-2.5h0C59.2,6.6,49.2.3,49.2.3c0,0,3.3,5.8,1.3,9.9,0,0-3.5-.8-5.7-.8s-2.4.1-3.5.3c-.5.1-1.1.2-1.6.3-.3,0-.5.1-.8.2-.2,0-.5.1-.7.2-.5.1-.9.2-1.3.4-.4.1-.8.3-1.2.4-.4.1-.7.2-1,.3s-.6.2-.9.3h-.2c-2-2.8-3.7-7.5,1.8-11.9,0,0-13,5.3-8.2,17,0,0,0,.2-.1.4h0c-.3.3-.6.7-1,1.3-.3.6-.7,1.3-.9,2.1-.1.4-.2.8-.2,1.3v1.5c-.2-.1-.5-.2-.9-.4-1.7-.8-1.7-2.8-1.7-2.8-1.1,8.3,4.2,13.3,5.2,14.1,0,.4,0,.7-.2,1v.4c-.2,0-.3.3-.4.5-.1.4-.2.7-.3,1.1-.1.7-.1,1.5,0,2.2s.3,1.4.5,2c.3.6.6,1.2.9,1.7,0,0,0,0,.1.2.4.6,1,1.4,2,2h.1c.2,0,.8.5,1.7.7.2.2,1.5,1.7,3.1,2.1-.2,1.1-1,2.8-3.4,3.7,0,0-14.2-.4-13.2,13.5-6.6,8.7-3.8,13.4-3.8,13.4-.9.6-.9,1.9-.5,3,0,0,0,.3.2.5,0,0,0,0,.3.4.3.4.6.7,1,.8,1.1.7,3.1,1.5,6.4,1.1.2.3,1.3,1.8,1.3,2.2.5,2.3,1.2,4.5,1.3,6.8l.2,1.3c-2.2-.2-11-.2-16.6,9.1,0,0-.2.2-.2.4l-.5.9-.6,1.2h0c-.3.7-.7,1.7-1.1,2.8-.5.4-1.2,0-1.7-.3-.4-.4-.7-.7-.9-1.1,0,0,0-.2,0-.3v-.2s0-.2-.2-.2h0c0,0,0,0-.2-.2h-.4s-.2,0-.2,0c-.2,0-.2.2-.3.3,0,0-.1.2-.2.2,0,.2-.2.3-.2.5-.2.6-.4,1.2-.6,1.8-.6,2.4-.6,4.9-.1,7.3.2,1.2.6,2.4,1.1,3.5.5,1.1,1.2,2.1,2,3.1.8.9,1.7,1.8,2.7,2.5s2,1.3,3.1,1.8h0l.6.4-.3-.7c-.2-.4-.3-.9-.5-1.3-.1-.4-.2-.9-.3-1.3-.1-.9-.2-1.8,0-2.7,0-.4.2-.8.4-1.2.2-.4.4-.7.7-1.1.6-.8,1-1.6,1.5-2.5.4-.9.8-1.8,1.1-2.7.1-.5.3-1,.3-1.5v-.9h0c.1-2.3-1.9-3-3-2.9-.9,0-1.7.2-2,.2.7-1.3,1.3-2.4,2-3.4h0c.2-.4.4-.6.6-.9.4-.5.8-1,1.2-1.5.1,0,.2-.3.3-.4h0c.1,0,.2-.2.3-.4.1,0,.2-.3.4-.4,6.5-6.5,12.5-2.9,12.5-2.9,0,0,1.1,3.7,1.6,4.6h0c1,2.3,2.7,4.6,4.1,6.9h0c0,0,0,4.8,2.2,7.2.5.6,1.1,1.3,1.7,2.2.3.5.5,1,.7,1.4.2.3.3.6.4.9.3.4.5.8.8,1.3s.6,1,.8,1.6c.2.5.4,1,.6,1.5,0,0,1,5.1.7,7.4-3.3.9-5.5,2.4-7.4,3.2-1,.3-3.4,2-5.5,1.9h-.5c0,.1-3.6.3-2.7,3.1,0,0,.2,3.6,5.8,2.9,1.8-.1,7.5-.5,9.1-.3,1.6.2,2.8.2,3.7.1,1.3,0,3.8,0,5.3-.4.4,1.8,3.2,2.4,6,1.5,3.6,1.6,13.5,2,15.6-1.6,2.4-4.1-2.4-8.6-4.1-12.6-3.8-9.3-.8-14-1.6-16.8,0-.7-.2-1.8-.4-3.2.8-.4,1.5-.8,2.2-1.3,1-.7,1.7-1.4,2.3-2.1l.2-.2c0,0,.2-.3.3-.4l.6-.9.6-1.2.4-1.1.3-1.2v-.8c0-.3,0-.5,0-.7h0v-2.4h.2ZM52.6,131.9c-.3.4-.7.9-1.2,1.6-1-.6-2.7-2.2-3.3-4.3,0-.2,0-.3-.2-.5-1.1-6.9-2.6-9.7-3.2-10.6-1-3.7-1.7-7.4-1.3-9.6,0,0,3.6,8.2,6.4,10,0,0,3.7,8.5,4.5,9.9.6,1-.9,2.3-1.7,3.5ZM63.6,102.7h0v.2h0v.9c0,0-.3.4-.3.4,0,0,0,.2,0,.3v.2h0v.2h0l-.2.2c-.3.6-.8,1.1-1.3,1.5h0c-.3-2.4-.6-5.1-.8-8.2.2-.5.3-1.1.4-1.7l.2.2c.2.2.4.4.5.6.2.2.3.4.5.7,0,.2.3.4.4.7h0c0,.3.2.5.3.7,0,.2.2.5.2.7h0v.3c0,.2,0,.4,0,.6v.7h0v.7h0Z" }))));
|
|
59
|
+
}
|
|
60
|
+
//# sourceMappingURL=HA.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"HA.js","sourceRoot":"./src/","sources":["Components/Loaders/HA.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAY1B,MAAM,gBAAgB,GAAG,6BAA6B,CAAC;AACvD,MAAM,iBAAiB,GAAG;;;;;;;;;;EAUxB,CAAC;AAEH;;;;GAIG;AACH,MAAM,UAAU,QAAQ,CAAC,KAAgB;IACrC,MAAM,SAAS,GAAG,KAAK,CAAC,SAAS,IAAI,MAAM,CAAC;IAC5C,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,IAAI,GAAG,CAAC;IAE/B,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACjB,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,cAAc,CAAC,gBAAgB,CAAC,EAAE,CAAC;YACpD,MAAM,KAAK,GAAG,MAAM,CAAC,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;YACrD,KAAK,CAAC,YAAY,CAAC,IAAI,EAAE,gBAAgB,CAAC,CAAC;YAC3C,KAAK,CAAC,SAAS,GAAG,iBAAiB,CAAC;YACpC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;QAC5C,CAAC;IACL,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACH,6BACI,KAAK,EAAE;YACH,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,MAAM;YACd,QAAQ,EAAE,UAAU;YACpB,GAAG,EAAE,CAAC;YACN,IAAI,EAAE,CAAC;YACP,OAAO,EAAE,MAAM;YACf,UAAU,EAAE,QAAQ;YACpB,cAAc,EAAE,QAAQ;YACxB,eAAe,EACX,KAAK,CAAC,eAAe,IAAI,KAAK,CAAC,eAAe,KAAK,0BAA0B;gBACzE,CAAC,CAAC,KAAK,CAAC,eAAe;gBACvB,CAAC,CAAC,MAAM,CAAC,sBAAsB,IAAI,MAAM,CAAC,sBAAsB,KAAK,0BAA0B;oBAC7F,CAAC,CAAC,OAAO,MAAM,CAAC,sBAAsB,GAAG;oBACzC,CAAC,CAAC,SAAS;YACrB,eAAe,EACX,KAAK,CAAC,eAAe,IAAI,KAAK,CAAC,eAAe,KAAK,0BAA0B;gBACzE,CAAC,CAAC,KAAK,CAAC,eAAe;gBACvB,CAAC,CAAC,MAAM,CAAC,sBAAsB,IAAI,MAAM,CAAC,sBAAsB,KAAK,0BAA0B;oBAC7F,CAAC,CAAC,MAAM,CAAC,sBAAsB;oBAC/B,CAAC,CAAC,SAAS,KAAK,MAAM;wBACpB,CAAC,CAAC,MAAM;wBACR,CAAC,CAAC,MAAM;YACpB,cAAc,EAAE,OAAO;SAC1B;QAED,6BACI,KAAK,EAAE,IAAI,EACX,MAAM,EAAE,IAAI,EACZ,OAAO,EAAC,gBAAgB,EACxB,KAAK,EAAE;gBACH,IAAI,EAAE,SAAS;gBACf,SAAS,EAAE,0CAA0C;gBACrD,UAAU,EAAE,iBAAiB;aAChC;YAED,8BAAM,CAAC,EAAC,mjGAAmjG,GAAG,CAC5jG,CACJ,CACT,CAAC;AACN,CAAC","sourcesContent":["import React from 'react';\nimport type { ThemeType } from '../../types';\n\ninterface LogoProps {\n themeType?: ThemeType;\n size?: number;\n /** Background color */\n backgroundColor?: string;\n /** Background image URL */\n backgroundImage?: string;\n}\n\nconst FLICKER_STYLE_ID = 'loader-ha-flicker-keyframes';\nconst FLICKER_KEYFRAMES = `\n@keyframes loaderHA-flicker {\n 0% { filter: drop-shadow(0 0 4px #db0a33); opacity: 1; }\n 15% { filter: drop-shadow(0 0 10px #db0a33) hue-rotate(-2deg); opacity: 0.97; }\n 30% { filter: drop-shadow(0 0 6px #db0a33); opacity: 1; }\n 45% { filter: drop-shadow(0 0 14px #e61a38) hue-rotate(-3deg); opacity: 0.94; }\n 60% { filter: drop-shadow(0 0 7px #db0a33) hue-rotate(-1deg); opacity: 1; }\n 75% { filter: drop-shadow(0 0 11px #e61a38) hue-rotate(-2deg); opacity: 0.98; }\n 90% { filter: drop-shadow(0 0 5px #db0a33); opacity: 1; }\n 100% { filter: drop-shadow(0 0 4px #db0a33); opacity: 1; }\n}`;\n\n/**\n * Vendor specific loader\n *\n * @param props Properties\n */\nexport function LoaderHA(props: LogoProps): React.JSX.Element {\n const themeType = props.themeType || 'dark';\n const size = props.size || 300;\n\n React.useEffect(() => {\n if (!window.document.getElementById(FLICKER_STYLE_ID)) {\n const style = window.document.createElement('style');\n style.setAttribute('id', FLICKER_STYLE_ID);\n style.innerHTML = FLICKER_KEYFRAMES;\n window.document.head.appendChild(style);\n }\n }, []);\n\n return (\n <div\n style={{\n width: '100%',\n height: '100%',\n position: 'absolute',\n top: 0,\n left: 0,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n backgroundImage:\n props.backgroundImage && props.backgroundImage !== '@@loginBackgroundImage@@'\n ? props.backgroundImage\n : window.loadingBackgroundImage && window.loadingBackgroundImage !== '@@loginBackgroundImage@@'\n ? `url(${window.loadingBackgroundImage})`\n : undefined,\n backgroundColor:\n props.backgroundColor && props.backgroundColor !== '@@loginBackgroundColor@@'\n ? props.backgroundColor\n : window.loadingBackgroundColor && window.loadingBackgroundColor !== '@@loginBackgroundColor@@'\n ? window.loadingBackgroundColor\n : themeType === 'dark'\n ? '#000'\n : '#FFF',\n backgroundSize: 'cover',\n }}\n >\n <svg\n width={size}\n height={size}\n viewBox=\"0 0 69.6 148.1\"\n style={{\n fill: '#db0a33',\n animation: 'loaderHA-flicker 5s ease-in-out infinite',\n willChange: 'filter, opacity',\n }}\n >\n <path d=\"M69.5,100.6c0-.4,0-.8-.2-1.1v-.7c-.2-.4-.3-.8-.5-1.2,0-.2-.2-.5-.3-.7,0,0,0-.2,0-.2,0-.2,0-.3-.2-.5l-.4-.7-.4-.6c-1-1.6-2.4-3-4.2-4.3-.3-.2-.6-.4-.9-.6,0,0-.2,0-.3-.2-.3-.2-.6-.3-.9-.5-.2,0-.3-.2-.5-.3-.3-.2-.6-.3-.9-.5,0,0-.2,0-.3-.2-1-2.7-2.4-4.9-3.8-6.7h0c2.5,0,6.6-.3,7.5-3,3.5-3,2.5-9.7,2.5-10,0-.6-.2-1.1-.4-1.7h0v-.3c.5-3-.4-7.1-.5-7.7h0l-.3-1.1c0-.3-.2-.7-.4-1,0-.4-.3-.7-.4-1,0-.3-.3-.7-.5-1s-.4-.7-.6-1c-.2-.3-.4-.6-.6-.9l-.4-.4-.4-.4-.4-.4c0,0-.3-.3-.5-.4-.3-.2-.6-.4-1-.6-.2,0-.4-.2-.5-.2-.2,0-.4,0-.6-.2-.2,0-.4,0-.6,0h-1.8c-.4,0-.8,0-1.1.2-.4,0-.7.2-1.1.4h0c-1.6-.2-2.6-1-3.1-1.7h0c2-.9,3.5-1.9,4.6-3,2.6-2.2,4-5.1,4.7-7.2,3.4-1.1,5.4-4,5.4-4h0c4.6-5.3,1.2-15.1,1.2-15.1,0,0-.8,4.2-4,5.5,0-.3-.2-.6-.3-1.1s-.3-1.1-.6-1.7c-.2-.7-.5-1.4-.9-2.2-.4-.8-.8-1.6-1.4-2.4-.5-.8-1.2-1.7-1.9-2.5h0C59.2,6.6,49.2.3,49.2.3c0,0,3.3,5.8,1.3,9.9,0,0-3.5-.8-5.7-.8s-2.4.1-3.5.3c-.5.1-1.1.2-1.6.3-.3,0-.5.1-.8.2-.2,0-.5.1-.7.2-.5.1-.9.2-1.3.4-.4.1-.8.3-1.2.4-.4.1-.7.2-1,.3s-.6.2-.9.3h-.2c-2-2.8-3.7-7.5,1.8-11.9,0,0-13,5.3-8.2,17,0,0,0,.2-.1.4h0c-.3.3-.6.7-1,1.3-.3.6-.7,1.3-.9,2.1-.1.4-.2.8-.2,1.3v1.5c-.2-.1-.5-.2-.9-.4-1.7-.8-1.7-2.8-1.7-2.8-1.1,8.3,4.2,13.3,5.2,14.1,0,.4,0,.7-.2,1v.4c-.2,0-.3.3-.4.5-.1.4-.2.7-.3,1.1-.1.7-.1,1.5,0,2.2s.3,1.4.5,2c.3.6.6,1.2.9,1.7,0,0,0,0,.1.2.4.6,1,1.4,2,2h.1c.2,0,.8.5,1.7.7.2.2,1.5,1.7,3.1,2.1-.2,1.1-1,2.8-3.4,3.7,0,0-14.2-.4-13.2,13.5-6.6,8.7-3.8,13.4-3.8,13.4-.9.6-.9,1.9-.5,3,0,0,0,.3.2.5,0,0,0,0,.3.4.3.4.6.7,1,.8,1.1.7,3.1,1.5,6.4,1.1.2.3,1.3,1.8,1.3,2.2.5,2.3,1.2,4.5,1.3,6.8l.2,1.3c-2.2-.2-11-.2-16.6,9.1,0,0-.2.2-.2.4l-.5.9-.6,1.2h0c-.3.7-.7,1.7-1.1,2.8-.5.4-1.2,0-1.7-.3-.4-.4-.7-.7-.9-1.1,0,0,0-.2,0-.3v-.2s0-.2-.2-.2h0c0,0,0,0-.2-.2h-.4s-.2,0-.2,0c-.2,0-.2.2-.3.3,0,0-.1.2-.2.2,0,.2-.2.3-.2.5-.2.6-.4,1.2-.6,1.8-.6,2.4-.6,4.9-.1,7.3.2,1.2.6,2.4,1.1,3.5.5,1.1,1.2,2.1,2,3.1.8.9,1.7,1.8,2.7,2.5s2,1.3,3.1,1.8h0l.6.4-.3-.7c-.2-.4-.3-.9-.5-1.3-.1-.4-.2-.9-.3-1.3-.1-.9-.2-1.8,0-2.7,0-.4.2-.8.4-1.2.2-.4.4-.7.7-1.1.6-.8,1-1.6,1.5-2.5.4-.9.8-1.8,1.1-2.7.1-.5.3-1,.3-1.5v-.9h0c.1-2.3-1.9-3-3-2.9-.9,0-1.7.2-2,.2.7-1.3,1.3-2.4,2-3.4h0c.2-.4.4-.6.6-.9.4-.5.8-1,1.2-1.5.1,0,.2-.3.3-.4h0c.1,0,.2-.2.3-.4.1,0,.2-.3.4-.4,6.5-6.5,12.5-2.9,12.5-2.9,0,0,1.1,3.7,1.6,4.6h0c1,2.3,2.7,4.6,4.1,6.9h0c0,0,0,4.8,2.2,7.2.5.6,1.1,1.3,1.7,2.2.3.5.5,1,.7,1.4.2.3.3.6.4.9.3.4.5.8.8,1.3s.6,1,.8,1.6c.2.5.4,1,.6,1.5,0,0,1,5.1.7,7.4-3.3.9-5.5,2.4-7.4,3.2-1,.3-3.4,2-5.5,1.9h-.5c0,.1-3.6.3-2.7,3.1,0,0,.2,3.6,5.8,2.9,1.8-.1,7.5-.5,9.1-.3,1.6.2,2.8.2,3.7.1,1.3,0,3.8,0,5.3-.4.4,1.8,3.2,2.4,6,1.5,3.6,1.6,13.5,2,15.6-1.6,2.4-4.1-2.4-8.6-4.1-12.6-3.8-9.3-.8-14-1.6-16.8,0-.7-.2-1.8-.4-3.2.8-.4,1.5-.8,2.2-1.3,1-.7,1.7-1.4,2.3-2.1l.2-.2c0,0,.2-.3.3-.4l.6-.9.6-1.2.4-1.1.3-1.2v-.8c0-.3,0-.5,0-.7h0v-2.4h.2ZM52.6,131.9c-.3.4-.7.9-1.2,1.6-1-.6-2.7-2.2-3.3-4.3,0-.2,0-.3-.2-.5-1.1-6.9-2.6-9.7-3.2-10.6-1-3.7-1.7-7.4-1.3-9.6,0,0,3.6,8.2,6.4,10,0,0,3.7,8.5,4.5,9.9.6,1-.9,2.3-1.7,3.5ZM63.6,102.7h0v.2h0v.9c0,0-.3.4-.3.4,0,0,0,.2,0,.3v.2h0v.2h0l-.2.2c-.3.6-.8,1.1-1.3,1.5h0c-.3-2.4-.6-5.1-.8-8.2.2-.5.3-1.1.4-1.7l.2.2c.2.2.4.4.5.6.2.2.3.4.5.7,0,.2.3.4.4.7h0c0,.3.2.5.3.7,0,.2.2.5.2.7h0v.3c0,.2,0,.4,0,.6v.7h0v.7h0Z\" />\n </svg>\n </div>\n );\n}\n"]}
|
|
@@ -242,7 +242,7 @@ export declare class Utils {
|
|
|
242
242
|
/**
|
|
243
243
|
* Get the current theme name (either from local storage or the browser settings).
|
|
244
244
|
*/
|
|
245
|
-
static getThemeName(themeName?: ThemeName | null): ThemeName;
|
|
245
|
+
static getThemeName(themeName?: ThemeName | 'auto' | null): ThemeName;
|
|
246
246
|
/**
|
|
247
247
|
* Get the type of theme.
|
|
248
248
|
*/
|
|
@@ -1341,8 +1341,11 @@ export class Utils {
|
|
|
1341
1341
|
window.vendorPrefix !== 'MV') {
|
|
1342
1342
|
return window.vendorPrefix;
|
|
1343
1343
|
}
|
|
1344
|
-
|
|
1345
|
-
|
|
1344
|
+
if (themeName === 'auto') {
|
|
1345
|
+
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
|
1346
|
+
}
|
|
1347
|
+
themeName ||= (window._localStorage || window.localStorage).getItem('App.themeName');
|
|
1348
|
+
if (themeName && themeName !== 'auto') {
|
|
1346
1349
|
return themeName;
|
|
1347
1350
|
}
|
|
1348
1351
|
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|