Added support for media progress with show_progress option

mini-media-player.js

@@ -1,4 +1,4 @@
-/* mini-media-player - version: v0.8.2 */
+/* mini-media-player - version: v0.8.3 */
 import { LitElement, html } from 'https://unpkg.com/@polymer/lit-element@^0.6.1/lit-element.js?module';
 
 class MiniMediaPlayer extends LitElement {
@@ -35,14 +35,15 @@ class MiniMediaPlayer extends LitElement {
       _hass: Object,
       config: Object,
       entity: Object,
-      source: String
+      source: String,
+      position: Number
     };
   }
 
   set hass(hass) {
+    const entity = hass.states[this.config.entity];
     this._hass = hass;
-    const entity = hass.states[this.config.entity]
-    if (this.entity !== entity) {
+    if (entity && this.entity !== entity) {
       this.entity = entity;
     }
   }
@@ -69,14 +70,17 @@ class MiniMediaPlayer extends LitElement {
     config.scroll_info = (config.scroll_info ? true : false);
     config.short_info = (config.short_info || config.scroll_info ? true : false);
     config.max_volume = Number(config.max_volume) || 100;
+    config.show_progress = (config.show_progress ? true : false);
 
     this.config = config;
   }
 
   shouldUpdate(changedProps) {
-    const entity = changedProps.has('entity') || changedProps.has('source');
-    const initial = changedProps.get('_hass') == undefined;
-    if (initial || entity) return true;
+    const change = changedProps.has('entity') || changedProps.has('source') || changedProps.has('position');
+    if (change) {
+      if (this.config.show_progress) this._checkProgress();
+      return true;
+    }
   }
 
   updated() {
@@ -100,7 +104,7 @@ class MiniMediaPlayer extends LitElement {
       <ha-card ?group=${config.group}
         ?more-info=${config.more_info} ?has-title=${config.title !== ''}
         artwork=${config.artwork} ?has-artwork=${has_artwork}
-        @click='${(e) => this._handleMore()}'>
+        @click='${(e) => this._handleMore()}' state=${entity.state}>
         <div id='artwork-cover'
           style='background-image: url("${attr.entity_picture}")'>
         </div>
@@ -126,6 +130,7 @@ class MiniMediaPlayer extends LitElement {
         </div>
         ${active && !hide_controls ? this._renderControlRow(entity) : html``}
         ${config.show_tts ? this._renderTts() : html``}
+        ${config.show_progress ? this._renderProgress(entity) : ''}
       </ha-card>`;
   }
 
@@ -163,6 +168,14 @@ class MiniMediaPlayer extends LitElement {
       </div>`;
   }
 
+  _renderProgress(entity) {
+    const show = this._showProgress();
+    return html`
+      <paper-progress id='progress' max=${entity.attributes.media_duration}
+        value=${this.position} class='transiting ${!show ? "hidden" : ""}'>
+      </paper-progress>`;
+  }
+
   _renderPowerStrip(entity, active, {config} = this) {
     if (entity.state == 'unavailable') {
       return html`
@@ -339,18 +352,51 @@ class MiniMediaPlayer extends LitElement {
     return e;
   }
 
+  async _checkProgress() {
+    if (this._isPlaying() && this._showProgress()) {
+      if (!this._positionTracker) {
+        this._positionTracker = setInterval(() => this.position = this._currentProgress(), 1000);
+      }
+    } else if (this._positionTracker) {
+      clearInterval(this._positionTracker);
+      this._positionTracker = null;
+    }
+    if (this._showProgress) {
+      this.position = this._currentProgress();
+    }
+  }
+
+  _showProgress() {
+    return (
+      (this._isPlaying() || this._isPaused())
+      && 'media_duration' in this.entity.attributes
+      && 'media_position' in this.entity.attributes
+      && 'media_position_updated_at' in this.entity.attributes);
+  }
+  _currentProgress() {
+    let progress = this.entity.attributes.media_position;
+    if (this._isPlaying()) {
+      progress += (Date.now() - new Date(this.entity.attributes.media_position_updated_at).getTime()) / 1000.0;
+
+    }
+    return progress;
+  }
+
+  _isPaused() {
+    return this.entity.state === 'paused';
+  }
+
+  _isPlaying() {
+    return this.entity.state === 'playing';
+  }
+
   _hasMediaInfo() {
     const items = this._media_info.map(item => {
       return item.info = this._getAttribute(item.attr);
     }).filter(item => item !== '');
     return items.length == 0 ? false : true;
   }
 
-  _hasAttribute(attr, {entity} = this) {
-    if (entity.ettributes[attr] && entity.ettributes[attr] !== '') return true;
-    return false;
-  }
-
   _getAttribute(attr, {entity} = this) {
     return entity.attributes[attr] || '';
   }
@@ -435,6 +481,9 @@ class MiniMediaPlayer extends LitElement {
           -webkit-justify-content: space-between;
           justify-content: space-between;
         }
+        .hidden {
+          display: none;
+        }
         .flex-wrap[wrap] {
           flex-wrap: wrap;
         }
@@ -589,6 +638,28 @@ class MiniMediaPlayer extends LitElement {
           overflow: hidden;
           text-overflow: ellipsis;
         }
+        #progress {
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          right: 0;
+          width: 100%;
+          height: var(--paper-progress-height, 4px);
+          --paper-progress-active-color: var(--accent-color);
+          --paper-progress-container-color: rgba(150,150,150,0.25);
+          --paper-progress-transition-duration: 1s;
+          --paper-progress-transition-timing-function: linear;
+          --paper-progress-transition-delay: 0s;
+        }
+        ha-card[state='paused'] #progress {
+          --paper-progress-active-color: var(--disabled-text-color, rgba(150,150,150,.5));
+        }
+        ha-card[group] #progress {
+          position: relative
+        }
+        #unavailable {
+          white-space: nowrap;
+        }
         @keyframes slide {
           from {transform: translate(0, 0); }
           to {transform: translate(-100%, 0); }
@@ -597,9 +668,6 @@ class MiniMediaPlayer extends LitElement {
           from {transform: translate(100%, 0); }
           to {transform: translate(0, 0); }
         }
-        #unavailable {
-          white-space: nowrap;
-        }
       </style>
     `;
   }