Media Card Seek Functionality (#4907)

* Seek function

* Remove a testing section

* reviews

src/data/media-player.ts

@@ -3,6 +3,7 @@ import { HomeAssistant } from "../types";
 import { timeCachePromiseFunc } from "../common/util/time-cache-function-promise";
 
 export const SUPPORT_PAUSE = 1;
+export const SUPPORT_SEEK = 2;
 export const SUPPORT_VOLUME_SET = 4;
 export const SUPPORT_VOLUME_MUTE = 8;
 export const SUPPORT_PREVIOUS_TRACK = 16;

src/panels/lovelace/cards/hui-media-control-card.ts

@@ -26,6 +26,7 @@ import {
   SUPPORTS_PLAY,
   fetchMediaPlayerThumbnailWithCache,
   SUPPORT_STOP,
+  SUPPORT_SEEK,
 } from "../../../data/media-player";
 import { hasConfigOrEntityChanged } from "../common/has-changed";
 import { HomeAssistant, MediaEntity } from "../../../types";
@@ -118,7 +119,10 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
               <paper-progress
                 .max="${stateObj.attributes.media_duration}"
                 .value="${stateObj.attributes.media_position}"
-                class="progress"
+                class="progress ${classMap({
+                  seek: supportsFeature(stateObj, SUPPORT_SEEK),
+                })}"
+                @click=${(e: MouseEvent) => this._handleSeek(e, stateObj)}
               ></paper-progress>
             `}
         <div class="controls">
@@ -273,6 +277,20 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
     });
   }
 
+  private _handleSeek(e: MouseEvent, stateObj: MediaEntity): void {
+    if (!supportsFeature(stateObj, SUPPORT_SEEK)) {
+      return;
+    }
+
+    const percent = e.offsetX / this.offsetWidth;
+    const position = (e.currentTarget! as any).max * percent;
+
+    this.hass!.callService("media_player", "media_seek", {
+      entity_id: this._config!.entity,
+      seek_position: position,
+    });
+  }
+
   static get styles(): CSSResult {
     return css`
       .ratio {
@@ -383,6 +401,10 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
         --paper-progress-active-color: var(--accent-color);
         --paper-progress-container-color: rgba(200, 200, 200, 0.5);
       }
+
+      .seek:hover {
+        --paper-progress-height: 8px;
+      }
     `;
   }
 }