fix stop media position value update interval or setting if getValueFromHass is false, update music player example with expressive slider

Author: Nerwyn

README.md

@@ -1685,7 +1685,7 @@ custom_actions:
     icon: mdi:volume-high
     tap_action:
       action: eval
-      eval: >-
+      eval: |-
         const card = this.parentNode.parentNode;
         const volume = card.querySelector("#volume")
         if (volume.hasAttribute("enabled")) {
@@ -1837,23 +1837,29 @@ custom_actions:
     step: 1
     styles: |-
       :host {
-        height: calc(3 * var(--height));
-        --height: 4px;
+        height: calc(2.5 * var(--height));
         justify-content: flex-start;
         font-size: 12px;
         font-weight: 300;
+        
+        --height: 10px;
         --tooltip-display: none;
       }
       .container {
-        --thumb-width: 1px;
-        --thumb-border-radius: 0;
+        overflow: visible;
+        overflow-x: clip;
+
+        --thumb-width: 4px;
+        --thumb-border-radius: 4px;
       }
 
       .background {
         background: white;
         opacity: 0.2;
+        height: 4px;
+        top: 33%;
       }
-      input {
+      .slider {
         margin: 0;
       }
       @media (hover: hover) {
@@ -1865,6 +1871,19 @@ custom_actions:
         --color: var(--active-color);
       }
 
+      .thumb {
+        height: 24px;
+        top: -66%;
+      }
+      .thumb .active {
+        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='610 1101 1220 75'%3E%3Cpath fill='%23D0BCFF' d='M1870.425 1173.746c-29.448 0-58.665-7.477-84.493-21.622-.03-.016-.061-.032-.09-.049-43.555-23.82-95.546-23.809-139.091.039a4.079 4.079 0 0 1-.113.062c-25.803 14.109-54.984 21.567-84.394 21.568-29.449 0-58.667-7.478-84.495-21.623-43.554-23.852-95.539-23.865-139.089-.052-.03.018-.062.034-.092.051-25.83 14.146-55.048 21.623-84.497 21.623-29.423 0-58.613-7.463-84.425-21.584l-.077-.042c-43.572-23.863-95.596-23.862-139.164-.001l-.085.046c-25.809 14.117-55.001 21.581-84.418 21.581h-.001c-29.45-.001-58.669-7.479-84.498-21.625-43.534-23.845-95.513-23.863-139.063-.058l-.108.06c-25.829 14.146-55.047 21.623-84.496 21.623-29.398 0-58.566-7.451-84.362-21.551-.048-.024-.095-.05-.142-.075-43.568-23.863-95.593-23.863-139.163 0l-.081.043c-25.811 14.12-55.001 21.583-84.421 21.583-29.45 0-58.668-7.478-84.497-21.624-7.521-4.118-10.278-13.554-6.159-21.074s13.554-10.277 21.074-6.158c43.57 23.862 95.593 23.864 139.163 0l.098-.053c25.807-14.114 54.991-21.573 84.406-21.573 29.398 0 58.567 7.451 84.364 21.55l.14.076c43.534 23.843 95.508 23.864 139.056.059l.113-.063c25.828-14.145 55.049-21.622 84.496-21.622h.002c29.449 0 58.668 7.478 84.497 21.625 43.57 23.863 95.595 23.862 139.165.001.021-.013.043-.024.065-.036 25.813-14.124 55.011-21.591 84.438-21.591 29.42 0 58.61 7.463 84.421 21.582l.082.045c43.539 23.847 95.521 23.862 139.074.049l.096-.053c25.829-14.146 55.047-21.623 84.496-21.623s58.667 7.477 84.496 21.623c43.58 23.867 95.604 23.866 139.172.005l.118-.064c25.803-14.108 54.98-21.564 84.389-21.564 29.448-.001 58.666 7.476 84.494 21.62l.114.063c43.549 23.807 95.528 23.791 139.063-.051 7.52-4.121 16.955-1.361 21.073 6.159 4.119 7.521 1.361 16.955-6.159 21.073-25.828 14.146-55.045 21.622-84.492 21.622z'%3E%3CanimateTransform attributeName='transform' calcMode='linear' dur='1s' from='0 0' repeatCount='indefinite' to='312.5 0' type='translate'/%3E%3C/path%3E%3C/svg%3E");
+        mask-position: 0 50%;
+        mask-repeat: repeat-x;
+        mask-size: auto 100%;
+        height: var(--height);
+        top: 7px
+      }
+
       :host::before {
         content: '{% set minutes = (value / 60) | int %}{% set seconds = (value - 60 * minutes)
         | int %}{{ minutes }}:{{ 0 if seconds < 10 else "" }}{{ seconds | int }}';
@@ -1879,7 +1898,7 @@ custom_actions:
         right: 0;
         bottom: 0;
       }
-    value_from_hass_delay: 5000
+    value_from_hass_delay: 2000
 grid_options:
   columns: 12
   rows: auto