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

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

Browse source
This commit is contained in:
booploops 2021-12-08 13:39:32 -08:00
commit 2087be2fa4
3 changed files with 86 additions and 47 deletions
Download patch file Download diff file Expand all files Collapse all files

107
resources/cider-ui-tests/index.js
View file

@ -127,6 +127,8 @@ const app = new Vue({
},
mxmtoken: "",
lyricon: false,
currentTrackID: '',
currentTrackIDBG: '',
lyrics: [],
currentLyricsLine: 0,
lyriccurrenttime: 0,
@ -250,6 +252,8 @@ const app = new Vue({
}
self.chrome.artworkReady = false
self.lyrics = []
app.getNowPlayingArtwork(42);
app.getNowPlayingArtworkBG(32);
app.loadLyrics()
})
@ -700,10 +704,11 @@ const app = new Vue({
downloadChunk()
},
getTotalTime() {
try{
if (app.showingPlaylist.relationships.tracks.data.length > 0) {
time = Math.round([].concat(...app.showingPlaylist.relationships.tracks.data).reduce((a, {attributes: {durationInMillis}}) => a + durationInMillis, 0) / 60000);
return app.showingPlaylist.relationships.tracks.data.length + " tracks, " + time + " mins.";
} else return ""
} else return ""} catch(err){return ""}
},
async getLibrarySongs() {
var response = await this.mkapi("songs", true, "", {limit: 100}, {includeResponseMeta: !0})
@ -1042,7 +1047,10 @@ const app = new Vue({
})
}
}
}
} else if (app.currentLyricsLine == 0) {
if (!document.querySelector(`.lyric-line[line-index="0"]`).classList.contains("active"))
document.querySelector(`.lyric-line[line-index="0"]`).classList.add("active");
}
break;
}
}
@ -1217,57 +1225,74 @@ const app = new Vue({
return newurl
},
getNowPlayingArtworkBG(size = 600) {
let interval = setInterval(()=>{
if (!this.mkReady()) {
return ""
}
try {
if (this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"]) {
return `${this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"].replace('{w}', size).replace('{h}', size)}`;
} else {
return "";
}
} catch (e) {
return ""
// Does not work
// this.mk.api.library.song(this.mk.nowPlayingItem.id).then((data) => {
// try {
// if (data != null && data !== "") {
// //document.getElementsByClassName("bg-artwork")[0].setAttribute('src', `${data["attributes"]["artwork"]["url"]}`)
// return `${data["attributes"]["artwork"]["url"]}`;
// } else {
// return "https://beta.music.apple.com/assets/product/MissingArtworkMusic.svg";
// }
// } catch (e) {
// return "https://beta.music.apple.com/assets/product/MissingArtworkMusic.svg";
// }
// });
}
try {
if (this.mk.nowPlayingItem && this.mk.nowPlayingItem.id != this.currentTrackID && document.querySelector('.bg-artwork')) {
if (document.querySelector('.bg-artwork')){
clearInterval(interval);
}
this.currentTrackID = this.mk.nowPlayingItem.id;
document.querySelector('.bg-artwork').style.src = "";
if (this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"]) {
document.querySelector('.bg-artwork').style.src = this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"].replace('{w}', size).replace('{h}', size);
} else {
this.setLibraryArtBG()}
}
} catch (e) {
this.setLibraryArtBG()}},200)
},
getNowPlayingArtwork(size = 600) {
let interval = setInterval(() => {
try {
if (this.mk.nowPlayingItem && this.mk.nowPlayingItem.id != this.currentTrackIDBG && document.querySelector('.app-playback-controls .artwork')) {
this.currentTrackIDBG = this.mk.nowPlayingItem.id;
if (document.querySelector('.app-playback-controls .artwork') != null) {
clearInterval(interval);
}
document.querySelector('.app-playback-controls .artwork').style.setProperty('--artwork', '');
if (this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"]) {
document.querySelector('.app-playback-controls .artwork').style.setProperty('--artwork', `url("${decodeURI((this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"])).replace('{w}', size).replace('{h}', size)}")`);
} else {
this.setLibraryArt()
}
}
} catch (e) {
console.log(e);
this.setLibraryArt()
}
}, 200)
},
async setLibraryArt() {
const data = await this.mk.api.library.song(this.mk.nowPlayingItem.id)
try {
if (this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"]) {
return `url(${this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"].replace('{w}', size).replace('{h}', size)})`;
if (data != null && data !== "") {
document.querySelector('.app-playback-controls .artwork').style.setProperty('--artwork', 'url("' + (data["attributes"]["artwork"]["url"]).toString() + '")');
} else {
return "";
document.querySelector('.app-playback-controls .artwork').style.setProperty('--artwork', `url("https://beta.music.apple.com/assets/product/MissingArtworkMusic.svg")`);
}
} catch (e) {
return ""
// Does not work
// this.mk.api.library.song(this.mk.nowPlayingItem.id).then((data) => {
// try {
// if (data != null && data !== "") {
// return `url(${data["attributes"]["artwork"]["url"]})`;
// } else {
// return "url(https://beta.music.apple.com/assets/product/MissingArtworkMusic.svg)";
// }
// } catch (e) {
// return "url(https://beta.music.apple.com/assets/product/MissingArtworkMusic.svg)";
// }
// });
document.querySelector('.app-playback-controls .artwork').style.setProperty('--artwork', `url("https://beta.music.apple.com/assets/product/MissingArtworkMusic.svg")`);
}
},
async setLibraryArtBG() {
const data = await this.mk.api.library.song(this.mk.nowPlayingItem.id)
try {
if (data != null && data !== "") {
document.querySelector('.bg-artwork').src = (data["attributes"]["artwork"]["url"]).toString() ;
}
} catch (e) {}
},
quickPlay(query) {
let self = this
MusicKit.getInstance().api.search(query, {limit: 2, types: 'songs'}).then(function (data) {

14
resources/cider-ui-tests/style.css
View file

@ -710,6 +710,20 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
display: none !important;
}
.web-slider.display--small{
margin: 10px;
}
input[type="range"].web-slider.display--small::-webkit-slider-thumb {
-webkit-appearance: none;
height: 14px;
width: 14px;
border-radius: 50%;
background: rgb(50 50 50);
cursor: default;
box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.4);
}
/* Window is smaller <= 1023px width */
@media only screen and (max-width: 1023px) {
.display--small {

12
resources/cider-ui-tests/views/main.ejs
View file

@ -61,7 +61,7 @@
<div class="app-chrome-item playback-controls">
<template v-if="mkReady()">
<div class="app-playback-controls">
<div class="artwork" :style="{'--artwork': getNowPlayingArtwork(42)}"></div>
<div class="artwork" ></div>
<div class="playback-info">
<div class="song-name">
{{ mk.nowPlayingItem["attributes"]["name"] }}
@ -168,7 +168,7 @@
</div>
</transition>
<div class="app-sidebar-footer">
<input type="range" class="display--small" step="0.01" min="0" max="1" v-model="mk.volume"
<input type="range" class="web-slider display--small" step="0.01" min="0" max="1" v-model="mk.volume"
v-if="typeof mk.volume != 'undefined'">
<button class="app-sidebar-button" style="width:100%"
@click="chrome.menuOpened = !chrome.menuOpened">
@ -320,7 +320,7 @@
</div>
<transition name="wpfade">
<img v-show="chrome.artworkReady" @load="chrome.artworkReady = true" class="bg-artwork"
:src="getNowPlayingArtworkBG(32)">
>
</transition>
<transition name="wpfade">
<div class="bg-artwork--placeholder" v-else></div>
@ -430,9 +430,9 @@
<!-- Lyrics View -->
<script type="text/x-template" id="lyrics-view">
<div class="md-body lyric-body">
<template v-if="lyrics">
<template v-if="lyrics && lyrics != []">
<template v-for="(lyric, index) in lyrics" v-if="lyric.line != 'lrcInstrumental'">
<h3 class="lyric-line" @click="app.seekTo(lyric.startTime, false)"
<h3 class="lyric-line" @click="if(lyric.startTime != 9999999) app.seekTo(lyric.startTime, false)"
v-bind:line-index="index.toString()">
{{ lyric.line }}
<div class="lyrics-translation" v-if="lyric.translation && lyric.translation != ''">
@ -441,7 +441,7 @@
</h3>
</template>
<template v-else>
<h3 class="lyric-line" @click="app.seekTo(lyric.startTime, false)" :start="lyric.startTime"
<h3 class="lyric-line" @click="if(lyric.startTime != 9999999) app.seekTo(lyric.startTime, false)" :start="lyric.startTime"
:end="lyric.endTime" v-bind:line-index="index.toString()">
<div class="lyricWaiting">
<div class='WaitingDot1'></div>