Juraj Nyíri
3 years ago
committed by
GitHub
commit
e4dc6919fc
@ -0,0 +1,348 @@
|
||||
# Detailed Configuration
|
||||
|
||||
**type**: 'custom:plex-meets-homeassistant'
|
||||
|
||||
**token**: Enter your [Plex Token](https://support.plex.tv/articles/204059436-finding-an-authentication-token-x-plex-token/)
|
||||
|
||||
**ip**: Enter ip address of plex server. You can also enter hostname without protocol or port.
|
||||
|
||||
**libraryName**: Name of the library you wish to render.
|
||||
|
||||
_Available special libraries:_
|
||||
|
||||
| Special Library | Description |
|
||||
| ----------------- | --------------------------------------------------------------------------------------------------------------------------- |
|
||||
| Watch Next | Shows Continue Watching feed just like in your new plex interface. **Does not work with old servers.** |
|
||||
| Recently Added | Shows recently added tv show episodes, might use old Plex API. For recently added movies use sort with your movies library. |
|
||||
| Continue Watching | Shows movies and tv shows in progress, uses old Plex API. |
|
||||
| Deck | Shows tv shows on deck, uses old Plex API. |
|
||||
|
||||
**entity**: You need to configure at least one supported media_player entity.
|
||||
|
||||
- **androidtv**: Entity id of your media_player configured via [Android TV](https://www.home-assistant.io/integrations/androidtv/). See [detailed instructions](https://github.com/JurajNyiri/PlexMeetsHomeAssistant#android-tv-or-fire-tv). It is also possible to use short declaration with androidtv.
|
||||
- **kodi**: Entity id of your media_player configured via [Kodi](https://www.home-assistant.io/integrations/kodi/). See [detailed instructions](https://github.com/JurajNyiri/PlexMeetsHomeAssistant#kodi). It is also possible to use short declaration with kodi.
|
||||
- **plexPlayer**: Name or machine ID of your plex client. Use this if you do not have devices above. See [detailed instructions](https://github.com/JurajNyiri/PlexMeetsHomeAssistant#all-other-plex-clients). It is required to use detailed declaration with "plexPlayer:" property.
|
||||
- **cast**: Entity id of your media_player configured via [Google Cast](https://www.home-assistant.io/integrations/cast/). See [detailed instructions](https://github.com/JurajNyiri/PlexMeetsHomeAssistant#google-cast). It is also possible to use short declaration with cast.
|
||||
|
||||
**port**: _Optional_ Port of your plex sever.
|
||||
|
||||
**protocol**: _Optional_ Protocol to use for Plex. Defaults to "http".
|
||||
|
||||
**maxCount**: _Optional_ Maximum number of items to display in card.
|
||||
|
||||
**sort**: _Optional_ Define sort by. See [detailed instructions](https://github.com/JurajNyiri/PlexMeetsHomeAssistant#sorting)
|
||||
|
||||
**runBefore**: _Optional_ Specify a script to run before playing. This can be for example a script which turns on your TV and waits 5 seconds. If this is specified and provided entity/script exists, all the other play checks for availability of entity are ignored.
|
||||
|
||||
**runAfter**: _Optional_ Specify a script to run after playing.
|
||||
|
||||
**showExtras**: _Optional_ Specify whether to show extras if any available on movie / episode. Possible values: true, false. Default: true
|
||||
|
||||
**showSearch**: _Optional_ Specify whether to show search field on top. Possible values: true, false. Default: true
|
||||
|
||||
**playTrailer**: _Optional_ Specify whether to play trailer if available. Possible values: true, false, muted. Default: true
|
||||
|
||||
Example of the simplest possible configuration:
|
||||
|
||||
```
|
||||
type: 'custom:plex-meets-homeassistant'
|
||||
token: QWdsqEXAMPLETOKENqwerty
|
||||
ip: 192.168.13.37
|
||||
libraryName: Movies
|
||||
entity: media_player.bedroom_tv # entity provided by cast integration
|
||||
```
|
||||
|
||||
Example of the simplest possible configuration using multiple entities:
|
||||
|
||||
```
|
||||
type: 'custom:plex-meets-homeassistant'
|
||||
token: QWdsqEXAMPLETOKENqwerty
|
||||
ip: 192.168.13.37
|
||||
libraryName: Movies
|
||||
entity:
|
||||
- media_player.living_room_nvidia_shield # created by androidtv integration
|
||||
- media_player.living_room_tv # created by cast integration
|
||||
- media_player.bedroom_tv # created by cast integration
|
||||
- media_player.kodi_123456qwe789rty # created by kodi integration
|
||||
```
|
||||
|
||||
Example of card configuration using detailed definitions:
|
||||
|
||||
```
|
||||
type: 'custom:plex-meets-homeassistant'
|
||||
token: QWdsqEXAMPLETOKENqwerty
|
||||
ip: 192.168.13.37
|
||||
port: 32400
|
||||
libraryName: TV Shows
|
||||
protocol: http
|
||||
maxCount: 10
|
||||
sort: title:desc
|
||||
entity:
|
||||
kodi: media_player.kodi_123456qwe789rty
|
||||
androidtv: media_player.living_room_nvidia_shield
|
||||
plexPlayer: 192.168.13.38
|
||||
cast: media_player.bedroom_tv
|
||||
```
|
||||
|
||||
Complex example using detailed definitions, lists and shared plex server for plexPlayer:
|
||||
|
||||
```
|
||||
type: 'custom:plex-meets-homeassistant'
|
||||
token: QWdsqEXAMPLETOKENqwerty
|
||||
ip: remote.plex.server.com # remote shared plex instance
|
||||
port: 443
|
||||
libraryName: Deck
|
||||
protocol: https
|
||||
maxCount: 10
|
||||
sort: title:desc
|
||||
runBefore: script.turn_on_tv_and_wait
|
||||
runAfter: script.movie_time
|
||||
showExtras: true
|
||||
playTrailer: muted
|
||||
entity:
|
||||
kodi:
|
||||
- media_player.kodi_bedroom
|
||||
- media_player.kodi_living_room
|
||||
androidtv:
|
||||
- media_player.living_room_nvidia_shield
|
||||
- media_player.bedroom_nvidia_shield
|
||||
- media_player.kithen_nvidia_shield
|
||||
plexPlayer:
|
||||
- identifier: TV 2020 # plex client device located on local plex server network
|
||||
server:
|
||||
ip: local.plex.server.com # Mandatory
|
||||
token: QWdsqEXAMPLETOKENqwerty # Mandatory
|
||||
port: 32400
|
||||
protocol: http
|
||||
- 192.168.13.50 # without definition for server, it will look for device on remote.plex.server.com network
|
||||
cast: media_player.bedroom_tv
|
||||
```
|
||||
|
||||
In this example, it will try to first play via kodi, in bedroom. If that kodi is unavailable or off, it tries in living room kodi.
|
||||
If that fails, it moves on to android tvs, starting with living room, continuing with bedroom and ending with kitchen.
|
||||
Next, if a possible player still has not been found (all kodis and shields are off) it tries to play via plexPlayer, trying TV 2020 on local plex server and if not found, IP 192.168.13.50 on remote plex server.
|
||||
Finally, it tries to cast into media_player.bedroom_tv.
|
||||
|
||||
## Detailed configuration instructions for end devices
|
||||
|
||||
_You can combine multiple supported entities_, in that case, entity for supported content will be chosen in order how you entered them.
|
||||
|
||||
As an example, if content can be played / shown both by kodi and androidtv, and you entered kodi first, it will be shown by kodi. If it cannot be played by kodi but can be played by androidtv, androidtv will be used.
|
||||
|
||||
This will also work with play button being shown, it will only show when you can actually play content on your device.
|
||||
|
||||
Play button is only visible if all the conditions inside Availability section of end devices below are met.
|
||||
|
||||
### Android TV or Fire TV
|
||||
|
||||
**Difficulty to setup**: Easy
|
||||
|
||||
**Steps**:
|
||||
|
||||
- Install plex application on your Android TV device. Open it and do the default setup so that you can see and navigate your libraries.
|
||||
- Setup [Android TV](https://www.home-assistant.io/integrations/androidtv/). You need just a [default configuration](https://www.home-assistant.io/integrations/androidtv/#configuration), no optional parameters needed.
|
||||
- Use entity_id of media_player provided by Android TV integration in card, example: `androidtv: media_player.living_room_nvidia_shield`.
|
||||
|
||||
**Availability**:
|
||||
|
||||
- Provided entity ID needs to exists
|
||||
- Provided entity ID needs to have attributes
|
||||
- Provided entity ID needs to have attribute adb_response
|
||||
|
||||
**Supported**:
|
||||
|
||||
✅ Shared Plex servers
|
||||
|
||||
✅ Movies
|
||||
|
||||
✅ Show
|
||||
|
||||
✅ Season
|
||||
|
||||
✅ Episodes
|
||||
|
||||
### Kodi
|
||||
|
||||
**Difficulty to setup**: Moderate
|
||||
|
||||
**Steps**:
|
||||
|
||||
- Install and configure [PlexKodiConnect](https://github.com/croneter/PlexKodiConnect#download-and-installation) on Kodi itself.
|
||||
- Setup [Kodi](https://www.home-assistant.io/integrations/kodi/) integration for your device.
|
||||
- Install and configure integration [Kodi Recently Added Media](https://github.com/jtbgroup/kodi-media-sensors#installation) and its sensor **kodi_media_sensor_search**
|
||||
|
||||
<details>
|
||||
<summary>Images of installation of Kodi Recently Added Media</summary>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</details>
|
||||
|
||||
- Use entity_id of media_player provided by Kodi integration in card, example: `media_player.kodi_123456qwe789rty`.
|
||||
|
||||
**Availability**:
|
||||
|
||||
- Provided entity ID needs to exists
|
||||
- Entity 'sensor.kodi_media_sensor_search' needs to exist
|
||||
- State of both entities cannot be 'unavailable'
|
||||
- State of kodi cannot be 'off'
|
||||
|
||||
**Supported**:
|
||||
|
||||
✅ Shared Plex servers _\*if content available in kodi_
|
||||
|
||||
✅ Movies
|
||||
|
||||
❌ Show
|
||||
|
||||
❌ Season
|
||||
|
||||
✅ Episodes
|
||||
|
||||
### Google Cast
|
||||
|
||||
**Difficulty to setup**: Very easy
|
||||
|
||||
**Steps**:
|
||||
|
||||
- Set up [Google Cast](https://www.home-assistant.io/integrations/cast/) in Home Assistant.
|
||||
- Use entity_id of media_player provided by Google Cast integration in card, example: `cast: media_player.bedroom_tv`.
|
||||
- Save card configuration and make sure the entity is not `unavailable`, if you see play buttons on movies or individual episodes configuration was successful.
|
||||
|
||||
**Availability**:
|
||||
|
||||
- Media player entity cannot be `unavailable`
|
||||
|
||||
**Supported**:
|
||||
|
||||
✅ Shared Plex servers
|
||||
|
||||
✅ Movies
|
||||
|
||||
❌ Show
|
||||
|
||||
❌ Season
|
||||
|
||||
✅ Episodes
|
||||
|
||||
### All other plex clients
|
||||
|
||||
**Difficulty to setup**: Very Easy to Moderate
|
||||
|
||||
**Steps**:
|
||||
|
||||
_Easy setup_:
|
||||
|
||||
Notice: While easy, it might not work if you have multiple devices with the same name, or you buy a second device with the same name in the future. Some plex clients also incorrectly report theirs IP Address, so addition by that might not be working. Take a look at Machine ID setup below if this is a concern for you.
|
||||
|
||||
- Open Plex app on the device you wish to add
|
||||
- Open your Plex web GUI
|
||||
- Click on cast on the top right corner and note down name of your device
|
||||
|
||||
|
||||
|
||||
- Add it to card, example:
|
||||
|
||||
```
|
||||
entity:
|
||||
plexPlayer: TV 2020
|
||||
```
|
||||
|
||||
Instead of device name, you can also enter device IP address or product name.
|
||||
|
||||
- Save card configuration, if you see play buttons everywhere configuration was successful.
|
||||
|
||||
If you do not see play button, or have multiple devices with the same name, follow Machine ID setup below.
|
||||
|
||||
_Machine ID setup_:
|
||||
|
||||
- Open Plex app on the device you wish to add
|
||||
- Open your Plex web GUI
|
||||
- Modify URL so that just after the port, just after the first slash, you enter `clients?X-Plex-Token=PLEX_TOKEN`. Replace PLEX_TOKEN with your plex token. Example final URL `http://192.168.13.37:32400/clients?X-Plex-Token=qweRTY123456`.
|
||||
- You will get a list of all currently connected Plex clients.
|
||||
- Find the client you wish to add, and copy machineIdentifier key without quotes.
|
||||
- Add machineIdentifier into card, for example:
|
||||
|
||||
```
|
||||
entity:
|
||||
plexPlayer: mYaweS0meMacHin3Id3ntiFI3r
|
||||
```
|
||||
|
||||
- Save card configuration, if you see play buttons everywhere configuration was successful.
|
||||
|
||||
**Availability**:
|
||||
|
||||
- Plex needs to run on the defined device
|
||||
|
||||
**Supported**:
|
||||
|
||||
✅ Shared Plex servers _\*requires additional configuration, see below_
|
||||
|
||||
✅ Movies
|
||||
|
||||
✅ Show
|
||||
|
||||
✅ Season
|
||||
|
||||
✅ Episodes
|
||||
|
||||
**Shared Plex servers configuration**
|
||||
|
||||
plexPlayer can be configured in multiple ways, achieving the same thing:
|
||||
|
||||
```
|
||||
entity:
|
||||
plexPlayer: TV 2020
|
||||
```
|
||||
|
||||
```
|
||||
entity:
|
||||
plexPlayer:
|
||||
- TV 2020
|
||||
```
|
||||
|
||||
```
|
||||
entity:
|
||||
plexPlayer:
|
||||
identifier: TV 2020
|
||||
```
|
||||
|
||||
```
|
||||
entity:
|
||||
plexPlayer:
|
||||
- identifier: TV 2020
|
||||
```
|
||||
|
||||
As can be seen from the last two examples, it is possible to configure it as an object having key "identifier".
|
||||
|
||||
That is useful, if you want to stream media from shared or remote Plex server. Add information about your local Plex server which sees your device on which you wish to play content. This is done by including a new key, "server" having additional keys:
|
||||
|
||||
Example 1:
|
||||
|
||||
```
|
||||
entity:
|
||||
plexPlayer:
|
||||
- identifier: TV 2020
|
||||
server:
|
||||
ip: 192.168.13.37 # Mandatory
|
||||
token: QWdsqEXAMPLETOKENqwerty # Mandatory
|
||||
port: 32400
|
||||
protocol: http
|
||||
```
|
||||
|
||||
Example 2:
|
||||
|
||||
```
|
||||
entity:
|
||||
plexPlayer:
|
||||
identifier: TV 2020
|
||||
server:
|
||||
ip: 192.168.13.37 # Mandatory
|
||||
token: QWdsqEXAMPLETOKENqwerty # Mandatory
|
||||
port: 32400
|
||||
protocol: http
|
||||
```
|
||||
|
After Width: | Height: | Size: 488 KiB |
@ -0,0 +1,611 @@
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||
/* eslint-env browser */
|
||||
import _ from 'lodash';
|
||||
import { HomeAssistant } from 'custom-card-helpers';
|
||||
import Plex from './modules/Plex';
|
||||
import { fetchEntityRegistry } from './modules/utils';
|
||||
|
||||
class PlexMeetsHomeAssistantEditor extends HTMLElement {
|
||||
content: any;
|
||||
|
||||
plexPort: number | false = false;
|
||||
|
||||
plexProtocol: 'http' | 'https' = 'http';
|
||||
|
||||
plex: Plex | undefined;
|
||||
|
||||
config: Record<string, any> = {};
|
||||
|
||||
ip: any = document.createElement('paper-input');
|
||||
|
||||
token: any = document.createElement('paper-input');
|
||||
|
||||
port: any = document.createElement('paper-input');
|
||||
|
||||
maxCount: any = document.createElement('paper-input');
|
||||
|
||||
libraryName: any = document.createElement('paper-dropdown-menu');
|
||||
|
||||
protocol: any = document.createElement('paper-dropdown-menu');
|
||||
|
||||
tabs: any = document.createElement('paper-tabs');
|
||||
|
||||
sort: any = document.createElement('paper-dropdown-menu');
|
||||
|
||||
sortOrder: any = document.createElement('paper-dropdown-menu');
|
||||
|
||||
playTrailer: any = document.createElement('paper-dropdown-menu');
|
||||
|
||||
showExtras: any = document.createElement('paper-dropdown-menu');
|
||||
|
||||
showSearch: any = document.createElement('paper-dropdown-menu');
|
||||
|
||||
runBefore: any = document.createElement('paper-dropdown-menu');
|
||||
|
||||
runAfter: any = document.createElement('paper-dropdown-menu');
|
||||
|
||||
entitiesSection: any = document.createElement('div');
|
||||
|
||||
devicesTabs = 0;
|
||||
|
||||
hassObj: HomeAssistant | undefined;
|
||||
|
||||
entities: Array<any> = [];
|
||||
|
||||
scriptEntities: Array<string> = [];
|
||||
|
||||
sections: Array<Record<string, any>> = [];
|
||||
|
||||
clients: Record<string, any> = {};
|
||||
|
||||
entitiesRegistry: false | Array<Record<string, any>> = false;
|
||||
|
||||
plexValidSection = document.createElement('div');
|
||||
|
||||
loaded = false;
|
||||
|
||||
fireEvent = (
|
||||
node: HTMLElement,
|
||||
type: string,
|
||||
detail: Record<string, any>,
|
||||
options: Record<string, any> = {}
|
||||
): Event => {
|
||||
// eslint-disable-next-line no-param-reassign
|
||||
detail = detail === null || detail === undefined ? {} : detail;
|
||||
const event: any = new Event(type, {
|
||||
bubbles: options.bubbles === undefined ? true : options.bubbles,
|
||||
cancelable: Boolean(options.cancelable),
|
||||
composed: options.composed === undefined ? true : options.composed
|
||||
});
|
||||
event.detail = detail;
|
||||
node.dispatchEvent(event);
|
||||
return event;
|
||||
};
|
||||
|
||||
valueUpdated = (): void => {
|
||||
if (this.loaded) {
|
||||
const originalConfig = _.clone(this.config);
|
||||
this.config.protocol = this.protocol.value;
|
||||
this.config.ip = this.ip.value;
|
||||
this.config.token = this.token.value;
|
||||
this.config.port = this.port.value;
|
||||
if (!this.config.entity) {
|
||||
this.config.entity = [];
|
||||
}
|
||||
if (!_.isEmpty(this.libraryName.value)) {
|
||||
this.config.libraryName = this.libraryName.value;
|
||||
|
||||
let sortOrderValue = '';
|
||||
if (_.isEqual(this.sortOrder.value, 'Ascending')) {
|
||||
sortOrderValue = 'asc';
|
||||
} else if (_.isEqual(this.sortOrder.value, 'Descending')) {
|
||||
sortOrderValue = 'desc';
|
||||
}
|
||||
if (!_.isEmpty(sortOrderValue) && !_.isEmpty(this.sort.value)) {
|
||||
this.config.sort = `${this.sort.value}:${sortOrderValue}`;
|
||||
} else {
|
||||
this.config.sort = ``;
|
||||
}
|
||||
|
||||
if (_.isEmpty(this.maxCount.value)) {
|
||||
this.config.maxCount = '';
|
||||
} else {
|
||||
this.config.maxCount = this.maxCount.value;
|
||||
}
|
||||
|
||||
if (!_.isEmpty(this.entities)) {
|
||||
this.config.entity = [];
|
||||
_.forEach(this.entities, entity => {
|
||||
if (!_.isEmpty(entity.value) && !_.includes(this.config.entity, entity.value)) {
|
||||
this.config.entity.push(entity.value);
|
||||
}
|
||||
});
|
||||
}
|
||||
if (_.isEqual(this.playTrailer.value, 'Yes')) {
|
||||
this.config.playTrailer = true;
|
||||
} else if (_.isEqual(this.playTrailer.value, 'No')) {
|
||||
this.config.playTrailer = false;
|
||||
} else if (_.isEqual(this.playTrailer.value, 'Muted')) {
|
||||
this.config.playTrailer = 'muted';
|
||||
}
|
||||
if (_.isEqual(this.showExtras.value, 'Yes')) {
|
||||
this.config.showExtras = true;
|
||||
} else if (_.isEqual(this.showExtras.value, 'No')) {
|
||||
this.config.showExtras = false;
|
||||
}
|
||||
if (_.isEqual(this.showSearch.value, 'Yes')) {
|
||||
this.config.showSearch = true;
|
||||
} else if (_.isEqual(this.showSearch.value, 'No')) {
|
||||
this.config.showSearch = false;
|
||||
}
|
||||
this.config.runBefore = this.runBefore.value;
|
||||
this.config.runAfter = this.runAfter.value;
|
||||
}
|
||||
if (!_.isEqual(this.config, originalConfig)) {
|
||||
this.fireEvent(this, 'config-changed', { config: this.config });
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
render = async (): Promise<void> => {
|
||||
const addDropdownItem = (text: string): HTMLElement => {
|
||||
const libraryItem: any = document.createElement('paper-item');
|
||||
libraryItem.innerHTML = text;
|
||||
return libraryItem;
|
||||
};
|
||||
const createEntitiesDropdown = (selected: string, changeHandler: Function): HTMLElement | false => {
|
||||
if (this.entitiesRegistry) {
|
||||
const entitiesDropDown: any = document.createElement('paper-dropdown-menu');
|
||||
const entities: any = document.createElement('paper-listbox');
|
||||
|
||||
entities.appendChild(addDropdownItem(''));
|
||||
const addedEntityStrings: Array<string> = [];
|
||||
_.forEach(this.entitiesRegistry, entityRegistry => {
|
||||
if (
|
||||
_.isEqual(entityRegistry.platform, 'cast') ||
|
||||
_.isEqual(entityRegistry.platform, 'kodi') ||
|
||||
_.isEqual(entityRegistry.platform, 'androidtv')
|
||||
) {
|
||||
const entityName = `${entityRegistry.platform} | ${entityRegistry.entity_id}`;
|
||||
entities.appendChild(addDropdownItem(entityName));
|
||||
addedEntityStrings.push(entityName);
|
||||
}
|
||||
});
|
||||
_.forEach(this.clients, value => {
|
||||
const entityName = `plexPlayer | ${value.name} | ${value.address} | ${value.machineIdentifier}`;
|
||||
entities.appendChild(addDropdownItem(entityName));
|
||||
addedEntityStrings.push(entityName);
|
||||
});
|
||||
|
||||
if (_.isArray(this.config.entity)) {
|
||||
_.forEach(this.config.entity, value => {
|
||||
if (!_.includes(addedEntityStrings, value)) {
|
||||
entities.appendChild(addDropdownItem(value));
|
||||
addedEntityStrings.push(value);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
entities.slot = 'dropdown-content';
|
||||
entitiesDropDown.label = 'Entity';
|
||||
entitiesDropDown.value = selected;
|
||||
entitiesDropDown.appendChild(entities);
|
||||
entitiesDropDown.style.width = '100%';
|
||||
entitiesDropDown.className = 'entitiesDropDown';
|
||||
entitiesDropDown.addEventListener('value-changed', changeHandler);
|
||||
this.entities.push(entitiesDropDown);
|
||||
return entitiesDropDown;
|
||||
}
|
||||
return false;
|
||||
};
|
||||
if (this.content) this.content.remove();
|
||||
if (this.hassObj && !this.entitiesRegistry) {
|
||||
_.forOwn(this.hassObj.states, (value, key) => {
|
||||
if (_.startsWith(key, 'script.')) {
|
||||
this.scriptEntities.push(key);
|
||||
}
|
||||
});
|
||||
this.entitiesRegistry = await fetchEntityRegistry(this.hassObj.connection);
|
||||
}
|
||||
|
||||
this.entities = [];
|
||||
this.content = document.createElement('div');
|
||||
|
||||
const plexTitle = document.createElement('h2');
|
||||
plexTitle.innerHTML = 'Plex Configuration';
|
||||
plexTitle.style.margin = '0px';
|
||||
plexTitle.style.padding = '0px';
|
||||
this.content.appendChild(plexTitle);
|
||||
|
||||
this.protocol.innerHTML = '';
|
||||
const protocolItems: any = document.createElement('paper-listbox');
|
||||
protocolItems.appendChild(addDropdownItem('http'));
|
||||
protocolItems.appendChild(addDropdownItem('https'));
|
||||
protocolItems.slot = 'dropdown-content';
|
||||
this.protocol.label = 'Plex Protocol';
|
||||
this.protocol.appendChild(protocolItems);
|
||||
this.protocol.style.width = '100%';
|
||||
this.protocol.addEventListener('value-changed', this.valueUpdated);
|
||||
if (_.isEmpty(this.config.protocol)) {
|
||||
this.protocol.value = 'http';
|
||||
} else {
|
||||
this.protocol.value = this.config.protocol;
|
||||
}
|
||||
this.content.appendChild(this.protocol);
|
||||
|
||||
this.ip.label = 'Plex IP Address';
|
||||
this.ip.value = this.config.ip;
|
||||
this.ip.addEventListener('change', this.valueUpdated);
|
||||
this.content.appendChild(this.ip);
|
||||
|
||||
this.port.label = 'Plex Port';
|
||||
this.port.value = this.config.port;
|
||||
this.port.type = 'number';
|
||||
this.port.addEventListener('change', this.valueUpdated);
|
||||
this.content.appendChild(this.port);
|
||||
|
||||
this.token.label = 'Plex Token';
|
||||
this.token.value = this.config.token;
|
||||
this.token.addEventListener('change', this.valueUpdated);
|
||||
this.content.appendChild(this.token);
|
||||
|
||||
this.libraryName.innerHTML = '';
|
||||
const libraryItems: any = document.createElement('paper-listbox');
|
||||
libraryItems.appendChild(addDropdownItem('Continue Watching'));
|
||||
libraryItems.appendChild(addDropdownItem('Deck'));
|
||||
libraryItems.appendChild(addDropdownItem('Recently Added'));
|
||||
libraryItems.appendChild(addDropdownItem('Watch Next'));
|
||||
libraryItems.slot = 'dropdown-content';
|
||||
this.libraryName.label = 'Plex Library';
|
||||
this.libraryName.disabled = true;
|
||||
this.libraryName.appendChild(libraryItems);
|
||||
this.libraryName.style.width = '100%';
|
||||
this.libraryName.addEventListener('value-changed', this.valueUpdated);
|
||||
this.content.appendChild(this.libraryName);
|
||||
|
||||
this.appendChild(this.content);
|
||||
|
||||
this.plex = new Plex(this.config.ip, this.plexPort, this.config.token, this.plexProtocol, this.config.sort);
|
||||
this.sections = await this.plex.getSections();
|
||||
this.clients = await this.plex.getClients();
|
||||
|
||||
this.plexValidSection.style.display = 'none';
|
||||
this.plexValidSection.innerHTML = '';
|
||||
|
||||
let hasUIConfig = true;
|
||||
let canConvert = true;
|
||||
if (_.isArray(this.config.entity)) {
|
||||
// eslint-disable-next-line consistent-return
|
||||
_.forEach(this.config.entity, entity => {
|
||||
if (_.isObjectLike(entity)) {
|
||||
canConvert = !_.includes(_.keys(this.config.entity), 'plexPlayer');
|
||||
hasUIConfig = false;
|
||||
return false;
|
||||
}
|
||||
});
|
||||
} else if (_.isObjectLike(this.config.entity)) {
|
||||
canConvert = !_.includes(_.keys(this.config.entity), 'plexPlayer');
|
||||
hasUIConfig = false;
|
||||
if (canConvert) {
|
||||
const convertedEntities: Array<string> = [];
|
||||
hasUIConfig = true;
|
||||
if (_.isObjectLike(this.config.entity)) {
|
||||
_.forOwn(this.config.entity, value => {
|
||||
if (_.isString(value)) {
|
||||
convertedEntities.push(value);
|
||||
} else if (_.isArray(value)) {
|
||||
_.forEach(value, valueStr => {
|
||||
convertedEntities.push(valueStr);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
this.config.entity = convertedEntities;
|
||||
}
|
||||
}
|
||||
|
||||
const devicesTitle = document.createElement('h2');
|
||||
devicesTitle.innerHTML = `Devices Configuration`;
|
||||
devicesTitle.style.lineHeight = '29px';
|
||||
devicesTitle.style.marginBottom = '0px';
|
||||
devicesTitle.style.marginTop = '20px';
|
||||
if (hasUIConfig) {
|
||||
const addDeviceButton = document.createElement('button');
|
||||
addDeviceButton.style.float = 'right';
|
||||
addDeviceButton.style.fontSize = '20px';
|
||||
addDeviceButton.style.cursor = 'pointer';
|
||||
addDeviceButton.innerHTML = '+';
|
||||
addDeviceButton.addEventListener('click', () => {
|
||||
const entitiesDropdown = createEntitiesDropdown('', this.valueUpdated);
|
||||
if (entitiesDropdown) {
|
||||
this.entitiesSection.appendChild(entitiesDropdown);
|
||||
}
|
||||
});
|
||||
devicesTitle.appendChild(addDeviceButton);
|
||||
}
|
||||
|
||||
this.plexValidSection.appendChild(devicesTitle);
|
||||
this.entitiesSection.innerHTML = '';
|
||||
this.plexValidSection.appendChild(this.entitiesSection);
|
||||
if (hasUIConfig) {
|
||||
if (_.isString(this.config.entity)) {
|
||||
this.config.entity = [this.config.entity];
|
||||
}
|
||||
if (_.isArray(this.config.entity)) {
|
||||
_.forEach(this.config.entity, entity => {
|
||||
if (_.isString(entity)) {
|
||||
const entitiesDropdown = createEntitiesDropdown(entity, this.valueUpdated);
|
||||
if (entitiesDropdown) {
|
||||
this.entitiesSection.appendChild(entitiesDropdown);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
} else {
|
||||
const entitiesUINotAvailable = document.createElement('div');
|
||||
entitiesUINotAvailable.innerHTML =
|
||||
'Devices configuration is not available when using plexPlayer client device.<br/>You can edit any other settings through UI and use <b>Show code editor</b> to edit entities.<br/><br/>If you are not using server settings for plexPlayer with <b>identifier</b> and <b>server</b> key, you can migrate your settings to UI by removing plexPlayer section and readd through UI.';
|
||||
this.plexValidSection.appendChild(entitiesUINotAvailable);
|
||||
}
|
||||
|
||||
const viewTitle = document.createElement('h2');
|
||||
viewTitle.innerHTML = `View Configuration`;
|
||||
viewTitle.style.lineHeight = '29px';
|
||||
viewTitle.style.marginBottom = '0px';
|
||||
viewTitle.style.marginTop = '20px';
|
||||
this.plexValidSection.appendChild(viewTitle);
|
||||
|
||||
this.maxCount.label = 'Maximum number of items to display';
|
||||
this.maxCount.value = this.config.maxCount;
|
||||
this.maxCount.type = 'number';
|
||||
this.maxCount.addEventListener('change', this.valueUpdated);
|
||||
this.plexValidSection.appendChild(this.maxCount);
|
||||
|
||||
this.sort.innerHTML = '';
|
||||
|
||||
const sortItems: any = document.createElement('paper-listbox');
|
||||
sortItems.slot = 'dropdown-content';
|
||||
this.sort.label = 'Sort';
|
||||
this.sort.appendChild(sortItems);
|
||||
this.sort.style.width = '100%';
|
||||
this.sort.addEventListener('value-changed', this.valueUpdated);
|
||||
this.plexValidSection.appendChild(this.sort);
|
||||
|
||||
this.sortOrder.innerHTML = '';
|
||||
const sortOrderItems: any = document.createElement('paper-listbox');
|
||||
sortOrderItems.appendChild(addDropdownItem('Ascending'));
|
||||
sortOrderItems.appendChild(addDropdownItem('Descending'));
|
||||
sortOrderItems.slot = 'dropdown-content';
|
||||
this.sortOrder.label = 'Sort Order';
|
||||
this.sortOrder.appendChild(sortOrderItems);
|
||||
this.sortOrder.style.width = '100%';
|
||||
this.sortOrder.addEventListener('value-changed', this.valueUpdated);
|
||||
if (_.isEmpty(this.config.sort)) {
|
||||
this.sortOrder.value = 'Ascending';
|
||||
} else {
|
||||
const sortOrder = this.config.sort.split(':')[1];
|
||||
if (_.isEmpty(sortOrder)) {
|
||||
this.sortOrder.value = 'Ascending';
|
||||
} else if (_.isEqual(sortOrder, 'asc')) {
|
||||
this.sortOrder.value = 'Ascending';
|
||||
} else if (_.isEqual(sortOrder, 'desc')) {
|
||||
this.sortOrder.value = 'Descending';
|
||||
}
|
||||
}
|
||||
this.plexValidSection.appendChild(this.sortOrder);
|
||||
|
||||
this.playTrailer.innerHTML = '';
|
||||
const playTrailerItems: any = document.createElement('paper-listbox');
|
||||
playTrailerItems.appendChild(addDropdownItem('Yes'));
|
||||
playTrailerItems.appendChild(addDropdownItem('Muted'));
|
||||
playTrailerItems.appendChild(addDropdownItem('No'));
|
||||
playTrailerItems.slot = 'dropdown-content';
|
||||
this.playTrailer.label = 'Play Trailer';
|
||||
this.playTrailer.appendChild(playTrailerItems);
|
||||
this.playTrailer.style.width = '100%';
|
||||
this.playTrailer.addEventListener('value-changed', this.valueUpdated);
|
||||
let playTrailerValue = 'Yes';
|
||||
if (_.isEqual(this.config.playTrailer, 'muted')) {
|
||||
playTrailerValue = 'Muted';
|
||||
} else if (!this.config.playTrailer) {
|
||||
playTrailerValue = 'No';
|
||||
}
|
||||
this.playTrailer.value = playTrailerValue;
|
||||
this.plexValidSection.appendChild(this.playTrailer);
|
||||
|
||||
this.showExtras.innerHTML = '';
|
||||
const showExtrasItems: any = document.createElement('paper-listbox');
|
||||
showExtrasItems.appendChild(addDropdownItem('Yes'));
|
||||
showExtrasItems.appendChild(addDropdownItem('No'));
|
||||
showExtrasItems.slot = 'dropdown-content';
|
||||
this.showExtras.label = 'Show Extras';
|
||||
this.showExtras.appendChild(showExtrasItems);
|
||||
this.showExtras.style.width = '100%';
|
||||
this.showExtras.addEventListener('value-changed', this.valueUpdated);
|
||||
let showExtrasValue = 'Yes';
|
||||
if (!this.config.showExtras) {
|
||||
showExtrasValue = 'No';
|
||||
}
|
||||
this.showExtras.value = showExtrasValue;
|
||||
this.plexValidSection.appendChild(this.showExtras);
|
||||
|
||||
this.showSearch.innerHTML = '';
|
||||
const showSearchItems: any = document.createElement('paper-listbox');
|
||||
showSearchItems.appendChild(addDropdownItem('Yes'));
|
||||
showSearchItems.appendChild(addDropdownItem('No'));
|
||||
showSearchItems.slot = 'dropdown-content';
|
||||
this.showSearch.label = 'Show Search';
|
||||
this.showSearch.appendChild(showSearchItems);
|
||||
this.showSearch.style.width = '100%';
|
||||
this.showSearch.addEventListener('value-changed', this.valueUpdated);
|
||||
let showSearchValue = 'Yes';
|
||||
if (!this.config.showSearch) {
|
||||
showSearchValue = 'No';
|
||||
}
|
||||
this.showSearch.value = showSearchValue;
|
||||
this.plexValidSection.appendChild(this.showSearch);
|
||||
|
||||
this.runBefore.innerHTML = '';
|
||||
const runBeforeItems: any = document.createElement('paper-listbox');
|
||||
runBeforeItems.appendChild(addDropdownItem(''));
|
||||
_.forEach(this.scriptEntities, entity => {
|
||||
runBeforeItems.appendChild(addDropdownItem(entity));
|
||||
});
|
||||
runBeforeItems.slot = 'dropdown-content';
|
||||
this.runBefore.label = 'Script to execute before starting the media';
|
||||
this.runBefore.appendChild(runBeforeItems);
|
||||
this.runBefore.style.width = '100%';
|
||||
this.runBefore.addEventListener('value-changed', this.valueUpdated);
|
||||
this.runBefore.value = this.config.runBefore;
|
||||
this.plexValidSection.appendChild(this.runBefore);
|
||||
|
||||
this.runAfter.innerHTML = '';
|
||||
const runAfterItems: any = document.createElement('paper-listbox');
|
||||
runAfterItems.appendChild(addDropdownItem(''));
|
||||
_.forEach(this.scriptEntities, entity => {
|
||||
runAfterItems.appendChild(addDropdownItem(entity));
|
||||
});
|
||||
runAfterItems.slot = 'dropdown-content';
|
||||
this.runAfter.label = 'Script to execute after starting the media';
|
||||
this.runAfter.appendChild(runAfterItems);
|
||||
this.runAfter.style.width = '100%';
|
||||
this.runAfter.addEventListener('value-changed', this.valueUpdated);
|
||||
this.runAfter.value = this.config.runAfter;
|
||||
this.plexValidSection.appendChild(this.runAfter);
|
||||
|
||||
if (!_.isEmpty(this.sections)) {
|
||||
_.forEach(this.sections, (section: Record<string, any>) => {
|
||||
libraryItems.appendChild(addDropdownItem(section.title));
|
||||
});
|
||||
this.libraryName.disabled = false;
|
||||
this.libraryName.value = this.config.libraryName;
|
||||
|
||||
let libraryType = '';
|
||||
// eslint-disable-next-line consistent-return
|
||||
_.forEach(this.sections, section => {
|
||||
if (_.isEqual(section.title, this.libraryName.value)) {
|
||||
libraryType = section.type;
|
||||
return false;
|
||||
}
|
||||
});
|
||||
if (_.isEqual(libraryType, 'show')) {
|
||||
sortItems.appendChild(addDropdownItem('titleSort'));
|
||||
sortItems.appendChild(addDropdownItem('title'));
|
||||
sortItems.appendChild(addDropdownItem('year'));
|
||||
sortItems.appendChild(addDropdownItem('originallyAvailableAt'));
|
||||
sortItems.appendChild(addDropdownItem('rating'));
|
||||
sortItems.appendChild(addDropdownItem('audienceRating'));
|
||||
sortItems.appendChild(addDropdownItem('userRating'));
|
||||
sortItems.appendChild(addDropdownItem('contentRating'));
|
||||
sortItems.appendChild(addDropdownItem('unviewedLeafCount'));
|
||||
sortItems.appendChild(addDropdownItem('episode.addedAt'));
|
||||
sortItems.appendChild(addDropdownItem('addedAt'));
|
||||
sortItems.appendChild(addDropdownItem('lastViewedAt'));
|
||||
this.sort.style.display = 'block';
|
||||
this.sortOrder.style.display = 'block';
|
||||
} else if (_.isEqual(libraryType, 'movie')) {
|
||||
sortItems.appendChild(addDropdownItem('titleSort'));
|
||||
sortItems.appendChild(addDropdownItem('title'));
|
||||
sortItems.appendChild(addDropdownItem('originallyAvailableAt'));
|
||||
sortItems.appendChild(addDropdownItem('rating'));
|
||||
sortItems.appendChild(addDropdownItem('audienceRating'));
|
||||
sortItems.appendChild(addDropdownItem('userRating'));
|
||||
sortItems.appendChild(addDropdownItem('duration'));
|
||||
sortItems.appendChild(addDropdownItem('viewOffset'));
|
||||
sortItems.appendChild(addDropdownItem('viewCount'));
|
||||
sortItems.appendChild(addDropdownItem('addedAt'));
|
||||
sortItems.appendChild(addDropdownItem('lastViewedAt'));
|
||||
sortItems.appendChild(addDropdownItem('mediaHeight'));
|
||||
sortItems.appendChild(addDropdownItem('mediaBitrate'));
|
||||
this.sort.style.display = 'block';
|
||||
this.sortOrder.style.display = 'block';
|
||||
} else {
|
||||
this.sort.style.display = 'none';
|
||||
this.sortOrder.style.display = 'none';
|
||||
this.config.sort = '';
|
||||
}
|
||||
|
||||
if (_.isEmpty(this.config.sort)) {
|
||||
this.sort.value = '';
|
||||
this.sortOrder.value = '';
|
||||
} else {
|
||||
// eslint-disable-next-line prefer-destructuring
|
||||
this.sort.value = this.config.sort.split(':')[0];
|
||||
const sortOrder = this.config.sort.split(':')[1];
|
||||
if (_.isEmpty(sortOrder)) {
|
||||
this.sortOrder.value = 'Ascending';
|
||||
} else if (_.isEqual(sortOrder, 'asc')) {
|
||||
this.sortOrder.value = 'Ascending';
|
||||
} else if (_.isEqual(sortOrder, 'desc')) {
|
||||
this.sortOrder.value = 'Descending';
|
||||
}
|
||||
}
|
||||
|
||||
this.plexValidSection.style.display = 'block';
|
||||
}
|
||||
this.loaded = true;
|
||||
this.content.appendChild(this.plexValidSection);
|
||||
};
|
||||
|
||||
setConfig = (config: Record<string, any>): void => {
|
||||
this.config = JSON.parse(JSON.stringify(config));
|
||||
|
||||
if (config.port && !_.isEqual(config.port, '')) {
|
||||
this.plexPort = config.port;
|
||||
} else {
|
||||
this.plexPort = false;
|
||||
}
|
||||
|
||||
if (config.protocol) {
|
||||
this.plexProtocol = config.protocol;
|
||||
} else {
|
||||
this.config.protocol = 'http';
|
||||
}
|
||||
|
||||
if (!config.sort) {
|
||||
this.config.sort = 'titleSort:asc';
|
||||
}
|
||||
|
||||
if (!_.isNil(config.playTrailer)) {
|
||||
this.config.playTrailer = config.playTrailer;
|
||||
} else {
|
||||
this.config.playTrailer = true;
|
||||
}
|
||||
|
||||
if (!_.isNil(config.showExtras)) {
|
||||
this.config.showExtras = config.showExtras;
|
||||
} else {
|
||||
this.config.showExtras = true;
|
||||
}
|
||||
|
||||
if (!_.isNil(config.showSearch)) {
|
||||
this.config.showSearch = config.showSearch;
|
||||
} else {
|
||||
this.config.showSearch = true;
|
||||
}
|
||||
|
||||
if (!_.isNil(config.runBefore)) {
|
||||
this.config.runBefore = config.runBefore;
|
||||
}
|
||||
|
||||
if (!_.isNil(config.runAfter)) {
|
||||
this.config.runAfter = config.runAfter;
|
||||
}
|
||||
|
||||
this.render();
|
||||
};
|
||||
|
||||
configChanged = (newConfig: any): void => {
|
||||
const event: any = new Event('config-changed', {
|
||||
bubbles: true,
|
||||
composed: true
|
||||
});
|
||||
event.detail = { config: newConfig };
|
||||
this.dispatchEvent(event);
|
||||
};
|
||||
|
||||
set hass(hass: HomeAssistant) {
|
||||
this.hassObj = hass;
|
||||
}
|
||||
}
|
||||
export default PlexMeetsHomeAssistantEditor;
|
||||
Loading…
Reference in new issue