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

new mediaitem scaling method

Browse source
This commit is contained in:
booploops 2022-07-07 02:03:56 -07:00
parent 432af743aa
commit 2361cfaebe
4 changed files with 84 additions and 64 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -984,11 +984,11 @@
/* mediaitem-square */
.cd-mediaitem-square {
--transitionDuration: .25s;
--transitionDuration: .5s;
--scaleRate: 1.25;
--scaleRateArtwork: 1;
width: 200px;
height: 200px;
width: calc(160px * var(--windowRelativeScale));
height: calc(200px * var(--windowRelativeScale));
display: inline-flex;
flex: 0 0 auto;
flex-direction: column;
@ -996,14 +996,13 @@
justify-content: center;
align-items: center;
border-radius: 6px;
transition: width var(--transitionDuration) linear, height var(--transitionDuration) linear;
.artwork-container {
position: relative;
.artwork {
height: 150px;
width: 150px;
height: calc(140px * var(--windowRelativeScale));
width: calc(140px * var(--windowRelativeScale));
background: blue;
border-radius: var(--mediaItemRadius);
background: var(--artwork);
@ -1011,7 +1010,6 @@
flex: 0 0 auto;
margin: 6px;
cursor: pointer;
transition: width var(--transitionDuration) linear, height var(--transitionDuration) linear;
.mediaitem-artwork {
box-shadow: unset;
@ -1085,31 +1083,31 @@
}
}
&:not(.mediaitem-card):not(.mediaitem-brick):not(.mediaitem-video):not(.noscale) {
@media (min-width: 1460px) {
--scaleRate: 1.1;
--scaleRateArtwork: 0.9;
width: calc(200px * var(--scaleRate));
height: calc(200px * var(--scaleRate));
// &:not(.mediaitem-card):not(.mediaitem-brick):not(.mediaitem-video):not(.noscale) {
// @media (min-width: 1460px) {
// --scaleRate: 1.1;
// --scaleRateArtwork: 0.9;
// width: calc(200px * var(--scaleRate));
// height: calc(200px * var(--scaleRate));
.artwork-container > .artwork {
width: calc(190px * var(--scaleRateArtwork));
height: calc(190px * var(--scaleRateArtwork));
}
}
// .artwork-container > .artwork {
// width: calc(190px * var(--scaleRateArtwork));
// height: calc(190px * var(--scaleRateArtwork));
// }
// }
@media (min-width: 1550px) {
--scaleRate: 1.25;
--scaleRateArtwork: 1;
width: calc(200px * var(--scaleRate));
height: calc(200px * var(--scaleRate));
// @media (min-width: 1550px) {
// --scaleRate: 1.25;
// --scaleRateArtwork: 1;
// width: calc(200px * var(--scaleRate));
// height: calc(200px * var(--scaleRate));
.artwork-container > .artwork {
width: calc(190px * var(--scaleRateArtwork));
height: calc(190px * var(--scaleRateArtwork));
}
}
}
// .artwork-container > .artwork {
// width: calc(190px * var(--scaleRateArtwork));
// height: calc(190px * var(--scaleRateArtwork));
// }
// }
// }
.info-rect {
@ -1161,10 +1159,12 @@
&.mediaitem-video {
height: 200px;
width: 240px;
transition: width var(--transitionDuration) linear, height var(--transitionDuration) linear;
.artwork {
height: 120px;
width: 212px;
transition: width var(--transitionDuration) linear, height var(--transitionDuration) linear;
}
&:not(.noscale) {
@ -1195,48 +1195,52 @@
}
&.mediaitem-brick {
height: 200px;
width: 240px;
height: calc(200px, var(--windowRelativeScale));
width: calc(240px, var(--windowRelativeScale));
transition: width var(--transitionDuration) linear, height var(--transitionDuration) linear;
.artwork {
height: 123px;
width: 220px;
height: calc(123px, var(--windowRelativeScale));
width: calc(220px, var(--windowRelativeScale));
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 {
width: 140px;
height: 180px;
width: calc(140px, var(--windowRelativeScale));
height: calc(180px, var(--windowRelativeScale));
transition: width var(--transitionDuration) linear, height var(--transitionDuration) linear;
.artwork {
height: 128px;
width: 128px;
height: calc(128px, var(--windowRelativeScale));
width: calc(128px, var(--windowRelativeScale));
transition: width var(--transitionDuration) linear, height var(--transitionDuration) linear;
}
}
@ -1249,6 +1253,7 @@
position: relative;
border-radius: calc(var(--mediaItemRadius) * 2);
box-shadow: var(--mediaItemShadow-ShadowSubtle);
transition: width var(--transitionDuration) linear, height var(--transitionDuration) linear;
.artwork {
width: 230px;
@ -1341,7 +1346,7 @@
}
&:not(.noscale) {
@media (min-width: 1460px) {
@media (min-width: 1200px) {
width: calc(230px * 1.1);
height: calc(298px * 1.1);
.artwork-container > .artwork {
@ -1350,7 +1355,7 @@
}
}
@media (min-width: 1550px) {
@media (min-width: 1400px) {
width: calc(230px * 1.25);
height: calc(298px * 1.25);
.artwork-container > .artwork {

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

@ -706,6 +706,9 @@ const app = new Vue({
} catch (err) {
}
// Used to get a scale factor for the window for CSS scaling
window.addEventListener("resize", e => this.setWindowScaleFactor())
this.setWindowScaleFactor()
this.mk._bag.features['seamless-audio-transitions'] = this.cfg.audio.seamless_audio
this.mk._bag.features["broadcast-radio"] = true
this.mk._services.apiManager.store.storekit._restrictedEnabled = false
@ -1092,6 +1095,17 @@ const app = new Vue({
ipcRenderer.invoke("scanLibrary")
},
setWindowScaleFactor() {
let scale = window.devicePixelRatio * window.innerWidth / 1280 * window.innerHeight / 720
if(scale <= 1) {
scale = 1
}else if(scale >= 1.4) {
scale = 1.4
}
document.documentElement.style
.setProperty('--windowRelativeScale', scale);
},
showFoo(querySelector, time) {
clearTimeout(this.idleTimer);
if (this.idleState == true) {

1
src/renderer/style.less
View file

@ -14,6 +14,7 @@
@import url("less/pages.less");
:root {
--windowRelativeScale: 1;
--appleEase: cubic-bezier(0.42, 0, 0.58, 1);
--borderColor: rgb(200 200 200 / 16%);
--mediaItemShadow: inset 0px 0px 0px 1px rgb(200 200 200 / 16%);

6
src/renderer/views/pages/library-recentlyadded.ejs
View file

@ -1,13 +1,13 @@
<script type="text/x-template" id="cider-recentlyadded">
<div class="content-inner">
<h1 class="header-text">{{$root.getLz('term.recentlyAdded')}}</h1>
<div class="well itemContainer" v-if="itemSize == 'normal'">
<div class="well itemContainer collection-list-square" v-if="itemSize == 'normal'">
<mediaitem-square v-for="item in items" :item="item"></mediaitem-square>
</div>
<div class="well itemContainer" v-else="itemSize == 'compact'">
<div class="well itemContainer collection-list-square" v-else="itemSize == 'compact'">
<mediaitem-list-item :show-meta-data="true" :show-library-status="false" v-for="item in items" :item="item"></mediaitem-list-item>
</div>
<div class="well itemContainer" v-show="loading">
<div class="well itemContainer collection-list-square" v-show="loading">
<div class="spinner"></div>
</div>
<button v-if="nextUrl && !loading" style="opacity:0;height: 32px;" v-observe-visibility="{callback: visibilityChanged}">{{$root.getLz('term.showMore')}}