<script type="text/x-template" id="mini-view">
    <div class="mini-view" tabindex="0">
        <div class="background">
        </div>
        <div class="player-pin" title="Pin to Top" v-if="app.cfg.visual.miniplayer_top_toggle === false"
             @click="app.pinMiniPlayer()">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28" fill="none" class="feather feather-pin">
                <path d="M7.05664 16.3613C7.05664 17.1523 7.59277 17.6797 8.42773 17.6797H13.1299V21.8369C13.1299 23.0762 13.7539 24.3242 14 24.3242C14.2373 24.3242 14.8613 23.0762 14.8613 21.8369V17.6797H19.5635C20.3984 17.6797 20.9346 17.1523 20.9346 16.3613C20.9346 14.4717 19.4316 12.5293 16.9531 11.6152L16.6631 7.52832C17.9727 6.78125 19.0098 5.96387 19.4668 5.38379C19.7041 5.06738 19.8271 4.75098 19.8271 4.46973C19.8271 3.88965 19.3789 3.45898 18.7197 3.45898H9.27148C8.6123 3.45898 8.16406 3.88965 8.16406 4.46973C8.16406 4.75098 8.28711 5.06738 8.52441 5.38379C8.98145 5.96387 10.0186 6.78125 11.3281 7.52832L11.0469 11.6152C8.55957 12.5293 7.05664 14.4717 7.05664 16.3613Z"
                      fill="#ff2654" />
            </svg>
        </div>
        <div class="player-pin" title="Unpin to Top" v-if="app.cfg.visual.miniplayer_top_toggle === true"
             @click="app.pinMiniPlayer(false)">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28" fill="none" class="feather feather-pin-slashed">
                <path d="M9.271 3.459c-.659 0-1.107.43-1.107 1.01 0 .282.114.59.352.897.448.59 1.494 1.415 2.777 2.162l-.07 1.02 8.99 8.991c.458-.202.722-.615.722-1.178 0-1.89-1.503-3.832-3.947-4.746l-.29-4.087c1.275-.747 2.312-1.555 2.76-2.144.246-.308.37-.633.37-.914 0-.58-.45-1.011-1.108-1.011H9.27ZM5.15 6.061l16.076 16.057c.272.281.73.273.993 0a.703.703 0 0 0 0-.984L6.15 5.076a.716.716 0 0 0-1.002 0 .711.711 0 0 0 0 .985Zm1.908 10.3c0 .791.536 1.319 1.37 1.319h4.703v4.157c0 1.24.624 2.487.861 2.487.246 0 .87-1.248.87-2.487V17.81h.413l-5.537-5.545c-1.678 1.002-2.68 2.557-2.68 4.095Z"
                      fill="#ff2654" />
            </svg>
        </div>
        <div class="player-exit" title="Close" @click="app.miniPlayer(false)">
            <svg fill="#323232e3" width="21" height="21" viewBox="0 0 21 21" aria-role="presentation" focusable="false"
                 xmlns="http://www.w3.org/2000/svg">
                <defs>
                    <radialGradient gradientUnits="userSpaceOnUse" cx="10.5" cy="10.5" r="10.5" id="gradient-0">
                        <stop offset="0" style="stop-color: rgba(168, 163, 163, 1)" />
                        <stop offset="1" style="stop-color: rgba(118, 111, 111, 1)" />
                    </radialGradient>
                </defs>
                <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"
                      style="stroke-miterlimit: 11; vector-effect: non-scaling-stroke; stroke-width: 31px; fill: url(#gradient-0);" />
            </svg>
        </div>
        <div class="col artwork-col">
            <div class="artwork" @click="app.miniPlayer(false)">
                <mediaitem-artwork
                        :size="600"
                        :url="image ?? ''"
                ></mediaitem-artwork>
            </div>
            <div class="controls-parents">
                <template v-if="app.mkReady()">
                    <div class="app-playback-controls" @mouseover="app.chrome.progresshover = true"
                         @mouseleave="app.chrome.progresshover = false" @contextmenu="app.nowPlayingContextMenu">
                        <div class="playback-info">
                            <div class="song-name">
                                {{ app.mk.nowPlayingItem["attributes"]["name"] }}
                            </div>
                            <div
                                    style="display: inline-block; -webkit-box-orient: horizontal; white-space: nowrap; margin-top: 0.25vh; overflow: hidden; margin-bottom: 5px;">
                                <div class="item-navigate song-artist" style="display: inline-block;"
                                     @click="app.getNowPlayingItemDetailed(`artist`)">
                                    {{ app.mk.nowPlayingItem["attributes"]["artistName"] }}
                                </div>
                                <div class="song-artist item-navigate" style="display: inline-block;"
                                     @click="app.getNowPlayingItemDetailed('album')">
                                    {{ (app.mk.nowPlayingItem["attributes"]["albumName"]) ? (" — " +
                                    app.mk.nowPlayingItem["attributes"]["albumName"]) : "" }}
                                </div>
                            </div>

                            <div class="song-progress">
                                <div class="song-duration"
                                     style="justify-content: space-between; height: 1px; margin-bottom: 1px;"
                                     :style="[app.chrome.progresshover ? {'display': 'flex'} : {'display' : 'none'} ]">
                                    <p style="width: auto">{{ app.convertTime(app.getSongProgress()) }}</p>
                                    <p style="width: auto">{{ app.convertTime(app.mk.currentPlaybackDuration) }}</p>
                                </div>

                                <input type="range" step="0.01" min="0" :style="app.progressBarStyle()"
                                       @input="app.playerLCD.desiredDuration = $event.target.value;app.playerLCD.userInteraction = true"
                                       @mouseup="app.mk.seekToTime($event.target.value);app.playerLCD.desiredDuration = 0;app.playerLCD.userInteraction = false"
                                       :max="app.mk.currentPlaybackDuration" :value="app.getSongProgress()">
                            </div>
                        </div>
                        <div class="control-buttons">
                            <div class="app-chrome-item display--large">
                                <button class="playback-button--small shuffle" v-if="$root.mk.shuffleMode == 0"
                                        :class="$root.isDisabled() && 'disabled'"
                                        @click="$root.mk.shuffleMode = 1" :title="$root.getLz('term.enableShuffle')"
                                        v-b-tooltip.hover></button>
                                <button class="playback-button--small shuffle active" v-else
                                        :class="$root.isDisabled() && 'disabled'"
                                        @click="$root.mk.shuffleMode = 0" :title="$root.getLz('term.disableShuffle')"
                                        v-b-tooltip.hover></button>
                            </div>
                            <div class="app-chrome-item display--large">
                                <button class="playback-button previous" @click="$root.prevButton()"
                                        :class="$root.isPrevDisabled() && 'disabled'"
                                        :title="$root.getLz('term.previous')" v-b-tooltip.hover></button>
                            </div>
                            <div class="app-chrome-item display--large">
                                <button class="playback-button stop" @click="$root.mk.stop()"
                                        v-if="$root.mk.isPlaying && $root.mk.nowPlayingItem.attributes.playParams.kind == 'radioStation'"
                                        :title="$root.getLz('term.stop')" v-b-tooltip.hover></button>
                                <button class="playback-button pause" @click="$root.mk.pause()"
                                        v-else-if="$root.mk.isPlaying"
                                        :title="$root.getLz('term.pause')" v-b-tooltip.hover></button>
                                <button class="playback-button play" @click="$root.mk.play()" v-else
                                        :title="$root.getLz('term.play')"
                                        v-b-tooltip.hover></button>
                            </div>
                            <div class="app-chrome-item display--large">
                                <button class="playback-button next" @click="$root.skipToNextItem()"
                                        :class="$root.isNextDisabled() && 'disabled'"
                                        :title="$root.getLz('term.next')" v-b-tooltip.hover></button>
                            </div>
                            <div class="app-chrome-item display--large">
                                <button class="playback-button--small repeat" v-if="$root.mk.repeatMode == 0"
                                        :class="$root.isDisabled() && 'disabled'"
                                        @click="$root.mk.repeatMode = 1" :title="$root.getLz('term.enableRepeatOne')"
                                        v-b-tooltip.hover></button>
                                <button class="playback-button--small repeat repeatOne" @click="$root.mk.repeatMode = 2"
                                        :class="$root.isDisabled() && 'disabled'" v-else-if="$root.mk.repeatMode == 1"
                                        :title="$root.getLz('term.disableRepeatOne')" v-b-tooltip.hover></button>
                                <button class="playback-button--small repeat active" @click="$root.mk.repeatMode = 0"
                                        :class="$root.isDisabled() && 'disabled'" v-else-if="$root.mk.repeatMode == 2"
                                        :title="$root.getLz('term.disableRepeat')"
                                        v-b-tooltip.hover></button>
                            </div>
                        </div>
                        <div class="app-chrome-item volume display--large">
                            <div class="input-container">
                                <button class="volume-button--small volume" @click="app.muteButtonPressed()"
                                        :class="{'active': app.cfg.audio.volume == 0}"></button>
                                <input type="range" class="slider" @wheel="app.volumeWheel"
                                       :step="app.cfg.audio.volumeStep" min="0" :max="app.cfg.audio.maxVolume"
                                       v-model="app.mk.volume"
                                       v-if="typeof app.mk.volume != 'undefined'" @change="app.checkMuteChange()">
                            </div>
                        </div>
                    </div>
            </div>
            </template>
        </div>
    </div>
    <!-- <div class="row fs-row">

        <div class="col right-col" v-if="tabMode != ''">
             <div class="fs-info">
                <div>Name</div>
                <div>Name</div>
                <div>Name</div>
            </div>
            <div class="lyrics-col" v-if="tabMode == 'lyrics'">
                <lyrics-view :yoffset="120" :time="time" :lyrics="lyrics"
                :richlyrics="richlyrics"></lyrics-view>
            </div>
            <div class="queue-col" v-if="tabMode == 'queue'">
                <cider-queue v-if="tabMode == 'queue'" ref="queue" ></cider-queue>
            </div>
        </div>
    </div> -->
    <!-- <div class="tab-toggles">
        <div class="lyrics" :class="{active: tabMode == 'lyrics'}" @click="tabMode = (tabMode == 'lyrics') ? '' : 'lyrics'"></div>
        <div class="queue"  :class="{active: tabMode == 'queue'}" @click="tabMode =  (tabMode == 'queue') ? '' :'queue'"></div>
    </div>  -->
    </div>


</script>

<script>
  Vue.component('mini-view', {
    template: '#mini-view',
    props: {
      time: {
        type: Number,
        required: false
      },
      lyrics: {
        type: Array,
        required: false
      },
      richlyrics: {
        type: Array,
        required: false
      },
      image: {
        type: String,
        required: false
      },
    },
    data: function() {
      return {
        app: this.$root,
        tabMode: "",
      }
    },
    beforeMount() {
      window.addEventListener('keyup', this.onEscapeKeyUp);
    },
    beforeDestroy() {
      window.removeEventListener('keyup', this.onEscapeKeyUp)
    },
    mounted() {
      app.pinMiniPlayer(true)
    },
    methods: {
      onEscapeKeyUp(event) {
        if (event.which === 27) {
          app.miniPlayer(false);
          console.log('js')
        }
      },
    }
  });
</script>
