okseby/orchard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add expand artwork feature

Browse source
This commit is contained in:
Monochromish 2022-11-07 05:34:34 +11:00
parent ac45ecf604
commit f81635959d
5 changed files with 65 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/main/base/store.ts
View file

@ -205,6 +205,7 @@ export class Store {
purplePodcastPlaybackBar: false,
maxElementScale: -1, // -1 default, anything else is a custom scale
overrideDisplayTheme: "system", // system , dark, light
artworkDisplayLayout: "default",
},
lyrics: {
enable_mxm: true,

2
src/renderer/less/directives.less
View file

@ -271,7 +271,7 @@
.playback-info {
align-items: flex-start;
margin: 6px;
margin: 8px;
.song-name {
text-align: left;

14
src/renderer/main/vueapp.js
View file

@ -2350,6 +2350,20 @@ const app = new Vue({
return this.isDisabled() || app.mk.queue._position + 1 === app.mk.queue.length;
},
switchArtworkDisplayLayout() {
switch (app.cfg.visual.artworkDisplayLayout) {
case "default":
app.cfg.visual.artworkDisplayLayout = "sidebar";
break;
case "sidebar":
app.cfg.visual.artworkDisplayLayout = "default";
break;
default:
app.cfg.visual.artworkDisplayLayout = "default";
break;
}
},
async getNowPlayingItemDetailed(target) {
let nowPlayingItem = JSON.parse(JSON.stringify(this.mk.nowPlayingItem));
if (nowPlayingItem.type === "radioStation" && app.mk.nowPlayingItem.id !== -1) {

62
src/renderer/views/app/chrome-bottom.ejs
View file

@ -5,38 +5,38 @@
<template v-if="mkReady()">
<div class="app-playback-controls" @mouseover="chrome.progresshover = true"
@mouseleave="chrome.progresshover = false" @contextmenu="nowPlayingContextMenu">
<div class="artwork" id="artworkLCD">
<div v-if="app.cfg.visual.artworkDisplayLayout == 'default'" @click.stop="switchArtworkDisplayLayout()" class="artwork" id="artworkLCD">
<mediaitem-artwork :url="$root.currentArtUrl"></mediaitem-artwork>
<b-popover custom-class="mediainfo-popover" target="artworkLCD" triggers="hover" placement="right">
<div class="content">
<div class="shadow-artwork">
<mediaitem-artwork :url="currentArtUrl"></mediaitem-artwork>
</div>
<div class="popover-artwork">
<mediaitem-artwork :url="currentArtUrl"></mediaitem-artwork>
</div>
<div class="song-name">{{ mk.nowPlayingItem["attributes"]["name"] }}</div>
<div class="song-artist" @click="getNowPlayingItemDetailed(`artist`)">{{
mk.nowPlayingItem["attributes"]["artistName"] }}
</div>
<div class="song-album" @click="getNowPlayingItemDetailed(`album`)">
{{(mk.nowPlayingItem["attributes"]["albumName"]) ?
(mk.nowPlayingItem["attributes"]["albumName"]) : "" }}
</div>
<hr>
<div class="btn-group" style="width:100%;">
<button class="md-btn md-btn-small" style="width: 100%;"
@click="drawer.open = false; miniPlayer(true)">{{ $root.getLz("term.miniplayer")
}}
</button>
<button class="md-btn md-btn-small" style="width: 100%;"
@click="drawer.open = false; fullscreen(true)">{{
$root.getLz("term.fullscreenView") }}
</button>
</div>
</div>
</b-popover>
</div>
<b-popover custom-class="mediainfo-popover" target="artworkLCD" triggers="hover" placement="right">
<div class="content">
<div class="shadow-artwork">
<mediaitem-artwork :url="currentArtUrl"></mediaitem-artwork>
</div>
<div class="popover-artwork">
<mediaitem-artwork :url="currentArtUrl"></mediaitem-artwork>
</div>
<div class="song-name">{{ mk.nowPlayingItem["attributes"]["name"] }}</div>
<div class="song-artist" @click="getNowPlayingItemDetailed(`artist`)">{{
mk.nowPlayingItem["attributes"]["artistName"] }}
</div>
<div class="song-album" @click="getNowPlayingItemDetailed(`album`)">
{{(mk.nowPlayingItem["attributes"]["albumName"]) ?
(mk.nowPlayingItem["attributes"]["albumName"]) : "" }}
</div>
<hr>
<div class="btn-group" style="width:100%;">
<button class="md-btn md-btn-small" style="width: 100%;"
@click="drawer.open = false; miniPlayer(true)">{{ $root.getLz("term.miniplayer")
}}
</button>
<button class="md-btn md-btn-small" style="width: 100%;"
@click="drawer.open = false; fullscreen(true)">{{
$root.getLz("term.fullscreenView") }}
</button>
</div>
</div>
</b-popover>
<div class="playback-info">
<div class="song-name"
:class="[isElementOverflowing('#app-main > div.app-chrome > div.app-chrome--center > div > div > div.playback-info > div.song-name') ? 'marquee' : '']">
@ -86,7 +86,7 @@
<template v-else>
<div class="app-playback-controls">
<div class="artwork" id="artworkLCD" style="pointer-events: none;">
<div v-if="app.cfg.visual.artworkDisplayLayout == 'default'" class="artwork" id="artworkLCD" style="pointer-events: none;">
<mediaitem-artwork :url="currentArtUrl"></mediaitem-artwork>
</div>
<div class="playback-info">

18
src/renderer/views/components/sidebar.ejs
View file

@ -193,6 +193,9 @@
>
</sidebar-playlist>
</template>
<div v-if="app.cfg.visual.artworkDisplayLayout == 'sidebar'" @click.stop="switchArtworkDisplayLayout()" class="artwork" id="artworkLCD" style="position:absolute;bottom:0px">
<mediaitem-artwork :url="$root.currentArtUrl"></mediaitem-artwork>
</div>
</div>
<div class="app-sidebar-footer display--small app-sidebar-footer--controls">
<div class="app-playback-controls" @contextmenu="$root.nowPlayingContextMenu">
@ -308,5 +311,20 @@
<script>
Vue.component("cider-app-sidebar", {
template: "#cider-app-sidebar",
methods: {
switchArtworkDisplayLayout: function() {
switch (app.cfg.visual.artworkDisplayLayout) {
case "default":
app.cfg.visual.artworkDisplayLayout = "sidebar";
break;
case "sidebar":
app.cfg.visual.artworkDisplayLayout = "default";
break;
default:
app.cfg.visual.artworkDisplayLayout = "default";
break;
}
},
}
})
</script>