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() {
if (this.svgIcon) {
this.svgIconData = await this.app.getSvgIcon(this.svgIcon);
this.svgIconData = this.svgIcon;
}
},
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 {
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;

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

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

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

@ -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>
<svg-icon url="./assets/feather/plus.svg"></svg-icon>
<div class="sidebar-item-text">
{{ getLz("action.createNew") }}
</div>
{{ getLz("action.createNew") }}
</button>
<sidebar-playlist
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-tab>
<template #title>
<div>⚙️</div>
<div><svg-icon url="./assets/settings.svg" classes="md" name="settings-general" /></div>
<div>
{{ $root.getLz('settings.header.general') }}
</div>
@ -234,7 +234,7 @@
</b-tab>
<b-tab>
<template #title>
<div>🔊</div>
<div><svg-icon url="./assets/feather/headphones.svg" classes="md" name="settings-audio" /></div>
<div>
{{ $root.getLz('settings.header.audio') }}
</div>
@ -372,7 +372,7 @@
</b-tab>
<b-tab v-if="app.cfg.advanced.AudioContext">
<template #title>
<div>✨</div>
<div><svg-icon url="./assets/feather/zap.svg" classes="md" name="settings-audiolabs" /></div>
<div>
{{ $root.getLz('settings.option.audio.audioLab') }}
</div>
@ -383,7 +383,7 @@
</b-tab>
<b-tab>
<template #title>
<div>🎨</div>
<div><svg-icon url="./assets/feather/pen-tool.svg" classes="md" name="settings-visual" /></div>
<div>
{{ $root.getLz('settings.header.visual') }}
</div>
@ -624,7 +624,7 @@
</b-tab>
<b-tab>
<template #title>
<div>🎤</div>
<div><svg-icon url="./assets/feather/mic.svg" classes="md" name="settings-lyrics" /></div>
<div>
{{ $root.getLz('settings.header.lyrics') }}
</div>
@ -963,7 +963,7 @@
</b-tab>
<b-tab>
<template #title>
<div>🔌</div>
<div><svg-icon url="./assets/feather/radio.svg" classes="md" name="settings-connectivity" /></div>
<div>
{{ $root.getLz('settings.header.connectivity') }}
</div>
@ -1147,7 +1147,7 @@
</b-tab>
<b-tab>
<template #title>
<div>💻</div>
<div><svg-icon url="./assets/feather/hard-drive.svg" classes="md" name="settings-advanced" /></div>
<div>
{{$root.getLz('settings.header.advanced')}}
</div>

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

@ -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) {

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

@ -2,23 +2,23 @@
<html lang="en">
<head>
<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://is1-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://is4-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://aod-ssl.itunes.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://is1-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://is4-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://aod-ssl.itunes.apple.com/" crossorigin/>
<meta charset="UTF-8">
<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">
<title>Cider</title>
<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" href="style.less"/>
<link rel="stylesheet/less" type="text/css" id="userTheme" href="themes/default.less"/>
<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/smoothscroll.js"></script>
<script src="./lib/vuex.min.js"></script>
@ -55,7 +55,7 @@
align-items: center;
}
#LOADER>svg {
#LOADER > svg {
width: 128px;
}
@ -67,60 +67,64 @@
</style>
</head>
<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()"
: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'); %>
<%- include('app/app-navigation'); %>
<%- include('app/chrome-bottom'); %>
</div>
</transition>
<transition name="fsModeSwitch">
<div class="fullscreen-view-container" v-if="appMode == 'fullscreen'">
<fullscreen-view :image="currentArtUrlRaw" :time="lyriccurrenttime" :lyrics="lyrics"
:richlyrics="richlyrics"></fullscreen-view>
</div>
</transition>
<transition name="fsModeSwitch">
<div class="fullscreen-view-container" v-if="appMode == 'mini'">
<mini-view :image="currentArtUrlRaw" :time="lyriccurrenttime" :lyrics="lyrics" :richlyrics="richlyrics">
</mini-view>
</div>
</transition>
<transition name="fsModeSwitch">
<div class="fullscreen-view-container oobe" v-if="appMode == 'oobe'">
<cider-oobe></cider-oobe>
</div>
</transition>
<%- include('app/panels'); %>
<div class="cursor" v-if="chrome.showCursor"></div>
</div>
<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()"
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'); %>
<%- include('app/app-navigation'); %>
<%- include('app/chrome-bottom'); %>
</div>
</transition>
<transition name="fsModeSwitch">
<div class="fullscreen-view-container" v-if="appMode == 'fullscreen'">
<fullscreen-view :image="currentArtUrlRaw" :time="lyriccurrenttime" :lyrics="lyrics"
:richlyrics="richlyrics"></fullscreen-view>
</div>
</transition>
<transition name="fsModeSwitch">
<div class="fullscreen-view-container" v-if="appMode == 'mini'">
<mini-view :image="currentArtUrlRaw" :time="lyriccurrenttime" :lyrics="lyrics" :richlyrics="richlyrics">
</mini-view>
</div>
</transition>
<transition name="fsModeSwitch">
<div class="fullscreen-view-container oobe" v-if="appMode == 'oobe'">
<cider-oobe></cider-oobe>
</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++) {%>
<%- include(env.components[i]); %>
<% } %>
<% for(var i = 0; i < Object.keys(env.components).length ; 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>
<script src="index.js?v=1"></script>
<script type="text/x-template" id="am-musiccovershelf">
<script type="text/x-template" id="am-musiccovershelf">
<h1>{{ component.attributes.title.stringForDisplay }}</h1>
</script>
<!-- Sidebar Item -->
<script type="text/x-template" id="sidebar-library-item">
<!-- Sidebar Item -->
<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
src/renderer/views/pages/zoo.ejs
View file

@ -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 }}