Merge branch 'Apple-Music-Electron:main' into main
This commit is contained in:
Brandon Plank
GitHub
commit
1da7f8fe46
3 changed files with 485 additions and 92 deletions
|
|
@ -99,7 +99,9 @@
|
|||
<button class="playback-button--small queue"></button>
|
||||
</div>
|
||||
<div class="app-chrome-item generic">
|
||||
<button class="playback-button--small lyrics" @click="drawertest = !drawertest; lyricon =!lyricon; if(drawertest == true){loadLyrics();}"></button>
|
||||
<button class="playback-button--small lyrics"
|
||||
@click="drawertest = !drawertest; lyricon =!lyricon; if(drawertest == true){loadLyrics();}"
|
||||
></button>
|
||||
</div>
|
||||
<div class="app-chrome-item full-height">
|
||||
<div class="window-controls">
|
||||
|
|
@ -142,7 +144,8 @@
|
|||
<div class="app-sidebar-header-text">
|
||||
Playlists
|
||||
</div>
|
||||
<button class="app-sidebar-item" v-for="item in playlists.listing" :key="item.id" href="item.href">
|
||||
<button class="app-sidebar-item" v-for="item in playlists.listing" :key="item.id" :href="item.href"
|
||||
@click='app.page=`playlist_` + item.id ; showingPlaylist = [];getPlaylistFromID(app.page.substring(9))'>
|
||||
{{ item.attributes.name }}
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -170,10 +173,10 @@
|
|||
<button class="app-sidebar-button" style="width:100%"
|
||||
@click="chrome.menuOpened = !chrome.menuOpened">
|
||||
<template v-if="chrome.userinfo.attributes">
|
||||
<div class="sidebar-user-icon"
|
||||
:style="{'--artwork': getMediaItemArtwork(chrome.userinfo.attributes['artwork']['url'], 26)}">
|
||||
<img class="sidebar-user-icon" loading="lazy"
|
||||
|
||||
</div>
|
||||
:src="getMediaItemArtwork(chrome.userinfo.attributes['artwork'] ? chrome.userinfo.attributes['artwork']['url'] : '', 26)"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<div class="sidebar-user-text" v-if="!chrome.hideUserInfo">
|
||||
|
|
@ -195,10 +198,25 @@
|
|||
<div class="app-sidebar-notification" v-if="library.songs.downloadState == 1">
|
||||
<div>Updating your library...</div>
|
||||
<div>{{ library.songs.meta.progress }} / {{ library.songs.meta.total }}</div>
|
||||
<div style="width: 100%"><progress style="width: 80%;" :value="library.songs.meta.progress" :max="library.songs.meta.total"></progress></div>
|
||||
<div style="width: 100%">
|
||||
<progress style="width: 80%;" :value="library.songs.meta.progress"
|
||||
:max="library.songs.meta.total"></progress>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="app-content">
|
||||
<!-- 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>
|
||||
<!-- Browse -->
|
||||
<transition name="wpfade">
|
||||
<template v-if="page == 'browse'">
|
||||
|
|
@ -275,7 +293,7 @@
|
|||
<!-- Library - Songs -->
|
||||
<transition name="wpfade" v-on:enter="getLibrarySongsFull()">
|
||||
<template v-if="page == 'library-songs'">
|
||||
<div class="content-inner" v-if="library.songs.downloadState == 2">
|
||||
<div class="content-inner">
|
||||
<h1 class="header-text">Songs</h1>
|
||||
<div class="search-input-container" style="width:100%;margin: 16px 0px;">
|
||||
<div class="search-input--icon"></div>
|
||||
|
|
@ -290,13 +308,6 @@
|
|||
<mediaitem-list-item :item="item"
|
||||
v-for="item in library.songs.displayListing"></mediaitem-list-item>
|
||||
</div>
|
||||
<div class="content-inner" v-if="library.songs.downloadState == 0">
|
||||
</div>
|
||||
<div class="content-inner centered" v-if="library.songs.downloadState == 1">
|
||||
<h1 style="text-align: center">Updating your library</h1>
|
||||
<h3 style="text-align: center">{{ library.songs.meta.progress }} / {{
|
||||
library.songs.meta.total }}</h3>
|
||||
</div>
|
||||
</template>
|
||||
</transition>
|
||||
<!-- Library - Albums -->
|
||||
|
|
@ -318,9 +329,11 @@
|
|||
</template>
|
||||
</transition>
|
||||
</div>
|
||||
<transition name="drawertransition">
|
||||
<div class="app-drawer" v-if="drawertest">
|
||||
<lyrics-view v-if="drawertest && lyricon" :time="lyriccurrenttime" :lyrics="lyrics"></lyrics-view>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
<transition name="wpfade">
|
||||
|
|
@ -335,6 +348,23 @@
|
|||
|
||||
</div>
|
||||
|
||||
<script type="text/x-template" id="mediaitem-artwork">
|
||||
<template v-if="type == 'artists'">
|
||||
<div class="mediaitem-artwork rounded"
|
||||
>
|
||||
<img :src="app.getMediaItemArtwork(url, size)"
|
||||
class="mediaitem-artwork--img">
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="mediaitem-artwork"
|
||||
>
|
||||
<img :src="app.getMediaItemArtwork(url, size)"
|
||||
class="mediaitem-artwork--img">
|
||||
</div>
|
||||
</template>
|
||||
</script>
|
||||
|
||||
<!-- Generic Collection of MediaItems -->
|
||||
<script type="text/x-template" id="collection-view-generic">
|
||||
<template>
|
||||
|
|
@ -371,6 +401,34 @@
|
|||
</div>
|
||||
</script>
|
||||
|
||||
<!-- Album / Playlist View -->
|
||||
<script type="text/x-template" id="cider-playlist">
|
||||
<div class="content-inner">
|
||||
<template v-if="data != [] && data.attributes != []">
|
||||
<div class="playlist-display row">
|
||||
<div class="col-auto">
|
||||
<mediaitem-artwork
|
||||
:url="(data.attributes != null && data.attributes.artwork != null) ? data.attributes.artwork.url : (data.relationships.tracks.data.length > 0 ? data.relationships.tracks.data[0].attributes.artwork.url ?? '':'')"
|
||||
size="200"
|
||||
></mediaitem-artwork>
|
||||
</div>
|
||||
<div class="col playlist-info">
|
||||
<div class="playlist-name">{{data.attributes.name ?? (data.attributes.title ?? '') ?? ''}}</div>
|
||||
<div class="playlist-artist" v-if="data.attributes.artistName">{{data.attributes.artistName ??
|
||||
''}}
|
||||
</div>
|
||||
<div class="playlist-desc"
|
||||
v-html="((data.attributes.editorialNotes) ? (data.attributes.editorialNotes.short ?? (data.attributes.editorialNotes.standard ?? '') ) : (data.attributes.description ? (data.attributes.description.short ?? (data.attributes.description.standard ?? '')) : ''))"></div>
|
||||
</div>
|
||||
</div>
|
||||
<mediaitem-list-item :item="item"
|
||||
v-for="item in data.relationships.tracks.data"></mediaitem-list-item>
|
||||
<div class="playlist-time">{{app.getTotalTime()}}</div>
|
||||
</template>
|
||||
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<!-- Search -->
|
||||
<script type="text/x-template" id="cider-search">
|
||||
<div class="content-inner">
|
||||
|
|
@ -378,7 +436,7 @@
|
|||
<div class="col-sm" style="width: auto;" v-if="getTopResult()">
|
||||
<template>
|
||||
<h3>Top Result</h3>
|
||||
<mediaitem-square :item="getTopResult()"></mediaitem-square>
|
||||
<mediaitem-square-large :item="getTopResult()"></mediaitem-square>
|
||||
</template>
|
||||
</div>
|
||||
<div class="col" v-if="search.results.songs">
|
||||
|
|
@ -407,8 +465,8 @@
|
|||
<button class="cd-btn-seeall">See All</button>
|
||||
</div>
|
||||
</div>
|
||||
<mediaitem-scroller-horizontal
|
||||
:items="search.results.albums.data.limit(10)"></mediaitem-scroller-horizontal>
|
||||
<mediaitem-scroller-horizontal-large
|
||||
:items="search.results.albums.data.limit(10)"></mediaitem-scroller-horizontal-large>
|
||||
</template>
|
||||
<template v-if="search.results.artists">
|
||||
<div class="row">
|
||||
|
|
@ -419,8 +477,8 @@
|
|||
<button class="cd-btn-seeall">See All</button>
|
||||
</div>
|
||||
</div>
|
||||
<mediaitem-square :item="item"
|
||||
v-for="item in search.results.artists.data.limit(5)"></mediaitem-square>
|
||||
<mediaitem-square-large :item="item"
|
||||
v-for="item in search.results.artists.data.limit(5)"></mediaitem-square-large>
|
||||
</template>
|
||||
<template v-if="search.results.playlists">
|
||||
<div class="row">
|
||||
|
|
@ -431,8 +489,8 @@
|
|||
<button class="cd-btn-seeall">See All</button>
|
||||
</div>
|
||||
</div>
|
||||
<mediaitem-square :item="item"
|
||||
v-for="item in search.results.playlists.data.limit(10)"></mediaitem-square>
|
||||
<mediaitem-square-large :item="item"
|
||||
v-for="item in search.results.playlists.data.limit(10)"></mediaitem-square-large>
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
|
|
@ -487,10 +545,13 @@
|
|||
<template>
|
||||
<div @click="app.playMediaItemById(item.attributes.playParams.id ?? item.id, item.attributes.playParams.kind ?? item.type, item.attributes.playParams.isLibrary ?? false, item.attributes.url)"
|
||||
class="cd-mediaitem-list-item">
|
||||
<div class="artwork" v-if="item.attributes.artwork"
|
||||
:class="{'round': item.type == 'artists'}"
|
||||
:style="{'--artwork': app.getMediaItemArtwork(item.attributes.artwork.url ? item.attributes.artwork.url : '', 34)}
|
||||
"></div>
|
||||
<div class="artwork">
|
||||
<mediaitem-artwork
|
||||
:url="item.attributes.artwork ? item.attributes.artwork.url : ''"
|
||||
size="34"
|
||||
:type="item.type"
|
||||
></mediaitem-artwork>
|
||||
</div>
|
||||
<div class="info-rect">
|
||||
<div class="title text-overflow-elipsis">
|
||||
{{ item.attributes.name }}
|
||||
|
|
@ -516,10 +577,13 @@
|
|||
<template>
|
||||
<div @click="app.playMediaItemById(item.attributes.playParams.id ?? item.id, item.attributes.playParams.kind ?? item.type, item.attributes.playParams.isLibrary ?? false, item.attributes.url)"
|
||||
class="cd-mediaitem-hrect">
|
||||
<div class="artwork"
|
||||
:class="{'round': item.type == 'artists'}"
|
||||
:style="{'--artwork': app.getMediaItemArtwork(item.attributes.artwork.url, 70)}
|
||||
"></div>
|
||||
<div class="artwork">
|
||||
<mediaitem-artwork
|
||||
:url="item.attributes.artwork ? item.attributes.artwork.url : ''"
|
||||
size="70"
|
||||
:type="item.type"
|
||||
></mediaitem-artwork>
|
||||
</div>
|
||||
<div class="info-rect">
|
||||
<div class="title text-overflow-elipsis">
|
||||
{{ item.attributes.name }}
|
||||
|
|
@ -541,9 +605,13 @@
|
|||
<template>
|
||||
<div @click="app.playMediaItemById(item.attributes.playParams.id ?? item.id, item.attributes.playParams.kind ?? item.type, item.attributes.playParams.isLibrary ?? false, item.attributes.url)"
|
||||
class="cd-mediaitem-square">
|
||||
<div class="artwork"
|
||||
:class="{'round': item.type == 'artists'}"
|
||||
:style="{'--artwork': app.getMediaItemArtwork(item.attributes.artwork.url, 300)}"></div>
|
||||
<div class="artwork">
|
||||
<mediaitem-artwork
|
||||
:url="item.attributes.artwork ? item.attributes.artwork.url : ''"
|
||||
size="300"
|
||||
:type="item.type"
|
||||
></mediaitem-artwork>
|
||||
</div>
|
||||
<div class="title text-overflow-elipsis">
|
||||
{{ item.attributes.name }}
|
||||
</div>
|
||||
|
|
@ -558,16 +626,55 @@
|
|||
|
||||
<script type="text/x-template" id="mediaitem-square-large">
|
||||
<template>
|
||||
<div @click="app.playMediaItemById(item.attributes.playParams.id ?? item.id, item.attributes.playParams.kind ?? item.type, item.attributes.playParams.isLibrary ?? false, item.attributes.url)"
|
||||
<div style="position: relative; display: inline-flex;">
|
||||
<div @click.self='app.routeView(item)'
|
||||
class="cd-mediaitem-square-large">
|
||||
<div class="artwork"
|
||||
:class="{'round': item.type == 'artists'}"
|
||||
:style="{'--artwork': app.getMediaItemArtwork(item.attributes.artwork.url, 300)}"></div>
|
||||
<div class="title text-overflow-elipsis">
|
||||
{{ item.attributes.name }}
|
||||
<div class="artwork">
|
||||
<mediaitem-artwork
|
||||
:url="item.attributes.artwork ? item.attributes.artwork.url : ''"
|
||||
size="300"
|
||||
:type="item.type"
|
||||
></mediaitem-artwork>
|
||||
</div>
|
||||
<div class="cd-mediaitem-square-large-overlay" @click.self='app.routeView(item)'>
|
||||
<div class="button" style="
|
||||
border-radius: 50%;
|
||||
background: rgba(50,50,50,0.7);"
|
||||
:style="[(!(item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? '')).includes('radioStation') && !(item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? '')).includes('song')) ? {'margin': '140px',
|
||||
width: '40px',
|
||||
height: '40px',} :
|
||||
{margin: '35px',
|
||||
width: '120px',
|
||||
height: '120px',}]"
|
||||
@click="app.playMediaItem(item)">
|
||||
<svg fill="white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 27" class="glyph">
|
||||
<path d="M11.3545232,18.4180929 L18.4676039,14.242665 C19.0452323,13.9290954 19.0122249,13.1204156 18.4676039,12.806846 L11.3545232,8.63141809 C10.7603912,8.26833741 9.98471883,8.54889976 9.98471883,9.19254279 L9.98471883,17.8404645 C9.98471883,18.5006112 10.7108802,18.7976773 11.3545232,18.4180929 Z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="title text-overflow-elipsis" @click='app.routeView(item)'>
|
||||
{{ item.attributes.name ?? '' }}
|
||||
</div>
|
||||
<div class="subtitle text-overflow-elipsis" v-if="item.attributes.artistName">
|
||||
{{ item.attributes.artistName }}
|
||||
{{ item.attributes.artistName ?? '' }}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="cd-mediaitem-square-large-overlay" @click.self='app.routeView(item)'>
|
||||
<div class="button" style="
|
||||
border-radius: 50%;
|
||||
background: rgba(50,50,50,0.7);"
|
||||
:style="[(!(item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? '')).includes('radioStation') && !(item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? '')).includes('song')) ? {'margin': '140px',
|
||||
width: '40px',
|
||||
height: '40px',} :
|
||||
{margin: '35px',
|
||||
width: '120px',
|
||||
height: '120px',}]"
|
||||
@click="app.playMediaItem(item)">
|
||||
<svg fill="white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 27" class="glyph">
|
||||
<path d="M11.3545232,18.4180929 L18.4676039,14.242665 C19.0452323,13.9290954 19.0122249,13.1204156 18.4676039,12.806846 L11.3545232,8.63141809 C10.7603912,8.26833741 9.98471883,8.54889976 9.98471883,9.19254279 L9.98471883,17.8404645 C9.98471883,18.5006112 10.7108802,18.7976773 11.3545232,18.4180929 Z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -576,14 +683,33 @@
|
|||
<!-- MediaItem Square SP -->
|
||||
<script type="text/x-template" id="mediaitem-square-sp">
|
||||
<template>
|
||||
<div @click="app.playMediaItemById(item.attributes.playParams.id ?? item.id, item.attributes.playParams.kind ?? item.type, item.attributes.playParams.isLibrary ?? false, item.attributes.url)"
|
||||
<div style="position: relative; display: inline-flex;">
|
||||
<div @click.self='app.routeView(item)'
|
||||
class="cd-mediaitem-square-sp"
|
||||
:style="{'--spcolor' : (item.attributes.artwork.bgColor != null) ? ('#'+item.attributes.artwork.bgColor) : `black`}"
|
||||
|
||||
>
|
||||
<div class="artwork"
|
||||
:class="{'round': item.type == 'artists'}"
|
||||
:style="{'--artwork': app.getMediaItemArtwork(item.attributes.artwork.url, 300) }"></div>
|
||||
:style="{'--spcolor' : (item.attributes.artwork.bgColor != null) ? ('#'+item.attributes.artwork.bgColor) : `black`}">
|
||||
<div class="artwork">
|
||||
<mediaitem-artwork
|
||||
:url="item.attributes.artwork ? item.attributes.artwork.url : ''"
|
||||
size="300"
|
||||
:type="item.type"
|
||||
></mediaitem-artwork>
|
||||
</div>
|
||||
<div class="cd-mediaitem-square-large-overlay" @click.self='app.routeView(item)'>
|
||||
<div class="button" style="
|
||||
border-radius: 50%;
|
||||
background: rgba(50,50,50,0.7);"
|
||||
:style="[(!(item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? '')).includes('radioStation') && !(item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? '')).includes('song')) ? {'margin': '140px',
|
||||
width: '40px',
|
||||
height: '40px',} :
|
||||
{margin: '35px',
|
||||
width: '120px',
|
||||
height: '120px',}]"
|
||||
@click="app.playMediaItem(item)">
|
||||
<svg fill="white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 27" class="glyph">
|
||||
<path d="M11.3545232,18.4180929 L18.4676039,14.242665 C19.0452323,13.9290954 19.0122249,13.1204156 18.4676039,12.806846 L11.3545232,8.63141809 C10.7603912,8.26833741 9.98471883,8.54889976 9.98471883,9.19254279 L9.98471883,17.8404645 C9.98471883,18.5006112 10.7108802,18.7976773 11.3545232,18.4180929 Z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="title text-overflow-elipsis"
|
||||
:style="{'color' : (item.attributes.artwork.textColor1 != null) ? ('#'+item.attributes.artwork.textColor1) : `#eee`}"
|
||||
style="font-weight: 600">
|
||||
|
|
@ -595,6 +721,24 @@
|
|||
{{ (item.attributes.editorialNotes != null) ? item.attributes.editorialNotes.short
|
||||
:(item.attributes.artistName ?? '') }}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="cd-mediaitem-square-large-overlay" @click.self='app.routeView(item)'>
|
||||
<div class="button" style="
|
||||
border-radius: 50%;
|
||||
background: rgba(50,50,50,0.7);"
|
||||
:style="[(!(item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? '')).includes('radioStation') && !(item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? '')).includes('song')) ? {'margin': '140px',
|
||||
width: '40px',
|
||||
height: '40px',} :
|
||||
{margin: '35px',
|
||||
width: '120px',
|
||||
height: '120px',}]"
|
||||
@click="app.playMediaItem(item)">
|
||||
<svg fill="white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 27" class="glyph">
|
||||
<path d="M11.3545232,18.4180929 L18.4676039,14.242665 C19.0452323,13.9290954 19.0122249,13.1204156 18.4676039,12.806846 L11.3545232,8.63141809 C10.7603912,8.26833741 9.98471883,8.54889976 9.98471883,9.19254279 L9.98471883,17.8404645 C9.98471883,18.5006112 10.7108802,18.7976773 11.3545232,18.4180929 Z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</script>
|
||||
|
|
@ -605,12 +749,16 @@
|
|||
<h3 class="lyric-line" @click="app.seekTo(lyric.startTime, false)"
|
||||
v-bind:class="{ active: app.getLyricClass(lyric.startTime, lyric.endTime)}">
|
||||
{{ lyric.line }}
|
||||
<div class="lyrics-translation" v-if="lyric.translation && lyric.translation != ''">
|
||||
{{ lyric.translation }}
|
||||
<div>
|
||||
</h3>
|
||||
</template>
|
||||
<template v-else>
|
||||
<h3 class="lyric-line" @click="app.seekTo(lyric.startTime, false)" :start="lyric.startTime" :end="lyric.endTime"
|
||||
<h3 class="lyric-line" @click="app.seekTo(lyric.startTime, false)" :start="lyric.startTime"
|
||||
:end="lyric.endTime"
|
||||
v-bind:class="{ active: app.getLyricClass(lyric.startTime, lyric.endTime)}">
|
||||
<div class="lyricWaiting" >
|
||||
<div class="lyricWaiting">
|
||||
<div class='WaitingDot1'></div>
|
||||
<div class='WaitingDot2'></div>
|
||||
<div class='WaitingDot3'></div>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,16 @@
|
|||
Vue.component('mediaitem-artwork', {
|
||||
template: '#mediaitem-artwork',
|
||||
props: ['size', 'url', 'type'],
|
||||
methods: {
|
||||
getArtworkStyle() {
|
||||
return {
|
||||
width: this.size + 'px',
|
||||
height: this.size + 'px'
|
||||
};
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
Vue.component('sidebar-library-item', {
|
||||
template: '#sidebar-library-item',
|
||||
props: ['name', 'page', 'cd-click'],
|
||||
|
|
@ -53,7 +66,7 @@ Vue.component('mediaitem-list-item', {
|
|||
|
||||
Vue.component('lyrics-view', {
|
||||
template: '#lyrics-view',
|
||||
props: ["time", "lyrics"],
|
||||
props: ["time", "lyrics", "translation"],
|
||||
methods: {}
|
||||
});
|
||||
|
||||
|
|
@ -76,6 +89,11 @@ Vue.component('cider-listen-now', {
|
|||
props: ["data"]
|
||||
})
|
||||
|
||||
Vue.component('cider-playlist', {
|
||||
template: "#cider-playlist",
|
||||
props: ["data"]
|
||||
})
|
||||
|
||||
const MusicKitTools = {
|
||||
getHeader() {
|
||||
return new Headers({
|
||||
|
|
@ -110,6 +128,7 @@ const app = new Vue({
|
|||
radio: {
|
||||
personal: []
|
||||
},
|
||||
showingPlaylist: [],
|
||||
library: {
|
||||
songs: {
|
||||
listing: [],
|
||||
|
|
@ -142,7 +161,9 @@ const app = new Vue({
|
|||
artworkReady: false,
|
||||
userinfo: {},
|
||||
menuOpened: false,
|
||||
maximized: false
|
||||
maximized: false,
|
||||
drawerOpened: false,
|
||||
drawerState: "queue"
|
||||
},
|
||||
page: "browse"
|
||||
},
|
||||
|
|
@ -160,6 +181,12 @@ const app = new Vue({
|
|||
self.playerLCD.playbackDuration = (self.mk.currentPlaybackTime)
|
||||
self.lyriccurrenttime = app.mk.currentPlaybackTime;
|
||||
|
||||
if (document.querySelector(".lyric-line.active")) {
|
||||
document.querySelector(".lyric-line.active").scrollIntoView({
|
||||
behavior: "smooth",
|
||||
block: "center"
|
||||
})
|
||||
}
|
||||
// animated dot like AM - bad perf
|
||||
if (self.lyricon && self.drawertest){
|
||||
let currentLine = document.querySelector(`.lyric-line.active`)
|
||||
|
|
@ -228,6 +255,47 @@ const app = new Vue({
|
|||
})
|
||||
document.body.removeAttribute("loading")
|
||||
},
|
||||
async getPlaylistFromID(id){
|
||||
try{
|
||||
this.showingPlaylist = await app.mk.api.library.playlist(id)} catch (e){console.log(e);
|
||||
try{this.showingPlaylist = await app.mk.api.playlist(id)} catch (err) {console.log(err)}
|
||||
}
|
||||
|
||||
},
|
||||
routeView (item){
|
||||
app.showingPlaylist = [];
|
||||
let kind = (item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? ''));
|
||||
let id = (item.attributes.playParams ? (item.attributes.playParams.id ?? (item.id?? '')): (item.id ?? ''));;
|
||||
let isLibrary = item.attributes.playParams ? (item.attributes.playParams.isLibrary ?? false) : false;
|
||||
console.log(kind, id, isLibrary)
|
||||
if(!kind.toString().includes("radioStation") && !kind.toString().includes("song"))
|
||||
{app.page = (kind) + "_"+ (id);
|
||||
console.log("oks");
|
||||
app.getTypeFromID((kind),(id), (isLibrary));} else {
|
||||
app.playMediaItemById((id),(kind), (isLibrary), item.attributes.url ?? '')
|
||||
}
|
||||
},
|
||||
playMediaItem(item){
|
||||
let kind = (item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? ''));
|
||||
let id = (item.attributes.playParams ? (item.attributes.playParams.id ?? (item.id?? '')): (item.id ?? ''));;
|
||||
let isLibrary = item.attributes.playParams ? (item.attributes.playParams.isLibrary ?? false) : false;
|
||||
console.log(kind, id, isLibrary)
|
||||
app.playMediaItemById((id),(kind), (isLibrary), item.attributes.url ?? '')
|
||||
},
|
||||
async getTypeFromID(kind,id, isLibrary = false){
|
||||
|
||||
var a;
|
||||
try {
|
||||
a = await this.mkapi(kind.toString(), isLibrary, id.toString());
|
||||
}
|
||||
catch (e) {
|
||||
console.log(e);
|
||||
try {
|
||||
console.log("opp", !isLibrary);
|
||||
a = await this.mkapi(kind.toString(), !isLibrary, id.toString());
|
||||
} catch (err) { console.log(err); a = [] } finally { this.showingPlaylist = a }
|
||||
} finally { this.showingPlaylist = a };
|
||||
},
|
||||
searchLibrarySongs() {
|
||||
let self = this
|
||||
if (this.library.songs.search == "") {
|
||||
|
|
@ -269,6 +337,10 @@ const app = new Vue({
|
|||
if (this.library.songs.downloadState == 2 || this.library.songs.downloadState == 1) {
|
||||
return
|
||||
}
|
||||
if(localStorage.getItem("librarySongs") != null) {
|
||||
this.library.songs.listing = JSON.parse(localStorage.getItem("librarySongs"))
|
||||
this.library.songs.displayListing = this.library.songs.listing
|
||||
}
|
||||
this.library.songs.downloadState = 1
|
||||
|
||||
function downloadChunk() {
|
||||
|
|
@ -290,6 +362,10 @@ const app = new Vue({
|
|||
self.library.songs.meta.progress = library.length
|
||||
if(typeof downloaded.next == "undefined") {
|
||||
console.log("downloaded.next is undefined")
|
||||
self.library.songs.listing = library
|
||||
self.library.songs.downloadState = 2
|
||||
self.searchLibrarySongs()
|
||||
localStorage.setItem("librarySongs", JSON.stringify(library))
|
||||
}
|
||||
if (downloaded.meta.total > library.length || typeof downloaded.meta.next != "undefined") {
|
||||
console.log(`downloading next chunk - ${library.length} songs so far`)
|
||||
|
|
@ -298,12 +374,18 @@ const app = new Vue({
|
|||
self.library.songs.listing = library
|
||||
self.library.songs.downloadState = 2
|
||||
self.searchLibrarySongs()
|
||||
localStorage.setItem("librarySongs", JSON.stringify(library))
|
||||
console.log(library)
|
||||
}
|
||||
}
|
||||
|
||||
downloadChunk()
|
||||
},
|
||||
getTotalTime(){
|
||||
if (app.showingPlaylist.relationships.tracks.data.length > 0){
|
||||
time = Math.round([].concat(...app.showingPlaylist.relationships.tracks.data).reduce((a, { attributes: { durationInMillis }}) => a + durationInMillis, 0)/60000);
|
||||
return app.showingPlaylist.relationships.tracks.data.length + " tracks, "+ time +" mins.";} else return ""
|
||||
},
|
||||
async getLibrarySongs() {
|
||||
var response = await this.mkapi("songs", true, "", {limit: 100}, {includeResponseMeta: !0})
|
||||
this.library.songs.listing = response.data
|
||||
|
|
@ -472,8 +554,10 @@ const app = new Vue({
|
|||
for (var i = u.length -1; i >= 0; i--) {
|
||||
let xline = (/(\[[0-9.:\[\]]*\])+(.*)/).exec(u[i])
|
||||
let end = (preLrc.length > 0) ? ((preLrc[preLrc.length-1].startTime) ?? 99999) : 99999
|
||||
preLrc.push({ startTime: app.toMS(xline[1].substring(1,xline[1].length - 2)) ?? 0, endTime: end, line: xline[2] })
|
||||
preLrc.push({ startTime: app.toMS(xline[1].substring(1,xline[1].length - 2)) ?? 0, endTime: end, line: xline[2], translation: '' })
|
||||
}
|
||||
if (preLrc.length > 0)
|
||||
preLrc.push({startTime: 0,endTime: preLrc[preLrc.length-1].startTime, line: "lrcInstrumental", translation: ''});
|
||||
app.lyrics = preLrc.reverse();
|
||||
if (lrcfile != null && lrcfile != '') {
|
||||
// load translation
|
||||
|
|
@ -507,9 +591,20 @@ const app = new Vue({
|
|||
let status2 = jsonResponse2["message"]["header"]["status_code"];
|
||||
if (status2 == 200) {
|
||||
try {
|
||||
let lyrics = jsonResponse2["message"]["body"]["translations_list"];
|
||||
if (lyrics.length > 0) {
|
||||
// convert translations to suitable json
|
||||
let preTrans = []
|
||||
let u = app.lyrics;
|
||||
let translation_list = jsonResponse2["message"]["body"]["translations_list"];
|
||||
if (translation_list.length > 0) {
|
||||
for (var i = 0; i < u.length - 1; i++) {
|
||||
preTrans[i] = ""
|
||||
for (var trans_line of translation_list){
|
||||
if (u[i].line == " "+trans_line["translation"]["matched_line"]){
|
||||
u[i].translation = trans_line["translation"]["description"];
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
app.lyrics = u;
|
||||
}
|
||||
} catch (e) {
|
||||
/// not found trans -> ignore
|
||||
|
|
@ -589,15 +684,8 @@ const app = new Vue({
|
|||
},
|
||||
getLyricClass(start, end) {
|
||||
//this.lyriccurrenttime = app.getCurrentTime();
|
||||
if (this.lyriccurrenttime >= start && this.lyriccurrenttime <= end) {
|
||||
setTimeout(() => {
|
||||
if (document.querySelector(".lyric-line.active")) {
|
||||
document.querySelector(".lyric-line.active").scrollIntoView({
|
||||
behavior: "smooth",
|
||||
block: "center"
|
||||
})
|
||||
}
|
||||
}, 200)
|
||||
const delayfix = 0.5
|
||||
if (this.lyriccurrenttime + delayfix >= start && this.lyriccurrenttime + delayfix <= end) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
|
|
@ -677,7 +765,7 @@ const app = new Vue({
|
|||
}
|
||||
},
|
||||
getMediaItemArtwork(url, size = 64) {
|
||||
return `url("${url.replace('{w}', size).replace('{h}', size).replace('{f}', "webp").replace('{c}', "cc")}")`;
|
||||
return `${url.replace('{w}', size).replace('{h}', size).replace('{f}', "webp").replace('{c}', "cc")}`;
|
||||
},
|
||||
getNowPlayingArtworkBG(size = 600) {
|
||||
if (!this.mkReady()) {
|
||||
|
|
|
|||
|
|
@ -721,6 +721,19 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
|
|||
box-shadow: inset 0px 0px 0px 1px rgb(200 200 200 / 30%);
|
||||
}
|
||||
|
||||
.playlist-artwork {
|
||||
height: 190px;
|
||||
width: 190px;
|
||||
background: blue;
|
||||
border-radius: 6px;
|
||||
background: var(--artwork);
|
||||
background-size: cover;
|
||||
box-shadow: var(--mediaItemShadow);
|
||||
flex: 0 0 auto;
|
||||
margin: 6px;
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
.media-item--small .text {
|
||||
font-weight: 600;
|
||||
font-size: 0.90em;
|
||||
|
|
@ -1264,6 +1277,11 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
|
|||
margin: 3px;
|
||||
}
|
||||
|
||||
.lyrics-translation {
|
||||
font-size: 1.6rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
@keyframes lyricWaitingLine {
|
||||
0% {
|
||||
opacity: 0.25;
|
||||
|
|
@ -1320,6 +1338,41 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
|
|||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.mediaitem-artwork {
|
||||
border-radius: var(--mediaItemRadius);
|
||||
overflow: hidden;
|
||||
flex: 0 0 auto;
|
||||
position:relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.mediaitem-artwork.rounded {
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
.mediaitem-artwork::after {
|
||||
content: "";
|
||||
box-shadow: var(--mediaItemShadow);
|
||||
z-index: 1;
|
||||
width:100%;
|
||||
height:100%;
|
||||
position: absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
border-radius: inherit;
|
||||
}
|
||||
|
||||
.mediaitem-artwork.rounded::after {
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
.mediaitem-artwork>img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
/* horizontal media scroller */
|
||||
.cd-hmedia-scroller {
|
||||
margin: 0 auto;
|
||||
|
|
@ -1357,14 +1410,14 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
|
|||
.cd-mediaitem-list-item .artwork {
|
||||
height: 34px;
|
||||
width: 34px;
|
||||
background: blue;
|
||||
border-radius: var(--mediaItemRadius);
|
||||
background: var(--artwork);
|
||||
background-size: contain;
|
||||
box-shadow: var(--mediaItemShadow);
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
flex: 0 0 auto;
|
||||
background-repeat: no-repeat;
|
||||
margin: 12px;
|
||||
border: 0px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.cd-mediaitem-list-item .artwork.round {
|
||||
|
|
@ -1421,7 +1474,6 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
|
|||
border-radius: var(--mediaItemRadius);
|
||||
background: var(--artwork);
|
||||
background-size: contain;
|
||||
box-shadow: var(--mediaItemShadow);
|
||||
flex: 0 0 auto;
|
||||
background-repeat: no-repeat;
|
||||
margin: 18px;
|
||||
|
|
@ -1475,11 +1527,24 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
|
|||
border-top-right-radius: 6px;
|
||||
background: var(--artwork);
|
||||
background-size: cover;
|
||||
box-shadow: var(--mediaItemShadow);
|
||||
flex: 0 0 auto;
|
||||
margin: 6px;
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
.artwork
|
||||
{height: 190px;
|
||||
width: 190px;
|
||||
background: blue;
|
||||
border-top-left-radius: 6px;
|
||||
border-top-right-radius: 6px;
|
||||
background: var(--artwork);
|
||||
background-size: cover;
|
||||
flex: 0 0 auto;
|
||||
margin: 6px;
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
.cd-mediaitem-square-sp .artwork:hover {
|
||||
box-shadow: rgb(0 0 0 / 50%) 0 0 0 1000000px inset;
|
||||
}
|
||||
|
|
@ -1499,6 +1564,24 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
|
|||
font-size: 12px;
|
||||
}
|
||||
|
||||
|
||||
.cd-mediaitem-square-sp > .cd-mediaitem-square-large-overlay {
|
||||
z-index: 3;
|
||||
}
|
||||
.cd-mediaitem-square-sp > .cd-mediaitem-square-large-overlay:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.cd-mediaitem-square-sp + .cd-mediaitem-square-large-overlay {
|
||||
pointer-events: none;
|
||||
|
||||
}
|
||||
|
||||
.cd-mediaitem-square-sp:hover + .cd-mediaitem-square-large-overlay {
|
||||
opacity: 1;
|
||||
|
||||
}
|
||||
|
||||
/* mediaitem-square-large */
|
||||
.cd-mediaitem-square-large {
|
||||
width: 190px;
|
||||
|
|
@ -1513,28 +1596,62 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
|
|||
margin-left: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.cd-mediaitem-square-large > * {
|
||||
z-index: inherit;
|
||||
|
||||
.cd-mediaitem-square-large:hover {
|
||||
background: rgb(200 200 200 / 10%);
|
||||
}
|
||||
|
||||
/* .cd-mediaitem-square-large .artwork:hover {
|
||||
box-shadow: rgb(0 0 0 / 50%) 0 0 0 1000000px inset;
|
||||
} */
|
||||
|
||||
.cd-mediaitem-square-large .artwork {
|
||||
height: 190px;
|
||||
width: 190px;
|
||||
background: blue;
|
||||
border-radius: var(--mediaItemRadius);
|
||||
border-top-left-radius: 6px;
|
||||
border-top-right-radius: 6px;
|
||||
background: var(--artwork);
|
||||
background-size: cover;
|
||||
box-shadow: var(--mediaItemShadow);
|
||||
flex: 0 0 auto;
|
||||
margin: 6px;
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
.cd-mediaitem-square-large .artwork:hover {
|
||||
box-shadow: rgb(0 0 0 / 50%) 0 0 0 1000000px inset;
|
||||
.cd-mediaitem-square-large-overlay{
|
||||
position: absolute;
|
||||
width: 190px;
|
||||
float: right;
|
||||
height: 250px;
|
||||
top: 0px;
|
||||
margin: 10px;
|
||||
margin-top: 0px;
|
||||
opacity: 0;
|
||||
|
||||
}
|
||||
|
||||
.cd-mediaitem-square-large-overlay > * {
|
||||
pointer-events: auto;
|
||||
|
||||
}
|
||||
.cd-mediaitem-square-large > .cd-mediaitem-square-large-overlay {
|
||||
z-index: 3;
|
||||
}
|
||||
.cd-mediaitem-square-large > .cd-mediaitem-square-large-overlay:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.cd-mediaitem-square-large + .cd-mediaitem-square-large-overlay {
|
||||
pointer-events: none;
|
||||
|
||||
}
|
||||
|
||||
.cd-mediaitem-square-large:hover + .cd-mediaitem-square-large-overlay {
|
||||
opacity: 1;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.cd-mediaitem-square-large .artwork.round {
|
||||
border-radius: var(--mediaItemRadiusRound);
|
||||
}
|
||||
|
|
@ -1623,6 +1740,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
|
|||
.wpfade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
/* Transitions End */
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
|
|
@ -1642,3 +1760,42 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
|
|||
--gfx-minBtn: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAAsTAAALEwEAmpwYAAAGOmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDUgNzkuMTYzNDk5LCAyMDE4LzA4LzEzLTE2OjQwOjIyICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdEV2dD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlRXZlbnQjIiB4bWxuczpwaG90b3Nob3A9Imh0dHA6Ly9ucy5hZG9iZS5jb20vcGhvdG9zaG9wLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiIHhtcDpDcmVhdGVEYXRlPSIyMDIwLTAyLTE3VDEzOjAwOjMyWiIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAyMC0wMi0xN1QxMzowMDozMloiIHhtcDpNb2RpZnlEYXRlPSIyMDIwLTAyLTE3VDEzOjAwOjMyWiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo4NWQwZWRiMC1mZDAwLWI2NGYtOWVmYi1hMmI0NTg3MDVhOGEiIHhtcE1NOkRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDphMzAwMWUxYS0yOTE5LWU0NDktYjk0Yy1jMjEyMjQ4YTlmOGEiIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo3ODdmNzk5Yy00YjExLWU1NGEtYjIwZC02ODYxN2VkOWM1ZTIiIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiIGRjOmZvcm1hdD0iaW1hZ2UvcG5nIj4gPHhtcE1NOkhpc3Rvcnk+IDxyZGY6U2VxPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY3JlYXRlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDo3ODdmNzk5Yy00YjExLWU1NGEtYjIwZC02ODYxN2VkOWM1ZTIiIHN0RXZ0OndoZW49IjIwMjAtMDItMTdUMTM6MDA6MzJaIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiLz4gPHJkZjpsaSBzdEV2dDphY3Rpb249InNhdmVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjg1ZDBlZGIwLWZkMDAtYjY0Zi05ZWZiLWEyYjQ1ODcwNWE4YSIgc3RFdnQ6d2hlbj0iMjAyMC0wMi0xN1QxMzowMDozMloiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE5IChXaW5kb3dzKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPHBob3Rvc2hvcDpUZXh0TGF5ZXJzPiA8cmRmOkJhZz4gPHJkZjpsaSBwaG90b3Nob3A6TGF5ZXJOYW1lPSLupKEiIHBob3Rvc2hvcDpMYXllclRleHQ9Iu6koSIvPiA8L3JkZjpCYWc+IDwvcGhvdG9zaG9wOlRleHRMYXllcnM+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+FwvRXAAAABdJREFUGNNj/P//PwMxgHGIKPw/XDwDAOr1HuzlELLnAAAAAElFTkSuQmCC');
|
||||
}
|
||||
}
|
||||
|
||||
.playlist-display {
|
||||
flex-wrap: nowrap;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.playlist-display .playlist-info{
|
||||
flex-shrink: unset;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.playlist-display .playlist-info .playlist-name {
|
||||
font-weight: 700;
|
||||
font-size: 1.6rem;
|
||||
margin-bottom: 6px;
|
||||
margin-right: 6px;
|
||||
flex-shrink: unset;
|
||||
|
||||
}
|
||||
.playlist-display .playlist-info .playlist-artist {
|
||||
font-weight: 500;
|
||||
font-size: 1.6rem;
|
||||
margin-bottom: 6px;
|
||||
margin-right: 6px;
|
||||
flex-shrink: unset;
|
||||
}
|
||||
.playlist-display .playlist-info .playlist-desc {
|
||||
box-sizing: border-box;
|
||||
font-size: 1.1rem;
|
||||
flex-shrink: unset;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.playlist-display .playlist-info .playlist-time {
|
||||
margin: 6px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue