# MediaPlayer.yaml
# Built-in layouts for the MediaPlayer widget.
# This file is part of Reactor. Copyright (c) 2020-2024 Patrick H. Rigney, All Rights Reserved.
---
version: 24329
defaultlayout: default
layouts:
  default:
    content: |
      <h1 class='widget-title' data-bind='data("title");entity.name;#[title]'></h1>
      <h2 class='widget-value' data-bind='entity.attributes.av_transport.state'></h2>
      <div class='widget-body'>
        <div class="mp-controls flex-container">
          <div class="mediabutton offset-2 col-3 text-center" data-action="pause">
            <i class="bi bi-pause"></i>
          </div>
          <div class="mediabutton offset-2 col-3 text-center" data-action="play">
            <i class="bi bi-play"></i>
          </div>
          <div class="col-2"></div>
        </div>
        <div class="spacer-4"></div>
        <div class="mp-controls flex-container">
          <div class="mediabutton col-4 text-center" data-action="prev">
            <i class="bi bi-skip-backward"></i>
          </div>
          <div class="mediabutton col-4 text-center" data-action="stop">
            <i class="bi bi-stop"></i>
          </div>
          <div class="mediabutton col-4 text-center" data-action="next">
            <i class="bi bi-skip-forward"></i>
          </div>
        </div>
      </div>
      <div class="widget-footer">
        <div class='mp-track' data-bind='entity.attributes.av_transport.current_title;#---'></div>
        <div class='mp-artist' data-bind='entity.attributes.av_transport.current_artist;#---'></div>
      </div>
    active_expression: upper(entity.attributes.av_transport.state) != 'STOPPED'
    actions:
      prev:
        action: media_navigation.previous_track
      next:
        action: media_navigation.next_track
      stop:
        action: av_transport.stop
      play:
        action: av_transport.play
      pause:
        action: av_transport.pause
    styles: |
      $ .mp-track { font-size: 0.67rem; line-height: 1.2em; overflow: hidden; text-align: center; }
      $ .mp-artist { font-size: 0.67rem; line-height: 1.2em; overflow: hidden; text-align: center; }
      $ .mp-controls { font-size: 1.5rem; }
      $ .mediabutton { }
      $.active { background-color: var(--color-active-background) !important; color: var(--color-active-text); }
      $.update-pending { background-color: var(--color1) !important; color: var(--color1-text); }
      $ h1.widget-title { width: 100%; font-size: 1rem; font-weight: normal; text-align: center; padding-top: 0.33rem; }
      $ h2.widget-value { width: 100%; font-size: 1rem; font-weight: normal; text-align: center; margin-top: auto; padding-bottom: 0.33rem; }
      $ div.widget-body { position: absolute; top: 0; left: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; }
      $ div.widget-footer { position: absolute; bottom: 0; width: 100%; }
