Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/DBuit/media_player-popup-card
https://github.com/DBuit/media_player-popup-card
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/DBuit/media_player-popup-card
- Owner: DBuit
- Created: 2020-01-17T11:44:04.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2023-03-02T12:27:23.000Z (over 1 year ago)
- Last Synced: 2024-07-27T02:32:38.915Z (4 months ago)
- Language: TypeScript
- Size: 293 KB
- Stars: 28
- Watchers: 5
- Forks: 3
- Open Issues: 17
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[](https://github.com/custom-components/hacs)
# Media player popup card (homekit style)
Popup lovelace card with volume slider and optional actions to add more control for your media players.
Can be used in combination with thomas loven browser_mod or custom pop-up card or in combination with my homekit style card: https://github.com/DBuit/Homekit-panel-card
## Configuration
### Installation instructions
**HACS installation:**
Go to the hacs store and use the repo url `https://github.com/DBuit/media_player-popup-card` and add this as a custom repository under settings.
Add the following to your ui-lovelace.yaml:
```yaml
resources:
url: /community_plugin/media_player-popup-card/media_player-popup-card.js
type: module
```
**Manual installation:**
Copy the .js file from the dist directory to your www directory and add the following to your ui-lovelace.yaml file:
```yaml
resources:
url: /local/media_player-popup-card.js
type: module
```
### Main Options
| Name | Type | Default | Supported options | Description |
| -------------- | ----------- | ------------ | ------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `entity` | string | **Required** | `light.kitchen` | Entity of the light |
| `icon` | string | optional | `mdi:lightbulb` | It will use customize entity icon or from the config as a fallback it used lightbulb icon |
| `fullscreen` | boolean | optional | true | If false it will remove the pop-up wrapper which makes it fullscreen |
| `actions` | object | optional | `actions:` | define actions that you can activate from the pop-up. |
| `actionSize` | string | optional | `50px` | Set the size of the action buttons default `50px` |
| `actionsInARow` | number | optional | 3 | number of action that will be placed in a row under the slider |
| `sliderWidth` | string | optional | 150px | The width of the slider |
| `sliderHeight` | string | optional | 400px | The height of the slider |
' `borderRadius` | string | optional | 12px | The border radius of the slider and switch |
| `sliderColor` | string | optional | "#FFF" | The color of the slider |
| `sliderThumbColor` | string | optional | "#ddd" | The color of the line that you use to slide the slider |
| `sliderTrackColor` | string | optional | "#ddd" | The color of the slider track |
| `settings` | boolean | optional | false | When it will add an settings button that displays the more-info content see settings example for my light popup for more options/information [here]: https://github.com/DBuit/light-popup-card#settings |
| `settingsPosition` | string | optional | `bottom` | set position of the settings button options: `top` or `bottom`. |
To show actions in the pop-up you add `actions:` in the config of the card follow bij multiple actions.
These actions are calling a service with specific service data.
```
actions:
- service: scene.turn_on
service_data:
entity_id: scene.energie
color: "#8BCBDD"
name: energie
- service: homeassistant.toggle
service_data:
entity_id: light.voordeurlicht
name: voordeur
icon: mdi:lightbulb
```
The name option within a scene is **optional**
You can also set the `entity_id` with value **this** if you use **this** it will be replaced with the entity the pop-up is opened for.
Example configuration with next, play/pause and previous actions
```
type: custom:media_player-popup-card
actions:
- service: media_player.media_previous_track
service_data:
entity_id: this
name: previous
icon: mdi:skip-previous
- service: media_player.media_play_pause
service_data:
entity_id: this
name: play/pause
icon: mdi:play-pause
- service: media_player.media_next_track
service_data:
entity_id: this
name: next
icon: mdi:skip-next
```
### Screenshot
