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, purplePodcastPlaybackBar: false,
maxElementScale: -1, // -1 default, anything else is a custom scale maxElementScale: -1, // -1 default, anything else is a custom scale
overrideDisplayTheme: "system", // system , dark, light overrideDisplayTheme: "system", // system , dark, light
artworkDisplayLayout: "default",
}, },
lyrics: { lyrics: {
enable_mxm: true, enable_mxm: true,

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

@ -271,7 +271,7 @@
.playback-info { .playback-info {
align-items: flex-start; align-items: flex-start;
margin: 6px; margin: 8px;
.song-name { .song-name {
text-align: left; 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; 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) { async getNowPlayingItemDetailed(target) {
let nowPlayingItem = JSON.parse(JSON.stringify(this.mk.nowPlayingItem)); let nowPlayingItem = JSON.parse(JSON.stringify(this.mk.nowPlayingItem));
if (nowPlayingItem.type === "radioStation" && app.mk.nowPlayingItem.id !== -1) { if (nowPlayingItem.type === "radioStation" && app.mk.nowPlayingItem.id !== -1) {

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

@ -5,9 +5,8 @@
<template v-if="mkReady()"> <template v-if="mkReady()">
<div class="app-playback-controls" @mouseover="chrome.progresshover = true" <div class="app-playback-controls" @mouseover="chrome.progresshover = true"
@mouseleave="chrome.progresshover = false" @contextmenu="nowPlayingContextMenu"> @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> <mediaitem-artwork :url="$root.currentArtUrl"></mediaitem-artwork>
</div>
<b-popover custom-class="mediainfo-popover" target="artworkLCD" triggers="hover" placement="right"> <b-popover custom-class="mediainfo-popover" target="artworkLCD" triggers="hover" placement="right">
<div class="content"> <div class="content">
<div class="shadow-artwork"> <div class="shadow-artwork">
@ -37,6 +36,7 @@
</div> </div>
</div> </div>
</b-popover> </b-popover>
</div>
<div class="playback-info"> <div class="playback-info">
<div class="song-name" <div class="song-name"
:class="[isElementOverflowing('#app-main > div.app-chrome > div.app-chrome--center > div > div > div.playback-info > div.song-name') ? 'marquee' : '']"> :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> <template v-else>
<div class="app-playback-controls"> <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> <mediaitem-artwork :url="currentArtUrl"></mediaitem-artwork>
</div> </div>
<div class="playback-info"> <div class="playback-info">

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

@ -193,6 +193,9 @@
> >
</sidebar-playlist> </sidebar-playlist>
</template> </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>
<div class="app-sidebar-footer display--small app-sidebar-footer--controls"> <div class="app-sidebar-footer display--small app-sidebar-footer--controls">
<div class="app-playback-controls" @contextmenu="$root.nowPlayingContextMenu"> <div class="app-playback-controls" @contextmenu="$root.nowPlayingContextMenu">
@ -308,5 +311,20 @@
<script> <script>
Vue.component("cider-app-sidebar", { Vue.component("cider-app-sidebar", {
template: "#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> </script>