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

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

@ -706,6 +706,9 @@ const app = new Vue({
} catch (err) { } 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['seamless-audio-transitions'] = this.cfg.audio.seamless_audio
this.mk._bag.features["broadcast-radio"] = true this.mk._bag.features["broadcast-radio"] = true
this.mk._services.apiManager.store.storekit._restrictedEnabled = false this.mk._services.apiManager.store.storekit._restrictedEnabled = false
@ -1092,6 +1095,17 @@ const app = new Vue({
ipcRenderer.invoke("scanLibrary") 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) { showFoo(querySelector, time) {
clearTimeout(this.idleTimer); clearTimeout(this.idleTimer);
if (this.idleState == true) { if (this.idleState == true) {

1
src/renderer/style.less
View file

@ -14,6 +14,7 @@
@import url("less/pages.less"); @import url("less/pages.less");
:root { :root {
--windowRelativeScale: 1;
--appleEase: cubic-bezier(0.42, 0, 0.58, 1); --appleEase: cubic-bezier(0.42, 0, 0.58, 1);
--borderColor: rgb(200 200 200 / 16%); --borderColor: rgb(200 200 200 / 16%);
--mediaItemShadow: inset 0px 0px 0px 1px 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"> <script type="text/x-template" id="cider-recentlyadded">
<div class="content-inner"> <div class="content-inner">
<h1 class="header-text">{{$root.getLz('term.recentlyAdded')}}</h1> <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> <mediaitem-square v-for="item in items" :item="item"></mediaitem-square>
</div> </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> <mediaitem-list-item :show-meta-data="true" :show-library-status="false" v-for="item in items" :item="item"></mediaitem-list-item>
</div> </div>
<div class="well itemContainer" v-show="loading"> <div class="well itemContainer collection-list-square" v-show="loading">
<div class="spinner"></div> <div class="spinner"></div>
</div> </div>
<button v-if="nextUrl && !loading" style="opacity:0;height: 32px;" v-observe-visibility="{callback: visibilityChanged}">{{$root.getLz('term.showMore')}} <button v-if="nextUrl && !loading" style="opacity:0;height: 32px;" v-observe-visibility="{callback: visibilityChanged}">{{$root.getLz('term.showMore')}}