fix: progress bar stopped working with Home Assistant 2023.11

fixes #192
punxaphil · Nov 11, 2023 · b67505c · b67505c
1 parent 5bea292
commit b67505c
Showing 1 changed file with 9 additions and 4 deletions.
diff --git a/src/components/progress.ts b/src/components/progress.ts
@@ -2,6 +2,7 @@ import { css, html, LitElement } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import Store from '../model/store';
 import { MediaPlayer } from '../model/media-player';
+import { styleMap } from 'lit-html/directives/style-map.js';
 
 class Progress extends LitElement {
   @property() store!: Store;
@@ -28,7 +29,7 @@ class Progress extends LitElement {
         <div class="progress">
           <span>${convertProgress(this.playingProgress)}</span>
           <div class="bar">
-            <paper-progress value="${this.playingProgress}" max="${mediaDuration}"></paper-progress>
+            <div class="progress-bar" style=${this.progressBarStyle(mediaDuration)}></div>
           </div>
           <span> -${convertProgress(mediaDuration - this.playingProgress)}</span>
         </div>
@@ -37,6 +38,10 @@ class Progress extends LitElement {
     return html``;
   }
 
+  private progressBarStyle(mediaDuration: number) {
+    return styleMap({ width: `${(this.playingProgress / mediaDuration) * 100}%` });
+  }
+
   trackProgress() {
     const position = this.activePlayer?.attributes.media_position || 0;
     const playing = this.activePlayer?.isPlaying();
@@ -70,9 +75,9 @@ class Progress extends LitElement {
         padding: 5px;
       }
 
-      paper-progress {
-        flex-grow: 1;
-        --paper-progress-active-color: var(--accent-color);
+      .progress-bar {
+        background-color: var(--accent-color);
+        height: 50%;
       }
     `;
   }