Add: Working IP, port, token and library selector

2.0
Juraj Nyíri 3 years ago
parent 5b35249491
commit ebe88211c3

@ -19239,10 +19239,17 @@ class PlayController {
} }
} }
/* eslint-disable @typescript-eslint/no-explicit-any */
class PlexMeetsHomeAssistantEditor extends HTMLElement { class PlexMeetsHomeAssistantEditor extends HTMLElement {
constructor() { constructor() {
super(...arguments); super(...arguments);
this.plexPort = false;
this.plexProtocol = 'http';
this.config = {}; this.config = {};
this.ip = document.createElement('paper-input');
this.token = document.createElement('paper-input');
this.port = document.createElement('paper-input');
this.libraryName = document.createElement('paper-dropdown-menu');
this.fireEvent = (node, type, detail, options = {}) => { this.fireEvent = (node, type, detail, options = {}) => {
// eslint-disable-next-line no-param-reassign // eslint-disable-next-line no-param-reassign
detail = detail === null || detail === undefined ? {} : detail; detail = detail === null || detail === undefined ? {} : detail;
@ -19255,46 +19262,73 @@ class PlexMeetsHomeAssistantEditor extends HTMLElement {
node.dispatchEvent(event); node.dispatchEvent(event);
return event; return event;
}; };
this.render = () => { this.valueUpdated = () => {
this.config.ip = this.ip.value;
this.config.token = this.token.value;
this.config.port = this.port.value;
this.config.libraryName = this.libraryName.value;
this.fireEvent(this, 'config-changed', { config: this.config }); // todo remove me
};
this.render = async () => {
console.log('render'); console.log('render');
if (this.content) if (this.content)
this.content.remove(); this.content.remove();
this.content = document.createElement('div'); this.content = document.createElement('div');
const ip = document.createElement('paper-input'); this.ip.label = 'Plex IP Address';
ip.label = 'Plex IP Address'; this.ip.value = this.config.ip;
ip.value = this.config.ip; this.ip.addEventListener('change', this.valueUpdated);
this.content.appendChild(ip); this.content.appendChild(this.ip);
const token = document.createElement('paper-input'); this.token.label = 'Plex Token';
token.label = 'Plex Token'; this.token.value = this.config.token;
token.value = this.config.token; this.token.addEventListener('change', this.valueUpdated);
this.content.appendChild(token); this.content.appendChild(this.token);
const port = document.createElement('paper-input'); this.port.label = 'Plex Port';
port.label = 'Plex Port'; this.port.value = this.config.port;
port.value = this.config.port; this.port.type = 'number';
port.type = 'number'; this.port.addEventListener('change', this.valueUpdated);
this.content.appendChild(port); this.content.appendChild(this.port);
const addLibraryItem = (text) => { const addLibraryItem = (text) => {
const libraryItem = document.createElement('paper-item'); const libraryItem = document.createElement('paper-item');
libraryItem.innerHTML = text; libraryItem.innerHTML = text;
return libraryItem; return libraryItem;
}; };
const library = document.createElement('paper-dropdown-menu');
const libraryItems = document.createElement('paper-listbox'); const libraryItems = document.createElement('paper-listbox');
libraryItems.appendChild(addLibraryItem('Continue Watching')); libraryItems.appendChild(addLibraryItem('Continue Watching'));
libraryItems.appendChild(addLibraryItem('Deck')); libraryItems.appendChild(addLibraryItem('Deck'));
libraryItems.appendChild(addLibraryItem('Recently Added')); libraryItems.appendChild(addLibraryItem('Recently Added'));
libraryItems.appendChild(addLibraryItem('Watch Next')); libraryItems.appendChild(addLibraryItem('Watch Next'));
libraryItems.slot = 'dropdown-content'; libraryItems.slot = 'dropdown-content';
library.label = 'Plex Library'; this.libraryName.label = 'Plex Library';
library.appendChild(libraryItems); this.libraryName.disabled = true;
library.style.width = '100%'; this.libraryName.appendChild(libraryItems);
this.content.appendChild(library); this.libraryName.style.width = '100%';
this.libraryName.addEventListener('value-changed', this.valueUpdated);
this.content.appendChild(this.libraryName);
this.appendChild(this.content); this.appendChild(this.content);
this.fireEvent(this, 'config-changed', { config: this.config }); // todo remove me if (this.plex) {
try {
const sections = await this.plex.getSections();
lodash.forEach(sections, (section) => {
libraryItems.appendChild(addLibraryItem(section.title));
});
this.libraryName.disabled = false;
this.libraryName.value = this.config.libraryName;
}
catch (err) {
// pass
}
}
}; };
this.setConfig = (config) => { this.setConfig = (config) => {
console.log(config); console.log(config);
this.config = JSON.parse(JSON.stringify(config)); this.config = JSON.parse(JSON.stringify(config));
if (config.port) {
this.plexPort = config.port;
}
if (config.protocol) {
this.plexProtocol = config.protocol;
}
this.plex = new Plex(this.config.ip, this.plexPort, this.config.token, this.plexProtocol, this.config.sort);
this.render(); this.render();
}; };
this.configChanged = (newConfig) => { this.configChanged = (newConfig) => {

@ -1,13 +1,27 @@
/* eslint-disable @typescript-eslint/no-explicit-any */ /* eslint-disable @typescript-eslint/no-explicit-any */
/* eslint-env browser */ /* eslint-env browser */
import { HomeAssistant } from 'custom-card-helpers'; import _ from 'lodash';
import { PolymerElement } from '@polymer/polymer'; import Plex from './modules/Plex';
class PlexMeetsHomeAssistantEditor extends HTMLElement { class PlexMeetsHomeAssistantEditor extends HTMLElement {
content: any; content: any;
plexPort: number | false = false;
plexProtocol: 'http' | 'https' = 'http';
plex: Plex | undefined;
config: Record<string, any> = {}; config: Record<string, any> = {};
ip: any = document.createElement('paper-input');
token: any = document.createElement('paper-input');
port: any = document.createElement('paper-input');
libraryName: any = document.createElement('paper-dropdown-menu');
fireEvent = ( fireEvent = (
node: HTMLElement, node: HTMLElement,
type: string, type: string,
@ -26,52 +40,82 @@ class PlexMeetsHomeAssistantEditor extends HTMLElement {
return event; return event;
}; };
render = (): void => { valueUpdated = () => {
this.config.ip = this.ip.value;
this.config.token = this.token.value;
this.config.port = this.port.value;
this.config.libraryName = this.libraryName.value;
this.fireEvent(this, 'config-changed', { config: this.config }); // todo remove me
};
render = async (): Promise<void> => {
console.log('render'); console.log('render');
if (this.content) this.content.remove(); if (this.content) this.content.remove();
this.content = document.createElement('div'); this.content = document.createElement('div');
const ip: any = document.createElement('paper-input'); this.ip.label = 'Plex IP Address';
ip.label = 'Plex IP Address'; this.ip.value = this.config.ip;
ip.value = this.config.ip; this.ip.addEventListener('change', this.valueUpdated);
this.content.appendChild(ip); this.content.appendChild(this.ip);
const token: any = document.createElement('paper-input'); this.token.label = 'Plex Token';
token.label = 'Plex Token'; this.token.value = this.config.token;
token.value = this.config.token; this.token.addEventListener('change', this.valueUpdated);
this.content.appendChild(token); this.content.appendChild(this.token);
const port: any = document.createElement('paper-input'); this.port.label = 'Plex Port';
port.label = 'Plex Port'; this.port.value = this.config.port;
port.value = this.config.port; this.port.type = 'number';
port.type = 'number'; this.port.addEventListener('change', this.valueUpdated);
this.content.appendChild(port); this.content.appendChild(this.port);
const addLibraryItem = (text: string): HTMLElement => { const addLibraryItem = (text: string): HTMLElement => {
const libraryItem: any = document.createElement('paper-item'); const libraryItem: any = document.createElement('paper-item');
libraryItem.innerHTML = text; libraryItem.innerHTML = text;
return libraryItem; return libraryItem;
}; };
const library: any = document.createElement('paper-dropdown-menu');
const libraryItems: any = document.createElement('paper-listbox'); const libraryItems: any = document.createElement('paper-listbox');
libraryItems.appendChild(addLibraryItem('Continue Watching')); libraryItems.appendChild(addLibraryItem('Continue Watching'));
libraryItems.appendChild(addLibraryItem('Deck')); libraryItems.appendChild(addLibraryItem('Deck'));
libraryItems.appendChild(addLibraryItem('Recently Added')); libraryItems.appendChild(addLibraryItem('Recently Added'));
libraryItems.appendChild(addLibraryItem('Watch Next')); libraryItems.appendChild(addLibraryItem('Watch Next'));
libraryItems.slot = 'dropdown-content'; libraryItems.slot = 'dropdown-content';
library.label = 'Plex Library'; this.libraryName.label = 'Plex Library';
library.appendChild(libraryItems); this.libraryName.disabled = true;
library.style.width = '100%'; this.libraryName.appendChild(libraryItems);
this.content.appendChild(library); this.libraryName.style.width = '100%';
this.libraryName.addEventListener('value-changed', this.valueUpdated);
this.content.appendChild(this.libraryName);
this.appendChild(this.content); this.appendChild(this.content);
this.fireEvent(this, 'config-changed', { config: this.config }); // todo remove me if (this.plex) {
try {
const sections = await this.plex.getSections();
_.forEach(sections, (section: Record<string, any>) => {
libraryItems.appendChild(addLibraryItem(section.title));
});
this.libraryName.disabled = false;
this.libraryName.value = this.config.libraryName;
} catch (err) {
// pass
}
}
}; };
setConfig = (config: Record<string, any>): void => { setConfig = (config: Record<string, any>): void => {
console.log(config); console.log(config);
this.config = JSON.parse(JSON.stringify(config)); this.config = JSON.parse(JSON.stringify(config));
if (config.port) {
this.plexPort = config.port;
}
if (config.protocol) {
this.plexProtocol = config.protocol;
}
this.plex = new Plex(this.config.ip, this.plexPort, this.config.token, this.plexProtocol, this.config.sort);
this.render(); this.render();
}; };

Loading…
Cancel
Save