split up main.ejs, different sections moved to views/app/
This commit is contained in:
booploops
parent
4a1479f499
commit
7920561ba3
6 changed files with 573 additions and 623 deletions
158
src/renderer/views/app/app-content.ejs
Normal file
158
src/renderer/views/app/app-content.ejs
Normal file
|
|
@ -0,0 +1,158 @@
|
||||||
|
<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'">
|
||||||
|
<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>
|
||||||
27
src/renderer/views/app/app-navigation.ejs
Normal file
27
src/renderer/views/app/app-navigation.ejs
Normal file
|
|
@ -0,0 +1,27 @@
|
||||||
|
<div class="app-navigation" v-cloak>
|
||||||
|
<%- include("sidebar") %>
|
||||||
|
<%- include("app-content") %>
|
||||||
|
<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>
|
||||||
141
src/renderer/views/app/chrome-top.ejs
Normal file
141
src/renderer/views/app/chrome-top.ejs
Normal file
|
|
@ -0,0 +1,141 @@
|
||||||
|
<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="ipcRenderer.send('close')"></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>
|
||||||
|
<button class="app-mainmenu"
|
||||||
|
@blur="mainMenuVisibility(false)"
|
||||||
|
@click="mainMenuVisibility(true)"
|
||||||
|
:class="{active: chrome.menuOpened}"></button>
|
||||||
|
</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">
|
||||||
|
<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" id="window-controls-container" 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="ipcRenderer.send('close')"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
71
src/renderer/views/app/panels.ejs
Normal file
71
src/renderer/views/app/panels.ejs
Normal file
|
|
@ -0,0 +1,71 @@
|
||||||
|
<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>
|
||||||
173
src/renderer/views/app/sidebar.ejs
Normal file
173
src/renderer/views/app/sidebar.ejs
Normal file
|
|
@ -0,0 +1,173 @@
|
||||||
|
<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="app-sidebar-button" style="width:100%">
|
||||||
|
|
||||||
|
<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 || mk.isAuthorized">
|
||||||
|
<div class="fullname text-overflow-elipsis">{{ (chrome.userinfo != null &&
|
||||||
|
chrome.userinfo.attributes != null) ? (chrome.userinfo.attributes.name ?? "") :
|
||||||
|
""
|
||||||
|
}}
|
||||||
|
</div>
|
||||||
|
<div class="handle-text text-overflow-elipsis">{{
|
||||||
|
(chrome.userinfo != null && chrome.userinfo.attributes != null) ?
|
||||||
|
(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>
|
||||||
|
<button class="usermenu-item" @click="showWebRemoteQR()">
|
||||||
|
<div class="row nopadding">
|
||||||
|
<div class="col nopadding">
|
||||||
|
<span class="usermenu-item-icon"><%- include("../svg/smartphone.svg") %></span>
|
||||||
|
<span class="usermenu-item-name">{{$root.getLz('action.showWebRemoteQR')}}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
<button class="usermenu-item" v-if="cfg.advanced.AudioContext"
|
||||||
|
@click="modals.audioSettings = true">
|
||||||
|
<span class="usermenu-item-icon"><%- include("../svg/headphones.svg") %></span>
|
||||||
|
<span class="usermenu-item-name">{{$root.getLz('term.audioSettings')}}</span>
|
||||||
|
</button>
|
||||||
|
<button class="usermenu-item" @click="appRoute('about')">
|
||||||
|
<span class="usermenu-item-icon"><%- include("../svg/info.svg") %></span>
|
||||||
|
<span class="usermenu-item-name">{{$root.getLz('term.about')}}</span>
|
||||||
|
</button>
|
||||||
|
<button class="usermenu-item" @click="appRoute('settings')">
|
||||||
|
<span class="usermenu-item-icon"><%- include("../svg/settings.svg") %></span>
|
||||||
|
<span class="usermenu-item-name">{{$root.getLz('term.settings')}}</span>
|
||||||
|
</button>
|
||||||
|
<button class="usermenu-item" @click="unauthorize()">
|
||||||
|
<span class="usermenu-item-icon"
|
||||||
|
style="right:2.5px;"><%- include("../svg/log-out.svg") %></span>
|
||||||
|
<span class="usermenu-item-name">{{$root.getLz('term.logout')}}</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</transition>
|
||||||
|
<div class="app-sidebar-footer display--small">
|
||||||
|
|
||||||
|
<div class="app-playback-controls " 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>
|
||||||
|
</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>
|
||||||
|
|
@ -37,631 +37,11 @@
|
||||||
<div id="app" :class="getAppClasses()">
|
<div id="app" :class="getAppClasses()">
|
||||||
<transition name="fsModeSwitch">
|
<transition name="fsModeSwitch">
|
||||||
<div id="app-main" v-show="appMode == 'player'">
|
<div id="app-main" v-show="appMode == 'player'">
|
||||||
<div class="mv-chrome" v-if="chrome.topChromeVisible == false"></div>
|
<%- include('app/chrome-top'); %>
|
||||||
<div class="app-chrome" :style="{'display': chrome.topChromeVisible ? '' : 'none'}">
|
<%- include('app/app-navigation'); %>
|
||||||
<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="ipcRenderer.send('close')"></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>
|
|
||||||
<button class="app-mainmenu"
|
|
||||||
@blur="mainMenuVisibility(false)"
|
|
||||||
@click="mainMenuVisibility(true)"
|
|
||||||
:class="{active: chrome.menuOpened}"></button>
|
|
||||||
</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" id="window-controls-container" 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="ipcRenderer.send('close')"></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="app-sidebar-button" style="width:100%">
|
|
||||||
|
|
||||||
<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 || mk.isAuthorized">
|
|
||||||
<div class="fullname text-overflow-elipsis">{{ (chrome.userinfo != null &&
|
|
||||||
chrome.userinfo.attributes != null) ? (chrome.userinfo.attributes.name ?? "") :
|
|
||||||
""
|
|
||||||
}}
|
|
||||||
</div>
|
|
||||||
<div class="handle-text text-overflow-elipsis">{{
|
|
||||||
(chrome.userinfo != null && chrome.userinfo.attributes != null) ?
|
|
||||||
(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>
|
|
||||||
<button class="usermenu-item" @click="showWebRemoteQR()">
|
|
||||||
<div class="row nopadding">
|
|
||||||
<div class="col nopadding">
|
|
||||||
<span class="usermenu-item-icon"><%- include("./svg/smartphone.svg") %></span>
|
|
||||||
<span class="usermenu-item-name">{{$root.getLz('action.showWebRemoteQR')}}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</button>
|
|
||||||
<button class="usermenu-item" v-if="cfg.advanced.AudioContext"
|
|
||||||
@click="modals.audioSettings = true">
|
|
||||||
<span class="usermenu-item-icon"><%- include("./svg/headphones.svg") %></span>
|
|
||||||
<span class="usermenu-item-name">{{$root.getLz('term.audioSettings')}}</span>
|
|
||||||
</button>
|
|
||||||
<button class="usermenu-item" @click="appRoute('about')">
|
|
||||||
<span class="usermenu-item-icon"><%- include("./svg/info.svg") %></span>
|
|
||||||
<span class="usermenu-item-name">{{$root.getLz('term.about')}}</span>
|
|
||||||
</button>
|
|
||||||
<button class="usermenu-item" @click="appRoute('settings')">
|
|
||||||
<span class="usermenu-item-icon"><%- include("./svg/settings.svg") %></span>
|
|
||||||
<span class="usermenu-item-name">{{$root.getLz('term.settings')}}</span>
|
|
||||||
</button>
|
|
||||||
<button class="usermenu-item" @click="unauthorize()">
|
|
||||||
<span class="usermenu-item-icon"
|
|
||||||
style="right:2.5px;"><%- include("./svg/log-out.svg") %></span>
|
|
||||||
<span class="usermenu-item-name">{{$root.getLz('term.logout')}}</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</transition>
|
|
||||||
<div class="app-sidebar-footer display--small">
|
|
||||||
|
|
||||||
<div class="app-playback-controls " 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>
|
|
||||||
</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>
|
</div>
|
||||||
</transition>
|
</transition>
|
||||||
<cider-menu-panel v-if="menuPanel.visible">
|
<%- include('app/panels'); %>
|
||||||
</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>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue