my-button media_player support and more bug fixes.

my-button media_player support. It has seekbar in bottom, pause/play button in bottom left before seekbar, volume slider in right side if active and will show song title and artist under label and give it scrolling effect if text is too long to be displayed
 There has been a lot of bugs around some of the new logic with sliderMin and trying to get a transition to look nice on the slider by default. Hopefully I have found and fixed them all.

docs/cards/button.md

@@ -28,11 +28,70 @@ It is completely customizable now and fully templatable. But is still very much
 | stats | object | depends on entity type | This is a static container that can be used to display a statistic in the top right corner. Default for light is brightness % otherwise it's entity state. You can give the stats container actions like any other component. |
 | camera | string | Nothing | This can be set as a camera entity and then it can display the stream in the stats container. Only used with locks. |
 | slider | object | [Slider config](/docs/cards/slider-v2.md) | Config for slider inside card. Look at available config keys in readme. Only extra key here is 'show': true/false |
+| seekbar | object | [Slider config](/docs/cards/slider-v2.md) | Just another slider config with extra key 'show', but only used for media_player seekbars |
 | styles | object | [Button styles](/src/cards/styles/my-button.styles.ts) | Default harcoded styles. For dynamic styles you can inspect the DOM to find css key to style or reference 'initializeStyles' function in [my-button.ts](/src/cards/my-button.ts) |
 
 
 ## Examples
-![Examples](/docs/images/my-button/example-1.png)
+![Examples](/docs/images/my-button/lights.png)
+![Examples](/docs/images/my-button/lock.png)
+<br>
+![Examples](/docs/images/my-button/Light-switch-mediaplayer.png)
+![Examples](/docs/images/my-button/media_player.gif)
+
+```yaml
+- type: custom:my-button
+  entity: light.basement_room_spots
+  label: Room
+  icon: mdi:wall-sconce-flat
+
+- type: custom:my-button
+  entity: light.basement_entrance_spots
+  label: Entrance
+  icon: mdi:wall-sconce-flat
+
+- type: custom:my-button
+  entity: light.basement_hall_spots
+  label: Hall
+  icon: mdi:wall-sconce-flat
+
+
+- type: custom:my-button
+  entity: lock.front_door
+  label: Front Door
+  camera: camera.front_door_cam
+  tap_action:
+    action: none
+  slider:
+    show: true
+
+
+- type: custom:my-button
+  entity: media_player.office_google
+  label: Google Speaker
+
+
+- type: horizontal-stack
+  title: Office
+  cards:
+    - type: custom:my-button
+      entity: light.grono_lamp_office
+      label: Lamp
+      icon: mdi:desk-lamp
+
+    - type: custom:my-button
+      entity: switch.anthon_beast
+      label: PC
+      slider:
+        show: true
+      tap_action:
+        action: more-info
+
+    - type: custom:my-button
+      entity: media_player.office_google
+      label: Google Speaker
+```
+
 ```yaml
 - type: custom:my-button
   entity: light.front_door_spots
@@ -66,6 +125,17 @@ It is completely customizable now and fully templatable. But is still very much
           - color: 'orange'
       tap_action:
         action: toggle
+  slider:
+    show: true
+    vertical: true
+    styles:
+      card:
+        - background: 'orange'
+  seekbar:
+    show: true
+    styles:
+      card:
+        - background: 'purple'
   styles:
     card:
       - background: rgba(230, 230, 230, 0.5)
@@ -90,7 +160,7 @@ The same with the label and stats.
 When doing it nested, the names are a little different since we dont need to specify sliderContainer, now we can just style the 'container' in the slider->styles.
 
 ```yaml
-Styles can be set to the background of the track by setting it from the styles config in the root:
+'Styles can be set on the background of the track by setting it from the styles config in the root:'
 - type: horizontal-stack
   cards:
     - type: custom:my-button
@@ -105,7 +175,7 @@ Styles can be set to the background of the track by setting it from the styles c
         sliderTrack:
           - background: rgba(255, 0, 0, 0.5)
 
-Or by setting it in the track directly on the slider:
+'Or by setting it in the track directly on the slider:'
 - type: custom:my-button
   entity: lock.front_door
   label: 
@@ -118,7 +188,7 @@ Or by setting it in the track directly on the slider:
       track:
         - background: rgba(255, 0, 0, 0.5)
 
-If using the buttons, you can set individual styling for each button. Or set a default for all of them and specify a specific style for one of them:
+'If using the buttons, you can set individual styling for each button. Or set a default for all of them and specify a specific style for one of them:'
 - type: custom:my-button
   entity: lock.front_door
   label: 

src/cards/styles/my-button.styles.ts

@@ -15,7 +15,7 @@ const styles = {
     card: {
             height: '125px',
             width: '100%',
-            'min-width': 'fit-content',
+            // 'min-width': 'fit-content',
             background: 'var(--card-background-color)',
             overflow: 'hidden',
             cursor: 'pointer',
@@ -51,27 +51,34 @@ const styles = {
         'overflow': 'hidden',
     },
     labelContainer: {
-            width: '100%',
-            height: '100%',
-            display: 'flex',
-            'flex-direction': 'column',
+        width: '100%',
+        height: '100%',
+        display: 'flex',
+        'flex-direction': 'column',
+        'align-items': 'flex-start',
+        overflow: 'hidden',
     },
     label: {
-            padding: '0',
-            margin: '0 10px',
-            color: 'var(--primary-text-color)',
-            'font-weight': 'bold',
-            cursor: 'pointer',
+        padding: '0',
+        margin: '0 10px',
+        color: 'var(--primary-text-color)',
+        'font-weight': 'bold',
+        cursor: 'pointer',
     },
     extraText: {
         margin: '0 10px',
         color: 'var(--primary-text-color)',
         'font-weight': 'normal',
-        'font-size': '12px'
+        'font-size': '12px',
+        'white-space': 'nowrap',
+        overflow: 'hidden',
+        // 'text-overflow': 'ellipsis'
+        // animation: 'marquee 10s linear infinite',
     },
     row1: {
-            display: 'flex',
-            'justify-content': 'space-between',
+        display: 'flex',
+        'justify-content': 'space-between',
+        'min-height': '55px',
     },
     row2: {
     },
@@ -88,9 +95,9 @@ const styles = {
         display: 'flex',
         'align-items': 'center',
         'justify-content': 'center',
-        'border-radius': '50%',
-        'box-shadow': '0px 4px 8px rgba(0, 0, 0, 0.2)',
-        'border': '1px solid var(--secondary-background-color)'
+        // 'border-radius': '50%',
+        // 'box-shadow': '0px 4px 8px rgba(0, 0, 0, 0.2)',
+        // 'border': '1px solid var(--secondary-background-color)'
     },
     buttonText: {
         padding: '0px',
@@ -137,5 +144,30 @@ const styles = {
     },
     sliderProgressVer: {
         'background': 'linear-gradient(to left, var(--paper-item-icon-active-color), transparent)'
+    },
+
+    seekbarCard: {
+        'border-radius': '0px',
+        background: 'transparent',
+        'box-shadow': 'none',
+        cursor: 'default',
+        'margin-left': '30px'
+    },
+    seekbarContainer: {
+        'border-radius': '0px',
+    },
+    seekbarTrack: {
+        background: 'transparent',
+    },
+    seekbarThumb: {
+        'height': '100%',
+        'width': '3px',
+        // 'top': '6px',
+        'right': '0px',
+        'border-radius': '50px',
+        'background': 'linear-gradient(to top, var(--paper-item-icon-active-color) -20%, transparent 70%)'
+    },
+    seekbarProgress: {
+        'background': 'transparent'
     }
 }

src/types/types.ts

@@ -150,6 +150,11 @@ export interface MyButtonStylesConfig {
   sliderThumbVer?: CssStyleConfig;
   sliderProgressHor?: CssStyleConfig;
   sliderProgressVer?: CssStyleConfig;
+  seekbarCard?: CssStyleConfig;
+  seekbarContainer?: CssStyleConfig;
+  seekbarTrack?: CssStyleConfig;
+  seekbarThumb?: CssStyleConfig;
+  seekbarProgress?: CssStyleConfig;
 }