diff --git a/src/editor.ts b/src/editor.ts index b7e41e6f..51418571 100644 --- a/src/editor.ts +++ b/src/editor.ts @@ -10,34 +10,40 @@ import { unsafeCSS, } from 'lit-element'; import { HomeAssistant, fireEvent, LovelaceCardEditor } from 'custom-card-helpers'; - -import { FrigateCardConfig } from './types'; +import { localize } from './localize/localize'; +import type { FrigateCardConfig } from './types'; import frigate_card_editor_style from './frigate-hass-card-editor.scss'; const options = { required: { icon: 'cog', - name: 'Required', - secondary: 'Required options for this card to function', + name: localize('editor.required'), + secondary: localize('editor.required_secondary'), show: true, }, optional: { icon: 'tune', - name: 'Optional', - secondary: 'Optional configuration to tweak card behavior', + name: localize('editor.optional'), + secondary: localize('editor.optional_secondary'), + show: false, + }, + appearance: { + icon: 'palette', + name: localize('editor.appearance'), + secondary: localize('editor.appearance_secondary'), show: false, }, webrtc: { icon: 'webrtc', - name: 'WebRTC', - secondary: 'Optional WebRTC parameters', + name: localize('editor.webrtc'), + secondary: localize('editor.webrtc_secondary'), show: false, }, advanced: { icon: 'cogs', - name: 'Advanced', - secondary: 'Advanced options', + name: localize('editor.advanced'), + secondary: localize('editor.advanced_secondary'), show: false, }, }; @@ -51,6 +57,9 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor private _initialized = false; public setConfig(config: FrigateCardConfig): void { + // Note: This does not use Zod to parse the configuration, so it may be + // partially or completely invalid. It's more useful to have a partially + // valid configuration here, to allow the user to fix the broken parts. this._config = config; this.loadCardHelpers(); } @@ -96,33 +105,32 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor const viewModes = { '': '', - live: 'Live view', - clips: 'Clip gallery', - snapshots: 'Snapshot gallery', - clip: 'Latest clip', - snapshot: 'Latest snapshot', + live: localize('menu.live'), + clips: localize('menu.clips'), + snapshots: localize('menu.snapshots'), + clip: localize('menu.clip'), + snapshot: localize('menu.snapshot'), }; const menuModes = { '': '', - 'hidden-top': 'Hidden Top', - 'hidden-left': 'Hidden Left', - 'hidden-bottom': 'Hidden Bottom', - 'hidden-right': 'Hidden Right', - 'overlay-top': 'Overlay Top', - 'overlay-left': 'Overlay Left', - 'overlay-bottom': 'Overlay Bottom', - 'overlay-right': 'Overlay Right', - above: 'Above', - below: 'Below', + 'hidden-top': localize('menu_mode.hidden-top'), + 'hidden-left': localize('menu_mode.hidden-left'), + 'hidden-bottom': localize('menu_mode.hidden-bottom'), + 'hidden-right': localize('menu_mode.hidden-right'), + 'overlay-top': localize('menu_mode.overlay-top'), + 'overlay-left': localize('menu_mode.overlay-left'), + 'overlay-bottom': localize('menu_mode.overlay-bottom'), + 'overlay-right': localize('menu_mode.overlay-right'), + above: localize('menu_mode.above'), + below: localize('menu_mode.below'), }; const liveProvider = { '': '', - frigate: 'Frigate', - webrtc: 'WebRTC', + frigate: localize('live_provider.frigate'), + webrtc: localize('live_provider.webrtc'), }; - return html`