Home Assistant Lovelace Countdown for Alexa Timer

countdown-card.js

class CountdownCard extends HTMLElement {
    set hass(hass) {
        if (!this.content) {
            const card = document.createElement('ha-card');
            card.header = 'Timer';
            this.content = document.createElement('div');
            this.content.style.padding = '0 16px 16px';
            card.appendChild(this.content);
            this.appendChild(card);
        }

        const entityId = this.config.entity;
        const state = hass.states[entityId];
        this.stateStr = state ? state.state : 'unavailable';

        if (state) {
            this.rAF_ID = requestAnimationFrame(this.render.bind(this));
        }
    }

    render(callback) {
        if (this.stateStr === 'unavailable') {
            this.content.innerHTML = 'no timer';
            return;
        }

        const totalSeconds = (new Date(this.stateStr) - new Date()) / 1000;
        const hours = Math.floor(totalSeconds / 3600) + "";
        const minutes = Math.floor(totalSeconds / 60) % 60 + "";
        const seconds = Math.floor(totalSeconds % 60) + "";
        const relative = hours.padStart(2, '0') + ':' + minutes.padStart(2, '0') + ':' + seconds.padStart(2, '0');

        this.content.innerHTML = `<h2>${relative}</h2>`;
        this.rAF_ID = requestAnimationFrame(this.render.bind(this));
    }

    setConfig(config) {
        if (!config.entity) {
            throw new Error('You need to define an entity');
        }
        this.config = config;
    }

    // The height of your card. Home Assistant uses this to automatically
    // distribute all cards over the available columns.
    getCardSize() {
        return 2;
    }
}

customElements.define('countdown-card', CountdownCard);

Home Assistant Lovelace Countdown for Alexa Timer

Live frontend countdown

https://developers.home-assistant.io/docs/lovelace_custom_card/#graphical-card-configuration
https://developers.home-assistant.io/docs/lovelace_custom_card/#referencing-your-new-card

Brilliant, thanks for sharing this - works a charm!

Hi Mikulas, wondering if something has changed on Alexa side? My timer countdown's are as follows:

Looks v3.10.6 of Alexa Media Player has fixed the issue, there was a problem with Timezone's I believe. (Use timezone aware datetime for timers (alandtse/alexa_media_player@de4a962)

Any chance this could be adapted to multiple timers? We have up to 3 going at any one time.