Media player playback controls card feature #26608
Conversation
0f6d945 to
c117d57
Compare
There was a problem hiding this comment.
Pull Request Overview
This PR adds a new media player playback controls card feature that provides buttons for controlling media player playback (play, pause, stop, next/previous track, power). The feature intelligently adapts its display based on available width and media player state, hiding certain controls when space is limited or when the media player uses assumed state.
- Adds a new card feature type "media-player-playback" with adaptive UI behavior
- Integrates the feature into the existing card feature system with proper type definitions
- Implements responsive design that adjusts control visibility based on card width and entity state
Reviewed Changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| src/translations/en.json | Adds translation label for the new media player playback controls feature |
| src/panels/lovelace/editor/config-elements/hui-card-features-editor.ts | Registers the new feature in the editor with support function and type definition |
| src/panels/lovelace/create-element/create-card-feature-element.ts | Adds the feature to the element creation system and imports the component |
| src/panels/lovelace/card-features/types.ts | Defines TypeScript interfaces for the new media player playback card feature |
| src/panels/lovelace/card-features/hui-media-player-playback-card-feature.ts | Implements the complete media player playback controls component with adaptive UI logic |
src/panels/lovelace/card-features/hui-media-player-playback-card-feature.ts
Outdated
Show resolved
Hide resolved
src/panels/lovelace/card-features/hui-media-player-playback-card-feature.ts
Outdated
Show resolved
Hide resolved
src/panels/lovelace/card-features/hui-media-player-playback-card-feature.ts
Outdated
Show resolved
Hide resolved
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
src/panels/lovelace/card-features/hui-media-player-playback-card-feature.ts
Outdated
Show resolved
Hide resolved
| "media-player-playback": { | ||
| "label": "Media player playback controls" | ||
| }, |
There was a problem hiding this comment.
I would've just named if "Media player controls" but this works too
There was a problem hiding this comment.
Struggled on the name a bit, I did at one point make it controls but that would technically conflict with the other feature as volume is a control
| @state() private _narrow?: boolean = false; | ||
|
|
||
| private _resizeObserver?: ResizeObserver; |
There was a problem hiding this comment.
I think the whole _resizeObserver is not needed. You just use it to check the width once to show/hide a button. You can just check this.clientWidth < 300 in render(). On config change render will be called again and I don't think significant dynamic resizing without changing the config is a real case.
Breaking change
Proposed change
Adds playback controls feature. Matches entity row logic to hide certain fields when there are too many for the width of the card, such as when a media player uses assumed state
Type of change
Example configuration
Additional information
Checklist
If user exposed functionality or configuration variables are added/changed: