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

Merge branch 'main' of https://github.com/Monochromish/Cider

Browse source
This commit is contained in:
Monochromish 2022-07-08 18:40:10 +10:00
commit 1371ed2876
18 changed files with 1687 additions and 1531 deletions
Download patch file Download diff file Expand all files Collapse all files

20
src/renderer/index.js
View file

@ -1,5 +1,9 @@
var notyf = new Notyf();
function clamp(num, min, max) {
return Math.min(Math.max(num, min), max);
}
const MusicKitObjects = {
LibraryPlaylist: function () {
this.id = "";
@ -84,8 +88,14 @@ function fallbackinitMusicKit() {
}
function initMusicKit() {
if(!this.responseText) {
console.log("Using stored token")
this.responseText = JSON.stringify({
token: localStorage.getItem("lastToken")
})
}
let parsedJson = JSON.parse(this.responseText);
localStorage.setItem("lastToken", parsedJson.token);
MusicKit.configure({
developerToken: parsedJson.token,
app: {
@ -116,7 +126,13 @@ function capiInit() {
request.addEventListener("load", initMusicKit);
request.onreadystatechange = function (aEvt) {
if (request.readyState == 4) {
if (request.status != 200) fallbackinitMusicKit();
if (request.status != 200) {
if(localStorage.getItem("lastToken") != null) {
initMusicKit()
}else{
fallbackinitMusicKit()
}
};
}
};
request.open("GET", "https://api.cider.sh/v1/");

75
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) {
@ -1197,10 +1197,12 @@
&.mediaitem-brick {
height: 200px;
width: 240px;
transition: width var(--transitionDuration) linear, height var(--transitionDuration) linear;
.artwork {
height: 123px;
width: 220px;
transition: width var(--transitionDuration) linear, height var(--transitionDuration) linear;
}
&:not(.noscale) {
@ -1231,12 +1233,14 @@
}
&.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 {

3
src/renderer/less/pages.less
View file

@ -1230,7 +1230,7 @@
}
&.animated .artist-header {
min-height: 500px;
min-height: 80vh;
}
.artist-header {
@ -1326,6 +1326,7 @@
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
object-fit: cover;
}
}

37
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,18 @@ const app = new Vue({
ipcRenderer.invoke("scanLibrary")
},
setWindowScaleFactor() {
let scale = window.devicePixelRatio * window.innerWidth / 1280 * window.innerHeight / 720
let desiredScale = clamp(parseFloat(app.cfg.visual.maxElementScale == -1 ? 1.5 : app.cfg.visual.maxElementScale), 1, 1.5)
app.$store.state.windowRelativeScale = scale
if(scale <= 1) {
scale = 1
}else if(scale >= desiredScale) {
scale = desiredScale
}
document.documentElement.style
.setProperty('--windowRelativeScale', scale);
},
showFoo(querySelector, time) {
clearTimeout(this.idleTimer);
if (this.idleState == true) {
@ -2010,7 +2025,7 @@ const app = new Vue({
params["fields[artists]"] = "name,url"
params["omit[resource]"] = "autos"
params["meta[albums:tracks]"] = 'popularity'
params["fields[albums]"] = "artistName,artistUrl,artwork,contentRating,editorialArtwork,editorialNotes,editorialVideo,name,playParams,releaseDate,url,copyright"
params["fields[albums]"] = "artistName,artistUrl,artwork,contentRating,editorialArtwork,editorialNotes,editorialVideo,name,playParams,releaseDate,url,copyright,genreNames"
}
if (kind.includes("playlist") || kind.includes("album")) {
app.page = (kind) + "_" + (id);
@ -3153,12 +3168,11 @@ const app = new Vue({
req.send();
}
function getMXMTrans(id, lang) {
function getMXMTrans(lang, id) {
if (lang != "disabled" && id != '') { // Mode 2 -> Trans
let url2 = "https://api.cider.sh/v1/lyrics?" + "mode=2" + "&richsyncQuery=" + richsyncQuery + "&track=" + track + "&artist=" + artist + "&songID=" + itunesid + "&source=mxm" + "&lang=" + lang + "&time=" + time;
let url2 = "https://api.cider.sh/v1/lyrics?" + "mode=2" + "&richsyncQuery=false" + "&songID=" + id + "&source=mxm" + "&lang=" + lang + "&time=" + time;
let req2 = new XMLHttpRequest();
req2.overrideMimeType("application/json");
req2.open('POST', url2, true);
req2.onload = function () {
try {
let jsonResponse2 = JSON.parse(this.responseText);
@ -3184,12 +3198,11 @@ const app = new Vue({
} catch (e) {
/// not found trans -> ignore
}
} else { //4xx rejected
getToken(2, '', '', id, lang, '');
}
}
} catch (e) {
}
}
req2.open('POST', url2, true);
req2.send();
}
@ -3197,6 +3210,7 @@ const app = new Vue({
if (track != "" & track != "No Title Found") {
getMXMSubs(track, artist, lang, time, id)
getMXMTrans(track, artist, lang, time, id)
}
},
loadNeteaseLyrics() {
@ -3938,9 +3952,8 @@ const app = new Vue({
this.currentArtUrl = this.mk.nowPlayingItem._assets[0].artworkURL
}
try {
document.querySelector('.app-playback-controls .artwork').style.setProperty('--artwork', `url("${this.currentArtUrl}")`);
} catch (e) {
}
// document.querySelector('.app-playback-controls .artwork').style.setProperty('--artwork', `url("${this.currentArtUrl}")`);
} catch (e) {}
} else {
let data = await this.mk.api.v3.music(`/v1/me/library/songs/${this.mk.nowPlayingItem.id}`);
data = data.data.data[0];
@ -3952,14 +3965,14 @@ const app = new Vue({
}
ipcRenderer.send('updateRPCImage', this.currentArtUrl ?? '');
try {
document.querySelector('.app-playback-controls .artwork').style.setProperty('--artwork', `url("${this.currentArtUrl}")`);
// document.querySelector('.app-playback-controls .artwork').style.setProperty('--artwork', `url("${this.currentArtUrl}")`);
} catch (e) {
}
} else {
this.currentArtUrlRaw = ''
this.currentArtUrl = '';
try {
document.querySelector('.app-playback-controls .artwork').style.setProperty('--artwork', `url("${this.currentArtUrl}")`);
// document.querySelector('.app-playback-controls .artwork').style.setProperty('--artwork', `url("${this.currentArtUrl}")`);
} catch (e) {
}
}

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"),

3
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%);
@ -2056,7 +2057,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
// screen size > 1200px
@media screen and (min-width: 1500px) {
grid-template-columns: repeat(6, minmax(200px, 1fr));
grid-template-columns: repeat(5, minmax(200px, 1fr));
}
// less than 1100px
@media screen and (max-width: 1150px) {

2
src/renderer/views/app/chrome-bottom.ejs
View file

@ -5,7 +5,7 @@
<div class="app-playback-controls" @mouseover="chrome.progresshover = true"
@mouseleave="chrome.progresshover = false" @contextmenu="nowPlayingContextMenu">
<div class="artwork" id="artworkLCD">
<mediaitem-artwork :url="currentArtUrl"></mediaitem-artwork>
<mediaitem-artwork :url="$root.currentArtUrl"></mediaitem-artwork>
</div>
<b-popover custom-class="mediainfo-popover" target="artworkLCD" triggers="hover" placement="right">
<div class="content">

31
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,37 @@
opacity: 0,
transition: "opacity .25s linear"
},
classes: []
classes: [],
imgSrc: ""
}
},
computed: {
windowRelativeScale: function () {
return app.$store.state.windowRelativeScale;
}
},
watch: {
windowRelativeScale: function (newValue, oldValue) {
this.swapImage(newValue)
},
url: function (newValue, oldValue) {
this.imgSrc = app.getMediaItemArtwork(this.url, this.size, this.width)
}
},
mounted() {
this.getClasses()
this.imgSrc = app.getMediaItemArtwork(this.url, this.size, this.width)
},
methods: {
swapImage(newValue) {
if(!this.upscaling || window.devicePixelRatio !== 1) 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) {

2
src/renderer/views/components/mediaitem-list-item.ejs
View file

@ -16,7 +16,7 @@
@controller-click="route()"
tabindex="0"
:class="[{'mediaitem-selected': app.select_hasMediaItem(guid)}, addClasses]">
<div v-if="isVisible" class="listitem-content">
<div v-show="isVisible" class="listitem-content">
<div class="popular" v-if="!showInLibrary && item?.meta?.popularity != null && item?.meta?.popularity > 0.7"></div>
<div class="isLibrary" v-if="showLibraryStatus == true">
<div v-if="showInLibrary" :style="{display: (showInLibrary ? 'block' : 'none'), 'margin-left':'11px'}">

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"

3002
src/renderer/views/components/settings-window.ejs
View file

File diff suppressed because it is too large Load diff

2
src/renderer/views/components/sidebar.ejs
View file

@ -145,7 +145,7 @@
Local Library
</div>
<template v-if="!$root.cfg.general.sidebarCollapsed.localLibrary">
<sidebar-playlist :item="{attributes: { name:'Songs'} , id:'ciderlocal'}">
<sidebar-playlist :item="{attributes: { name:'Songs'} , id:'ciderlocal'}"></sidebar-playlist>
</template>
</template>
<template v-if="$root.getPlaylistFolderChildren('p.applemusic').length != 0">

2
src/renderer/views/pages/cider-playlist.ejs
View file

@ -457,7 +457,7 @@
if (this.data.type.includes('albums')) {
let date = this.data.attributes.releaseDate;
if (date == null || date === "") return "";
return `${this.data.relationships.tracks.data[0].attributes.genreNames[0]} · ${new Date(date).getFullYear()}`
return `${this.data.attributes.genreNames[0]} · ${new Date(date).getFullYear()}`
}
},
async isInLibrary() {

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')}}

24
src/renderer/views/pages/settings.ejs
View file

@ -613,27 +613,27 @@
<div class="md-option-header">
<span>{{$root.getLz('settings.header.lyrics')}}</span>
</div>
<div class="settings-option-body">
<div class="settings-option-body">
<div class="md-option-line">
<div class="md-option-segment">
{{$root.getLz('settings.option.lyrics.enableMusixmatch')}}
</div>
<div class="md-option-segment md-option-segment_auto">
<label>
<input type="checkbox" switch checked/>
</label>
<!-- <input type="checkbox" v-model="app.cfg.lyrics.enable_mxm" switch /> -->
<input type="checkbox" v-model="app.cfg.lyrics.enable_mxm" switch />
</label>
</div>
</div>
<div class="md-option-line">
<!-- <div class="md-option-line" v-if="app.cfg.lyrics.enable_mxm"> -->
<div class="md-option-segment">
{{$root.getLz('settings.option.lyrics.enableMusixmatchKaraoke')}}
</div>
<div class="md-option-segment md-option-segment_auto">
<label>
<input type="checkbox" v-model="app.cfg.lyrics.mxm_karaoke" switch/>
</label>
<div class="md-option-line" v-if="app.cfg.lyrics.enable_mxm">
<div class="md-option-segment">
{{$root.getLz('settings.option.lyrics.enableMusixmatchKaraoke')}}
</div>
<div class="md-option-segment md-option-segment_auto">
<label>
<input type="checkbox" v-model="app.cfg.lyrics.mxm_karaoke" switch/>
</label>
</div>
</div>
</div>
<div class="md-option-line">