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/",
|
"homepage": "https://cider.sh/",
|
||||||
"buildResources": "resources",
|
"buildResources": "resources",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"build": "tsc",
|
"build": "tsc && yarn compile-less",
|
||||||
|
"compile-less": "lessc ./src/renderer/style.less ./src/renderer/style.css",
|
||||||
"watch": "tsc --watch",
|
"watch": "tsc --watch",
|
||||||
"start": "run-script-os",
|
"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",
|
"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": "^23.0.3",
|
||||||
"electron-builder-notarize-pkg": "^1.2.0",
|
"electron-builder-notarize-pkg": "^1.2.0",
|
||||||
"electron-webpack": "^2.8.2",
|
"electron-webpack": "^2.8.2",
|
||||||
|
"less": "^4.1.3",
|
||||||
"musickit-typescript": "^1.2.4",
|
"musickit-typescript": "^1.2.4",
|
||||||
"typescript": "^4.6.4",
|
"typescript": "^4.6.4",
|
||||||
"vue-devtools": "^5.1.4",
|
"vue-devtools": "^5.1.4",
|
||||||
|
|
|
||||||
|
|
@ -89,6 +89,7 @@ export class BrowserWindow {
|
||||||
"pages/plugin-renderer",
|
"pages/plugin-renderer",
|
||||||
"pages/keybinds",
|
"pages/keybinds",
|
||||||
"pages/oobe",
|
"pages/oobe",
|
||||||
|
"components/app-content",
|
||||||
"components/mediaitem-artwork",
|
"components/mediaitem-artwork",
|
||||||
"components/artwork-material",
|
"components/artwork-material",
|
||||||
"components/menu-panel",
|
"components/menu-panel",
|
||||||
|
|
@ -129,150 +130,150 @@ export class BrowserWindow {
|
||||||
{
|
{
|
||||||
page: "library-recentlyadded",
|
page: "library-recentlyadded",
|
||||||
component: `<cider-recentlyadded></cider-recentlyadded>`,
|
component: `<cider-recentlyadded></cider-recentlyadded>`,
|
||||||
condition: "page == 'library-recentlyadded'"
|
condition: "$root.page == 'library-recentlyadded'"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
page: "plugin-renderer",
|
page: "plugin-renderer",
|
||||||
component: `<plugin-renderer></plugin-renderer>`,
|
component: `<plugin-renderer></plugin-renderer>`,
|
||||||
condition: "page == 'plugin-renderer'"
|
condition: "$root.page == 'plugin-renderer'"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
page: "zoo",
|
page: "zoo",
|
||||||
component: "<cider-zoo></cider-zoo>",
|
component: "<cider-zoo></cider-zoo>",
|
||||||
condition: "page == 'zoo'"
|
condition: "$root.page == 'zoo'"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
page: "podcasts",
|
page: "podcasts",
|
||||||
component: `<apple-podcasts></apple-podcasts>`,
|
component: `<apple-podcasts></apple-podcasts>`,
|
||||||
condition: `page == 'podcasts'`
|
condition: `$root.page == 'podcasts'`
|
||||||
}, {
|
}, {
|
||||||
page: "library-videos",
|
page: "library-videos",
|
||||||
component: `<cider-library-videos></cider-library-videos>`,
|
component: `<cider-library-videos></cider-library-videos>`,
|
||||||
condition: `page == 'library-videos'`
|
condition: `$root.page == 'library-videos'`
|
||||||
}, {
|
}, {
|
||||||
page: "apple-account-settings",
|
page: "apple-account-settings",
|
||||||
component: `<apple-account-settings></apple-account-settings>`,
|
component: `<apple-account-settings></apple-account-settings>`,
|
||||||
condition: `page == 'apple-account-settings'`
|
condition: `$root.page == 'apple-account-settings'`
|
||||||
}, {
|
}, {
|
||||||
page: "about",
|
page: "about",
|
||||||
component: `<about-page></about-page>`,
|
component: `<about-page></about-page>`,
|
||||||
condition: `page == 'about'`
|
condition: `$root.page == 'about'`
|
||||||
}, {
|
}, {
|
||||||
page: "cider-artist",
|
page: "cider-artist",
|
||||||
component: `<cider-artist :data="artistPage.data"></cider-artist>`,
|
component: `<cider-artist :data="$root.artistPage.data"></cider-artist>`,
|
||||||
condition: `page == 'artist-page' && artistPage.data.attributes`
|
condition: `$root.page == 'artist-page' && $root.artistPage.data.attributes`
|
||||||
}, {
|
}, {
|
||||||
page: "collection-list",
|
page: "collection-list",
|
||||||
component: `<cider-collection-list :data="collectionList.response" :type="collectionList.type" :title="collectionList.title"></cider-collection-list>`,
|
component: `<cider-collection-list :data="$root.collectionList.response" :type="$root.collectionList.type" :title="$root.collectionList.title"></cider-collection-list>`,
|
||||||
condition: `page == 'collection-list'`
|
condition: `$root.page == 'collection-list'`
|
||||||
}, {
|
}, {
|
||||||
page: "home",
|
page: "home",
|
||||||
component: `<cider-home></cider-home>`,
|
component: `<cider-home></cider-home>`,
|
||||||
condition: `page == 'home'`
|
condition: `$root.page == 'home'`
|
||||||
}, {
|
}, {
|
||||||
page: "artist-feed",
|
page: "artist-feed",
|
||||||
component: `<cider-artist-feed></cider-artist-feed>`,
|
component: `<cider-artist-feed></cider-artist-feed>`,
|
||||||
condition: `page == 'artist-feed'`
|
condition: `$root.page == 'artist-feed'`
|
||||||
}, {
|
}, {
|
||||||
page: "playlist-inline",
|
page: "playlist-inline",
|
||||||
component: `<playlist-inline :data="showingPlaylist"></playlist-inline>`,
|
component: `<playlist-inline :data="$root.showingPlaylist"></playlist-inline>`,
|
||||||
condition: `modals.showPlaylist`
|
condition: `$root.modals.showPlaylist`
|
||||||
}, {
|
}, {
|
||||||
page: "playlist_",
|
page: "playlist_",
|
||||||
component: `<cider-playlist :data="showingPlaylist"></cider-playlist>`,
|
component: `<cider-playlist :data="$root.showingPlaylist"></cider-playlist>`,
|
||||||
condition: `page.includes('playlist_')`
|
condition: `$root.page.includes('playlist_')`
|
||||||
}, {
|
}, {
|
||||||
page: "album_",
|
page: "album_",
|
||||||
component: `<cider-playlist :data="showingPlaylist"></cider-playlist>`,
|
component: `<cider-playlist :data="$root.showingPlaylist"></cider-playlist>`,
|
||||||
condition: `page.includes('album_')`
|
condition: `$root.page.includes('album_')`
|
||||||
}, {
|
}, {
|
||||||
page: "recordLabel_",
|
page: "recordLabel_",
|
||||||
component: `<cider-recordlabel :data="showingPlaylist"></cider-recordlabel>`,
|
component: `<cider-recordlabel :data="$root.showingPlaylist"></cider-recordlabel>`,
|
||||||
condition: `page.includes('recordLabel_')`
|
condition: `$root.page.includes('recordLabel_')`
|
||||||
}, {
|
}, {
|
||||||
page: "multiroom",
|
page: "multiroom",
|
||||||
component: `<cider-multiroom :data="multiroom"></cider-multiroom>`,
|
component: `<cider-multiroom :data="$root.multiroom"></cider-multiroom>`,
|
||||||
condition: `page.includes('multiroom')`
|
condition: `$root.page.includes('multiroom')`
|
||||||
}, {
|
}, {
|
||||||
page: "curator_",
|
page: "curator_",
|
||||||
component: `<cider-recordlabel :data="showingPlaylist"></cider-recordlabel>`,
|
component: `<cider-recordlabel :data="$root.showingPlaylist"></cider-recordlabel>`,
|
||||||
condition: `page.includes('curator_')`
|
condition: `$root.page.includes('curator_')`
|
||||||
}, {
|
}, {
|
||||||
page: "browsepage",
|
page: "browsepage",
|
||||||
component: `<cider-browse :data="browsepage"></cider-browse>`,
|
component: `<cider-browse :data="$root.browsepage"></cider-browse>`,
|
||||||
condition: `page == 'browse'`,
|
condition: `$root.page == 'browse'`,
|
||||||
onEnter: ``
|
onEnter: ``
|
||||||
}, {
|
}, {
|
||||||
page: "groupings",
|
page: "groupings",
|
||||||
component: `<cider-groupings :data="browsepage"></cider-groupings>`,
|
component: `<cider-groupings :data="$root.browsepage"></cider-groupings>`,
|
||||||
condition: `page == 'groupings'`,
|
condition: `$root.page == 'groupings'`,
|
||||||
onEnter: ``
|
onEnter: ``
|
||||||
}, {
|
}, {
|
||||||
page: "charts",
|
page: "charts",
|
||||||
component: `<cider-charts :data="browsepage"></cider-charts>`,
|
component: `<cider-charts :data="$root.browsepage"></cider-charts>`,
|
||||||
condition: `page == 'charts'`,
|
condition: `$root.page == 'charts'`,
|
||||||
onEnter: ``
|
onEnter: ``
|
||||||
}, {
|
}, {
|
||||||
page: "listen_now",
|
page: "listen_now",
|
||||||
component: `<cider-listen-now :data="listennow"></cider-listen-now>`,
|
component: `<cider-listen-now :data="$root.listennow"></cider-listen-now>`,
|
||||||
condition: `page == 'listen_now'`,
|
condition: `$root.page == 'listen_now'`,
|
||||||
onEnter: ``
|
onEnter: ``
|
||||||
}, {
|
}, {
|
||||||
page: "radio",
|
page: "radio",
|
||||||
component: `<cider-radio :data="radio"></cider-radio>`,
|
component: `<cider-radio :data="$root.radio"></cider-radio>`,
|
||||||
condition: `page == 'radio'`,
|
condition: `$root.page == 'radio'`,
|
||||||
onEnter: ``
|
onEnter: ``
|
||||||
}, {
|
}, {
|
||||||
page: "settings",
|
page: "settings",
|
||||||
component: `<cider-settings></cider-settings>`,
|
component: `<cider-settings></cider-settings>`,
|
||||||
condition: `page == 'settings'`
|
condition: `$root.page == 'settings'`
|
||||||
}, {
|
}, {
|
||||||
page: "installed-themes",
|
page: "installed-themes",
|
||||||
component: `<installed-themes></installed-themes>`,
|
component: `<installed-themes></installed-themes>`,
|
||||||
condition: `page == 'installed-themes'`
|
condition: `$root.page == 'installed-themes'`
|
||||||
}, {
|
}, {
|
||||||
page: "search",
|
page: "search",
|
||||||
component: `<cider-search :search="search"></cider-search>`,
|
component: `<cider-search :search="$root.search"></cider-search>`,
|
||||||
condition: `page == 'search'`
|
condition: `$root.page == 'search'`
|
||||||
}, {
|
}, {
|
||||||
page: "library-songs",
|
page: "library-songs",
|
||||||
component: `<cider-library-songs :data="library.songs"></cider-library-songs>`,
|
component: `<cider-library-songs :data="$root.library.songs"></cider-library-songs>`,
|
||||||
condition: `page == 'library-songs'`,
|
condition: `$root.page == 'library-songs'`,
|
||||||
onEnter: ``
|
onEnter: ``
|
||||||
}, {
|
}, {
|
||||||
page: "library-albums",
|
page: "library-albums",
|
||||||
component: `<cider-library-albums :data="library.songs"></cider-library-albums>`,
|
component: `<cider-library-albums :data="$root.library.songs"></cider-library-albums>`,
|
||||||
condition: `page == 'library-albums'`,
|
condition: `$root.page == 'library-albums'`,
|
||||||
onEnter: ``
|
onEnter: ``
|
||||||
}, {
|
}, {
|
||||||
page: "library-artists",
|
page: "library-artists",
|
||||||
component: `<cider-library-artists></cider-library-artists>`,
|
component: `<cider-library-artists></cider-library-artists>`,
|
||||||
condition: `page == 'library-artists'`,
|
condition: `$root.page == 'library-artists'`,
|
||||||
onEnter: ``
|
onEnter: ``
|
||||||
}, {
|
}, {
|
||||||
page: "appleCurator",
|
page: "appleCurator",
|
||||||
component: `<cider-applecurator :data="appleCurator"></cider-applecurator>`,
|
component: `<cider-applecurator :data="$root.appleCurator"></cider-applecurator>`,
|
||||||
condition: `page.includes('appleCurator')`
|
condition: `$root.page.includes('appleCurator')`
|
||||||
}, {
|
}, {
|
||||||
page: "themes-github",
|
page: "themes-github",
|
||||||
component: `<themes-github></themes-github>`,
|
component: `<themes-github></themes-github>`,
|
||||||
condition: `page == 'themes-github'`
|
condition: `$root.page == 'themes-github'`
|
||||||
}, {
|
}, {
|
||||||
page: "plugins-github",
|
page: "plugins-github",
|
||||||
component: `<plugins-github></plugins-github>`,
|
component: `<plugins-github></plugins-github>`,
|
||||||
condition: `page == 'plugins-github'`
|
condition: `$root.page == 'plugins-github'`
|
||||||
}, {
|
}, {
|
||||||
page: "remote-pair",
|
page: "remote-pair",
|
||||||
component: `<remote-pair></remote-pair>`,
|
component: `<remote-pair></remote-pair>`,
|
||||||
condition: `page == 'remote-pair'`
|
condition: `$root.page == 'remote-pair'`
|
||||||
}, {
|
}, {
|
||||||
page: "audiolabs",
|
page: "audiolabs",
|
||||||
component: `<audiolabs-page></audiolabs-page>`,
|
component: `<audiolabs-page></audiolabs-page>`,
|
||||||
condition: `page == 'audiolabs'`
|
condition: `$root.page == 'audiolabs'`
|
||||||
}, {
|
}, {
|
||||||
page: "replay",
|
page: "replay",
|
||||||
component: `<replay-page></replay-page>`,
|
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;
|
align-items: center;
|
||||||
color: white;
|
color: white;
|
||||||
|
|
||||||
> svg {
|
> ._svg-icon {
|
||||||
height: 16px;
|
height: 16px;
|
||||||
width: 16px;
|
width: 16px;
|
||||||
pointer-events: none;
|
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", {
|
export const svgIcon = Vue.component("svg-icon", {
|
||||||
template: `
|
template: html`
|
||||||
<div class="_svg-icon" :class="classes" :svg-name="name" :style="{'--icon': 'url(' + url + ')'}"></div>
|
<div class="_svg-icon" :class="classes" :svg-name="name" :style="{'--icon': 'url(' + url + ')'}"></div>
|
||||||
`,
|
`,
|
||||||
props: {
|
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 lastScreenWidth;
|
||||||
let lastScreenHeight;
|
let lastScreenHeight;
|
||||||
|
|
||||||
let regen = true;
|
let imgSrc = "";
|
||||||
let imgSrc = await ipcRenderer.sendSync("get-wallpaper", {
|
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
|
blurAmount: 256
|
||||||
});
|
});
|
||||||
|
CiderCache.putCache("mica-cache", imgSrc);
|
||||||
// let micaCache = await CiderCache.getCache("mica-cache");
|
}
|
||||||
// if (!micaCache) {
|
|
||||||
// micaCache = {
|
|
||||||
// path: "",
|
|
||||||
// data: "",
|
|
||||||
// };
|
|
||||||
// }
|
|
||||||
// if (micaCache.path == imgSrc.path) {
|
|
||||||
// regen = false;
|
|
||||||
// imgSrc = micaCache;
|
|
||||||
// }
|
|
||||||
let canvas = document.createElement("canvas");
|
let canvas = document.createElement("canvas");
|
||||||
let ctx = canvas.getContext("2d");
|
let ctx = canvas.getContext("2d");
|
||||||
let img = new Image();
|
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;
|
animation: unset !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fullscreen-view-container {
|
@import url("less/fullscreen.less");
|
||||||
position: absolute;
|
@import url("less/miniplayer.less");
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Cider App
|
// 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">
|
<transition name="sidebartransition">
|
||||||
<%- include("sidebar") %>
|
<%- include("sidebar") %>
|
||||||
</transition>
|
</transition>
|
||||||
<%- include("app-content") %>
|
<app-content-area></app-content-area>
|
||||||
<transition name="drawertransition">
|
<transition name="drawertransition">
|
||||||
<div class="app-drawer"
|
<div class="app-drawer"
|
||||||
v-if="drawer.open && drawer.panel == 'lyrics' && lyrics && lyrics != [] && lyrics.length > 0">
|
v-if="drawer.open && drawer.panel == 'lyrics' && lyrics && lyrics != [] && lyrics.length > 0">
|
||||||
|
|
|
||||||
|
|
@ -18,13 +18,13 @@
|
||||||
<div class="app-chrome-item">
|
<div class="app-chrome-item">
|
||||||
<button class="playback-button navigation" @click="navigateBack()" :title="$root.getLz('term.navigateBack')"
|
<button class="playback-button navigation" @click="navigateBack()" :title="$root.getLz('term.navigateBack')"
|
||||||
v-b-tooltip.hover>
|
v-b-tooltip.hover>
|
||||||
<%- include('../svg/chevron-left.svg') %>
|
<svg-icon url="./views/svg/chevron-left.svg"></svg-icon>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="app-chrome-item">
|
<div class="app-chrome-item">
|
||||||
<button class="playback-button navigation" @click="navigateForward()"
|
<button class="playback-button navigation" @click="navigateForward()"
|
||||||
:title="$root.getLz('term.navigateForward')" v-b-tooltip.hover>
|
: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>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="app-chrome-item" v-if="getThemeDirective('windowLayout') == 'twopanel'">
|
<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="background">
|
||||||
<div class="bgArtworkMaterial">
|
<div class="bgArtworkMaterial">
|
||||||
<div class="bg-artwork-container">
|
<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 a"
|
||||||
<img v-if="(app.cfg.visual.bg_artwork_rotation && app.animateBackground)" class="bg-artwork b" :src="(image ?? '').replace('{w}','30').replace('{h}','30')">
|
: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 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>
|
||||||
</div>
|
</div>
|
||||||
<div class="row fs-row">
|
<div class="row fs-row" v-if="tabMode != 'catalog'">
|
||||||
<div class="col artwork-col">
|
<div class="col artwork-col">
|
||||||
<div class="artwork" @click="app.fullscreen(false)">
|
<div class="artwork" @click="app.fullscreen(false)">
|
||||||
<mediaitem-artwork
|
<mediaitem-artwork
|
||||||
:size="600"
|
:size="600"
|
||||||
:video="video"
|
:video="video"
|
||||||
|
|
@ -20,86 +23,104 @@
|
||||||
></mediaitem-artwork>
|
></mediaitem-artwork>
|
||||||
</div>
|
</div>
|
||||||
<div class="controls-parents">
|
<div class="controls-parents">
|
||||||
<template v-if="app.mkReady()">
|
<template v-if="app.mkReady()">
|
||||||
<div class="app-playback-controls" @mouseover="app.chrome.progresshover = true"
|
<div class="app-playback-controls" @mouseover="app.chrome.progresshover = true"
|
||||||
@mouseleave="app.chrome.progresshover = false" @contextmenu="app.nowPlayingContextMenu">
|
@mouseleave="app.chrome.progresshover = false" @contextmenu="app.nowPlayingContextMenu">
|
||||||
<div class="playback-info">
|
<div class="playback-info">
|
||||||
<div class="song-name">
|
<div class="song-name">
|
||||||
{{ app.mk.nowPlayingItem["attributes"]["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"] }}
|
|
||||||
</div>
|
</div>
|
||||||
<div class="song-artist item-navigate" style="display: inline-block;"
|
<div
|
||||||
@click="app.getNowPlayingItemDetailed('album')">
|
style="display: inline-block; -webkit-box-orient: horizontal; white-space: nowrap; margin-top: 0.25vh; overflow: hidden;">
|
||||||
{{ (app.mk.nowPlayingItem["attributes"]["albumName"]) ? (" — " +
|
<div class="item-navigate song-artist" style="display: inline-block;"
|
||||||
app.mk.nowPlayingItem["attributes"]["albumName"]) : "" }}
|
@click="app.getNowPlayingItemDetailed(`artist`)">
|
||||||
</div>
|
{{ app.mk.nowPlayingItem["attributes"]["artistName"] }}
|
||||||
</div>
|
</div>
|
||||||
|
<div class="song-artist item-navigate" style="display: inline-block;"
|
||||||
<div class="song-progress">
|
@click="app.getNowPlayingItemDetailed('album')">
|
||||||
<div class="song-duration" style="justify-content: space-between; height: 1px;"
|
{{ (app.mk.nowPlayingItem["attributes"]["albumName"]) ? (" — " +
|
||||||
:style="[app.chrome.progresshover ? {'display': 'flex'} : {'display' : 'none'} ]">
|
app.mk.nowPlayingItem["attributes"]["albumName"]) : "" }}
|
||||||
<p style="width: auto">{{ app.convertTime(app.getSongProgress()) }}</p>
|
</div>
|
||||||
<p style="width: auto">{{ app.convertTime(app.mk.currentPlaybackDuration) }}</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<input type="range" step="0.01" min="0" :style="app.progressBarStyle()"
|
<div class="song-progress">
|
||||||
@input="app.playerLCD.desiredDuration = $event.target.value;app.playerLCD.userInteraction = true"
|
<div class="song-duration" style="justify-content: space-between; height: 1px;"
|
||||||
@mouseup="app.mk.seekToTime($event.target.value);app.playerLCD.desiredDuration = 0;app.playerLCD.userInteraction = false"
|
:style="[app.chrome.progresshover ? {'display': 'flex'} : {'display' : 'none'} ]">
|
||||||
:max="app.mk.currentPlaybackDuration" :value="app.getSongProgress()">
|
<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>
|
</div>
|
||||||
<div class="control-buttons">
|
<div class="app-chrome-item volume display--large">
|
||||||
<div class="app-chrome-item display--large">
|
<div class="input-container">
|
||||||
<button class="playback-button--small shuffle" v-if="$root.mk.shuffleMode == 0" :class="$root.isDisabled() && 'disabled'"
|
<button class="volume-button--small volume" @click="app.muteButtonPressed()"
|
||||||
@click="$root.mk.shuffleMode = 1" :title="$root.getLz('term.enableShuffle')" v-b-tooltip.hover></button>
|
:class="{'active': app.cfg.audio.volume == 0}"
|
||||||
<button class="playback-button--small shuffle active" v-else :class="$root.isDisabled() && 'disabled'"
|
:title="app.cfg.audio.muted ? $root.getLz('term.unmute') : $root.getLz('term.mute')"
|
||||||
@click="$root.mk.shuffleMode = 0" :title="$root.getLz('term.disableShuffle')" v-b-tooltip.hover></button>
|
v-b-tooltip.hover></button>
|
||||||
</div>
|
<input type="range" class="slider" @wheel="app.volumeWheel"
|
||||||
<div class="app-chrome-item display--large">
|
:step="app.cfg.audio.volumeStep" min="0" :max="app.cfg.audio.maxVolume"
|
||||||
<button class="playback-button previous" @click="$root.prevButton()" :class="$root.isPrevDisabled() && 'disabled'"
|
v-model="app.mk.volume"
|
||||||
:title="$root.getLz('term.previous')" v-b-tooltip.hover></button>
|
v-if="typeof app.mk.volume != 'undefined'" @change="app.checkMuteChange()"
|
||||||
</div>
|
v-b-tooltip.hover :title="$root.formatVolumeTooltip()">
|
||||||
<div class="app-chrome-item display--large">
|
</div>
|
||||||
<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>
|
|
||||||
<div class="app-chrome-item volume display--large">
|
</template>
|
||||||
<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>
|
|
||||||
</template>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col right-col" v-if="tabMode != ''">
|
<div class="col right-col" v-if="tabMode != ''">
|
||||||
|
|
@ -110,21 +131,28 @@
|
||||||
</div> -->
|
</div> -->
|
||||||
<div class="lyrics-col" v-if="tabMode == 'lyrics'">
|
<div class="lyrics-col" v-if="tabMode == 'lyrics'">
|
||||||
<lyrics-view :yoffset="120" :time="time" :lyrics="lyrics"
|
<lyrics-view :yoffset="120" :time="time" :lyrics="lyrics"
|
||||||
:richlyrics="richlyrics"></lyrics-view>
|
:richlyrics="richlyrics"></lyrics-view>
|
||||||
</div>
|
</div>
|
||||||
<div class="queue-col" v-if="tabMode == 'queue'">
|
<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>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="app-content-container" v-else>
|
||||||
|
<app-content-area></app-content-area>
|
||||||
|
</div>
|
||||||
<div class="tab-toggles">
|
<div class="tab-toggles">
|
||||||
<div class="lyrics" :class="{active: tabMode == 'lyrics'}" @click="tabMode = (tabMode == 'lyrics') ? '' : 'lyrics'"></div>
|
<div class="lyrics" :class="{active: tabMode == 'lyrics'}"
|
||||||
<div class="queue" :class="{active: tabMode == 'queue'}" @click="tabMode = (tabMode == 'queue') ? '' :'queue'"></div>
|
@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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
@ -173,7 +201,7 @@
|
||||||
} else if (app.mk.nowPlayingItem._container.type == "library-albums") {
|
} else if (app.mk.nowPlayingItem._container.type == "library-albums") {
|
||||||
try {
|
try {
|
||||||
const result = (await app.mk.api.v3.music(`/v1/me/library/albums/${app.mk.nowPlayingItem._container.id}/catalog`
|
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) {
|
if (result) {
|
||||||
this.video = result
|
this.video = result
|
||||||
} else {
|
} else {
|
||||||
|
|
|
||||||
|
|
@ -126,9 +126,9 @@
|
||||||
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
if (typeof this.$parent.getChildren == "function") {
|
if (typeof this.$root.getChildren == "function") {
|
||||||
this.$parent.getChildren()
|
this.$root.getChildren()
|
||||||
console.log(this.$parent.children)
|
console.log(this.$root.children)
|
||||||
}
|
}
|
||||||
await this.getChildren()
|
await this.getChildren()
|
||||||
this.$root.sortPlaylists()
|
this.$root.sortPlaylists()
|
||||||
|
|
|
||||||
|
|
@ -15,8 +15,8 @@
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover">
|
||||||
<title>Cider</title>
|
<title>Cider</title>
|
||||||
<link rel="stylesheet/less" type="text/css" href="style.less"/>
|
<link rel="<%- (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"/>
|
<!-- <link rel="stylesheet/less" type="text/css" id="userTheme" href="themes/default.less"/>-->
|
||||||
<script src="./lib/less.js"></script>
|
<script src="./lib/less.js"></script>
|
||||||
<script src="<%- (env.dev ? " ./lib/vue.js" : "./lib/vue.dev.js") %>"></script>
|
<script src="<%- (env.dev ? " ./lib/vue.js" : "./lib/vue.dev.js") %>"></script>
|
||||||
<script src="./lib/vue-horizontal.js"></script>
|
<script src="./lib/vue-horizontal.js"></script>
|
||||||
|
|
@ -122,7 +122,7 @@
|
||||||
<!-- Sidebar Item -->
|
<!-- Sidebar Item -->
|
||||||
<script type="text/x-template" id="sidebar-library-item">
|
<script type="text/x-template" id="sidebar-library-item">
|
||||||
<button class="app-sidebar-item"
|
<button class="app-sidebar-item"
|
||||||
:class="$parent.getSidebarItemClass(page)" @click="$root.setWindowHash(page)">
|
:class="$root.getSidebarItemClass(page)" @click="$root.setWindowHash(page)">
|
||||||
<svg-icon :url="svgIconData" :name="'sidebar-' + svgIconName" v-if="svgIconData != ''" />
|
<svg-icon :url="svgIconData" :name="'sidebar-' + svgIconName" v-if="svgIconData != ''" />
|
||||||
<span class="sidebar-item-text">{{ name }}</span>
|
<span class="sidebar-item-text">{{ name }}</span>
|
||||||
</button>
|
</button>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue