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

Merge pull request #124 from ciderapp/main

Browse source 
merge
This commit is contained in:
vapormusic 2022-01-13 11:19:04 +07:00 • committed by GitHub
commit 405b49f72f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
19 changed files with 1106 additions and 656 deletions
Download patch file Download diff file Expand all files Collapse all files

9
index.js
View file

@ -22,6 +22,13 @@ const configDefaults = {
"followedArtists": [],
"favoriteItems": []
},
"libraryPrefs": {
"songs": {
"sort": "name",
"sortOrder": "asc",
"size": "normal"
}
},
"audio": {
"quality": "990",
"seamless_audio": true,
@ -55,7 +62,6 @@ const configDefaults = {
"animated_artwork_qualityLevel": 1,
"bg_artwork_rotation": false,
"hw_acceleration": "default", // default, webgpu, disabled
"window_transparency": "disabled",
"videoRes": 720
},
"lyrics": {
@ -73,6 +79,7 @@ const configDefaults = {
},
"advanced": {
"AudioContext": false,
"experiments": []
}
}

1
package.json
View file

@ -24,7 +24,6 @@
"@sentry/electron": "^2.5.4",
"discord-rpc": "^4.0.1",
"ejs": "^3.1.6",
"electron-acrylic-window": "^0.5.11",
"electron-fetch": "^1.7.4",
"electron-log": "^4.4.3",
"electron-notarize": "^1.1.1",

12
src/main/cider-base.js
View file

@ -70,19 +70,7 @@ const CiderBase = {
CiderBase.InitWebServer()
// Create the BrowserWindow
if (process.platform === "darwin" || process.platform === "linux") {
win = new BrowserWindow(options)
} else {
if (app.cfg.get("visual.window_transparency") !== "disabled") {
const { BrowserWindow } = require("electron-acrylic-window");
win = new BrowserWindow(options)
win.setVibrancy("#59202700") // when out of focus, fills with #592027, 00 is aplha values
}
else{
win = new BrowserWindow(options)
}
}
// 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({

1
src/main/lastfm.js
View file

@ -61,7 +61,6 @@ const lfm = {
},
scrobbleSong: async function (attributes) {
console.log((app.cfg.get('lastfm.scrobble_after') / 100))
await new Promise(resolve => setTimeout(resolve, Math.round(attributes.durationInMillis * (app.cfg.get('lastfm.scrobble_after') / 100))));
const currentAttributes = app.media;

BIN
src/renderer/assets/banner.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 35 KiB

1
src/renderer/assets/ko_fi.svg Normal file
View file

@ -0,0 +1 @@
<svg fill="none" height="391" viewBox="0 0 391 391" width="391" xmlns="http://www.w3.org/2000/svg"><path d="m52 102h296v199h-296z" fill="#fff"/><path d="m174 1.09995c-79.2999 8.9-145.5999 65.29995-166.59995 141.70005-15.2 55.6-5.8 114 26.10005 161.7 61.7 92.3 189.4999 114.2 278.7999 47.8 74.8-55.8 99.8-156.6 59.7-241-9.7-20.3001-20.4-35.6001-36.4-52.2001-27.2-27.9-61.3-46.7-99.6-54.99995-18.3-3.900005-43.3-5.1-62-3zm117.8 102.90005c25.2 7 43.6 24.6 50.2 48 7.8 28.1-.1 55.6-21.5 73.9-11.5 9.8-32.5 17.1-49.6 17.1h-7.6l-.8 7.2c-1.9 19.4-11.4 32.5-27 37-2.9.9-25.2 1.2-80 1.2l-75.9999.1-6-2.8c-9.6-4.5-16.9-12.7-19.7-22.2-.4-1.6-.8-36.6-.8-77.8 0-80.7 0-80.6 5.2-82.7 1.4-.5 48.5999-.9 114.2999-.9 109.5-.1 112.2-.1 119.3 1.9z" fill="#579fbf"/><path d="m264 173v34h8.8c15.5 0 25-5.3 31.2-17.4 3.3-6.6 3.5-7.4 3.5-17.5 0-9.6-.3-11.1-2.8-16.3-3-6.2-8.6-11.6-15.2-14.8-3.3-1.6-6.2-2-14.8-2h-10.7z" fill="#579fbf"/><path d="m177.885 147.41c-7.3 2.4-9.6 3.7-15.3 8.4l-4.7 3.9-4.3-3.5c-14.2-11.6-35-12.9-46.7-2.9-5.8 5-8.1996 10.3-8.7996 19.4-.5 8.1 1.2 15.8 4.9996 23.2 1.1 2.2 5.9 8 10.6 13 14.7 15.3 42.4 40.7 44.4 40.7 1.2 0 12.1-10.1 27.3-25.3 22.9-22.8 25.7-25.9 28.6-32.1 4.1-8.7 5-18.8 2.5-26.4-4.9-14.6-23.4-23.4-38.6-18.4z" fill="#ff5f5f"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 1.2 KiB

1
src/renderer/assets/open_collective.svg Normal file
View file

@ -0,0 +1 @@
<svg height="38" viewBox="0 0 38 38" width="38" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="m34.6194245 8.17880011c2.1314244 3.07072649 3.3805755 6.80008579 3.3805755 10.82119989s-1.2491511 7.7504734-3.3805755 10.8211999l-4.9217466-4.9217466c.9664963-1.748848 1.5166078-3.7599079 1.5166078-5.8994533s-.5501115-4.1506053-1.5166078-5.8994533zm-4.7982246-4.79822459-4.9217466 4.92174663c-1.748848-.96649637-3.7599079-1.51660786-5.8994533-1.51660786-6.7457637 0-12.21428571 5.46852201-12.21428571 12.21428571s5.46852201 12.2142857 12.21428571 12.2142857c2.1395454 0 4.1506053-.5501115 5.8994533-1.5166078l4.9217466 4.9217466c-3.0707265 2.1314244-6.8000858 3.3805755-10.8211999 3.3805755-10.49341025 0-19-8.5065898-19-19 0-10.49341025 8.50658975-19 19-19 4.0211141 0 7.7504734 1.24915112 10.8211999 3.38057552z" fill="#7fadf2"/><path d="m34.6194245 8.17880011c2.1314244 3.07072649 3.3805755 6.80008579 3.3805755 10.82119989s-1.2491511 7.7504734-3.3805755 10.8211999l-4.9217466-4.9217466c.9664963-1.748848 1.5166078-3.7599079 1.5166078-5.8994533s-.5501115-4.1506053-1.5166078-5.8994533z" fill="#b8d3f4"/></g></svg>
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB

72
src/renderer/index.js
View file

@ -353,20 +353,8 @@ const app = new Vue({
history.forward()
},
getHTMLStyle() {
switch (this.cfg.visual.window_transparency) {
case "acrylic":
default:
document.querySelector("html").style.background = "";
document.querySelector("body").style.background = "";
document.querySelector("body").classList.remove("notransparency")
break;
case "disabled":
document.querySelector("html").style.background = "#222";
document.querySelector("body").classList.add("notransparency")
// document.querySelector("body").style.background = "#222";
break;
}
},
resetState() {
app.selectedMediaItems = [];
@ -635,6 +623,11 @@ const app = new Vue({
this.$forceUpdate()
}, 500)
},
getAppClasses() {
if(this.cfg.advanced.experiments.includes('compactui')) {
return {compact: true}
}
},
invokeDrawer(panel) {
if (this.drawer.panel == panel && this.drawer.open) {
if (panel == "lyrics") {
@ -991,6 +984,7 @@ const app = new Vue({
return hash;
},
appRoute(route) {
console.log(route)
if (route == "" || route == "#" || route == "/") {
return;
}
@ -1004,12 +998,13 @@ const app = new Vue({
let hash = route.split("/")
let page = hash[0]
let id = hash[1]
console.log(`page: ${page} id: ${id}`)
let isLibrary = hash[2] ?? false
console.log(`page: ${page} id: ${id} isLibrary: ${isLibrary}`)
this.routeView({
kind: page,
id: id,
attributes: {
playParams: {kind: page, id: id}
playParams: {kind: page, id: id, isLibrary: isLibrary}
}
})
},
@ -1036,7 +1031,7 @@ const app = new Vue({
document.querySelector("#app-content").scrollTop = 0
} else if (kind.toString().includes("artist")) {
app.getArtistInfo(id, isLibrary)
window.location.hash = `${kind}/${id}`
window.location.hash = `${kind}/${id}${isLibrary ? "/"+isLibrary : ''}`
document.querySelector("#app-content").scrollTop = 0
} else if (kind.toString().includes("record-label") || kind.toString().includes("curator")) {
@ -1057,7 +1052,7 @@ const app = new Vue({
let params = {extend: "editorialVideo"}
app.page = (kind) + "_" + (id);
app.getTypeFromID((kind), (id), (isLibrary), params);
window.location.hash = `${kind}/${id}`
window.location.hash = `${kind}/${id}${isLibrary ? "/"+isLibrary : ''}`
document.querySelector("#app-content").scrollTop = 0
} else {
app.playMediaItemById((id), (kind), (isLibrary), item.attributes.url ?? '')
@ -1306,13 +1301,14 @@ const app = new Vue({
},
searchLibrarySongs() {
let self = this
let prefs = this.cfg.libraryPrefs.songs
function sortSongs() {
// sort this.library.songs.displayListing by song.attributes[self.library.songs.sorting] in descending or ascending order based on alphabetical order and numeric order
// check if song.attributes[self.library.songs.sorting] is a number and if so, sort by number if not, sort by alphabetical order ignoring case
self.library.songs.displayListing.sort((a, b) => {
let aa = a.attributes[self.library.songs.sorting]
let bb = b.attributes[self.library.songs.sorting]
let aa = a.attributes[prefs.sort]
let bb = b.attributes[prefs.sort]
if (self.library.songs.sorting == "genre") {
aa = a.attributes.genreNames[0]
bb = b.attributes.genreNames[0]
@ -1323,13 +1319,13 @@ const app = new Vue({
if (bb == null) {
bb = ""
}
if (self.library.songs.sortOrder == "asc") {
if (prefs.sortOrder == "asc") {
if (aa.toString().match(/^\d+$/) && bb.toString().match(/^\d+$/)) {
return aa - bb
} else {
return aa.toString().toLowerCase().localeCompare(bb.toString().toLowerCase())
}
} else if (self.library.songs.sortOrder == "desc") {
} else if (prefs.sortOrder == "desc") {
if (aa.toString().match(/^\d+$/) && bb.toString().match(/^\d+$/)) {
return bb - aa
} else {
@ -1551,7 +1547,6 @@ const app = new Vue({
this.library.songs.downloadState = 1
this.library.downloadNotification.show = true
this.library.downloadNotification.message = "Updating library songs..."
function downloadChunk() {
const params = {
"include[library-songs]": "catalog,artists,albums",
@ -3077,6 +3072,41 @@ const app = new Vue({
}
})
Vue.component('animated-number', {
template:"<div style='display: inline-block;'>{{ displayNumber }}</div>",
props: {'number': { default:0 }},
data () {
return {
displayNumber:0,
interval:false
}
},
ready () {
this.displayNumber = this.number ? this.number : 0;
},
watch: {
number () {
clearInterval(this.interval);
if(this.number == this.displayNumber) {
return;
}
this.interval = window.setInterval(() => {
if(this.displayNumber != this.number) {
var change = (this.number - this.displayNumber) / 10;
change = change >= 0 ? Math.ceil(change) : Math.floor(change);
this.displayNumber = this.displayNumber + change;
}
}, 20);
}
}
})
Vue.component('sidebar-library-item', {
template: '#sidebar-library-item',
props: {

59
src/renderer/less/compact.less Normal file
View file

@ -0,0 +1,59 @@
#app.compact {
.content-inner {
zoom: 0.95;
}
.app-sidebar-content {
padding:0px;
.app-sidebar-header-text {
padding: 6px 10px;
margin: 0px;
}
.app-sidebar-item {
display: flex;
width: 100%;
padding: 8px 12px;
font-size: 13px;
margin: 0px;
border: 1px solid transparent;
border-radius: 0px;
transition: unset;
transform: unset;
&:active {
background: var(--selected-click);
}
&::after {
display: none;
}
&.active {
background: var(--keyColor-disabled);
}
}
.sidebar-icon {
width: 14px;
height: 16px;
margin-right: 8px;
}
.folder-body {
border-radius: 0px;
padding: 0px;
}
}
@media (max-width: 951px) {
.content-inner {
zoom: 0.8;
}
}
}
// if page width is less than 951px
@media (max-width: 951px) {
.content-inner {
zoom: 0.8;
}
}

802
src/renderer/style.less
View file

File diff suppressed because it is too large Load diff

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

@ -7,8 +7,9 @@
:data-index="index"
:data-guid="guid"
:data-islibrary="this.item.attributes.playParams.isLibrary ?? false"
:key="item.attributes.playParams.id ?? item.id"
class="cd-mediaitem-list-item"
:class="{'mediaitem-selected': app.select_hasMediaItem(guid)}">
:class="[{'mediaitem-selected': app.select_hasMediaItem(guid)}, addClasses]">
<template v-if="isVisible">
<div class="isLibrary" v-if="showLibraryStatus == true">
<button @click="addToLibrary()"
@ -44,9 +45,7 @@
</template>
</div>
</div>
<div class="content-rating" v-if="item.attributes.contentRating" @dblclick="app.routeView(item)">
{{ item.attributes.contentRating }}
</div>
<div class="explicit-icon" v-if="item.attributes && item.attributes.contentRating == 'explicit'"></div>
<template v-if="showMetaData == true" @dblclick="app.routeView(item)">
<div class="metainfo">
{{ item.attributes.releaseDate ? new Date(item.attributes.releaseDate).toLocaleDateString()
@ -72,7 +71,8 @@
addedToLibrary: false,
guid: this.uuidv4(),
app: this.$root,
displayDuration: true
displayDuration: true,
addClasses: {}
}
},
props: {
@ -84,14 +84,25 @@
'show-meta-data': {type: Boolean, default: false},
'show-duration': {type: Boolean, default: true},
'contextExt': {type: Object, required: false},
'class-list': {type: String, required: false, default: ""},
},
mounted() {
let duration = this.item.attributes.durationInMillis ?? 0
if (duration == 0 || !this.showDuration) {
this.displayDuration = false
}
this.getClasses()
},
methods: {
getClasses() {
if(this.classList) {
this.addClasses = {}
let classList = this.classList.split(' ')
for(let i = 0; i < classList.length; i++) {
this.addClasses[classList[i]] = true
}
}
},
dragStart(evt) {
evt.dataTransfer.setData('text/plain', JSON.stringify({
type: this.item.attributes.playParams.kind ?? this.item.type,

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

@ -85,8 +85,6 @@
var luma = 0.2126 * r + 0.7152 * g + 0.0722 * b; // per ITU-R BT.709
console.log(color)
console.log(luma)
if (luma > 140) {
return "#aaaaaa"
}else{

137
src/renderer/views/main.ejs
View file

@ -30,7 +30,7 @@
</head>
<body oncontextmenu="return false;" loading="1" platform="<%= env.platform %>">
<div id="app">
<div id="app" :class="getAppClasses()">
<transition name="fsModeSwitch">
<div id="app-main" v-show="appMode == 'player'">
<div class="mv-chrome" v-if="chrome.topChromeVisible == false"></div>
@ -48,23 +48,23 @@
<div class="app-chrome-item full-height" v-else>
<div class="app-title"></div>
</div>
<div class="app-chrome-item">
<div class="app-chrome-item display--large">
<button class="playback-button--small shuffle" v-if="mk.shuffleMode == 0"
@click="mk.shuffleMode = 1"></button>
<button class="playback-button--small shuffle active" v-else
@click="mk.shuffleMode = 0"></button>
</div>
<div class="app-chrome-item">
<div class="app-chrome-item display--large">
<button class="playback-button previous" @click="prevButton()"></button>
</div>
<div class="app-chrome-item">
<div class="app-chrome-item display--large">
<button class="playback-button pause" @click="mk.pause()" v-if="mk.isPlaying"></button>
<button class="playback-button play" @click="mk.play()" v-else></button>
</div>
<div class="app-chrome-item">
<div class="app-chrome-item display--large">
<button class="playback-button next" @click="mk.skipToNextItem()"></button>
</div>
<div class="app-chrome-item">
<div class="app-chrome-item display--large">
<button class="playback-button--small repeat" v-if="mk.repeatMode == 0"
@click="mk.repeatMode = 1"></button>
<button class="playback-button--small repeat active" @click="mk.repeatMode = 2"
@ -94,7 +94,8 @@
<div class="song-artist item-navigate" style="display: inline-block;"
@click="getNowPlayingItemDetailed('album')">
<div class="separator" style="display: inline-block;">{{"-"}}</div>
{{(mk.nowPlayingItem["attributes"]["albumName"]) ? (mk.nowPlayingItem["attributes"]["albumName"]) : "" }}
{{(mk.nowPlayingItem["attributes"]["albumName"]) ?
(mk.nowPlayingItem["attributes"]["albumName"]) : "" }}
</div>
</div>
@ -127,7 +128,8 @@
<div class="app-chrome--right">
<div class="app-chrome-item volume display--large">
<div class="app-chrome-item volume-icon"></div>
<input type="range" class="" @wheel="volumeWheel" step="0.01" min="0" max="1" v-model="mk.volume"
<input type="range" class="" @wheel="volumeWheel" step="0.01" min="0" max="1"
v-model="mk.volume"
v-if="typeof mk.volume != 'undefined'">
</div>
<div class="app-chrome-item generic" v-if="false">
@ -181,21 +183,30 @@
<div class="app-sidebar-header-text">
Apple Music
</div>
<sidebar-library-item name="Home" svg-icon="./assets/feather/home.svg" page="home"></sidebar-library-item>
<sidebar-library-item name="Listen Now" svg-icon="./assets/feather/play-circle.svg" page="listen_now"></sidebar-library-item>
<sidebar-library-item name="Browse" svg-icon="./assets/feather/globe.svg" page="browse"></sidebar-library-item>
<sidebar-library-item name="Radio" svg-icon="./assets/feather/radio.svg" page="radio"></sidebar-library-item>
<sidebar-library-item name="Home" svg-icon="./assets/feather/home.svg"
page="home"></sidebar-library-item>
<sidebar-library-item name="Listen Now" svg-icon="./assets/feather/play-circle.svg"
page="listen_now"></sidebar-library-item>
<sidebar-library-item name="Browse" svg-icon="./assets/feather/globe.svg"
page="browse"></sidebar-library-item>
<sidebar-library-item name="Radio" svg-icon="./assets/feather/radio.svg"
page="radio"></sidebar-library-item>
<div class="app-sidebar-header-text">
Library
</div>
<sidebar-library-item name="Recently Added" svg-icon="./assets/feather/plus-circle.svg" page="library-recentlyadded"></sidebar-library-item>
<sidebar-library-item name="Songs" svg-icon="./assets/feather/music.svg" page="library-songs"></sidebar-library-item>
<sidebar-library-item name="Albums" svg-icon="./assets/feather/disc.svg" page="library-albums"></sidebar-library-item>
<sidebar-library-item name="Artists" svg-icon="./assets/feather/user.svg" page="library-artists"></sidebar-library-item>
<sidebar-library-item name="Recently Added" svg-icon="./assets/feather/plus-circle.svg"
page="library-recentlyadded"></sidebar-library-item>
<sidebar-library-item name="Songs" svg-icon="./assets/feather/music.svg"
page="library-songs"></sidebar-library-item>
<sidebar-library-item name="Albums" svg-icon="./assets/feather/disc.svg"
page="library-albums"></sidebar-library-item>
<sidebar-library-item name="Artists" svg-icon="./assets/feather/user.svg"
page="library-artists"></sidebar-library-item>
<div class="app-sidebar-header-text" @contextmenu="playlistHeaderContextMenu">
Playlists
</div>
<sidebar-playlist v-for="item in getPlaylistFolderChildren('p.playlistsroot')" :item="item"></sidebar-playlist>
<sidebar-playlist v-for="item in getPlaylistFolderChildren('p.playlistsroot')"
:item="item"></sidebar-playlist>
</div>
<transition name="wpfade">
<div class="usermenu-container" v-if="chrome.menuOpened">
@ -220,10 +231,14 @@
</div>
</div>
</button>
<button class="usermenu-item" v-if="cfg.advanced.AudioContext && cfg.audio.spatial" @click="modals.spatialProperties = true">
<button class="usermenu-item" v-if="cfg.advanced.AudioContext && cfg.audio.spatial"
@click="modals.spatialProperties = true">
Spatialized Audio Settings
</button>
<button class="usermenu-item">
<button class="usermenu-item" @click="appRoute('apple-account-settings')">
Account Settings
</button>
<button class="usermenu-item" @click="appRoute('about')">
About
</button>
<button class="usermenu-item" @click="window.open('https://discord.gg/applemusic')">
@ -239,9 +254,45 @@
</div>
</transition>
<div class="app-sidebar-footer">
<input type="range" class="web-slider display--small" step="0.01" min="0" max="1"
v-model="mk.volume" @wheel="volumeWheel"
<div class="app-playback-controls display--small" v-if="mkReady()"
@contextmenu="nowPlayingContextMenu">
<div class="control-buttons">
<div class="app-chrome-item">
<button class="playback-button--small shuffle" v-if="mk.shuffleMode == 0"
@click="mk.shuffleMode = 1"></button>
<button class="playback-button--small shuffle active" v-else
@click="mk.shuffleMode = 0"></button>
</div>
<div class="app-chrome-item">
<button class="playback-button previous" @click="prevButton()"></button>
</div>
<div class="app-chrome-item">
<button class="playback-button pause" @click="mk.pause()"
v-if="mk.isPlaying"></button>
<button class="playback-button play" @click="mk.play()" v-else></button>
</div>
<div class="app-chrome-item">
<button class="playback-button next" @click="mk.skipToNextItem()"></button>
</div>
<div class="app-chrome-item">
<button class="playback-button--small repeat" v-if="mk.repeatMode == 0"
@click="mk.repeatMode = 1"></button>
<button class="playback-button--small repeat active" @click="mk.repeatMode = 2"
v-else-if="mk.repeatMode == 1"></button>
<button class="playback-button--small repeat repeatOne" @click="mk.repeatMode = 0"
v-else-if="mk.repeatMode == 2"></button>
</div>
</div>
<div class="app-chrome-item volume">
<div class="app-chrome-item volume-icon"></div>
<div class="input-container">
<input type="range" class="" @wheel="volumeWheel" step="0.01" min="0" max="1"
v-model="mk.volume"
v-if="typeof mk.volume != 'undefined'">
</div>
</div>
</div>
<button class="app-sidebar-button" style="width:100%"
:class="{active: chrome.menuOpened}"
@blur="setTimeout(()=>{chrome.menuOpened = false}, 100)"
@ -269,13 +320,9 @@
</div>
</button>
</div>
<div class="app-sidebar-notification" v-if="library.downloadNotification.show">
<div>{{ library.downloadNotification.message }}</div>
<div>{{ library.downloadNotification.progress }} / {{ library.downloadNotification.total }}
</div>
<div style="width: 100%">
<progress style="width: 80%;" :value="library.downloadNotification.progress"
:max="library.downloadNotification.total"></progress>
<div class="app-sidebar-notification libraryNotification" v-if="library.downloadNotification.show">
<div class="message">{{ library.downloadNotification.message }} ({{
library.downloadNotification.progress }} / {{ library.downloadNotification.total }})
</div>
</div>
</div>
@ -285,6 +332,18 @@
<button class="nav-item"
@click="navigateForward()"><%- include('svg/chevron-right.svg') %></button>
</div>
<!-- Apple Setings Page -->
<transition name="wpfade">
<template v-if="page == 'apple-account-settings'">
<apple-account-settings></apple-account-settings>
</template>
</transition>
<!-- About -->
<transition name="wpfade">
<template v-if="page == 'about'">
<about-page></about-page>
</template>
</transition>
<!-- Artist Page -->
<transition name="wpfade">
<template v-if="page == 'artist-page' && artistPage.data.attributes">
@ -427,7 +486,9 @@
</transition>
<!-- Library - Songs -->
<transition name="wpfade" v-on:enter="getLibrarySongsFull()">
<%- include('pages/library-songs') %>
<template v-if="page == 'library-songs'">
<cider-library-songs :data="library.songs"></cider-library-songs>
</template>
</transition>
<!-- Library - Albums -->
<transition name="wpfade" v-on:enter="getLibraryAlbumsFull(null, 1); searchLibraryAlbums(1);">
@ -466,7 +527,9 @@
<lyrics-view v-if="drawer.panel == 'lyrics'" :time="lyriccurrenttime" :lyrics="lyrics"
:richlyrics="richlyrics"></lyrics-view>
<div v-if="drawer.panel == 'lyrics'" class="lyric-footer">
<button class="md-btn" @click="modularUITest(!fullscreenLyrics)">{{fullscreenLyrics ? "Default View":'Fullscreen View'}}</button>
<button class="md-btn" @click="modularUITest(!fullscreenLyrics)">{{fullscreenLyrics ?
"Default View":'Fullscreen View'}}
</button>
</div>
<cider-queue ref="queue" v-if="drawer.panel == 'queue'"></cider-queue>
</div>
@ -476,11 +539,13 @@
</transition>
<transition name="fsModeSwitch">
<div class="fullscreen-view-container" v-if="appMode == 'fullscreen'">
<fullscreen-view :image="currentArtUrl.replace('50x50', '600x600')" :time="lyriccurrenttime" :lyrics="lyrics" :richlyrics="richlyrics"></fullscreen-view>
<fullscreen-view :image="currentArtUrl.replace('50x50', '600x600')" :time="lyriccurrenttime"
:lyrics="lyrics" :richlyrics="richlyrics"></fullscreen-view>
</div>
</transition>
<transition name="wpfade">
<div class="bg-artwork-container" :class="{noanimation: (!cfg.visual.bg_artwork_rotation || !animateBackground)}">
<div class="bg-artwork-container"
:class="{noanimation: (!cfg.visual.bg_artwork_rotation || !animateBackground)}">
<img @load="chrome.artworkReady = true" class="bg-artwork a "
>
<img class="bg-artwork b"
@ -528,6 +593,11 @@
</div>
</div>
<!-- Apple Settings Page -->
<%- include('pages/apple-account-settings') %>
<!-- Library - Songs -->
<%- include('pages/library-songs') %>
<!-- Media Item Artwork-->
<%- include("components/mediaitem-artwork"); %>
<!-- Browse -->
@ -563,6 +633,9 @@
<!-- Search -->
<%- include('pages/search') %>
<!-- About -->
<%- include('pages/about') %>
<script type="text/x-template" id="am-musiccovershelf">
<h1>{{ component.attributes.title.stringForDisplay }}</h1>
</script>

110
src/renderer/views/pages/about.ejs
View file

@ -1,19 +1,107 @@
Major thanks to the Cider Development Team and all of our contributors.
<script type="text/x-template" id="about-page">
<div class="content-inner about-page">
<div class="row">
<div class="col">
<img src="assets/banner.png" alt="Cider Logo" style="display:block;margin:0 auto;width: 500px;">
<p style="text-align: center">Major thanks to the Cider Collective Team and all of our contributors.</p>
<p>"Apple Music" - Copyright © 2021 <a href="https://www.apple.com/" class="dt-footer__link"
<p style="text-align: center">"Apple Music" - Copyright © 2021 <a href="https://www.apple.com/" class="dt-footer__link"
target="_blank"
rel="noopener" data-dt-link-to-exclude="">Apple Inc.</a>
All Rights
Reserved.</p>
<hr>
<h3>Sponsor this project</h3>
<button onclick="window.open('https://ko-fi.com/cryptofyre')" class="md-btn sponsorBtn"><img src="./assets/ko_fi.svg"/>Ko-fi</button>
<button onclick="window.open('https://opencollective.com/ciderapp')" class="md-btn sponsorBtn"><img src="./assets/open_collective.svg"/>Open Collective</button>
cryptofyre - Developer - https://github.com/cryptofyre
Core - Developer - https://github.com/coredev-uk
Quacksire - Developer - https://github.com/child-duckling
booploops - Developer - https://github.com/booploops
vapormusic - Developer - https://github.com/vapormusic
Void - Social Communications Team - https://twitter.com/MoonyVoid
NoseySG - Social Communications Team - https://twitter.com/noah_grose
<img class="md-contributors"
</div>
<div class="col">
<div class="row">
<div class="col">
<h3>Cider Team</h3>
<button class="md-btn teamBtn" @click="window.open(member.link)" v-for="member in team">
<img :src="member.avatar"/>
<div class="row" style="width:100%;">
<div class="col" style="text-align: left">
{{ member.name }}
</div>
<div class="col-auto">
<b>{{ member.role }}</b>
</div>
</div>
</button>
</div>
</div>
<div class="row">
<div class="col">
<h3></h3>
<h3>Contributors</h3>
<img class="md-contributors"
style="cursor:pointer;width:100%;"
onclick="window.open('https://github.com/ciderapp/Cider/graphs/contributors')"
src="https://contrib.rocks/image?repo=ciderapp/Cider"/>
</div>
</div>
</div>
</div>
</div>
</script>
<script>
Vue.component('about-page', {
template: '#about-page',
data: function () {
return {
window: window,
team: [
{
name: 'cryptofyre',
link: 'https://github.com/cryptofyre',
role: 'Developer',
avatar: 'https://avatars.githubusercontent.com/u/33162551?v=4'
},
{
name: 'Core',
link: 'https://github.com/coredev-uk',
role: 'Developer',
avatar: 'https://avatars.githubusercontent.com/u/64542347?v=4'
},
{
name: 'Quacksire',
link: 'https://github.com/quacksire',
role: 'Developer',
avatar: 'https://avatars.githubusercontent.com/u/19170969?v=4'
},
{
name: 'booploops',
link: 'https://github.com/booploops',
role: 'Developer',
avatar: 'https://avatars.githubusercontent.com/u/49113086?v=4'
},
{
name: 'vapormusic',
link: 'https://github.com/vapormusic',
role: 'Developer',
avatar: 'https://avatars.githubusercontent.com/u/27716185?v=4'
},
{
name: 'Void',
link: 'https://twitter.com/MoonyVoid',
role: 'Social Team',
avatar: 'https://pbs.twimg.com/profile_images/1226463559472816129/8LScNYED_400x400.jpg'
},
{
name: 'NoseySG',
link: 'https://twitter.com/noah_grose',
role: 'Social Team',
avatar: 'https://pbs.twimg.com/profile_images/1422541289837535239/qg-aaoP9_400x400.jpg'
}
]
}
},
methods: {
}
});
</script>

16
src/renderer/views/pages/apple-account-settings.ejs Normal file
View file

@ -0,0 +1,16 @@
<script type="text/x-template" id="apple-account-settings">
<div style="display:flex;width:100%;height:100%;padding-top: var(--navigationBarHeight);position:absolute;top:0;left:0;">
<webview id="foo" src="https://music.apple.com/includes/commerce/account/settings?product=music&isFullscreen=true&isModal=false" style="display:inline-flex; width:100%;"></webview>
</div>
</script>
<script>
Vue.component('apple-account-settings', {
template: '#apple-account-settings',
mounted() {
},
methods: {
}
});
</script>

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

@ -66,10 +66,14 @@
@click="app.mk.shuffleMode = 1;play()">
Shuffle
</button>
<button class="wr-btn" style="min-width: 120px;" v-if="inLibrary!=null"
@click="(!inLibrary) ? addToLibrary(data.attributes.playParams.id.toString()) : removeFromLibrary(data.attributes.playParams.id.toString())">
<button class="wr-btn" style="min-width: 120px;" v-if="inLibrary!=null && confirm!=true"
@click="confirmButton()">
{{ (!inLibrary) ? "Add to Library" : "Remove from Library" }}
</button>
<button class="wr-btn" style="min-width: 120px;" v-if="confirm==true"
@click="(!inLibrary) ? addToLibrary(data.attributes.playParams.id.toString()) : removeFromLibrary(data.attributes.playParams.id.toString()) ">
Confirm?
</button>
</div>
</div>
</div>
@ -109,16 +113,19 @@
</div>
</script>
<script>
Vue.component('cider-playlist', {
template: "#cider-playlist",
props: ["data"],
data: function () {
return {
editorialNotesExpanded: false,
drag: false,
nameEditing: false,
inLibrary: null,
confirm: false,
app: this.$root,
itemBadges: [],
badgesRequested: false
@ -161,6 +168,13 @@
}
})
},
confirmButton() {
// Return button to normal state after 3 seconds
this.confirm = true
setTimeout(() => this.confirm = false, 3000);
},
getDescription(data) {
console.log(data.attributes)
if (data.attributes.editorialNotes) {
@ -212,6 +226,7 @@
addToLibrary(id) {
app.mk.addToLibrary(id)
this.inLibrary = true
this.confirm = false
},
async removeFromLibrary(id) {
var params = { "fields[somgs]": "inLibrary", "fields[albums]": "inLibrary", "relate": "library" }
@ -224,6 +239,7 @@
var truekind = (!kind.endsWith("s")) ? (kind + "s") : kind;
app.mk.api.library.remove({ [truekind]: id })
this.inLibrary = false
this.confirm = false
},
editPlaylistName() {
if (this.data.attributes.canEdit && this.data.type == "library-playlists") {

62
src/renderer/views/pages/library-songs.ejs
View file

@ -1,13 +1,8 @@
<template v-if="page == 'library-songs'">
<div class="content-inner">
<div class="row">
<div class="col" style="padding:0;">
<h1 class="header-text">Songs</h1>
</div>
<div class="col-auto">
<button v-if="library.songs.downloadState == 2" @click="getLibrarySongsFull(true)" class="reload-btn"><%- include('../svg/redo.svg') %></button>
</div>
</div>
<script type="text/x-template" id="cider-library-songs">
<div class="content-inner library-page">
<div class="library-header">
<div class="row">
<div class="col" style="padding:0;">
<div class="search-input-container" style="width:100%;margin: 16px 0;">
@ -16,31 +11,70 @@
style="width:100%;"
spellcheck="false"
placeholder="Search..."
@input="searchLibrarySongs"
@input="$root.searchLibrarySongs"
v-model="library.songs.search" class="search-input">
</div>
</div>
<div class="col-auto flex-center">
<div class="row">
<div class="col">
<select class="md-select" v-model="library.songs.sorting" @change="searchLibrarySongs()">
<select class="md-select" v-model="prefs.sort" @change="$root.searchLibrarySongs()">
<optgroup label="Sort By">
<option v-for="(sort, index) in library.songs.sortingOptions" :value="index">{{ sort }}</option>
</optgroup>
</select>
</div>
<div class="col">
<select class="md-select" v-model="library.songs.sortOrder" @change="searchLibrarySongs()">
<select class="md-select" v-model="prefs.sortOrder" @change="$root.searchLibrarySongs()">
<optgroup label="Sort Order">
<option value="asc">Ascending</option>
<option value="desc">Descending</option>
</optgroup>
</select>
</div>
<div class="col">
<select class="md-select" v-model="prefs.size" @change="$root.searchLibrarySongs()">
<optgroup label="Size">
<option value="normal">Normal</option>
<option value="compact">Compact</option>
</optgroup>
</select>
</div>
</div>
</div>
<div class="col-auto flex-center">
<button v-if="library.songs.downloadState == 2" @click="$root.getLibrarySongsFull(true)" class="reload-btn"><%- include('../svg/redo.svg') %></button>
<button v-else class="reload-btn" style="opacity: 0.8;pointer-events: none">
<div class="spinner"></div>
</button>
</div>
</div>
</div>
<div v-if="library.songs.downloadState == 3">Library contains no songs.</div>
<div class="well" :key="1" v-if="prefs.size == 'compact'">
<mediaitem-list-item class-list="compact" :item="item" :parent="'librarysongs'" :index="index" :show-meta-data="true" :show-library-status="false" v-for="(item, index) in library.songs.displayListing"></mediaitem-list-item>
</div>
<div class="well" :key="2" v-else>
<mediaitem-list-item :item="item" :parent="'librarysongs'" :index="index" :show-meta-data="true" :show-library-status="false" v-for="(item, index) in library.songs.displayListing"></mediaitem-list-item>
</div>
</template>
</div>
</script>
<script>
Vue.component('cider-library-songs', {
template: '#cider-library-songs',
data: function () {
return {
library: this.$root.library,
mediaItemSize: "compact",
prefs: this.$root.cfg.libraryPrefs.songs
}
},
methods: {
sayHello: function () {
alert('Hello world!');
}
}
});
</script>

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

@ -90,18 +90,6 @@
<input type="checkbox" switch v-model="app.cfg.visual.bg_artwork_rotation"/>
</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">
Hardware Acceleration<br>
@ -447,7 +435,7 @@
<div class="md-option-segment">
LastFM Scrobbling
</div>
<div class="md-option-segment md-option-segment_auto">
<div class="md-option-segment md-btn md-option-segment_auto">
<label class="list-button list-element" id="lfmConnect" ref="lfmConnect"
onclick="app.LastFMAuthenticate()">Connect</label>
</div>
@ -476,6 +464,20 @@
<input type="checkbox" v-model="app.cfg.lastfm.enabledRemoveFeaturingArtists" switch/>
</div>
</div>
<div class="md-option-header">
<span>Experimental</span>
</div>
<div class="md-option-line">
<div class="md-option-segment">
Compact UI
</div>
<div class="md-option-segment md-option-segment_auto" >
<button class="md-btn" :class="{'md-btn-primary': app.cfg.advanced.experiments.includes('compactui')}" @click="app.cfg.advanced.experiments.includes('compactui') ? removeExperiment('compactui') : addExperiment('compactui')">
{{app.cfg.advanced.experiments.includes('compactui') ? 'Enabled' : 'Disabled'}}
</button>
</div>
</div>
<div style="opacity: 0.5; pointer-events: none">
<div class="md-option-header">
<span>Unfinished / Non Functional</span>
</div>
@ -552,6 +554,7 @@
</div>
</div>
</div>
</div>
</script>
<script>
@ -573,6 +576,12 @@
}
},
methods: {
addExperiment(flag) {
app.cfg.advanced.experiments.push(flag);
},
removeExperiment(flag) {
app.cfg.advanced.experiments.splice(app.cfg.advanced.experiments.indexOf(flag), 1);
},
toggleAudioContext: function(){
if (app.cfg.advanced.AudioContext){
CiderAudio.init();

13
src/renderer/views/svg/in-library.svg Normal file
View file

@ -0,0 +1,13 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 214 214" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<g transform="matrix(1,0,0,1,-79.4309,9.53659)">
<path d="M250.163,76.146C250.163,52.589 231.037,33.463 207.48,33.463L122.114,33.463C98.556,33.463 79.431,52.589 79.431,76.146L79.431,161.512C79.431,185.07 98.556,204.195 122.114,204.195L207.48,204.195C231.037,204.195 250.163,185.07 250.163,161.512L250.163,76.146ZM235.163,83.646C235.163,64.228 219.398,48.463 199.98,48.463L129.614,48.463C110.196,48.463 94.431,64.228 94.431,83.646L94.431,154.012C94.431,173.43 110.196,189.195 129.614,189.195L199.98,189.195C219.398,189.195 235.163,173.43 235.163,154.012L235.163,83.646Z" style="fill:currentColor;"/>
</g>
<g transform="matrix(0.906286,0,0,0.906286,-20.9871,-22.3274)">
<path d="M250.163,76.146C250.163,52.589 231.037,33.463 207.48,33.463L122.114,33.463C98.556,33.463 79.431,52.589 79.431,76.146L79.431,161.512C79.431,185.07 98.556,204.195 122.114,204.195L207.48,204.195C231.037,204.195 250.163,185.07 250.163,161.512L250.163,76.146Z" style="fill:white;"/>
</g>
<g transform="matrix(0.333526,0,0,0.333526,43.0167,0)">
<path d="M511.8,130.7C511.8,115 510.5,99.3 506.7,84C500,56 484,34.7 460.2,19C448,11 434.5,6.1 420.1,3.5C409.1,1.5 397.9,0.6 386.8,0.3L384.1,0L127.6,0C124.4,0.3 121.1,0.4 117.9,0.6C102,1.5 86.2,3.2 71.1,9.2C42.7,20.4 22.1,40.1 10.1,68.4C5.9,78 3.8,88.2 2.3,98.5C1.1,106.8 0.4,115.3 0.1,123.7L-0.1,125.7L-0.1,386.4C0.1,389.4 0.2,392.4 0.4,395.4C1.5,412.8 3.7,430.1 11.1,446.1C24.9,476.4 48.2,496.3 80.1,505.8C89,508.6 98.3,509.8 107.7,510.6C119.5,511.8 131.4,511.9 143.2,511.9L378.5,511.9C389.7,511.9 400.8,511.2 412,509.7C429.6,507.5 446.1,502.3 461,492.5C478.9,480.7 492.4,465 501.1,445.4C505.1,436.4 507.3,426.8 509,417.2C511.4,402.8 511.9,388.2 511.9,373.6C511.8,292.6 511.9,211.6 511.8,130.6L511.8,130.7ZM374.8,93.4L374.8,337.6C374.8,346.5 373.6,355.3 369.6,363.3C363.4,375.9 353.4,383.8 340,387.6C332.6,389.8 324.9,390.9 317.2,391.3C297,392.3 279.4,378.6 275.8,358.6C272.7,342.1 280.6,323.9 298,315.4C304.8,312.1 312.2,310.1 319.7,308.6C327.8,306.9 335.9,305.3 343.9,303.4C349.8,302.1 353.6,298.5 354.8,292.4L355.2,288.3L355.2,172.1L354.6,168.2C353.8,165 351.4,163 348.1,163.2C344.7,163.4 341.4,163.9 338,164.6C321.7,167.8 305.5,171 289.3,174.3L210.4,190.2L209.3,190.5C203.4,192.2 201.3,194.8 201,201L201,203.7C200.9,259.2 201,314.7 200.9,370.2C200.9,379.2 199.9,388 196.3,396.4C190.4,410.1 179.9,418.7 165.7,422.7C158.2,424.9 150.5,426.1 142.7,426.4C122.3,427.2 105.3,413.6 101.8,393.5C98.8,376.2 106.7,357.5 126.4,349.2C134.1,346 142,344.3 150.1,342.6C156.2,341.4 162.4,340.1 168.4,338.9C176.6,337.2 180.8,332 181.2,323.7L181.2,131C181.2,128.3 181.5,125.7 182.1,123.1C183.6,117 187.9,113.5 193.8,112.1C199.2,110.7 204.8,109.7 210.3,108.5C226,105.3 241.5,102.2 257.2,99.1L305.6,89.3C319.9,86.5 334.2,83.6 348.5,80.7C353.2,79.8 357.9,78.8 362.7,78.4C369.3,77.8 373.9,82 374.5,88.7C374.7,90.3 374.8,91.9 374.8,93.4Z" style="fill:currentColor;fill-rule:nonzero;"/>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 3.3 KiB