Merge branch 'main' of https://github.com/ciderapp/Cider
This commit is contained in:
vapormusic
commit
603ebd727c
8 changed files with 114 additions and 103 deletions
|
|
@ -269,6 +269,19 @@ const app = new Vue({
|
|||
},
|
||||
},
|
||||
methods: {
|
||||
getHTMLStyle() {
|
||||
switch(this.cfg.visual.window_transparency) {
|
||||
case "acrylic":
|
||||
default:
|
||||
document.querySelector("html").style.background = "";
|
||||
document.querySelector("body").style.background = "";
|
||||
break;
|
||||
case "disabled":
|
||||
document.querySelector("html").style.background = "#222";
|
||||
document.querySelector("body").style.background = "#222";
|
||||
break;
|
||||
}
|
||||
},
|
||||
resetState() {
|
||||
app.selectedMediaItems = [];
|
||||
for (let key in app.modals) {
|
||||
|
|
@ -2315,6 +2328,8 @@ function refreshFocus() {
|
|||
setTimeout(refreshFocus, 200);
|
||||
}
|
||||
|
||||
app.getHTMLStyle()
|
||||
|
||||
refreshFocus();
|
||||
|
||||
function xmlToJson(xml) {
|
||||
|
|
|
|||
|
|
@ -9,10 +9,27 @@
|
|||
<script>
|
||||
Vue.component('animatedartwork-view', {
|
||||
template: '#animatedartwork-view',
|
||||
props: ['video', 'hls'],
|
||||
props: {
|
||||
video: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
hls: {
|
||||
type: Object,
|
||||
default: ''
|
||||
},
|
||||
priority: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
if(!this.priority && app.cfg.visual.animated_artwork == "limited") {
|
||||
return
|
||||
}else if(app.cfg.visual.animated_artwork == "disabled") {
|
||||
return
|
||||
}
|
||||
if (this.video) {
|
||||
|
||||
this.$nextTick(function () {
|
||||
var config = {
|
||||
backBufferLength: 0,
|
||||
|
|
@ -21,7 +38,6 @@
|
|||
emeEnabled: false,
|
||||
abrEwmaDefaultEstimate: 10000,
|
||||
testBandwidth: false,
|
||||
capLevelToPlayerSize: true
|
||||
};
|
||||
if (this.hls) {
|
||||
this.hls.detachMedia();
|
||||
|
|
|
|||
|
|
@ -12,8 +12,8 @@
|
|||
<img :src="app.getMediaItemArtwork(url, size, width)"
|
||||
decoding="async"
|
||||
class="mediaitem-artwork--img">
|
||||
<div v-if="video && isVisible" class="animatedartwork-view-box">
|
||||
<animatedartwork-view :video="video"></animatedartwork-view>
|
||||
<div v-if="video && isVisible && getVideoPriority()" class="animatedartwork-view-box">
|
||||
<animatedartwork-view :priority="getVideoPriority()" :video="video"></animatedartwork-view>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -43,6 +43,10 @@
|
|||
type: String,
|
||||
required: false
|
||||
},
|
||||
videoPriority: {
|
||||
type: Boolean,
|
||||
required: false
|
||||
},
|
||||
shadow: {
|
||||
type: String,
|
||||
default: 'none'
|
||||
|
|
@ -57,16 +61,26 @@
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
getVideoPriority() {
|
||||
if(app.cfg.visual.animated_artwork == "always") {
|
||||
return true;
|
||||
}else if (this.videoPriority && app.cfg.visual.animated_artwork == "limited") {
|
||||
return true
|
||||
} else if (app.cfg.visual.animated_artwork == "disabled") {
|
||||
return false
|
||||
}
|
||||
return this.videoPriority
|
||||
},
|
||||
getStyle() {
|
||||
switch(this.shadow) {
|
||||
switch (this.shadow) {
|
||||
case "large":
|
||||
this.style["box-shadow"] = "var(--mediaItemShadow-Shadow)"
|
||||
break;
|
||||
break;
|
||||
case "subtle":
|
||||
this.style["box-shadow"] = "var(--mediaItemShadow-ShadowSubtle)"
|
||||
break;
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
break;
|
||||
}
|
||||
return this.style;
|
||||
},
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
<div class="content-inner artist-page">
|
||||
<div class="artist-header" :style="getArtistPalette(data)" :key="data.id">
|
||||
<animatedartwork-view
|
||||
:priority="true"
|
||||
v-if="data.attributes.editorialVideo && (data.attributes.editorialVideo.motionArtistWide16x9 || data.attributes.editorialVideo.motionArtistFullscreen16x9)"
|
||||
:video="data.attributes.editorialVideo.motionArtistWide16x9.video ?? (data.attributes.editorialVideo.motionArtistFullscreen16x9.video ?? '')">
|
||||
</animatedartwork-view>
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@
|
|||
<div class="col-auto flex-center">
|
||||
<div style="width: 260px;height:260px;">
|
||||
<mediaitem-artwork
|
||||
:video-priority="true"
|
||||
:url="(data.attributes != null && data.attributes.artwork && data.attributes.artwork != null) ? data.attributes.artwork.url : ((data.relationships != null && data.relationships.tracks.data.length > 0) ? data.relationships.tracks.data[0].attributes.artwork.url ?? '':'')"
|
||||
:video="(data.attributes != null && data.attributes.editorialVideo != null) ? (data.attributes.editorialVideo.motionDetailSquare ? data.attributes.editorialVideo.motionDetailSquare.video : (data.attributes.editorialVideo.motionSquareVideo1x1 ? data.attributes.editorialVideo.motionSquareVideo1x1.video : '')) : '' "
|
||||
size="260"
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<script type="text/x-template" id="cider-settings">
|
||||
<div class="content-inner settings-page">
|
||||
<h1 class="header-text">Settings <small>(non functional, stay tuned)</small></h1>
|
||||
<h1 class="header-text">Settings <small>(WIP)</small></h1>
|
||||
<div class="md-option-container">
|
||||
<div class="md-option-line">
|
||||
<div class="md-option-segment">
|
||||
|
|
@ -8,9 +8,10 @@
|
|||
</div>
|
||||
<div class="md-option-segment md-option-segment_auto">
|
||||
<select class="md-select" style="width:180px;">
|
||||
<option value="990">Extreme</option>
|
||||
<option value="256">High</option>
|
||||
<option value="64">Low</option>
|
||||
<option value="extreme">Extreme</option>
|
||||
<option value="high">High</option>
|
||||
<option value="low">Low</option>
|
||||
<option value="auto">Auto</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -19,7 +20,7 @@
|
|||
Seamless Audio Transitions
|
||||
</div>
|
||||
<div class="md-option-segment md-option-segment_auto">
|
||||
<input type="checkbox" switch/>
|
||||
<input type="checkbox" v-model="app.cfg.audio.seamless_audio" switch/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="md-option-line">
|
||||
|
|
@ -27,10 +28,10 @@
|
|||
Animated Artwork
|
||||
</div>
|
||||
<div class="md-option-segment md-option-segment_auto">
|
||||
<select class="md-select">
|
||||
<option value="0">Always</option>
|
||||
<option value="1">Limit to pages and special entries</option>
|
||||
<option value="2">Disable Everywhere</option>
|
||||
<select class="md-select" v-model="app.cfg.visual.animated_artwork">
|
||||
<option value="always">Always</option>
|
||||
<option value="limited">Limit to pages and special entries</option>
|
||||
<option value="disabled">Disable Everywhere</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -39,7 +40,7 @@
|
|||
Discord Rich Presence
|
||||
</div>
|
||||
<div class="md-option-segment md-option-segment_auto">
|
||||
<select class="md-select">
|
||||
<select class="md-select" v-model="app.cfg.general.discord_rpc">
|
||||
<option value="0">Disabled</option>
|
||||
<option value="1">Display as 'Cider'</option>
|
||||
<option value="2">Display as 'Apple Music'</option>
|
||||
|
|
@ -72,6 +73,31 @@
|
|||
<input type="checkbox" switch/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="md-option-line">
|
||||
<div class="md-option-segment">
|
||||
Hardware Acceleration<br>
|
||||
<small>(Requires relaunch)</small>
|
||||
</div>
|
||||
<div class="md-option-segment md-option-segment_auto">
|
||||
<select class="md-select" style="width:180px;" v-model="app.cfg.behavior.hw_acceleration">
|
||||
<option value="default">Default</option>
|
||||
<option value="webgpu">WebGPU</option>
|
||||
<option value="disabled">Disabled</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="md-option-line">
|
||||
<div class="md-option-segment">
|
||||
Window Transparency
|
||||
</div>
|
||||
<div class="md-option-segment md-option-segment_auto">
|
||||
<select class="md-select" style="width:180px;" v-model="app.cfg.visual.window_transparency" @change="app.getHTMLStyle()">
|
||||
<option value="default">Default</option>
|
||||
<option value="acrylic" v-if="app.platform == 'win32'">Acrylic</option>
|
||||
<option value="disabled">Disabled</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="md-option-line">
|
||||
<div class="md-option-segment">
|
||||
Theme
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue