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

mediaitem square artwork res now adapts to window size

Browse source
This commit is contained in:
booploops 2022-07-07 02:50:35 -07:00
parent 5e3bdd96f3
commit 6cb95f2d10
5 changed files with 55 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

52
src/renderer/less/elements.less
View file

@ -1195,41 +1195,41 @@
} }
&.mediaitem-brick { &.mediaitem-brick {
height: calc(200px, var(--windowRelativeScale)); height: 200px;
width: calc(240px, var(--windowRelativeScale)); width: 240px;
transition: width var(--transitionDuration) linear, height var(--transitionDuration) linear; transition: width var(--transitionDuration) linear, height var(--transitionDuration) linear;
.artwork { .artwork {
height: calc(123px, var(--windowRelativeScale)); height: 123px;
width: calc(220px, var(--windowRelativeScale)); width: 220px;
transition: width var(--transitionDuration) linear, height var(--transitionDuration) linear; transition: width var(--transitionDuration) linear, height var(--transitionDuration) linear;
} }
// &:not(.noscale) { &:not(.noscale) {
// @media (min-width: 1460px) { @media (min-width: 1460px) {
// --scaleRate: 1.1; --scaleRate: 1.1;
// --scaleRateArtwork: 1.1; --scaleRateArtwork: 1.1;
// width: calc(240px * var(--scaleRate)); width: calc(240px * var(--scaleRate));
// height: calc(200px * var(--scaleRate)); height: calc(200px * var(--scaleRate));
// .artwork-container > .artwork { .artwork-container > .artwork {
// width: calc(220px * var(--scaleRateArtwork)); width: calc(220px * var(--scaleRateArtwork));
// height: calc(123px * var(--scaleRateArtwork)); height: calc(123px * var(--scaleRateArtwork));
// } }
// } }
// @media (min-width: 1550px) { @media (min-width: 1550px) {
// --scaleRate: 1.25; --scaleRate: 1.25;
// --scaleRateArtwork: 1.25; --scaleRateArtwork: 1.25;
// width: calc(240px * var(--scaleRate)); width: calc(240px * var(--scaleRate));
// height: calc(200px * var(--scaleRate)); height: calc(200px * var(--scaleRate));
// .artwork-container > .artwork { .artwork-container > .artwork {
// width: calc(220px * var(--scaleRateArtwork)); width: calc(220px * var(--scaleRateArtwork));
// height: calc(123px * var(--scaleRateArtwork)); height: calc(123px * var(--scaleRateArtwork));
// } }
// } }
// } }
} }
&.mediaitem-small { &.mediaitem-small {

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

@ -1098,6 +1098,7 @@ const app = new Vue({
setWindowScaleFactor() { setWindowScaleFactor() {
let scale = window.devicePixelRatio * window.innerWidth / 1280 * window.innerHeight / 720 let scale = window.devicePixelRatio * window.innerWidth / 1280 * window.innerHeight / 720
let desiredScale = parseFloat(app.cfg.visual.maxElementScale == -1 ? 1.6 : app.cfg.visual.maxElementScale) let desiredScale = parseFloat(app.cfg.visual.maxElementScale == -1 ? 1.6 : app.cfg.visual.maxElementScale)
app.$store.state.windowRelativeScale = scale
if(scale <= 1) { if(scale <= 1) {
scale = 1 scale = 1
}else if(scale >= desiredScale) { }else if(scale >= desiredScale) {

1
src/renderer/main/vuex-store.js
View file

@ -1,5 +1,6 @@
const store = new Vuex.Store({ const store = new Vuex.Store({
state: { state: {
windowRelativeScale: 1,
library: { library: {
// songs: ipcRenderer.sendSync("get-library-songs"), // songs: ipcRenderer.sendSync("get-library-songs"),
// albums: ipcRenderer.sendSync("get-library-albums"), // albums: ipcRenderer.sendSync("get-library-albums"),

28
src/renderer/views/components/mediaitem-artwork.ejs
View file

@ -1,6 +1,7 @@
<script type="text/x-template" id="mediaitem-artwork"> <script type="text/x-template" id="mediaitem-artwork">
<div class="mediaitem-artwork" :style="awStyle" @contextmenu="contextMenu" :class="[{'rounded': (type == 'artists')}, classes]" :key="url"> <div class="mediaitem-artwork" :style="awStyle" @contextmenu="contextMenu" :class="[{'rounded': (type == 'artists')}, classes]" :key="url">
<img :src="app.getMediaItemArtwork(url, size, width)" <img :src="imgSrc"
ref="image"
decoding="async" decoding="async"
loading="lazy" loading="lazy"
:style="imgStyle" :style="imgStyle"
@ -47,6 +48,10 @@
shadow: { shadow: {
type: String, type: String,
default: '' default: ''
},
upscaling: {
type: Boolean,
default: false
} }
}, },
data: function () { data: function () {
@ -63,15 +68,34 @@
opacity: 0, opacity: 0,
transition: "opacity .25s linear" transition: "opacity .25s linear"
}, },
classes: [] classes: [],
imgSrc: ""
}
},
computed: {
windowRelativeScale: function () {
return app.$store.state.windowRelativeScale;
}
},
watch: {
windowRelativeScale: function (newValue, oldValue) {
this.swapImage(newScale)
} }
}, },
mounted() { mounted() {
this.getClasses() this.getClasses()
this.imgSrc = app.getMediaItemArtwork(this.url, this.size, this.width)
}, },
methods: { methods: {
swapImage(newValue) {
if(!this.upscaling) return
if (newValue > 1.5) {
this.imgSrc = app.getMediaItemArtwork(this.url, parseInt(this.size * 2.0), parseInt(this.size * 2.0));
}
},
imgLoaded() { imgLoaded() {
this.imgStyle.opacity = 1 this.imgStyle.opacity = 1
this.swapImage(app.$store.state.windowRelativeScale)
// this.awStyle.background = "" // this.awStyle.background = ""
}, },
contextMenu(event) { contextMenu(event) {

1
src/renderer/views/components/mediaitem-square.ejs
View file

@ -17,6 +17,7 @@
:url="getArtworkUrl()" :url="getArtworkUrl()"
:video="(item.attributes != null && item.attributes.editorialVideo != null) ? (item.attributes.editorialVideo.motionDetailSquare ? item.attributes.editorialVideo.motionDetailSquare.video : (item.attributes.editorialVideo.motionSquareVideo1x1 ? item.attributes.editorialVideo.motionSquareVideo1x1.video : '')) : '' " :video="(item.attributes != null && item.attributes.editorialVideo != null) ? (item.attributes.editorialVideo.motionDetailSquare ? item.attributes.editorialVideo.motionDetailSquare.video : (item.attributes.editorialVideo.motionSquareVideo1x1 ? item.attributes.editorialVideo.motionSquareVideo1x1.video : '')) : '' "
:size="size" :size="size"
:upscaling="true"
shadow="subtle" shadow="subtle"
:bgcolor="getBgColor()" :bgcolor="getBgColor()"
:video-priority="forceVideo" :video-priority="forceVideo"