diff --git a/src/card-controller/card-element-manager.ts b/src/card-controller/card-element-manager.ts index 39cbad42..bea978c3 100644 --- a/src/card-controller/card-element-manager.ts +++ b/src/card-controller/card-element-manager.ts @@ -63,7 +63,6 @@ export class CardElementManager { this._api.getMediaLoadedInfoManager().initialize(); this._api.getMicrophoneManager().initialize(); this._api.getKeyboardStateManager().initialize(); - this._api.getStyleManager().initialize(); // These initializers are called when the config is updated, but on initial // creation of the card hass is not yet available when the config is first diff --git a/src/card-controller/style-manager.ts b/src/card-controller/style-manager.ts index 38507879..e959e0f3 100644 --- a/src/card-controller/style-manager.ts +++ b/src/card-controller/style-manager.ts @@ -1,6 +1,5 @@ import { StyleInfo } from 'lit/directives/style-map'; import { FrigateCardConfig } from '../config/types'; -import irisLogo from '../images/camera-iris.svg'; import { aspectRatioToStyle, setOrRemoveAttribute } from '../utils/basic'; import { View } from '../view/view'; import { CardStyleAPI } from './types'; @@ -12,10 +11,6 @@ export class StyleManager { this._api = api; } - public initialize(): void { - this._setCommonStyleProperties(); - } - public setLightOrDarkMode = (): void => { const config = this._api.getConfigManager().getConfig(); const isDarkMode = @@ -138,11 +133,4 @@ export class StyleManager { } return aspectRatioToStyle({ defaultStatic: true }); } - - protected _setCommonStyleProperties(): void { - this._api - .getCardElementManager() - .getElement() - .style.setProperty('--frigate-card-media-background-image', `url("${irisLogo}")`); - } } diff --git a/src/card-controller/types.ts b/src/card-controller/types.ts index 7ffd9711..f55dae66 100644 --- a/src/card-controller/types.ts +++ b/src/card-controller/types.ts @@ -134,7 +134,6 @@ export interface CardElementAPI { getMediaLoadedInfoManager(): MediaLoadedInfoManager; getMediaPlayerManager(): MediaPlayerManager; getMicrophoneManager(): MicrophoneManager; - getStyleManager(): StyleManager; getQueryStringManager(): QueryStringManager; } diff --git a/src/card.ts b/src/card.ts index b17461a8..452d9cc1 100644 --- a/src/card.ts +++ b/src/card.ts @@ -339,9 +339,8 @@ class FrigateCard extends LitElement { const actions = this._controller.getActionsManager().getMergedActions(); const cameraManager = this._controller.getCameraManager(); - const renderLoadingSpinner = - this._config?.performance?.features.animated_progress_indicator !== false; const showLoadingSpinner = + this._config?.performance?.features.animated_progress_indicator !== false && !this._controller.getInitializationManager().wasEverInitialized() && !this._controller.getMessageManager().hasMessage(); @@ -372,10 +371,7 @@ class FrigateCard extends LitElement { } @frigate-card:focus=${() => this.focus()} > - ${renderLoadingSpinner - ? html` - ` - : ''} + ${showLoadingSpinner ? html`` : ''} ${this._renderMenuStatusContainer('top')} ${this._renderMenuStatusContainer('overlay')}
diff --git a/src/components/loading.ts b/src/components/loading.ts index 03e5bf6a..af196827 100644 --- a/src/components/loading.ts +++ b/src/components/loading.ts @@ -1,44 +1,16 @@ -import { - CSSResultGroup, - LitElement, - PropertyValues, - TemplateResult, - html, - unsafeCSS, -} from 'lit'; -import { customElement, property, state } from 'lit/decorators.js'; -import irisLogo from '../images/camera-iris.svg'; -import controlStyle from '../scss/loading.scss'; -import { Timer } from '../utils/timer'; - -// Number of seconds after the loading spinner is hidden before rendering this -// component as empty. Should be longer than the opacity css transition time. -const LOADING_EMPTY_SECONDS = 2; +import { CSSResultGroup, LitElement, TemplateResult, html, unsafeCSS } from 'lit'; +import { customElement } from 'lit/decorators.js'; +import irisLogo from '../images/camera-iris-transparent.svg'; +import loadingStyle from '../scss/loading.scss'; @customElement('frigate-card-loading') export class FrigateCardLoading extends LitElement { - @property({ attribute: true, reflect: true, type: Boolean }) - public show = false; - - @state() - protected _empty = false; - - protected _timer = new Timer(); - protected render(): TemplateResult { - return this._empty ? html`` : html` `; - } - - protected willUpdate(changedProps: PropertyValues): void { - if (changedProps.has('show') && !this.show) { - this._timer.start(LOADING_EMPTY_SECONDS, () => { - this._empty = true; - }); - } + return html` `; } static get styles(): CSSResultGroup { - return unsafeCSS(controlStyle); + return unsafeCSS(loadingStyle); } } diff --git a/src/images/camera-iris-transparent.svg b/src/images/camera-iris-transparent.svg new file mode 100644 index 00000000..52ffd1e8 --- /dev/null +++ b/src/images/camera-iris-transparent.svg @@ -0,0 +1,49 @@ + + + + + + + + + diff --git a/src/scss/loading.scss b/src/scss/loading.scss index 7a21999b..ba21e506 100644 --- a/src/scss/loading.scss +++ b/src/scss/loading.scss @@ -1,32 +1,16 @@ :host { - height: 100%; - width: 100%; + width: intrinsic; + height: intrinsic; display: flex; justify-content: center; align-items: center; pointer-events: none; - - transition: opacity 1s; -} - -:host([show]) { - opacity: 1; -} - -:host(:not([show])) { - opacity: 0; } img { - width: 40%; - height: 40%; - - opacity: 0.2; - - filter: invert(100%); - + width: 10%; animation: rotate 8s linear infinite; } diff --git a/src/scss/media-background.scss b/src/scss/media-background.scss index 29cc40d0..879a3e6c 100644 --- a/src/scss/media-background.scss +++ b/src/scss/media-background.scss @@ -1,6 +1,10 @@ +$bg-img: url('../images/camera-iris-transparent.svg'); + :host { + background-color: var(--primary-background-color); background-position: center; background-repeat: no-repeat; - background-image: var(--frigate-card-media-background-image); - background-size: 25%; + background-image: $bg-img; + background-size: 10%; + background-position: center; } diff --git a/tests/card-controller/card-element-manager.test.ts b/tests/card-controller/card-element-manager.test.ts index 66024e78..ee3b19c6 100644 --- a/tests/card-controller/card-element-manager.test.ts +++ b/tests/card-controller/card-element-manager.test.ts @@ -127,7 +127,6 @@ describe('CardElementManager', () => { expect(api.getExpandManager().initialize).toBeCalled(); expect(api.getMediaLoadedInfoManager().initialize).toBeCalled(); expect(api.getMicrophoneManager().initialize).toBeCalled(); - expect(api.getStyleManager().initialize).toBeCalled(); }); it('should disconnect', () => { diff --git a/tests/card-controller/style-manager.test.ts b/tests/card-controller/style-manager.test.ts index 1e4d6dda..bcbfbcb7 100644 --- a/tests/card-controller/style-manager.test.ts +++ b/tests/card-controller/style-manager.test.ts @@ -1,7 +1,6 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'; import { StyleManager } from '../../src/card-controller/style-manager'; import { FrigateCardView } from '../../src/config/types'; -import irisLogo from '../../src/images/camera-iris.svg'; import { createCardAPI, createConfig, createHASS, createView } from '../test-utils'; // @vitest-environment jsdom @@ -10,21 +9,6 @@ describe('StyleManager', () => { vi.resetAllMocks(); }); - describe('initialize should set common properties', () => { - it('should set media background', () => { - const api = createCardAPI(); - const element = document.createElement('div'); - vi.mocked(api.getCardElementManager().getElement).mockReturnValue(element); - const manager = new StyleManager(api); - - manager.initialize(); - - expect( - element.style.getPropertyValue('--frigate-card-media-background-image'), - ).toEqual(`url("${irisLogo}")`); - }); - }); - describe('setLightOrDarkMode', () => { it('dark mode unspecified', () => { const api = createCardAPI();