flan/advanced-camera-card
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Show version number with card loading spinner (#1825)

Browse Source 
- Closes #1818

**Why add this?**: A repeated pattern is that an issue is fixed in the
card, a new build is released and users will incorrectly believe it's
not yet fixed due to their browser caching the old code. This results in
wasting their time, and my time.

**But it's obnoxious!**: I'm pretty sensitive to this (hence adding
these messages!), so let me know how terrible you find it. You can
disable it with:

```yaml
performance:
  features:
    card_loading_indicator: false
```
This commit is contained in:
Dermot Duffy
2025-01-12 16:26:30 -08:00
committed by GitHub
parent 1f37895793
commit 6b3736bdaf
19 changed files with 67 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/card.ts
+8 -4
View File
@@ -348,9 +348,9 @@ class FrigateCard extends LitElement {
const actions = this._controller.getActionsManager().getMergedActions();
const cameraManager = this._controller.getCameraManager();
const showLoadingSpinner =
this._config?.performance?.features.animated_progress_indicator !== false &&
!this._controller.getInitializationManager().wasEverInitialized() &&
const showLoading =
this._config?.performance?.features.card_loading_indicator !== false &&
!this._controller.getMessageManager().hasMessage();
// Caution: Keep the main div and the menu next to one another in order to
@@ -380,7 +380,11 @@ class FrigateCard extends LitElement {
}
@frigate-card:focus=${() => this.focus()}
>
${showLoadingSpinner ? html`<frigate-card-loading></frigate-card-loading>` : ''}
${showLoading
? html`<frigate-card-loading
?loaded=${this._controller.getInitializationManager().wasEverInitialized()}
></frigate-card-loading>`
: ''}
${this._renderMenuStatusContainer('top')}
${this._renderMenuStatusContainer('overlay')}
<div ${ref(this._refMain)} class="${classMap(mainClasses)}">
src/components/loading.ts
+3 -1
View File
@@ -1,12 +1,14 @@
import { CSSResultGroup, LitElement, TemplateResult, html, unsafeCSS } from 'lit';
import { customElement } from 'lit/decorators.js';
import loadingStyle from '../scss/loading.scss';
import { getReleaseVersion } from '../utils/diagnostics';
import './icon';
@customElement('frigate-card-loading')
export class FrigateCardLoading extends LitElement {
protected render(): TemplateResult {
return html`<frigate-card-icon .icon=${{ icon: 'iris' }}></frigate-card-icon>`;
return html`<frigate-card-icon .icon=${{ icon: 'iris' }}></frigate-card-icon
><span>${getReleaseVersion(true)}</span>`;
}
static get styles(): CSSResultGroup {
src/config/profiles/low-performance.ts
+2
View File
@@ -34,6 +34,7 @@ import {
CONF_MENU_BUTTONS_MEDIA_PLAYER,
CONF_MENU_BUTTONS_TIMELINE,
CONF_MENU_STYLE,
CONF_PERFORMANCE_FEATURES_CARD_LOADING_INDICATOR,
CONF_PERFORMANCE_FEATURES_ANIMATED_PROGRESS_INDICATOR,
CONF_PERFORMANCE_FEATURES_MAX_SIMULTANEOUS_ENGINE_REQUESTS,
CONF_PERFORMANCE_FEATURES_MEDIA_CHUNK_SIZE,
@@ -118,6 +119,7 @@ export const LOW_PERFORMANCE_PROFILE = {
// Disable all optional performance related features.
[CONF_PERFORMANCE_FEATURES_ANIMATED_PROGRESS_INDICATOR]: false,
[CONF_PERFORMANCE_FEATURES_CARD_LOADING_INDICATOR]: false,
// Load fewer media items by default.
[CONF_PERFORMANCE_FEATURES_MEDIA_CHUNK_SIZE]: 10,
src/config/types.ts
+4
View File
@@ -1995,6 +1995,7 @@ const automationsSchema = automationSchema.array();
const performanceConfigDefault = {
features: {
animated_progress_indicator: true,
card_loading_indicator: true,
media_chunk_size: MEDIA_CHUNK_SIZE_DEFAULT,
},
style: {
@@ -2010,6 +2011,9 @@ export const performanceConfigSchema = z
animated_progress_indicator: z
.boolean()
.default(performanceConfigDefault.features.animated_progress_indicator),
card_loading_indicator: z
.boolean()
.default(performanceConfigDefault.features.card_loading_indicator),
media_chunk_size: z
.number()
.min(0)
src/const.ts
+1
View File
@@ -366,6 +366,7 @@ export const CONF_OVERRIDES = 'overrides' as const;
const CONF_PERFORMANCE = 'performance' as const;
export const CONF_PERFORMANCE_FEATURES_ANIMATED_PROGRESS_INDICATOR = `${CONF_PERFORMANCE}.features.animated_progress_indicator`;
export const CONF_PERFORMANCE_FEATURES_CARD_LOADING_INDICATOR = `${CONF_PERFORMANCE}.features.card_loading_indicator`;
export const CONF_PERFORMANCE_FEATURES_MEDIA_CHUNK_SIZE = `${CONF_PERFORMANCE}.features.media_chunk_size`;
export const CONF_PERFORMANCE_FEATURES_MAX_SIMULTANEOUS_ENGINE_REQUESTS = `${CONF_PERFORMANCE}.features.max_simultaneous_engine_requests`;
export const CONF_PERFORMANCE_PROFILE = `${CONF_PERFORMANCE}.profile`;
src/editor.ts
+5
View File
@@ -177,6 +177,7 @@ import {
CONF_MENU_POSITION,
CONF_MENU_STYLE,
CONF_PERFORMANCE_FEATURES_ANIMATED_PROGRESS_INDICATOR,
CONF_PERFORMANCE_FEATURES_CARD_LOADING_INDICATOR,
CONF_PERFORMANCE_FEATURES_MAX_SIMULTANEOUS_ENGINE_REQUESTS,
CONF_PERFORMANCE_FEATURES_MEDIA_CHUNK_SIZE,
CONF_PERFORMANCE_PROFILE,
@@ -2965,6 +2966,10 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
'config.performance.features.editor_label',
'mdi:feature-search',
html`
${this._renderSwitch(
CONF_PERFORMANCE_FEATURES_CARD_LOADING_INDICATOR,
this._defaults.performance.features.card_loading_indicator,
)}
${this._renderSwitch(
CONF_PERFORMANCE_FEATURES_ANIMATED_PROGRESS_INDICATOR,
this._defaults.performance.features.animated_progress_indicator,
src/localize/languages/ca.json
+2 -1
View File
@@ -435,6 +435,7 @@
"performance": {
"features": {
"animated_progress_indicator": "Indicador animat del progrés",
"card_loading_indicator": "",
"editor_label": "Opcions de característiques",
"max_simultaneous_engine_requests": "",
"media_chunk_size": "Mida del fragment multimèdia"
@@ -511,8 +512,8 @@
"theme": {
"themes": {
"dark": "",
"ha": "",
"editor_label": "",
"ha": "",
"light": "",
"traditional": ""
}
src/localize/languages/en.json
+1
View File
@@ -435,6 +435,7 @@
"performance": {
"features": {
"animated_progress_indicator": "Animated Progress Indicator",
"card_loading_indicator": "Card Loading Indicator",
"editor_label": "Feature Options",
"max_simultaneous_engine_requests": "Max simultaneous camera engine requests",
"media_chunk_size": "Media chunk size"
src/localize/languages/fr.json
+2 -1
View File
@@ -435,6 +435,7 @@
"performance": {
"features": {
"animated_progress_indicator": "Indicateur de progression animé",
"card_loading_indicator": "",
"editor_label": "Options de fonctionnalités",
"max_simultaneous_engine_requests": "Nombre maximal de requêtes simultanées au moteur de caméra",
"media_chunk_size": "Taille du morceau de média"
@@ -511,8 +512,8 @@
"theme": {
"themes": {
"dark": "",
"ha": "",
"editor_label": "",
"ha": "",
"light": "",
"traditional": ""
}
src/localize/languages/it.json
+2 -1
View File
@@ -435,6 +435,7 @@
"performance": {
"features": {
"animated_progress_indicator": "Indicatore di avanzamento animato",
"card_loading_indicator": "",
"editor_label": "Opzioni funzionalità",
"max_simultaneous_engine_requests": "",
"media_chunk_size": "Dimensione del blocco multimediale"
@@ -511,8 +512,8 @@
"theme": {
"themes": {
"dark": "",
"ha": "",
"editor_label": "",
"ha": "",
"light": "",
"traditional": ""
}
src/localize/languages/pt-BR.json
+2 -1
View File
@@ -435,6 +435,7 @@
"performance": {
"features": {
"animated_progress_indicator": "Indicador de Carregamento Animado",
"card_loading_indicator": "",
"editor_label": "Opções de recursos",
"max_simultaneous_engine_requests": "",
"media_chunk_size": "Tamanho do bloco de mídia"
@@ -511,8 +512,8 @@
"theme": {
"themes": {
"dark": "",
"ha": "",
"editor_label": "",
"ha": "",
"light": "",
"traditional": ""
}
src/localize/languages/pt-PT.json
+2 -1
View File
@@ -435,6 +435,7 @@
"performance": {
"features": {
"animated_progress_indicator": "Animação na barra de progresso",
"card_loading_indicator": "",
"editor_label": "Editor de etiquetas",
"max_simultaneous_engine_requests": "",
"media_chunk_size": "Tamanho do ficheiro"
@@ -511,8 +512,8 @@
"theme": {
"themes": {
"dark": "",
"ha": "",
"editor_label": "",
"ha": "",
"light": "",
"traditional": ""
}
src/scss/loading.scss
+17 -1
View File
@@ -3,14 +3,26 @@
height: intrinsic;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
pointer-events: none;
background-color: var(--frigate-card-loading-background-color);
color: var(--frigate-card-loading-foreground-color);
transition: opacity 1.5s ease-in;
opacity: 1;
}
:host([loaded]) {
opacity: 0;
}
frigate-card-icon {
height: 50%;
margin-bottom: 20px;
height: 25%;
width: auto;
animation: rotate 8s linear infinite;
}
@@ -23,3 +35,7 @@ frigate-card-icon {
transform: rotate(360deg);
}
}
span {
font-size: x-large;
}
src/scss/themes/base.scss
+9
View File
@@ -124,4 +124,13 @@
--frigate-card-timeline-divider-color: var(--frigate-card-divider-color);
--frigate-card-timeline-target-bar-color: var(--frigate-card-active-color);
/*******************
* Loading Indicator
*******************/
--frigate-card-loading-background-color: var(
--frigate-card-control-background-transparent
);
--frigate-card-loading-foreground-color: var(--frigate-card-control-foreground);
}
src/utils/diagnostics.ts
+2 -2
View File
@@ -20,7 +20,7 @@ interface IntegrationDiagnostics {
version?: string;
}
export const getReleaseVersion = (): string => {
export const getReleaseVersion = (short?: boolean): string => {
const releaseVersion = '__FRIGATE_CARD_RELEASE_VERSION__';
/* istanbul ignore if: depends on rollup substitution -- @preserve */
@@ -30,7 +30,7 @@ export const getReleaseVersion = (): string => {
/* istanbul ignore if: depends on rollup substitution -- @preserve */
if ((releaseVersion as unknown) === 'dev') {
return `${releaseVersion}+${pkg['gitAbbrevHash']} (${pkg['buildDate']})`;
return `${releaseVersion}+${pkg['gitAbbrevHash']}${short ? '' : ` (${pkg['buildDate']})`}`;
}
return releaseVersion;