Merge pull request #22 from JurajNyiri/2.0

2.0
pull/30/head
Juraj Nyíri 3 years ago committed by GitHub
commit e4dc6919fc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -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>
![Click on add integration in integrations](images/kodi_setup/1.png)
![Find integration Kodi Media Sensors](images/kodi_setup/2.png)
![Configure integration Kodi Media Sensors](images/kodi_setup/3.png)
</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
![Plex cast](images/plex_player/1.png)
- 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
```

@ -2,7 +2,7 @@
Custom Home Assistant card which integrates plex into Home Assistant and makes it possible to launch movies or tv shows on TV with a simple click. Custom Home Assistant card which integrates plex into Home Assistant and makes it possible to launch movies or tv shows on TV with a simple click.
Supported are **ALL** Plex clients, some even with enhanced functionality. Kodi with PlexKodiConnect and Google Cast is also supported. Supported are **ALL** Plex clients, some even with enhanced functionality. Kodi with PlexKodiConnect, Android TV and Google Cast is also supported.
Video of the card: Video of the card:
@ -19,421 +19,28 @@ More images [at the end of the readme](https://github.com/JurajNyiri/PlexMeetsHo
- Install **Plex Meets Home Assistant** from HACS. - Install **Plex Meets Home Assistant** from HACS.
- Reload browser, clear cache as usual - Reload browser, clear cache as usual
- Create a new Home Assistant tab, turn on panel mode - Create a new Home Assistant tab, turn on panel mode
- Add a new card, see configuration below. - Add a card by clicking Add Card in your lovelace edit mode and finding "Custom: Plex Meets Home Assistant"
## Configuration ## Configuration
**type**: 'custom:plex-meets-homeassistant' You can use UI to configure your card which will automatically load up your libraries and entities. If you wish, you can use card code to configure everything manually. See [Detailed Configuration](DETAILED_CONFIGURATION.md) if you wish to see a lot more information about every property of the card.
**token**: Enter your [Plex Token](https://support.plex.tv/articles/204059436-finding-an-authentication-token-x-plex-token/) Supported target devices are all entities from integrations [Android TV](https://www.home-assistant.io/integrations/androidtv/), [Kodi](https://www.home-assistant.io/integrations/kodi/), [Google Cast](https://www.home-assistant.io/integrations/cast/) and any other Plex player available for casting through Plex web interface.
**ip**: Enter ip address of plex server. You can also enter hostname without protocol or port. ### Regarding "all other plex players" without entities
**libraryName**: Name of the library you wish to render. In order for devices which do not have entities to be detected, they need to have plex app running when configuring the card or trying to play content.
_Available special libraries:_ If you are trying to play content on a local device from a remote Plex server **or** trying to play local Plex content on a remote device, you need to configure identifier and server for this device. This can only be done manually through card code configuration. See [Detailed Configuration - All other plex clients](DETAILED_CONFIGURATION.md#all-other-plex-clients). You can still use UI to edit anything else except entities while manually using plexPlayer key in entities.
| Special Library | Description | ![Configuration via UI](images/ui_configuration.png)
| ----------------- | --------------------------------------------------------------------------------------------------------------------------- |
| 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. ### Quick guides:
- **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. - [Guide How to get Plex Token](https://support.plex.tv/articles/204059436-finding-an-authentication-token-x-plex-token/)
- **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. - Play icon will only show up when playing is possible.
- **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. - Kodi entities will only work if you are using [PlexKodiConnect](https://github.com/croneter/PlexKodiConnect#download-and-installation) and [Kodi Recently Added Media](https://github.com/jtbgroup/kodi-media-sensors#installation) is installed. See [detailed instructions](DETAILED_CONFIGURATION.md#kodi)
- **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. - If you have Plex integration set up, Plex player is used for cast entities. Otherwise media is casted as a file.
**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
**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>
![Click on add integration in integrations](https://github.com/JurajNyiri/PlexMeetsHomeAssistant/blob/main/images/kodi_setup/1.png)
![Find integration Kodi Media Sensors](https://github.com/JurajNyiri/PlexMeetsHomeAssistant/blob/main/images/kodi_setup/2.png)
![Configure integration Kodi Media Sensors](https://github.com/JurajNyiri/PlexMeetsHomeAssistant/blob/main/images/kodi_setup/3.png)
</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
![Plex cast](https://github.com/JurajNyiri/PlexMeetsHomeAssistant/blob/main/images/plex_player/1.png)
- 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
```
## Sorting
You can use _:desc_ or _:asc_ after every value to change the order from ascending to descending. For example, titlesort would become titleSort:asc, or titleSort:desc.
### TV Shows
| Sort Value | Description |
| --------------------- | ------------------------------------------------- |
| titleSort | Sorts by title, removing words like "the" |
| title | Sorts by title, without removing words like "the" |
| year | Sorts by year |
| originallyAvailableAt | Sorts by release date |
| rating | Sorts by critic rating |
| audienceRating | Sorts by audience rating |
| userRating | Sorts by user rating |
| contentRating | Sorts by content rating |
| unviewedLeafCount | Sorts by unplayed count |
| episode.addedAt | Sorts by last episode date added |
| addedAt | Sorts by date added |
| lastViewedAt | Sorts by date viewed |
### Movies
| Sort Value | Description |
| --------------------- | ------------------------------------------------- |
| titleSort | Sorts by title, removing words like "the" |
| title | Sorts by title, without removing words like "the" |
| originallyAvailableAt | Sorts by release date |
| rating | Sorts by critic rating |
| audienceRating | Sorts by audience rating |
| userRating | Sorts by user rating |
| duration | Sorts by duration |
| viewOffset | Sorts by progress |
| viewCount | Sorts by plays |
| addedAt | Sorts by date added |
| lastViewedAt | Sorts by date viewed |
| mediaHeight | Sorts by resolution |
| mediaBitrate | Sorts by bitrate |
## FAQ
<details>
<summary>I am using plexPlayer and nothing happens when play button is pressed</summary>
- Make sure that your device is turned on, and has Plex running
- Reload tab
- Try hitting play button again
If it still doesn't work and everything else works, you are probably encountering CORS issue. You can check this by opening developer tools and looking into console log or network tab.
The reason why this is happening only for this call is right now unknown, but there is a workaround.
Edit configuration.yaml of your Home Assistant and add following rest_command:
```
rest_command:
pmha_playmedia:
url: "{{ url }}"
headers:
X-Plex-Target-Client-Identifier: "{{ target_client_identifier }}"
X-Plex-Client-Identifier: "{{ client_identifier }}"
```
Restart Home Assistant, clear browser cache and try hitting play again. It should now work.
</details>
## Ask for help or help development ## Ask for help or help development
@ -441,11 +48,11 @@ Join [Discord](https://discord.gg/jqqz9jQXWx) or [Home Assistant Community](http
## Images ## Images
![View without hover](https://github.com/JurajNyiri/PlexMeetsHomeAssistant/blob/main/images/design_preview/1.png) ![View without hover](images/design_preview/1.png)
![View with hover](https://github.com/JurajNyiri/PlexMeetsHomeAssistant/blob/main/images/design_preview/2.png) ![View with hover](images/design_preview/2.png)
![Expanded movie view](https://github.com/JurajNyiri/PlexMeetsHomeAssistant/blob/main/images/design_preview/3.png) ![Expanded movie view](images/design_preview/3.png)
# Want to buy me a beer? # Want to buy me a beer?

@ -18909,16 +18909,17 @@ class PlayController {
break; break;
case 'cast': case 'cast':
if (this.hass.services.plex) { if (this.hass.services.plex) {
try {
switch (data.type) { switch (data.type) {
case 'movie': case 'movie':
this.playViaCastPlex(entity.value, 'movie', `plex://${JSON.stringify({ await this.playViaCastPlex(entity.value, 'movie', `plex://${JSON.stringify({
// eslint-disable-next-line @typescript-eslint/camelcase // eslint-disable-next-line @typescript-eslint/camelcase
library_name: data.librarySectionTitle, library_name: data.librarySectionTitle,
title: data.title title: data.title
})}`); })}`);
break; break;
case 'episode': case 'episode':
this.playViaCastPlex(entity.value, 'EPISODE', `plex://${JSON.stringify({ await this.playViaCastPlex(entity.value, 'EPISODE', `plex://${JSON.stringify({
// eslint-disable-next-line @typescript-eslint/camelcase // eslint-disable-next-line @typescript-eslint/camelcase
library_name: data.librarySectionTitle, library_name: data.librarySectionTitle,
// eslint-disable-next-line @typescript-eslint/camelcase // eslint-disable-next-line @typescript-eslint/camelcase
@ -18933,6 +18934,11 @@ class PlayController {
this.playViaCast(entity.value, data.Media[0].Part[0].key); this.playViaCast(entity.value, data.Media[0].Part[0].key);
} }
} }
catch (err) {
console.log(err);
this.playViaCast(entity.value, data.Media[0].Part[0].key);
}
}
else { else {
this.playViaCast(entity.value, data.Media[0].Part[0].key); this.playViaCast(entity.value, data.Media[0].Part[0].key);
} }
@ -19070,7 +19076,7 @@ class PlayController {
}); });
}; };
this.playViaCastPlex = (entityName, contentType, mediaLink) => { this.playViaCastPlex = (entityName, contentType, mediaLink) => {
this.hass.callService('media_player', 'play_media', { return this.hass.callService('media_player', 'play_media', {
// eslint-disable-next-line @typescript-eslint/camelcase // eslint-disable-next-line @typescript-eslint/camelcase
entity_id: entityName, entity_id: entityName,
// eslint-disable-next-line @typescript-eslint/camelcase // eslint-disable-next-line @typescript-eslint/camelcase
@ -19238,7 +19244,6 @@ class PlayController {
} }
} }
/* eslint-disable @typescript-eslint/no-explicit-any */
// eslint-disable-next-line @typescript-eslint/no-explicit-any // eslint-disable-next-line @typescript-eslint/no-explicit-any
const escapeHtml = (unsafe) => { const escapeHtml = (unsafe) => {
if (unsafe) { if (unsafe) {
@ -19252,6 +19257,9 @@ const escapeHtml = (unsafe) => {
} }
return ''; return '';
}; };
const fetchEntityRegistry = (conn) => conn.sendMessagePromise({
type: 'config/entity_registry/list'
});
const getHeight = (el) => { const getHeight = (el) => {
const height = Math.max(el.scrollHeight, el.offsetHeight, el.clientHeight, el.scrollHeight, el.offsetHeight); const height = Math.max(el.scrollHeight, el.offsetHeight, el.clientHeight, el.scrollHeight, el.offsetHeight);
return height; return height;
@ -19438,6 +19446,554 @@ const isScrolledIntoView = (elem) => {
return isVisible; return isVisible;
}; };
/* eslint-disable @typescript-eslint/no-explicit-any */
class PlexMeetsHomeAssistantEditor extends HTMLElement {
constructor() {
super(...arguments);
this.plexPort = false;
this.plexProtocol = 'http';
this.config = {};
this.ip = document.createElement('paper-input');
this.token = document.createElement('paper-input');
this.port = document.createElement('paper-input');
this.maxCount = document.createElement('paper-input');
this.libraryName = document.createElement('paper-dropdown-menu');
this.protocol = document.createElement('paper-dropdown-menu');
this.tabs = document.createElement('paper-tabs');
this.sort = document.createElement('paper-dropdown-menu');
this.sortOrder = document.createElement('paper-dropdown-menu');
this.playTrailer = document.createElement('paper-dropdown-menu');
this.showExtras = document.createElement('paper-dropdown-menu');
this.showSearch = document.createElement('paper-dropdown-menu');
this.runBefore = document.createElement('paper-dropdown-menu');
this.runAfter = document.createElement('paper-dropdown-menu');
this.entitiesSection = document.createElement('div');
this.devicesTabs = 0;
this.entities = [];
this.scriptEntities = [];
this.sections = [];
this.clients = {};
this.entitiesRegistry = false;
this.plexValidSection = document.createElement('div');
this.loaded = false;
this.fireEvent = (node, type, detail, options = {}) => {
// eslint-disable-next-line no-param-reassign
detail = detail === null || detail === undefined ? {} : detail;
const event = 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;
};
this.valueUpdated = () => {
if (this.loaded) {
const originalConfig = lodash.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 (!lodash.isEmpty(this.libraryName.value)) {
this.config.libraryName = this.libraryName.value;
let sortOrderValue = '';
if (lodash.isEqual(this.sortOrder.value, 'Ascending')) {
sortOrderValue = 'asc';
}
else if (lodash.isEqual(this.sortOrder.value, 'Descending')) {
sortOrderValue = 'desc';
}
if (!lodash.isEmpty(sortOrderValue) && !lodash.isEmpty(this.sort.value)) {
this.config.sort = `${this.sort.value}:${sortOrderValue}`;
}
else {
this.config.sort = ``;
}
if (lodash.isEmpty(this.maxCount.value)) {
this.config.maxCount = '';
}
else {
this.config.maxCount = this.maxCount.value;
}
if (!lodash.isEmpty(this.entities)) {
this.config.entity = [];
lodash.forEach(this.entities, entity => {
if (!lodash.isEmpty(entity.value) && !lodash.includes(this.config.entity, entity.value)) {
this.config.entity.push(entity.value);
}
});
}
if (lodash.isEqual(this.playTrailer.value, 'Yes')) {
this.config.playTrailer = true;
}
else if (lodash.isEqual(this.playTrailer.value, 'No')) {
this.config.playTrailer = false;
}
else if (lodash.isEqual(this.playTrailer.value, 'Muted')) {
this.config.playTrailer = 'muted';
}
if (lodash.isEqual(this.showExtras.value, 'Yes')) {
this.config.showExtras = true;
}
else if (lodash.isEqual(this.showExtras.value, 'No')) {
this.config.showExtras = false;
}
if (lodash.isEqual(this.showSearch.value, 'Yes')) {
this.config.showSearch = true;
}
else if (lodash.isEqual(this.showSearch.value, 'No')) {
this.config.showSearch = false;
}
this.config.runBefore = this.runBefore.value;
this.config.runAfter = this.runAfter.value;
}
if (!lodash.isEqual(this.config, originalConfig)) {
this.fireEvent(this, 'config-changed', { config: this.config });
}
}
};
this.render = async () => {
const addDropdownItem = (text) => {
const libraryItem = document.createElement('paper-item');
libraryItem.innerHTML = text;
return libraryItem;
};
const createEntitiesDropdown = (selected, changeHandler) => {
if (this.entitiesRegistry) {
const entitiesDropDown = document.createElement('paper-dropdown-menu');
const entities = document.createElement('paper-listbox');
entities.appendChild(addDropdownItem(''));
const addedEntityStrings = [];
lodash.forEach(this.entitiesRegistry, entityRegistry => {
if (lodash.isEqual(entityRegistry.platform, 'cast') ||
lodash.isEqual(entityRegistry.platform, 'kodi') ||
lodash.isEqual(entityRegistry.platform, 'androidtv')) {
const entityName = `${entityRegistry.platform} | ${entityRegistry.entity_id}`;
entities.appendChild(addDropdownItem(entityName));
addedEntityStrings.push(entityName);
}
});
lodash.forEach(this.clients, value => {
const entityName = `plexPlayer | ${value.name} | ${value.address} | ${value.machineIdentifier}`;
entities.appendChild(addDropdownItem(entityName));
addedEntityStrings.push(entityName);
});
if (lodash.isArray(this.config.entity)) {
lodash.forEach(this.config.entity, value => {
if (!lodash.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) {
lodash.forOwn(this.hassObj.states, (value, key) => {
if (lodash.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 = 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 (lodash.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 = 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 (lodash.isArray(this.config.entity)) {
// eslint-disable-next-line consistent-return
lodash.forEach(this.config.entity, entity => {
if (lodash.isObjectLike(entity)) {
canConvert = !lodash.includes(lodash.keys(this.config.entity), 'plexPlayer');
hasUIConfig = false;
return false;
}
});
}
else if (lodash.isObjectLike(this.config.entity)) {
canConvert = !lodash.includes(lodash.keys(this.config.entity), 'plexPlayer');
hasUIConfig = false;
if (canConvert) {
const convertedEntities = [];
hasUIConfig = true;
if (lodash.isObjectLike(this.config.entity)) {
lodash.forOwn(this.config.entity, value => {
if (lodash.isString(value)) {
convertedEntities.push(value);
}
else if (lodash.isArray(value)) {
lodash.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 (lodash.isString(this.config.entity)) {
this.config.entity = [this.config.entity];
}
if (lodash.isArray(this.config.entity)) {
lodash.forEach(this.config.entity, entity => {
if (lodash.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 = 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 = 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 (lodash.isEmpty(this.config.sort)) {
this.sortOrder.value = 'Ascending';
}
else {
const sortOrder = this.config.sort.split(':')[1];
if (lodash.isEmpty(sortOrder)) {
this.sortOrder.value = 'Ascending';
}
else if (lodash.isEqual(sortOrder, 'asc')) {
this.sortOrder.value = 'Ascending';
}
else if (lodash.isEqual(sortOrder, 'desc')) {
this.sortOrder.value = 'Descending';
}
}
this.plexValidSection.appendChild(this.sortOrder);
this.playTrailer.innerHTML = '';
const playTrailerItems = 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 (lodash.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 = 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 = 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 = document.createElement('paper-listbox');
runBeforeItems.appendChild(addDropdownItem(''));
lodash.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 = document.createElement('paper-listbox');
runAfterItems.appendChild(addDropdownItem(''));
lodash.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 (!lodash.isEmpty(this.sections)) {
lodash.forEach(this.sections, (section) => {
libraryItems.appendChild(addDropdownItem(section.title));
});
this.libraryName.disabled = false;
this.libraryName.value = this.config.libraryName;
let libraryType = '';
// eslint-disable-next-line consistent-return
lodash.forEach(this.sections, section => {
if (lodash.isEqual(section.title, this.libraryName.value)) {
libraryType = section.type;
return false;
}
});
if (lodash.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 (lodash.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 (lodash.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 (lodash.isEmpty(sortOrder)) {
this.sortOrder.value = 'Ascending';
}
else if (lodash.isEqual(sortOrder, 'asc')) {
this.sortOrder.value = 'Ascending';
}
else if (lodash.isEqual(sortOrder, 'desc')) {
this.sortOrder.value = 'Descending';
}
}
this.plexValidSection.style.display = 'block';
}
this.loaded = true;
this.content.appendChild(this.plexValidSection);
};
this.setConfig = (config) => {
this.config = JSON.parse(JSON.stringify(config));
if (config.port && !lodash.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 (!lodash.isNil(config.playTrailer)) {
this.config.playTrailer = config.playTrailer;
}
else {
this.config.playTrailer = true;
}
if (!lodash.isNil(config.showExtras)) {
this.config.showExtras = config.showExtras;
}
else {
this.config.showExtras = true;
}
if (!lodash.isNil(config.showSearch)) {
this.config.showSearch = config.showSearch;
}
else {
this.config.showSearch = true;
}
if (!lodash.isNil(config.runBefore)) {
this.config.runBefore = config.runBefore;
}
if (!lodash.isNil(config.runAfter)) {
this.config.runAfter = config.runAfter;
}
this.render();
};
this.configChanged = (newConfig) => {
const event = new Event('config-changed', {
bubbles: true,
composed: true
});
event.detail = { config: newConfig };
this.dispatchEvent(event);
};
}
set hass(hass) {
this.hassObj = hass;
}
}
/** /**
* @license * @license
* Copyright (c) 2017 The Polymer Project Authors. All rights reserved. * Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
@ -20153,6 +20709,7 @@ style.textContent = css `
class PlexMeetsHomeAssistant extends HTMLElement { class PlexMeetsHomeAssistant extends HTMLElement {
constructor() { constructor() {
super(...arguments); super(...arguments);
this.searchInputElem = document.createElement('input');
this.plexProtocol = 'http'; this.plexProtocol = 'http';
this.plexPort = false; this.plexPort = false;
this.detailsShown = false; this.detailsShown = false;
@ -20160,6 +20717,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
this.runBefore = ''; this.runBefore = '';
this.playTrailer = true; this.playTrailer = true;
this.showExtras = true; this.showExtras = true;
this.showSearch = true;
this.previousPageWidth = 0; this.previousPageWidth = 0;
this.runAfter = ''; this.runAfter = '';
this.columnsCount = 0; this.columnsCount = 0;
@ -20180,6 +20738,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
this.maxCount = false; this.maxCount = false;
this.error = ''; this.error = '';
this.contentBGHeight = 0; this.contentBGHeight = 0;
this.initialDataLoaded = false;
this.renderNewElementsIfNeeded = () => { this.renderNewElementsIfNeeded = () => {
const loadAdditionalRowsCount = 2; // todo: make this configurable const loadAdditionalRowsCount = 2; // todo: make this configurable
const height = getHeight(this.content); const height = getHeight(this.content);
@ -20191,54 +20750,9 @@ class PlexMeetsHomeAssistant extends HTMLElement {
this.calculatePositions(); this.calculatePositions();
} }
}; };
this.fetchEntityRegistry = (conn) => conn.sendMessagePromise({
type: 'config/entity_registry/list'
});
this.loadInitialData = async () => { this.loadInitialData = async () => {
if (this.hassObj) { if (this.hassObj) {
this.entityRegistry = await this.fetchEntityRegistry(this.hassObj.connection); this.entityRegistry = await fetchEntityRegistry(this.hassObj.connection);
}
let { entity } = JSON.parse(JSON.stringify(this.config));
const processEntity = (entityObj, entityString) => {
lodash.forEach(this.entityRegistry, entityInRegister => {
if (lodash.isEqual(entityInRegister.entity_id, entityString)) {
switch (entityInRegister.platform) {
case 'cast':
if (lodash.isNil(entityObj.cast)) {
// eslint-disable-next-line no-param-reassign
entityObj.cast = [];
}
entityObj.cast.push(entityInRegister.entity_id);
break;
case 'androidtv':
if (lodash.isNil(entityObj.androidtv)) {
// eslint-disable-next-line no-param-reassign
entityObj.androidtv = [];
}
entityObj.androidtv.push(entityInRegister.entity_id);
break;
case 'kodi':
if (lodash.isNil(entityObj.kodi)) {
// eslint-disable-next-line no-param-reassign
entityObj.kodi = [];
}
entityObj.kodi.push(entityInRegister.entity_id);
break;
// pass
}
}
});
};
const entityOrig = entity;
if (lodash.isString(entityOrig)) {
entity = {};
processEntity(entity, entityOrig);
}
else if (lodash.isArray(entityOrig)) {
entity = {};
lodash.forEach(entityOrig, entityStr => {
processEntity(entity, entityStr);
});
} }
window.addEventListener('scroll', () => { window.addEventListener('scroll', () => {
// todo: improve performance by calculating this when needed only // todo: improve performance by calculating this when needed only
@ -20302,16 +20816,85 @@ class PlexMeetsHomeAssistant extends HTMLElement {
if (this.card) { if (this.card) {
this.previousPageWidth = this.card.offsetWidth; this.previousPageWidth = this.card.offsetWidth;
} }
this.resizeBackground();
this.initialDataLoaded = true;
};
this.renderInitialData = async () => {
let { entity } = JSON.parse(JSON.stringify(this.config));
const processEntity = (entityObj, entityString) => {
let realEntityString = entityString;
let isPlexPlayer = false;
if (lodash.startsWith(entityString, 'plexPlayer | ')) {
// eslint-disable-next-line prefer-destructuring
realEntityString = entityString.split(' | ')[3];
isPlexPlayer = true;
}
else if (lodash.startsWith(entityString, 'androidtv | ') ||
lodash.startsWith(entityString, 'kodi | ') ||
lodash.startsWith(entityString, 'cast | ')) {
// eslint-disable-next-line prefer-destructuring
realEntityString = entityString.split(' | ')[1];
isPlexPlayer = false;
}
if (isPlexPlayer) {
if (lodash.isNil(entityObj.plexPlayer)) {
// eslint-disable-next-line no-param-reassign
entityObj.plexPlayer = [];
}
entityObj.plexPlayer.push(realEntityString);
}
else {
lodash.forEach(this.entityRegistry, entityInRegister => {
if (lodash.isEqual(entityInRegister.entity_id, realEntityString)) {
switch (entityInRegister.platform) {
case 'cast':
if (lodash.isNil(entityObj.cast)) {
// eslint-disable-next-line no-param-reassign
entityObj.cast = [];
}
entityObj.cast.push(entityInRegister.entity_id);
break;
case 'androidtv':
if (lodash.isNil(entityObj.androidtv)) {
// eslint-disable-next-line no-param-reassign
entityObj.androidtv = [];
}
entityObj.androidtv.push(entityInRegister.entity_id);
break;
case 'kodi':
if (lodash.isNil(entityObj.kodi)) {
// eslint-disable-next-line no-param-reassign
entityObj.kodi = [];
}
entityObj.kodi.push(entityInRegister.entity_id);
break;
// pass
}
}
});
}
console.log(realEntityString);
};
const entityOrig = entity;
if (lodash.isString(entityOrig)) {
entity = {};
processEntity(entity, entityOrig);
}
else if (lodash.isArray(entityOrig)) {
entity = {};
lodash.forEach(entityOrig, entityStr => {
processEntity(entity, entityStr);
});
}
console.log(entity);
this.loading = true; this.loading = true;
this.renderPage(); this.renderPage();
try { try {
if (this.plex) { if (this.plex && this.hassObj) {
if (this.hassObj) {
this.playController = new PlayController(this.hassObj, this.plex, entity, this.runBefore, this.runAfter); this.playController = new PlayController(this.hassObj, this.plex, entity, this.runBefore, this.runAfter);
if (this.playController) { if (this.playController) {
await this.playController.init(); await this.playController.init();
} }
}
await this.plex.init(); await this.plex.init();
try { try {
const onDeck = await this.plex.getOnDeck(); const onDeck = await this.plex.getOnDeck();
@ -20387,14 +20970,15 @@ class PlexMeetsHomeAssistant extends HTMLElement {
this.render(); this.render();
} }
else { else {
throw Error('Plex not initialized.'); setTimeout(() => {
this.renderInitialData();
}, 250);
} }
} }
catch (err) { catch (err) {
this.error = `Plex server did not respond.<br/>Details of the error: ${escapeHtml(err.message)}`; this.error = `Plex server did not respond.<br/>Details of the error: ${escapeHtml(err.message)}`;
this.renderPage(); this.renderPage();
} }
this.resizeBackground();
}; };
this.render = () => { this.render = () => {
this.renderPage(); this.renderPage();
@ -20402,17 +20986,17 @@ class PlexMeetsHomeAssistant extends HTMLElement {
this.searchInput = () => { this.searchInput = () => {
const searchContainer = document.createElement('div'); const searchContainer = document.createElement('div');
searchContainer.className = 'searchContainer'; searchContainer.className = 'searchContainer';
const searchInput = document.createElement('input'); this.searchInputElem = document.createElement('input');
searchInput.type = 'text'; this.searchInputElem.type = 'text';
searchInput.value = this.searchValue; this.searchInputElem.value = this.searchValue;
searchInput.placeholder = `Search ${this.config.libraryName}...`; this.searchInputElem.placeholder = `Search ${this.config.libraryName}...`;
searchInput.addEventListener('keyup', () => { this.searchInputElem.addEventListener('keyup', () => {
this.searchValue = searchInput.value; this.searchValue = this.searchInputElem.value;
this.renderPage(); this.renderPage();
this.focus(); this.focus();
this.renderNewElementsIfNeeded(); this.renderNewElementsIfNeeded();
}); });
searchContainer.appendChild(searchInput); searchContainer.appendChild(this.searchInputElem);
return searchContainer; return searchContainer;
}; };
this.renderMovieElems = () => { this.renderMovieElems = () => {
@ -20476,6 +21060,13 @@ class PlexMeetsHomeAssistant extends HTMLElement {
this.contentBGHeight = getHeight(contentbg); this.contentBGHeight = getHeight(contentbg);
}; };
this.renderPage = () => { this.renderPage = () => {
this.searchInputElem.placeholder = `Search ${this.config.libraryName}...`;
if (this.showSearch) {
this.searchInputElem.style.display = 'block';
}
else {
this.searchInputElem.style.display = 'none';
}
if (this.card) { if (this.card) {
const marginRight = 10; // needs to be equal to .container margin right const marginRight = 10; // needs to be equal to .container margin right
const areaSize = this.card.offsetWidth - parseInt(this.card.style.paddingRight, 10) - parseInt(this.card.style.paddingLeft, 10); const areaSize = this.card.offsetWidth - parseInt(this.card.style.paddingRight, 10) - parseInt(this.card.style.paddingLeft, 10);
@ -20503,6 +21094,12 @@ class PlexMeetsHomeAssistant extends HTMLElement {
this.card.style.padding = '16px'; this.card.style.padding = '16px';
this.card.style.paddingRight = '6px'; this.card.style.paddingRight = '6px';
this.card.appendChild(this.searchInput()); this.card.appendChild(this.searchInput());
if (this.showSearch) {
this.searchInputElem.style.display = 'block';
}
else {
this.searchInputElem.style.display = 'none';
}
this.appendChild(this.card); this.appendChild(this.card);
} }
this.content = document.createElement('div'); this.content = document.createElement('div');
@ -21414,6 +22011,15 @@ class PlexMeetsHomeAssistant extends HTMLElement {
}; };
this.setConfig = (config) => { this.setConfig = (config) => {
this.plexProtocol = 'http'; this.plexProtocol = 'http';
if (!config.ip) {
throw new Error('You need to define a Plex IP Address');
}
if (!config.token) {
throw new Error('You need to define a Plex Token');
}
if (!config.libraryName) {
throw new Error('You need to define a libraryName');
}
if (!config.entity || config.entity.length === 0) { if (!config.entity || config.entity.length === 0) {
throw new Error('You need to define at least one entity'); throw new Error('You need to define at least one entity');
} }
@ -21433,29 +22039,23 @@ class PlexMeetsHomeAssistant extends HTMLElement {
else if (!lodash.isString(config.entity) && !lodash.isArray(config.entity)) { else if (!lodash.isString(config.entity) && !lodash.isArray(config.entity)) {
throw new Error('You need to define at least one supported entity'); throw new Error('You need to define at least one supported entity');
} }
if (!config.token) {
throw new Error('You need to define a token');
}
if (!config.ip) {
throw new Error('You need to define a ip');
}
if (!config.libraryName) {
throw new Error('You need to define a libraryName');
}
this.config = config; this.config = config;
if (config.protocol) { if (config.protocol) {
this.plexProtocol = config.protocol; this.plexProtocol = config.protocol;
} }
if (config.port) { if (config.port && !lodash.isEqual(config.port, '')) {
this.plexPort = config.port; this.plexPort = config.port;
} }
if (config.maxCount) { else {
this.plexPort = false;
}
if (config.maxCount && config.maxCount !== '') {
this.maxCount = config.maxCount; this.maxCount = config.maxCount;
} }
if (config.runBefore) { if (config.runBefore && !lodash.isEqual(config.runBefore, '')) {
this.runBefore = config.runBefore; this.runBefore = config.runBefore;
} }
if (config.runAfter) { if (config.runAfter && !lodash.isEqual(config.runAfter, '')) {
this.runAfter = config.runAfter; this.runAfter = config.runAfter;
} }
if (!lodash.isNil(config.playTrailer)) { if (!lodash.isNil(config.playTrailer)) {
@ -21464,7 +22064,13 @@ class PlexMeetsHomeAssistant extends HTMLElement {
if (!lodash.isNil(config.showExtras)) { if (!lodash.isNil(config.showExtras)) {
this.showExtras = config.showExtras; this.showExtras = config.showExtras;
} }
if (!lodash.isNil(config.showSearch)) {
this.showSearch = config.showSearch;
}
this.plex = new Plex(this.config.ip, this.plexPort, this.config.token, this.plexProtocol, this.config.sort); this.plex = new Plex(this.config.ip, this.plexPort, this.config.token, this.plexProtocol, this.config.sort);
this.data = {};
this.error = '';
this.renderInitialData();
}; };
this.getCardSize = () => { this.getCardSize = () => {
return 3; return 3;
@ -21472,12 +22078,20 @@ class PlexMeetsHomeAssistant extends HTMLElement {
} }
set hass(hass) { set hass(hass) {
this.hassObj = hass; this.hassObj = hass;
if (!this.content) { if (!this.initialDataLoaded) {
this.error = '';
if (!this.loading) {
this.loadInitialData(); this.loadInitialData();
} }
} }
static getConfigElement() {
return document.createElement('plex-meets-homeassistant-editor');
} }
} }
customElements.define('plex-meets-homeassistant-editor', PlexMeetsHomeAssistantEditor);
customElements.define('plex-meets-homeassistant', PlexMeetsHomeAssistant); 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
});

Binary file not shown.

After

Width:  |  Height:  |  Size: 488 KiB

258
package-lock.json generated

@ -47,6 +47,259 @@
"tslib": "^2.0.1" "tslib": "^2.0.1"
} }
}, },
"@polymer/font-roboto": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/@polymer/font-roboto/-/font-roboto-3.0.2.tgz",
"integrity": "sha512-tx5TauYSmzsIvmSqepUPDYbs4/Ejz2XbZ1IkD7JEGqkdNUJlh+9KU85G56Tfdk/xjEZ8zorFfN09OSwiMrIQWA=="
},
"@polymer/iron-a11y-announcer": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/@polymer/iron-a11y-announcer/-/iron-a11y-announcer-3.2.0.tgz",
"integrity": "sha512-We+hyaFHcg7Ke8ovsoxUpYEXFIJLHxMCDaLehTB4dELS+C+K0zMnGSiqQvb/YzGS+nSYpAfkQIyg1msOCdHMtA==",
"requires": {
"@polymer/polymer": "^3.0.0"
}
},
"@polymer/iron-a11y-keys-behavior": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/@polymer/iron-a11y-keys-behavior/-/iron-a11y-keys-behavior-3.0.1.tgz",
"integrity": "sha512-lnrjKq3ysbBPT/74l0Fj0U9H9C35Tpw2C/tpJ8a+5g8Y3YJs1WSZYnEl1yOkw6sEyaxOq/1DkzH0+60gGu5/PQ==",
"requires": {
"@polymer/polymer": "^3.0.0"
}
},
"@polymer/iron-autogrow-textarea": {
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/@polymer/iron-autogrow-textarea/-/iron-autogrow-textarea-3.0.3.tgz",
"integrity": "sha512-5r0VkWrIlm0JIp5E5wlnvkw7slK72lFRZXncmrsLZF+6n1dg2rI8jt7xpFzSmUWrqpcyXwyKaGaDvUjl3j4JLA==",
"requires": {
"@polymer/iron-behaviors": "^3.0.0-pre.26",
"@polymer/iron-flex-layout": "^3.0.0-pre.26",
"@polymer/iron-validatable-behavior": "^3.0.0-pre.26",
"@polymer/polymer": "^3.0.0"
}
},
"@polymer/iron-behaviors": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/@polymer/iron-behaviors/-/iron-behaviors-3.0.1.tgz",
"integrity": "sha512-IMEwcv1lhf1HSQxuyWOUIL0lOBwmeaoSTpgCJeP9IBYnuB1SPQngmfRuHKgK6/m9LQ9F9miC7p3HeQQUdKAE0w==",
"requires": {
"@polymer/iron-a11y-keys-behavior": "^3.0.0-pre.26",
"@polymer/polymer": "^3.0.0"
}
},
"@polymer/iron-checked-element-behavior": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/@polymer/iron-checked-element-behavior/-/iron-checked-element-behavior-3.0.1.tgz",
"integrity": "sha512-aDr0cbCNVq49q+pOqa6CZutFh+wWpwPMLpEth9swx+GkAj+gCURhuQkaUYhIo5f2egDbEioR1aeHMnPlU9dQZA==",
"requires": {
"@polymer/iron-form-element-behavior": "^3.0.0-pre.26",
"@polymer/iron-validatable-behavior": "^3.0.0-pre.26",
"@polymer/polymer": "^3.0.0"
}
},
"@polymer/iron-dropdown": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/@polymer/iron-dropdown/-/iron-dropdown-3.0.1.tgz",
"integrity": "sha512-22yLhepfcKjuQMfFmRHi/9MPKTqkzgRrmWWW0P5uqK++xle53k2QBO5VYUAYiCN3ZcxIi9lEhZ9YWGeQj2JBig==",
"requires": {
"@polymer/iron-behaviors": "^3.0.0-pre.26",
"@polymer/iron-overlay-behavior": "^3.0.0-pre.27",
"@polymer/neon-animation": "^3.0.0-pre.26",
"@polymer/polymer": "^3.0.0"
}
},
"@polymer/iron-fit-behavior": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/@polymer/iron-fit-behavior/-/iron-fit-behavior-3.1.0.tgz",
"integrity": "sha512-ABcgIYqrjhmUT8tiuolqeGttF/8pd3sEymUDrO1vXbZu4FWIvoLNndrMDFvs++AGd12Mjf5pYy84NJc6dB8Vig==",
"requires": {
"@polymer/polymer": "^3.0.0"
}
},
"@polymer/iron-flex-layout": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/@polymer/iron-flex-layout/-/iron-flex-layout-3.0.1.tgz",
"integrity": "sha512-7gB869czArF+HZcPTVSgvA7tXYFze9EKckvM95NB7SqYF+NnsQyhoXgKnpFwGyo95lUjUW9TFDLUwDXnCYFtkw==",
"requires": {
"@polymer/polymer": "^3.0.0"
}
},
"@polymer/iron-form-element-behavior": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/@polymer/iron-form-element-behavior/-/iron-form-element-behavior-3.0.1.tgz",
"integrity": "sha512-G/e2KXyL5AY7mMjmomHkGpgS0uAf4ovNpKhkuUTRnMuMJuf589bKqE85KN4ovE1Tzhv2hJoh/igyD6ekHiYU1A==",
"requires": {
"@polymer/polymer": "^3.0.0"
}
},
"@polymer/iron-icon": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/@polymer/iron-icon/-/iron-icon-3.0.1.tgz",
"integrity": "sha512-QLPwirk+UPZNaLnMew9VludXA4CWUCenRewgEcGYwdzVgDPCDbXxy6vRJjmweZobMQv/oVLppT2JZtJFnPxX6g==",
"requires": {
"@polymer/iron-flex-layout": "^3.0.0-pre.26",
"@polymer/iron-meta": "^3.0.0-pre.26",
"@polymer/polymer": "^3.0.0"
}
},
"@polymer/iron-iconset-svg": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/@polymer/iron-iconset-svg/-/iron-iconset-svg-3.0.1.tgz",
"integrity": "sha512-XNwURbNHRw6u2fJe05O5fMYye6GSgDlDqCO+q6K1zAnKIrpgZwf2vTkBd5uCcZwsN0FyCB3mvNZx4jkh85dRDw==",
"requires": {
"@polymer/iron-meta": "^3.0.0-pre.26",
"@polymer/polymer": "^3.0.0"
}
},
"@polymer/iron-input": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/@polymer/iron-input/-/iron-input-3.0.1.tgz",
"integrity": "sha512-WLx13kEcbH9GKbj9+pWR6pbJkA5kxn3796ynx6eQd2rueMyUfVTR3GzOvadBKsciUuIuzrxpBWZ2+3UcueVUQQ==",
"requires": {
"@polymer/iron-a11y-announcer": "^3.0.0-pre.26",
"@polymer/iron-validatable-behavior": "^3.0.0-pre.26",
"@polymer/polymer": "^3.0.0"
}
},
"@polymer/iron-meta": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/@polymer/iron-meta/-/iron-meta-3.0.1.tgz",
"integrity": "sha512-pWguPugiLYmWFV9UWxLWzZ6gm4wBwQdDy4VULKwdHCqR7OP7u98h+XDdGZsSlDPv6qoryV/e3tGHlTIT0mbzJA==",
"requires": {
"@polymer/polymer": "^3.0.0"
}
},
"@polymer/iron-overlay-behavior": {
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/@polymer/iron-overlay-behavior/-/iron-overlay-behavior-3.0.3.tgz",
"integrity": "sha512-Q/Fp0+uOQQ145ebZ7T8Cxl4m1tUKYjyymkjcL2rXUm+aDQGb1wA1M1LYxUF5YBqd+9lipE0PTIiYwA2ZL/sznA==",
"requires": {
"@polymer/iron-a11y-keys-behavior": "^3.0.0-pre.26",
"@polymer/iron-fit-behavior": "^3.0.0-pre.26",
"@polymer/iron-resizable-behavior": "^3.0.0-pre.26",
"@polymer/polymer": "^3.0.0"
}
},
"@polymer/iron-resizable-behavior": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/@polymer/iron-resizable-behavior/-/iron-resizable-behavior-3.0.1.tgz",
"integrity": "sha512-FyHxRxFspVoRaeZSWpT3y0C9awomb4tXXolIJcZ7RvXhMP632V5lez+ch5G5SwK0LpnAPkg35eB0LPMFv+YMMQ==",
"requires": {
"@polymer/polymer": "^3.0.0"
}
},
"@polymer/iron-selector": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/@polymer/iron-selector/-/iron-selector-3.0.1.tgz",
"integrity": "sha512-sBVk2uas6prW0glUe2xEJJYlvxmYzM40Au9OKbfDK2Qekou/fLKcBRyIYI39kuI8zWRaip8f3CI8qXcUHnKb1A==",
"requires": {
"@polymer/polymer": "^3.0.0"
}
},
"@polymer/iron-validatable-behavior": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/@polymer/iron-validatable-behavior/-/iron-validatable-behavior-3.0.1.tgz",
"integrity": "sha512-wwpYh6wOa4fNI+jH5EYKC7TVPYQ2OfgQqocWat7GsNWcsblKYhLYbwsvEY5nO0n2xKqNfZzDLrUom5INJN7msQ==",
"requires": {
"@polymer/iron-meta": "^3.0.0-pre.26",
"@polymer/polymer": "^3.0.0"
}
},
"@polymer/neon-animation": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/@polymer/neon-animation/-/neon-animation-3.0.1.tgz",
"integrity": "sha512-cDDc0llpVCe0ATbDS3clDthI54Bc8YwZIeTGGmBJleKOvbRTUC5+ssJmRL+VwVh+VM5FlnQlx760ppftY3uprg==",
"requires": {
"@polymer/iron-resizable-behavior": "^3.0.0-pre.26",
"@polymer/iron-selector": "^3.0.0-pre.26",
"@polymer/polymer": "^3.0.0"
}
},
"@polymer/paper-behaviors": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/@polymer/paper-behaviors/-/paper-behaviors-3.0.1.tgz",
"integrity": "sha512-6knhj69fPJejv8qR0kCSUY+Q0XjaUf0OSnkjRjmTJPAwSrRYtgqE+l6P1FfA+py1X/cUjgne9EF5rMZAKJIg1g==",
"requires": {
"@polymer/iron-behaviors": "^3.0.0-pre.26",
"@polymer/iron-checked-element-behavior": "^3.0.0-pre.26",
"@polymer/paper-ripple": "^3.0.0-pre.26",
"@polymer/polymer": "^3.0.0"
}
},
"@polymer/paper-dropdown-menu": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/@polymer/paper-dropdown-menu/-/paper-dropdown-menu-3.2.0.tgz",
"integrity": "sha512-2ohwSHF+RLSK6kA0UkkMiMQF6EZcaEYWAA25kfisI6DWie7yozKrpQNsqvwfOEHU6DdDMIotrOtH1TM88YS8Zg==",
"requires": {
"@polymer/iron-a11y-keys-behavior": "^3.0.0-pre.26",
"@polymer/iron-form-element-behavior": "^3.0.0-pre.26",
"@polymer/iron-icon": "^3.0.0-pre.26",
"@polymer/iron-iconset-svg": "^3.0.0-pre.26",
"@polymer/iron-validatable-behavior": "^3.0.0-pre.26",
"@polymer/paper-behaviors": "^3.0.0-pre.27",
"@polymer/paper-input": "^3.1.0",
"@polymer/paper-menu-button": "^3.1.0",
"@polymer/paper-ripple": "^3.0.0-pre.26",
"@polymer/paper-styles": "^3.0.0-pre.26",
"@polymer/polymer": "^3.3.1"
}
},
"@polymer/paper-input": {
"version": "3.2.1",
"resolved": "https://registry.npmjs.org/@polymer/paper-input/-/paper-input-3.2.1.tgz",
"integrity": "sha512-6ghgwQKM6mS0hAQxQqj+tkeEY1VUBqAsrasAm8V5RpNcfSWQC/hhRFxU0beGuKTAhndzezDzWYP6Zz4b8fExGg==",
"requires": {
"@polymer/iron-a11y-keys-behavior": "^3.0.0-pre.26",
"@polymer/iron-autogrow-textarea": "^3.0.0-pre.26",
"@polymer/iron-behaviors": "^3.0.0-pre.26",
"@polymer/iron-form-element-behavior": "^3.0.0-pre.26",
"@polymer/iron-input": "^3.0.0-pre.26",
"@polymer/paper-styles": "^3.0.0-pre.26",
"@polymer/polymer": "^3.0.0"
}
},
"@polymer/paper-menu-button": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/@polymer/paper-menu-button/-/paper-menu-button-3.1.0.tgz",
"integrity": "sha512-q0G0/rvYD/FFmIBMGCQWjfXzRqwFw9+WHSYV4uOQzM1Ln8LMXSAd+2CENsbVwtMh6fmBePj15ZlU8SM2dt1WDQ==",
"requires": {
"@polymer/iron-a11y-keys-behavior": "^3.0.0-pre.26",
"@polymer/iron-behaviors": "^3.0.0-pre.26",
"@polymer/iron-dropdown": "^3.0.0-pre.26",
"@polymer/iron-fit-behavior": "^3.1.0",
"@polymer/neon-animation": "^3.0.0-pre.26",
"@polymer/paper-styles": "^3.0.0-pre.26",
"@polymer/polymer": "^3.0.0"
}
},
"@polymer/paper-ripple": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/@polymer/paper-ripple/-/paper-ripple-3.0.2.tgz",
"integrity": "sha512-DnLNvYIMsiayeICroYxx6Q6Hg1cUU8HN2sbutXazlemAlGqdq80qz3TIaVdbpbt/pvjcFGX2HtntMlPstCge8Q==",
"requires": {
"@polymer/iron-a11y-keys-behavior": "^3.0.0-pre.26",
"@polymer/polymer": "^3.0.0"
}
},
"@polymer/paper-styles": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/@polymer/paper-styles/-/paper-styles-3.0.1.tgz",
"integrity": "sha512-y6hmObLqlCx602TQiSBKHqjwkE7xmDiFkoxdYGaNjtv4xcysOTdVJsDR/R9UHwIaxJ7gHlthMSykir1nv78++g==",
"requires": {
"@polymer/font-roboto": "^3.0.1",
"@polymer/iron-flex-layout": "^3.0.0-pre.26",
"@polymer/polymer": "^3.0.0"
}
},
"@polymer/polymer": {
"version": "3.4.1",
"resolved": "https://registry.npmjs.org/@polymer/polymer/-/polymer-3.4.1.tgz",
"integrity": "sha512-KPWnhDZibtqKrUz7enIPOiO4ZQoJNOuLwqrhV2MXzIt3VVnUVJVG5ORz4Z2sgO+UZ+/UZnPD0jqY+jmw/+a9mQ==",
"requires": {
"@webcomponents/shadycss": "^1.9.1"
}
},
"@rollup/plugin-json": { "@rollup/plugin-json": {
"version": "4.1.0", "version": "4.1.0",
"resolved": "https://registry.npmjs.org/@rollup/plugin-json/-/plugin-json-4.1.0.tgz", "resolved": "https://registry.npmjs.org/@rollup/plugin-json/-/plugin-json-4.1.0.tgz",
@ -191,6 +444,11 @@
"resolved": "https://registry.npmjs.org/@vercel/ncc/-/ncc-0.28.5.tgz", "resolved": "https://registry.npmjs.org/@vercel/ncc/-/ncc-0.28.5.tgz",
"integrity": "sha512-ZSwD4EDCon2EsnPZ2/Qcigx4N2DiuBLV/rDnF04giEPFuDeBeUDdnSTyYYfX8KNic/prrJuS1vUEmAOHmj+fRg==" "integrity": "sha512-ZSwD4EDCon2EsnPZ2/Qcigx4N2DiuBLV/rDnF04giEPFuDeBeUDdnSTyYYfX8KNic/prrJuS1vUEmAOHmj+fRg=="
}, },
"@webcomponents/shadycss": {
"version": "1.10.2",
"resolved": "https://registry.npmjs.org/@webcomponents/shadycss/-/shadycss-1.10.2.tgz",
"integrity": "sha512-9Iseu8bRtecb0klvv+WXZOVZatsRkbaH7M97Z+f+Pt909R4lDfgUODAnra23DOZTpeMTAkVpf4m/FZztN7Ox1A=="
},
"acorn": { "acorn": {
"version": "7.4.1", "version": "7.4.1",
"resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz", "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",

@ -22,6 +22,9 @@
}, },
"homepage": "https://github.com/JurajNyiri/PlexMeetsHomeAssistant#readme", "homepage": "https://github.com/JurajNyiri/PlexMeetsHomeAssistant#readme",
"dependencies": { "dependencies": {
"@polymer/paper-dropdown-menu": "^3.2.0",
"@polymer/paper-input": "^3.2.1",
"@polymer/polymer": "^3.4.1",
"@vercel/ncc": "^0.28.5", "@vercel/ncc": "^0.28.5",
"axios": "^0.21.1", "axios": "^0.21.1",
"custom-card-helpers": "^1.7.0", "custom-card-helpers": "^1.7.0",

@ -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;

@ -112,9 +112,10 @@ class PlayController {
break; break;
case 'cast': case 'cast':
if (this.hass.services.plex) { if (this.hass.services.plex) {
try {
switch (data.type) { switch (data.type) {
case 'movie': case 'movie':
this.playViaCastPlex( await this.playViaCastPlex(
entity.value, entity.value,
'movie', 'movie',
`plex://${JSON.stringify({ `plex://${JSON.stringify({
@ -125,7 +126,7 @@ class PlayController {
); );
break; break;
case 'episode': case 'episode':
this.playViaCastPlex( await this.playViaCastPlex(
entity.value, entity.value,
'EPISODE', 'EPISODE',
`plex://${JSON.stringify({ `plex://${JSON.stringify({
@ -143,6 +144,10 @@ class PlayController {
default: default:
this.playViaCast(entity.value, data.Media[0].Part[0].key); this.playViaCast(entity.value, data.Media[0].Part[0].key);
} }
} catch (err) {
console.log(err);
this.playViaCast(entity.value, data.Media[0].Part[0].key);
}
} else { } else {
this.playViaCast(entity.value, data.Media[0].Part[0].key); this.playViaCast(entity.value, data.Media[0].Part[0].key);
} }
@ -287,8 +292,8 @@ class PlayController {
}); });
}; };
private playViaCastPlex = (entityName: string, contentType: string, mediaLink: string): void => { private playViaCastPlex = (entityName: string, contentType: string, mediaLink: string): Promise<void> => {
this.hass.callService('media_player', 'play_media', { return this.hass.callService('media_player', 'play_media', {
// eslint-disable-next-line @typescript-eslint/camelcase // eslint-disable-next-line @typescript-eslint/camelcase
entity_id: entityName, entity_id: entityName,
// eslint-disable-next-line @typescript-eslint/camelcase // eslint-disable-next-line @typescript-eslint/camelcase

@ -1,5 +1,6 @@
/* eslint-disable @typescript-eslint/no-explicit-any */ /* eslint-disable @typescript-eslint/no-explicit-any */
/* eslint-env browser */ /* eslint-env browser */
import { Connection } from 'home-assistant-js-websocket';
import _ from 'lodash'; import _ from 'lodash';
import { CSS_STYLE } from '../const'; import { CSS_STYLE } from '../const';
import PlayController from './PlayController'; import PlayController from './PlayController';
@ -18,6 +19,11 @@ const escapeHtml = (unsafe: any): string => {
return ''; return '';
}; };
const fetchEntityRegistry = (conn: Connection): Promise<Array<Record<string, any>>> =>
conn.sendMessagePromise({
type: 'config/entity_registry/list'
});
const getHeight = (el: HTMLElement): number => { const getHeight = (el: HTMLElement): number => {
const height = Math.max(el.scrollHeight, el.offsetHeight, el.clientHeight, el.scrollHeight, el.offsetHeight); const height = Math.max(el.scrollHeight, el.offsetHeight, el.clientHeight, el.scrollHeight, el.offsetHeight);
return height; return height;
@ -255,5 +261,6 @@ export {
getOldPlexServerErrorMessage, getOldPlexServerErrorMessage,
getWidth, getWidth,
getDetailsBottom, getDetailsBottom,
clickHandler clickHandler,
fetchEntityRegistry
}; };

@ -2,10 +2,10 @@
/* eslint-env browser */ /* eslint-env browser */
import { HomeAssistant } from 'custom-card-helpers'; import { HomeAssistant } from 'custom-card-helpers';
import _ from 'lodash'; import _ from 'lodash';
import { Connection } from 'home-assistant-js-websocket';
import { supported, CSS_STYLE } from './const'; import { supported, CSS_STYLE } from './const';
import Plex from './modules/Plex'; import Plex from './modules/Plex';
import PlayController from './modules/PlayController'; import PlayController from './modules/PlayController';
import PlexMeetsHomeAssistantEditor from './editor';
import { import {
escapeHtml, escapeHtml,
getOffset, getOffset,
@ -17,11 +17,20 @@ import {
hasEpisodes, hasEpisodes,
getOldPlexServerErrorMessage, getOldPlexServerErrorMessage,
getDetailsBottom, getDetailsBottom,
clickHandler clickHandler,
fetchEntityRegistry
} from './modules/utils'; } from './modules/utils';
import style from './modules/style'; import style from './modules/style';
declare global {
interface Window {
customCards: any;
}
}
class PlexMeetsHomeAssistant extends HTMLElement { class PlexMeetsHomeAssistant extends HTMLElement {
searchInputElem = document.createElement('input');
plexProtocol: 'http' | 'https' = 'http'; plexProtocol: 'http' | 'https' = 'http';
plexPort: number | false = false; plexPort: number | false = false;
@ -36,6 +45,8 @@ class PlexMeetsHomeAssistant extends HTMLElement {
showExtras = true; showExtras = true;
showSearch = true;
previousPageWidth = 0; previousPageWidth = 0;
runAfter = ''; runAfter = '';
@ -118,15 +129,18 @@ class PlexMeetsHomeAssistant extends HTMLElement {
card: HTMLElement | undefined; card: HTMLElement | undefined;
initialDataLoaded = false;
set hass(hass: HomeAssistant) { set hass(hass: HomeAssistant) {
this.hassObj = hass; this.hassObj = hass;
if (!this.content) { if (!this.initialDataLoaded) {
this.error = '';
if (!this.loading) {
this.loadInitialData(); this.loadInitialData();
} }
} }
static getConfigElement(): HTMLElement {
return document.createElement('plex-meets-homeassistant-editor');
} }
renderNewElementsIfNeeded = (): void => { renderNewElementsIfNeeded = (): void => {
@ -144,59 +158,9 @@ class PlexMeetsHomeAssistant extends HTMLElement {
} }
}; };
fetchEntityRegistry = (conn: Connection): Promise<Array<Record<string, any>>> =>
conn.sendMessagePromise({
type: 'config/entity_registry/list'
});
loadInitialData = async (): Promise<void> => { loadInitialData = async (): Promise<void> => {
if (this.hassObj) { if (this.hassObj) {
this.entityRegistry = await this.fetchEntityRegistry(this.hassObj.connection); this.entityRegistry = await fetchEntityRegistry(this.hassObj.connection);
}
let { entity } = JSON.parse(JSON.stringify(this.config));
const processEntity = (entityObj: Record<string, any>, entityString: string): void => {
_.forEach(this.entityRegistry, entityInRegister => {
if (_.isEqual(entityInRegister.entity_id, entityString)) {
switch (entityInRegister.platform) {
case 'cast':
if (_.isNil(entityObj.cast)) {
// eslint-disable-next-line no-param-reassign
entityObj.cast = [];
}
entityObj.cast.push(entityInRegister.entity_id);
break;
case 'androidtv':
if (_.isNil(entityObj.androidtv)) {
// eslint-disable-next-line no-param-reassign
entityObj.androidtv = [];
}
entityObj.androidtv.push(entityInRegister.entity_id);
break;
case 'kodi':
if (_.isNil(entityObj.kodi)) {
// eslint-disable-next-line no-param-reassign
entityObj.kodi = [];
}
entityObj.kodi.push(entityInRegister.entity_id);
break;
default:
// pass
}
}
});
};
const entityOrig = entity;
if (_.isString(entityOrig)) {
entity = {};
processEntity(entity, entityOrig);
} else if (_.isArray(entityOrig)) {
entity = {};
_.forEach(entityOrig, entityStr => {
processEntity(entity, entityStr);
});
} }
window.addEventListener('scroll', () => { window.addEventListener('scroll', () => {
@ -263,17 +227,88 @@ class PlexMeetsHomeAssistant extends HTMLElement {
if (this.card) { if (this.card) {
this.previousPageWidth = this.card.offsetWidth; this.previousPageWidth = this.card.offsetWidth;
} }
this.resizeBackground();
this.initialDataLoaded = true;
};
renderInitialData = async (): Promise<void> => {
let { entity } = JSON.parse(JSON.stringify(this.config));
const processEntity = (entityObj: Record<string, any>, entityString: string): void => {
let realEntityString = entityString;
let isPlexPlayer = false;
if (_.startsWith(entityString, 'plexPlayer | ')) {
// eslint-disable-next-line prefer-destructuring
realEntityString = entityString.split(' | ')[3];
isPlexPlayer = true;
} else if (
_.startsWith(entityString, 'androidtv | ') ||
_.startsWith(entityString, 'kodi | ') ||
_.startsWith(entityString, 'cast | ')
) {
// eslint-disable-next-line prefer-destructuring
realEntityString = entityString.split(' | ')[1];
isPlexPlayer = false;
}
if (isPlexPlayer) {
if (_.isNil(entityObj.plexPlayer)) {
// eslint-disable-next-line no-param-reassign
entityObj.plexPlayer = [];
}
entityObj.plexPlayer.push(realEntityString);
} else {
_.forEach(this.entityRegistry, entityInRegister => {
if (_.isEqual(entityInRegister.entity_id, realEntityString)) {
switch (entityInRegister.platform) {
case 'cast':
if (_.isNil(entityObj.cast)) {
// eslint-disable-next-line no-param-reassign
entityObj.cast = [];
}
entityObj.cast.push(entityInRegister.entity_id);
break;
case 'androidtv':
if (_.isNil(entityObj.androidtv)) {
// eslint-disable-next-line no-param-reassign
entityObj.androidtv = [];
}
entityObj.androidtv.push(entityInRegister.entity_id);
break;
case 'kodi':
if (_.isNil(entityObj.kodi)) {
// eslint-disable-next-line no-param-reassign
entityObj.kodi = [];
}
entityObj.kodi.push(entityInRegister.entity_id);
break;
default:
// pass
}
}
});
}
console.log(realEntityString);
};
const entityOrig = entity;
if (_.isString(entityOrig)) {
entity = {};
processEntity(entity, entityOrig);
} else if (_.isArray(entityOrig)) {
entity = {};
_.forEach(entityOrig, entityStr => {
processEntity(entity, entityStr);
});
}
console.log(entity);
this.loading = true; this.loading = true;
this.renderPage(); this.renderPage();
try { try {
if (this.plex) { if (this.plex && this.hassObj) {
if (this.hassObj) {
this.playController = new PlayController(this.hassObj, this.plex, entity, this.runBefore, this.runAfter); this.playController = new PlayController(this.hassObj, this.plex, entity, this.runBefore, this.runAfter);
if (this.playController) { if (this.playController) {
await this.playController.init(); await this.playController.init();
} }
}
await this.plex.init(); await this.plex.init();
try { try {
@ -347,14 +382,14 @@ class PlexMeetsHomeAssistant extends HTMLElement {
this.loading = false; this.loading = false;
this.render(); this.render();
} else { } else {
throw Error('Plex not initialized.'); setTimeout(() => {
this.renderInitialData();
}, 250);
} }
} catch (err) { } catch (err) {
this.error = `Plex server did not respond.<br/>Details of the error: ${escapeHtml(err.message)}`; this.error = `Plex server did not respond.<br/>Details of the error: ${escapeHtml(err.message)}`;
this.renderPage(); this.renderPage();
} }
this.resizeBackground();
}; };
render = (): void => { render = (): void => {
@ -365,19 +400,19 @@ class PlexMeetsHomeAssistant extends HTMLElement {
const searchContainer = document.createElement('div'); const searchContainer = document.createElement('div');
searchContainer.className = 'searchContainer'; searchContainer.className = 'searchContainer';
const searchInput = document.createElement('input'); this.searchInputElem = document.createElement('input');
searchInput.type = 'text'; this.searchInputElem.type = 'text';
searchInput.value = this.searchValue; this.searchInputElem.value = this.searchValue;
searchInput.placeholder = `Search ${this.config.libraryName}...`; this.searchInputElem.placeholder = `Search ${this.config.libraryName}...`;
searchInput.addEventListener('keyup', () => { this.searchInputElem.addEventListener('keyup', () => {
this.searchValue = searchInput.value; this.searchValue = this.searchInputElem.value;
this.renderPage(); this.renderPage();
this.focus(); this.focus();
this.renderNewElementsIfNeeded(); this.renderNewElementsIfNeeded();
}); });
searchContainer.appendChild(searchInput); searchContainer.appendChild(this.searchInputElem);
return searchContainer; return searchContainer;
}; };
@ -449,6 +484,13 @@ class PlexMeetsHomeAssistant extends HTMLElement {
}; };
renderPage = (): void => { renderPage = (): void => {
this.searchInputElem.placeholder = `Search ${this.config.libraryName}...`;
if (this.showSearch) {
this.searchInputElem.style.display = 'block';
} else {
this.searchInputElem.style.display = 'none';
}
if (this.card) { if (this.card) {
const marginRight = 10; // needs to be equal to .container margin right const marginRight = 10; // needs to be equal to .container margin right
const areaSize = const areaSize =
@ -480,7 +522,14 @@ class PlexMeetsHomeAssistant extends HTMLElement {
this.card.style.overflow = 'hidden'; this.card.style.overflow = 'hidden';
this.card.style.padding = '16px'; this.card.style.padding = '16px';
this.card.style.paddingRight = '6px'; this.card.style.paddingRight = '6px';
this.card.appendChild(this.searchInput()); this.card.appendChild(this.searchInput());
if (this.showSearch) {
this.searchInputElem.style.display = 'block';
} else {
this.searchInputElem.style.display = 'none';
}
this.appendChild(this.card); this.appendChild(this.card);
} }
@ -1488,6 +1537,15 @@ class PlexMeetsHomeAssistant extends HTMLElement {
setConfig = (config: any): void => { setConfig = (config: any): void => {
this.plexProtocol = 'http'; this.plexProtocol = 'http';
if (!config.ip) {
throw new Error('You need to define a Plex IP Address');
}
if (!config.token) {
throw new Error('You need to define a Plex Token');
}
if (!config.libraryName) {
throw new Error('You need to define a libraryName');
}
if (!config.entity || config.entity.length === 0) { if (!config.entity || config.entity.length === 0) {
throw new Error('You need to define at least one entity'); throw new Error('You need to define at least one entity');
} }
@ -1506,29 +1564,22 @@ class PlexMeetsHomeAssistant extends HTMLElement {
} else if (!_.isString(config.entity) && !_.isArray(config.entity)) { } else if (!_.isString(config.entity) && !_.isArray(config.entity)) {
throw new Error('You need to define at least one supported entity'); throw new Error('You need to define at least one supported entity');
} }
if (!config.token) {
throw new Error('You need to define a token');
}
if (!config.ip) {
throw new Error('You need to define a ip');
}
if (!config.libraryName) {
throw new Error('You need to define a libraryName');
}
this.config = config; this.config = config;
if (config.protocol) { if (config.protocol) {
this.plexProtocol = config.protocol; this.plexProtocol = config.protocol;
} }
if (config.port) { if (config.port && !_.isEqual(config.port, '')) {
this.plexPort = config.port; this.plexPort = config.port;
} else {
this.plexPort = false;
} }
if (config.maxCount) { if (config.maxCount && config.maxCount !== '') {
this.maxCount = config.maxCount; this.maxCount = config.maxCount;
} }
if (config.runBefore) { if (config.runBefore && !_.isEqual(config.runBefore, '')) {
this.runBefore = config.runBefore; this.runBefore = config.runBefore;
} }
if (config.runAfter) { if (config.runAfter && !_.isEqual(config.runAfter, '')) {
this.runAfter = config.runAfter; this.runAfter = config.runAfter;
} }
if (!_.isNil(config.playTrailer)) { if (!_.isNil(config.playTrailer)) {
@ -1537,8 +1588,14 @@ class PlexMeetsHomeAssistant extends HTMLElement {
if (!_.isNil(config.showExtras)) { if (!_.isNil(config.showExtras)) {
this.showExtras = config.showExtras; this.showExtras = config.showExtras;
} }
if (!_.isNil(config.showSearch)) {
this.showSearch = config.showSearch;
}
this.plex = new Plex(this.config.ip, this.plexPort, this.config.token, this.plexProtocol, this.config.sort); this.plex = new Plex(this.config.ip, this.plexPort, this.config.token, this.plexProtocol, this.config.sort);
this.data = {};
this.error = '';
this.renderInitialData();
}; };
getCardSize = (): number => { getCardSize = (): number => {
@ -1546,4 +1603,13 @@ class PlexMeetsHomeAssistant extends HTMLElement {
}; };
} }
customElements.define('plex-meets-homeassistant-editor', PlexMeetsHomeAssistantEditor);
customElements.define('plex-meets-homeassistant', PlexMeetsHomeAssistant); 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
});

Loading…
Cancel
Save