<cider-menu-panel v-if="menuPanel.visible"> </cider-menu-panel>
<transition name="wpfade">
  <div
    class="bg-artwork-container"
    v-if="cfg.visual.window_background_style == 'artwork'"
    :class="{noanimation: (!cfg.visual.bg_artwork_rotation || !animateBackground)}">
    <img
      @load="chrome.artworkReady = true"
      class="bg-artwork a" />
    <img class="bg-artwork b" />
  </div>
</transition>
<transition name="wpfade">
  <div class="bg-artwork--placeholder"></div>
</transition>
<transition name="modal">
  <c2-upgrade
    v-if="modals.c2Upgrade"></c2-upgrade>
</transition>
<transition name="modal">
  <add-to-playlist
    :playlists="playlists.listing"
    v-if="modals.addToPlaylist"></add-to-playlist>
</transition>
<transition name="modal">
  <audio-controls v-if="modals.audioControls"></audio-controls>
</transition>
<transition name="modal">
  <audio-playbackrate v-if="modals.audioPlaybackRate"></audio-playbackrate>
</transition>
<transition name="modal">
  <audio-settings v-if="modals.audioSettings"></audio-settings>
</transition>
<transition name="modal">
  <castmenu v-if="modals.castMenu"></castmenu>
</transition>
<transition name="modal">
  <pathmenu v-if="modals.pathMenu"></pathmenu>
</transition>
<transition name="modal">
  <airplay-modal v-if="modals.airplayPW"></airplay-modal>
</transition>
<transition name="modal">
  <plugin-menu v-if="modals.pluginMenu"></plugin-menu>
</transition>
<transition name="modal">
  <settings-window v-if="modals.settings"></settings-window>
</transition>
<transition name="modal">
  <eq-view v-if="modals.equalizer"></eq-view>
</transition>
<transition name="modal">
  <qrcode-modal
    v-if="modals.qrcode"
    :src="webremoteqr"
    :url="webremoteurl"></qrcode-modal>
</transition>
<transition name="modal">
  <moreinfo-modal
    v-if="modals.moreInfo"
    :data="moreinfodata"></moreinfo-modal>
