Local Lossless Icon and more

- add Cider-profile boilerplate
- add local lossless icon
-add hover for PPE and lossless

Co-authored-by: Core <coredev-uk@users.noreply.github.com>
This commit is contained in:
yazninja 2022-07-11 22:33:23 +08:00
parent f940bcf1e0
commit b8db2bc681
5 changed files with 106 additions and 559 deletions

View file

@ -1322,6 +1322,7 @@ body[platform="darwin"] .app-chrome .app-chrome-item > .window-controls > div.cl
height: 15px;
width: 15px;
margin-bottom: 15px;
z-index: 1;
}
}
// Add Music Video Icons to Songs that are Music Videos

View file

@ -45,7 +45,12 @@
</div>
<div class="chrome-icon-container">
<div class="audio-type private-icon" v-if="cfg.general.privateEnabled === true"></div>
<div class="audio-type ppe-icon" v-if="cfg.audio.maikiwiAudio.ciderPPE === true"></div>
<div class="audio-type lossless-icon" v-if="mk.nowPlayingItem?.localFilesMetadata?.lossless === true"
:title="mk.nowPlayingItem?.localFilesMetadata?.bitDepth +'bit / '+ mk.nowPlayingItem?.localFilesMetadata?.sampleRate + 'khz ' + mk.nowPlayingItem.localFilesMetadata.container" v-b-tooltip.hover
></div>
<div class="audio-type ppe-icon" v-if="mk.nowPlayingItem?.localFilesMetadata?.lossless === false && cfg.audio.maikiwiAudio.ciderPPE === true"
:title="$root.getLz('settings.option.audio.enableAdvancedFunctionality.ciderPPE')" v-b-tooltip.hover
></div>
</div>
</div>
<template v-if="mk.nowPlayingItem['attributes']['playParams']">

View file

@ -121,7 +121,12 @@
<div class="playback-info">
<div class="chrome-icon-container">
<div class="audio-type private-icon" v-if="cfg.general.privateEnabled === true"></div>
<div class="audio-type ppe-icon" v-if="cfg.audio.maikiwiAudio.ciderPPE === true"></div>
<div class="audio-type lossless-icon" v-if="mk.nowPlayingItem?.localFilesMetadata?.lossless === true"
:title="mk.nowPlayingItem?.localFilesMetadata?.bitDepth +'bit / '+ mk.nowPlayingItem?.localFilesMetadata?.sampleRate + 'khz ' + mk.nowPlayingItem.localFilesMetadata.container" v-b-tooltip.hover
></div>
<div class="audio-type ppe-icon" v-if="mk.nowPlayingItem?.localFilesMetadata?.lossless === false && cfg.audio.maikiwiAudio.ciderPPE === true"
:title="$root.getLz('settings.option.audio.enableAdvancedFunctionality.ciderPPE')" v-b-tooltip.hover
></div>
</div>
<div class="info-rect">
<div class="song-name"

View file

@ -0,0 +1,93 @@
<script type="text/x-template" id="cider-recordlabel">
<div class="content-inner profile-page">
<div class="artist-header" :style="getArtistPalette(data)">
<div class="row">
<div class="col-sm" style="width: auto;">
<div class="artist-image">
<mediaitem-artwork
shadow="large"
:url="data.attributes.artwork ? data.attributes.artwork.url : ''"
size="220" type="artists"></mediaitem-artwork>
</div>
</div>
<div class="col flex-center"
>
<h1>{{ data.attributes.name }}</h1> -
</div>
</div>
</div>
<div class="artist-body">
<template v-if="data.views && data.views['latest-releases']">
<div class="row">
<div class="col">
<h3>{{ data.views["latest-releases"].attributes.title ?? ""}}</h3>
</div>
<div class="col-auto flex-center" v-if="data.views['latest-releases'].data.length >= 10">
<button class="cd-btn-seeall" @click="app.showRecordLabelView(data.id, data.attributes.name + ' - Latest Releases', 'latest-releases')">{{app.getLz('term.seeAll')}}</button>
</div>
</div>
<mediaitem-square :item="item" v-for="item in data.views['latest-releases'].data">
</mediaitem-square>
</template>
<template v-if="data.views && data.views['top-releases']">
<div class="row">
<div class="col">
<h3>{{ data.views["top-releases"].attributes.title ?? ""}}</h3>
</div>
<div class="col-auto flex-center" v-if="data.views['top-releases'].data.length >= 10">
<button class="cd-btn-seeall" @click="app.showRecordLabelView(data.id, data.attributes.name + ' - Top Releases', 'top-releases')">{{app.getLz('term.seeAll')}}</button>
</div>
</div>
<mediaitem-square :item="item" v-for="item in data.views['top-releases'].data">
</mediaitem-square>
</template>
<template v-if="data.relationships && data.relationships.playlists && data.relationships.playlists.data.length > 0">
<div class="row">
<div class="col">
<h3>Playlists</h3>
</div>
<div class="col-auto flex-center" v-if="data.relationships.playlists.data.length >= 5">
<button class="cd-btn-seeall" @click="app.showCollection(data.relationships.playlists, data.attributes.name + ' - Playlists', 'curator')">{{app.getLz('term.seeAll')}}</button>
</div>
</div>
<mediaitem-square :item="item" v-for="item in data.relationships.playlists.data.limit(5)">
</mediaitem-square>
</template>
</div>
</div>
</script>
<script>
Vue.component('cider-recordlabel', {
template: "#cider-recordlabel",
props: ['data'],
data: function () {
return {
topSongsExpanded: false,
app: this.$root
}
},
methods: {
getArtistPalette(artist) {
if (artist?.attributes?.artwork != null) {
return {
"background": "#" + artist["attributes"]["artwork"]["bgColor"],
"color": "#" + artist["attributes"]["artwork"]["textColor1"],
}
} else {
return {
"background": "#000000",
"color": "#ffffff",
}
}
},
getTopResult() {
if (this.search.results["meta"]) {
return this.search.results[this.search.results.meta.results.order[0]]["data"][0]
} else {
return false;
}
}
}
})
</script>