feature: make it possible to use stop instead of pause

README.md

@@ -220,6 +220,7 @@ showSourceInPlayer: true # default is false. Will show the source (if available)
 showBrowseMediaInPlayerSection: true # default is false. Will show the browse media button in the player section.
 showChannelInPlayer: true # default is false. Will show the channel (if available) in the player section. This can for instance be the radio station name.
 hidePlaylistInPlayer: true # default is false. Will hide the playlist name in the player section.
+stopInsteadOfPause: true # default is false. Will show the stop button instead of the pause button when media is playing.
 
 # media browser specific
 favoritesItemsPerRow: 1 # default is 4. Use this to show items as list.

src/components/player-controls.ts

@@ -8,7 +8,8 @@ import { MediaPlayer } from '../model/media-player';
 import { until } from 'lit-html/directives/until.js';
 import { findPlayer } from '../utils/utils';
 
-const { SHUFFLE_SET, REPEAT_SET, PLAY, PAUSE, NEXT_TRACK, PREVIOUS_TRACK, BROWSE_MEDIA } = MediaPlayerEntityFeature;
+const { SHUFFLE_SET, REPEAT_SET, PLAY, PAUSE, NEXT_TRACK, PREVIOUS_TRACK, BROWSE_MEDIA, STOP } =
+  MediaPlayerEntityFeature;
 
 class PlayerControls extends LitElement {
   @property({ attribute: false }) store!: Store;
@@ -26,6 +27,7 @@ class PlayerControls extends LitElement {
     const noFastForwardAndRewind = !!this.config.showFastForwardAndRewindButtons && nothing;
     this.volumePlayer = this.getVolumePlayer();
     this.updateMemberVolumes = !this.config.playerVolumeEntityId;
+    const pauseOrStop = this.config.stopInsteadOfPause ? STOP : PAUSE;
     return html`
       <div class="main" id="mediaControls">
           <div class="icons">
@@ -34,7 +36,7 @@ class PlayerControls extends LitElement {
               <sonos-ha-player .store=${this.store} .features=${this.showShuffle()}></sonos-ha-player>
               <sonos-ha-player .store=${this.store} .features=${this.showPrev()}></sonos-ha-player>
               <ha-icon-button hide=${noFastForwardAndRewind} @click=${this.rewind} .path=${mdiRewind}></ha-icon-button>
-              <sonos-ha-player .store=${this.store} .features=${[PLAY, PAUSE]} class="big-icon"></sonos-ha-player>
+              <sonos-ha-player .store=${this.store} .features=${[PLAY, pauseOrStop]} class="big-icon"></sonos-ha-player>
               <ha-icon-button hide=${noFastForwardAndRewind} @click=${this.fastForward} .path=${mdiFastForward}></ha-icon-button>
               <sonos-ha-player .store=${this.store} .features=${this.showNext()}></sonos-ha-player>
               <sonos-ha-player .store=${this.store} .features=${this.showRepeat()}></sonos-ha-player>

src/editor/advanced-editor.ts

@@ -158,6 +158,10 @@ export const ADVANCED_SCHEMA = [
     type: 'integer',
     valueMin: 0,
   },
+  {
+    name: 'stopInsteadOfPause',
+    selector: { boolean: {} },
+  },
 ];
 
 class AdvancedEditor extends BaseEditor {

src/types.ts

@@ -99,6 +99,7 @@ export interface CardConfig extends LovelaceCardConfig {
   footerHeight?: number;
   mediaTitleRegexToReplace?: string;
   mediaTitleReplacement?: string;
+  stopInsteadOfPause?: boolean;
 }
 
 export interface MediaArtworkOverride {