Add shuffle and repeat-mode of media_player to UI by NachtaktiverHalbaffe · Pull Request #12052 · home-assistant/frontend

NachtaktiverHalbaffe · 2022-03-15T01:12:02Z

Breaking change

Proposed change

Add media controls for shuffle and repeat-mode to UI so it can be controlled easily without calling manually the services e.g. via automations of dev-tools
Mainly the media-player model was adjusted and the _handleClick callbacks of all media cards that I found
Updated look of the controls:

Type of change

Dependency upgrade
Bugfix (non-breaking change which fixes an issue)
New feature (thank you!)
Breaking change (fix/feature causing existing functionality to break)
Code quality improvements to existing code or addition of tests

Example configuration

Additional information

This PR fixes or closes issue: fixes #
This PR is related to issue or discussion:
Link to documentation pull request:

Checklist

The code change is tested and works locally.
There is no commented out code in this PR.
Tests have been added to verify that the new code works.

If user exposed functionality or configuration variables are added/changed:

Documentation added/updated for www.home-assistant.io

balloob · 2022-03-15T06:05:20Z

We don't want to put the shuffle/repeat buttons on all those places. Just adding it to the more info page is ok.

NachtaktiverHalbaffe · 2022-03-15T09:50:24Z

We don't want to put the shuffle/repeat buttons on all those places. Just adding it to the more info page is ok.

Okay I can remove it from the lovelace media card. Whats the reason for not having it in it from the media panel? I think in the media panel you want most of the media controls directly accessible from the player directly like it was e.g. with the volume control because the media selection&control is the main focus here. There is also a ton of space there and so it wont look overloaded and I think the users are widely used to this design because e.g. Spotify also arranges the media controls like that. I I for one would like it if shuffle and repeat mode could stay there.

Also have seen that not all states of the button are represented in my initial Screenshots. I add screenshots with the missing states of the new buttons to the initial post

NachtaktiverHalbaffe · 2022-03-16T19:29:17Z

For your information: The media_player in the media panel still uses all media controls. I'll wait for the result of the discussion/my question before (if neccessary) I update these too

balloob · 2022-03-30T05:13:41Z

src/dialogs/more-info/controls/more-info-media_player.ts

    this.hass!.callService(
      "media_player",
-      (e.currentTarget! as HTMLElement).getAttribute("action")!,
-      {
-        entity_id: this.stateObj!.entity_id,
-      }
+      action,
+      action === "shuffle_set"
+        ? {
+            entity_id: this.stateObj!.entity_id,
+            shuffle: !this.stateObj!.attributes.shuffle,
+          }
+        : action === "repeat_set"
+        ? {
+            entity_id: this.stateObj!.entity_id,
+            repeat:
+              this.stateObj!.attributes.repeat === "all"
+                ? "one"
+                : this.stateObj!.attributes.repeat === "off"
+                ? "all"
+                : "off",
+          }
+        : {
+            entity_id: this.stateObj!.entity_id,
+          }


This should be extracted into a helper.

And we should use that helper in all places that use computeMediaControls

So that I understand it right: Extract the service_calls into a exported method like computemediacontrols is, place that method inside media-player.ts and then pass that helper to the controlbuttons as a click callback when they are used?

If yes, then all your comments should be resolved. If not, I need to refactor once more

src/data/media-player.ts

balloob · 2022-03-30T05:17:05Z

Media panel + more info = 👍

PR looks good, left 2 comments

… computed

@Changed

* Add a docs icon to the config flow dialog * Use same help icon everywhere * Fix quickbar overlaying, fix click handling (#11900) * Supervisor mobile click accessibility (#11915) * Convert objects to string in config flow error (#11908) * Fix datepicker triangle (#11920) * Always show tab labels (#11919) * Remove zwave and ozw panels (#11911) Remove zwave and ozw panels * Convert lovelace config dialogs to ha-form (#11910) * Guard setting up config flow for an unsupported domain (#11937) * Show triggered vars on click (#11924) * Allow marking YAML editor as read only (#11960) * Convert inputs (#11907) * Convert inputs * Update dialog-thingtalk.ts * imports * Remove some additional old zwave code (#11941) * Correct media upload error + add file name (#11949) Co-authored-by: Bram Kragten <mail@bramkragten.nl> * Fix humidifier more info mode dropdown (#11964) * Make min width of select configurable (#11965) * Fix for Statistics Editor (#11942) Co-authored-by: Bram Kragten <mail@bramkragten.nl> * A11y expansion panel (#11967) * Convert file upload to mdc (#11906) * Add location selector, convert zone editor (#11902) * Add systemd_resolved unsupported reason (#11971) * replace default switch icon to make it stand out against a power entity which uses the same mdiFlash home-assistant/core#67620 (comment) suggest the Outline version, so create a subtle difference with the on/off icons. * Allow selecting multiple entities (#11986) * Fix theme setting (#11977) * Update Style of Design Page (#11982) * change icon to mimic physical device and follow comments * Use entities-picker in entity selector (#11990) * #11971 Change order of alarm panel buttons (#11998) * Fix zwave_js 'add/remove device' disabled bug (#12000) * Fix zwave_js 'add/remove device' disabled bug * revert extra change * Fix zwave_js set config dropdown default value (#11974) Co-authored-by: Paulus Schoutsen <paulus@home-assistant.io> * Fix changing cost number in energy settings (#12009) * Fix Dashboard Editing (#12011) * Fix For Selecting Device Class (#12010) * Fix: Allow for deleting Input_select options (#12007) * Script ID update with Alias (#12008) * HAWS 6.1 (#12016) * Bumped version to 20220301.1 * Bumped version to 20220301.2 * Bumped version to 20220312.0 * Add shade to device class overrides (#11874) * Fix: Changing Blueprint Automation Name (#12036) * Fix @Changed where using ev.detail (#12043) * Add all cover device classes (#12042) * Rename Lovelace Dashboard to just Dashboard (#12044) Co-authored-by: Zack Barett <zackbarett@hey.com> * Add Color Temp Selector (#12041) * Utilize Hide Hidden Entities * Reviews * add to demo * Add `Brand` folder and `Our story` page (#11978) Co-authored-by: Zack Barett <zackbarett@hey.com> * Add HA to public folder and show in markdown * Update Translations * Disabled by * remove 1 * Add Description of chosen * Add icons and buttons * Add Color RGB Selector (#12039) * Add Date Selector * Add ha-form context (#12062) * test condition (#11925) * Revamp URL form (#12060) * Add support for menu data entry flow option (#12055) * Add translation * add to basic editor and update advanced style * clean up * Entity Status * Add Devices Picker (#12056) * Remvoe redunency * Bumped version to 20220316.0 * Bump HAWS to 7.0.0 (#12067) * Create new Logo page * Add files via upload * Ignore diagnostics not found exceptions (#12066) * Bump HAWS to 7.0.1 * Update lock * Add Date Time Selector (#12070) * Add radio Form Logic to Select Selector (#12063) * Bumped version to 20220317.0 (#12074) * Update gallery/src/pages/brand/logo.markdown Co-authored-by: Zack Barett <zackbarett@hey.com> * Update gallery/src/pages/brand/logo.markdown Co-authored-by: Zack Barett <zackbarett@hey.com> * Update logo.markdown * Fetch history with `no_attributes` for entities that do not need them (#12082) * Update required version of MDI to 6.6.95 * Upload release assets (#11566) Co-authored-by: Joakim Sørensen <hi@ludeeus.dev> * Update styles for hui-editor Update the background-color and text-color of the app-toolbar in hui-editor to match the styles of hui-root while in edit-mode. Previously, these properties were set using undefined css variables that could not be changed via themes (--dark-background-color and --dark-text-color). * Fix gas energy graph units if stats added by external source (#11892) * Change Netlify preview URL (#12095) * Update src/dialogs/config-flow/dialog-data-entry-flow.ts * Stack Action Inputs in the Button Editor (#12076) * Stack Action Inputs in the Button Editor * update style * Update for other editors * Add support for update entities (#12059) * Add support for update entities * Apply suggestions from code review Co-authored-by: Zack Barett <zackbarett@hey.com> * Add to gallery * implement xx% * Adjustments for skipped * Add progress bar * Add UPDATE_SUPPORT_INSTALL * Allow skipping without install support * Add version to service call if supported * Adjust changelog link * Use Installing * adjustments * Use unavailable Co-authored-by: Zack Barett <zackbarett@hey.com> * Add support for integration type (#12077) * Update When entity can change enabled or hidden (#12096) * Add entity include and exclude to selector (#12078) Co-authored-by: Paulus Schoutsen <balloob@gmail.com> * change from hidden to not shown (#12097) * Add statistic adjust dialog (#12101) Co-authored-by: Zack Barett <zackbarett@hey.com> * Fix Duration Selector Default (#12098) * Fix Duration Default * USe initial form data function * Bumped version to 20220322.0 (#12102) * Create user types page and rename the category (#12089) Co-authored-by: Zack Barett <zackbarett@hey.com> Co-authored-by: Paulus Schoutsen <balloob@gmail.com> * Remove `setup.py` (#11593) * Fix selecting 0 with number selector * Update lock file with MDI updates * Use update entities for showing updates on configuration panel (#12100) Co-authored-by: Paulus Schoutsen <balloob@gmail.com> * Fix loading traces for automation with custom id (#12112) * Only show docs link when showing a form * Exclude restored automations from dashboard (#12113) * Support descriptions in flow menu steps (#12108) Co-authored-by: Paulus Schoutsen <balloob@gmail.com> * Sort selectors (#12120) * Update type for backend (#12122) * Fix issue where theme select does not appear when user's theme is deleted (#12104) * Fix possibility to enable entity disabled by integration (#12121) Co-authored-by: Zack Barett <zackbarett@hey.com> * Allow rendering helper text from strings.json (#12119) * Allow rendering helper text from strings.json * Persistent helpers * Update src/components/ha-base-time-input.ts Co-authored-by: Zack Barett <zackbarett@hey.com> * Update src/components/ha-base-time-input.ts Co-authored-by: Zack Barett <zackbarett@hey.com> * Add Day to duration selector (#12125) * Add variables to automation trigger type * Fix z-index map, always set icon for location selector (#12137) * Make padding on settings row content consistent (#12139) * Add Area Multiple Selector option (#12138) * break theme picker out of lovelace (#12140) * Allow binary sensor device class updates (#12124) * Add selector initial values (#12142) * Add badge to configuration sidebar to indicate pending updates (#12146) * Bumped version to 20220329.0 (#12152) * Add entity source API (#12149) * Update adjust statistic dialog (#12118) * Update text for adjust statistic dialog * Change everything * Import type * Max show 5 * Revert back the API change * Hide adjust button if no sum * Adjustments * Update src/panels/developer-tools/statistics/developer-tools-statistics.ts * Render optional Co-authored-by: Zack <zackbarett@hey.com> * Fetch release notes for update entities that provides it (#12148) * Fetch release notes for update entities that provides it * lint * Add support for new timer properties (#11940) * Fix theme settings on design page (#12154) * Allow ha-alert to be used in our markdown render (#12153) * Allow device_tracker entities to use state_color (#12127) * Automation description text overflow (#12040) Co-authored-by: Bram Kragten <mail@bramkragten.nl> * Update Pickers and selectors with required (#12151) * Update Pickers and selectors with required * Use native * for device and entity * Add support for my links to create a helper config entry (#12155) * Use brand icon instead of domain icon for helpers (#12157) * Import components that are allowed to be defined in markdown (#12158) * Add options to selectors gallery (#12156) * Add helpers to list when searching in add integration (#12159) * List Selector (#12099) Co-authored-by: Bram Kragten <mail@bramkragten.nl> * Add shuffle and repeat-mode of media_player to UI (#12052) Co-authored-by: Paulus Schoutsen <balloob@gmail.com> * Add panel to Backup integration (#11671) Co-authored-by: Zack Barett <zackbarett@hey.com> Co-authored-by: Paulus Schoutsen <balloob@gmail.com> * Fix for Mobile View of Entities Table (#12160) * Allow Sensor Units to be updated via Entity Registry (#12143) * Add switch as x to entity settings (#12161) Co-authored-by: Zack <zackbarett@hey.com> * Bumped version to 20220330.0 (#12164) Co-authored-by: Paulus Schoutsen <balloob@gmail.com> Co-authored-by: Bram Kragten <mail@bramkragten.nl> Co-authored-by: Steve Repsher <steverep@users.noreply.github.com> Co-authored-by: Robin Wittebol <robinwittebol@live.nl> Co-authored-by: Raman Gupta <7243222+raman325@users.noreply.github.com> Co-authored-by: Philip Allgaier <philip.allgaier@gmx.de> Co-authored-by: Joakim Sørensen <ludeeus@ludeeus.dev> Co-authored-by: Marius <33354141+Mariusthvdb@users.noreply.github.com> Co-authored-by: Emil Stjerneman <emil@stjerneman.com> Co-authored-by: Charles Garwood <cgarwood@gmail.com> Co-authored-by: Paulus Schoutsen <paulus@home-assistant.io> Co-authored-by: jpearl <jpearl@users.noreply.github.com> Co-authored-by: Matthias de Baat <matthias.debaat@nabucasa.com> Co-authored-by: Matthias de Baat <hello@matthiasdebaat.com> Co-authored-by: J. Nick Koston <nick@koston.org> Co-authored-by: Michael Irigoyen <michael@irigoyen.dev> Co-authored-by: Marc Mueller <30130371+cdce8p@users.noreply.github.com> Co-authored-by: Joakim Sørensen <hi@ludeeus.dev> Co-authored-by: Nick Iacullo <duckycrayfish@gmail.com> Co-authored-by: Pawel <pszafer@gmail.com> Co-authored-by: Erik <erik@montnemery.com> Co-authored-by: Brynley McDonald <brynley+github@zephire.nz> Co-authored-by: blair <1585872+blairun@users.noreply.github.com> Co-authored-by: NachtaktiverHalbaffe <57433516+NachtaktiverHalbaffe@users.noreply.github.com>