import { html, LitElement } from "lit";
import { resolveMarkdown } from "lit-markdown";
import { customElement, property, query } from "lit/decorators.js";
import version from "resources/version.txt?raw";
import { translateText } from "../client/Utils";
import { assetUrl } from "../core/AssetUrls";
import { BaseModal } from "./components/BaseModal";
import { modalHeader } from "./components/ui/ModalHeader";
import { normalizeNewsMarkdown } from "./NewsMarkdown";
@customElement("news-modal")
export class NewsModal extends BaseModal {
protected routerName = "news";
@property({ type: String }) markdown = "Loading...";
private initialized: boolean = false;
protected renderHeaderSlot() {
return modalHeader({
title: translateText("news.title"),
onBack: () => this.close(),
ariaLabel: translateText("common.back"),
});
}
protected renderBody() {
return html`
${resolveMarkdown(this.markdown, {
includeImages: true,
includeCodeBlockClassNames: true,
})}
`;
}
protected onOpen(): void {
if (!this.initialized) {
this.initialized = true;
fetch(assetUrl("changelog.md"))
.then((response) => (response.ok ? response.text() : "Failed to load"))
.then((markdown) => normalizeNewsMarkdown(markdown))
.then((markdown) => (this.markdown = markdown))
.catch(() => (this.markdown = "Failed to load"));
}
}
}
@customElement("news-button")
export class NewsButton extends LitElement {
@query("news-modal") private newsModal!: NewsModal;
connectedCallback() {
super.connectedCallback();
this.checkForNewVersion();
}
private checkForNewVersion() {
const lastSeenVersion = localStorage.getItem("last-seen-version");
if (lastSeenVersion !== null && lastSeenVersion !== version) {
setTimeout(() => {
this.open();
}, 500);
}
}
public open() {
localStorage.setItem("last-seen-version", version);
this.newsModal.open();
}
render() {
return html`
`;
}
}