Merge branch 'main' into enhancement/search-bar
This commit is contained in:
Pedro Galhardo
commit
b842c36072
17 changed files with 19204 additions and 996 deletions
|
|
@ -14,7 +14,8 @@
|
|||
"homepage": "https://cider.sh/",
|
||||
"buildResources": "resources",
|
||||
"scripts": {
|
||||
"build": "tsc",
|
||||
"build": "tsc && yarn compile-less",
|
||||
"compile-less": "lessc ./src/renderer/style.less ./src/renderer/style.css",
|
||||
"watch": "tsc --watch",
|
||||
"start": "run-script-os",
|
||||
"start:win32": "yarn build && set ELECTRON_ENABLE_LOGGING=true && electron ./build/index.js --enable-accelerated-mjpeg-decode --enable-accelerated-video --disable-gpu-driver-bug-workarounds --ignore-gpu-blacklist --enable-native-gpu-memory-buffers",
|
||||
|
|
@ -83,6 +84,7 @@
|
|||
"electron-builder": "^23.0.3",
|
||||
"electron-builder-notarize-pkg": "^1.2.0",
|
||||
"electron-webpack": "^2.8.2",
|
||||
"less": "^4.1.3",
|
||||
"musickit-typescript": "^1.2.4",
|
||||
"typescript": "^4.6.4",
|
||||
"vue-devtools": "^5.1.4",
|
||||
|
|
|
|||
|
|
@ -89,6 +89,7 @@ export class BrowserWindow {
|
|||
"pages/plugin-renderer",
|
||||
"pages/keybinds",
|
||||
"pages/oobe",
|
||||
"components/app-content",
|
||||
"components/mediaitem-artwork",
|
||||
"components/artwork-material",
|
||||
"components/menu-panel",
|
||||
|
|
@ -129,150 +130,150 @@ export class BrowserWindow {
|
|||
{
|
||||
page: "library-recentlyadded",
|
||||
component: `<cider-recentlyadded></cider-recentlyadded>`,
|
||||
condition: "page == 'library-recentlyadded'"
|
||||
condition: "$root.page == 'library-recentlyadded'"
|
||||
},
|
||||
{
|
||||
page: "plugin-renderer",
|
||||
component: `<plugin-renderer></plugin-renderer>`,
|
||||
condition: "page == 'plugin-renderer'"
|
||||
condition: "$root.page == 'plugin-renderer'"
|
||||
},
|
||||
{
|
||||
page: "zoo",
|
||||
component: "<cider-zoo></cider-zoo>",
|
||||
condition: "page == 'zoo'"
|
||||
condition: "$root.page == 'zoo'"
|
||||
},
|
||||
{
|
||||
page: "podcasts",
|
||||
component: `<apple-podcasts></apple-podcasts>`,
|
||||
condition: `page == 'podcasts'`
|
||||
condition: `$root.page == 'podcasts'`
|
||||
}, {
|
||||
page: "library-videos",
|
||||
component: `<cider-library-videos></cider-library-videos>`,
|
||||
condition: `page == 'library-videos'`
|
||||
condition: `$root.page == 'library-videos'`
|
||||
}, {
|
||||
page: "apple-account-settings",
|
||||
component: `<apple-account-settings></apple-account-settings>`,
|
||||
condition: `page == 'apple-account-settings'`
|
||||
condition: `$root.page == 'apple-account-settings'`
|
||||
}, {
|
||||
page: "about",
|
||||
component: `<about-page></about-page>`,
|
||||
condition: `page == 'about'`
|
||||
condition: `$root.page == 'about'`
|
||||
}, {
|
||||
page: "cider-artist",
|
||||
component: `<cider-artist :data="artistPage.data"></cider-artist>`,
|
||||
condition: `page == 'artist-page' && artistPage.data.attributes`
|
||||
component: `<cider-artist :data="$root.artistPage.data"></cider-artist>`,
|
||||
condition: `$root.page == 'artist-page' && $root.artistPage.data.attributes`
|
||||
}, {
|
||||
page: "collection-list",
|
||||
component: `<cider-collection-list :data="collectionList.response" :type="collectionList.type" :title="collectionList.title"></cider-collection-list>`,
|
||||
condition: `page == 'collection-list'`
|
||||
component: `<cider-collection-list :data="$root.collectionList.response" :type="$root.collectionList.type" :title="$root.collectionList.title"></cider-collection-list>`,
|
||||
condition: `$root.page == 'collection-list'`
|
||||
}, {
|
||||
page: "home",
|
||||
component: `<cider-home></cider-home>`,
|
||||
condition: `page == 'home'`
|
||||
condition: `$root.page == 'home'`
|
||||
}, {
|
||||
page: "artist-feed",
|
||||
component: `<cider-artist-feed></cider-artist-feed>`,
|
||||
condition: `page == 'artist-feed'`
|
||||
condition: `$root.page == 'artist-feed'`
|
||||
}, {
|
||||
page: "playlist-inline",
|
||||
component: `<playlist-inline :data="showingPlaylist"></playlist-inline>`,
|
||||
condition: `modals.showPlaylist`
|
||||
component: `<playlist-inline :data="$root.showingPlaylist"></playlist-inline>`,
|
||||
condition: `$root.modals.showPlaylist`
|
||||
}, {
|
||||
page: "playlist_",
|
||||
component: `<cider-playlist :data="showingPlaylist"></cider-playlist>`,
|
||||
condition: `page.includes('playlist_')`
|
||||
component: `<cider-playlist :data="$root.showingPlaylist"></cider-playlist>`,
|
||||
condition: `$root.page.includes('playlist_')`
|
||||
}, {
|
||||
page: "album_",
|
||||
component: `<cider-playlist :data="showingPlaylist"></cider-playlist>`,
|
||||
condition: `page.includes('album_')`
|
||||
component: `<cider-playlist :data="$root.showingPlaylist"></cider-playlist>`,
|
||||
condition: `$root.page.includes('album_')`
|
||||
}, {
|
||||
page: "recordLabel_",
|
||||
component: `<cider-recordlabel :data="showingPlaylist"></cider-recordlabel>`,
|
||||
condition: `page.includes('recordLabel_')`
|
||||
component: `<cider-recordlabel :data="$root.showingPlaylist"></cider-recordlabel>`,
|
||||
condition: `$root.page.includes('recordLabel_')`
|
||||
}, {
|
||||
page: "multiroom",
|
||||
component: `<cider-multiroom :data="multiroom"></cider-multiroom>`,
|
||||
condition: `page.includes('multiroom')`
|
||||
component: `<cider-multiroom :data="$root.multiroom"></cider-multiroom>`,
|
||||
condition: `$root.page.includes('multiroom')`
|
||||
}, {
|
||||
page: "curator_",
|
||||
component: `<cider-recordlabel :data="showingPlaylist"></cider-recordlabel>`,
|
||||
condition: `page.includes('curator_')`
|
||||
component: `<cider-recordlabel :data="$root.showingPlaylist"></cider-recordlabel>`,
|
||||
condition: `$root.page.includes('curator_')`
|
||||
}, {
|
||||
page: "browsepage",
|
||||
component: `<cider-browse :data="browsepage"></cider-browse>`,
|
||||
condition: `page == 'browse'`,
|
||||
component: `<cider-browse :data="$root.browsepage"></cider-browse>`,
|
||||
condition: `$root.page == 'browse'`,
|
||||
onEnter: ``
|
||||
}, {
|
||||
page: "groupings",
|
||||
component: `<cider-groupings :data="browsepage"></cider-groupings>`,
|
||||
condition: `page == 'groupings'`,
|
||||
component: `<cider-groupings :data="$root.browsepage"></cider-groupings>`,
|
||||
condition: `$root.page == 'groupings'`,
|
||||
onEnter: ``
|
||||
}, {
|
||||
page: "charts",
|
||||
component: `<cider-charts :data="browsepage"></cider-charts>`,
|
||||
condition: `page == 'charts'`,
|
||||
component: `<cider-charts :data="$root.browsepage"></cider-charts>`,
|
||||
condition: `$root.page == 'charts'`,
|
||||
onEnter: ``
|
||||
}, {
|
||||
page: "listen_now",
|
||||
component: `<cider-listen-now :data="listennow"></cider-listen-now>`,
|
||||
condition: `page == 'listen_now'`,
|
||||
component: `<cider-listen-now :data="$root.listennow"></cider-listen-now>`,
|
||||
condition: `$root.page == 'listen_now'`,
|
||||
onEnter: ``
|
||||
}, {
|
||||
page: "radio",
|
||||
component: `<cider-radio :data="radio"></cider-radio>`,
|
||||
condition: `page == 'radio'`,
|
||||
component: `<cider-radio :data="$root.radio"></cider-radio>`,
|
||||
condition: `$root.page == 'radio'`,
|
||||
onEnter: ``
|
||||
}, {
|
||||
page: "settings",
|
||||
component: `<cider-settings></cider-settings>`,
|
||||
condition: `page == 'settings'`
|
||||
condition: `$root.page == 'settings'`
|
||||
}, {
|
||||
page: "installed-themes",
|
||||
component: `<installed-themes></installed-themes>`,
|
||||
condition: `page == 'installed-themes'`
|
||||
condition: `$root.page == 'installed-themes'`
|
||||
}, {
|
||||
page: "search",
|
||||
component: `<cider-search :search="search"></cider-search>`,
|
||||
condition: `page == 'search'`
|
||||
component: `<cider-search :search="$root.search"></cider-search>`,
|
||||
condition: `$root.page == 'search'`
|
||||
}, {
|
||||
page: "library-songs",
|
||||
component: `<cider-library-songs :data="library.songs"></cider-library-songs>`,
|
||||
condition: `page == 'library-songs'`,
|
||||
component: `<cider-library-songs :data="$root.library.songs"></cider-library-songs>`,
|
||||
condition: `$root.page == 'library-songs'`,
|
||||
onEnter: ``
|
||||
}, {
|
||||
page: "library-albums",
|
||||
component: `<cider-library-albums :data="library.songs"></cider-library-albums>`,
|
||||
condition: `page == 'library-albums'`,
|
||||
component: `<cider-library-albums :data="$root.library.songs"></cider-library-albums>`,
|
||||
condition: `$root.page == 'library-albums'`,
|
||||
onEnter: ``
|
||||
}, {
|
||||
page: "library-artists",
|
||||
component: `<cider-library-artists></cider-library-artists>`,
|
||||
condition: `page == 'library-artists'`,
|
||||
condition: `$root.page == 'library-artists'`,
|
||||
onEnter: ``
|
||||
}, {
|
||||
page: "appleCurator",
|
||||
component: `<cider-applecurator :data="appleCurator"></cider-applecurator>`,
|
||||
condition: `page.includes('appleCurator')`
|
||||
component: `<cider-applecurator :data="$root.appleCurator"></cider-applecurator>`,
|
||||
condition: `$root.page.includes('appleCurator')`
|
||||
}, {
|
||||
page: "themes-github",
|
||||
component: `<themes-github></themes-github>`,
|
||||
condition: `page == 'themes-github'`
|
||||
condition: `$root.page == 'themes-github'`
|
||||
}, {
|
||||
page: "plugins-github",
|
||||
component: `<plugins-github></plugins-github>`,
|
||||
condition: `page == 'plugins-github'`
|
||||
condition: `$root.page == 'plugins-github'`
|
||||
}, {
|
||||
page: "remote-pair",
|
||||
component: `<remote-pair></remote-pair>`,
|
||||
condition: `page == 'remote-pair'`
|
||||
condition: `$root.page == 'remote-pair'`
|
||||
}, {
|
||||
page: "audiolabs",
|
||||
component: `<audiolabs-page></audiolabs-page>`,
|
||||
condition: `page == 'audiolabs'`
|
||||
condition: `$root.page == 'audiolabs'`
|
||||
}, {
|
||||
page: "replay",
|
||||
component: `<replay-page></replay-page>`,
|
||||
condition: `page == 'replay'`
|
||||
condition: `$root.page == 'replay'`
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1873,7 +1873,7 @@ input[type=checkbox][switch]:checked:active::before {
|
|||
align-items: center;
|
||||
color: white;
|
||||
|
||||
> svg {
|
||||
> ._svg-icon {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
pointer-events: none;
|
||||
|
|
|
|||
392
src/renderer/less/fullscreen.less
Normal file
392
src/renderer/less/fullscreen.less
Normal file
|
|
@ -0,0 +1,392 @@
|
|||
.fullscreen-view-container {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: black;
|
||||
z-index: 99;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.fullscreen-view {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: black;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.app-content-container {
|
||||
width:100%;
|
||||
height:100%;
|
||||
#app-content {
|
||||
width:100%;
|
||||
height:100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.fs-row {
|
||||
flex-grow: 0.5;
|
||||
}
|
||||
|
||||
.playback-button--small.active {
|
||||
background-color: rgb(200 200 200 / 25%);
|
||||
}
|
||||
|
||||
.playback-button--small {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.right-col {
|
||||
height: 50vh;
|
||||
}
|
||||
|
||||
.bg-artwork-container {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1121px) {
|
||||
.display--large {
|
||||
display: flex !important;
|
||||
}
|
||||
}
|
||||
|
||||
.display--large {
|
||||
display: flex;
|
||||
|
||||
.slider {
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.volume-button--small {
|
||||
border-radius: 6px;
|
||||
color: inherit;
|
||||
background-size: 16px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-color: transparent;
|
||||
height: 15px;
|
||||
width: 30px;
|
||||
border: 0px;
|
||||
box-shadow: unset;
|
||||
opacity: 0.70;
|
||||
background-image: url("./assets/feather/volume-2.svg");
|
||||
}
|
||||
|
||||
.volume-button--small:active {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
.volume-button--small.active {
|
||||
background-image: url("./assets/feather/volume.svg");
|
||||
}
|
||||
|
||||
input[type=range] {
|
||||
-webkit-appearance: none;
|
||||
height: 4px;
|
||||
background: rgba(255, 255, 255, 0.4);
|
||||
border-radius: 5px;
|
||||
background-size: 70% 100%;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
&::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
border-radius: 50%;
|
||||
background: rgb(50 50 50);
|
||||
cursor: default;
|
||||
box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.4);
|
||||
transition: all var(--appleTransition);
|
||||
}
|
||||
|
||||
&::-webkit-slider-thumb:hover {
|
||||
background-image: radial-gradient(var(--songProgressColor) 2px, transparent 3px, transparent 10px);
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
&::-webkit-slider-thumb:active {
|
||||
background-image: radial-gradient(var(--songProgressColor) 3px, transparent 4px, transparent 10px);
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
&::-webkit-slider-runnable-track {
|
||||
-webkit-appearance: none;
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.background {
|
||||
position: absolute;
|
||||
background-size: cover;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.bgArtworkMaterial {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.bg-artwork-container {
|
||||
z-index: unset;
|
||||
}
|
||||
|
||||
.bg-artwork-container .bg-artwork {
|
||||
filter: brightness(85%) saturate(95%) blur(180px) contrast(0.9) opacity(0.9);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.lyrics-col {
|
||||
|
||||
height: 62vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
width: 80%;
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
box-shadow: unset;
|
||||
}
|
||||
|
||||
&:hover ::-webkit-scrollbar-thumb {
|
||||
box-shadow: inset 0px 0px 10px 10px rgb(200 200 200 / 50%);
|
||||
}
|
||||
|
||||
.no-lyrics {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.lyric-line {
|
||||
font-size: 35px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.queue-col {
|
||||
|
||||
width: 60vh;
|
||||
height: 62vh;
|
||||
|
||||
.queue-title {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.queue-panel > * {
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
box-shadow: unset;
|
||||
}
|
||||
|
||||
&:hover ::-webkit-scrollbar-thumb {
|
||||
box-shadow: inset 0px 0px 10px 10px rgb(200 200 200 / 50%);
|
||||
}
|
||||
}
|
||||
|
||||
.tab-toggles {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 15vh;
|
||||
height: 5vh;
|
||||
justify-content: space-evenly;
|
||||
|
||||
.volume {
|
||||
background-image: url("./assets/feathers/volume.svg");
|
||||
padding: 0.5vh;
|
||||
width: 2vh;
|
||||
height: 2vh;
|
||||
background-origin: content-box;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.queue {
|
||||
background-image: url("./assets/list.svg");
|
||||
padding: 0.5vh;
|
||||
width: 2.5vh;
|
||||
height: 2.5vh;
|
||||
background-origin: content-box;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.lyrics {
|
||||
background-image: url("./assets/quote-right.svg");
|
||||
padding: 0.5vh;
|
||||
width: 2.5vh;
|
||||
height: 2.5vh;
|
||||
background-origin: content-box;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.active {
|
||||
background-color: rgba(200, 200, 200, 0.7);
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.artwork-col {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.artwork {
|
||||
width: 50vh;
|
||||
height: 50vh;
|
||||
}
|
||||
|
||||
.controls-parents {
|
||||
width: 50vh;
|
||||
}
|
||||
|
||||
.app-playback-controls {
|
||||
.song-artist, .song-name {
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
font-size: 0.9em;
|
||||
height: 1.2em;
|
||||
line-height: 0.9em;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 360px;
|
||||
|
||||
.song-name-normal {
|
||||
height: inherit;
|
||||
}
|
||||
|
||||
&.song-artist-marquee {
|
||||
> marquee {
|
||||
//margin-bottom: -3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.song-artist {
|
||||
font-size: 0.875em;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.song-name {
|
||||
width: unset !important;
|
||||
margin-top: 0.15vh;
|
||||
display: -webkit-box;
|
||||
line-height: 1.2;
|
||||
text-overflow: ellipsis;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.app-playback-controls .playback-info {
|
||||
margin-top: 0.5vh;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
|
||||
input[type="range"] {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
> div {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.app-playback-controls .song-progress {
|
||||
@bgColor: transparent;
|
||||
//height: 16px;
|
||||
position: absolute;
|
||||
bottom: -1.5vh;
|
||||
left: 0px;
|
||||
background: @bgColor;
|
||||
|
||||
.song-duration p {
|
||||
font-weight: 400;
|
||||
font-size: 10px;
|
||||
height: 1.2em;
|
||||
line-height: 1.3em;
|
||||
overflow: hidden;
|
||||
margin: 0 0 0 0.25em;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
> input[type=range] {
|
||||
&::-webkit-slider-thumb {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input[type=range] {
|
||||
appearance: none;
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
background-color: rgb(200 200 200 / 10%);
|
||||
border-radius: 2px;
|
||||
|
||||
&::-webkit-slider-thumb {
|
||||
opacity: 0;
|
||||
transform: scale(0.5);
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 100%;
|
||||
background: var(--songProgressColor);
|
||||
cursor: default;
|
||||
transition: opacity .10s var(--appleEase), transform .10s var(--appleEase);
|
||||
}
|
||||
|
||||
&::-moz-range-thumb {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 100%;
|
||||
background: var(--songProgressColor);
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.control-buttons {
|
||||
margin-top: 2vh;
|
||||
display: inline-flex;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
410
src/renderer/less/miniplayer.less
Normal file
410
src/renderer/less/miniplayer.less
Normal file
|
|
@ -0,0 +1,410 @@
|
|||
.mini-view {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.fs-row {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.playback-button--small.active {
|
||||
background-color: rgb(200 200 200 / 25%);
|
||||
}
|
||||
|
||||
.player-exit {
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
|
||||
.player-pin {
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
min-width: 20px;
|
||||
min-height: 20px;
|
||||
top: 5px;
|
||||
right: 30px;
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
|
||||
#mini-pin {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.player-pin:hover #mini-pin {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.playback-button--small {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.right-col {
|
||||
height: 50vh;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1121px) {
|
||||
.display--large {
|
||||
display: flex !important;
|
||||
}
|
||||
}
|
||||
|
||||
.display--large {
|
||||
display: flex;
|
||||
|
||||
.slider {
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.volume-button--small {
|
||||
border-radius: 6px;
|
||||
color: inherit;
|
||||
background-size: 16px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-color: transparent;
|
||||
height: 15px;
|
||||
width: 30px;
|
||||
border: 0px;
|
||||
box-shadow: unset;
|
||||
opacity: 0.70;
|
||||
background-image: url("./assets/feather/volume-2.svg");
|
||||
}
|
||||
|
||||
.volume-button--small:active {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
.volume-button--small.active {
|
||||
background-image: url("./assets/feather/volume.svg");
|
||||
}
|
||||
|
||||
input[type=range] {
|
||||
-webkit-appearance: none;
|
||||
height: 4px;
|
||||
background: rgba(255, 255, 255, 0.4);
|
||||
border-radius: 5px;
|
||||
background-size: 70% 100%;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
&::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
border-radius: 50%;
|
||||
background: rgb(50 50 50);
|
||||
cursor: default;
|
||||
box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.4);
|
||||
transition: all var(--appleTransition);
|
||||
}
|
||||
|
||||
&::-webkit-slider-thumb:hover {
|
||||
background-image: radial-gradient(var(--songProgressColor) 2px, transparent 3px, transparent 10px);
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
&::-webkit-slider-thumb:active {
|
||||
background-image: radial-gradient(var(--songProgressColor) 3px, transparent 4px, transparent 10px);
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
&::-webkit-slider-runnable-track {
|
||||
-webkit-appearance: none;
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.background {
|
||||
position: absolute;
|
||||
background-size: cover;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-webkit-user-select: none;
|
||||
-webkit-app-region: drag;
|
||||
|
||||
.bgArtworkMaterial {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.bg-artwork-container {
|
||||
z-index: unset;
|
||||
}
|
||||
|
||||
.bg-artwork-container .bg-artwork {
|
||||
filter: brightness(85%) saturate(95%) blur(180px) contrast(0.9) opacity(0.9);
|
||||
}
|
||||
|
||||
.no-animation {
|
||||
animation: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.lyrics-col {
|
||||
|
||||
height: 62vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
width: 80%;
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
box-shadow: unset;
|
||||
}
|
||||
|
||||
&:hover ::-webkit-scrollbar-thumb {
|
||||
box-shadow: inset 0px 0px 10px 10px rgb(200 200 200 / 50%);
|
||||
}
|
||||
|
||||
.no-lyrics {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.lyric-line {
|
||||
font-size: 35px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.queue-col {
|
||||
|
||||
width: 60vh;
|
||||
height: 50vh;
|
||||
|
||||
.queue-title {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.queue-panel > * {
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
box-shadow: unset;
|
||||
}
|
||||
|
||||
&:hover ::-webkit-scrollbar-thumb {
|
||||
box-shadow: inset 0px 0px 10px 10px rgb(200 200 200 / 50%);
|
||||
}
|
||||
}
|
||||
|
||||
.tab-toggles {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 15vh;
|
||||
height: 5vh;
|
||||
justify-content: space-evenly;
|
||||
|
||||
.volume {
|
||||
background-image: url("./assets/feathers/volume.svg");
|
||||
padding: 0.5vh;
|
||||
width: 2vh;
|
||||
height: 2vh;
|
||||
background-origin: content-box;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.queue {
|
||||
background-image: url("./assets/list.svg");
|
||||
padding: 0.5vh;
|
||||
width: 2.5vh;
|
||||
height: 2.5vh;
|
||||
background-origin: content-box;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.lyrics {
|
||||
background-image: url("./assets/quote-right.svg");
|
||||
padding: 0.5vh;
|
||||
width: 2.5vh;
|
||||
height: 2.5vh;
|
||||
background-origin: content-box;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.active {
|
||||
background-color: rgba(200, 200, 200, 0.7);
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.artwork-col {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.artwork {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.mediaitem-artwork {
|
||||
border-radius: unset;
|
||||
}
|
||||
}
|
||||
|
||||
.controls-parents {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
background: #0000009e;
|
||||
backdrop-filter: blur(10px);
|
||||
bottom: 0px;
|
||||
z-index: 3;
|
||||
opacity: 0;
|
||||
padding: 3%;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.app-playback-controls {
|
||||
-webkit-app-region: no-drag;
|
||||
|
||||
.song-artist, .song-name {
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
font-size: 0.9em;
|
||||
height: 1.2em;
|
||||
line-height: 0.9em;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 360px;
|
||||
|
||||
.song-name-normal {
|
||||
height: inherit;
|
||||
}
|
||||
|
||||
&.song-artist-marquee {
|
||||
> marquee {
|
||||
//margin-bottom: -3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.song-artist {
|
||||
font-size: 0.875em;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.song-name {
|
||||
width: unset !important;
|
||||
margin-top: 0.15vh;
|
||||
display: -webkit-box;
|
||||
line-height: 1.2;
|
||||
text-overflow: ellipsis;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.app-playback-controls .playback-info {
|
||||
margin-top: 0.5vh;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
|
||||
input[type="range"] {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
> div {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.app-playback-controls .song-progress {
|
||||
@bgColor: transparent;
|
||||
//height: 16px;
|
||||
position: absolute;
|
||||
bottom: -3.5vh;
|
||||
left: 0px;
|
||||
background: @bgColor;
|
||||
|
||||
.song-duration p {
|
||||
font-weight: 400;
|
||||
font-size: 10px;
|
||||
height: 1.2em;
|
||||
line-height: 1.3em;
|
||||
overflow: hidden;
|
||||
margin: 0 0 0 0.25em;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
> input[type=range] {
|
||||
&::-webkit-slider-thumb {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input[type=range] {
|
||||
appearance: none;
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
background-color: rgb(200 200 200 / 10%);
|
||||
border-radius: 2px;
|
||||
|
||||
&::-webkit-slider-thumb {
|
||||
opacity: 0;
|
||||
transform: scale(0.5);
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 100%;
|
||||
background: var(--songProgressColor);
|
||||
cursor: default;
|
||||
transition: opacity .10s var(--appleEase), transform .10s var(--appleEase);
|
||||
}
|
||||
|
||||
&::-moz-range-thumb {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 100%;
|
||||
background: var(--songProgressColor);
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.control-buttons {
|
||||
margin-top: 3.5vh;
|
||||
display: inline-flex;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,7 @@
|
|||
import {html} from "../html.js"
|
||||
|
||||
export const svgIcon = Vue.component("svg-icon", {
|
||||
template: `
|
||||
template: html`
|
||||
<div class="_svg-icon" :class="classes" :svg-name="name" :style="{'--icon': 'url(' + url + ')'}"></div>
|
||||
`,
|
||||
props: {
|
||||
|
|
|
|||
3
src/renderer/main/html.js
Normal file
3
src/renderer/main/html.js
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
export function html (str) {
|
||||
return str[0]
|
||||
}
|
||||
|
|
@ -21,22 +21,22 @@ async function spawnMica() {
|
|||
let lastScreenWidth;
|
||||
let lastScreenHeight;
|
||||
|
||||
let regen = true;
|
||||
let imgSrc = await ipcRenderer.sendSync("get-wallpaper", {
|
||||
let imgSrc = "";
|
||||
let micaCache = await CiderCache.getCache("mica-cache");
|
||||
if (!micaCache) {
|
||||
micaCache = {
|
||||
path: "",
|
||||
data: "",
|
||||
};
|
||||
}
|
||||
if (micaCache.path == imgSrc.path) {
|
||||
imgSrc = micaCache;
|
||||
}else{
|
||||
imgSrc = await ipcRenderer.sendSync("get-wallpaper", {
|
||||
blurAmount: 256
|
||||
});
|
||||
|
||||
// let micaCache = await CiderCache.getCache("mica-cache");
|
||||
// if (!micaCache) {
|
||||
// micaCache = {
|
||||
// path: "",
|
||||
// data: "",
|
||||
// };
|
||||
// }
|
||||
// if (micaCache.path == imgSrc.path) {
|
||||
// regen = false;
|
||||
// imgSrc = micaCache;
|
||||
// }
|
||||
});
|
||||
CiderCache.putCache("mica-cache", imgSrc);
|
||||
}
|
||||
let canvas = document.createElement("canvas");
|
||||
let ctx = canvas.getContext("2d");
|
||||
let img = new Image();
|
||||
|
|
|
|||
18144
src/renderer/style.css
Normal file
18144
src/renderer/style.css
Normal file
File diff suppressed because it is too large
Load diff
|
|
@ -2058,797 +2058,8 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
|
|||
animation: unset !important;
|
||||
}
|
||||
|
||||
.fullscreen-view-container {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: black;
|
||||
z-index: 99;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.fullscreen-view {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: black;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.fs-row {
|
||||
flex-grow: 0.5;
|
||||
}
|
||||
|
||||
.playback-button--small.active {
|
||||
background-color: rgb(200 200 200 / 25%);
|
||||
}
|
||||
|
||||
.playback-button--small {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.right-col {
|
||||
height: 50vh;
|
||||
}
|
||||
|
||||
.bg-artwork-container {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1121px) {
|
||||
.display--large {
|
||||
display: flex !important;
|
||||
}
|
||||
}
|
||||
|
||||
.display--large {
|
||||
display: flex;
|
||||
|
||||
.slider {
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.volume-button--small {
|
||||
border-radius: 6px;
|
||||
color: inherit;
|
||||
background-size: 16px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-color: transparent;
|
||||
height: 15px;
|
||||
width: 30px;
|
||||
border: 0px;
|
||||
box-shadow: unset;
|
||||
opacity: 0.70;
|
||||
background-image: url("./assets/feather/volume-2.svg");
|
||||
}
|
||||
|
||||
.volume-button--small:active {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
.volume-button--small.active {
|
||||
background-image: url("./assets/feather/volume.svg");
|
||||
}
|
||||
|
||||
input[type=range] {
|
||||
-webkit-appearance: none;
|
||||
height: 4px;
|
||||
background: rgba(255, 255, 255, 0.4);
|
||||
border-radius: 5px;
|
||||
background-size: 70% 100%;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
&::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
border-radius: 50%;
|
||||
background: rgb(50 50 50);
|
||||
cursor: default;
|
||||
box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.4);
|
||||
transition: all var(--appleTransition);
|
||||
}
|
||||
|
||||
&::-webkit-slider-thumb:hover {
|
||||
background-image: radial-gradient(var(--songProgressColor) 2px, transparent 3px, transparent 10px);
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
&::-webkit-slider-thumb:active {
|
||||
background-image: radial-gradient(var(--songProgressColor) 3px, transparent 4px, transparent 10px);
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
&::-webkit-slider-runnable-track {
|
||||
-webkit-appearance: none;
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.background {
|
||||
position: absolute;
|
||||
background-size: cover;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.bgArtworkMaterial {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.bg-artwork-container {
|
||||
z-index: unset;
|
||||
}
|
||||
|
||||
.bg-artwork-container .bg-artwork {
|
||||
filter: brightness(85%) saturate(95%) blur(180px) contrast(0.9) opacity(0.9);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.lyrics-col {
|
||||
|
||||
height: 62vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
width: 80%;
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
box-shadow: unset;
|
||||
}
|
||||
|
||||
&:hover ::-webkit-scrollbar-thumb {
|
||||
box-shadow: inset 0px 0px 10px 10px rgb(200 200 200 / 50%);
|
||||
}
|
||||
|
||||
.no-lyrics {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.lyric-line {
|
||||
font-size: 35px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.queue-col {
|
||||
|
||||
width: 60vh;
|
||||
height: 62vh;
|
||||
|
||||
.queue-title {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.queue-panel > * {
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
box-shadow: unset;
|
||||
}
|
||||
|
||||
&:hover ::-webkit-scrollbar-thumb {
|
||||
box-shadow: inset 0px 0px 10px 10px rgb(200 200 200 / 50%);
|
||||
}
|
||||
}
|
||||
|
||||
.tab-toggles {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 15vh;
|
||||
height: 5vh;
|
||||
justify-content: space-evenly;
|
||||
|
||||
.volume {
|
||||
background-image: url("./assets/feathers/volume.svg");
|
||||
padding: 0.5vh;
|
||||
width: 2vh;
|
||||
height: 2vh;
|
||||
background-origin: content-box;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.queue {
|
||||
background-image: url("./assets/list.svg");
|
||||
padding: 0.5vh;
|
||||
width: 2.5vh;
|
||||
height: 2.5vh;
|
||||
background-origin: content-box;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.lyrics {
|
||||
background-image: url("./assets/quote-right.svg");
|
||||
padding: 0.5vh;
|
||||
width: 2.5vh;
|
||||
height: 2.5vh;
|
||||
background-origin: content-box;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.active {
|
||||
background-color: rgba(200, 200, 200, 0.7);
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.artwork-col {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.artwork {
|
||||
width: 50vh;
|
||||
height: 50vh;
|
||||
}
|
||||
|
||||
.controls-parents {
|
||||
width: 50vh;
|
||||
}
|
||||
|
||||
.app-playback-controls {
|
||||
.song-artist, .song-name {
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
font-size: 0.9em;
|
||||
height: 1.2em;
|
||||
line-height: 0.9em;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 360px;
|
||||
|
||||
.song-name-normal {
|
||||
height: inherit;
|
||||
}
|
||||
|
||||
&.song-artist-marquee {
|
||||
> marquee {
|
||||
//margin-bottom: -3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.song-artist {
|
||||
font-size: 0.875em;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.song-name {
|
||||
width: unset !important;
|
||||
margin-top: 0.15vh;
|
||||
display: -webkit-box;
|
||||
line-height: 1.2;
|
||||
text-overflow: ellipsis;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.app-playback-controls .playback-info {
|
||||
margin-top: 0.5vh;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
|
||||
input[type="range"] {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
> div {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.app-playback-controls .song-progress {
|
||||
@bgColor: transparent;
|
||||
//height: 16px;
|
||||
position: absolute;
|
||||
bottom: -1.5vh;
|
||||
left: 0px;
|
||||
background: @bgColor;
|
||||
|
||||
.song-duration p {
|
||||
font-weight: 400;
|
||||
font-size: 10px;
|
||||
height: 1.2em;
|
||||
line-height: 1.3em;
|
||||
overflow: hidden;
|
||||
margin: 0 0 0 0.25em;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
> input[type=range] {
|
||||
&::-webkit-slider-thumb {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input[type=range] {
|
||||
appearance: none;
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
background-color: rgb(200 200 200 / 10%);
|
||||
border-radius: 2px;
|
||||
|
||||
&::-webkit-slider-thumb {
|
||||
opacity: 0;
|
||||
transform: scale(0.5);
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 100%;
|
||||
background: var(--songProgressColor);
|
||||
cursor: default;
|
||||
transition: opacity .10s var(--appleEase), transform .10s var(--appleEase);
|
||||
}
|
||||
|
||||
&::-moz-range-thumb {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 100%;
|
||||
background: var(--songProgressColor);
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.control-buttons {
|
||||
margin-top: 2vh;
|
||||
display: inline-flex;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.mini-view {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.fs-row {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.playback-button--small.active {
|
||||
background-color: rgb(200 200 200 / 25%);
|
||||
}
|
||||
|
||||
.player-exit {
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
|
||||
.player-pin {
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
min-width: 20px;
|
||||
min-height: 20px;
|
||||
top: 5px;
|
||||
right: 30px;
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
|
||||
#mini-pin {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.player-pin:hover #mini-pin {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.playback-button--small {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.right-col {
|
||||
height: 50vh;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1121px) {
|
||||
.display--large {
|
||||
display: flex !important;
|
||||
}
|
||||
}
|
||||
|
||||
.display--large {
|
||||
display: flex;
|
||||
|
||||
.slider {
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.volume-button--small {
|
||||
border-radius: 6px;
|
||||
color: inherit;
|
||||
background-size: 16px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-color: transparent;
|
||||
height: 15px;
|
||||
width: 30px;
|
||||
border: 0px;
|
||||
box-shadow: unset;
|
||||
opacity: 0.70;
|
||||
background-image: url("./assets/feather/volume-2.svg");
|
||||
}
|
||||
|
||||
.volume-button--small:active {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
.volume-button--small.active {
|
||||
background-image: url("./assets/feather/volume.svg");
|
||||
}
|
||||
|
||||
input[type=range] {
|
||||
-webkit-appearance: none;
|
||||
height: 4px;
|
||||
background: rgba(255, 255, 255, 0.4);
|
||||
border-radius: 5px;
|
||||
background-size: 70% 100%;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
&::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
border-radius: 50%;
|
||||
background: rgb(50 50 50);
|
||||
cursor: default;
|
||||
box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.4);
|
||||
transition: all var(--appleTransition);
|
||||
}
|
||||
|
||||
&::-webkit-slider-thumb:hover {
|
||||
background-image: radial-gradient(var(--songProgressColor) 2px, transparent 3px, transparent 10px);
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
&::-webkit-slider-thumb:active {
|
||||
background-image: radial-gradient(var(--songProgressColor) 3px, transparent 4px, transparent 10px);
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
&::-webkit-slider-runnable-track {
|
||||
-webkit-appearance: none;
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.background {
|
||||
position: absolute;
|
||||
background-size: cover;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-webkit-user-select: none;
|
||||
-webkit-app-region: drag;
|
||||
|
||||
.bgArtworkMaterial {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.bg-artwork-container {
|
||||
z-index: unset;
|
||||
}
|
||||
|
||||
.bg-artwork-container .bg-artwork {
|
||||
filter: brightness(85%) saturate(95%) blur(180px) contrast(0.9) opacity(0.9);
|
||||
}
|
||||
|
||||
.no-animation {
|
||||
animation: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.lyrics-col {
|
||||
|
||||
height: 62vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
width: 80%;
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
box-shadow: unset;
|
||||
}
|
||||
|
||||
&:hover ::-webkit-scrollbar-thumb {
|
||||
box-shadow: inset 0px 0px 10px 10px rgb(200 200 200 / 50%);
|
||||
}
|
||||
|
||||
.no-lyrics {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.lyric-line {
|
||||
font-size: 35px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.queue-col {
|
||||
|
||||
width: 60vh;
|
||||
height: 50vh;
|
||||
|
||||
.queue-title {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.queue-panel > * {
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
box-shadow: unset;
|
||||
}
|
||||
|
||||
&:hover ::-webkit-scrollbar-thumb {
|
||||
box-shadow: inset 0px 0px 10px 10px rgb(200 200 200 / 50%);
|
||||
}
|
||||
}
|
||||
|
||||
.tab-toggles {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 15vh;
|
||||
height: 5vh;
|
||||
justify-content: space-evenly;
|
||||
|
||||
.volume {
|
||||
background-image: url("./assets/feathers/volume.svg");
|
||||
padding: 0.5vh;
|
||||
width: 2vh;
|
||||
height: 2vh;
|
||||
background-origin: content-box;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.queue {
|
||||
background-image: url("./assets/list.svg");
|
||||
padding: 0.5vh;
|
||||
width: 2.5vh;
|
||||
height: 2.5vh;
|
||||
background-origin: content-box;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.lyrics {
|
||||
background-image: url("./assets/quote-right.svg");
|
||||
padding: 0.5vh;
|
||||
width: 2.5vh;
|
||||
height: 2.5vh;
|
||||
background-origin: content-box;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.active {
|
||||
background-color: rgba(200, 200, 200, 0.7);
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.artwork-col {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.artwork {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.mediaitem-artwork {
|
||||
border-radius: unset;
|
||||
}
|
||||
}
|
||||
|
||||
.controls-parents {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
background: #0000009e;
|
||||
backdrop-filter: blur(10px);
|
||||
bottom: 0px;
|
||||
z-index: 3;
|
||||
opacity: 0;
|
||||
padding: 3%;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.app-playback-controls {
|
||||
-webkit-app-region: no-drag;
|
||||
|
||||
.song-artist, .song-name {
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
font-size: 0.9em;
|
||||
height: 1.2em;
|
||||
line-height: 0.9em;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 360px;
|
||||
|
||||
.song-name-normal {
|
||||
height: inherit;
|
||||
}
|
||||
|
||||
&.song-artist-marquee {
|
||||
> marquee {
|
||||
//margin-bottom: -3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.song-artist {
|
||||
font-size: 0.875em;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.song-name {
|
||||
width: unset !important;
|
||||
margin-top: 0.15vh;
|
||||
display: -webkit-box;
|
||||
line-height: 1.2;
|
||||
text-overflow: ellipsis;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.app-playback-controls .playback-info {
|
||||
margin-top: 0.5vh;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
|
||||
input[type="range"] {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
> div {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.app-playback-controls .song-progress {
|
||||
@bgColor: transparent;
|
||||
//height: 16px;
|
||||
position: absolute;
|
||||
bottom: -3.5vh;
|
||||
left: 0px;
|
||||
background: @bgColor;
|
||||
|
||||
.song-duration p {
|
||||
font-weight: 400;
|
||||
font-size: 10px;
|
||||
height: 1.2em;
|
||||
line-height: 1.3em;
|
||||
overflow: hidden;
|
||||
margin: 0 0 0 0.25em;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
> input[type=range] {
|
||||
&::-webkit-slider-thumb {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input[type=range] {
|
||||
appearance: none;
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
background-color: rgb(200 200 200 / 10%);
|
||||
border-radius: 2px;
|
||||
|
||||
&::-webkit-slider-thumb {
|
||||
opacity: 0;
|
||||
transform: scale(0.5);
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 100%;
|
||||
background: var(--songProgressColor);
|
||||
cursor: default;
|
||||
transition: opacity .10s var(--appleEase), transform .10s var(--appleEase);
|
||||
}
|
||||
|
||||
&::-moz-range-thumb {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 100%;
|
||||
background: var(--songProgressColor);
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.control-buttons {
|
||||
margin-top: 3.5vh;
|
||||
display: inline-flex;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
@import url("less/fullscreen.less");
|
||||
@import url("less/miniplayer.less");
|
||||
|
||||
// Cider App
|
||||
|
||||
|
|
|
|||
|
|
@ -1,42 +0,0 @@
|
|||
<div id="app-content" :scrollpos="chrome.contentScrollPosY" scrollaxis="y" :style="{'overflow': (chrome.contentAreaScrolling ? '' : 'hidden')}">
|
||||
<div id="navigation-bar" v-if="getThemeDirective('appNavigation') == 'seperate'">
|
||||
<button class="nav-item" @click="navigateBack()">
|
||||
<%- include('../svg/chevron-left.svg') %>
|
||||
</button>
|
||||
<button class="nav-item" @click="navigateForward()">
|
||||
<%- include('../svg/chevron-right.svg') %>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Include App Routes -->
|
||||
<% for(var i=0; i < Object.keys(env.appRoutes).length ; i++) {%>
|
||||
<transition
|
||||
<% if(env.appRoutes[i].onEnter) {
|
||||
%>
|
||||
v-on:enter="<%- env.appRoutes[i].onEnter %>"
|
||||
<%
|
||||
}
|
||||
%>
|
||||
:name="chrome.desiredPageTransition">
|
||||
<template
|
||||
v-if="<%- env.appRoutes[i].condition %>">
|
||||
<%- env.appRoutes[i].component %>
|
||||
</template>
|
||||
</transition>
|
||||
<% } %>
|
||||
<!-- Library - Made For You -->
|
||||
<transition :name="chrome.desiredPageTransition" v-on:enter="getMadeForYou()">
|
||||
<template v-if="page == 'library-madeforyou'">
|
||||
<%- include('../pages/madeforyou') %>');
|
||||
%>
|
||||
</template>
|
||||
</transition>
|
||||
<!-- Library - Artists-->
|
||||
<!-- Keybinds -->
|
||||
<transition name="wpfade">
|
||||
<template v-if="page == 'keybinds-settings'">
|
||||
<keybinds-settings></keybinds-settings>
|
||||
</template>
|
||||
</transition>
|
||||
|
||||
</div>
|
||||
|
|
@ -135,7 +135,7 @@
|
|||
<transition name="sidebartransition">
|
||||
<%- include("sidebar") %>
|
||||
</transition>
|
||||
<%- include("app-content") %>
|
||||
<app-content-area></app-content-area>
|
||||
<transition name="drawertransition">
|
||||
<div class="app-drawer"
|
||||
v-if="drawer.open && drawer.panel == 'lyrics' && lyrics && lyrics != [] && lyrics.length > 0">
|
||||
|
|
|
|||
|
|
@ -18,13 +18,13 @@
|
|||
<div class="app-chrome-item">
|
||||
<button class="playback-button navigation" @click="navigateBack()" :title="$root.getLz('term.navigateBack')"
|
||||
v-b-tooltip.hover>
|
||||
<%- include('../svg/chevron-left.svg') %>
|
||||
<svg-icon url="./views/svg/chevron-left.svg"></svg-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div class="app-chrome-item">
|
||||
<button class="playback-button navigation" @click="navigateForward()"
|
||||
:title="$root.getLz('term.navigateForward')" v-b-tooltip.hover>
|
||||
<%- include('../svg/chevron-right.svg') %>
|
||||
<svg-icon url="./views/svg/chevron-right.svg"></svg-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div class="app-chrome-item" v-if="getThemeDirective('windowLayout') == 'twopanel'">
|
||||
|
|
|
|||
57
src/renderer/views/components/app-content.ejs
Normal file
57
src/renderer/views/components/app-content.ejs
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
<script type="text/x-template" id="app-content-area">
|
||||
<div id="app-content" :scrollpos="$root.chrome.contentScrollPosY" scrollaxis="y"
|
||||
:style="{'overflow': ($root.chrome.contentAreaScrolling ? '' : 'hidden')}">
|
||||
<div id="navigation-bar" v-if="$root.getThemeDirective('appNavigation') == 'seperate'">
|
||||
<button class="nav-item" @click="$root.navigateBack()">
|
||||
<%- include('../svg/chevron-left.svg') %>
|
||||
</button>
|
||||
<button class="nav-item" @click="$root.navigateForward()">
|
||||
<%- include('../svg/chevron-right.svg') %>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Include App Routes -->
|
||||
<% for(var i = 0; i < Object.keys(env.appRoutes).length ; i++) { %>
|
||||
<transition
|
||||
<% if(env.appRoutes[i].onEnter) {
|
||||
%>
|
||||
v-on:enter="<%- env.appRoutes[i].onEnter %>"
|
||||
<%
|
||||
}
|
||||
%>
|
||||
:name="$root.chrome.desiredPageTransition">
|
||||
<template
|
||||
v-if="<%- env.appRoutes[i].condition %>">
|
||||
<%- env.appRoutes[i].component %>
|
||||
</template>
|
||||
</transition>
|
||||
<% } %>
|
||||
<!-- Library - Made For You -->
|
||||
<transition :name="$root.chrome.desiredPageTransition" v-on:enter="$root.getMadeForYou()">
|
||||
<template v-if="$root.page == 'library-madeforyou'">
|
||||
<%- include('../pages/madeforyou') %>');
|
||||
%>
|
||||
</template>
|
||||
</transition>
|
||||
<!-- Library - Artists-->
|
||||
<!-- Keybinds -->
|
||||
<transition name="wpfade">
|
||||
<template v-if="$root.page == 'keybinds-settings'">
|
||||
<keybinds-settings></keybinds-settings>
|
||||
</template>
|
||||
</transition>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script>
|
||||
Vue.component('app-content-area', {
|
||||
template: '#app-content-area',
|
||||
data: function () {
|
||||
return {
|
||||
scrollPos: 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
@ -3,15 +3,18 @@
|
|||
<div class="background">
|
||||
<div class="bgArtworkMaterial">
|
||||
<div class="bg-artwork-container">
|
||||
<img v-if="(app.cfg.visual.bg_artwork_rotation && app.animateBackground)" class="bg-artwork a" :src="(image ?? '').replace('{w}','30').replace('{h}','30')">
|
||||
<img v-if="(app.cfg.visual.bg_artwork_rotation && app.animateBackground)" class="bg-artwork b" :src="(image ?? '').replace('{w}','30').replace('{h}','30')">
|
||||
<img v-if="!(app.cfg.visual.bg_artwork_rotation && app.animateBackground)" class="bg-artwork no-animation" :src="(image ?? '').replace('{w}','30').replace('{h}','30')">
|
||||
<img v-if="(app.cfg.visual.bg_artwork_rotation && app.animateBackground)" class="bg-artwork a"
|
||||
:src="(image ?? '').replace('{w}','30').replace('{h}','30')">
|
||||
<img v-if="(app.cfg.visual.bg_artwork_rotation && app.animateBackground)" class="bg-artwork b"
|
||||
:src="(image ?? '').replace('{w}','30').replace('{h}','30')">
|
||||
<img v-if="!(app.cfg.visual.bg_artwork_rotation && app.animateBackground)"
|
||||
class="bg-artwork no-animation" :src="(image ?? '').replace('{w}','30').replace('{h}','30')">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row fs-row">
|
||||
<div class="row fs-row" v-if="tabMode != 'catalog'">
|
||||
<div class="col artwork-col">
|
||||
<div class="artwork" @click="app.fullscreen(false)">
|
||||
<div class="artwork" @click="app.fullscreen(false)">
|
||||
<mediaitem-artwork
|
||||
:size="600"
|
||||
:video="video"
|
||||
|
|
@ -20,86 +23,104 @@
|
|||
></mediaitem-artwork>
|
||||
</div>
|
||||
<div class="controls-parents">
|
||||
<template v-if="app.mkReady()">
|
||||
<div class="app-playback-controls" @mouseover="app.chrome.progresshover = true"
|
||||
@mouseleave="app.chrome.progresshover = false" @contextmenu="app.nowPlayingContextMenu">
|
||||
<div class="playback-info">
|
||||
<div class="song-name">
|
||||
{{ app.mk.nowPlayingItem["attributes"]["name"] }}
|
||||
</div>
|
||||
<div
|
||||
style="display: inline-block; -webkit-box-orient: horizontal; white-space: nowrap; margin-top: 0.25vh; overflow: hidden;">
|
||||
<div class="item-navigate song-artist" style="display: inline-block;"
|
||||
@click="app.getNowPlayingItemDetailed(`artist`)">
|
||||
{{ app.mk.nowPlayingItem["attributes"]["artistName"] }}
|
||||
<template v-if="app.mkReady()">
|
||||
<div class="app-playback-controls" @mouseover="app.chrome.progresshover = true"
|
||||
@mouseleave="app.chrome.progresshover = false" @contextmenu="app.nowPlayingContextMenu">
|
||||
<div class="playback-info">
|
||||
<div class="song-name">
|
||||
{{ app.mk.nowPlayingItem["attributes"]["name"] }}
|
||||
</div>
|
||||
<div class="song-artist item-navigate" style="display: inline-block;"
|
||||
@click="app.getNowPlayingItemDetailed('album')">
|
||||
{{ (app.mk.nowPlayingItem["attributes"]["albumName"]) ? (" — " +
|
||||
app.mk.nowPlayingItem["attributes"]["albumName"]) : "" }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="song-progress">
|
||||
<div class="song-duration" style="justify-content: space-between; height: 1px;"
|
||||
:style="[app.chrome.progresshover ? {'display': 'flex'} : {'display' : 'none'} ]">
|
||||
<p style="width: auto">{{ app.convertTime(app.getSongProgress()) }}</p>
|
||||
<p style="width: auto">{{ app.convertTime(app.mk.currentPlaybackDuration) }}</p>
|
||||
<div
|
||||
style="display: inline-block; -webkit-box-orient: horizontal; white-space: nowrap; margin-top: 0.25vh; overflow: hidden;">
|
||||
<div class="item-navigate song-artist" style="display: inline-block;"
|
||||
@click="app.getNowPlayingItemDetailed(`artist`)">
|
||||
{{ app.mk.nowPlayingItem["attributes"]["artistName"] }}
|
||||
</div>
|
||||
<div class="song-artist item-navigate" style="display: inline-block;"
|
||||
@click="app.getNowPlayingItemDetailed('album')">
|
||||
{{ (app.mk.nowPlayingItem["attributes"]["albumName"]) ? (" — " +
|
||||
app.mk.nowPlayingItem["attributes"]["albumName"]) : "" }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<input type="range" step="0.01" min="0" :style="app.progressBarStyle()"
|
||||
@input="app.playerLCD.desiredDuration = $event.target.value;app.playerLCD.userInteraction = true"
|
||||
@mouseup="app.mk.seekToTime($event.target.value);app.playerLCD.desiredDuration = 0;app.playerLCD.userInteraction = false"
|
||||
:max="app.mk.currentPlaybackDuration" :value="app.getSongProgress()">
|
||||
<div class="song-progress">
|
||||
<div class="song-duration" style="justify-content: space-between; height: 1px;"
|
||||
:style="[app.chrome.progresshover ? {'display': 'flex'} : {'display' : 'none'} ]">
|
||||
<p style="width: auto">{{ app.convertTime(app.getSongProgress()) }}</p>
|
||||
<p style="width: auto">{{ app.convertTime(app.mk.currentPlaybackDuration) }}</p>
|
||||
</div>
|
||||
|
||||
<input type="range" step="0.01" min="0" :style="app.progressBarStyle()"
|
||||
@input="app.playerLCD.desiredDuration = $event.target.value;app.playerLCD.userInteraction = true"
|
||||
@mouseup="app.mk.seekToTime($event.target.value);app.playerLCD.desiredDuration = 0;app.playerLCD.userInteraction = false"
|
||||
:max="app.mk.currentPlaybackDuration" :value="app.getSongProgress()">
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-buttons">
|
||||
<div class="app-chrome-item display--large">
|
||||
<button class="playback-button--small shuffle" v-if="$root.mk.shuffleMode == 0"
|
||||
:class="$root.isDisabled() && 'disabled'"
|
||||
@click="$root.mk.shuffleMode = 1" :title="$root.getLz('term.enableShuffle')"
|
||||
v-b-tooltip.hover></button>
|
||||
<button class="playback-button--small shuffle active" v-else
|
||||
:class="$root.isDisabled() && 'disabled'"
|
||||
@click="$root.mk.shuffleMode = 0"
|
||||
:title="$root.getLz('term.disableShuffle')" v-b-tooltip.hover></button>
|
||||
</div>
|
||||
<div class="app-chrome-item display--large">
|
||||
<button class="playback-button previous" @click="$root.prevButton()"
|
||||
:class="$root.isPrevDisabled() && 'disabled'"
|
||||
:title="$root.getLz('term.previous')" v-b-tooltip.hover></button>
|
||||
</div>
|
||||
<div class="app-chrome-item display--large">
|
||||
<button class="playback-button stop" @click="$root.mk.stop()"
|
||||
v-if="$root.mk.isPlaying && $root.mk.nowPlayingItem.attributes.playParams.kind == 'radioStation'"
|
||||
:title="$root.getLz('term.stop')" v-b-tooltip.hover></button>
|
||||
<button class="playback-button pause" @click="$root.mk.pause()"
|
||||
v-else-if="$root.mk.isPlaying"
|
||||
:title="$root.getLz('term.pause')" v-b-tooltip.hover></button>
|
||||
<button class="playback-button play" @click="$root.mk.play()" v-else
|
||||
:title="$root.getLz('term.play')"
|
||||
v-b-tooltip.hover></button>
|
||||
</div>
|
||||
<div class="app-chrome-item display--large">
|
||||
<button class="playback-button next" @click="$root.skipToNextItem()"
|
||||
:class="$root.isNextDisabled() && 'disabled'"
|
||||
:title="$root.getLz('term.next')" v-b-tooltip.hover></button>
|
||||
</div>
|
||||
<div class="app-chrome-item display--large">
|
||||
<button class="playback-button--small repeat" v-if="$root.mk.repeatMode == 0"
|
||||
:class="$root.isDisabled() && 'disabled'"
|
||||
@click="$root.mk.repeatMode = 1"
|
||||
:title="$root.getLz('term.enableRepeatOne')" v-b-tooltip.hover></button>
|
||||
<button class="playback-button--small repeat repeatOne" @click="mk.repeatMode = 2"
|
||||
:class="$root.isDisabled() && 'disabled'"
|
||||
v-else-if="$root.mk.repeatMode == 1"
|
||||
:title="$root.getLz('term.disableRepeatOne')" v-b-tooltip.hover></button>
|
||||
<button class="playback-button--small repeat active"
|
||||
@click="$root.mk.repeatMode = 0"
|
||||
:class="$root.isDisabled() && 'disabled'"
|
||||
v-else-if="$root.mk.repeatMode == 2"
|
||||
:title="$root.getLz('term.disableRepeat')"
|
||||
v-b-tooltip.hover></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-buttons">
|
||||
<div class="app-chrome-item display--large">
|
||||
<button class="playback-button--small shuffle" v-if="$root.mk.shuffleMode == 0" :class="$root.isDisabled() && 'disabled'"
|
||||
@click="$root.mk.shuffleMode = 1" :title="$root.getLz('term.enableShuffle')" v-b-tooltip.hover></button>
|
||||
<button class="playback-button--small shuffle active" v-else :class="$root.isDisabled() && 'disabled'"
|
||||
@click="$root.mk.shuffleMode = 0" :title="$root.getLz('term.disableShuffle')" v-b-tooltip.hover></button>
|
||||
</div>
|
||||
<div class="app-chrome-item display--large">
|
||||
<button class="playback-button previous" @click="$root.prevButton()" :class="$root.isPrevDisabled() && 'disabled'"
|
||||
:title="$root.getLz('term.previous')" v-b-tooltip.hover></button>
|
||||
</div>
|
||||
<div class="app-chrome-item display--large">
|
||||
<button class="playback-button stop" @click="$root.mk.stop()"
|
||||
v-if="$root.mk.isPlaying && $root.mk.nowPlayingItem.attributes.playParams.kind == 'radioStation'"
|
||||
:title="$root.getLz('term.stop')" v-b-tooltip.hover></button>
|
||||
<button class="playback-button pause" @click="$root.mk.pause()" v-else-if="$root.mk.isPlaying"
|
||||
:title="$root.getLz('term.pause')" v-b-tooltip.hover></button>
|
||||
<button class="playback-button play" @click="$root.mk.play()" v-else :title="$root.getLz('term.play')"
|
||||
v-b-tooltip.hover></button>
|
||||
</div>
|
||||
<div class="app-chrome-item display--large">
|
||||
<button class="playback-button next" @click="$root.skipToNextItem()" :class="$root.isNextDisabled() && 'disabled'"
|
||||
:title="$root.getLz('term.next')" v-b-tooltip.hover></button>
|
||||
</div>
|
||||
<div class="app-chrome-item display--large">
|
||||
<button class="playback-button--small repeat" v-if="$root.mk.repeatMode == 0" :class="$root.isDisabled() && 'disabled'"
|
||||
@click="$root.mk.repeatMode = 1" :title="$root.getLz('term.enableRepeatOne')" v-b-tooltip.hover></button>
|
||||
<button class="playback-button--small repeat repeatOne" @click="mk.repeatMode = 2"
|
||||
:class="$root.isDisabled() && 'disabled'" v-else-if="$root.mk.repeatMode == 1"
|
||||
:title="$root.getLz('term.disableRepeatOne')" v-b-tooltip.hover></button>
|
||||
<button class="playback-button--small repeat active" @click="$root.mk.repeatMode = 0"
|
||||
:class="$root.isDisabled() && 'disabled'" v-else-if="$root.mk.repeatMode == 2" :title="$root.getLz('term.disableRepeat')"
|
||||
v-b-tooltip.hover></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="app-chrome-item volume display--large">
|
||||
<div class="input-container">
|
||||
<button class="volume-button--small volume" @click="app.muteButtonPressed()" :class="{'active': app.cfg.audio.volume == 0}"
|
||||
:title="app.cfg.audio.muted ? $root.getLz('term.unmute') : $root.getLz('term.mute')" v-b-tooltip.hover></button>
|
||||
<input type="range" class="slider" @wheel="app.volumeWheel" :step="app.cfg.audio.volumeStep" min="0" :max="app.cfg.audio.maxVolume" v-model="app.mk.volume"
|
||||
v-if="typeof app.mk.volume != 'undefined'" @change="app.checkMuteChange()"
|
||||
v-b-tooltip.hover :title="$root.formatVolumeTooltip()">
|
||||
<div class="app-chrome-item volume display--large">
|
||||
<div class="input-container">
|
||||
<button class="volume-button--small volume" @click="app.muteButtonPressed()"
|
||||
:class="{'active': app.cfg.audio.volume == 0}"
|
||||
:title="app.cfg.audio.muted ? $root.getLz('term.unmute') : $root.getLz('term.mute')"
|
||||
v-b-tooltip.hover></button>
|
||||
<input type="range" class="slider" @wheel="app.volumeWheel"
|
||||
:step="app.cfg.audio.volumeStep" min="0" :max="app.cfg.audio.maxVolume"
|
||||
v-model="app.mk.volume"
|
||||
v-if="typeof app.mk.volume != 'undefined'" @change="app.checkMuteChange()"
|
||||
v-b-tooltip.hover :title="$root.formatVolumeTooltip()">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col right-col" v-if="tabMode != ''">
|
||||
|
|
@ -110,21 +131,28 @@
|
|||
</div> -->
|
||||
<div class="lyrics-col" v-if="tabMode == 'lyrics'">
|
||||
<lyrics-view :yoffset="120" :time="time" :lyrics="lyrics"
|
||||
:richlyrics="richlyrics"></lyrics-view>
|
||||
:richlyrics="richlyrics"></lyrics-view>
|
||||
</div>
|
||||
<div class="queue-col" v-if="tabMode == 'queue'">
|
||||
<cider-queue v-if="tabMode == 'queue'" ref="queue" ></cider-queue>
|
||||
<cider-queue v-if="tabMode == 'queue'" ref="queue"></cider-queue>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="app-content-container" v-else>
|
||||
<app-content-area></app-content-area>
|
||||
</div>
|
||||
<div class="tab-toggles">
|
||||
<div class="lyrics" :class="{active: tabMode == 'lyrics'}" @click="tabMode = (tabMode == 'lyrics') ? '' : 'lyrics'"></div>
|
||||
<div class="queue" :class="{active: tabMode == 'queue'}" @click="tabMode = (tabMode == 'queue') ? '' :'queue'"></div>
|
||||
<div class="lyrics" :class="{active: tabMode == 'lyrics'}"
|
||||
@click="tabMode = (tabMode == 'lyrics') ? '' : 'lyrics'"></div>
|
||||
<div class="queue" :class="{active: tabMode == 'queue'}"
|
||||
@click="tabMode = (tabMode == 'queue') ? '' :'queue'"></div>
|
||||
<div class="queue" :class="{active: tabMode == 'catalog'}"
|
||||
v-if="false"
|
||||
@click="tabMode = (tabMode == 'catalog') ? '' :'catalog'"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<script>
|
||||
|
|
@ -173,7 +201,7 @@
|
|||
} else if (app.mk.nowPlayingItem._container.type == "library-albums") {
|
||||
try {
|
||||
const result = (await app.mk.api.v3.music(`/v1/me/library/albums/${app.mk.nowPlayingItem._container.id}/catalog`
|
||||
, { "fields": "editorialArtwork,editorialVideo" })).data.data[0].attributes?.editorialVideo?.motionDetailSquare?.video
|
||||
, {"fields": "editorialArtwork,editorialVideo"})).data.data[0].attributes?.editorialVideo?.motionDetailSquare?.video
|
||||
if (result) {
|
||||
this.video = result
|
||||
} else {
|
||||
|
|
|
|||
|
|
@ -126,9 +126,9 @@
|
|||
|
||||
}
|
||||
})
|
||||
if (typeof this.$parent.getChildren == "function") {
|
||||
this.$parent.getChildren()
|
||||
console.log(this.$parent.children)
|
||||
if (typeof this.$root.getChildren == "function") {
|
||||
this.$root.getChildren()
|
||||
console.log(this.$root.children)
|
||||
}
|
||||
await this.getChildren()
|
||||
this.$root.sortPlaylists()
|
||||
|
|
|
|||
|
|
@ -15,8 +15,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="<%- (env.dev ? "stylesheet" : "stylesheet/less") %>" type="text/css" href="style.<%- (env.dev ? "css" : "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="./lib/vue-horizontal.js"></script>
|
||||
|
|
@ -122,7 +122,7 @@
|
|||
<!-- Sidebar Item -->
|
||||
<script type="text/x-template" id="sidebar-library-item">
|
||||
<button class="app-sidebar-item"
|
||||
:class="$parent.getSidebarItemClass(page)" @click="$root.setWindowHash(page)">
|
||||
:class="$root.getSidebarItemClass(page)" @click="$root.setWindowHash(page)">
|
||||
<svg-icon :url="svgIconData" :name="'sidebar-' + svgIconName" v-if="svgIconData != ''" />
|
||||
<span class="sidebar-item-text">{{ name }}</span>
|
||||
</button>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue