more web remote fixes
This commit is contained in:
vapormusic
parent
b197d3cafe
commit
a632dbd165
2 changed files with 741 additions and 689 deletions
|
|
@ -56,8 +56,7 @@ const wsapi = {
|
||||||
ipcRenderer.send('wsapi-updatePlaybackState', MusicKitInterop.getAttributes());
|
ipcRenderer.send('wsapi-updatePlaybackState', MusicKitInterop.getAttributes());
|
||||||
},
|
},
|
||||||
getLyrics() {
|
getLyrics() {
|
||||||
return []
|
ipcRenderer.send('wsapi-returnLyrics',JSON.stringify(app.lyrics));
|
||||||
_lyrics.GetLyrics(1, false)
|
|
||||||
},
|
},
|
||||||
getQueue() {
|
getQueue() {
|
||||||
ipcRenderer.send('wsapi-returnQueue', JSON.stringify(MusicKit.getInstance().queue))
|
ipcRenderer.send('wsapi-returnQueue', JSON.stringify(MusicKit.getInstance().queue))
|
||||||
|
|
|
||||||
|
|
@ -42,8 +42,7 @@
|
||||||
<button class="md-btn playback-button next" @click="next()"></button>
|
<button class="md-btn playback-button next" @click="next()"></button>
|
||||||
<button class="md-btn playback-button--small shuffle" @click="shuffle()"
|
<button class="md-btn playback-button--small shuffle" @click="shuffle()"
|
||||||
v-if="player.currentMediaItem.shuffleMode == 0"></button>
|
v-if="player.currentMediaItem.shuffleMode == 0"></button>
|
||||||
<button class="md-btn playback-button--small shuffle active" @click="shuffle()"
|
<button class="md-btn playback-button--small shuffle active" @click="shuffle()" v-else></button>
|
||||||
v-else></button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -52,7 +51,8 @@
|
||||||
<div class="md-container md-container_panel player-panel" v-if="screen == 'player'">
|
<div class="md-container md-container_panel player-panel" v-if="screen == 'player'">
|
||||||
<div class="player_top">
|
<div class="player_top">
|
||||||
<div class="md-body player-artwork-container">
|
<div class="md-body player-artwork-container">
|
||||||
<div class="media-artwork" :class="artworkPlaying()" :style="{'--artwork': getAlbumArtUrl()}">
|
<div class="media-artwork" :class="artworkPlaying()"
|
||||||
|
:style="{'--artwork': getAlbumArtUrl()}">
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -100,7 +100,8 @@
|
||||||
</template>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
<div class="md-footer">
|
<div class="md-footer">
|
||||||
<button class="md-btn playback-button--small lyrics active" @click="player.lowerPanelState = 'controls'"></button>
|
<button class="md-btn playback-button--small lyrics active"
|
||||||
|
@click="player.lowerPanelState = 'controls'"></button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="player_bottom" v-if="player.lowerPanelState == 'controls'">
|
<div class="player_bottom" v-if="player.lowerPanelState == 'controls'">
|
||||||
|
|
@ -120,10 +121,14 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="md-footer">
|
<div class="md-footer">
|
||||||
<input type="range" min="0" :value="player.currentMediaItem.durationInMillis - player.currentMediaItem.remainingTime" :max="player.currentMediaItem.durationInMillis" class="web-slider playback-slider" @input="seekTo($event.target.value)">
|
<input type="range" min="0"
|
||||||
|
:value="player.currentMediaItem.durationInMillis - player.currentMediaItem.remainingTime"
|
||||||
|
:max="player.currentMediaItem.durationInMillis" class="web-slider playback-slider"
|
||||||
|
@input="seekTo($event.target.value)">
|
||||||
<div class="row nopadding player-duration-container" style="width: 90%;margin: 0 auto;">
|
<div class="row nopadding player-duration-container" style="width: 90%;margin: 0 auto;">
|
||||||
<div class="col nopadding player-duration-time" style="text-align:left">
|
<div class="col nopadding player-duration-time" style="text-align:left">
|
||||||
{{ parseTime(player.currentMediaItem.durationInMillis - player.currentMediaItem.remainingTime) }}
|
{{ parseTime(player.currentMediaItem.durationInMillis -
|
||||||
|
player.currentMediaItem.remainingTime) }}
|
||||||
</div>
|
</div>
|
||||||
<div class="col nopadding player-duration-time" style="text-align:right">
|
<div class="col nopadding player-duration-time" style="text-align:right">
|
||||||
-{{ parseTime(player.currentMediaItem.remainingTime) }}
|
-{{ parseTime(player.currentMediaItem.remainingTime) }}
|
||||||
|
|
@ -131,15 +136,21 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="md-footer playback-buttons">
|
<div class="md-footer playback-buttons">
|
||||||
<button class="md-btn playback-button--small repeat" @click="repeat()" v-if="player.currentMediaItem.repeatMode == 0"></button>
|
<button class="md-btn playback-button--small repeat" @click="repeat()"
|
||||||
<button class="md-btn playback-button--small repeat active" @click="repeat()" v-else-if="player.currentMediaItem.repeatMode == 2"></button>
|
v-if="player.currentMediaItem.repeatMode == 0"></button>
|
||||||
<button class="md-btn playback-button--small repeat repeatOne" @click="repeat()" v-else-if="player.currentMediaItem.repeatMode == 1"></button>
|
<button class="md-btn playback-button--small repeat active" @click="repeat()"
|
||||||
|
v-else-if="player.currentMediaItem.repeatMode == 2"></button>
|
||||||
|
<button class="md-btn playback-button--small repeat repeatOne" @click="repeat()"
|
||||||
|
v-else-if="player.currentMediaItem.repeatMode == 1"></button>
|
||||||
<button class="md-btn playback-button previous" @click="previous()"></button>
|
<button class="md-btn playback-button previous" @click="previous()"></button>
|
||||||
<button class="md-btn playback-button pause" @click="pause()" v-if="player.currentMediaItem.status"></button>
|
<button class="md-btn playback-button pause" @click="pause()"
|
||||||
|
v-if="player.currentMediaItem.status"></button>
|
||||||
<button class="md-btn playback-button play" @click="play()" v-else></button>
|
<button class="md-btn playback-button play" @click="play()" v-else></button>
|
||||||
<button class="md-btn playback-button next" @click="next()"></button>
|
<button class="md-btn playback-button next" @click="next()"></button>
|
||||||
<button class="md-btn playback-button--small shuffle" @click="shuffle()" v-if="player.currentMediaItem.shuffleMode == 0"></button>
|
<button class="md-btn playback-button--small shuffle" @click="shuffle()"
|
||||||
<button class="md-btn playback-button--small shuffle active" @click="shuffle()" v-else></button>
|
v-if="player.currentMediaItem.shuffleMode == 0"></button>
|
||||||
|
<button class="md-btn playback-button--small shuffle active" @click="shuffle()"
|
||||||
|
v-else></button>
|
||||||
</div>
|
</div>
|
||||||
<div class="md-footer">
|
<div class="md-footer">
|
||||||
<div class="row volume-slider-container">
|
<div class="row volume-slider-container">
|
||||||
|
|
@ -147,7 +158,8 @@
|
||||||
<div class="player-volume-glyph decrease"></div>
|
<div class="player-volume-glyph decrease"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<input type="range" class="web-slider volume-slider" max="1" min="0" step="0.01" @input="setVolume($event.target.value)" :value="player.currentMediaItem.volume">
|
<input type="range" class="web-slider volume-slider" max="1" min="0" step="0.01"
|
||||||
|
@input="setVolume($event.target.value)" :value="player.currentMediaItem.volume">
|
||||||
</div>
|
</div>
|
||||||
<div class="col-auto">
|
<div class="col-auto">
|
||||||
<div class="player-volume-glyph increase"></div>
|
<div class="player-volume-glyph increase"></div>
|
||||||
|
|
@ -157,8 +169,10 @@
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="md-footer">
|
<div class="md-footer">
|
||||||
<button class="md-btn playback-button--small lyrics" v-if="checkOrientation() == 'portrait'" @click="showLyrics()"></button>
|
<button class="md-btn playback-button--small lyrics" v-if="checkOrientation() == 'portrait'"
|
||||||
<button class="md-btn playback-button--small lyrics" v-if="checkOrientation() == 'landscape'" @click="showLyricsInline()"></button>
|
@click="showLyrics()"></button>
|
||||||
|
<button class="md-btn playback-button--small lyrics"
|
||||||
|
v-if="checkOrientation() == 'landscape'" @click="showLyricsInline()"></button>
|
||||||
<button class="md-btn playback-button--small queue" @click="showQueue()"></button>
|
<button class="md-btn playback-button--small queue" @click="showQueue()"></button>
|
||||||
<button class="md-btn playback-button--small search" @click="showSearch()"></button>
|
<button class="md-btn playback-button--small search" @click="showSearch()"></button>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -176,34 +190,43 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="col" style="display: flex;align-items: center;">
|
<div class="col" style="display: flex;align-items: center;">
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<input type="text" placeholder="Artists, Songs, Lyrics, and More" spellcheck="false" v-model="search.query" @change="searchQuery()" v-on:keyup.enter="searchQuery()" class="search-input">
|
<input type="text" placeholder="Artists, Songs, Lyrics, and More"
|
||||||
|
spellcheck="false" v-model="search.query" @change="searchQuery()"
|
||||||
|
v-on:keyup.enter="searchQuery()" class="search-input">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="md-header search-type-container">
|
<div class="md-header search-type-container">
|
||||||
<button class="search-type-button" @click="search.searchType = 'applemusic';searchQuery()" :class="searchTypeClass('applemusic')" style="width:100%;">Apple Music
|
<button class="search-type-button" @click="search.searchType = 'applemusic';searchQuery()"
|
||||||
|
:class="searchTypeClass('applemusic')" style="width:100%;">Apple Music
|
||||||
</button>
|
</button>
|
||||||
<button class="search-type-button" @click="search.searchType = 'library';searchQuery()" :class="searchTypeClass('library')" style="width:100%;">Library
|
<button class="search-type-button" @click="search.searchType = 'library';searchQuery()"
|
||||||
|
:class="searchTypeClass('library')" style="width:100%;">Library
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="md-header search-tab-container" v-if="search.state == 2">
|
<div class="md-header search-tab-container" v-if="search.state == 2">
|
||||||
<button class="search-tab" @click="search.tab = 'all'" :class="searchTabClass('all')">All
|
<button class="search-tab" @click="search.tab = 'all'" :class="searchTabClass('all')">All
|
||||||
Results
|
Results
|
||||||
</button>
|
</button>
|
||||||
<button class="search-tab" @click="search.tab = 'songs'" :class="searchTabClass('songs')">Songs
|
<button class="search-tab" @click="search.tab = 'songs'"
|
||||||
|
:class="searchTabClass('songs')">Songs
|
||||||
</button>
|
</button>
|
||||||
<button class="search-tab" @click="search.tab = 'albums'" :class="searchTabClass('albums')">Albums
|
<button class="search-tab" @click="search.tab = 'albums'"
|
||||||
|
:class="searchTabClass('albums')">Albums
|
||||||
</button>
|
</button>
|
||||||
<button class="search-tab" @click="search.tab = 'artists'" :class="searchTabClass('artists')">Artists
|
<button class="search-tab" @click="search.tab = 'artists'"
|
||||||
|
:class="searchTabClass('artists')">Artists
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="search-body-container">
|
<div class="search-body-container">
|
||||||
<transition name="wpfade">
|
<transition name="wpfade">
|
||||||
<div class="md-body search-body" v-if="search.state == 0">
|
<div class="md-body search-body" v-if="search.state == 0">
|
||||||
<div style="font-size: 17px;display:flex;flex-direction: column;justify-content: center;align-items: center;">
|
<div
|
||||||
<img src="./assets/search.svg" style="width: 40px;margin: 32px;opacity: 0.85"> Search by song, album, artist, or lyrics.
|
style="font-size: 17px;display:flex;flex-direction: column;justify-content: center;align-items: center;">
|
||||||
|
<img src="./assets/search.svg" style="width: 40px;margin: 32px;opacity: 0.85">
|
||||||
|
Search by song, album, artist, or lyrics.
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</transition>
|
</transition>
|
||||||
|
|
@ -213,10 +236,11 @@
|
||||||
</div>
|
</div>
|
||||||
</transition>
|
</transition>
|
||||||
<transition name="wpfade">
|
<transition name="wpfade">
|
||||||
<div class="md-body search-body" ref="searchBody" @scroll="searchScroll" style="overflow-y:auto;" v-if="search.state == 2">
|
<div class="md-body search-body" ref="searchBody" @scroll="searchScroll"
|
||||||
|
style="overflow-y:auto;" v-if="search.state == 2">
|
||||||
<template v-if="canShowSearchTab('songs')">
|
<template v-if="canShowSearchTab('songs')">
|
||||||
<div class="list-entry-header">Songs</div>
|
<div class="list-entry-header">Songs</div>
|
||||||
|
<template v-if="search.results.songs != null">
|
||||||
<div class="list-entry" v-for="song in search.results.songs.data"
|
<div class="list-entry" v-for="song in search.results.songs.data"
|
||||||
@click="trackSelect(song)">
|
@click="trackSelect(song)">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
|
|
@ -236,30 +260,31 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</template>
|
||||||
<div class="list-entry" v-for="song in search.results['library-songs']"
|
<template v-if="search.results['library-songs'] != null">
|
||||||
|
<div class="list-entry" v-for="song in search.results['library-songs'].data"
|
||||||
@click="trackSelect(song)">
|
@click="trackSelect(song)">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-auto flex-center">
|
<div class="col-auto flex-center">
|
||||||
<div class="list-entry-image" v-if="song.artwork"
|
<div class="list-entry-image" v-if="song.attributes.artwork"
|
||||||
:style="{'--artwork': getAlbumArtUrlList(song.artwork.url)}">
|
:style="{'--artwork': getAlbumArtUrlList(song.attributes.artwork.url)}">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col flex-center">
|
<div class="col flex-center">
|
||||||
<div class="list-entry-name">
|
<div class="list-entry-name">
|
||||||
{{ song.name }}
|
{{ song.attributes.name }}
|
||||||
</div>
|
</div>
|
||||||
<div class="list-entry-artist">
|
<div class="list-entry-artist">
|
||||||
{{ song.artistName }}
|
{{ song.attributes.artistName }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</template>
|
||||||
</template>
|
</template>
|
||||||
<template v-if="canShowSearchTab('albums')">
|
<template v-if="canShowSearchTab('albums')">
|
||||||
<div class="list-entry-header">Albums</div>
|
<div class="list-entry-header">Albums</div>
|
||||||
|
<template v-if="search.results.albums != null">
|
||||||
<div class="list-entry" v-for="album in search.results.albums.data"
|
<div class="list-entry" v-for="album in search.results.albums.data"
|
||||||
@click="showAlbum(album.id)">
|
@click="showAlbum(album.id)">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
|
|
@ -279,33 +304,31 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</template>
|
||||||
<div class="list-entry" v-for="album in search.results['library-albums']">
|
<template v-if="search.results['library-albums'] != null">
|
||||||
|
<div class="list-entry" v-for="album in search.results['library-albums'].data">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-auto flex-center">
|
<div class="col-auto flex-center">
|
||||||
<div class="list-entry-image" v-if="album.artwork"
|
<div class="list-entry-image" v-if="album.attributes.artwork"
|
||||||
:style="{'--artwork': getAlbumArtUrlList(album.artwork.url)}">
|
:style="{'--artwork': getAlbumArtUrlList(album.attributes.artwork.url)}">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col flex-center">
|
<div class="col flex-center">
|
||||||
<div class="list-entry-name">
|
<div class="list-entry-name">
|
||||||
{{ album.name }}
|
{{ album.attributes.name }}
|
||||||
</div>
|
</div>
|
||||||
<div class="list-entry-artist">
|
<div class="list-entry-artist">
|
||||||
{{ album.artistName }}
|
{{ album.attributes.artistName }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</template>
|
||||||
</template>
|
</template>
|
||||||
<template v-if="canShowSearchTab('artists')">
|
<template v-if="canShowSearchTab('artists')">
|
||||||
<div class="list-entry-header">Artists</div>
|
<div class="list-entry-header">Artists</div>
|
||||||
|
<template v-if="search.results.artists != null">
|
||||||
<div class="list-entry"
|
<div class="list-entry" @click="showArtist(artist.id)" v-for="artist in search.results.artists.data">
|
||||||
@click="showArtist(artist.id)"
|
|
||||||
v-for="artist in search.results.artists.data"
|
|
||||||
>
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-auto flex-center">
|
<div class="col-auto flex-center">
|
||||||
<div class="list-entry-image artist" v-if="artist.attributes.artwork"
|
<div class="list-entry-image artist" v-if="artist.attributes.artwork"
|
||||||
|
|
@ -322,17 +345,18 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</template>
|
||||||
<div class="list-entry" v-for="artist in search.results['library-artists']">
|
<template v-if="search.results['library-artists'] != null">
|
||||||
|
<div class="list-entry" v-for="artist in search.results['library-artists'].data">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-auto flex-center">
|
<div class="col-auto flex-center">
|
||||||
<div class="list-entry-image artist" v-if="artist.artwork"
|
<div class="list-entry-image artist" v-if="artist.attributes.artwork"
|
||||||
:style="{'--artwork': getAlbumArtUrlList(artist.artwork.url)}">
|
:style="{'--artwork': getAlbumArtUrlList(artist.attributes.artwork.url)}">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col flex-center">
|
<div class="col flex-center">
|
||||||
<div class="list-entry-name">
|
<div class="list-entry-name">
|
||||||
{{ artist.name }}
|
{{ artist.attributes.name }}
|
||||||
</div>
|
</div>
|
||||||
<div class="list-entry-artist">
|
<div class="list-entry-artist">
|
||||||
|
|
||||||
|
|
@ -340,7 +364,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</template>
|
||||||
</template>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
</transition>
|
</transition>
|
||||||
|
|
@ -352,7 +376,8 @@
|
||||||
<transition name="wpfade">
|
<transition name="wpfade">
|
||||||
<div class="md-container md-container_panel context-menu" style="overflow-y:auto;" v-if="search.trackSelect">
|
<div class="md-container md-container_panel context-menu" style="overflow-y:auto;" v-if="search.trackSelect">
|
||||||
<div class="md-body context-menu-body">
|
<div class="md-body context-menu-body">
|
||||||
<button class="context-menu-item context-menu-item--left" @click="playMediaItemById(search.selected.attributes.playParams.id);clearSelectedTrack()">
|
<button class="context-menu-item context-menu-item--left"
|
||||||
|
@click="playMediaItemById(search.selected.attributes.playParams.id);clearSelectedTrack()">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-auto flex-center" v-if="search.selected.attributes.artwork"
|
<div class="col-auto flex-center" v-if="search.selected.attributes.artwork"
|
||||||
style="display:flex;align-items: center;">
|
style="display:flex;align-items: center;">
|
||||||
|
|
@ -375,7 +400,8 @@
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="md-body context-menu-body" style="height: auto;">
|
<div class="md-body context-menu-body" style="height: auto;">
|
||||||
<button class="context-menu-item context-menu-item--left" @click="playMediaItemById(search.selected.id);clearSelectedTrack()">
|
<button class="context-menu-item context-menu-item--left"
|
||||||
|
@click="playMediaItemById(search.selected.id);clearSelectedTrack()">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col">
|
<div class="col">
|
||||||
Play
|
Play
|
||||||
|
|
@ -385,7 +411,8 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</button>
|
</button>
|
||||||
<button class="context-menu-item context-menu-item--left" @click="playNext('song', search.selected.id);clearSelectedTrack()">
|
<button class="context-menu-item context-menu-item--left"
|
||||||
|
@click="playNext('song', search.selected.id);clearSelectedTrack()">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col">
|
<div class="col">
|
||||||
Play Next
|
Play Next
|
||||||
|
|
@ -395,7 +422,8 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</button>
|
</button>
|
||||||
<button class="context-menu-item context-menu-item--left" @click="playLater('song', search.selected.id);clearSelectedTrack()">
|
<button class="context-menu-item context-menu-item--left"
|
||||||
|
@click="playLater('song', search.selected.id);clearSelectedTrack()">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col">
|
<div class="col">
|
||||||
Play Later
|
Play Later
|
||||||
|
|
@ -476,7 +504,8 @@
|
||||||
</transition>
|
</transition>
|
||||||
<!-- Artist Page -->
|
<!-- Artist Page -->
|
||||||
<transition name="wpfade">
|
<transition name="wpfade">
|
||||||
<div class="md-container md-container_panel" v-if="screen == 'artist-page'" v-if="artistPage.data.attributes['name']">
|
<div class="md-container md-container_panel" v-if="screen == 'artist-page'"
|
||||||
|
v-if="artistPage.data.attributes['name']">
|
||||||
<div class="md-header">
|
<div class="md-header">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-auto">
|
<div class="col-auto">
|
||||||
|
|
@ -488,26 +517,32 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="album-body-container" :style="getMediaPalette(artistPage.data.attributes)">
|
<div class="album-body-container" :style="getMediaPalette(artistPage.data.attributes)">
|
||||||
<div class="artist-header" v-if="artistPage.data.attributes['artwork']" :style="getMediaPalette(artistPage.data.attributes)">
|
<div class="artist-header" v-if="artistPage.data.attributes['artwork']"
|
||||||
<div class="artist-header-portrait" :style="{'--artwork': getAlbumArtUrlList(artistPage.data.attributes['artwork']['url'], 600)}"></div>
|
:style="getMediaPalette(artistPage.data.attributes)">
|
||||||
|
<div class="artist-header-portrait"
|
||||||
|
:style="{'--artwork': getAlbumArtUrlList(artistPage.data.attributes['artwork']['url'], 600)}">
|
||||||
|
</div>
|
||||||
<h2>{{ artistPage.data.attributes["name"] }}</h2>
|
<h2>{{ artistPage.data.attributes["name"] }}</h2>
|
||||||
</div>
|
</div>
|
||||||
<div class="md-body artist-body">
|
<div class="md-body artist-body">
|
||||||
<h2>Songs</h2>
|
<h2>Songs</h2>
|
||||||
<div class="song-scroller-horizontal">
|
<div class="song-scroller-horizontal">
|
||||||
<button v-for="song in artistPage.data.relationships['songs'].data" class="song-placeholder" @click="trackSelect(song)">
|
<button v-for="song in artistPage.data.relationships['songs'].data" class="song-placeholder"
|
||||||
|
@click="trackSelect(song)">
|
||||||
{{ song.attributes.name }}
|
{{ song.attributes.name }}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<h2>Albums</h2>
|
<h2>Albums</h2>
|
||||||
<div class="mediaitem-scroller-horizontal">
|
<div class="mediaitem-scroller-horizontal">
|
||||||
<button v-for="album in artistPage.data.relationships['albums'].data" class="album-placeholder" @click="showAlbum(album.attributes.playParams.id)">
|
<button v-for="album in artistPage.data.relationships['albums'].data" class="album-placeholder"
|
||||||
|
@click="showAlbum(album.attributes.playParams.id)">
|
||||||
{{ album.attributes.name }}
|
{{ album.attributes.name }}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<h2>Playlists</h2>
|
<h2>Playlists</h2>
|
||||||
<div class="mediaitem-scroller-horizontal">
|
<div class="mediaitem-scroller-horizontal">
|
||||||
<button v-for="playlist in artistPage.data.relationships['playlists'].data" class="album-placeholder">
|
<button v-for="playlist in artistPage.data.relationships['playlists'].data"
|
||||||
|
class="album-placeholder">
|
||||||
{{ playlist.attributes.name }}
|
{{ playlist.attributes.name }}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -538,8 +573,10 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="md-header" style="text-align: right;padding: 5px 16px;">
|
<div class="md-header" style="text-align: right;padding: 5px 16px;">
|
||||||
<button class="md-btn playback-button--small autoplay" v-if="!player.currentMediaItem.autoplayEnabled" @click="setAutoplay(true)"></button>
|
<button class="md-btn playback-button--small autoplay" v-if="!player.currentMediaItem.autoplayEnabled"
|
||||||
<button class="md-btn playback-button--small autoplay activeColor" v-else @click="setAutoplay(false)"></button>
|
@click="setAutoplay(true)"></button>
|
||||||
|
<button class="md-btn playback-button--small autoplay activeColor" v-else
|
||||||
|
@click="setAutoplay(false)"></button>
|
||||||
</div>
|
</div>
|
||||||
<div class="md-body queue-body" v-if="!player.queue['_queueItems']">
|
<div class="md-body queue-body" v-if="!player.queue['_queueItems']">
|
||||||
Empty
|
Empty
|
||||||
|
|
@ -575,8 +612,10 @@
|
||||||
</draggable>
|
</draggable>
|
||||||
</div>
|
</div>
|
||||||
<div class="md-footer">
|
<div class="md-footer">
|
||||||
<button class="md-btn playback-button--small lyrics" v-if="checkOrientation() == 'portrait'" @click="showLyrics()"></button>
|
<button class="md-btn playback-button--small lyrics" v-if="checkOrientation() == 'portrait'"
|
||||||
<button class="md-btn playback-button--small lyrics" v-if="checkOrientation() == 'landscape'" @click="screen = 'player';showLyricsInline()"></button>
|
@click="showLyrics()"></button>
|
||||||
|
<button class="md-btn playback-button--small lyrics" v-if="checkOrientation() == 'landscape'"
|
||||||
|
@click="screen = 'player';showLyricsInline()"></button>
|
||||||
<button class="md-btn playback-button--small queue active" @click="screen = 'player'"></button>
|
<button class="md-btn playback-button--small queue active" @click="screen = 'player'"></button>
|
||||||
<button class="md-btn playback-button--small search" @click="showSearch()"></button>
|
<button class="md-btn playback-button--small search" @click="showSearch()"></button>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -635,7 +674,8 @@
|
||||||
</transition>
|
</transition>
|
||||||
<!-- Album Page -->
|
<!-- Album Page -->
|
||||||
<transition name="wpfade">
|
<transition name="wpfade">
|
||||||
<div class="md-container md-container_panel md-container_album" v-if="screen == 'album-page' && albumPage.data.attributes['name']">
|
<div class="md-container md-container_panel md-container_album"
|
||||||
|
v-if="screen == 'album-page' && albumPage.data.attributes['name']">
|
||||||
<div class="md-header">
|
<div class="md-header">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-auto">
|
<div class="col-auto">
|
||||||
|
|
@ -645,7 +685,8 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="album-body-container">
|
<div class="album-body-container">
|
||||||
<div class="md-header">
|
<div class="md-header">
|
||||||
<div class="albumpage-artwork" :style="{'--artwork': getAlbumArtUrlList(albumPage.data.attributes['artwork']['url'], 300)}">
|
<div class="albumpage-artwork"
|
||||||
|
:style="{'--artwork': getAlbumArtUrlList(albumPage.data.attributes['artwork']['url'], 300)}">
|
||||||
</div>
|
</div>
|
||||||
<div class="albumpage-album-name">
|
<div class="albumpage-album-name">
|
||||||
{{ albumPage.data.attributes["name"] }}
|
{{ albumPage.data.attributes["name"] }}
|
||||||
|
|
@ -654,15 +695,18 @@
|
||||||
{{ albumPage.data.attributes["artistName"] }}
|
{{ albumPage.data.attributes["artistName"] }}
|
||||||
</div>
|
</div>
|
||||||
<div class="albumpage-misc-info">
|
<div class="albumpage-misc-info">
|
||||||
{{ albumPage.data.attributes.genreNames[0] }} ∙ {{ new Date(albumPage.data.attributes.releaseDate).getFullYear() }}
|
{{ albumPage.data.attributes.genreNames[0] }} ∙ {{ new
|
||||||
|
Date(albumPage.data.attributes.releaseDate).getFullYear() }}
|
||||||
</div>
|
</div>
|
||||||
<div class="row" style="margin-top: 20px;">
|
<div class="row" style="margin-top: 20px;">
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<button class="wr-btn" @click="playAlbum(albumPage.data.attributes.id, false)" style="width:100%;">Play
|
<button class="wr-btn" @click="playAlbum(albumPage.data.attributes.id, false)"
|
||||||
|
style="width:100%;">Play
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<button class="wr-btn" style="width:100%;" @click="playAlbum(albumPage.data.attributes.id, true)">Shuffle
|
<button class="wr-btn" style="width:100%;"
|
||||||
|
@click="playAlbum(albumPage.data.attributes.id, true)">Shuffle
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -675,10 +719,12 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="md-body artist-body">
|
<div class="md-body artist-body">
|
||||||
<div class="list-entry-header">Tracks</div>
|
<div class="list-entry-header">Tracks</div>
|
||||||
<div class="list-entry" v-for="song in albumPage.data.relationships['tracks'].data" @click="trackSelect(song)">
|
<div class="list-entry" v-for="song in albumPage.data.relationships['tracks'].data"
|
||||||
|
@click="trackSelect(song)">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-auto flex-center">
|
<div class="col-auto flex-center">
|
||||||
<div class="list-entry-image" v-if="song.attributes.artwork" :style="{'--artwork': getAlbumArtUrlList(song.attributes.artwork.url)}">
|
<div class="list-entry-image" v-if="song.attributes.artwork"
|
||||||
|
:style="{'--artwork': getAlbumArtUrlList(song.attributes.artwork.url)}">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col flex-center">
|
<div class="col flex-center">
|
||||||
|
|
@ -704,13 +750,18 @@
|
||||||
</transition>
|
</transition>
|
||||||
<!-- Album Page - Editorial Notes -->
|
<!-- Album Page - Editorial Notes -->
|
||||||
<transition name="wpfade">
|
<transition name="wpfade">
|
||||||
<div class="md-container md-container_panel context-menu" v-if="albumPage.editorsNotes" style="padding-top: 42px;">
|
<div class="md-container md-container_panel context-menu" v-if="albumPage.editorsNotes"
|
||||||
<div class="md-header" :style="getMediaPalette(albumPage.data)" style="font-size: 18px;background:var(--bgColor);color:var(--textColor1);text-align: center;border-radius: 10px 10px 0 0;border-top: 1px solid #ffffff1f;">
|
style="padding-top: 42px;">
|
||||||
|
<div class="md-header" :style="getMediaPalette(albumPage.data)"
|
||||||
|
style="font-size: 18px;background:var(--bgColor);color:var(--textColor1);text-align: center;border-radius: 10px 10px 0 0;border-top: 1px solid #ffffff1f;">
|
||||||
{{ albumPage.data.attributes["name"] }}
|
{{ albumPage.data.attributes["name"] }}
|
||||||
</div>
|
</div>
|
||||||
<div class="md-body album-page-fullnotes-body" :style="getMediaPalette(albumPage.data.attributes)" style="background:var(--bgColor);color:var(--textColor1);" v-html="albumPage.data.attributes['editorialNotes']['standard']">
|
<div class="md-body album-page-fullnotes-body" :style="getMediaPalette(albumPage.data.attributes)"
|
||||||
|
style="background:var(--bgColor);color:var(--textColor1);"
|
||||||
|
v-html="albumPage.data.attributes['editorialNotes']['standard']">
|
||||||
</div>
|
</div>
|
||||||
<div class="md-footer" :style="getMediaPalette(albumPage.data.attributes)" style="background:var(--bgColor);color:var(--textColor1);">
|
<div class="md-footer" :style="getMediaPalette(albumPage.data.attributes)"
|
||||||
|
style="background:var(--bgColor);color:var(--textColor1);">
|
||||||
<button class="context-menu-item" @click="albumPage.editorsNotes = false">Close</button>
|
<button class="context-menu-item" @click="albumPage.editorsNotes = false">Close</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -729,7 +780,9 @@
|
||||||
<div v-else>
|
<div v-else>
|
||||||
<h3 style="text-align:center;">Connection Interrupted</h3>
|
<h3 style="text-align:center;">Connection Interrupted</h3>
|
||||||
<!--<button class="md-btn md-btn-primary" style="font-weight:500;width: 120px;border-radius: 50px;display:block;margin: 0 auto;" @click="connect()">Retry-->
|
<!--<button class="md-btn md-btn-primary" style="font-weight:500;width: 120px;border-radius: 50px;display:block;margin: 0 auto;" @click="connect()">Retry-->
|
||||||
<button class="md-btn md-btn-primary" style="font-weight:500;width: 120px;border-radius: 50px;display:block;margin: 0 auto;" onclick="document.location = document.location">Retry
|
<button class="md-btn md-btn-primary"
|
||||||
|
style="font-weight:500;width: 120px;border-radius: 50px;display:block;margin: 0 auto;"
|
||||||
|
onclick="document.location = document.location">Retry
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue