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

Various changes to userinfo footer, Discord now works, as does sign out, handling for deauth needs to be done

Browse source
This commit is contained in:
Core 2021-12-14 23:25:57 +00:00
parent 85f2b36ef2
commit 2f07a48124
5 changed files with 212 additions and 147 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
resources/cider-ui-tests/assets/logocut.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 17 KiB

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

@ -145,7 +145,14 @@ const app = new Vue({
chrome: { chrome: {
hideUserInfo: false, hideUserInfo: false,
artworkReady: false, artworkReady: false,
userinfo: {}, userinfo: {
"id": "",
"attributes": {
"name": "Cider User",
"handle": "CiderUser",
"artwork": {"url": "http://localhost:9000/assets/logocut.png"}
}
},
menuOpened: false, menuOpened: false,
maximized: false, maximized: false,
drawerOpened: false, drawerOpened: false,
@ -158,14 +165,20 @@ const app = new Vue({
type: "" type: ""
}, },
currentSongInfo: {}, currentSongInfo: {},
page: "artist-page", page: "browse",
pageHistory: [], pageHistory: [],
songstest: false songstest: false
}, },
watch: { watch: {
page: () => {document.getElementById("app-content").scrollTo(0,0);}, page: () => {
showingPlaylist: () => {document.getElementById("app-content").scrollTo(0,0);}, document.getElementById("app-content").scrollTo(0, 0);
artistPage: () => {document.getElementById("app-content").scrollTo(0,0);}, },
showingPlaylist: () => {
document.getElementById("app-content").scrollTo(0, 0);
},
artistPage: () => {
document.getElementById("app-content").scrollTo(0, 0);
},
}, },
methods: { methods: {
async init() { async init() {
@ -179,9 +192,17 @@ const app = new Vue({
this.chrome.userinfo = await this.mkapi("personalSocialProfile", false, "") this.chrome.userinfo = await this.mkapi("personalSocialProfile", false, "")
// API Fallback // API Fallback
if (!this.chrome.userinfo) { if (!this.chrome.userinfo) {
this.chrome.userinfo = {"attributes": {"name": "Cider User", "handle": "CiderUser", "artwork": {"url": "../icons/icon.png"}}} this.chrome.userinfo = {
"id": "",
"attributes": {
"name": "Cider User",
"handle": "CiderUser",
"artwork": {"url": "http://localhost:9000/assets/logocut.png"}
}
}
} }
// load cached library // load cached library
if (localStorage.getItem("librarySongs") != null) { if (localStorage.getItem("librarySongs") != null) {
this.library.songs.listing = JSON.parse(localStorage.getItem("librarySongs")) this.library.songs.listing = JSON.parse(localStorage.getItem("librarySongs"))
@ -263,9 +284,10 @@ const app = new Vue({
this.mk.addEventListener(MusicKit.Events.nowPlayingItemDidChange, (a) => { this.mk.addEventListener(MusicKit.Events.nowPlayingItemDidChange, (a) => {
this.currentSongInfo = a this.currentSongInfo = a
try{ try {
a = a.item.attributes; a = a.item.attributes;
} catch(_){} } catch (_) {
}
let type = (self.mk.nowPlayingItem != null) ? self.mk.nowPlayingItem["type"] ?? '' : ''; let type = (self.mk.nowPlayingItem != null) ? self.mk.nowPlayingItem["type"] ?? '' : '';
@ -282,19 +304,20 @@ const app = new Vue({
app.getNowPlayingArtworkBG(32); app.getNowPlayingArtworkBG(32);
app.loadLyrics() app.loadLyrics()
try{ try {
// Playback Notifications // Playback Notifications
if ((app.platform === "darwin" || app.platform === "linux") && !document.hasFocus()) { if ((app.platform === "darwin" || app.platform === "linux") && !document.hasFocus()) {
if (this.notification) { if (this.notification) {
this.notification.close() this.notification.close()
}
this.notification = new Notification(a.name, {
body: a.artistName,
icon: (a.artwork.url.replace('/{w}x{h}bb', '/512x512bb')).replace('/2000x2000bb', '/35x35bb'),
silent: true
})
} }
this.notification = new Notification(a.name, { } catch (_) {
body: a.artistName,
icon: (a.artwork.url.replace('/{w}x{h}bb', '/512x512bb')).replace('/2000x2000bb', '/35x35bb'),
silent: true
})
} }
} catch (_){}
}) })
this.apiCall('https://api.music.apple.com/v1/me/library/playlists', res => { this.apiCall('https://api.music.apple.com/v1/me/library/playlists', res => {
@ -302,18 +325,18 @@ const app = new Vue({
}) })
document.body.removeAttribute("loading") document.body.removeAttribute("loading")
}, },
async showCollection (response, title, type) { async showCollection(response, title, type) {
let self = this let self = this
this.collectionList.response = response this.collectionList.response = response
this.collectionList.title = title this.collectionList.title = title
this.collectionList.type = type this.collectionList.type = type
this.page = "collection-list" this.page = "collection-list"
}, },
async showArtistView (artist, title, view) { async showArtistView(artist, title, view) {
let response = await this.mk.api.artistView(artist, view, {}, {view: view, includeResponseMeta: !0}) let response = await this.mk.api.artistView(artist, view, {}, {view: view, includeResponseMeta: !0})
await this.showCollection(response, title, "artists") await this.showCollection(response, title, "artists")
}, },
async showRecordLabelView (label, title, view) { async showRecordLabelView(label, title, view) {
let response = await this.mk.api.recordLabelView(label, view, {}, {view: view, includeResponseMeta: !0}) let response = await this.mk.api.recordLabelView(label, view, {}, {view: view, includeResponseMeta: !0})
await this.showCollection(response, title, "record-labels") await this.showCollection(response, title, "record-labels")
}, },
@ -353,19 +376,21 @@ const app = new Vue({
await this.showCollection(responseFormat, title, "search") await this.showCollection(responseFormat, title, "search")
}, },
async getPlaylistFromID(id) { async getPlaylistFromID(id) {
const params = {include: "tracks", const params = {
include: "tracks",
platform: "web", platform: "web",
"include[library-playlists]": "catalog,tracks", "include[library-playlists]": "catalog,tracks",
"fields[playlists]": "curatorName,playlistType,name,artwork,url", "fields[playlists]": "curatorName,playlistType,name,artwork,url",
"include[library-songs]": "catalog,artists,albums", "include[library-songs]": "catalog,artists,albums",
"fields[catalog]": "artistUrl,albumUrl", "fields[catalog]": "artistUrl,albumUrl",
"fields[songs]": "artistUrl,albumUrl"} "fields[songs]": "artistUrl,albumUrl"
}
try { try {
this.showingPlaylist = await app.mk.api.library.playlist(id,params) this.showingPlaylist = await app.mk.api.library.playlist(id, params)
} catch (e) { } catch (e) {
console.log(e); console.log(e);
try { try {
this.showingPlaylist = await app.mk.api.playlist(id,params) this.showingPlaylist = await app.mk.api.playlist(id, params)
} catch (err) { } catch (err) {
console.log(err) console.log(err)
} }
@ -386,14 +411,14 @@ const app = new Vue({
this.artistPage.data = artistData.data[0] this.artistPage.data = artistData.data[0]
this.page = "artist-page" this.page = "artist-page"
}, },
progressBarStyle () { progressBarStyle() {
let val = this.playerLCD.playbackDuration let val = this.playerLCD.playbackDuration
if(this.playerLCD.desiredDuration > 0) { if (this.playerLCD.desiredDuration > 0) {
val = this.playerLCD.desiredDuration val = this.playerLCD.desiredDuration
} }
let min = 0 let min = 0
let max = this.mk.currentPlaybackDuration let max = this.mk.currentPlaybackDuration
let value = (val-min)/(max-min)*100 let value = (val - min) / (max - min) * 100
return { return {
'background': ('linear-gradient(to right, var(--keyColor) 0%, var(--keyColor) ' + value + '%, #333 ' + value + '%, #333 100%)') 'background': ('linear-gradient(to right, var(--keyColor) 0%, var(--keyColor) ' + value + '%, #333 ' + value + '%, #333 100%)')
} }
@ -403,7 +428,7 @@ const app = new Vue({
"data": [], "data": [],
"meta": {} "meta": {}
} }
if(response.next) { if (response.next) {
console.log("has next") console.log("has next")
returnData.data.concat(response.data) returnData.data.concat(response.data)
returnData.meta = response.meta returnData.meta = response.meta
@ -415,7 +440,7 @@ const app = new Vue({
} }
}, },
async getSearchHints() { async getSearchHints() {
if(this.search.term == "") { if (this.search.term == "") {
this.search.hints = [] this.search.hints = []
return return
} }
@ -423,16 +448,16 @@ const app = new Vue({
this.search.hints = hints ? hints.terms : [] this.search.hints = hints ? hints.terms : []
}, },
getSongProgress() { getSongProgress() {
if(this.playerLCD.userInteraction) { if (this.playerLCD.userInteraction) {
return this.playerLCD.desiredDuration return this.playerLCD.desiredDuration
} else{ } else {
return this.playerLCD.playbackDuration return this.playerLCD.playbackDuration
} }
}, },
convertToMins(time) { convertToMins(time) {
let mins = Math.floor(time/60) let mins = Math.floor(time / 60)
let seconds = (Math.floor(time%60) / 100).toFixed(2) let seconds = (Math.floor(time % 60) / 100).toFixed(2)
return `${mins}:${seconds.replace("0.","")}` return `${mins}:${seconds.replace("0.", "")}`
}, },
hashCode(str) { hashCode(str) {
var hash = 0, i, chr; var hash = 0, i, chr;
@ -454,18 +479,23 @@ const app = new Vue({
let isLibrary = item.attributes.playParams ? (item.attributes.playParams.isLibrary ?? false) : false; let isLibrary = item.attributes.playParams ? (item.attributes.playParams.isLibrary ?? false) : false;
console.log(kind, id, isLibrary) console.log(kind, id, isLibrary)
// disable apple-curators because they can't be played in MKjs // disable apple-curators because they can't be played in MKjs
if (!kind.toString().includes("apple-curator")){ if (!kind.toString().includes("apple-curator")) {
app.showingPlaylist = []; app.showingPlaylist = [];
if (kind.toString().includes("artist")) { if (kind.toString().includes("artist")) {
app.getArtistInfo(id, isLibrary) app.getArtistInfo(id, isLibrary)
} else if (kind.toString().includes("record-label") || kind.toString().includes("curator")) { } else if (kind.toString().includes("record-label") || kind.toString().includes("curator")) {
if (kind.toString().includes("record-label")) if (kind.toString().includes("record-label")) {
{kind = "recordLabel"} kind = "recordLabel"
else {kind = "curator"} } else {
kind = "curator"
}
app.page = (kind) + "_" + (id); app.page = (kind) + "_" + (id);
app.getTypeFromID((kind), (id), (isLibrary), {extend: "editorialVideo",include: 'grouping,playlists', views: 'top-releases,latest-releases,top-artists'}); app.getTypeFromID((kind), (id), (isLibrary), {
} extend: "editorialVideo",
else if (!kind.toString().includes("radioStation") && !kind.toString().includes("song") && !kind.toString().includes("musicVideo") && !kind.toString().includes("uploadedVideo")) { include: 'grouping,playlists',
views: 'top-releases,latest-releases,top-artists'
});
} else if (!kind.toString().includes("radioStation") && !kind.toString().includes("song") && !kind.toString().includes("musicVideo") && !kind.toString().includes("uploadedVideo")) {
app.page = (kind) + "_" + (id); app.page = (kind) + "_" + (id);
app.getTypeFromID((kind), (id), (isLibrary), {extend: "editorialVideo"}); app.getTypeFromID((kind), (id), (isLibrary), {extend: "editorialVideo"});
} else { } else {
@ -474,35 +504,42 @@ const app = new Vue({
document.querySelector("#app-content").scrollTop = 0 document.querySelector("#app-content").scrollTop = 0
} }
}, },
async getNowPlayingItemDetailed(target){ async getNowPlayingItemDetailed(target) {
let u = await app.mkapi(app.mk.nowPlayingItem.playParams.kind, (app.mk.nowPlayingItem.songId == -1) , (app.mk.nowPlayingItem.songId != -1) ? app.mk.nowPlayingItem.songId : app.mk.nowPlayingItem.id, {"include[songs]":"albums,artists"} ); let u = await app.mkapi(app.mk.nowPlayingItem.playParams.kind, (app.mk.nowPlayingItem.songId == -1), (app.mk.nowPlayingItem.songId != -1) ? app.mk.nowPlayingItem.songId : app.mk.nowPlayingItem.id, {"include[songs]": "albums,artists"});
app.searchAndNavigate(u,target) app.searchAndNavigate(u, target)
}, },
async searchAndNavigate(item,target){ async searchAndNavigate(item, target) {
app.tmpVar = item; app.tmpVar = item;
switch(target){ switch (target) {
case "artist": case "artist":
let artistId = ''; let artistId = '';
try { try {
if (item.relationships.artists && item.relationships.artists.data.length > 0) { if (item.relationships.artists && item.relationships.artists.data.length > 0) {
if (item.relationships.artists.data[0].type === "artist" || item.relationships.artists.data[0].type === "artists") { artistId = item.relationships.artists.data[0].id } if (item.relationships.artists.data[0].type === "artist" || item.relationships.artists.data[0].type === "artists") {
artistId = item.relationships.artists.data[0].id
}
} else { } else {
const url = (item.relationships.catalog.data[0].attributes.artistUrl); const url = (item.relationships.catalog.data[0].attributes.artistUrl);
artistId = (url).substring(url.lastIndexOf('/') + 1) artistId = (url).substring(url.lastIndexOf('/') + 1)
if (artistId.includes('viewCollaboration')) { artistId = artistId.substring(artistId.lastIndexOf('ids=') + 4, artistId.lastIndexOf('-')) } if (artistId.includes('viewCollaboration')) {
artistId = artistId.substring(artistId.lastIndexOf('ids=') + 4, artistId.lastIndexOf('-'))
}
} }
} catch (_) {
} }
catch (_) { }
if (artistId == "") { if (artistId == "") {
let artistQuery = await app.mk.api.search(item.attributes.artistName, { limit: 1, types: 'artists' }) let artistQuery = await app.mk.api.search(item.attributes.artistName, {
limit: 1,
types: 'artists'
})
try { try {
if (artistQuery.artists.data.length > 0) { if (artistQuery.artists.data.length > 0) {
artistId = artistQuery.artists.data[0].id; artistId = artistQuery.artists.data[0].id;
console.log(artistId) console.log(artistId)
} }
} catch (e) {
} }
catch (e) {}
} }
console.log(artistId); console.log(artistId);
if (artistId != "") if (artistId != "")
@ -512,50 +549,57 @@ const app = new Vue({
let albumId = ''; let albumId = '';
try { try {
if (item.relationships.albums && item.relationships.albums.data.length > 0) { if (item.relationships.albums && item.relationships.albums.data.length > 0) {
if (item.relationships.albums.data[0].type === "album" || item.relationships.albums.data[0].type === "albums") { albumId = item.relationships.albums.data[0].id } if (item.relationships.albums.data[0].type === "album" || item.relationships.albums.data[0].type === "albums") {
albumId = item.relationships.albums.data[0].id
}
} }
} catch (_) {
} }
catch (_) { }
if (albumId == "") { if (albumId == "") {
try { try {
let albumQuery = await app.mk.api.search(item.attributes.albumName +" "+ (item.attributes.artistName ?? ""), { limit: 1, types: 'albums' }) let albumQuery = await app.mk.api.search(item.attributes.albumName + " " + (item.attributes.artistName ?? ""), {
limit: 1,
types: 'albums'
})
if (albumQuery.albums.data.length > 0) { if (albumQuery.albums.data.length > 0) {
albumId = albumQuery.albums.data[0].id; albumId = albumQuery.albums.data[0].id;
console.log(albumId) console.log(albumId)
} }
} catch (e) {
} }
catch (e) {}
} }
if (albumId != "") if (albumId != "") {
{ app.getTypeFromID("album", albumId, false);
app.getTypeFromID("album",albumId, false); app.page = "album_" + albumId;
app.page = "album_" + albumId;} }
break; break;
case "recordLabel": case "recordLabel":
let labelId = ''; let labelId = '';
try { try {
labelId = item.relationships['record-labels'].data[0].id labelId = item.relationships['record-labels'].data[0].id
} catch (_) {
} }
catch (_) { }
if (labelId == "") { if (labelId == "") {
try { try {
let labelQuery = await app.mk.api.search(item.attributes.recordLabel, { limit: 1, types: 'record-labels' }) let labelQuery = await app.mk.api.search(item.attributes.recordLabel, {
limit: 1,
types: 'record-labels'
})
if (labelQuery["record-labels"].data.length > 0) { if (labelQuery["record-labels"].data.length > 0) {
labelId = labelQuery["record-labels"].data[0].id; labelId = labelQuery["record-labels"].data[0].id;
console.log(labelId) console.log(labelId)
} }
} catch (e) {
} }
catch (e) {}
} }
if (labelId != "") if (labelId != "") {
{ app.showingPlaylist = []
app.showingPlaylist = []
await app.getTypeFromID("recordLabel",labelId, false,{views: 'top-releases,latest-releases,top-artists'}); await app.getTypeFromID("recordLabel", labelId, false, {views: 'top-releases,latest-releases,top-artists'});
app.page = "recordLabel_" + labelId; app.page = "recordLabel_" + labelId;
} }
break; break;
} }
@ -595,7 +639,7 @@ const app = new Vue({
async getTypeFromID(kind, id, isLibrary = false, params = {}) { async getTypeFromID(kind, id, isLibrary = false, params = {}) {
var a; var a;
if (kind == "album" | kind == "albums") { if (kind == "album" | kind == "albums") {
params["include"] = "tracks,artists,record-labels"; params["include"] = "tracks,artists,record-labels";
} }
try { try {
a = await this.mkapi(kind.toString(), isLibrary, id.toString(), params); a = await this.mkapi(kind.toString(), isLibrary, id.toString(), params);
@ -700,6 +744,7 @@ const app = new Vue({
// make a copy of searchLibrarySongs except use Albums instead of Songs // make a copy of searchLibrarySongs except use Albums instead of Songs
searchLibraryAlbums() { searchLibraryAlbums() {
let self = this let self = this
function sortAlbums() { function sortAlbums() {
if (self.library.albums.sortOrder == "asc") { if (self.library.albums.sortOrder == "asc") {
// sort this.library.albums.displayListing by album.attributes[self.library.albums.sorting] in ascending order based on alphabetical order and numeric order // sort this.library.albums.displayListing by album.attributes[self.library.albums.sorting] in ascending order based on alphabetical order and numeric order
@ -750,6 +795,7 @@ const app = new Vue({
}) })
} }
} }
if (this.library.albums.search == "") { if (this.library.albums.search == "") {
this.library.albums.displayListing = this.library.albums.listing this.library.albums.displayListing = this.library.albums.listing
sortAlbums() sortAlbums()
@ -820,7 +866,7 @@ const app = new Vue({
if ((this.library.songs.downloadState == 2) && !force) { if ((this.library.songs.downloadState == 2) && !force) {
return return
} }
if(this.library.songs.downloadState == 1) { if (this.library.songs.downloadState == 1) {
return return
} }
if (localStorage.getItem("librarySongs") != null) { if (localStorage.getItem("librarySongs") != null) {
@ -835,13 +881,14 @@ const app = new Vue({
this.library.downloadNotification.message = "Updating library songs..." this.library.downloadNotification.message = "Updating library songs..."
function downloadChunk() { function downloadChunk() {
const params = {"include[library-songs]": "artists,albums", const params = {
"fields[artists]":"name,url,id", "include[library-songs]": "artists,albums",
"fields[albums]":"name,url,id", "fields[artists]": "name,url,id",
platform: "web", "fields[albums]": "name,url,id",
"fields[songs]": "artistName,artistUrl,artwork,contentRating,editorialArtwork,name,playParams,releaseDate,url", platform: "web",
limit: 100, "fields[songs]": "artistName,artistUrl,artwork,contentRating,editorialArtwork,name,playParams,releaseDate,url",
} limit: 100,
}
self.library.songs.downloadState = 1 self.library.songs.downloadState = 1
if (downloaded == null) { if (downloaded == null) {
app.mk.api.library.songs("", params, {includeResponseMeta: !0}).then((response) => { app.mk.api.library.songs("", params, {includeResponseMeta: !0}).then((response) => {
@ -953,14 +1000,18 @@ const app = new Vue({
console.log(library) console.log(library)
} }
} }
downloadChunk() downloadChunk()
}, },
getTotalTime() { getTotalTime() {
try{ try {
if (app.showingPlaylist.relationships.tracks.data.length > 0) { 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); 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."; return app.showingPlaylist.relationships.tracks.data.length + " tracks, " + time + " mins.";
} else return ""} catch(err){return ""} } else return ""
} catch (err) {
return ""
}
}, },
async getLibrarySongs() { async getLibrarySongs() {
var response = await this.mkapi("songs", true, "", {limit: 100}, {includeResponseMeta: !0}) var response = await this.mkapi("songs", true, "", {limit: 100}, {includeResponseMeta: !0})
@ -1017,17 +1068,17 @@ const app = new Vue({
} }
try { try {
var browse = await this.mk.api.groupings("", var browse = await this.mk.api.groupings("",
{ {
platform: "web", platform: "web",
name: "music", name: "music",
"omit[resource:artists]": "relationships", "omit[resource:artists]": "relationships",
"include[albums]": "artists", "include[albums]": "artists",
"include[songs]": "artists", "include[songs]": "artists",
"include[music-videos]": "artists", "include[music-videos]": "artists",
extend: "editorialArtwork,artistUrl", extend: "editorialArtwork,artistUrl",
"fields[artists]": "name,url,artwork,editorialArtwork,genreNames,editorialNotes", "fields[artists]": "name,url,artwork,editorialArtwork,genreNames,editorialNotes",
"art[url]": "f" "art[url]": "f"
}); });
this.browsepage = browse[0]; this.browsepage = browse[0];
console.log(this.browsepage) console.log(this.browsepage)
} catch (e) { } catch (e) {
@ -1072,7 +1123,7 @@ const app = new Vue({
}, },
addToLibrary(id) { addToLibrary(id) {
let self = this let self = this
this.mk.addToLibrary(id).then((data)=>{ this.mk.addToLibrary(id).then((data) => {
self.getLibrarySongsFull(true) self.getLibrarySongsFull(true)
}) })
}, },
@ -1321,7 +1372,7 @@ const app = new Vue({
} }
} else if (app.currentLyricsLine == 0) { } else if (app.currentLyricsLine == 0) {
if (document.querySelector(`.lyric-line[line-index="0"]`) && !document.querySelector(`.lyric-line[line-index="0"]`).classList.contains("active")) if (document.querySelector(`.lyric-line[line-index="0"]`) && !document.querySelector(`.lyric-line[line-index="0"]`).classList.contains("active"))
document.querySelector(`.lyric-line[line-index="0"]`).classList.add("active"); document.querySelector(`.lyric-line[line-index="0"]`).classList.add("active");
} }
break; break;
} }
@ -1437,7 +1488,7 @@ const app = new Vue({
}, },
async searchQuery(term = this.search.term) { async searchQuery(term = this.search.term) {
let self = this let self = this
if(term == "") { if (term == "") {
return return
} }
this.mk.api.search(this.search.term, this.mk.api.search(this.search.term,
@ -1500,25 +1551,28 @@ const app = new Vue({
return newurl return newurl
}, },
getNowPlayingArtworkBG(size = 600) { getNowPlayingArtworkBG(size = 600) {
let interval = setInterval(()=>{ let interval = setInterval(() => {
if (!this.mkReady()) { if (!this.mkReady()) {
return "" return ""
} }
try { try {
if (this.mk.nowPlayingItem && this.mk.nowPlayingItem.id != this.currentTrackID && document.querySelector('.bg-artwork')) { if (this.mk.nowPlayingItem && this.mk.nowPlayingItem.id != this.currentTrackID && document.querySelector('.bg-artwork')) {
if (document.querySelector('.bg-artwork')){ if (document.querySelector('.bg-artwork')) {
clearInterval(interval); 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()
}
} }
this.currentTrackID = this.mk.nowPlayingItem.id; } catch (e) {
document.querySelector('.bg-artwork').style.src = ""; this.setLibraryArtBG()
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); }, 200)
} else {
this.setLibraryArtBG()}
}
} catch (e) {
this.setLibraryArtBG()}},200)
}, },
getNowPlayingArtwork(size = 600) { getNowPlayingArtwork(size = 600) {
let interval = setInterval(() => { let interval = setInterval(() => {
@ -1544,7 +1598,6 @@ const app = new Vue({
}, 200) }, 200)
}, },
async setLibraryArt() { async setLibraryArt() {
@ -1563,9 +1616,10 @@ const app = new Vue({
const data = await this.mk.api.library.song(this.mk.nowPlayingItem.id) const data = await this.mk.api.library.song(this.mk.nowPlayingItem.id)
try { try {
if (data != null && data !== "") { if (data != null && data !== "") {
document.querySelector('.bg-artwork').src = (data["attributes"]["artwork"]["url"]).toString() ; document.querySelector('.bg-artwork').src = (data["attributes"]["artwork"]["url"]).toString();
} }
} catch (e) {} } catch (e) {
}
}, },
quickPlay(query) { quickPlay(query) {
@ -1612,7 +1666,7 @@ const app = new Vue({
// tracks are found in relationship.data // tracks are found in relationship.data
}, },
windowFocus(val) { windowFocus(val) {
if(val) { if (val) {
document.querySelectorAll(".animated-artwork-video").forEach(el => { document.querySelectorAll(".animated-artwork-video").forEach(el => {
el.play() el.play()
}) })

4
resources/cider-ui-tests/style.less
View file

@ -697,8 +697,8 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
font-weight: 400; font-weight: 400;
font-size: 12px; font-size: 12px;
text-align: center; text-align: center;
height: 1.2em; /*height: 1.2em;
line-height: 1.2em; line-height: 1.2em;*/
overflow: hidden; overflow: hidden;
/* animation: marquee 10s linear infinite; */ /* animation: marquee 10s linear infinite; */
} }

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

@ -185,13 +185,13 @@
<button class="usermenu-item"> <button class="usermenu-item">
About About
</button> </button>
<button class="usermenu-item"> <button class="usermenu-item" @click="window.open('https://discord.gg/CezHYdXHEM')">
Discord Discord
</button> </button>
<button class="usermenu-item"> <button class="usermenu-item">
Settings Settings
</button> </button>
<button class="usermenu-item"> <button class="usermenu-item" @click="mk.unauthorize()">
Sign Out Sign Out
</button> </button>
</div> </div>
@ -204,14 +204,13 @@
<button class="app-sidebar-button" style="width:100%" <button class="app-sidebar-button" style="width:100%"
:class="{active: chrome.menuOpened}" :class="{active: chrome.menuOpened}"
@blur="chrome.menuOpened = false" @blur="chrome.menuOpened = false"
@click="chrome.menuOpened = !chrome.menuOpened"> @click="(chrome.userinfo.id) ? chrome.menuOpened = !chrome.menuOpened : false">
<template v-if="chrome.userinfo.attributes">
<img class="sidebar-user-icon" loading="lazy" <img class="sidebar-user-icon" loading="lazy"
:src="getMediaItemArtwork(chrome.userinfo.attributes['artwork'] ? chrome.userinfo.attributes['artwork']['url'] : '', 26)"/> :src="getMediaItemArtwork(chrome.hideUserInfo ? 'http://localhost:9000/assets/logocut.png' : (chrome.userinfo.attributes['artwork'] ? chrome.userinfo.attributes['artwork']['url'] : ''), 26)"/>
</template>
<div class="sidebar-user-text" v-if="!chrome.hideUserInfo"> <div class="sidebar-user-text" v-if="!chrome.hideUserInfo">
<template v-if="chrome.userinfo.attributes"> <template v-if="chrome.userinfo.id">
<div class="fullname text-overflow-elipsis">{{ chrome.userinfo.attributes.name }} <div class="fullname text-overflow-elipsis">{{ chrome.userinfo.attributes.name }}
</div> </div>
<div class="handle-text text-overflow-elipsis">@{{ chrome.userinfo.attributes.handle <div class="handle-text text-overflow-elipsis">@{{ chrome.userinfo.attributes.handle
@ -219,7 +218,9 @@
</div> </div>
</template> </template>
<template v-else> <template v-else>
Sign in <div @click="mk.authorize()">
Sign In
</div>
</template> </template>
</div> </div>
<div class="sidebar-user-text" v-else> <div class="sidebar-user-text" v-else>

12
resources/functions/cider-base.js
View file

@ -1,4 +1,4 @@
const {app, BrowserWindow, ipcMain, protocol} = require("electron") const {app, BrowserWindow, ipcMain, protocol, shell} = require("electron")
const {join, resolve} = require("path") const {join, resolve} = require("path")
const getPort = require("get-port"); const getPort = require("get-port");
const express = require("express"); const express = require("express");
@ -52,6 +52,16 @@ const CiderBase = {
win = new BrowserWindow(options) win = new BrowserWindow(options)
} }
win.webContents.setWindowOpenHandler(({url}) => {
if (url.includes("apple") || url.includes("localhost")) {
return { action: "allow"}
}
shell.openExternal(url).catch(() => {})
return {
action: 'deny'
}
})
// intercept "https://js-cdn.music.apple.com/hls.js/2.141.0/hls.js/hls.js" and redirect to local file "./apple-hls.js" instead // intercept "https://js-cdn.music.apple.com/hls.js/2.141.0/hls.js/hls.js" and redirect to local file "./apple-hls.js" instead
win.webContents.session.webRequest.onBeforeRequest( win.webContents.session.webRequest.onBeforeRequest(