</transition>
<div
  id="apple-music-video-container"
  :class="{'mini': mvViewMode == 'mini'}">
  <div id="apple-music-video-player-controls">
    <div
      id="player-exit"
      title="Close"
      @click="exitMV();fullscreen(false);">
      <svg
        fill="white"
        xmlns="http://www.w3.org/2000/svg"
        width="21"
        height="21"
        viewBox="0 0 21 21"
        aria-role="presentation"
        focusable="false"
        @click="exitMV();fullscreen(false);">
        <path
          d="M10.5 21C4.724 21 0 16.275 0 10.5S4.724 0 10.5 0 21 4.725 21 10.5 16.276 21 10.5 21zm-3.543-5.967a.96.96 0 00.693-.295l2.837-2.842 2.85 2.842c.167.167.41.295.693.295.552 0 1.001-.461 1.001-1.012 0-.281-.115-.512-.295-.704L11.899 10.5l2.85-2.855a.875.875 0 00.295-.68c0-.55-.45-.998-1.001-.998a.871.871 0 00-.668.295l-2.888 2.855-2.862-2.843a.891.891 0 00-.668-.281.99.99 0 00-1.001.986c0 .269.116.512.295.678L9.088 10.5l-2.837 2.843a.926.926 0 00-.295.678c0 .551.45 1.012 1.001 1.012z"
          fill-rule="nonzero" />
      </svg>
    </div>
    <div
      id="captions"
      v-if="lyricon && mvViewMode == 'full'">
      {{ (lyricon ? (lyrics.length > 0 && lyrics[currentLyricsLine] && lyrics[currentLyricsLine].line ? lyrics[currentLyricsLine].line.replace("lrcInstrumental", "") : "") : "") + (lyricon ? (lyrics.length > 0 && lyrics[currentLyricsLine] && lyrics[currentLyricsLine].line ? (lyrics[currentLyricsLine].translation ? "\n\r" + lyrics[currentLyricsLine].translation : "") : "") : "") }}
    </div>
    <div class="playback-info music-player-info">
      <div
        class="song-artist-album-content"
        v-if="mvViewMode == 'full'"
        style="display: inline-block; -webkit-box-orient: horizontal; white-space: nowrap">
        <div
          class="song-artist"
          style="display: inline-block">
          {{ mk.nowPlayingItem?.attributes?.artistName ?? "" }}
        </div>
      </div>
      <div
        class="song-name"
        v-if="mvViewMode == 'full'">
        {{ mk.nowPlayingItem?.attributes?.name ?? "" }}
        <div
          class="explicit-icon"
          v-if="mk.nowPlayingItem?.attributes?.contentRating == 'explicit'"
          style="display: inline-block"></div>
      </div>
      <div
        class="song-progress"
        v-if="mvViewMode == 'full'">
        <p style="width: auto">{{ convertTime(getSongProgress()) }}</p>
        <input
          type="range"
          step="0.01"
          min="0"
          :style="progressBarStyle()"
          style="width: 95%"
          @input="playerLCD.desiredDuration = $event.target.value;playerLCD.userInteraction = true"
          @mouseup="mk.seekToTime($event.target.value);setTimeout(()=>{playerLCD.desiredDuration = 0;playerLCD.userInteraction = false}, 1000);"
          @touchend="mk.seekToTime($event.target.value);setTimeout(()=>{playerLCD.desiredDuration = 0;playerLCD.userInteraction = false}, 1000);"
          :max="mk.currentPlaybackDuration"
          :value="getSongProgress()" />
        <p style="width: auto">{{ convertTime(mk.currentPlaybackDuration) }}</p>
      </div>

      <div class="app-chrome-item display--large">
        <div
          class="app-chrome-item volume display--large"
          v-if="mvViewMode == 'full'">
          <button
            class="volume-button--small volume"
            @click="muteButtonPressed()"
            :class="{'active': this.cfg.audio.volume == 0}"
            :title="cfg.audio.muted ? $root.getLz('term.unmute') : $root.getLz('term.mute')"
            v-b-tooltip.hover></button>
          <input
            type="range"
            @wheel="volumeWheel"
            :step="cfg.audio.volumeStep"
            min="0"
            :max="cfg.audio.maxVolume"
            v-model="mk.volume"
            v-if="typeof mk.volume != 'undefined'"
            @change="checkMuteChange()"
            v-b-tooltip.hover
            :title="formatVolumeTooltip()" />
        </div>
        <template v-if="mvViewMode == 'full'">
          <button
            class="playback-button pause"
            @click="mk.pause()"
            v-if="mk.isPlaying"
            :title="$root.getLz('term.pause')"
            v-b-tooltip.hover></button>
          <button
            class="playback-button play"
            @click="mk.play()"
            v-else
            :title="$root.getLz('term.play')"
            v-b-tooltip.hover></button>
        </template>
        <div
          class="app-chrome-item generic"
          v-if="mvViewMode == 'full'">
          <template v-if="lyrics && lyrics != [] && lyrics.length > 0">
            <button
              class="playback-button--small lyrics"
              :title="$root.getLz('term.lyrics')"
              v-b-tooltip.hover
              :class="{'active': drawer.panel == 'lyrics'}"
              @click="invokeDrawer('lyrics')"></button>
          </template>
          <template v-else>
            <button
              class="playback-button--small lyrics"
              :style="{'opacity': 0.3, 'pointer-events': 'none'}"></button>
          </template>
        </div>
        <div
          id="player-pip"
          :class="{'mini': mvViewMode == 'mini'}"
          @click="pip()"
          title="Picture-in-Picture"
          v-b-tooltip.hover>
          <%- include("../svg/pip.svg") %>
        </div>
        <div
          id="player-fullscreen"
          v-if="mvViewMode == 'full'"
          @click="fullscreen(!fullscreenState, true)"
          title="Fullscreen"
          v-b-tooltip.hover>
          <%- include("../svg/fullscreen.svg") %>
        </div>
      </div>
    </div>
  </div>
  <div id="apple-music-video-player"></div>
</div>
