From 71e77fe155ba5b3dea4ecaabdd0912ceb8a82aba Mon Sep 17 00:00:00 2001 From: Aidan Timson Date: Wed, 25 Feb 2026 12:26:32 +0000 Subject: [PATCH] Remove JS tick for analog clock --- .../cards/clock/hui-clock-card-analog.ts | 59 +++++++++++-------- .../cards/clock/hui-clock-card-digital.ts | 1 + 2 files changed, 36 insertions(+), 24 deletions(-) diff --git a/src/panels/lovelace/cards/clock/hui-clock-card-analog.ts b/src/panels/lovelace/cards/clock/hui-clock-card-analog.ts index e386cc1ddb..f29bbaff69 100644 --- a/src/panels/lovelace/cards/clock/hui-clock-card-analog.ts +++ b/src/panels/lovelace/cards/clock/hui-clock-card-analog.ts @@ -33,7 +33,7 @@ function romanize12HourClock(num: number) { return numerals[num]; } -const INTERVAL = 1000; +const DATE_UPDATE_INTERVAL = 60_000; const QUARTER_TICKS = Array.from({ length: 4 }, (_, i) => i); const HOUR_TICKS = Array.from({ length: 12 }, (_, i) => i); const MINUTE_TICKS = Array.from({ length: 60 }, (_, i) => i); @@ -54,7 +54,7 @@ export class HuiClockCardAnalog extends LitElement { @state() private _date?: string; - private _tickInterval?: undefined | number; + private _dateInterval?: number; private _timeZone?: string; @@ -72,7 +72,7 @@ export class HuiClockCardAnalog extends LitElement { "visibilitychange", this._handleVisibilityChange ); - this._stopTick(); + this._stopDateTick(); } protected updated(changedProps: PropertyValues) { @@ -90,12 +90,15 @@ export class HuiClockCardAnalog extends LitElement { private _handleVisibilityChange = () => { if (!document.hidden) { - this._computeDateTime(); + this._computeOffsets(); + this._updateDate(); } }; private _initDate() { if (!this.config || !this.hass) { + this._stopDateTick(); + this._date = undefined; return; } @@ -119,29 +122,32 @@ export class HuiClockCardAnalog extends LitElement { timeZone, }); - this._computeDateTime(); + this._computeOffsets(); + this._updateDate(); if (this.isConnected && hasClockCardDate(this.config)) { - this._startTick(); + this._startDateTick(); } else { - this._stopTick(); + this._stopDateTick(); } } - private _startTick() { - this._stopTick(); - this._tick(); - this._tickInterval = window.setInterval(() => this._tick(), INTERVAL); + private _startDateTick() { + this._stopDateTick(); + this._dateInterval = window.setInterval( + () => this._updateDate(), + DATE_UPDATE_INTERVAL + ); } - private _stopTick() { - if (this._tickInterval) { - clearInterval(this._tickInterval); - this._tickInterval = undefined; + private _stopDateTick() { + if (this._dateInterval) { + clearInterval(this._dateInterval); + this._dateInterval = undefined; } } - private _computeDateTime() { + private _computeOffsets() { if (!this._dateTimeFormat) return; const date = new Date(); @@ -162,16 +168,21 @@ export class HuiClockCardAnalog extends LitElement { this._secondOffsetSec = secondsWithMs; this._minuteOffsetSec = minute * 60 + secondsWithMs; this._hourOffsetSec = hour12 * 3600 + minute * 60 + secondsWithMs; - - const dateConfig = getClockCardDateConfig(this.config); - this._date = - hasClockCardDate(this.config) && this._language - ? formatClockCardDate(date, dateConfig, this._language, this._timeZone) - : undefined; } - private _tick() { - this._computeDateTime(); + private _updateDate() { + if (!this.config || !hasClockCardDate(this.config) || !this._language) { + this._date = undefined; + return; + } + + const dateConfig = getClockCardDateConfig(this.config); + this._date = formatClockCardDate( + new Date(), + dateConfig, + this._language, + this._timeZone + ); } private _computeClock = memoizeOne((config: ClockCardConfig) => { diff --git a/src/panels/lovelace/cards/clock/hui-clock-card-digital.ts b/src/panels/lovelace/cards/clock/hui-clock-card-digital.ts index 724d89e773..f33d9e9a56 100644 --- a/src/panels/lovelace/cards/clock/hui-clock-card-digital.ts +++ b/src/panels/lovelace/cards/clock/hui-clock-card-digital.ts @@ -39,6 +39,7 @@ export class HuiClockCardDigital extends LitElement { private _initDate() { if (!this.config || !this.hass) { + this._date = undefined; return; }