<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="preconnect" href="https://amp-api.music.apple.com/" crossorigin/>
    <link rel="preconnect" href="https://api.music.apple.com/" crossorigin/>
    <link rel="preconnect" href="https://is1-ssl.mzstatic.com/" crossorigin/>
    <link rel="preconnect" href="https://is2-ssl.mzstatic.com/" crossorigin/>
    <link rel="preconnect" href="https://is3-ssl.mzstatic.com/" crossorigin/>
    <link rel="preconnect" href="https://is4-ssl.mzstatic.com/" crossorigin/>
    <link rel="preconnect" href="https://is5-ssl.mzstatic.com/" crossorigin/>
    <link rel="preconnect" href="https://play.itunes.apple.com/" crossorigin/>
    <link rel="preconnect" href="https://aod-ssl.itunes.apple.com/" crossorigin/>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover">
    <title>Cider</title>
    <link rel="stylesheet/less" type="text/css" href="style.less"/>
    <script src="./js/less.js"></script>
    <script src="<%- (env.dev ? "./js/vue.js" : "./js/vue.dev.js") %>"></script>
    <script src="./js/vuex.min.js"></script>
    <script src="./js/sortable.min.js"></script>
    <script src="./js/vue-observe-visibility.min.js"></script>
    <script src="./js/vuedraggable.umd.min.js"></script>
    <link rel="manifest" href="./manifest.json?v=2">
    <script src="https://js-cdn.music.apple.com/hls.js/2.141.0/hls.js/hls.js"></script>
    <script src="hlscider.js"></script>
    <script src="./js/jquery-3.2.1.slim.min.js"></script>
    <script src="./js/popper.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <script src="./js/bootbox.min.js"></script>
    <script src="./js/notyf.min.js"></script>
</head>

<body oncontextmenu="return false;" loading="1" platform="<%= env.platform %>">
<div id="app" :class="getAppClasses()">
    <transition name="fsModeSwitch">
        <div id="app-main" v-show="appMode == 'player'">
            <div class="mv-chrome" v-if="chrome.topChromeVisible == false"></div>
            <div class="app-chrome" :style="{'display': chrome.topChromeVisible ? '' : 'none'}">
                <div class="app-chrome--left">
                    <div class="app-chrome-item full-height" v-if="chrome.windowControlPosition == 'left'">
                        <div class="window-controls">
                            <div class="close" @click="closeWindow()"></div>
                            <div class="minimize" @click="ipcRenderer.send('minimize')"></div>
                            <div class="minmax restore" v-if="chrome.maximized"
                                 @click="ipcRenderer.send('maximize')">
                            </div>
                            <div class="minmax" v-else @click="ipcRenderer.send('maximize')"></div>
                        </div>
                    </div>
                    <div class="app-chrome-item full-height" v-else>
                        <div class="app-title"></div>
                    </div>
                    <div class="app-chrome-item display--large">
                        <button class="playback-button--small shuffle" v-if="mk.shuffleMode == 0"
                                @click="mk.shuffleMode = 1"></button>
                        <button class="playback-button--small shuffle active" v-else
                                @click="mk.shuffleMode = 0"></button>
                    </div>
                    <div class="app-chrome-item display--large">
                        <button class="playback-button previous" @click="prevButton()"></button>
                    </div>
                    <div class="app-chrome-item display--large">
                        <button class="playback-button pause" @click="mk.pause()" v-if="mk.isPlaying"></button>
                        <button class="playback-button play" @click="mk.play()" v-else></button>
                    </div>
                    <div class="app-chrome-item display--large">
                        <button class="playback-button next" @click="mk.skipToNextItem()"></button>
                    </div>
                    <div class="app-chrome-item display--large">
                        <button class="playback-button--small repeat" v-if="mk.repeatMode == 0"
                                @click="mk.repeatMode = 1"></button>
                        <button class="playback-button--small repeat repeatOne" @click="mk.repeatMode = 2"
                                v-else-if="mk.repeatMode == 1"></button>
                        <button class="playback-button--small repeat active" @click="mk.repeatMode = 0"
                                v-else-if="mk.repeatMode == 2"></button>
                    </div>
                </div>
                <div class="app-chrome--center">
                    <div class="app-chrome-item playback-controls">
                        <template v-if="mkReady()">
                            <div class="app-playback-controls" @mouseover="chrome.progresshover = true"
                                 @mouseleave="chrome.progresshover = false" @contextmenu="nowPlayingContextMenu">
                                <div class="artwork" @click="drawer.open = false; fullscreen(true)">
                                    <mediaitem-artwork :url="currentArtUrl"></mediaitem-artwork>
                                </div>
                                <div class="playback-info">
                                    <div class="song-name" style="-webkit-box-orient: horizontal;"
                                        :class="[isElementOverflowing('#app-main > div.app-chrome > div.app-chrome--center > div > div > div.playback-info > div.song-name') ? 'marquee' : '']"
                                         :style="[mk.nowPlayingItem['attributes']['contentRating'] == 'explicit' ? {'margin-left' : '23px'} : {'margin-left' : '0px'} ]">
                                        {{ mk.nowPlayingItem["attributes"]["name"] }}
                                        <div class="explicit-icon"
                                             v-if="mk.nowPlayingItem['attributes']['contentRating'] == 'explicit'"
                                             style="display: inline-block"></div>
                                    </div>
                                    <div class="song-artist-album">
                                    <div class="song-artist-album-content"
                                        :class="[isElementOverflowing('#app-main > .app-chrome .app-chrome-item > .app-playback-controls > div >.song-artist-album > .song-artist-album-content') ? 'marquee' : '']"
                                         style="display: inline-block; -webkit-box-orient: horizontal; white-space: nowrap;">
                                        <div class="item-navigate song-artist" style="display: inline-block"
                                             @click="getNowPlayingItemDetailed(`artist`)">
                                            {{ mk.nowPlayingItem["attributes"]["artistName"] }}
                                        </div>
                                        <div class="song-artist item-navigate" style="display: inline-block"
                                             @click="getNowPlayingItemDetailed('album')"
                                             v-if="mk.nowPlayingItem['attributes']['albumName'] != ''">
                                            <div class="separator" style="display: inline-block;">{{"—"}}</div>
                                            {{(mk.nowPlayingItem["attributes"]["albumName"]) ?
                                            (mk.nowPlayingItem["attributes"]["albumName"]) : "" }}
                                        </div>
                                    </div>
                                    </div>

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

                                        <input type="range" step="0.01" min="0" :style="progressBarStyle()"
                                               @input="playerLCD.desiredDuration = $event.target.value;playerLCD.userInteraction = true"
                                               @mouseup="mk.seekToTime($event.target.value);playerLCD.desiredDuration = 0;playerLCD.userInteraction = false"
                                               :max="mk.currentPlaybackDuration" :value="getSongProgress()">
                                    </div>
                                </div>
                                <template v-if="mk.nowPlayingItem['attributes']['playParams']">
                                    <div class="actions">
                                        <button class="lcdMenu" @click="nowPlayingContextMenu">
                                            <div class="svg-icon"></div>
                                        </button>
                                    </div>
                                </template>

                            </div>
                        </template>

                    </div>
                </div>
                <div class="app-chrome--right">
                    <div class="app-chrome-item volume display--large">
                        <button class="volume-button--small volume" @click="muteButtonPressed()"
                                :class="{'active': this.cfg.audio.volume == 0}"></button>
                        <input type="range" class="" @wheel="volumeWheel" step="0.01" min="0" :max="cfg.audio.maxVolume"
                               v-model="mk.volume" v-if="typeof mk.volume != 'undefined'" @change="checkMuteChange()">
                    </div>
                    <div class="app-chrome-item generic" v-if="false">
                        <button class="playback-button--small">
                            <%- include("svg/cast.svg") %>
                        </button>
                    </div>
                    <div class="app-chrome-item generic">
                        <button class="playback-button--small miniplayer"
                        @click="drawer.open = false; miniPlayer(true)"></button>
                    </div>
                    <div class="app-chrome-item generic">
                        <button class="playback-button--small queue" :class="{'active': drawer.panel == 'queue'}"
                                @click="invokeDrawer('queue')"></button>
                    </div>
                    <div class="app-chrome-item generic">
                        <template v-if="lyrics && lyrics != [] && lyrics.length > 0">
                            <button class="playback-button--small lyrics"
                                    :class="{'active': drawer.panel == 'lyrics'}"
                                    @click="invokeDrawer('lyrics')"></button>
                        </template>

                    </div>
                    <div class="app-chrome-item full-height" v-if="chrome.windowControlPosition == 'right'">
                        <div class="window-controls">
                            <div class="minimize" @click="ipcRenderer.send('minimize')"></div>
                            <div class="minmax restore" v-if="chrome.maximized"
                                 @click="ipcRenderer.send('maximize')">
                            </div>
                            <div class="minmax" v-else @click="ipcRenderer.send('maximize')"></div>
                            <div class="close" @click="closeWindow()"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="app-navigation" v-cloak>
                <div id="app-sidebar">
                    <div class="app-sidebar-header">
                        <div class="search-input-container">
                            <div class="search-input--icon"></div>
                            <input type="search" spellcheck="false" @click="showSearch()"
                                   @focus="search.showHints = true"
                                   @blur="setTimeout(()=>{search.showHints = false}, 300)"
                                   v-on:keyup.enter="searchQuery();search.showHints = false" @change="showSearch();"
                                   @input="getSearchHints()" :placeholder="$root.getLz('term.search') + '...'" v-model="search.term"
                                   ref="searchInput" class="search-input">
                        </div>
                    </div>
                    <div class="search-hints-container" v-if="search.showHints && search.hints.length != 0">
                        <div class="search-hints">
                            <button class="search-hint" v-for="hint in search.hints"
                                    @click="search.term = hint;search.showHints = false;searchQuery(hint)">
                                {{ hint }}
                            </button>
                        </div>
                    </div>
                    <div class="app-sidebar-content">
                        <div class="app-sidebar-header-text">
                            Cider
                        </div>
                        <sidebar-library-item :name="$root.getLz('home.title')" svg-icon="./assets/feather/home.svg" page="home">
                        </sidebar-library-item>
                        <div class="app-sidebar-header-text">
                            {{$root.getLz('term.appleMusic')}}
                        </div>
                        <sidebar-library-item :name="$root.getLz('term.listenNow')" svg-icon="./assets/feather/play-circle.svg"
                                              page="listen_now"></sidebar-library-item>
                        <sidebar-library-item :name="$root.getLz('term.browse')" svg-icon="./assets/feather/globe.svg" page="browse">
                        </sidebar-library-item>
                        <sidebar-library-item :name="$root.getLz('term.radio')" svg-icon="./assets/feather/radio.svg" page="radio">
                        </sidebar-library-item>
                        <div class="app-sidebar-header-text">
                            {{$root.getLz('term.library')}}
                        </div>
                        <sidebar-library-item :name="$root.getLz('term.recentlyAdded')" svg-icon="./assets/feather/plus-circle.svg"
                                              page="library-recentlyadded"></sidebar-library-item>
                        <sidebar-library-item :name="$root.getLz('term.songs')" svg-icon="./assets/feather/music.svg"
                                              page="library-songs"></sidebar-library-item>
                        <sidebar-library-item :name="$root.getLz('term.albums')" svg-icon="./assets/feather/disc.svg"
                                              page="library-albums"></sidebar-library-item>
                        <sidebar-library-item :name="$root.getLz('term.artists')" svg-icon="./assets/feather/user.svg"
                                              page="library-artists"></sidebar-library-item>
                        <sidebar-library-item :name="$root.getLz('term.videos')" svg-icon="./assets/feather/video.svg" page="library-videos"></sidebar-library-item>
                        <sidebar-library-item :name="$root.getLz('term.podcasts')" svg-icon="./assets/feather/mic.svg" page="podcasts">
                        </sidebar-library-item>
                        <div class="app-sidebar-header-text" @contextmenu="playlistHeaderContextMenu">
                            {{ $root.getLz('term.playlists') }}
                        </div>
                        <sidebar-playlist v-for="item in getPlaylistFolderChildren('p.playlistsroot')" :item="item">
                        </sidebar-playlist>
                    </div>
                    <transition name="wpfade">
                        <div class="usermenu-container" v-if="chrome.menuOpened">
                            <div class="usermenu-body">
                                <button class="usermenu-item" @click="showWebRemoteQR()">
                                    <div class="row nopadding">
                                        <div class="col nopadding">
                                            {{$root.getLz('action.showWebRemoteQR')}}
                                        </div>
                                    </div>
                                </button>
                                <button class="usermenu-item" v-if="cfg.advanced.AudioContext"
                                        @click="modals.audioSettings = true">
                                    {{$root.getLz('term.audioSettings')}}
                                </button>
                                <button class="usermenu-item" @click="appRoute('about')">
                                    {{$root.getLz('term.about')}}
                                </button>
                                <button class="usermenu-item" @click="appRoute('settings')">
                                    {{$root.getLz('term.settings')}}
                                </button>
                                <button class="usermenu-item" @click="unauthorize()">
                                    {{$root.getLz('term.logout')}}
                                </button>
                            </div>
                        </div>
                    </transition>
                    <div class="app-sidebar-footer">

                        <div class="app-playback-controls display--small" v-if="mkReady()"
                             @contextmenu="nowPlayingContextMenu">
                            <div class="control-buttons">
                                <div class="app-chrome-item">
                                    <button class="playback-button--small shuffle" v-if="mk.shuffleMode == 0"
                                            @click="mk.shuffleMode = 1"></button>
                                    <button class="playback-button--small shuffle active" v-else
                                            @click="mk.shuffleMode = 0"></button>
                                </div>
                                <div class="app-chrome-item">
                                    <button class="playback-button previous" @click="prevButton()"></button>
                                </div>
                                <div class="app-chrome-item">
                                    <button class="playback-button pause" @click="mk.pause()"
                                            v-if="mk.isPlaying"></button>
                                    <button class="playback-button play" @click="mk.play()" v-else></button>
                                </div>
                                <div class="app-chrome-item">
                                    <button class="playback-button next" @click="mk.skipToNextItem()"></button>
                                </div>
                                <div class="app-chrome-item">
                                    <button class="playback-button--small repeat" v-if="mk.repeatMode == 0"
                                            @click="mk.repeatMode = 1"></button>
                                    <button class="playback-button--small repeat repeatOne" @click="mk.repeatMode = 2"
                                            v-else-if="mk.repeatMode == 1"></button>
                                    <button class="playback-button--small repeat active"
                                            @click="mk.repeatMode = 0" v-else-if="mk.repeatMode == 2"></button>
                                </div>
                            </div>
                            <div class="app-chrome-item volume">
                                <div class="input-container">
                                    <button class="volume-button--small volume" @click="muteButtonPressed()"
                                            :class="{'active': this.cfg.audio.volume == 0}"></button>
                                    <input type="range" class="" @wheel="volumeWheel" step="0.01" min="0" :max="cfg.audio.maxVolume"
                                           v-model="mk.volume" v-if="typeof mk.volume != 'undefined'"
                                           @change="checkMuteChange()">
                                </div>
                            </div>
                        </div>
                        <button class="app-sidebar-button" style="width:100%" :class="{active: chrome.menuOpened}"
                                @blur="setTimeout(()=>{chrome.menuOpened = false}, 100)"
                                @click="(chrome.userinfo.id) ? chrome.menuOpened = !chrome.menuOpened : false">

                            <img class="sidebar-user-icon" loading="lazy"
                                 :src="getMediaItemArtwork(chrome.hideUserInfo ? 'http://localhost:9000/assets/logocut.png' : (chrome.userinfo.attributes['artwork'] ? chrome.userinfo.attributes['artwork']['url'] : ''), 26)"/>

                            <div class="sidebar-user-text" v-if="!chrome.hideUserInfo">
                                <template v-if="chrome.userinfo.id">
                                    <div class="fullname text-overflow-elipsis">{{ chrome.userinfo.attributes.name
                                        }}
                                    </div>
                                    <div class="handle-text text-overflow-elipsis">{{
                                        chrome.userinfo.attributes.handle
                                        }}
                                    </div>
                                </template>
                                <template v-else>
                                    <div @click="mk.authorize()">
                                        Sign In
                                    </div>
                                </template>
                            </div>
                            <div class="sidebar-user-text" v-else>
                                Cider
                            </div>
                        </button>
                    </div>
                    <div class="app-sidebar-notification backgroundNotification"
                         v-if="library.backgroundNotification.show">
                        <div class="message">{{ library.backgroundNotification.message }} ({{
                            library.backgroundNotification.progress }} / {{ library.backgroundNotification.total }})
                        </div>
                    </div>
                </div>
                <div id="app-content">
                    <div id="navigation-bar">
                        <button class="nav-item" @click="navigateBack()">
                            <%- include('svg/chevron-left.svg') %>
                        </button>
                        <button class="nav-item" @click="navigateForward()">
                            <%- include('svg/chevron-right.svg') %>
                        </button>
                    </div>

                    <!--                    Podcasts -->
                    <transition name="wpfade">
                        <template v-if="page == 'podcasts'">
                            <apple-podcasts></apple-podcasts>
                        </template>
                    </transition>
                    <!-- Library - Library Videos -->
                    <transition name="wpfade" >
                        <template v-if="page == 'library-videos'">                       
                            <cider-library-videos></cider-library-videos>
                        </template>
                    </transition>

                    <!-- Apple Setings Page -->
                    <transition name="wpfade">
                        <template v-if="page == 'apple-account-settings'">
                            <apple-account-settings></apple-account-settings>
                        </template>
                    </transition>
                    <!-- About -->
                    <transition name="wpfade">
                        <template v-if="page == 'about'">
                            <about-page></about-page>
                        </template>
                    </transition>
                    <!-- Artist Page -->
                    <transition name="wpfade">
                        <template v-if="page == 'artist-page' && artistPage.data.attributes">
                            <cider-artist :data="artistPage.data"></cider-artist>
                        </template>
                    </transition>
                    <transition name="wpfade">
                        <%- include('pages/zoo') %>
                    </transition>
                    <transition name="wpfade">
                        <%- include('pages/webview') %>
                    </transition>
                    <!-- Collection List -->
                    <transition name="wpfade">
                        <template v-if="page == 'collection-list'">
                            <cider-collection-list :data="collectionList.response" :type="collectionList.type"
                                                   :title="collectionList.title"></cider-collection-list>
                        </template>
                    </transition>
                    <!-- Home -->
                    <transition name="wpfade">
                        <template v-if="page == 'home'">
                            <cider-home></cider-home>
                        </template>
                    </transition>
                    <!-- Home -->
                    <transition name="wpfade">
                        <template v-if="page == 'artist-feed'">
                            <cider-artist-feed></cider-artist-feed>
                        </template>
                    </transition>
                    <!-- Playlist / Album page-->
                    <transition name="wpfade">
                        <template v-if="page.includes('playlist_')">
                            <cider-playlist :data="showingPlaylist"></cider-playlist>
                        </template>
                    </transition>
                    <transition name="wpfade">
                        <template v-if="page.includes('album_')">
                            <cider-playlist :data="showingPlaylist"></cider-playlist>
                        </template>
                    </transition>
                    <transition name="wpfade">
                        <template v-if="page.includes('recordLabel_')">
                            <cider-recordlabel :data="showingPlaylist"></cider-recordlabel>
                        </template>
                    </transition>

                    <transition name="wpfade">
                        <template v-if="page.includes('curator_')">
                            <cider-recordlabel :data="showingPlaylist"></cider-recordlabel>
                        </template>
                    </transition>
                    <!-- Browse -->
                    <transition v-on:enter="getBrowsePage(); console.log('browse')" name="wpfade">
                        <template v-if="page == 'browse'">
                            <!-- <div class="content-inner">

                            <button id="apple-music-authorize" class="md-btn md-btn-primary" @click="init()">Start
                                MusicKit
                            </button>
                            <button id="apple-music-unauthorize" class="md-btn md-btn-primary"
                                    @click="unauthorize()">
                                Stop
                                MusicKit
                            </button>
                            <br>
                            <template v-if="mk.nowPlayingItem">
                                currentPlaybackProgress: {{ app.mk.currentPlaybackProgress }}
                                <br>
                                currentPlaybackDuration: {{ app.mk.currentPlaybackDuration }}
                            </template>
                            <div><input type="text" v-model="quickPlayQuery">
                                <button @click="quickPlay(quickPlayQuery)">Play</button>
                            </div>
                            <h1 class="header-text">{{$root.getLz('term.browse')}}</h1>
                            <p>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, urna eu
                                tincidunt
                                consectetur, nisl nunc euismod nisi, eu porttitor nisl nisi euismod nisi.
                            </p>
                            <div class="media-item--small">
                                <div class="artwork">

                                </div>
                                <div class="text">
                                    Text
                                </div>
                                <div class="subtext">
                                    Subtext
                                </div>
                            </div>
                            <br>
                            <br>
                            <h1 class="header-text">{{$root.getLz('term.listenNow')}}</h1>
                            <div class="winbox">
                                <div class="fancy">990kbps</div>
                                <div class="">
                                    <button class="md-btn md-btn-primary">Audio Quality Settings</button>
                                </div>
                            </div>
                            <button class="md-btn" @click="drawertest = !drawertest">Toggle Drawer</button>
                            <button class="md-btn">Button</button>
                            <button class="md-btn md-btn-primary">Button</button>
                        </div> -->
                            <cider-browse :data="browsepage"></cider-browse>
                        </template>
                    </transition>
                    <!-- Listen Now -->
                    <transition v-on:enter="getListenNow()" name="wpfade">
                        <template v-if="page == 'listen_now'" @created="console.log('listennow')">
                            <cider-listen-now :data="listennow"></cider-listen-now>
                        </template>
                    </transition>
                    <!-- Radio -->
                    <transition v-on:enter="getRadioStations()" name="wpfade">
                        <template v-if="page == 'radio'" @created="console.log('radio')">
                            <div class="content-inner">
                                <h1 class="header-text">{{$root.getLz('term.radio')}}</h1>
                                <h3>{{$root.getLz('term.recentStations')}}</h3>
                                <mediaitem-square :item="item" v-for="item in radio.personal"></mediaitem-square>
                            </div>
                        </template>
                    </transition>
                    <!-- Settings -->
                    <transition name="wpfade">
                        <template v-if="page == 'settings'">
                            <cider-settings></cider-settings>
                        </template>
                    </transition>
                    <!-- Search -->
                    <transition name="wpfade">
                        <template v-if="page == 'search'">
                            <cider-search :search="search"></cider-search>
                        </template>
                    </transition>
                    <!-- Library - Recently Added -->
                    <transition name="wpfade" v-on:enter="getLibraryAlbumsFull(null, 0); searchLibraryAlbums(0);">
                        <%- include('pages/library-recentlyadded') %>');
                    </transition>
                    <!-- Library - Songs -->
                    <transition name="wpfade" v-on:enter="getLibrarySongsFull()">
                        <template v-if="page == 'library-songs'">
                            <cider-library-songs :data="library.songs"></cider-library-songs>
                        </template>
                    </transition>
                    <!-- Library - Albums -->
                    <transition name="wpfade" v-on:enter="getLibraryAlbumsFull(null, 1); searchLibraryAlbums(1);">
                        <%- include('pages/library-albums') %>');
                        %>
                    </transition>
                    <!-- Library - Made For You -->
                    <transition name="wpfade" v-on:enter="getMadeForYou()">
                        <template v-if="page == 'library-madeforyou'">
                            <%- include('pages/madeforyou') %>');
                            %>
                        </template>
                    </transition>
                    <!-- Library - Artists-->
                    <transition name="wpfade" v-on:enter="getLibraryArtistsFull(null, 0);">
                        <template v-if="page == 'library-artists'">
                            <%- include('pages/library-artists') %>');
                            %>
                        </template>
                    </transition>
                    <transition name="wpfade">
                        <template v-if="page.includes('appleCurator')">
                            <cider-applecurator :data="appleCurator"></cider-applecurator>
                        </template>
                    </transition>

                </div>
                <transition name="drawertransition">
                    <div class="app-drawer"
                         v-if="drawer.open && drawer.panel == 'lyrics' && lyrics && lyrics != [] && lyrics.length > 0">
                        <div class="bgArtworkMaterial">
                            <div class="bg-artwork-container">
                                <img class="bg-artwork a" :src="$store.state.artwork.playerLCD">
                                <img class="bg-artwork b" :src="$store.state.artwork.playerLCD">
                            </div>
                        </div>
                        <lyrics-view v-if="drawer.panel == 'lyrics'" :time="lyriccurrenttime" :lyrics="lyrics"
                                     :richlyrics="richlyrics"></lyrics-view>
                        <div v-if="drawer.panel == 'lyrics'" class="lyric-footer">
                            <button class="md-btn" @click="modularUITest(!fullscreenLyrics)">{{fullscreenLyrics ?
                                $root.getLz('term.defaultView'): $root.getLz('term.fullscreenView')}}
                            </button>
                        </div>
                    </div>
                </transition>
                <transition name="drawertransition">
                    <div class="app-drawer" v-if="drawer.open && drawer.panel == 'queue'">
                        <cider-queue ref="queue" v-if="drawer.panel == 'queue'"></cider-queue>
                    </div>
                </transition>
            </div>
        </div>
    </transition>
    <cider-menu-panel v-if="menuPanel.visible">
    </cider-menu-panel>
    <transition name="fsModeSwitch">
        <div class="fullscreen-view-container" v-if="appMode == 'fullscreen'">
            <fullscreen-view :image="currentArtUrl.replace('50x50', '600x600')" :time="lyriccurrenttime"
                             :lyrics="lyrics" :richlyrics="richlyrics"></fullscreen-view>
        </div>
    </transition>
    <transition name="fsModeSwitch">
        <div class="fullscreen-view-container" v-if="appMode == 'mini'">
            <mini-view :image="currentArtUrl.replace('50x50', '600x600')" :time="lyriccurrenttime"
                             :lyrics="lyrics" :richlyrics="richlyrics"></mini-view>
        </div>
    </transition>
    <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">
        <add-to-playlist :playlists="playlists.listing" v-if="modals.addToPlaylist"></add-to-playlist>
    </transition>
    <transition name="modal">
        <spatial-properties v-if="modals.spatialProperties"></spatial-properties>
    </transition>
    <transition name="modal">
        <audio-settings v-if="modals.audioSettings"></audio-settings>
    </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>
    <div id="apple-music-video-container">
        <div id="apple-music-video-player-controls">
            <div id="player-exit" title="Close" @click="exitMV()">
                <svg fill="white" xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 21 21"
                     aria-role="presentation" focusable="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">{{((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 id="player-pip"
                 @click="document.querySelector('video#apple-music-video-player').requestPictureInPicture()"
                 title="Picture-in-Picture">
                <%- include("svg/pip.svg") %>
            </div>
            <div id="player-fullscreen"
                 @click="document.querySelector('video#apple-music-video-player').requestFullscreen()"
                 title="Fullscreen">
                <%- include("svg/fullscreen.svg") %>
            </div>
        </div>
        <div id="apple-music-video-player"></div>
    </div>
</div>


<!-- Apple Settings Page -->
<%- include('pages/podcasts') %>
<!-- Apple Settings Page -->
<%- include('pages/apple-account-settings') %>
<!-- Library - Songs -->
<%- include('pages/library-songs') %>

<!-- Media Item Artwork-->
<%- include("components/mediaitem-artwork"); %>
<!-- Browse -->
<%- include('pages/browse') %>

<!-- Settings -->
<%- include('pages/settings') %>

<!-- Listen Now -->
<%- include('pages/listen_now') %>

<!-- Home -->
<%- include('pages/home') %>

<!-- Artist Feed -->
<%- include('pages/artist-feed') %>

<!-- Playlists / Albums -->
<%- include('pages/cider-playlist') %>

<!-- Record Label -->
<%- include('pages/recordLabel') %>

<!-- Collection List -->
<%- include('pages/collection-list') %>

<!-- Apple Curator -->
<%- include('pages/apple-curator') %>

<!-- Artist Page -->
<%- include('pages/artist') %>

<!-- Search -->
<%- include('pages/search') %>

<!-- About -->
<%- include('pages/about') %>


<%- include('pages/library-videos') %>

<script type="text/x-template"
        id="am-musiccovershelf">
    <h1>{{ component.attributes.title.stringForDisplay }}</h1>
</script>

<!-- Sidebar Item -->
<script type="text/x-template"
        id="sidebar-library-item">
    <button class="app-sidebar-item"
            :class="$parent.getSidebarItemClass(page)" @click="$root.appRoute(page)">
        <div class="sidebar-icon" v-html="svgIconData" v-if="svgIconData != ''"></div>
        {{ name }}
    </button>
</script>

<!-- Artwork Material -->
<%- include('components/artwork-material') %>
<!-- Menu Panel -->
<%- include('components/menu-panel') %>
<!-- Playlist Listing -->
<%- include('components/sidebar-playlist')
%>
<!-- Spatial Properties -->
<%- include('components/spatial-properties') 
%>
<!-- Audio Settings -->
<%- include('components/audio-settings')
%>
<!-- QRCode Modal -->
<%- include('components/qrcode-modal') 
%>
<!-- Equalizer -->
<%- include('components/equalizer') 
%>
<!-- Add to playlist -->
<%- include('components/add-to-playlist')
%>
<!-- Queue -->
<%- include('components/queue')
%>
<!-- Queue Item -->
<%- include('components/queue-item')
%>
<!-- Horizontal MediaItem Scroller -->
<%- include('components/mediaitem-scroller-horizontal')
%>
<!-- Horizontal MediaItem Scroller (Large) -->
<%- include('components/mediaitem-scroller-horizontal-large')
%>
<!-- Horizontal MediaItem Scroller (SP : Special) -->
<%- include('components/mediaitem-scroller-horizontal-sp')
%>
<!-- Horizontal MediaItem Scroller (MV) -->
<%- include('components/mediaitem-scroller-horizontal-mvview')
%>
<!-- MediaItem List Item -->
<%- include('components/mediaitem-list-item')
%>
<!-- MediaItem Horizontal Rectangle -->
<%- include('components/mediaitem-hrect')
%>
<!-- MediaItem Square -->
<%- include('components/mediaitem-square')
%>
<!-- MediaItem Square SP -->
<%- include('components/mediaitem-square-sp')
%>
<!-- MediaItem MusicVideo -->
<%- include('components/mediaitem-mvview')
%>
<!-- MediaItem MusicVideo -->
<%- include('components/libraryartist-item')
%>
<%- include('components/listennow-child')
%>
<!-- MediaItem MusicVideo SP -->
<%- include('components/mediaitem-mvview-sp')
%>
<!-- Animated Artwork View -->
<%- include('components/animatedartwork-view')
%>
<!-- Lyrics View -->
<%- include('components/lyrics-view')
%>
<!-- Fullscreen View -->
<%- include('components/fullscreen')
%>

<!-- Miniplayer View -->
<%- include('components/miniplayer')
%>

<script
        src="musickit.js?v=1"></script>
<script>
    if (typeof MusicKit == 'undefined') {
        document.write(unescape("%3Cscript src='https://js-cdn.music.apple.com/musickit/v2/amp/musickit.js' type='text/javascript'%3E%3C/script%3E"));
    }
</script>
<script
        src="index.js?v=1"></script>
<script
        src="https://cdn.jsdelivr.net/npm/resonance-audio/build/resonance-audio.min.js"></script>
<script
        src="/audio/audio.js?v=1"></script>
<script
        src="./js/WSAPI_Interop.js"></script>
</body>

</html>
