99 lines
2.2 KiB
TypeScript
99 lines
2.2 KiB
TypeScript
import {
|
|
html,
|
|
LitElement,
|
|
unsafeCSS,
|
|
type CSSResultGroup,
|
|
type TemplateResult,
|
|
} from 'lit';
|
|
import { customElement, property } from 'lit/decorators.js';
|
|
|
|
import loadingStyle from '../scss/loading.scss';
|
|
import type { EffectName, EffectsManagerInterface } from '../types';
|
|
import { getReleaseVersion } from '../utils/diagnostics';
|
|
|
|
import './icon';
|
|
|
|
// Map of "MM-DD" to effect name for special dates.
|
|
const DATE_EFFECTS: Record<string, EffectName> = {
|
|
// New Year's Day
|
|
'01-01': 'fireworks',
|
|
|
|
// Valentine's Day
|
|
'02-14': 'hearts',
|
|
|
|
// St. Patrick's Day
|
|
'03-17': 'shamrocks',
|
|
|
|
// Halloween
|
|
'10-31': 'ghost',
|
|
|
|
// Christmas
|
|
'12-25': 'snow',
|
|
};
|
|
|
|
const getDateEffect = (): EffectName | null => {
|
|
const now = new Date();
|
|
const month = String(now.getMonth() + 1).padStart(2, '0');
|
|
const day = String(now.getDate()).padStart(2, '0');
|
|
return DATE_EFFECTS[`${month}-${day}`] ?? null;
|
|
};
|
|
|
|
@customElement('advanced-camera-card-loading')
|
|
export class AdvancedCameraCardLoading extends LitElement {
|
|
@property({ attribute: false })
|
|
public effectsManager?: EffectsManagerInterface;
|
|
|
|
@property({ type: Boolean, reflect: true })
|
|
public loaded = false;
|
|
|
|
private _effectName: EffectName | null = null;
|
|
|
|
public disconnectedCallback(): void {
|
|
super.disconnectedCallback();
|
|
this._stopEffect();
|
|
}
|
|
|
|
protected updated(): void {
|
|
const effect = getDateEffect();
|
|
if (!effect) {
|
|
this._stopEffect();
|
|
return;
|
|
}
|
|
|
|
if (!this.loaded) {
|
|
this._startEffect(effect);
|
|
} else {
|
|
this._stopEffect();
|
|
}
|
|
}
|
|
|
|
private _startEffect(effect: EffectName): void {
|
|
void this.effectsManager?.startEffect(effect, { fadeIn: false });
|
|
this._effectName = effect;
|
|
}
|
|
|
|
private _stopEffect(): void {
|
|
if (this._effectName) {
|
|
this.effectsManager?.stopEffect(this._effectName);
|
|
}
|
|
this._effectName = null;
|
|
}
|
|
|
|
protected render(): TemplateResult {
|
|
return html`<advanced-camera-card-icon
|
|
.icon=${{ icon: 'iris' }}
|
|
></advanced-camera-card-icon
|
|
><span>${getReleaseVersion()}</span>`;
|
|
}
|
|
|
|
static get styles(): CSSResultGroup {
|
|
return unsafeCSS(loadingStyle);
|
|
}
|
|
}
|
|
|
|
declare global {
|
|
interface HTMLElementTagNameMap {
|
|
'advanced-camera-card-loading': AdvancedCameraCardLoading;
|
|
}
|
|
}
|