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:
vapormusic 2021-12-18 10:42:56 +07:00
commit bf2b0699d3
7 changed files with 98 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

44
resources/cider-ui/index.js
View file

@ -233,7 +233,8 @@ const app = new Vue({
pageHistory: [],
songstest: false,
hangtimer: null,
selectedMediaItems: []
selectedMediaItems: [],
routes: ["browse", "listen_now", "radio"]
},
watch: {
page: () => {
@ -356,6 +357,9 @@ const app = new Vue({
self.playlists.listing = res.data
})
document.body.removeAttribute("loading")
if(window.location.hash != "") {
this.appRoute(window.location.hash)
}
},
invokeDrawer(panel) {
if(this.drawer.panel == panel && this.drawer.open) {
@ -402,7 +406,7 @@ const app = new Vue({
this.collectionList.response = response
this.collectionList.title = title
this.collectionList.type = type
this.page = "collection-list"
app.appRoute("collection-list")
},
async showArtistView(artist, title, view) {
let response = await this.mk.api.artistView(artist, view, {}, {view: view, includeResponseMeta: !0})
@ -541,6 +545,29 @@ const app = new Vue({
}
return hash;
},
appRoute(route) {
if(route == "" || route == "#" || route == "/") {
return;
}
route = route.replace(/#/g, "")
// if the route contains does not include a / then route to the page directly
if (route.indexOf("/") == -1) {
this.page = route
window.location.hash = this.page
return
}
let hash = route.split("/")
let page = hash[0]
let id = hash[1]
console.log(`page: ${page} id: ${id}`)
this.routeView({
kind: page,
id: id,
attributes: {
playParams: {kind: page, id: id}
}
})
},
routeView(item) {
let self = this
@ -575,12 +602,14 @@ const app = new Vue({
}
document.querySelector("#app-content").scrollTop = 0
}
window.location.hash = `${kind}/${id}`
},
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"});
app.searchAndNavigate(u, target)
},
async searchAndNavigate(item, target) {
let self = this
app.tmpVar = item;
switch (target) {
case "artist":
@ -615,7 +644,7 @@ const app = new Vue({
}
console.log(artistId);
if (artistId != "")
app.getArtistFromID(artistId);
self.appRoute(`artist/${artistId}`)
break;
case "album":
let albumId = '';
@ -642,8 +671,7 @@ const app = new Vue({
}
}
if (albumId != "") {
app.getTypeFromID("album", albumId, false);
app.page = "album_" + albumId;
self.appRoute(`album/${albumId}`)
}
break;
case "recordLabel":
@ -668,7 +696,6 @@ const app = new Vue({
}
if (labelId != "") {
app.showingPlaylist = []
await app.getTypeFromID("recordLabel", labelId, false, {views: 'top-releases,latest-releases,top-artists'});
app.page = "recordLabel_" + labelId;
}
@ -1818,6 +1845,11 @@ app.hangtimer = setTimeout(()=>{
}
}, 10000)
// add event listener for when window.location.hash changes
window.addEventListener("hashchange", function () {
app.appRoute(window.location.hash)
});
document.addEventListener('musickitloaded', function () {
// MusicKit global is now defined
function initMusicKit() {

48
resources/cider-ui/style.less
View file

@ -19,6 +19,7 @@
--keyColor-deepPressed: #ff8a9c;
--keyColor-deepPressed-rgb: 255, 138, 156;
--keyColor-disabled: rgba(250, 88, 106, 0.35);
--navigationBarHeight: 38px;
}
html,
@ -217,7 +218,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
.content-inner {
position: absolute;
top: 0;
top: var(--navigationBarHeight);
left: 0;
padding: 32px;
width: 100%;
@ -1489,6 +1490,46 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
/* Cider */
#navigation-bar {
width: 100%;
background: rgba(0, 0, 0, 0.25);
height: var(--navigationBarHeight);
display: flex;
align-items: center;
padding: 0px 6px;
z-index: 7;
position: sticky;
top: 0;
left: 0;
backdrop-filter: blur(16px) saturate(180%);
box-shadow: 0px 1px 0px rgba(185, 185, 185, 0.08);
mix-blend-mode: hard-light;
.nav-item {
appearance: none;
border: 0px;
height: 32px;
width: 42px;
background: transparent;
padding: 6px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(200, 200, 200, 0.8);
margin: 2px;
border-radius: 3px;
&:hover {
background: var(--selected);
}
&:active {
background: var(--selected-click);
}
> svg {
width: 8px;
pointer-events: none;
}
}
}
.reload-btn {
background: rgb(86 86 86 / 52%);
border-radius: 100%;
@ -1532,7 +1573,11 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
/* Album / Playlist Page */
.playlist-page {
--bgColor: transparent;
padding: 0px;
background: linear-gradient(180deg, var(--bgColor) 32px, var(--bgColor) 59px, transparent 60px, transparent 100%);
top: 0;
padding-top: var(--navigationBarHeight);
.playlist-body {
padding: var(--contentInnerPadding);
@ -1674,6 +1719,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
.artist-page {
padding: 0px;
top:0;
.artist-header {
background: linear-gradient(45deg, var(--keyColor), #0e0e0e);

8
resources/cider-ui/views/main.ejs
View file

@ -174,7 +174,7 @@
</div>
<button class="app-sidebar-item" v-for="item in playlists.listing" :key="item.id"
:href="item.href"
@click='page=`playlist_` + item.id ; showingPlaylist = [];getPlaylistFromID(app.page.substring(9))'>
@click='appRoute(`playlist_` + item.id); showingPlaylist = [];getPlaylistFromID(app.page.substring(9))'>
{{ item.attributes.name }}
</button>
</div>
@ -240,6 +240,10 @@
</div>
</div>
<div id="app-content">
<div id="navigation-bar">
<button class="nav-item" @click="history.back()"><%- include('svg/chevron-left.svg') %></button>
<button class="nav-item" @click="history.forward()"><%- include('svg/chevron-right.svg') %></button>
</div>
<!-- Artist Page -->
<transition name="wpfade">
<template v-if="page == 'artist-page' && artistPage.data.attributes">
@ -456,7 +460,7 @@
<!-- Sidebar Item -->
<script type="text/x-template" id="sidebar-library-item">
<button class="app-sidebar-item"
:class="$parent.getSidebarItemClass(page)" @click="$parent.page = page">
:class="$parent.getSidebarItemClass(page)" @click="app.appRoute(page)">
{{ name }}
</button>
</script>

8
resources/cider-ui/views/pages/cider-playlist.ejs
View file

@ -1,6 +1,6 @@
<script type="text/x-template" id="cider-playlist">
<div class="content-inner playlist-page">
<template v-if="data != [] && data.attributes != null">
<template v-if="data != [] && data.attributes != null">
<div class="content-inner playlist-page" :style="{'--bgColor': (data.attributes.artwork != null && data.attributes.artwork['bgColor'] != null) ? ('#' + data.attributes.artwork.bgColor) : ''}">
<div class="playlist-display row"
:style="{
background: (data.attributes.artwork != null && data.attributes.artwork['bgColor'] != null) ? ('#' + data.attributes.artwork.bgColor) : '',
@ -66,9 +66,9 @@
</div>
<div class="playlist-time">{{app.getTotalTime()}}</div>
</div>
</template>
</div>
</template>
</script>
<script>
Vue.component('cider-playlist', {

1
resources/cider-ui/views/svg/chevron-left.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 320 512"><!-- Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) --><path d="M34.52 239.03L228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 518 B

1
resources/cider-ui/views/svg/chevron-right.svg Normal file
View file

@ -0,0 +1 @@
<svg aria-hidden="true" data-prefix="fas" data-icon="chevron-right" fill="currentColor" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" class="svg-inline--fa fa-chevron-right fa-w-10 fa-7x"><path fill="currentColor" d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z" class=""/></svg>
Side by side

After

Width:  |  Height:  |  Size: 538 B

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

@ -86,7 +86,7 @@ const CiderBase = {
mainWindowState.manage(win);
// IPC stuff (senders)
ipcMain.once("cider-platform", (event) => {
ipcMain.on("cider-platform", (event) => {
event.returnValue = process.platform
})