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

1
package.json
View file

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

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

@ -70,19 +70,7 @@ const CiderBase = {
CiderBase.InitWebServer() CiderBase.InitWebServer()
// Create the BrowserWindow // Create the BrowserWindow
if (process.platform === "darwin" || process.platform === "linux") { win = new BrowserWindow(options)
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 // 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({

1
src/main/lastfm.js
View file

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

78
src/renderer/index.js
View file

@ -353,20 +353,8 @@ const app = new Vue({
history.forward() history.forward()
}, },
getHTMLStyle() { getHTMLStyle() {
switch (this.cfg.visual.window_transparency) { document.querySelector("html").style.background = "#222";
case "acrylic": document.querySelector("body").classList.add("notransparency")
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() { resetState() {
app.selectedMediaItems = []; app.selectedMediaItems = [];
@ -635,6 +623,11 @@ const app = new Vue({
this.$forceUpdate() this.$forceUpdate()
}, 500) }, 500)
}, },
getAppClasses() {
if(this.cfg.advanced.experiments.includes('compactui')) {
return {compact: true}
}
},
invokeDrawer(panel) { invokeDrawer(panel) {
if (this.drawer.panel == panel && this.drawer.open) { if (this.drawer.panel == panel && this.drawer.open) {
if (panel == "lyrics") { if (panel == "lyrics") {
@ -991,6 +984,7 @@ const app = new Vue({
return hash; return hash;
}, },
appRoute(route) { appRoute(route) {
console.log(route)
if (route == "" || route == "#" || route == "/") { if (route == "" || route == "#" || route == "/") {
return; return;
} }
@ -1004,12 +998,13 @@ const app = new Vue({
let hash = route.split("/") let hash = route.split("/")
let page = hash[0] let page = hash[0]
let id = hash[1] 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({ this.routeView({
kind: page, kind: page,
id: id, id: id,
attributes: { attributes: {
playParams: {kind: page, id: id} playParams: {kind: page, id: id, isLibrary: isLibrary}
} }
}) })
}, },
@ -1035,8 +1030,8 @@ const app = new Vue({
window.location.hash = `${kind}/${id}` window.location.hash = `${kind}/${id}`
document.querySelector("#app-content").scrollTop = 0 document.querySelector("#app-content").scrollTop = 0
} else if (kind.toString().includes("artist")) { } else if (kind.toString().includes("artist")) {
app.getArtistInfo(id, isLibrary) app.getArtistInfo(id, isLibrary)
window.location.hash = `${kind}/${id}` window.location.hash = `${kind}/${id}${isLibrary ? "/"+isLibrary : ''}`
document.querySelector("#app-content").scrollTop = 0 document.querySelector("#app-content").scrollTop = 0
} else if (kind.toString().includes("record-label") || kind.toString().includes("curator")) { } else if (kind.toString().includes("record-label") || kind.toString().includes("curator")) {
@ -1057,7 +1052,7 @@ const app = new Vue({
let params = {extend: "editorialVideo"} let params = {extend: "editorialVideo"}
app.page = (kind) + "_" + (id); app.page = (kind) + "_" + (id);
app.getTypeFromID((kind), (id), (isLibrary), params); app.getTypeFromID((kind), (id), (isLibrary), params);
window.location.hash = `${kind}/${id}` window.location.hash = `${kind}/${id}${isLibrary ? "/"+isLibrary : ''}`
document.querySelector("#app-content").scrollTop = 0 document.querySelector("#app-content").scrollTop = 0
} else { } else {
app.playMediaItemById((id), (kind), (isLibrary), item.attributes.url ?? '') app.playMediaItemById((id), (kind), (isLibrary), item.attributes.url ?? '')
@ -1306,13 +1301,14 @@ const app = new Vue({
}, },
searchLibrarySongs() { searchLibrarySongs() {
let self = this let self = this
let prefs = this.cfg.libraryPrefs.songs
function sortSongs() { 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 // 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 // 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) => { self.library.songs.displayListing.sort((a, b) => {
let aa = a.attributes[self.library.songs.sorting] let aa = a.attributes[prefs.sort]
let bb = b.attributes[self.library.songs.sorting] let bb = b.attributes[prefs.sort]
if (self.library.songs.sorting == "genre") { if (self.library.songs.sorting == "genre") {
aa = a.attributes.genreNames[0] aa = a.attributes.genreNames[0]
bb = b.attributes.genreNames[0] bb = b.attributes.genreNames[0]
@ -1323,13 +1319,13 @@ const app = new Vue({
if (bb == null) { if (bb == null) {
bb = "" bb = ""
} }
if (self.library.songs.sortOrder == "asc") { if (prefs.sortOrder == "asc") {
if (aa.toString().match(/^\d+$/) && bb.toString().match(/^\d+$/)) { if (aa.toString().match(/^\d+$/) && bb.toString().match(/^\d+$/)) {
return aa - bb return aa - bb
} else { } else {
return aa.toString().toLowerCase().localeCompare(bb.toString().toLowerCase()) 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+$/)) { if (aa.toString().match(/^\d+$/) && bb.toString().match(/^\d+$/)) {
return bb - aa return bb - aa
} else { } else {
@ -1551,7 +1547,6 @@ const app = new Vue({
this.library.songs.downloadState = 1 this.library.songs.downloadState = 1
this.library.downloadNotification.show = true this.library.downloadNotification.show = true
this.library.downloadNotification.message = "Updating library songs..." this.library.downloadNotification.message = "Updating library songs..."
function downloadChunk() { function downloadChunk() {
const params = { const params = {
"include[library-songs]": "catalog,artists,albums", "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', { Vue.component('sidebar-library-item', {
template: '#sidebar-library-item', template: '#sidebar-library-item',
props: { 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;
}
}

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

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

@ -30,7 +30,7 @@
</head> </head>
<body oncontextmenu="return false;" loading="1" platform="<%= env.platform %>"> <body oncontextmenu="return false;" loading="1" platform="<%= env.platform %>">
<div id="app"> <div id="app" :class="getAppClasses()">
<transition name="fsModeSwitch"> <transition name="fsModeSwitch">
<div id="app-main" v-show="appMode == 'player'"> <div id="app-main" v-show="appMode == 'player'">
<div class="mv-chrome" v-if="chrome.topChromeVisible == false"></div> <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-chrome-item full-height" v-else>
<div class="app-title"></div> <div class="app-title"></div>
</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" <button class="playback-button--small shuffle" v-if="mk.shuffleMode == 0"
@click="mk.shuffleMode = 1"></button> @click="mk.shuffleMode = 1"></button>
<button class="playback-button--small shuffle active" v-else <button class="playback-button--small shuffle active" v-else
@click="mk.shuffleMode = 0"></button> @click="mk.shuffleMode = 0"></button>
</div> </div>
<div class="app-chrome-item"> <div class="app-chrome-item display--large">
<button class="playback-button previous" @click="prevButton()"></button> <button class="playback-button previous" @click="prevButton()"></button>
</div> </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 pause" @click="mk.pause()" v-if="mk.isPlaying"></button>
<button class="playback-button play" @click="mk.play()" v-else></button> <button class="playback-button play" @click="mk.play()" v-else></button>
</div> </div>
<div class="app-chrome-item"> <div class="app-chrome-item display--large">
<button class="playback-button next" @click="mk.skipToNextItem()"></button> <button class="playback-button next" @click="mk.skipToNextItem()"></button>
</div> </div>
<div class="app-chrome-item"> <div class="app-chrome-item display--large">
<button class="playback-button--small repeat" v-if="mk.repeatMode == 0" <button class="playback-button--small repeat" v-if="mk.repeatMode == 0"
@click="mk.repeatMode = 1"></button> @click="mk.repeatMode = 1"></button>
<button class="playback-button--small repeat active" @click="mk.repeatMode = 2" <button class="playback-button--small repeat active" @click="mk.repeatMode = 2"
@ -92,9 +92,10 @@
{{ mk.nowPlayingItem["attributes"]["artistName"] }} {{ mk.nowPlayingItem["attributes"]["artistName"] }}
</div> </div>
<div class="song-artist item-navigate" style="display: inline-block;" <div class="song-artist item-navigate" style="display: inline-block;"
@click="getNowPlayingItemDetailed('album')"> @click="getNowPlayingItemDetailed('album')">
<div class="separator" style="display: inline-block;">{{"-"}}</div> <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>
</div> </div>
@ -127,7 +128,8 @@
<div class="app-chrome--right"> <div class="app-chrome--right">
<div class="app-chrome-item volume display--large"> <div class="app-chrome-item volume display--large">
<div class="app-chrome-item volume-icon"></div> <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'"> v-if="typeof mk.volume != 'undefined'">
</div> </div>
<div class="app-chrome-item generic" v-if="false"> <div class="app-chrome-item generic" v-if="false">
@ -181,21 +183,30 @@
<div class="app-sidebar-header-text"> <div class="app-sidebar-header-text">
Apple Music Apple Music
</div> </div>
<sidebar-library-item name="Home" svg-icon="./assets/feather/home.svg" page="home"></sidebar-library-item> <sidebar-library-item name="Home" svg-icon="./assets/feather/home.svg"
<sidebar-library-item name="Listen Now" svg-icon="./assets/feather/play-circle.svg" page="listen_now"></sidebar-library-item> page="home"></sidebar-library-item>
<sidebar-library-item name="Browse" svg-icon="./assets/feather/globe.svg" page="browse"></sidebar-library-item> <sidebar-library-item name="Listen Now" svg-icon="./assets/feather/play-circle.svg"
<sidebar-library-item name="Radio" svg-icon="./assets/feather/radio.svg" page="radio"></sidebar-library-item> 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"> <div class="app-sidebar-header-text">
Library Library
</div> </div>
<sidebar-library-item name="Recently Added" svg-icon="./assets/feather/plus-circle.svg" page="library-recentlyadded"></sidebar-library-item> <sidebar-library-item name="Recently Added" svg-icon="./assets/feather/plus-circle.svg"
<sidebar-library-item name="Songs" svg-icon="./assets/feather/music.svg" page="library-songs"></sidebar-library-item> page="library-recentlyadded"></sidebar-library-item>
<sidebar-library-item name="Albums" svg-icon="./assets/feather/disc.svg" page="library-albums"></sidebar-library-item> <sidebar-library-item name="Songs" svg-icon="./assets/feather/music.svg"
<sidebar-library-item name="Artists" svg-icon="./assets/feather/user.svg" page="library-artists"></sidebar-library-item> 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"> <div class="app-sidebar-header-text" @contextmenu="playlistHeaderContextMenu">
Playlists Playlists
</div> </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> </div>
<transition name="wpfade"> <transition name="wpfade">
<div class="usermenu-container" v-if="chrome.menuOpened"> <div class="usermenu-container" v-if="chrome.menuOpened">
@ -220,10 +231,14 @@
</div> </div>
</div> </div>
</button> </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 Spatialized Audio Settings
</button> </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 About
</button> </button>
<button class="usermenu-item" @click="window.open('https://discord.gg/applemusic')"> <button class="usermenu-item" @click="window.open('https://discord.gg/applemusic')">
@ -239,9 +254,45 @@
</div> </div>
</transition> </transition>
<div class="app-sidebar-footer"> <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()"
v-if="typeof mk.volume != 'undefined'"> @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%" <button class="app-sidebar-button" style="width:100%"
:class="{active: chrome.menuOpened}" :class="{active: chrome.menuOpened}"
@blur="setTimeout(()=>{chrome.menuOpened = false}, 100)" @blur="setTimeout(()=>{chrome.menuOpened = false}, 100)"
@ -269,13 +320,9 @@
</div> </div>
</button> </button>
</div> </div>
<div class="app-sidebar-notification" v-if="library.downloadNotification.show"> <div class="app-sidebar-notification libraryNotification" v-if="library.downloadNotification.show">
<div>{{ library.downloadNotification.message }}</div> <div class="message">{{ library.downloadNotification.message }} ({{
<div>{{ library.downloadNotification.progress }} / {{ library.downloadNotification.total }} 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> </div>
</div> </div>
</div> </div>
@ -285,6 +332,18 @@
<button class="nav-item" <button class="nav-item"
@click="navigateForward()"><%- include('svg/chevron-right.svg') %></button> @click="navigateForward()"><%- include('svg/chevron-right.svg') %></button>
</div> </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 --> <!-- Artist Page -->
<transition name="wpfade"> <transition name="wpfade">
<template v-if="page == 'artist-page' && artistPage.data.attributes"> <template v-if="page == 'artist-page' && artistPage.data.attributes">
@ -427,7 +486,9 @@
</transition> </transition>
<!-- Library - Songs --> <!-- Library - Songs -->
<transition name="wpfade" v-on:enter="getLibrarySongsFull()"> <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> </transition>
<!-- Library - Albums --> <!-- Library - Albums -->
<transition name="wpfade" v-on:enter="getLibraryAlbumsFull(null, 1); searchLibraryAlbums(1);"> <transition name="wpfade" v-on:enter="getLibraryAlbumsFull(null, 1); searchLibraryAlbums(1);">
@ -463,11 +524,13 @@
<img class="bg-artwork b" :src="$store.state.artwork.playerLCD"> <img class="bg-artwork b" :src="$store.state.artwork.playerLCD">
</div> </div>
</div> </div>
<lyrics-view v-if="drawer.panel == 'lyrics'" :time="lyriccurrenttime" :lyrics="lyrics" <lyrics-view v-if="drawer.panel == 'lyrics'" :time="lyriccurrenttime" :lyrics="lyrics"
:richlyrics="richlyrics"></lyrics-view> :richlyrics="richlyrics"></lyrics-view>
<div v-if="drawer.panel == 'lyrics'" class="lyric-footer"> <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 ?
</div> "Default View":'Fullscreen View'}}
</button>
</div>
<cider-queue ref="queue" v-if="drawer.panel == 'queue'"></cider-queue> <cider-queue ref="queue" v-if="drawer.panel == 'queue'"></cider-queue>
</div> </div>
</transition> </transition>
@ -476,11 +539,13 @@
</transition> </transition>
<transition name="fsModeSwitch"> <transition name="fsModeSwitch">
<div class="fullscreen-view-container" v-if="appMode == 'fullscreen'"> <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> </div>
</transition> </transition>
<transition name="wpfade"> <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 @load="chrome.artworkReady = true" class="bg-artwork a "
> >
<img class="bg-artwork b" <img class="bg-artwork b"
@ -528,6 +593,11 @@
</div> </div>
</div> </div>
<!-- Apple Settings Page -->
<%- include('pages/apple-account-settings') %>
<!-- Library - Songs -->
<%- include('pages/library-songs') %>
<!-- Media Item Artwork--> <!-- Media Item Artwork-->
<%- include("components/mediaitem-artwork"); %> <%- include("components/mediaitem-artwork"); %>
<!-- Browse --> <!-- Browse -->
@ -563,6 +633,9 @@
<!-- Search --> <!-- Search -->
<%- include('pages/search') %> <%- include('pages/search') %>
<!-- About -->
<%- include('pages/about') %>
<script type="text/x-template" id="am-musiccovershelf"> <script type="text/x-template" id="am-musiccovershelf">
<h1>{{ component.attributes.title.stringForDisplay }}</h1> <h1>{{ component.attributes.title.stringForDisplay }}</h1>
</script> </script>

120
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" target="_blank"
rel="noopener" data-dt-link-to-exclude="">Apple Inc.</a> rel="noopener" data-dt-link-to-exclude="">Apple Inc.</a>
All Rights All Rights
Reserved.</p> 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 </div>
Core - Developer - https://github.com/coredev-uk <div class="col">
Quacksire - Developer - https://github.com/child-duckling <div class="row">
booploops - Developer - https://github.com/booploops <div class="col">
vapormusic - Developer - https://github.com/vapormusic <h3>Cider Team</h3>
Void - Social Communications Team - https://twitter.com/MoonyVoid <button class="md-btn teamBtn" @click="window.open(member.link)" v-for="member in team">
NoseySG - Social Communications Team - https://twitter.com/noah_grose <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>
<img class="md-contributors" </div>
onclick="window.open('https://github.com/ciderapp/Cider/graphs/contributors')" </div>
src="https://contrib.rocks/image?repo=ciderapp/Cider"/> </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>

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

@ -66,10 +66,14 @@
@click="app.mk.shuffleMode = 1;play()"> @click="app.mk.shuffleMode = 1;play()">
Shuffle Shuffle
</button> </button>
<button class="wr-btn" style="min-width: 120px;" v-if="inLibrary!=null" <button class="wr-btn" style="min-width: 120px;" v-if="inLibrary!=null && confirm!=true"
@click="(!inLibrary) ? addToLibrary(data.attributes.playParams.id.toString()) : removeFromLibrary(data.attributes.playParams.id.toString())"> @click="confirmButton()">
{{ (!inLibrary) ? "Add to Library" : "Remove from Library" }} {{ (!inLibrary) ? "Add to Library" : "Remove from Library" }}
</button> </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> </div>
</div> </div>
@ -109,16 +113,19 @@
</div> </div>
</script> </script>
<script> <script>
Vue.component('cider-playlist', { Vue.component('cider-playlist', {
template: "#cider-playlist", template: "#cider-playlist",
props: ["data"], props: ["data"],
data: function () { data: function () {
return { return {
editorialNotesExpanded: false, editorialNotesExpanded: false,
drag: false, drag: false,
nameEditing: false, nameEditing: false,
inLibrary: null, inLibrary: null,
confirm: false,
app: this.$root, app: this.$root,
itemBadges: [], itemBadges: [],
badgesRequested: false 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) { getDescription(data) {
console.log(data.attributes) console.log(data.attributes)
if (data.attributes.editorialNotes) { if (data.attributes.editorialNotes) {
@ -212,6 +226,7 @@
addToLibrary(id) { addToLibrary(id) {
app.mk.addToLibrary(id) app.mk.addToLibrary(id)
this.inLibrary = true this.inLibrary = true
this.confirm = false
}, },
async removeFromLibrary(id) { async removeFromLibrary(id) {
var params = { "fields[somgs]": "inLibrary", "fields[albums]": "inLibrary", "relate": "library" } var params = { "fields[somgs]": "inLibrary", "fields[albums]": "inLibrary", "relate": "library" }
@ -224,6 +239,7 @@
var truekind = (!kind.endsWith("s")) ? (kind + "s") : kind; var truekind = (!kind.endsWith("s")) ? (kind + "s") : kind;
app.mk.api.library.remove({ [truekind]: id }) app.mk.api.library.remove({ [truekind]: id })
this.inLibrary = false this.inLibrary = false
this.confirm = false
}, },
editPlaylistName() { editPlaylistName() {
if (this.data.attributes.canEdit && this.data.type == "library-playlists") { if (this.data.attributes.canEdit && this.data.type == "library-playlists") {
@ -327,7 +343,7 @@
var kind = this.data.attributes.playParams.kind ?? this.data.type ?? ''; var kind = this.data.attributes.playParams.kind ?? this.data.type ?? '';
//console.log("1") //console.log("1")
var truekind = (!kind.endsWith("s")) ? (kind + "s") : kind; var truekind = (!kind.endsWith("s")) ? (kind + "s") : kind;
let query = (this.data ?? app.showingPlaylist).relationships.tracks.data.map(item => new MusicKit.MediaItem(item)); let query = (this.data ?? app.showingPlaylist).relationships.tracks.data.map(item => new MusicKit.MediaItem(item));
app.mk.stop().then(function () { app.mk.stop().then(function () {
app.mk.setQueue({[truekind]: [id]}).then(function () { app.mk.setQueue({[truekind]: [id]}).then(function () {

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

@ -1,46 +1,80 @@
<template v-if="page == 'library-songs'">
<div class="content-inner">
<div class="row"> <script type="text/x-template" id="cider-library-songs">
<div class="col" style="padding:0;"> <div class="content-inner library-page">
<h1 class="header-text">Songs</h1> <div class="library-header">
</div> <div class="row">
<div class="col-auto"> <div class="col" style="padding:0;">
<button v-if="library.songs.downloadState == 2" @click="getLibrarySongsFull(true)" class="reload-btn"><%- include('../svg/redo.svg') %></button> <div class="search-input-container" style="width:100%;margin: 16px 0;">
</div> <div class="search-input--icon"></div>
</div> <input type="search"
<div class="row"> style="width:100%;"
<div class="col" style="padding:0;"> spellcheck="false"
<div class="search-input-container" style="width:100%;margin: 16px 0;"> placeholder="Search..."
<div class="search-input--icon"></div> @input="$root.searchLibrarySongs"
<input type="search" v-model="library.songs.search" class="search-input">
style="width:100%;" </div>
spellcheck="false"
placeholder="Search..."
@input="searchLibrarySongs"
v-model="library.songs.search" class="search-input">
</div> </div>
</div> <div class="col-auto flex-center">
<div class="col-auto flex-center"> <div class="row">
<div class="row"> <div class="col">
<div class="col"> <select class="md-select" v-model="prefs.sort" @change="$root.searchLibrarySongs()">
<select class="md-select" v-model="library.songs.sorting" @change="searchLibrarySongs()"> <optgroup label="Sort By">
<optgroup label="Sort By"> <option v-for="(sort, index) in library.songs.sortingOptions" :value="index">{{ sort }}</option>
<option v-for="(sort, index) in library.songs.sortingOptions" :value="index">{{ sort }}</option> </optgroup>
</optgroup> </select>
</select> </div>
</div> <div class="col">
<div class="col"> <select class="md-select" v-model="prefs.sortOrder" @change="$root.searchLibrarySongs()">
<select class="md-select" v-model="library.songs.sortOrder" @change="searchLibrarySongs()"> <optgroup label="Sort Order">
<optgroup label="Sort Order"> <option value="asc">Ascending</option>
<option value="asc">Ascending</option> <option value="desc">Descending</option>
<option value="desc">Descending</option> </optgroup>
</optgroup> </select>
</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> </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> </div>
<div v-if="library.songs.downloadState == 3">Library contains no songs.</div> <div v-if="library.songs.downloadState == 3">Library contains no songs.</div>
<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 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>
</div> </div>
</template> </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>

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

@ -90,18 +90,6 @@
<input type="checkbox" switch v-model="app.cfg.visual.bg_artwork_rotation"/> <input type="checkbox" switch v-model="app.cfg.visual.bg_artwork_rotation"/>
</div> </div>
</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-line">
<div class="md-option-segment"> <div class="md-option-segment">
Hardware Acceleration<br> Hardware Acceleration<br>
@ -447,7 +435,7 @@
<div class="md-option-segment"> <div class="md-option-segment">
LastFM Scrobbling LastFM Scrobbling
</div> </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" <label class="list-button list-element" id="lfmConnect" ref="lfmConnect"
onclick="app.LastFMAuthenticate()">Connect</label> onclick="app.LastFMAuthenticate()">Connect</label>
</div> </div>
@ -477,77 +465,92 @@
</div> </div>
</div> </div>
<div class="md-option-header"> <div class="md-option-header">
<span>Unfinished / Non Functional</span> <span>Experimental</span>
</div> </div>
<div class="md-option-line"> <div class="md-option-line">
<div class="md-option-segment"> <div class="md-option-segment">
Theme Compact UI
</div> </div>
<div class="md-option-segment md-option-segment_auto"> <div class="md-option-segment md-option-segment_auto" >
<select class="md-select"> <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')">
<option value="0">Cider</option> {{app.cfg.advanced.experiments.includes('compactui') ? 'Enabled' : 'Disabled'}}
</select> </button>
</div> </div>
</div> </div>
<div class="md-option-line"> <div style="opacity: 0.5; pointer-events: none">
<div class="md-option-segment"> <div class="md-option-header">
Theme Options <span>Unfinished / Non Functional</span>
</div> </div>
<div class="md-option-segment md-option-segment_auto"> <div class="md-option-line">
<button class="btn">Theme Options</button> <div class="md-option-segment">
Theme
</div>
<div class="md-option-segment md-option-segment_auto">
<select class="md-select">
<option value="0">Cider</option>
</select>
</div>
</div> </div>
</div> <div class="md-option-line">
<div class="md-option-line"> <div class="md-option-segment">
<div class="md-option-segment"> Theme Options
Scrollbars </div>
<div class="md-option-segment md-option-segment_auto">
<button class="btn">Theme Options</button>
</div>
</div> </div>
<div class="md-option-segment md-option-segment_auto"> <div class="md-option-line">
<select class="md-select"> <div class="md-option-segment">
<option value="0">Show on hover</option> Scrollbars
<option value="1">Always show</option> </div>
<option value="2">Hidden</option> <div class="md-option-segment md-option-segment_auto">
</select> <select class="md-select">
<option value="0">Show on hover</option>
<option value="1">Always show</option>
<option value="2">Hidden</option>
</select>
</div>
</div> </div>
</div> <div class="md-option-line">
<div class="md-option-line"> <div class="md-option-segment">
<div class="md-option-segment"> Refresh Rate
Refresh Rate </div>
<div class="md-option-segment md-option-segment_auto">
<select class="md-select">
<option value='0'>Automatic</option>
<option value='30'>30</option>
<option value='60'>60</option>
<option value='144'>144</option>
<option value='175'>175</option>
<option value='240'>240</option>
<option value='360'>30</option>
</select>
</div>
</div> </div>
<div class="md-option-segment md-option-segment_auto"> <div class="md-option-line">
<select class="md-select"> <div class="md-option-segment">
<option value='0'>Automatic</option> Close Button Behavior
<option value='30'>30</option> </div>
<option value='60'>60</option> <div class="md-option-segment md-option-segment_auto">
<option value='144'>144</option> <select class="md-select">
<option value='175'>175</option> <option value='0'>Minimize to system tray</option>
<option value='240'>240</option> <option value='1'>Minimize to taskbar ? dock</option>
<option value='360'>30</option> <option value='2'>Quit Cider</option>
</select> </select>
</div>
</div> </div>
</div> <div class="md-option-line">
<div class="md-option-line"> <div class="md-option-segment">
<div class="md-option-segment"> Open Cider on Startup
Close Button Behavior </div>
</div> <div class="md-option-segment md-option-segment_auto">
<div class="md-option-segment md-option-segment_auto"> <select class="md-select">
<select class="md-select"> <option value='0'>Never</option>
<option value='0'>Minimize to system tray</option> <option value='1'>Always</option>
<option value='1'>Minimize to taskbar ? dock</option> <option value='2'>Always, minimized</option>
<option value='2'>Quit Cider</option> <option value='2'>Always, hidden in tray</option>
</select> </select>
</div> </div>
</div>
<div class="md-option-line">
<div class="md-option-segment">
Open Cider on Startup
</div>
<div class="md-option-segment md-option-segment_auto">
<select class="md-select">
<option value='0'>Never</option>
<option value='1'>Always</option>
<option value='2'>Always, minimized</option>
<option value='2'>Always, hidden in tray</option>
</select>
</div> </div>
</div> </div>
</div> </div>
@ -573,6 +576,12 @@
} }
}, },
methods: { 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(){ toggleAudioContext: function(){
if (app.cfg.advanced.AudioContext){ if (app.cfg.advanced.AudioContext){
CiderAudio.init(); 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