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

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

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

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

@ -1,5 +1,6 @@
const store = new Vuex.Store({
state: {
windowRelativeScale: 1,
library: {
// songs: ipcRenderer.sendSync("get-library-songs"),
// 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">
<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"
loading="lazy"
:style="imgStyle"
@ -47,6 +48,10 @@
shadow: {
type: String,
default: ''
},
upscaling: {
type: Boolean,
default: false
}
},
data: function () {
@ -63,15 +68,34 @@
opacity: 0,
transition: "opacity .25s linear"
},
classes: []
classes: [],
imgSrc: ""
}
},
computed: {
windowRelativeScale: function () {
return app.$store.state.windowRelativeScale;
}
},
watch: {
windowRelativeScale: function (newValue, oldValue) {
this.swapImage(newScale)
}
},
mounted() {
this.getClasses()
this.imgSrc = app.getMediaItemArtwork(this.url, this.size, this.width)
},
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() {
this.imgStyle.opacity = 1
this.swapImage(app.$store.state.windowRelativeScale)
// this.awStyle.background = ""
},
contextMenu(event) {

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

@ -17,6 +17,7 @@
: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 : '')) : '' "
:size="size"
:upscaling="true"
shadow="subtle"
:bgcolor="getBgColor()"
:video-priority="forceVideo"