Merge branch 'main' into enhancement/search-bar
This commit is contained in:
commit
773209a170
33 changed files with 3146 additions and 1311 deletions
|
@ -123,6 +123,7 @@ export class BrowserWindow {
|
|||
"components/artist-chip",
|
||||
"components/hello-world",
|
||||
"components/inline-collection-list",
|
||||
"components/settings-window",
|
||||
],
|
||||
appRoutes: [
|
||||
{
|
||||
|
@ -550,8 +551,10 @@ export class BrowserWindow {
|
|||
app.get("/ciderlocal/:songs", (req, res) => {
|
||||
const audio = atob(req.params.songs.replace(/_/g, '/').replace(/-/g, '+'));
|
||||
console.log('auss', audio)
|
||||
let data = {data:
|
||||
this.localSongs.filter((f: any) => audio.split(',').includes(f.id))};
|
||||
let data = {
|
||||
data:
|
||||
this.localSongs.filter((f: any) => audio.split(',').includes(f.id))
|
||||
};
|
||||
res.send(data);
|
||||
});
|
||||
|
||||
|
@ -1273,7 +1276,8 @@ export class BrowserWindow {
|
|||
// "name": metadata.common.title,
|
||||
// "albumName": metadata.common.album,
|
||||
// "artistName": metadata.common.artist}}
|
||||
metadatalist.push(form)}
|
||||
metadatalist.push(form)
|
||||
}
|
||||
} catch (e) { }
|
||||
}
|
||||
// console.log('metadatalist', metadatalist);
|
||||
|
@ -1502,7 +1506,6 @@ export class BrowserWindow {
|
|||
/* *********************************************************************************************
|
||||
* Window Events
|
||||
* **********************************************************************************************/
|
||||
if (process.platform === "win32") {
|
||||
let WND_STATE = {
|
||||
MINIMIZED: 0,
|
||||
NORMAL: 1,
|
||||
|
@ -1518,19 +1521,23 @@ export class BrowserWindow {
|
|||
const state = wndState;
|
||||
if (isMinimized && state !== WND_STATE.MINIMIZED) {
|
||||
wndState = WND_STATE.MINIMIZED;
|
||||
BrowserWindow.win.webContents.send('window-state-changed', 'minimized');
|
||||
} else if (isFullScreen && state !== WND_STATE.FULL_SCREEN) {
|
||||
wndState = WND_STATE.FULL_SCREEN;
|
||||
BrowserWindow.win.webContents.send('window-state-changed', 'fullscreen')
|
||||
} else if (isMaximized && state !== WND_STATE.MAXIMIZED) {
|
||||
wndState = WND_STATE.MAXIMIZED;
|
||||
BrowserWindow.win.webContents.send('window-state-changed', 'maximized')
|
||||
BrowserWindow.win.webContents.executeJavaScript(`app.chrome.maximized = true`);
|
||||
} else if (state !== WND_STATE.NORMAL) {
|
||||
wndState = WND_STATE.NORMAL;
|
||||
BrowserWindow.win.webContents.send('window-state-changed', 'normal')
|
||||
BrowserWindow.win.webContents.executeJavaScript(
|
||||
`app.chrome.maximized = false`
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
let isQuiting = false
|
||||
|
||||
|
|
|
@ -37,7 +37,7 @@ export default class Thumbar {
|
|||
{
|
||||
label: utils.getLocale(utils.getStoreValue('general.language'), 'term.settings'),
|
||||
accelerator: utils.getStoreValue("general.keybindings.settings").join('+'),
|
||||
click: () => utils.getWindow().webContents.executeJavaScript(`app.appRoute('settings')`)
|
||||
click: () => utils.getWindow().webContents.executeJavaScript(`app.openSettingsPage()`)
|
||||
},
|
||||
...(this.isMac ? [
|
||||
{type: 'separator'},
|
||||
|
|
3
src/renderer/assets/feather/hard-drive.svg
Normal file
3
src/renderer/assets/feather/hard-drive.svg
Normal file
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-hard-drive">
|
||||
<path d="M22 12H2m3.45-6.89L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11zM6 16h.01M10 16h.01"/>
|
||||
</svg>
|
After Width: | Height: | Size: 372 B |
4
src/renderer/assets/feather/headphones.svg
Normal file
4
src/renderer/assets/feather/headphones.svg
Normal file
|
@ -0,0 +1,4 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-headphones">
|
||||
<path d="M3 18v-6a9 9 0 0 1 18 0v6"/>
|
||||
<path d="M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z"/>
|
||||
</svg>
|
After Width: | Height: | Size: 390 B |
5
src/renderer/assets/feather/pen-tool.svg
Normal file
5
src/renderer/assets/feather/pen-tool.svg
Normal file
|
@ -0,0 +1,5 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-pen-tool" width="20" height="20">
|
||||
<path d="m12 19 7-7 3 3-7 7-3-3z"/>
|
||||
<path d="m18 13-1.5-7.5L2 2l3.5 14.5L13 18l5-5zM2 2l7.586 7.586"/>
|
||||
<circle cx="11" cy="11" r="2"/>
|
||||
</svg>
|
After Width: | Height: | Size: 363 B |
3
src/renderer/assets/feather/zap.svg
Normal file
3
src/renderer/assets/feather/zap.svg
Normal file
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-zap" width="20" height="20">
|
||||
<path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z"/>
|
||||
</svg>
|
After Width: | Height: | Size: 263 B |
1
src/renderer/assets/settings.svg
Normal file
1
src/renderer/assets/settings.svg
Normal file
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-settings"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
|
After Width: | Height: | Size: 1,011 B |
Binary file not shown.
|
@ -81,7 +81,7 @@ Vue.component("sidebar-library-item", {
|
|||
},
|
||||
async mounted() {
|
||||
if (this.svgIcon) {
|
||||
this.svgIconData = await this.app.getSvgIcon(this.svgIcon);
|
||||
this.svgIconData = this.svgIcon;
|
||||
}
|
||||
},
|
||||
methods: {},
|
||||
|
|
5
src/renderer/less/bootstrap.less
vendored
5
src/renderer/less/bootstrap.less
vendored
|
@ -2432,10 +2432,9 @@ fieldset:disabled .btn {
|
|||
.nav-pills .nav-link {
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
border-radius: 50px;
|
||||
border-radius: 6px;
|
||||
color: #eee;
|
||||
-webkit-user-drag: none;
|
||||
// transition: transform .35s var(--appleEase), background-color .35s var(--appleEase);
|
||||
font-weight: 500;
|
||||
margin: 0px 4px;
|
||||
&:hover {
|
||||
|
@ -2447,7 +2446,7 @@ fieldset:disabled .btn {
|
|||
.nav-pills .show > .nav-link {
|
||||
color: #fff;
|
||||
background-color: var(--selected);
|
||||
outline:2px solid var(--keyColor);
|
||||
// outline:2px solid var(--keyColor);
|
||||
}
|
||||
|
||||
.nav-fill > .nav-link,
|
||||
|
|
|
@ -338,7 +338,9 @@
|
|||
|
||||
#app.twopanel .app-chrome:not(.chrome-bottom) .app-chrome--center .top-nav-group .app-sidebar-item {
|
||||
min-width: 110px;
|
||||
font-size: 0em;
|
||||
.sidebar-item-text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sidebar-icon {
|
||||
margin: 0px;
|
||||
|
@ -353,7 +355,9 @@
|
|||
|
||||
#app.twopanel .app-chrome:not(.chrome-bottom) .app-chrome--center .top-nav-group .app-sidebar-item {
|
||||
min-width: 60px;
|
||||
font-size: 0em;
|
||||
.sidebar-item-text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sidebar-icon {
|
||||
margin: 0px;
|
||||
|
|
|
@ -2168,12 +2168,20 @@ input[type=checkbox][switch]:checked:active::before {
|
|||
}
|
||||
|
||||
// fancy pills
|
||||
.fancy-pills {
|
||||
.nav-pills {
|
||||
position: relative;
|
||||
|
||||
.nav-link {
|
||||
transition: transform .3s var(--appleEase);
|
||||
position: relative;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
border-radius: 50px;
|
||||
color: #eee;
|
||||
-webkit-user-drag: none;
|
||||
font-weight: 500;
|
||||
margin: 0px 4px;
|
||||
|
||||
|
||||
&:after {
|
||||
|
@ -2271,6 +2279,7 @@ input[type=checkbox][switch]:checked:active::before {
|
|||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.grouping-container {
|
||||
display: grid;
|
||||
|
|
|
@ -64,7 +64,8 @@
|
|||
overflow-y: overlay;
|
||||
}
|
||||
|
||||
.modal-footer {}
|
||||
.modal-footer {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -74,7 +75,9 @@
|
|||
height: 700px;
|
||||
max-height: 700px;
|
||||
width: 800px;
|
||||
max-width : 800px;}
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
.info-header {
|
||||
|
@ -481,6 +484,7 @@
|
|||
z-index: -1;
|
||||
filter: blur(32px) brightness(50%) saturate(280%);
|
||||
}
|
||||
|
||||
.popover-artwork {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
|
@ -491,6 +495,7 @@
|
|||
.song-name {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.song-artist, .song-album {
|
||||
opacity: 0.75;
|
||||
cursor: pointer;
|
||||
|
@ -501,3 +506,19 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
._svg-icon {
|
||||
--icon: url("./assets/chevron-left.svg");
|
||||
--size: 1em;
|
||||
width: var(--size);
|
||||
height: var(--size);
|
||||
-webkit-mask-image: var(--icon);
|
||||
-webkit-mask-position: center;
|
||||
-webkit-mask-size: contain;
|
||||
background: rgb(255 255 255 / 76%);
|
||||
-webkit-mask-repeat: no-repeat;
|
||||
|
||||
&.md {
|
||||
--size: 1.2em;
|
||||
}
|
||||
}
|
|
@ -6,6 +6,7 @@ body[platform="darwin"] {
|
|||
&.notransparency::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#app {
|
||||
&.simplebg {
|
||||
background: transparent;
|
||||
|
@ -33,6 +34,16 @@ body[platform="darwin"] {
|
|||
background-color: var(--macOSChromeColor);
|
||||
}
|
||||
}
|
||||
|
||||
// &::after {
|
||||
// position: fixed;
|
||||
// top:0;left:0;right:0;bottom:0;
|
||||
// box-shadow: inset 0px 0px .5px 1px rgb(200 200 200 / 40%);
|
||||
// border-radius: 10px;
|
||||
// content: " ";
|
||||
// z-index: 999999;
|
||||
// pointer-events: none;
|
||||
// }
|
||||
}
|
||||
|
||||
#app-main {
|
||||
|
|
|
@ -684,6 +684,7 @@
|
|||
-webkit-mask-image: -webkit-radial-gradient(center, circle cover, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 75%);
|
||||
border-radius: 0px;
|
||||
}
|
||||
|
||||
.hero-tint {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
@ -941,7 +942,8 @@
|
|||
transition: min-height 0.5s ease-in-out;
|
||||
min-height: 200px;
|
||||
|
||||
.playlistInfo {}
|
||||
.playlistInfo {
|
||||
}
|
||||
|
||||
.mediaContainer {
|
||||
transition: width 0.5s ease-in-out, height 0.5s ease-in-out;
|
||||
|
@ -1366,23 +1368,6 @@
|
|||
margin: 16px auto 0px;
|
||||
}
|
||||
|
||||
.md-option-header {
|
||||
padding : 0px 26px;
|
||||
border-bottom: unset;
|
||||
border-top : unset;
|
||||
font-weight : 600;
|
||||
background : rgb(255 255 255 / 0%);
|
||||
font-size : 2em;
|
||||
}
|
||||
|
||||
.settings-option-body-webview {
|
||||
height: 100%;
|
||||
width : 100%;
|
||||
}
|
||||
|
||||
.settings-option-body {
|
||||
margin: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
// AudioLabs page
|
||||
|
@ -1847,7 +1832,6 @@
|
|||
}
|
||||
|
||||
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.10) translateZ(-1px) translateY(10px);
|
||||
z-index: 1;
|
||||
|
@ -1914,6 +1898,7 @@
|
|||
|
||||
&.close {
|
||||
background-color: #fc3c44aa;
|
||||
|
||||
&:hover {
|
||||
background-color: #fc3c44;
|
||||
}
|
||||
|
@ -1921,6 +1906,7 @@
|
|||
|
||||
&.min {
|
||||
background-color: rgb(200 200 200 / 5%);
|
||||
|
||||
&:hover {
|
||||
background-color: rgb(200 200 200 / 10%);
|
||||
}
|
||||
|
@ -1971,3 +1957,156 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.settings-panel {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgb(0 0 0 / 0);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 16;
|
||||
|
||||
.settings-window {
|
||||
background: var(--baseColorMix);
|
||||
max-width: 80%;
|
||||
max-height: 90%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 10px;
|
||||
box-shadow: var(--ciderShadow-Generic);
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
flex: 1;
|
||||
backdrop-filter: var(--glassFilterHeavy);
|
||||
transition: width 0.25s ease-in-out, height 0.25s ease-in-out, max-width 0.25s ease-in-out, max-height 0.25s ease-in-out;
|
||||
|
||||
.header-text {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 48px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 600;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.nav-pills {
|
||||
gap: 6px;
|
||||
|
||||
}
|
||||
|
||||
.nav-pills .nav-link {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
.md-option-header {
|
||||
padding: 0px 26px;
|
||||
border-bottom: unset;
|
||||
border-top: unset;
|
||||
font-weight: 600;
|
||||
background: rgb(255 255 255 / 0%);
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.settings-option-body-webview {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.settings-option-body {
|
||||
margin: 16px;
|
||||
}
|
||||
|
||||
&.maxed {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
border-radius: 0px;
|
||||
box-shadow: unset;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
-webkit-app-region: no-drag;
|
||||
appearance: none;
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
border-radius: 50px;
|
||||
display: grid;
|
||||
align-content: center;
|
||||
z-index: 9;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
font-family: "codicon";
|
||||
color: var(--textColor);
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: rgb(196, 43, 28)
|
||||
}
|
||||
|
||||
&.minmax-btn {
|
||||
right: 52px;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
}
|
||||
|
||||
&.min {
|
||||
&:before {
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--selected);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabs {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
> .col-auto {
|
||||
width: 230px;
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
margin: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
overflow-y: overlay;
|
||||
height: 100%;
|
||||
background-color: var(--panelColor2);
|
||||
padding-top: 48px;
|
||||
border-left: 1px solid var(--borderColor);
|
||||
}
|
||||
}
|
||||
}
|
|
@ -7,6 +7,7 @@ import {Events} from './events.js'
|
|||
import { wsapi } from "./wsapi_interop.js"
|
||||
import { MusicKitTools } from "./musickittools.js"
|
||||
import { spawnMica } from "./mica.js"
|
||||
import { svgIcon } from './components/svg-icon.js'
|
||||
|
||||
|
||||
// Define window objects
|
||||
|
|
20
src/renderer/main/components/svg-icon.js
Normal file
20
src/renderer/main/components/svg-icon.js
Normal file
|
@ -0,0 +1,20 @@
|
|||
export const svgIcon = Vue.component("svg-icon", {
|
||||
template: `
|
||||
<div class="_svg-icon" :class="classes" :svg-name="name" :style="{'--icon': 'url(' + url + ')'}"></div>
|
||||
`,
|
||||
props: {
|
||||
name: {
|
||||
type: String,
|
||||
required: false
|
||||
},
|
||||
classes: {
|
||||
type: String,
|
||||
required: false
|
||||
},
|
||||
url: {
|
||||
type: String,
|
||||
required: true,
|
||||
default: "./assets/repeat.svg"
|
||||
}
|
||||
}
|
||||
})
|
|
@ -168,6 +168,7 @@ const app = new Vue({
|
|||
location: "",
|
||||
info: {}
|
||||
},
|
||||
windowState: "normal",
|
||||
desiredPageTransition: "wpfade_transform",
|
||||
hideUserInfo: ipcRenderer.sendSync("is-dev") || false,
|
||||
artworkReady: false,
|
||||
|
@ -217,6 +218,7 @@ const app = new Vue({
|
|||
castMenu: false,
|
||||
moreInfo: false,
|
||||
airplayPW: false,
|
||||
settings: false
|
||||
},
|
||||
socialBadges: {
|
||||
badgeMap: {},
|
||||
|
@ -243,6 +245,7 @@ const app = new Vue({
|
|||
notyf: notyf,
|
||||
idleTimer: null,
|
||||
idleState: false,
|
||||
appVisible: true
|
||||
},
|
||||
watch: {
|
||||
cfg: {
|
||||
|
@ -274,6 +277,12 @@ const app = new Vue({
|
|||
}, false)
|
||||
},
|
||||
methods: {
|
||||
hotReload() {
|
||||
this.appVisible = false
|
||||
setTimeout(() => {
|
||||
this.appVisible = true
|
||||
}, 1000)
|
||||
},
|
||||
setWindowHash(route = "") {
|
||||
window.location.hash = `#${route}`;
|
||||
},
|
||||
|
@ -849,6 +858,10 @@ const app = new Vue({
|
|||
this.library.localsongs = data;
|
||||
})
|
||||
|
||||
ipcRenderer.on('window-state-changed', (event, data) => {
|
||||
this.chrome.windowState = data
|
||||
})
|
||||
|
||||
ipcRenderer.on('SoundCheckTag', (event, tag) => {
|
||||
// let replaygain = self.parseSCTagToRG(tag)
|
||||
try {
|
||||
|
@ -4325,7 +4338,7 @@ const app = new Vue({
|
|||
"name": app.getLz('settings.option.audio.audioLab'),
|
||||
"hidden": true,
|
||||
"action": function () {
|
||||
app.appRoute('audiolabs')
|
||||
app.openSettingsPage('audiolabs')
|
||||
}
|
||||
},
|
||||
]
|
||||
|
@ -4384,6 +4397,32 @@ const app = new Vue({
|
|||
|
||||
}
|
||||
},
|
||||
openSettingsPage(page) {
|
||||
switch (page) {
|
||||
case "general":
|
||||
this.$store.state.pageState.settings.currentTabIndex = 0
|
||||
break;
|
||||
case "audio":
|
||||
this.$store.state.pageState.settings.currentTabIndex = 1
|
||||
break;
|
||||
case "audiolabs":
|
||||
this.$store.state.pageState.settings.currentTabIndex = 2
|
||||
break;
|
||||
case "visual":
|
||||
this.$store.state.pageState.settings.currentTabIndex = 3
|
||||
break;
|
||||
case "lyrics":
|
||||
this.$store.state.pageState.settings.currentTabIndex = 4
|
||||
break;
|
||||
case "connectivity":
|
||||
this.$store.state.pageState.settings.currentTabIndex = 5
|
||||
break;
|
||||
case "advanced":
|
||||
this.$store.state.pageState.settings.currentTabIndex = 6
|
||||
break;
|
||||
}
|
||||
app.modals.settings = true
|
||||
},
|
||||
LastFMDeauthorize() {
|
||||
ipcRenderer.invoke('setStoreValue', 'lastfm.enabled', false).catch((e) => console.error(e));
|
||||
ipcRenderer.invoke('setStoreValue', 'lastfm.auth_token', '').catch((e) => console.error(e));
|
||||
|
|
|
@ -12,6 +12,10 @@ const store = new Vuex.Store({
|
|||
nextUrl: null,
|
||||
items: [],
|
||||
size: "normal"
|
||||
},
|
||||
settings: {
|
||||
currentTabIndex: 0,
|
||||
fullscreen: false
|
||||
}
|
||||
},
|
||||
artwork: {
|
||||
|
|
|
@ -15,6 +15,7 @@
|
|||
|
||||
:root {
|
||||
--appleEase: cubic-bezier(0.42, 0, 0.58, 1);
|
||||
--borderColor: rgb(200 200 200 / 16%);
|
||||
--mediaItemShadow: inset 0px 0px 0px 1px rgb(200 200 200 / 16%);
|
||||
--mediaItemShadow-Shadow: 0 8px 40px rgb(0 0 0 / 0.55);
|
||||
--mediaItemShadow-ShadowSubtle: 0 4px 14px rgb(0 0 0 / 10%);
|
||||
|
@ -50,6 +51,7 @@
|
|||
--textColor: #eee;
|
||||
--replayGradient: linear-gradient(45deg, hsl(248deg 58% 29%), hsl(13deg 41% 42%));
|
||||
--glassFilter: blur(16px) saturate(180%);
|
||||
--glassFilterHeavy: blur(64px) saturate(280%);
|
||||
--sidebarWidth: 260px;
|
||||
}
|
||||
|
||||
|
@ -856,6 +858,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
|
|||
}
|
||||
|
||||
.app-sidebar-item {
|
||||
--iconSize: 18px;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding: 8px 12px;
|
||||
|
@ -870,6 +873,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
|
|||
transition: transform 0.1s;
|
||||
text-align: left;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
|
||||
&.app-sidebar-item-playlist {
|
||||
-webkit-user-drag: element;
|
||||
|
@ -885,6 +889,10 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
|
|||
}
|
||||
}
|
||||
|
||||
>._svg-icon {
|
||||
--size: var(--iconSize);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.app-sidebar-item:hover {
|
||||
|
|
|
@ -105,7 +105,7 @@
|
|||
$root.getLz("term.about")
|
||||
}}</span>
|
||||
</button>
|
||||
<button class="usermenu-item" @click="appRoute('settings')">
|
||||
<button class="usermenu-item" @click="modals.settings = true">
|
||||
<span class="usermenu-item-icon">
|
||||
<%- include("../svg/settings.svg") %>
|
||||
</span>
|
||||
|
|
|
@ -31,6 +31,9 @@
|
|||
<transition name="modal">
|
||||
<plugin-menu v-if="modals.pluginMenu"></plugin-menu>
|
||||
</transition>
|
||||
<transition name="modal">
|
||||
<settings-window v-if="modals.settings"></settings-window>
|
||||
</transition>
|
||||
<transition name="modal">
|
||||
<eq-view v-if="modals.equalizer"></eq-view>
|
||||
</transition>
|
||||
|
|
|
@ -158,23 +158,10 @@
|
|||
</div>
|
||||
<template v-if="!cfg.general.sidebarCollapsed.playlists">
|
||||
<button class="app-sidebar-item" @click="playlistHeaderContextMenu">
|
||||
<div class="sidebar-icon">
|
||||
<svg
|
||||
width="46"
|
||||
height="46"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path d="M12 5v14"></path>
|
||||
<path d="M5 12h14"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<svg-icon url="./assets/feather/plus.svg"></svg-icon>
|
||||
<div class="sidebar-item-text">
|
||||
{{ getLz("action.createNew") }}
|
||||
</div>
|
||||
</button>
|
||||
<sidebar-playlist
|
||||
v-for="item in getPlaylistFolderChildren('p.playlistsroot')"
|
||||
|
|
|
@ -1,10 +1,10 @@
|
|||
<script type="text/x-template" id="audio-controls">
|
||||
<div class="modal-fullscreen addtoplaylist-panel" @click.self="app.resetState()"
|
||||
@contextmenu.self="app.resetState()">
|
||||
<div class="modal-fullscreen addtoplaylist-panel" @click.self="app.modals.audioControls = false"
|
||||
@contextmenu.self="app.modals.audioControls = false">
|
||||
<div class="modal-window">
|
||||
<div class="modal-header">
|
||||
<div class="modal-title">{{app.getLz('term.audioControls')}}</div>
|
||||
<button class="close-btn" @click="app.resetState()" :aria-label="app.getLz('action.close')"></button>
|
||||
<button class="close-btn" @click="app.modals.audioControls = false" :aria-label="app.getLz('action.close')"></button>
|
||||
</div>
|
||||
<div class="modal-content">
|
||||
<div class="md-option-line">
|
||||
|
|
|
@ -1,10 +1,10 @@
|
|||
<script type="text/x-template" id="audio-playbackrate">
|
||||
<div class="modal-fullscreen addtoplaylist-panel" @click.self="app.resetState()"
|
||||
@contextmenu.self="app.resetState()">
|
||||
<div class="modal-fullscreen addtoplaylist-panel" @click.self="app.modals.audioPlaybackRate = false"
|
||||
@contextmenu.self="app.modals.audioPlaybackRate = false">
|
||||
<div class="modal-window">
|
||||
<div class="modal-header">
|
||||
<div class="modal-title">{{app.getLz('settings.option.audio.changePlaybackRate')}}</div>
|
||||
<button class="close-btn" @click="app.resetState()" :aria-label="app.getLz('action.close')"></button>
|
||||
<button class="close-btn" @click="app.modals.audioPlaybackRate = false" :aria-label="app.getLz('action.close')"></button>
|
||||
</div>
|
||||
<div class="modal-content">
|
||||
<div class="md-option-line">
|
||||
|
|
|
@ -1,10 +1,10 @@
|
|||
<script type="text/x-template" id="audio-settings">
|
||||
<template>
|
||||
<div class="modal-fullscreen addtoplaylist-panel" @click.self="app.resetState()" @contextmenu.self="app.resetState()">
|
||||
<div class="modal-fullscreen addtoplaylist-panel" @click.self="app.modals.audioSettings = false" @contextmenu.self="app.modals.audioSettings = false">
|
||||
<div class="modal-window">
|
||||
<div class="modal-header">
|
||||
<div class="modal-title">{{app.getLz('term.audioSettings')}}</div>
|
||||
<button class="close-btn" @click="app.resetState()" :aria-label="app.getLz('action.close')"></button>
|
||||
<button class="close-btn" @click="app.modals.audioSettings = false" :aria-label="app.getLz('action.close')"></button>
|
||||
</div>
|
||||
<div class="modal-content">
|
||||
<button class="playlist-item"
|
||||
|
@ -23,7 +23,7 @@
|
|||
<div class="name">{{app.getLz('settings.option.audio.changePlaybackRate')}}</div>
|
||||
</button>
|
||||
<button class="playlist-item"
|
||||
@click="$root.appRoute('audiolabs')" style="width:100%;">
|
||||
@click="$root.openSettingsPage('audiolabs')" style="width:100%;">
|
||||
<div class="icon"><%- include("../svg/speaker.svg") %></div>
|
||||
<div class="name">{{app.getLz('settings.option.audio.audioLab')}}</div>
|
||||
</button>
|
||||
|
|
|
@ -291,7 +291,7 @@
|
|||
})
|
||||
},
|
||||
close() {
|
||||
app.resetState()
|
||||
app.modals.equalizer = false
|
||||
},
|
||||
changeVibrantBass() {
|
||||
if (app.cfg.audio.equalizer.vibrantBass !== '0') {
|
||||
|
|
1560
src/renderer/views/components/settings-window.ejs
Normal file
1560
src/renderer/views/components/settings-window.ejs
Normal file
File diff suppressed because it is too large
Load diff
|
@ -9,7 +9,7 @@
|
|||
:href="item.href"
|
||||
@click='clickEvent()'>
|
||||
<template v-if="!renaming">
|
||||
<div class="sidebar-icon" :key="item.id" v-html="icon"></div> {{ item.attributes.name }}
|
||||
<svg-icon :url="icon"/> {{ item.attributes.name }}
|
||||
<small class="presentNotice" v-if="hasRelatedMediaItems">(Track present)</small>
|
||||
</template>
|
||||
<input type="text" v-model="item.attributes.name" class="pl-rename-field" @blur="rename()" @keydown.enter="rename()" v-else>
|
||||
|
@ -57,9 +57,9 @@
|
|||
},
|
||||
async mounted() {
|
||||
if (this.item.type !== "library-playlist-folders") {
|
||||
this.icon = await this.$root.getSvgIcon("./assets/feather/list.svg")
|
||||
this.icon = ("./assets/feather/list.svg")
|
||||
} else {
|
||||
this.icon = await this.$root.getSvgIcon("./assets/feather/folder.svg")
|
||||
this.icon = ("./assets/feather/folder.svg")
|
||||
}
|
||||
let playlistMap = this.$root.playlists.trackMapping
|
||||
if (this.relateMediaItems.length != 0) {
|
||||
|
|
|
@ -67,11 +67,16 @@
|
|||
</style>
|
||||
</head>
|
||||
|
||||
<body class="notransparency" oncontextmenu="return false;" loading="1" os-release="<%= parseInt(env.osRelease) %>" platform="<%= env.platform %>">
|
||||
<body class="notransparency" oncontextmenu="return false;" loading="1" os-release="<%= parseInt(env.osRelease) %>"
|
||||
platform="<%= env.platform %>">
|
||||
<div id="LOADER">
|
||||
<%- include("../assets/cider-round.svg") %>
|
||||
</div>
|
||||
<div id="app" :class="getAppClasses()" :style="getAppStyle()" :library-visible="(chrome.sidebarCollapsed ? 0 : 1)" :window-style="cfg.visual.directives.windowLayout">
|
||||
<div id="app" :class="getAppClasses()"
|
||||
v-if="appVisible"
|
||||
:window-state="chrome.windowState"
|
||||
:style="getAppStyle()" :library-visible="(chrome.sidebarCollapsed ? 0 : 1)"
|
||||
:window-style="cfg.visual.directives.windowLayout">
|
||||
<transition name="fsModeSwitch">
|
||||
<div id="app-main" v-show="appMode == 'player'">
|
||||
<%- include('app/chrome-top'); %>
|
||||
|
@ -104,8 +109,9 @@
|
|||
<%- include(env.components[i]); %>
|
||||
<% } %>
|
||||
|
||||
|
||||
<script async src="<%- (env.useV3 ? "https://js-cdn.music.apple.com/musickit/v3/amp/musickit.js" : "https://js-cdn.music.apple.com/musickit/v2/amp/musickit.js" ) %>" data-web-components>
|
||||
<script async
|
||||
src="<%- (env.useV3 ? "https://js-cdn.music.apple.com/musickit/v3/amp/musickit.js" : "https://js-cdn.music.apple.com/musickit/v2/amp/musickit.js") %>"
|
||||
data-web-components>
|
||||
</script>
|
||||
<script src="index.js?v=1"></script>
|
||||
|
||||
|
@ -117,8 +123,8 @@
|
|||
<script type="text/x-template" id="sidebar-library-item">
|
||||
<button class="app-sidebar-item"
|
||||
:class="$parent.getSidebarItemClass(page)" @click="$root.setWindowHash(page)">
|
||||
<div class="sidebar-icon" v-html="svgIconData" v-if="svgIconData != ''"></div>
|
||||
{{ name }}
|
||||
<svg-icon :url="svgIconData" v-if="svgIconData != ''" />
|
||||
<span class="sidebar-item-text">{{ name }}</span>
|
||||
</button>
|
||||
</script>
|
||||
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<script type="text/x-template" id="audiolabs-page">
|
||||
<div class="content-inner audiolabs-page ">
|
||||
<div class="audiolabs-page">
|
||||
<div class="md-option-container">
|
||||
<div class="settings-option-body">
|
||||
<div class="md-option-line">
|
||||
|
@ -120,7 +120,7 @@
|
|||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div style="opacity: 0.5; pointer-events: none">
|
||||
<div style="opacity: 0.5; pointer-events: none" v-if="false">
|
||||
<div class="md-option-header">
|
||||
<span>{{$root.getLz('settings.header.unfinished')}}</span>
|
||||
</div>
|
||||
|
|
|
@ -172,7 +172,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="playlist-body scrollbody">
|
||||
<b-tabs pills class="track-pills pilldim" align="center" content-class="mt-3" :nav-wrapper-class="navClass(data)">
|
||||
<b-tabs pills class="track-pills pilldim fancy-pills" align="center" content-class="mt-3" :nav-wrapper-class="navClass(data)">
|
||||
<b-tab :title="$root.getLz('term.tracks')">
|
||||
<div @wheel="minClass(true)" @scroll="minClass(true)">
|
||||
<div class="">
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
<script type="text/x-template" id="cider-zoo">
|
||||
<div class="content-inner">
|
||||
<svg-icon/>
|
||||
<h3>Welcome to element park. *BERR NERR NERR NERR NERRRRR BERR NER NER NER NERRR BERRR NR NR NRRRR*</h3>
|
||||
<button @click="app.playMediaItemById('1592151778', 'album')">Play Test Album</button>
|
||||
{{ $store.state.test }}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue