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

Merge branch 'main' into enhancement/lastfm

Browse source
This commit is contained in:
Core 2022-06-29 00:20:35 +01:00
commit 6157470f0a
No known key found for this signature in database
GPG key ID: FE9BF1B547F8F3C6
18 changed files with 341 additions and 274 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/renderer/assets/feather/hard-drive.svg Normal file
View 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>
Side by side

After

Width:  |  Height:  |  Size: 372 B

4
src/renderer/assets/feather/headphones.svg Normal file
View 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>
Side by side

After

Width:  |  Height:  |  Size: 390 B

5
src/renderer/assets/feather/pen-tool.svg Normal file
View 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>
Side by side

After

Width:  |  Height:  |  Size: 363 B

3
src/renderer/assets/feather/zap.svg Normal file
View 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>
Side by side

After

Width:  |  Height:  |  Size: 263 B

1
src/renderer/assets/settings.svg Normal file
View 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>
Side by side

After

Width:  |  Height:  |  Size: 1,011 B

BIN
src/renderer/audio/impulses/CAP_64.wav
View file

Binary file not shown.

2
src/renderer/index.js
View file

@ -81,7 +81,7 @@ Vue.component("sidebar-library-item", {
}, },
async mounted() { async mounted() {
if (this.svgIcon) { if (this.svgIcon) {
this.svgIconData = await this.app.getSvgIcon(this.svgIcon); this.svgIconData = this.svgIcon;
} }
}, },
methods: {}, methods: {},

8
src/renderer/less/directives.less
View file

@ -338,7 +338,9 @@
#app.twopanel .app-chrome:not(.chrome-bottom) .app-chrome--center .top-nav-group .app-sidebar-item { #app.twopanel .app-chrome:not(.chrome-bottom) .app-chrome--center .top-nav-group .app-sidebar-item {
min-width: 110px; min-width: 110px;
font-size: 0em; .sidebar-item-text {
display: none;
}
.sidebar-icon { .sidebar-icon {
margin: 0px; margin: 0px;
@ -353,7 +355,9 @@
#app.twopanel .app-chrome:not(.chrome-bottom) .app-chrome--center .top-nav-group .app-sidebar-item { #app.twopanel .app-chrome:not(.chrome-bottom) .app-chrome--center .top-nav-group .app-sidebar-item {
min-width: 60px; min-width: 60px;
font-size: 0em; .sidebar-item-text {
display: none;
}
.sidebar-icon { .sidebar-icon {
margin: 0px; margin: 0px;

393
src/renderer/less/helpers.less
View file

@ -1,6 +1,6 @@
.notyf__toast { .notyf__toast {
-webkit-app-region: no-drag; -webkit-app-region: no-drag;
cursor : pointer; cursor: pointer;
} }
.notyf-info { .notyf-info {
@ -9,142 +9,145 @@
.tooltip-inner { .tooltip-inner {
background: #2f2f2f; background: #2f2f2f;
opacity : 1; opacity: 1;
border : 1px solid rgb(0 0 0 / 35%); border: 1px solid rgb(0 0 0 / 35%);
transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.25); box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.25);
} }
.modal-fullscreen { .modal-fullscreen {
display : flex; display: flex;
justify-content: center; justify-content: center;
align-items : center; align-items: center;
position : fixed; position: fixed;
top : 0; top: 0;
left : 0; left: 0;
width : 100%; width: 100%;
height : 100%; height: 100%;
background : rgba(0, 0, 0, 0.3); background: rgba(0, 0, 0, 0.3);
z-index : 1000; z-index: 1000;
.modal-window { .modal-window {
background : #333; background: #333;
border-radius: 10px; border-radius: 10px;
box-shadow : var(--mediaItemShadow-Shadow); box-shadow: var(--mediaItemShadow-Shadow);
display : flex; display: flex;
flex-flow : column; flex-flow: column;
max-height : 500px; max-height: 500px;
max-width : 360px; max-width: 360px;
background : #121212; background: #121212;
width : 100%; width: 100%;
position : relative; position: relative;
&:after { &:after {
content : ""; content: "";
position : absolute; position: absolute;
top : 0; top: 0;
left : 0; left: 0;
width : 100%; width: 100%;
height : 100%; height: 100%;
pointer-events: none; pointer-events: none;
box-shadow : var(--mediaItemShadow); box-shadow: var(--mediaItemShadow);
z-index : 1; z-index: 1;
border-radius : inherit; border-radius: inherit;
} }
.modal-header { .modal-header {
width : 100%; width: 100%;
padding: 6px; padding: 6px;
} }
.modal-content { .modal-content {
width : 100%; width: 100%;
height : 100%; height: 100%;
overflow : hidden; overflow: hidden;
overflow-y: overlay; overflow-y: overlay;
} }
.modal-footer {} .modal-footer {
}
} }
} }
.spatialproperties-panel { .spatialproperties-panel {
.modal-window { .modal-window {
&:not(.airplay-modal){ &:not(.airplay-modal) {
height : 700px; height: 700px;
max-height: 700px; max-height: 700px;
width : 800px; width: 800px;
max-width : 800px;} max-width: 800px;
overflow : hidden; }
overflow: hidden;
.info-header { .info-header {
padding-left: 12px; padding-left: 12px;
} }
.visual-container { .visual-container {
display : flex; display: flex;
justify-content: center; justify-content: center;
align-items : center; align-items: center;
overflow : hidden; overflow: hidden;
} }
.visual { .visual {
position : relative; position: relative;
height : 250px; height: 250px;
width : 300px; width: 300px;
display : inline-flex; display: inline-flex;
align-items : flex-end; align-items: flex-end;
justify-content: center; justify-content: center;
filter : drop-shadow(2px 12px 6px rgb(0 0 0 / 25%)); filter: drop-shadow(2px 12px 6px rgb(0 0 0 / 25%));
margin : 0 auto; margin: 0 auto;
.face { .face {
position : absolute; position: absolute;
width : calc(12px * 6); width: calc(12px * 6);
height : calc(12px * 6); height: calc(12px * 6);
border-radius: 6px; border-radius: 6px;
transform : rotateX(60deg) rotateZ(-45deg); transform: rotateX(60deg) rotateZ(-45deg);
transition : transform 0.2s linear, width 0.2s linear, height 0.2s linear; transition: transform 0.2s linear, width 0.2s linear, height 0.2s linear;
} }
.listener { .listener {
position : absolute; position: absolute;
width : 32px; width: 32px;
height : 32px; height: 32px;
border-radius: 6px; border-radius: 6px;
transform : rotateX(60deg) rotateZ(-45deg); transform: rotateX(60deg) rotateZ(-45deg);
transition : transform 0.2s linear, width 0.2s linear, height 0.2s linear; transition: transform 0.2s linear, width 0.2s linear, height 0.2s linear;
background : white; background: white;
color : black; color: black;
z-index : 2; z-index: 2;
} }
.audiosource { .audiosource {
position : absolute; position: absolute;
width : 32px; width: 32px;
height : 32px; height: 32px;
border-radius: 6px; border-radius: 6px;
transform : rotateX(60deg) rotateZ(-45deg); transform: rotateX(60deg) rotateZ(-45deg);
transition : transform 0.2s linear, width 0.2s linear, height 0.2s linear; transition: transform 0.2s linear, width 0.2s linear, height 0.2s linear;
background : yellow; background: yellow;
z-index : 2; z-index: 2;
} }
.face:nth-of-type(1) { .face:nth-of-type(1) {
background: linear-gradient(45deg, #28223a, #1f2038); background: linear-gradient(45deg, #28223a, #1f2038);
z-index : 1; z-index: 1;
} }
.face:nth-of-type(2) { .face:nth-of-type(2) {
background: linear-gradient(45deg, #7d53ad, #5763ff); background: linear-gradient(45deg, #7d53ad, #5763ff);
transform : rotateX(60deg) rotateZ(-45deg) translateZ(30px); transform: rotateX(60deg) rotateZ(-45deg) translateZ(30px);
opacity : 0.7; opacity: 0.7;
z-index : 3; z-index: 3;
} }
} }
.modal-header { .modal-header {
padding : 16px; padding: 16px;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
@ -162,14 +165,14 @@
.addtoplaylist-panel { .addtoplaylist-panel {
.modal-window { .modal-window {
max-height : 600px; max-height: 600px;
max-width : 400px; max-width: 400px;
background : rgb(18 18 18 / 90%); background: rgb(18 18 18 / 90%);
overflow : hidden; overflow: hidden;
backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%);
.modal-header { .modal-header {
padding : 16px; padding: 16px;
position: relative; position: relative;
.modal-title { .modal-title {
@ -182,34 +185,34 @@
} }
.modal-search { .modal-search {
width : 100%; width: 100%;
padding : 0px 16px; padding: 0px 16px;
position: relative; position: relative;
} }
.playlist-item { .playlist-item {
appearance : none; appearance: none;
border : 0px; border: 0px;
text-align : left; text-align: left;
width : 100%; width: 100%;
margin : 0; margin: 0;
display : flex; display: flex;
background : rgba(32, 32, 32, 0.46); background: rgba(32, 32, 32, 0.46);
color : #eee; color: #eee;
font-family: inherit; font-family: inherit;
font-size : 0.98em; font-size: 0.98em;
padding : 6px 12px; padding: 6px 12px;
align-items: center; align-items: center;
flex-flow : row; flex-flow: row;
.icon { .icon {
pointer-events : none; pointer-events: none;
width : 32px; width: 32px;
height : 32px; height: 32px;
display : flex; display: flex;
justify-content: center; justify-content: center;
align-items : center; align-items: center;
margin-right : 6px; margin-right: 6px;
} }
.name { .name {
@ -236,35 +239,35 @@
} }
.menu-panel { .menu-panel {
width : 100%; width: 100%;
height : 100%; height: 100%;
position : fixed; position: fixed;
top : 0; top: 0;
left : 0; left: 0;
z-index : 100001; z-index: 100001;
display : flex; display: flex;
justify-content : center; justify-content: center;
align-items : center; align-items: center;
-webkit-app-region: no-drag; -webkit-app-region: no-drag;
.menu-header-body { .menu-header-body {
padding : 6px; padding: 6px;
display : flex; display: flex;
background: rgb(200 200 200 / 10%); background: rgb(200 200 200 / 10%);
.menu-option-header { .menu-option-header {
width : 40px; width: 40px;
height : 40px; height: 40px;
display : flex; display: flex;
justify-content: center; justify-content: center;
align-items : center; align-items: center;
border-radius : var(--mediaItemRadius); border-radius: var(--mediaItemRadius);
appearance : none; appearance: none;
border : 0; border: 0;
background : transparent; background: transparent;
&.active { &.active {
.sidebar-icon>.svg-icon { .sidebar-icon > .svg-icon {
--color: var(--keyColor); --color: var(--keyColor);
} }
} }
@ -280,62 +283,62 @@
} }
.menu-panel-body { .menu-panel-body {
display : flex; display: flex;
flex-flow : column; flex-flow: column;
background : rgb(30 30 30 / 45%); background: rgb(30 30 30 / 45%);
backdrop-filter: blur(32px) saturate(180%); backdrop-filter: blur(32px) saturate(180%);
position : relative; position: relative;
min-width : 200px; min-width: 200px;
box-shadow : var(--ciderShadow-Generic); box-shadow: var(--ciderShadow-Generic);
border-radius : var(--panelRadius); border-radius: var(--panelRadius);
overflow : hidden; overflow: hidden;
font-size : 13px; font-size: 13px;
.menu-option { .menu-option {
text-align: left; text-align: left;
display : flex; display: flex;
appearance: none; appearance: none;
border : 0px; border: 0px;
font : inherit; font: inherit;
background: transparent; background: transparent;
color : inherit; color: inherit;
margin : 0 auto; margin: 0 auto;
position : relative; position: relative;
width : 100%; width: 100%;
padding : 9px 14px; padding: 9px 14px;
align-items: center; align-items: center;
&::before { &::before {
background : var(--hover); background: var(--hover);
border-radius: 6px; border-radius: 6px;
content : ""; content: "";
--sizeY : 3px; --sizeY: 3px;
--sizeX : 4px; --sizeX: 4px;
top : var(--sizeY); top: var(--sizeY);
left : var(--sizeX); left: var(--sizeX);
bottom : var(--sizeY); bottom: var(--sizeY);
right : var(--sizeX); right: var(--sizeX);
position : absolute; position: absolute;
opacity : 0; opacity: 0;
transform : scale(0.98); transform: scale(0.98);
z-index : -1; z-index: -1;
transition : transform .25s ease-out, opacity .25s ease-out; transition: transform .25s ease-out, opacity .25s ease-out;
} }
&:hover { &:hover {
&::before { &::before {
transition: transform 0s ease-in, opacity 0s ease-in; transition: transform 0s ease-in, opacity 0s ease-in;
opacity : 1; opacity: 1;
transform : scale(1); transform: scale(1);
} }
} }
&:active { &:active {
&::before { &::before {
transition: transform .1s ease-in-out, opacity .1s ease-in-out; transition: transform .1s ease-in-out, opacity .1s ease-in-out;
opacity : 1; opacity: 1;
transform : scale(0.98); transform: scale(0.98);
background: var(--selected-click); background: var(--selected-click);
} }
} }
@ -375,25 +378,25 @@
} }
.menu-body { .menu-body {
overflow : overlay; overflow: overlay;
height : 100%; height: 100%;
display : flex; display: flex;
flex-flow: column; flex-flow: column;
gap : 0px; gap: 0px;
padding : 0px; padding: 0px;
position : relative; position: relative;
} }
.menu-footer { .menu-footer {
width : 100%; width: 100%;
padding: 12px; padding: 12px;
} }
} }
.queue-panel { .queue-panel {
height : 100%; height: 100%;
width : 100%; width: 100%;
display : flex; display: flex;
flex-flow: column; flex-flow: column;
.queue-header-text { .queue-header-text {
@ -402,52 +405,52 @@
.queue-body { .queue-body {
overflow: overlay; overflow: overlay;
height : 100%; height: 100%;
} }
.queue-footer { .queue-footer {
width : 100%; width: 100%;
padding: 12px; padding: 12px;
} }
.autoplay { .autoplay {
background : rgb(200 200 200 / 15%); background: rgb(200 200 200 / 15%);
display : flex; display: flex;
justify-content: center; justify-content: center;
appearance : none; appearance: none;
border : 0; border: 0;
border-radius : 6px; border-radius: 6px;
height : 32px; height: 32px;
width : 32px; width: 32px;
} }
.infinity { .infinity {
content: url("./assets/infinity.svg"); content: url("./assets/infinity.svg");
margin : auto; margin: auto;
} }
} }
.moreinfo-modal { .moreinfo-modal {
.modal-window { .modal-window {
height : 70%; height: 70%;
max-height : 100%; max-height: 100%;
width : 45%; width: 45%;
max-width : 100%; max-width: 100%;
overflow : hidden; overflow: hidden;
line-height: 1.25; line-height: 1.25;
} }
.modal-content { .modal-content {
padding : 1em; padding: 1em;
font-size: 0.8rem; font-size: 0.8rem;
br { br {
display : block; display: block;
/* makes it have a width */ /* makes it have a width */
content : ""; content: "";
/* clears default height */ /* clears default height */
margin : 2em; margin: 2em;
margin-bottom: -0.6rem; margin-bottom: -0.6rem;
} }
} }
@ -457,7 +460,7 @@
.modal-title { .modal-title {
text-align: unset !important; text-align: unset !important;
width : 100%; width: 100%;
&:not(.modal-subtitle) { &:not(.modal-subtitle) {
font-size: 25px; font-size: 25px;
@ -479,8 +482,9 @@
top: 0; top: 0;
left: 0; left: 0;
z-index: -1; z-index: -1;
filter:blur(32px) brightness(50%) saturate(280%); filter: blur(32px) brightness(50%) saturate(280%);
} }
.popover-artwork { .popover-artwork {
width: 200px; width: 200px;
height: 200px; height: 200px;
@ -491,7 +495,8 @@
.song-name { .song-name {
font-weight: 600; font-weight: 600;
} }
.song-artist,.song-album {
.song-artist, .song-album {
opacity: 0.75; opacity: 0.75;
cursor: pointer; 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;
}
}

1
src/renderer/main/app.js
View file

@ -7,6 +7,7 @@ import {Events} from './events.js'
import { wsapi } from "./wsapi_interop.js" import { wsapi } from "./wsapi_interop.js"
import { MusicKitTools } from "./musickittools.js" import { MusicKitTools } from "./musickittools.js"
import { spawnMica } from "./mica.js" import { spawnMica } from "./mica.js"
import { svgIcon } from './components/svg-icon.js'
// Define window objects // Define window objects

20
src/renderer/main/components/svg-icon.js Normal file
View 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"
}
}
})

7
src/renderer/main/vueapp.js
View file

@ -245,6 +245,7 @@ const app = new Vue({
notyf: notyf, notyf: notyf,
idleTimer: null, idleTimer: null,
idleState: false, idleState: false,
appVisible: true
}, },
watch: { watch: {
cfg: { cfg: {
@ -276,6 +277,12 @@ const app = new Vue({
}, false) }, false)
}, },
methods: { methods: {
hotReload() {
this.appVisible = false
setTimeout(() => {
this.appVisible = true
}, 1000)
},
setWindowHash(route = "") { setWindowHash(route = "") {
window.location.hash = `#${route}`; window.location.hash = `#${route}`;
}, },

6
src/renderer/style.less
View file

@ -858,6 +858,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
} }
.app-sidebar-item { .app-sidebar-item {
--iconSize: 18px;
display: flex; display: flex;
width: 100%; width: 100%;
padding: 8px 12px; padding: 8px 12px;
@ -872,6 +873,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
transition: transform 0.1s; transition: transform 0.1s;
text-align: left; text-align: left;
align-items: center; align-items: center;
gap: 12px;
&.app-sidebar-item-playlist { &.app-sidebar-item-playlist {
-webkit-user-drag: element; -webkit-user-drag: element;
@ -887,6 +889,10 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
} }
} }
>._svg-icon {
--size: var(--iconSize);
}
} }
.app-sidebar-item:hover { .app-sidebar-item:hover {

19
src/renderer/views/app/sidebar.ejs
View file

@ -158,23 +158,10 @@
</div> </div>
<template v-if="!cfg.general.sidebarCollapsed.playlists"> <template v-if="!cfg.general.sidebarCollapsed.playlists">
<button class="app-sidebar-item" @click="playlistHeaderContextMenu"> <button class="app-sidebar-item" @click="playlistHeaderContextMenu">
<div class="sidebar-icon"> <svg-icon url="./assets/feather/plus.svg"></svg-icon>
<svg <div class="sidebar-item-text">
width="46" {{ getLz("action.createNew") }}
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> </div>
{{ getLz("action.createNew") }}
</button> </button>
<sidebar-playlist <sidebar-playlist
v-for="item in getPlaylistFolderChildren('p.playlistsroot')" v-for="item in getPlaylistFolderChildren('p.playlistsroot')"

14
src/renderer/views/components/settings-window.ejs
View file

@ -6,7 +6,7 @@
<b-tabs class="no-style" pills vertical content-class="mt-3" v-model="$store.state.pageState['settings'].currentTabIndex"> <b-tabs class="no-style" pills vertical content-class="mt-3" v-model="$store.state.pageState['settings'].currentTabIndex">
<b-tab> <b-tab>
<template #title> <template #title>
<div>⚙️</div> <div><svg-icon url="./assets/settings.svg" classes="md" name="settings-general" /></div>
<div> <div>
{{ $root.getLz('settings.header.general') }} {{ $root.getLz('settings.header.general') }}
</div> </div>
@ -234,7 +234,7 @@
</b-tab> </b-tab>
<b-tab> <b-tab>
<template #title> <template #title>
<div>🔊</div> <div><svg-icon url="./assets/feather/headphones.svg" classes="md" name="settings-audio" /></div>
<div> <div>
{{ $root.getLz('settings.header.audio') }} {{ $root.getLz('settings.header.audio') }}
</div> </div>
@ -372,7 +372,7 @@
</b-tab> </b-tab>
<b-tab v-if="app.cfg.advanced.AudioContext"> <b-tab v-if="app.cfg.advanced.AudioContext">
<template #title> <template #title>
<div>✨</div> <div><svg-icon url="./assets/feather/zap.svg" classes="md" name="settings-audiolabs" /></div>
<div> <div>
{{ $root.getLz('settings.option.audio.audioLab') }} {{ $root.getLz('settings.option.audio.audioLab') }}
</div> </div>
@ -383,7 +383,7 @@
</b-tab> </b-tab>
<b-tab> <b-tab>
<template #title> <template #title>
<div>🎨</div> <div><svg-icon url="./assets/feather/pen-tool.svg" classes="md" name="settings-visual" /></div>
<div> <div>
{{ $root.getLz('settings.header.visual') }} {{ $root.getLz('settings.header.visual') }}
</div> </div>
@ -624,7 +624,7 @@
</b-tab> </b-tab>
<b-tab> <b-tab>
<template #title> <template #title>
<div>🎤</div> <div><svg-icon url="./assets/feather/mic.svg" classes="md" name="settings-lyrics" /></div>
<div> <div>
{{ $root.getLz('settings.header.lyrics') }} {{ $root.getLz('settings.header.lyrics') }}
</div> </div>
@ -963,7 +963,7 @@
</b-tab> </b-tab>
<b-tab> <b-tab>
<template #title> <template #title>
<div>🔌</div> <div><svg-icon url="./assets/feather/radio.svg" classes="md" name="settings-connectivity" /></div>
<div> <div>
{{ $root.getLz('settings.header.connectivity') }} {{ $root.getLz('settings.header.connectivity') }}
</div> </div>
@ -1147,7 +1147,7 @@
</b-tab> </b-tab>
<b-tab> <b-tab>
<template #title> <template #title>
<div>💻</div> <div><svg-icon url="./assets/feather/hard-drive.svg" classes="md" name="settings-advanced" /></div>
<div> <div>
{{$root.getLz('settings.header.advanced')}} {{$root.getLz('settings.header.advanced')}}
</div> </div>

6
src/renderer/views/components/sidebar-playlist.ejs
View file

@ -9,7 +9,7 @@
:href="item.href" :href="item.href"
@click='clickEvent()'> @click='clickEvent()'>
<template v-if="!renaming"> <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> <small class="presentNotice" v-if="hasRelatedMediaItems">(Track present)</small>
</template> </template>
<input type="text" v-model="item.attributes.name" class="pl-rename-field" @blur="rename()" @keydown.enter="rename()" v-else> <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() { async mounted() {
if (this.item.type !== "library-playlist-folders") { if (this.item.type !== "library-playlist-folders") {
this.icon = await this.$root.getSvgIcon("./assets/feather/list.svg") this.icon = ("./assets/feather/list.svg")
} else { } else {
this.icon = await this.$root.getSvgIcon("./assets/feather/folder.svg") this.icon = ("./assets/feather/folder.svg")
} }
let playlistMap = this.$root.playlists.trackMapping let playlistMap = this.$root.playlists.trackMapping
if (this.relateMediaItems.length != 0) { if (this.relateMediaItems.length != 0) {

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

@ -2,23 +2,23 @@
<html lang="en"> <html lang="en">
<head> <head>
<link rel="preconnect" href="https://amp-api.music.apple.com/" crossorigin /> <link rel="preconnect" href="https://amp-api.music.apple.com/" crossorigin/>
<link rel="preconnect" href="https://api.music.apple.com/" crossorigin /> <link rel="preconnect" href="https://api.music.apple.com/" crossorigin/>
<link rel="preconnect" href="https://is1-ssl.mzstatic.com/" crossorigin /> <link rel="preconnect" href="https://is1-ssl.mzstatic.com/" crossorigin/>
<link rel="preconnect" href="https://is2-ssl.mzstatic.com/" crossorigin /> <link rel="preconnect" href="https://is2-ssl.mzstatic.com/" crossorigin/>
<link rel="preconnect" href="https://is3-ssl.mzstatic.com/" crossorigin /> <link rel="preconnect" href="https://is3-ssl.mzstatic.com/" crossorigin/>
<link rel="preconnect" href="https://is4-ssl.mzstatic.com/" crossorigin /> <link rel="preconnect" href="https://is4-ssl.mzstatic.com/" crossorigin/>
<link rel="preconnect" href="https://is5-ssl.mzstatic.com/" crossorigin /> <link rel="preconnect" href="https://is5-ssl.mzstatic.com/" crossorigin/>
<link rel="preconnect" href="https://play.itunes.apple.com/" crossorigin /> <link rel="preconnect" href="https://play.itunes.apple.com/" crossorigin/>
<link rel="preconnect" href="https://aod-ssl.itunes.apple.com/" crossorigin /> <link rel="preconnect" href="https://aod-ssl.itunes.apple.com/" crossorigin/>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover">
<title>Cider</title> <title>Cider</title>
<link rel="stylesheet/less" type="text/css" href="style.less" /> <link rel="stylesheet/less" type="text/css" href="style.less"/>
<link rel="stylesheet/less" type="text/css" id="userTheme" href="themes/default.less" /> <link rel="stylesheet/less" type="text/css" id="userTheme" href="themes/default.less"/>
<script src="./lib/less.js"></script> <script src="./lib/less.js"></script>
<script src="<%- (env.dev ? " ./lib/vue.js" : "./lib/vue.dev.js" ) %>"></script> <script src="<%- (env.dev ? " ./lib/vue.js" : "./lib/vue.dev.js") %>"></script>
<script src="./lib/vue-horizontal.js"></script> <script src="./lib/vue-horizontal.js"></script>
<script src="./lib/smoothscroll.js"></script> <script src="./lib/smoothscroll.js"></script>
<script src="./lib/vuex.min.js"></script> <script src="./lib/vuex.min.js"></script>
@ -55,7 +55,7 @@
align-items: center; align-items: center;
} }
#LOADER>svg { #LOADER > svg {
width: 128px; width: 128px;
} }
@ -67,60 +67,64 @@
</style> </style>
</head> </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) %>"
<div id="LOADER"> platform="<%= env.platform %>">
<%- include("../assets/cider-round.svg") %> <div id="LOADER">
</div> <%- include("../assets/cider-round.svg") %>
<div id="app" :class="getAppClasses()" </div>
:window-state="chrome.windowState" <div id="app" :class="getAppClasses()"
:style="getAppStyle()" :library-visible="(chrome.sidebarCollapsed ? 0 : 1)" :window-style="cfg.visual.directives.windowLayout"> v-if="appVisible"
<transition name="fsModeSwitch"> :window-state="chrome.windowState"
<div id="app-main" v-show="appMode == 'player'"> :style="getAppStyle()" :library-visible="(chrome.sidebarCollapsed ? 0 : 1)"
<%- include('app/chrome-top'); %> :window-style="cfg.visual.directives.windowLayout">
<%- include('app/app-navigation'); %> <transition name="fsModeSwitch">
<%- include('app/chrome-bottom'); %> <div id="app-main" v-show="appMode == 'player'">
</div> <%- include('app/chrome-top'); %>
</transition> <%- include('app/app-navigation'); %>
<transition name="fsModeSwitch"> <%- include('app/chrome-bottom'); %>
<div class="fullscreen-view-container" v-if="appMode == 'fullscreen'"> </div>
<fullscreen-view :image="currentArtUrlRaw" :time="lyriccurrenttime" :lyrics="lyrics" </transition>
:richlyrics="richlyrics"></fullscreen-view> <transition name="fsModeSwitch">
</div> <div class="fullscreen-view-container" v-if="appMode == 'fullscreen'">
</transition> <fullscreen-view :image="currentArtUrlRaw" :time="lyriccurrenttime" :lyrics="lyrics"
<transition name="fsModeSwitch"> :richlyrics="richlyrics"></fullscreen-view>
<div class="fullscreen-view-container" v-if="appMode == 'mini'"> </div>
<mini-view :image="currentArtUrlRaw" :time="lyriccurrenttime" :lyrics="lyrics" :richlyrics="richlyrics"> </transition>
</mini-view> <transition name="fsModeSwitch">
</div> <div class="fullscreen-view-container" v-if="appMode == 'mini'">
</transition> <mini-view :image="currentArtUrlRaw" :time="lyriccurrenttime" :lyrics="lyrics" :richlyrics="richlyrics">
<transition name="fsModeSwitch"> </mini-view>
<div class="fullscreen-view-container oobe" v-if="appMode == 'oobe'"> </div>
<cider-oobe></cider-oobe> </transition>
</div> <transition name="fsModeSwitch">
</transition> <div class="fullscreen-view-container oobe" v-if="appMode == 'oobe'">
<%- include('app/panels'); %> <cider-oobe></cider-oobe>
<div class="cursor" v-if="chrome.showCursor"></div> </div>
</div> </transition>
<%- include('app/panels'); %>
<div class="cursor" v-if="chrome.showCursor"></div>
</div>
<% for(var i=0; i < Object.keys(env.components).length ; i++) {%> <% for(var i = 0; i < Object.keys(env.components).length ; i++) { %>
<%- include(env.components[i]); %> <%- 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>
<script src="index.js?v=1"></script>
<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 type="text/x-template" id="am-musiccovershelf">
</script>
<script src="index.js?v=1"></script>
<script type="text/x-template" id="am-musiccovershelf">
<h1>{{ component.attributes.title.stringForDisplay }}</h1> <h1>{{ component.attributes.title.stringForDisplay }}</h1>
</script> </script>
<!-- Sidebar Item --> <!-- Sidebar Item -->
<script type="text/x-template" id="sidebar-library-item"> <script type="text/x-template" id="sidebar-library-item">
<button class="app-sidebar-item" <button class="app-sidebar-item"
:class="$parent.getSidebarItemClass(page)" @click="$root.setWindowHash(page)"> :class="$parent.getSidebarItemClass(page)" @click="$root.setWindowHash(page)">
<div class="sidebar-icon" v-html="svgIconData" v-if="svgIconData != ''"></div> <svg-icon :url="svgIconData" v-if="svgIconData != ''" />
{{ name }} <span class="sidebar-item-text">{{ name }}</span>
</button> </button>
</script> </script>

1
src/renderer/views/pages/zoo.ejs
View file

@ -1,5 +1,6 @@
<script type="text/x-template" id="cider-zoo"> <script type="text/x-template" id="cider-zoo">
<div class="content-inner"> <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> <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> <button @click="app.playMediaItemById('1592151778', 'album')">Play Test Album</button>
{{ $store.state.test }} {{ $store.state.test }}