API tools faq
paste
Advertisement
Guest User

Media Player code

a guest
Feb 28th, 2023
62
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.16 KB | None | 0 0
raw download clone embed print report
  1. custom_29:
  2. - title: hide
  3. cards:
  4. - type: custom:mushroom-media-player-card
  5. entity: media_player.currently_playing
  6. icon: mdi:play
  7. use_media_info: true
  8. icon_type: entity-picture
  9. show_volume_level: false
  10. media_controls:
  11. - play_pause_stop
  12. - next
  13. volume_controls:
  14. - volume_set
  15. fill_container: false
  16. layout: horizontal
  17. tap_action:
  18. action: fire-dom-event
  19. browser_mod:
  20. service: browser_mod.popup
  21. data:
  22. title: Currently Playing
  23. content:
  24. type: custom:stack-in-card
  25. cards:
  26. - type: custom:mushroom-media-player-card
  27. entity: media_player.currently_playing
  28. icon_type: none
  29. layout: vertical
  30. media_controls:
  31. - previous
  32. - play_pause_stop
  33. - next
  34. volume_controls:
  35. - volume_set
  36. - volume_buttons
  37. show_volume_level: false
  38. use_media_info: true
  39. collapsible_controls: false
  40. card_mod:
  41. style:
  42. mushroom-state-info$: |
  43. /* CSS for Mushroom Popup Media Player */
  44. .secondary:before {
  45.  
  46. /* Add album name between song title and artist name */
  47. {% if state_attr(config.entity, 'media_album_name') != none %}
  48. content: "{{ state_attr(config.entity, 'media_album_name')}}\A";
  49. {% endif %}
  50.  
  51. /* Format title to fit on seperate line */
  52. white-space: pre;
  53. text-overflow: ellipsis;
  54. }
  55. .: |
  56. ha-card {
  57.  
  58. /* Remove border from media player */
  59. --ha-card-border-width: 0;
  60.  
  61. /* Apply album art color to media player icon & volume bar */
  62. --rgb-state-media-player: var(--album-art-color);
  63.  
  64. /* Disable transitions */
  65. transition: all 0s;
  66. }
  67. .actions {
  68.  
  69. /* Apply album art color to media player controls */
  70. --rgb-primary-text-color: var(--album-art-color);
  71. --primary-text-color: rgb(var(--album-art-color));
  72.  
  73. /* Move volume button to seperate row */
  74. display: block !important;
  75. }
  76. ha-card:before {
  77. content: "";
  78.  
  79. /* Show album art above media player when active and default image when idle */
  80. {% if is_state(config.entity, ['playing', 'paused']) %}
  81. background: url( '{{ state_attr(config.entity, "entity_picture") }}') center no-repeat;
  82. {% else %}
  83. background: url('/local/idle_art.png') center no-repeat;
  84. {% endif %}
  85.  
  86. /* Add padding around album art */
  87. margin: 0px 4px 16px;
  88.  
  89. /* Add drop shadow to album art */
  90. filter: drop-shadow(4px 4px 6px rgba(var(--album-art-color), 0.3));
  91.  
  92. /* Round borders of album art */
  93. border-radius: var(--control-border-radius);
  94.  
  95. /* Adjust the album art aspect ratio based on media type */
  96. {% set media_type = state_attr(config.entity, 'media_content_type') %}
  97. {% if media_type == 'tvshow' %}
  98. aspect-ratio: 16 / 9;
  99. {% elif media_type == 'movie' %}
  100. aspect-ratio: 2 / 3;
  101. {% else %}
  102. aspect-ratio: 1 / 1;
  103. {% endif %}
  104.  
  105. /* Stretch album art to fit box. Fix for if album art is not sized correctly */
  106. background-size: 100% 100%;
  107. }
  108. mushroom-button {
  109.  
  110. /* Size volume button to match other controls and center */
  111. display: flex;
  112. width: calc((100% / 3) - (var(--spacing) / 3) * 2);
  113. margin: auto;
  114. }
  115. mushroom-media-player-media-control,
  116. mushroom-media-player-volume-control {
  117.  
  118. /* Correct margins for volume button on second row */
  119. display: flex;
  120. margin-right: 0px !important;
  121.  
  122. /* Check if PLAY|STOP are supported and adjust margin accordingly */
  123. {% if state_attr(config.entity, 'supported_features') | int | bitwise_and(20480) > 0 %}
  124. margin-bottom: var(--spacing) !important;
  125. {% endif %}
  126. }
  127. - entity: media_player.currently_playing
  128. hide:
  129. icon: true
  130. name: true
  131. runtime: true
  132. source: true
  133. power: true
  134. state_label: true
  135. volume: true
  136. info: true
  137. progress: false
  138. controls: true
  139. more_info: false
  140. type: custom:mini-media-player
  141. toggle_power: false
  142. group: true
  143. card_mod:
  144. style:
  145. mmp-progress$: |
  146. paper-progress {
  147.  
  148. /* Apply album art color to progress bar when paused */
  149. --paper-progress-container-color: rgba(var(--album-art-color), 0.2) !important;
  150.  
  151. /* Apply album art color to progress bar when playing */
  152. --paper-progress-active-color: rgb(var(--album-art-color)) !important;
  153. }
  154. .: |
  155. ha-card {
  156.  
  157. /* Move progress bar up into gap. Check if PLAY|STOP are supported */
  158. --base-offset: calc(4 * var(--mush-spacing, 12px)
  159. + 1.33 * var(--mush-spacing, 12px)
  160. + var(--mush-card-primary-line-height, 1.5) * var(--mush-card-primary-font-size, 14px)
  161. + var(--mush-card-secondary-line-height, 1.5) * var(--mush-card-secondary-font-size, 12px)
  162. + var(--mush-control-height, 42px));
  163.  
  164. /* Check if Play (16385) or Stop (4096) are supported and add control button height if they are */
  165. {% if state_attr(config.entity, 'supported_features') | int | bitwise_and(20480) > 0 %}
  166. --control-offset: calc(var(--mush-spacing, 12px) + var(--mush-control-height, 42px));
  167. {% else %}
  168. --control-offset: 0px;
  169. {% endif %}
  170.  
  171. /* Check if album name is present and add to height if it is */
  172. {% set album_name = state_attr(config.entity, 'media_album_name') %}
  173. {% if album_name == None or album_name == "" %}
  174. --album-offset: 0px;
  175. {% else %}
  176. --album-offset: calc(var(--mush-card-secondary-line-height, 1.5) * var(--mush-card-secondary-font-size, 12px));
  177. {% endif %}
  178.  
  179. bottom: calc(var(--base-offset) + var(--control-offset) + var(--album-offset));
  180.  
  181. /* Correct margins for progress bar */
  182. margin: 0px 28px -12px;
  183.  
  184. /* Set height of card to match pregress bar height */
  185. height: var(--mmp-progress-height);
  186.  
  187. /* Remove border outline */
  188. --ha-card-border-width: 0;
  189.  
  190. /* Round corners of progress bar */
  191. --mmp-border-radius: var(--control-border-radius, 12px) !important;
  192.  
  193. /* Set height of progress bar */
  194. --mmp-progress-height: 12px !important;
  195.  
  196. /* Remove transitions to prevent progress bar floating in */
  197. transition: all 0s;
  198. }
  199. card_mod:
  200. style: |
  201. :host {
  202.  
  203. /* Assign album art color to variable used in popup */
  204. --album-art-color:
  205. {% if is_state('media_player.currently_playing', ['playing', 'paused']) %}
  206. {{ states('sensor.muted_color') }}
  207. {% else %}
  208. 141, 117, 238
  209. {% endif %};
  210.  
  211. /* Remove background because it is applied to popup */
  212. --ha-card-background: none;
  213.  
  214.  
  215. }
  216. card_mod:
  217. style:
  218. ha-dialog$: |
  219. .mdc-dialog__surface {
  220.  
  221. /* Apply gradient background to popup using album art colors. Set to default colors when idle */
  222. {% if is_state('media_player.currently_playing', ['playing', 'paused']) %}
  223. background: linear-gradient(305deg, transparent 50%, rgba({{ states('sensor.dark_vibrant_color') }}, 0.4)),
  224. linear-gradient(55deg, transparent 50%, rgba({{ states('sensor.vibrant_color') }}, 0.2)),
  225. linear-gradient(180deg, transparent 40%, rgba({{ states('sensor.dark_muted_color') }}, 0.3));
  226. {% else %}
  227. background: linear-gradient(0deg, transparent 40%, rgba(192, 127, 190, 0.3)),
  228. linear-gradient(240deg, transparent 40%, rgba(143, 119, 237, 0.3)),
  229. linear-gradient(120deg, transparent 40%, rgba(122, 181, 239, 0.3));
  230. {% endif %}
  231. }
  232. ha-header-bar$: |
  233. .mdc-top-app-bar {
  234.  
  235. /* Remove header background so that popup background is visible */
  236. --mdc-theme-primary: none;
  237.  
  238. /* Reduced the gap between header and album art */
  239. margin-bottom: -16px;
  240. }
  241. .: |
  242. :host {
  243.  
  244. /* Set width of popup */
  245. --popup-min-width: 450px;
  246. }
  247. card_mod:
  248. style: |
  249. /* CSS for Mushroom Mini Media Player */
  250. ha-card {
  251.  
  252. /* Apply album art color to volume bar */
  253. --rgb-state-media-player: var(--album-art-color);
  254.  
  255. /* Apply gradient background to sticky media player using album art colors */
  256. {% if is_state('media_player.currently_playing', ['playing', 'paused']) %}
  257. --ha-card-background: linear-gradient(135deg, rgba({{ states('sensor.dark_vibrant_color') }}, 0.3),
  258. rgba({{ states('sensor.dark_muted_color') }}, 0.3));
  259. {% endif %}
  260. }
  261. .actions {
  262.  
  263. /* Apply album art color to sticky media player controls */
  264. --rgb-primary-text-color: var(--album-art-color);
  265. --primary-text-color: rgb(var(--album-art-color));
  266.  
  267. /* Allow the album info to display more text */
  268. max-width: fit-content;
  269. }
  270. mushroom-media-player-volume-control {
  271.  
  272. /* Fix the width of the volume bar */
  273. width: 200px;
  274. }
  275. :host {
  276.  
  277. /* Add background to host to prevent transparent card */
  278. border-radius: var(--ha-card-border-radius, 12px);
  279. background: var(--card-background-color);
  280.  
  281. /* Assign album art color to variable used in sticky media player */
  282. {% if is_state('media_player.currently_playing', ['playing', 'paused']) %}
  283. --album-art-color: {{ states('sensor.muted_color') }};
  284. {% else %}
  285.  
  286. /* Hide the sticky media player when it is idle */
  287. display: none !important;
  288. {% endif %}
  289.  
  290. /* Make the media player sticky at the bottom of the page */
  291. position: sticky;
  292. bottom: 12px;
  293. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!