feature: make it possible to show fast forward and rewind buttons and…

… to set step size

README.md

@@ -154,6 +154,8 @@ hidePlayerControlRepeatButton: true # default is false, hides player control tra
 hidePlayerControlShuffleButton: true # default is false, hides player control track shuffle mode button.
 hidePlayerControlPowerButton: true # default is false, hides player control power button if media player TURN_ON feature is enabled.  This setting does nothing if media player TURN_ON feature is not supported.
 showVolumeUpAndDownButtons: true # default is false, shows buttons for increasing and decreasing volume
+showFastForwardAndRewindButtons: true # default is false, shows fast forward and rewind buttons
+fastForwardAndRewindStepSizeSeconds: 60 # default is 15 seconds
 labelWhenNoMediaIsSelected: 'No media selected'
 labelForTheAllVolumesSlider: 'All volumes'
 mediaArtworkOverrides: # Show your own selected artwork if certain rules match

src/components/player-controls.ts

@@ -3,7 +3,7 @@ import { property } from 'lit/decorators.js';
 import MediaControlService from '../services/media-control-service';
 import Store from '../model/store';
 import { CardConfig, MediaPlayerEntityFeature } from '../types';
-import { mdiVolumeMinus, mdiVolumePlus } from '@mdi/js';
+import { mdiFastForward, mdiRewind, mdiVolumeMinus, mdiVolumePlus } from '@mdi/js';
 import { MediaPlayer } from '../model/media-player';
 import { until } from 'lit-html/directives/until.js';
 
@@ -21,6 +21,7 @@ class PlayerControls extends LitElement {
     this.activePlayer = this.store.activePlayer;
     this.mediaControlService = this.store.mediaControlService;
     const noUpDown = !!this.config.showVolumeUpAndDownButtons && nothing;
+    const noFastForwardAndRewind = !!this.config.showFastForwardAndRewindButtons && nothing;
     this.volumePlayer = this.activePlayer.getMember(this.config.playerVolumeEntityId) ?? this.activePlayer;
     return html`
       <div class="main" id="mediaControls">
@@ -29,7 +30,9 @@ class PlayerControls extends LitElement {
               <ha-icon-button hide=${noUpDown} @click=${this.volDown} .path=${mdiVolumeMinus}></ha-icon-button>
               <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>
+              <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>
               <ha-icon-button hide=${noUpDown} @click=${this.volUp} .path=${mdiVolumePlus}></ha-icon-button>
@@ -50,6 +53,16 @@ class PlayerControls extends LitElement {
     await this.mediaControlService.volumeDown(this.volumePlayer, !this.config.playerVolumeEntityId);
   private volUp = async () =>
     await this.mediaControlService.volumeUp(this.volumePlayer, !this.config.playerVolumeEntityId);
+  private rewind = async () =>
+    await this.mediaControlService.seek(
+      this.volumePlayer,
+      this.volumePlayer.attributes.media_position - (this.config.fastForwardAndRewindStepSizeSeconds || 15),
+    );
+  private fastForward = async () =>
+    await this.mediaControlService.seek(
+      this.volumePlayer,
+      this.volumePlayer.attributes.media_position + (this.config.fastForwardAndRewindStepSizeSeconds || 15),
+    );
 
   private async getAudioInputFormat() {
     const sensors = await this.store.hassService.getRelatedEntities(this.activePlayer, 'sensor');

src/editor/general-editor.ts

@@ -29,6 +29,16 @@ export const GENERAL_SCHEMA = [
     name: 'showVolumeUpAndDownButtons',
     selector: { boolean: {} },
   },
+  {
+    name: 'showFastForwardAndRewindButtons',
+    selector: { boolean: {} },
+  },
+  {
+    name: 'fastForwardAndRewindStepSizeSeconds',
+    type: 'integer',
+    default: 15,
+    required: true,
+  },
   {
     name: 'hidePlayerControlPowerButton',
     selector: { boolean: {} },

src/types.ts

@@ -73,6 +73,8 @@ export interface CardConfig extends LovelaceCardConfig {
   showBrowseMediaInPlayerSection?: boolean;
   showChannelInPlayer?: boolean;
   hidePlaylistInPlayer?: boolean;
+  showFastForwardAndRewindButtons?: boolean;
+  fastForwardAndRewindStepSizeSeconds?: number;
 }
 
 export interface MediaArtworkOverride {