Add: Basics for graphical UI configuration

dist/plex-meets-homeassistant.js

@@ -19239,6 +19239,24 @@ class PlayController {
     }
 }
 
+/* eslint-env browser */
+class ContentCardEditor extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        this.setConfig = (config) => {
+            console.log(config);
+        };
+        this.configChanged = (newConfig) => {
+            const event = new Event('config-changed', {
+                bubbles: true,
+                composed: true
+            });
+            event.detail = { config: newConfig };
+            this.dispatchEvent(event);
+        };
+    }
+}
+
 /* eslint-disable @typescript-eslint/no-explicit-any */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const escapeHtml = (unsafe) => {
@@ -21466,5 +21484,19 @@ class PlexMeetsHomeAssistant extends HTMLElement {
             }
         }
     }
+    static getConfigElement() {
+        return document.createElement('content-card-editor');
+    }
+    static getStubConfig() {
+        return { entity: 'sun.sun' };
+    }
 }
-customElements.define('plex-meets-homeassistant', PlexMeetsHomeAssistant);
+customElements.define('content-card-editor', ContentCardEditor);
+customElements.define('plex-meets-homeassistant', PlexMeetsHomeAssistant);
+window.customCards = window.customCards || [];
+window.customCards.push({
+    type: 'plex-meets-homeassistant',
+    name: 'Plex meets Home Assistant',
+    preview: false,
+    description: 'Integrates Plex into Home Assistant. Browse and launch media with a simple click.' // Optional
+});

src/editor.ts

@@ -0,0 +1,16 @@
+/* eslint-env browser */
+class ContentCardEditor extends HTMLElement {
+	setConfig = (config: any): void => {
+		console.log(config);
+	};
+
+	configChanged = (newConfig: any) => {
+		const event: any = new Event('config-changed', {
+			bubbles: true,
+			composed: true
+		});
+		event.detail = { config: newConfig };
+		this.dispatchEvent(event);
+	};
+}
+export default ContentCardEditor;

src/plex-meets-homeassistant.ts

@@ -6,6 +6,7 @@ import { Connection } from 'home-assistant-js-websocket';
 import { supported, CSS_STYLE } from './const';
 import Plex from './modules/Plex';
 import PlayController from './modules/PlayController';
+import ContentCardEditor from './editor';
 import {
 	escapeHtml,
 	getOffset,
@@ -21,6 +22,12 @@ import {
 } from './modules/utils';
 import style from './modules/style';
 
+declare global {
+	interface Window {
+		customCards: any;
+	}
+}
+
 class PlexMeetsHomeAssistant extends HTMLElement {
 	plexProtocol: 'http' | 'https' = 'http';
 
@@ -129,6 +136,14 @@ class PlexMeetsHomeAssistant extends HTMLElement {
 		}
 	}
 
+	static getConfigElement() {
+		return document.createElement('content-card-editor');
+	}
+
+	static getStubConfig() {
+		return { entity: 'sun.sun' };
+	}
+
 	renderNewElementsIfNeeded = (): void => {
 		const loadAdditionalRowsCount = 2; // todo: make this configurable
 		const height = getHeight(this.content);
@@ -1542,4 +1557,13 @@ class PlexMeetsHomeAssistant extends HTMLElement {
 	};
 }
 
+customElements.define('content-card-editor', ContentCardEditor);
 customElements.define('plex-meets-homeassistant', PlexMeetsHomeAssistant);
+
+window.customCards = window.customCards || [];
+window.customCards.push({
+	type: 'plex-meets-homeassistant',
+	name: 'Plex meets Home Assistant',
+	preview: false,
+	description: 'Integrates Plex into Home Assistant. Browse and launch media with a simple click.' // Optional
+});