Merge branch 'develop' into patch-1
This commit is contained in:
commit
dd037eb6a1
27 changed files with 658 additions and 163 deletions
|
@ -238,3 +238,6 @@ Update 10/04/2022 07:30 UTC
|
|||
|
||||
* `settings.option.visual.uiscale`: Added for `en_US`
|
||||
|
||||
Update 11/04/2022 13:45 UTC
|
||||
|
||||
* `action.openArtworkInBrowser`: Added for `en_US`
|
|
@ -258,6 +258,7 @@
|
|||
"action.cast.scan": "Scan",
|
||||
"action.cast.scanning": "Scanning...",
|
||||
"action.createNew": "Create New...",
|
||||
"action.openArtworkInBrowser": "Open artwork in browser",
|
||||
"settings.header.general": "General",
|
||||
"settings.header.general.description": "Adjust the general settings for Cider.",
|
||||
"settings.option.general.language": "Language",
|
||||
|
|
|
@ -258,6 +258,7 @@
|
|||
"action.cast.scan": "Keresés",
|
||||
"action.cast.scanning": "Keresés folyamatban...",
|
||||
"action.createNew": "Új létrehozása...",
|
||||
"action.openArtworkInBrowser": "Borító megnyitása a böngészőben",
|
||||
"settings.header.general": "Általános",
|
||||
"settings.header.general.description": "A Cider általános beállításainak módosítása.",
|
||||
"settings.option.general.language": "Nyelv",
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -258,6 +258,7 @@
|
|||
"action.cast.scan": "Scan",
|
||||
"action.cast.scanning": "Scanning...",
|
||||
"action.createNew": "Create New...",
|
||||
"action.openArtworkInBrowser": "Open artwork in browser",
|
||||
"settings.header.general": "General",
|
||||
"settings.header.general.description": "Adjust the general settings for Cider.",
|
||||
"settings.option.general.language": "Language",
|
||||
|
|
|
@ -167,12 +167,12 @@ export class BrowserWindow {
|
|||
page: "browsepage",
|
||||
component: `<cider-browse :data="browsepage"></cider-browse>`,
|
||||
condition: `page == 'browse'`,
|
||||
onEnter: `getBrowsePage();`
|
||||
onEnter: ``
|
||||
}, {
|
||||
page: "listen_now",
|
||||
component: `<cider-listen-now :data="listennow"></cider-listen-now>`,
|
||||
condition: `page == 'listen_now'`,
|
||||
onEnter: `getListenNow()`
|
||||
onEnter: ``
|
||||
}, {
|
||||
page: "settings",
|
||||
component: `<cider-settings></cider-settings>`,
|
||||
|
@ -185,17 +185,17 @@ export class BrowserWindow {
|
|||
page: "library-songs",
|
||||
component: `<cider-library-songs :data="library.songs"></cider-library-songs>`,
|
||||
condition: `page == 'library-songs'`,
|
||||
onEnter: `getLibrarySongsFull()`
|
||||
onEnter: ``
|
||||
}, {
|
||||
page: "library-albums",
|
||||
component: `<cider-library-albums :data="library.songs"></cider-library-albums>`,
|
||||
condition: `page == 'library-albums'`,
|
||||
onEnter: `getLibraryAlbumsFull(null, 1); getAlbumSort(); searchLibraryAlbums(1); getLibrarySongsFull() ;searchLibraryAlbums(1);`
|
||||
onEnter: ``
|
||||
}, {
|
||||
page: "library-artists",
|
||||
component: `<cider-library-artists></cider-library-artists>`,
|
||||
condition: `page == 'library-artists'`,
|
||||
onEnter: `getLibraryArtistsFull(null, 0);`
|
||||
onEnter: ``
|
||||
}, {
|
||||
page: "appleCurator",
|
||||
component: `<cider-applecurator :data="appleCurator"></cider-applecurator>`,
|
||||
|
|
|
@ -115,6 +115,7 @@ export class Store {
|
|||
},
|
||||
"visual": {
|
||||
"theme": "",
|
||||
"styles": [],
|
||||
"scrollbars": 0, // 0 = show on hover, 2 = always hide, 3 = always show
|
||||
"refresh_rate": 0,
|
||||
"window_background_style": "artwork", // "none", "artwork", "color"
|
||||
|
|
27
src/renderer/less/bootstrap.less
vendored
27
src/renderer/less/bootstrap.less
vendored
|
@ -35,10 +35,12 @@
|
|||
color: #212529;
|
||||
text-align: left;
|
||||
list-style: none;
|
||||
background-color: #fff;
|
||||
background-color: var(--color1);
|
||||
background-clip: padding-box;
|
||||
border: 1px solid rgba(0, 0, 0, 0.15);
|
||||
border-radius: 0.25rem;
|
||||
box-shadow: var(--mediaItemShadow), var(--mediaItemShadow-ShadowSubtle);
|
||||
backdrop-filter: var(--glassFilter);
|
||||
}
|
||||
.dropdown-menu[data-bs-popper] {
|
||||
top: 100%;
|
||||
|
@ -1388,23 +1390,24 @@ fieldset:disabled .btn {
|
|||
|
||||
.btn-secondary {
|
||||
color : #fff;
|
||||
background-color: #6c757d;
|
||||
border-color : #6c757d;
|
||||
border-color : 1px solid rgba(100, 100, 100, 0.35);
|
||||
background-color: rgba(100, 100, 100, 0.25);
|
||||
border-top-color: 1px solid rgba(100, 100, 100, 0.5);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
color : #fff;
|
||||
background-color: #5c636a;
|
||||
border-color : #565e64;
|
||||
// background-color: #5c636a;
|
||||
// border-color : #565e64;
|
||||
}
|
||||
|
||||
.btn-check:focus+.btn-secondary,
|
||||
.btn-secondary:focus {
|
||||
color : #fff;
|
||||
background-color: #5c636a;
|
||||
border-color : #565e64;
|
||||
box-shadow : 0 0 0 0.25rem rgba(130, 138, 145, 0.5);
|
||||
}
|
||||
// .btn-check:focus+.btn-secondary,
|
||||
// .btn-secondary:focus {
|
||||
// color : #fff;
|
||||
// background-color: #5c636a;
|
||||
// border-color : #565e64;
|
||||
// box-shadow : 0 0 0 0.25rem rgba(130, 138, 145, 0.5);
|
||||
// }
|
||||
|
||||
.btn-check:checked+.btn-secondary,
|
||||
.btn-check:active+.btn-secondary,
|
||||
|
|
|
@ -1738,7 +1738,7 @@ input[type=checkbox][switch]:checked:active::before {
|
|||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 12px 0px;
|
||||
margin: 12px 12px 12px 0px;
|
||||
border-radius: 4px;
|
||||
color: white;
|
||||
font-size: 1em;
|
||||
|
|
|
@ -281,13 +281,14 @@
|
|||
// Podcast Page
|
||||
.content-inner.library-artists-page {
|
||||
// top: 0;
|
||||
height: calc(100% - 60px - var(--navigationBarHeight));
|
||||
height : calc(100% - 60px - var(--navigationBarHeight));
|
||||
padding: 0px;
|
||||
|
||||
.inner-container {
|
||||
display: flex;
|
||||
height : calc(100% - var(--navigationBarHeight));
|
||||
padding: 0px;
|
||||
height: 100%;
|
||||
height : 100%;
|
||||
|
||||
.list-flat {
|
||||
border-radius: 0px;
|
||||
|
@ -331,7 +332,7 @@
|
|||
}
|
||||
|
||||
.episodes-list {
|
||||
height: calc(100% + 60px);
|
||||
height : calc(100% + 60px);
|
||||
width : 100%;
|
||||
background: rgb(200 200 200 / 6%);
|
||||
overflow-y: overlay;
|
||||
|
@ -568,7 +569,7 @@
|
|||
font-size : 1.6rem;
|
||||
//margin-bottom: 6px;
|
||||
margin-right : 6px;
|
||||
margin-bottom: 6px;
|
||||
margin-bottom : 6px;
|
||||
flex-shrink : unset;
|
||||
}
|
||||
|
||||
|
@ -972,9 +973,11 @@
|
|||
display : flex;
|
||||
overflow: hidden;
|
||||
padding : 16px 32px;
|
||||
|
||||
>.latestRelease {
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
>.topSongs {
|
||||
width: calc(100% - 250px);
|
||||
}
|
||||
|
@ -1016,18 +1019,49 @@
|
|||
.settings-page {
|
||||
padding: 0px;
|
||||
|
||||
.stylestack-editor {
|
||||
width: 100%;
|
||||
|
||||
.btn,
|
||||
.btn-group {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.themeLabel {
|
||||
display:flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.removeItem {
|
||||
border: 0px;
|
||||
background: transparent;
|
||||
height: 32px;
|
||||
font-weight: bold;
|
||||
color: var(--textColor);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.stylesDropdown {
|
||||
>.dropdown-menu {
|
||||
height : 300px;
|
||||
overflow-y: overlay;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.nav {
|
||||
width: 90%;
|
||||
width : 90%;
|
||||
margin: 16px auto 0px;
|
||||
}
|
||||
|
||||
.md-option-header {
|
||||
padding: 0px 26px;
|
||||
padding : 0px 26px;
|
||||
border-bottom: unset;
|
||||
border-top: unset;
|
||||
font-weight: 600;
|
||||
background: rgb(255 255 255 / 0%);
|
||||
font-size: 2em;
|
||||
border-top : unset;
|
||||
font-weight : 600;
|
||||
background : rgb(255 255 255 / 0%);
|
||||
font-size : 2em;
|
||||
}
|
||||
|
||||
.settings-option-body {
|
||||
|
@ -1050,36 +1084,38 @@
|
|||
|
||||
.carousel-item>img {
|
||||
object-fit: cover;
|
||||
width:100%;
|
||||
width : 100%;
|
||||
}
|
||||
|
||||
.spprofile-line {
|
||||
height: 300px;
|
||||
width: 100%;
|
||||
height : 300px;
|
||||
width : 100%;
|
||||
max-width: 1024px;
|
||||
padding: 16px;
|
||||
margin: 0 auto;
|
||||
padding : 16px;
|
||||
margin : 0 auto;
|
||||
|
||||
.spprofile-viewport {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
height : 100%;
|
||||
position : relative;
|
||||
border-radius: var(--mediaItemRadius);
|
||||
overflow: hidden;
|
||||
box-shadow: var(--mediaItemShadow-Shadow);
|
||||
background: black;
|
||||
overflow : hidden;
|
||||
box-shadow : var(--mediaItemShadow-Shadow);
|
||||
background : black;
|
||||
|
||||
.spprev, .nextprev {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 64px;
|
||||
top: 0;
|
||||
.spprev,
|
||||
.nextprev {
|
||||
position : absolute;
|
||||
height : 100%;
|
||||
width : 64px;
|
||||
top : 0;
|
||||
background: rgb(0 0 0 / 20%);
|
||||
z-index: 1;
|
||||
border: 0px;
|
||||
z-index : 1;
|
||||
border : 0px;
|
||||
transition: background 0.2s var(--appleEase), transform 0.2s var(--appleEase);
|
||||
|
||||
&:hover {
|
||||
background: var(--selected);
|
||||
transform: scale(1.1);
|
||||
transform : scale(1.1);
|
||||
}
|
||||
|
||||
&:active {
|
||||
|
@ -1088,22 +1124,23 @@
|
|||
}
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #eee;
|
||||
opacity: 1;
|
||||
content : '';
|
||||
position : absolute;
|
||||
top : 0;
|
||||
left : 0;
|
||||
width : 100%;
|
||||
height : 100%;
|
||||
background : #eee;
|
||||
opacity : 1;
|
||||
-webkit-mask-position: center;
|
||||
-webkit-mask-repeat: no-repeat;
|
||||
-webkit-mask-size: 1em;
|
||||
-webkit-mask-repeat : no-repeat;
|
||||
-webkit-mask-size : 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.spprev {
|
||||
left: 0;
|
||||
|
||||
&:before {
|
||||
-webkit-mask-image: url("./views/svg/chevron-left.svg");
|
||||
}
|
||||
|
@ -1112,6 +1149,7 @@
|
|||
|
||||
.nextprev {
|
||||
right: 0;
|
||||
|
||||
&:before {
|
||||
-webkit-mask-image: url("./views/svg/chevron-right.svg");
|
||||
}
|
||||
|
@ -1119,25 +1157,25 @@
|
|||
}
|
||||
|
||||
.spslide {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
position : absolute;
|
||||
width : 100%;
|
||||
height : 100%;
|
||||
overflow : hidden;
|
||||
background: black;
|
||||
|
||||
>img {
|
||||
WIDTH: 100%;
|
||||
height: 100%;
|
||||
WIDTH : 100%;
|
||||
height : 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.sptitle {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
position : absolute;
|
||||
bottom : 0px;
|
||||
left : 0;
|
||||
width : 100%;
|
||||
text-align : center;
|
||||
font-size : 18px;
|
||||
text-shadow: 0px 2px 4px #00000033;
|
||||
}
|
||||
}
|
||||
|
@ -1145,18 +1183,19 @@
|
|||
.spfade-enter-active,
|
||||
.spfade-leave-active {
|
||||
--transitionTime: 0.2s;
|
||||
transition: opacity var(--transitionTime) var(--appleEase), transform var(--transitionTime) var(--appleEase);
|
||||
will-change: opacity, transform;
|
||||
transition : opacity var(--transitionTime) var(--appleEase), transform var(--transitionTime) var(--appleEase);
|
||||
will-change : opacity, transform;
|
||||
}
|
||||
|
||||
.spfade-enter {
|
||||
opacity: 0;
|
||||
transform: scale(1.2) translate3d(0,0,0);
|
||||
opacity : 0;
|
||||
transform : scale(1.2) translate3d(0, 0, 0);
|
||||
will-change: opacity, transform;
|
||||
}
|
||||
|
||||
.spfade-leave-to {
|
||||
opacity: 1;
|
||||
transform: scale(1) translate3d(0,0,0);
|
||||
opacity : 1;
|
||||
transform : scale(1) translate3d(0, 0, 0);
|
||||
will-change: opacity, transform;
|
||||
}
|
||||
}
|
||||
|
@ -1171,9 +1210,11 @@
|
|||
0% {
|
||||
background-position: 0% 0%;
|
||||
}
|
||||
|
||||
50% {
|
||||
background-position: 100% 0%;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: 0% 0%;
|
||||
}
|
||||
|
@ -1181,31 +1222,31 @@
|
|||
|
||||
//Home
|
||||
.home-page {
|
||||
top : 0;
|
||||
top : 0;
|
||||
//padding-top: var(--navbarHeight);
|
||||
|
||||
.md-btn-replay {
|
||||
background-image: linear-gradient(-45deg, #2e2173, #925042);
|
||||
animation: gradient-animation 5s ease-in-out infinite;
|
||||
background-size: 400% 400%;
|
||||
border : 0px;
|
||||
box-shadow : inset 0px 0px 0px 1px rgba(200, 200, 200, 0.2);
|
||||
text-transform: uppercase;
|
||||
font-weight : bold;
|
||||
animation : gradient-animation 5s ease-in-out infinite;
|
||||
background-size : 400% 400%;
|
||||
border : 0px;
|
||||
box-shadow : inset 0px 0px 0px 1px rgba(200, 200, 200, 0.2);
|
||||
text-transform : uppercase;
|
||||
font-weight : bold;
|
||||
}
|
||||
|
||||
.md-btn-replay--hero {
|
||||
font-size : 1em;
|
||||
padding : 16px;
|
||||
font-size : 1em;
|
||||
padding : 16px;
|
||||
background-image: linear-gradient(-45deg, #2e2173, #925042);
|
||||
animation: gradient-animation 5s ease-in-out infinite;
|
||||
background-size: 400% 400%;
|
||||
border : 0px;
|
||||
box-shadow : inset 0px 0px 0px 1px rgb(200 200 200 / 20%);
|
||||
margin-top : 1em;
|
||||
font-size : 0.9em;
|
||||
text-transform: uppercase;
|
||||
font-weight : bold;
|
||||
animation : gradient-animation 5s ease-in-out infinite;
|
||||
background-size : 400% 400%;
|
||||
border : 0px;
|
||||
box-shadow : inset 0px 0px 0px 1px rgb(200 200 200 / 20%);
|
||||
margin-top : 1em;
|
||||
font-size : 0.9em;
|
||||
text-transform : uppercase;
|
||||
font-weight : bold;
|
||||
}
|
||||
|
||||
.artist-feed-card {
|
||||
|
@ -1375,12 +1416,12 @@
|
|||
|
||||
.replay-viewport {
|
||||
background-image: linear-gradient(-45deg, #2e2173, #925042);
|
||||
animation: gradient-animation 5s ease-in-out infinite;
|
||||
background-size: 400% 400%;
|
||||
padding : 16px 40px;
|
||||
border-radius: 10px;
|
||||
box-shadow : var(--mediaItemShadow), var(--mediaItemShadow-Shadow);
|
||||
color : rgb(238 238 238 / 86%);
|
||||
animation : gradient-animation 5s ease-in-out infinite;
|
||||
background-size : 400% 400%;
|
||||
padding : 16px 40px;
|
||||
border-radius : 10px;
|
||||
box-shadow : var(--mediaItemShadow), var(--mediaItemShadow-Shadow);
|
||||
color : rgb(238 238 238 / 86%);
|
||||
|
||||
.replay-header {
|
||||
text-align : center;
|
||||
|
|
|
@ -465,9 +465,9 @@ const app = new Vue({
|
|||
history.forward()
|
||||
},
|
||||
getHTMLStyle() {
|
||||
if(app.cfg.visual.uiScale != 1) {
|
||||
if (app.cfg.visual.uiScale != 1) {
|
||||
document.querySelector("#app").style.zoom = app.cfg.visual.uiScale
|
||||
}else{
|
||||
} else {
|
||||
document.querySelector("#app").style.zoom = ""
|
||||
}
|
||||
},
|
||||
|
@ -581,6 +581,9 @@ const app = new Vue({
|
|||
if (this.cfg.visual.theme != "default.less" && this.cfg.visual.theme != "") {
|
||||
this.setTheme(this.cfg.visual.theme)
|
||||
}
|
||||
if (this.cfg.visual.styles.length != 0) {
|
||||
await this.reloadStyles()
|
||||
}
|
||||
|
||||
if (this.platform == "darwin") {
|
||||
this.chrome.windowControlPosition = "left"
|
||||
|
@ -762,6 +765,9 @@ const app = new Vue({
|
|||
ipcRenderer.on('theme-update', (event, arg) => {
|
||||
less.refresh(true, true, true)
|
||||
self.setTheme(self.cfg.visual.theme, true)
|
||||
if (app.cfg.visual.styles.length != 0) {
|
||||
app.reloadStyles()
|
||||
}
|
||||
})
|
||||
|
||||
ipcRenderer.on('SoundCheckTag', (event, tag) => {
|
||||
|
@ -956,6 +962,35 @@ const app = new Vue({
|
|||
less.refresh()
|
||||
}
|
||||
},
|
||||
async reloadStyles() {
|
||||
const styles = this.cfg.visual.styles
|
||||
document.querySelectorAll(`[id*='less']`).forEach(el => {
|
||||
if(el.id != "less:style") {
|
||||
el.remove()
|
||||
}
|
||||
});
|
||||
|
||||
this.chrome.appliedTheme.info = {}
|
||||
await asyncForEach(styles, async (style) => {
|
||||
let styleEl = document.createElement("link")
|
||||
styleEl.id = `less-${style.replace(".less", "")}`
|
||||
styleEl.rel = "stylesheet/less"
|
||||
styleEl.href = `themes/${style}`
|
||||
styleEl.type = "text/css"
|
||||
document.head.appendChild(styleEl)
|
||||
try {
|
||||
let infoResponse = await fetch("themes/" + style.replace("index.less", "theme.json"))
|
||||
this.chrome.appliedTheme.info = Object.assign(this.chrome.appliedTheme.info, await infoResponse.json())
|
||||
} catch (e) {
|
||||
e = null
|
||||
console.warn("failed to get theme.json")
|
||||
}
|
||||
})
|
||||
less.registerStylesheetsImmediately()
|
||||
less.refresh(true, true, true)
|
||||
this.$forceUpdate()
|
||||
return
|
||||
},
|
||||
macOSEmu() {
|
||||
this.chrome.forceDirectives["macosemu"] = {
|
||||
value: true
|
||||
|
@ -3811,7 +3846,7 @@ const app = new Vue({
|
|||
]
|
||||
}
|
||||
}
|
||||
if(this.cfg.advanced.AudioContext) {
|
||||
if (this.cfg.advanced.AudioContext) {
|
||||
menus.normal.items.find(i => i.id === 'audioLab').hidden = false
|
||||
menus.normal.items.find(i => i.id === 'equalizer').hidden = false
|
||||
}
|
||||
|
|
|
@ -44,6 +44,7 @@
|
|||
--songProgressBackground: #333;
|
||||
--textColor: #eee;
|
||||
--replayGradient: linear-gradient(45deg, hsl(248deg 58% 29%), hsl(13deg 41% 42%));
|
||||
--glassFilter: blur(16px) saturate(180%);
|
||||
}
|
||||
|
||||
*:focus-visible {
|
||||
|
@ -238,6 +239,17 @@ input[type="text"], input[type="number"] {
|
|||
opacity: 0.70;
|
||||
}
|
||||
|
||||
a.dropdown-item {
|
||||
color: var(--textColor);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--selected);
|
||||
color: var(--textColor);
|
||||
}
|
||||
&:active {
|
||||
background-color: var(--selected-click);
|
||||
}
|
||||
}
|
||||
|
||||
.bg-artwork {
|
||||
position: absolute;
|
||||
|
@ -1554,7 +1566,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
|
|||
font-size: 26px;
|
||||
transform: scale(0.8);
|
||||
transform-origin: left center;
|
||||
transition: transform 0.2s var(--appleEase);
|
||||
transition: transform 0.5s var(--appleEase);
|
||||
opacity: 0.75;
|
||||
width: auto;
|
||||
display: inline-block;
|
||||
|
@ -1614,7 +1626,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
|
|||
filter: none !important;
|
||||
}
|
||||
.lyric-body > .lyric-line:not(.active) {
|
||||
transition: filter var(--appleEase) 0.5s ease;
|
||||
// transition: filter var(--appleEase) 0.5s ease;
|
||||
}
|
||||
|
||||
.lyricWaiting {
|
||||
|
|
0
src/renderer/themes/compactui.less
Normal file
0
src/renderer/themes/compactui.less
Normal file
|
@ -1 +0,0 @@
|
|||
//
|
|
@ -1,15 +0,0 @@
|
|||
{
|
||||
"name": "Groovy",
|
||||
"description": "Inspired by Groove Music and Media Player found on Windows",
|
||||
"version": "1.0.0",
|
||||
"author": "ciderapp",
|
||||
"github_repo": "ciderapp/Groovy",
|
||||
"directives": {
|
||||
"windowLayout": {
|
||||
"value": "twopanel"
|
||||
},
|
||||
"lcdArtworkSize": {
|
||||
"value": 70
|
||||
}
|
||||
}
|
||||
}
|
41
src/renderer/themes/inline_drawer.less
Normal file
41
src/renderer/themes/inline_drawer.less
Normal file
|
@ -0,0 +1,41 @@
|
|||
&:not(.modular-fs) {
|
||||
.app-drawer {
|
||||
border-radius: 0px;
|
||||
top : 0;
|
||||
right : 0;
|
||||
height : 100%;
|
||||
box-shadow : unset;
|
||||
border-left : 1px solid var(--color2);
|
||||
background : var(--color1);
|
||||
margin-right : 0px;
|
||||
position : relative;
|
||||
}
|
||||
|
||||
.drawertransition-enter-active,
|
||||
.drawertransition-leave-active {
|
||||
transition: margin .25s var(--appleEase), opacity .25s var(--appleEase);
|
||||
}
|
||||
|
||||
.drawertransition-enter,
|
||||
.drawertransition-leave-to {
|
||||
margin-right: -300px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1120px) {
|
||||
.app-drawer {
|
||||
margin-right: 0px;
|
||||
position : absolute;
|
||||
}
|
||||
|
||||
.drawertransition-enter-active,
|
||||
.drawertransition-leave-active {
|
||||
transition: right .25s var(--appleEase), opacity .25s var(--appleEase);
|
||||
}
|
||||
|
||||
.drawertransition-enter,
|
||||
.drawertransition-leave-to {
|
||||
right: -300px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
115
src/renderer/themes/reduce_visuals.less
Normal file
115
src/renderer/themes/reduce_visuals.less
Normal file
|
@ -0,0 +1,115 @@
|
|||
body {
|
||||
--ciderShadow-Generic : var(--mediaItemShadow);
|
||||
--mediaItemShadow-Shadow : var(--mediaItemShadow);
|
||||
--mediaItemShadow-ShadowSubtle: var(--mediaItemShadow);
|
||||
}
|
||||
|
||||
.bg-artwork-container {
|
||||
display : none;
|
||||
animation: none !important;
|
||||
|
||||
.bg-artwork {
|
||||
animation: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.replaycard-enter-active,
|
||||
.replaycard-leave-active {
|
||||
transition: unset;
|
||||
}
|
||||
|
||||
.replaycard-enter,
|
||||
.replaycard-leave-to {
|
||||
opacity : 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
|
||||
.modal-enter-active,
|
||||
.modal-leave-active {
|
||||
transition: unset;
|
||||
}
|
||||
|
||||
.modal-enter,
|
||||
.modal-leave-to {
|
||||
opacity : 0;
|
||||
transform: scale(1.10);
|
||||
}
|
||||
|
||||
.wpfade-enter-active,
|
||||
.wpfade-leave-active {
|
||||
transition: opacity .1s var(--appleEase);
|
||||
}
|
||||
|
||||
.wpfade-enter,
|
||||
.wpfade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.wpfade_transform-enter-active,
|
||||
.wpfade_transform-leave-active {
|
||||
transition : unset;
|
||||
will-change: unset;
|
||||
}
|
||||
|
||||
.wpfade_transform-enter {
|
||||
opacity : 0;
|
||||
transform : unset;
|
||||
will-change: unset;
|
||||
}
|
||||
|
||||
.wpfade_transform-leave-to {
|
||||
opacity : 0;
|
||||
transform : unset;
|
||||
will-change: unset;
|
||||
}
|
||||
|
||||
|
||||
.wpfade_transform_backwards-enter-active,
|
||||
.wpfade_transform_backwards-leave-active {
|
||||
transition: unset;
|
||||
}
|
||||
|
||||
.wpfade_transform_backwards-enter {
|
||||
opacity : 0;
|
||||
transform : unset;
|
||||
will-change: unset;
|
||||
}
|
||||
|
||||
.wpfade_transform_backwards-leave-to {
|
||||
opacity : 0;
|
||||
transform : unset;
|
||||
will-change: unset;
|
||||
}
|
||||
|
||||
.fabfade-enter-active,
|
||||
.fabfade-leave-active {
|
||||
transition: unset;
|
||||
}
|
||||
|
||||
.fabfade-enter,
|
||||
.fabfade-leave-to {
|
||||
opacity : 0;
|
||||
transform: scale(0.5);
|
||||
}
|
||||
|
||||
.fsModeSwitch-enter-active,
|
||||
.fsModeSwitch-leave-active {
|
||||
transition: unset;
|
||||
}
|
||||
|
||||
.fsModeSwitch-enter,
|
||||
.fsModeSwitch-leave-to {
|
||||
transform: scale(1.10);
|
||||
opacity : 0;
|
||||
}
|
||||
|
||||
|
||||
.drawertransition-enter-active,
|
||||
.drawertransition-leave-active {
|
||||
transition: unset;
|
||||
}
|
||||
|
||||
.drawertransition-enter,
|
||||
.drawertransition-leave-to {
|
||||
right: -300px;
|
||||
}
|
|
@ -2,6 +2,7 @@
|
|||
<div class="mediaitem-artwork" @contextmenu="contextMenu" :class="[{'rounded': (type == 'artists')}, classes]" :key="url">
|
||||
<img :src="app.getMediaItemArtwork(url, size, width)"
|
||||
decoding="async"
|
||||
loading="lazy"
|
||||
:style="{background: bgcolor}"
|
||||
class="mediaitem-artwork--img">
|
||||
<div v-if="video && getVideoPriority()" class="animatedartwork-view-box">
|
||||
|
@ -66,7 +67,7 @@
|
|||
app.showMenuPanel({
|
||||
items: {
|
||||
"save": {
|
||||
name: "Open artwork in browser",
|
||||
name: app.getLz('action.openArtworkInBrowser'),
|
||||
action: () => {
|
||||
window.open(app.getMediaItemArtwork(self.url, 1024, 1024))
|
||||
}
|
||||
|
|
|
@ -5,7 +5,7 @@
|
|||
@contextmenu.self="contextMenu"
|
||||
v-observe-visibility="{callback: visibilityChanged}"
|
||||
>
|
||||
<div v-if="reasonShown && isVisible" class="reasonSP ">{{item?.meta?.reason?.stringForDisplay ?? ' '}}</div>
|
||||
<div v-if="reasonShown" class="reasonSP ">{{item?.meta?.reason?.stringForDisplay ?? ''}}</div>
|
||||
<div style="{'--spcolor': getBgColor()}"
|
||||
class="cd-mediaitem-square" :class="getClasses()" @contextmenu="contextMenu">
|
||||
<template>
|
||||
|
|
|
@ -42,5 +42,8 @@
|
|||
app: this.$root
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$root.getBrowsePage();
|
||||
}
|
||||
})
|
||||
</script>
|
|
@ -71,6 +71,13 @@
|
|||
app : this.$root
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$root.getLibraryAlbumsFull(null, 1);
|
||||
this.$root.getAlbumSort();
|
||||
this.$root.searchLibraryAlbums(1);
|
||||
this.$root.getLibrarySongsFull() ;
|
||||
this.$root.searchLibraryAlbums(1);
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
});
|
||||
|
|
|
@ -63,6 +63,7 @@
|
|||
},
|
||||
mounted() {
|
||||
let self = this;
|
||||
this.$root.getLibraryArtistsFull(null, 0);
|
||||
this.$root.$on('ap-inlinecollection', function(e){
|
||||
console.log("hey",e)
|
||||
self.clready = true;
|
||||
|
|
|
@ -80,6 +80,9 @@
|
|||
app : this.$root
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$root.getLibrarySongsFull()
|
||||
},
|
||||
methods: {
|
||||
sayHello: function () {
|
||||
alert('Hello world!');
|
||||
|
|
|
@ -15,6 +15,9 @@ Vue.component('cider-listen-now', {
|
|||
return {
|
||||
app : this.$root
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$root.getListenNow()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
|
|
@ -83,6 +83,8 @@
|
|||
<div v-if="categoriesReady || getCategories()">
|
||||
<div>
|
||||
<div class="col" v-if="categoriesView != null && categoriesView != [] && categoriesView[0].attributes != null && categoriesView[0].attributes.title != null">
|
||||
<h3>{{$root.getLz('home.recentlyPlayed')}}</h3>
|
||||
<mediaitem-square :kind="'385'" size="600" v-for="item in recentlyPlayed.limit(10)" :item="item" :imagesize="800"></mediaitem-square>
|
||||
<h3>{{categoriesView[0].attributes.title.stringForDisplay ?? ""}}</h3>
|
||||
</div>
|
||||
<mediaitem-square :kind="'385'" size="600"
|
||||
|
@ -102,6 +104,7 @@
|
|||
data: function () {
|
||||
return {
|
||||
app: this.$root,
|
||||
recentlyPlayed: [],
|
||||
categoriesView: [],
|
||||
categoriesReady: false,
|
||||
}
|
||||
|
@ -114,8 +117,15 @@
|
|||
return false
|
||||
}
|
||||
},
|
||||
async seeAllHistory() {
|
||||
let hist = await app.mk.api.v3.music(`/v1/me/recent/played/tracks`, {
|
||||
l: this.$root.mklang
|
||||
})
|
||||
this.recentlyPlayed = hist.data.data
|
||||
},
|
||||
async getCategories() {
|
||||
if (this.categoriesView != [] && this.categoriesView.length > 0) { this.categoriesReady = true; return await true; } else {
|
||||
await this.seeAllHistory()
|
||||
let response = await this.app.mk.api.v3.music(`/v1/recommendations/${this.app.mk.storefrontId}?timezone=${encodeURIComponent(this.app.formatTimezoneOffset())}&name=search-landing&platform=web&extend=editorialArtwork&art%5Burl%5D=f%2Cc&types=editorial-items%2Capple-curators%2Cactivities&l=${this.$root.mklang}`);
|
||||
this.categoriesView = response.data.data;
|
||||
console.log(this.categoriesView)
|
||||
|
|
|
@ -226,7 +226,6 @@
|
|||
<select class="md-select" @change="$root.setTheme($root.cfg.visual.theme)" v-model="$root.cfg.visual.theme">
|
||||
<option value="default.less">{{$root.getLz('settings.option.visual.theme.default')}}</option>
|
||||
<option value="dark.less">{{$root.getLz('settings.option.visual.theme.dark')}}</option>
|
||||
<option value="sweetener.less">Sweetener</option>
|
||||
<option v-for="theme in themes" :value="theme.file">{{ theme.name }}</option>
|
||||
</select>
|
||||
<button class="md-btn md-btn-small md-btn-block" @click="gitHubExplore()" style="margin-top: 8px">
|
||||
|
@ -840,6 +839,17 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="md-option-line">
|
||||
<!-- Do not translate -->
|
||||
<div class="md-option-segment">
|
||||
Style Editor<br>
|
||||
<small>Mix and match various theme components to get Cider looking exactly how you want.</small>
|
||||
</div>
|
||||
<div class="md-option-segment">
|
||||
<stylestack-editor :themes="themes"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="md-option-line">
|
||||
<div class="md-option-segment">
|
||||
{{$root.getLz('settings.option.experimental.unknownPlugin')}}
|
||||
|
@ -938,6 +948,106 @@
|
|||
</div>
|
||||
</script>
|
||||
|
||||
<script>
|
||||
// do not translate
|
||||
Vue.component('stylestack-editor', {
|
||||
/*html*/
|
||||
template: `
|
||||
<div class="stylestack-editor">
|
||||
<draggable class="list-group" v-model="$root.cfg.visual.styles" @end="$root.reloadStyles()">
|
||||
<b-list-group-item variant="dark" v-for="theme in $root.cfg.visual.styles" :key="theme">
|
||||
<b-row>
|
||||
<b-col class="themeLabel">{{getThemeName(theme)}}</b-col>
|
||||
<b-col sm="auto">
|
||||
<button class="removeItem codicon codicon-close" @click="remove(theme)"></button>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-list-group-item>
|
||||
<b-list-group-item slot="footer" style="-webkit-user-drag: none" variant="dark">
|
||||
<b-row>
|
||||
<b-col>
|
||||
<b-dropdown class="stylesDropdown" variant="primary" text="Add Style...">
|
||||
<b-dropdown-item v-for="theme in themes" @click="addStyle(theme.file)">{{theme.name}}</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
</b-col>
|
||||
<b-col>
|
||||
<b-btn @click="gitHubExplore()">{{$root.getLz('settings.option.visual.theme.github.explore')}}</b-btn>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-list-group-item>
|
||||
</draggable>
|
||||
</div>
|
||||
`,
|
||||
props: {
|
||||
themes: {
|
||||
type: Array,
|
||||
default: []
|
||||
}
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
selected: null,
|
||||
newTheme: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.themes.unshift({
|
||||
name: "Sweetener",
|
||||
file: "sweetener.less"
|
||||
})
|
||||
this.themes.unshift({
|
||||
name: "Reduce Visuals",
|
||||
file: "reduce_visuals.less"
|
||||
})
|
||||
this.themes.unshift({
|
||||
name: "Inline Drawer",
|
||||
file: "inline_drawer.less"
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
gitHubExplore() {
|
||||
this.$root.appRoute("themes-github")
|
||||
},
|
||||
getThemeName(filename) {
|
||||
try {
|
||||
return this.themes.find(theme => theme.file === filename).name;
|
||||
}catch(e) {
|
||||
return filename;
|
||||
}
|
||||
},
|
||||
moveUp() {
|
||||
const styles = this.$root.cfg.visual.styles
|
||||
const index = styles.indexOf(this.selected)
|
||||
if (index > 0) {
|
||||
styles.splice(index, 1)
|
||||
styles.splice(index - 1, 0, this.selected)
|
||||
}
|
||||
this.$root.reloadStyles()
|
||||
},
|
||||
moveDown() {
|
||||
const styles = this.$root.cfg.visual.styles
|
||||
const index = styles.indexOf(this.selected)
|
||||
if (index < styles.length - 1) {
|
||||
styles.splice(index, 1)
|
||||
styles.splice(index + 1, 0, this.selected)
|
||||
}
|
||||
this.$root.reloadStyles()
|
||||
},
|
||||
remove(style) {
|
||||
const styles = this.$root.cfg.visual.styles
|
||||
const index = styles.indexOf(style)
|
||||
styles.splice(index, 1)
|
||||
this.$root.reloadStyles()
|
||||
},
|
||||
addStyle(style) {
|
||||
const styles = this.$root.cfg.visual.styles
|
||||
styles.push(style)
|
||||
this.$root.reloadStyles()
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<script>
|
||||
Vue.component('cider-settings', {
|
||||
template: "#cider-settings",
|
||||
|
@ -960,13 +1070,13 @@
|
|||
methods: {
|
||||
windowBgStyleChange() {
|
||||
this.$root.getNowPlayingArtworkBG(undefined, true)
|
||||
if(this.$root.cfg.visual.window_background_style == "mica") {
|
||||
if (this.$root.cfg.visual.window_background_style == "mica") {
|
||||
this.$root.spawnMica()
|
||||
}
|
||||
},
|
||||
reinstallWidevineCDM () {
|
||||
bootbox.confirm(app.getLz("settings.option.experimental.reinstallwidevine.confirm"), (ok)=>{
|
||||
if(ok) {
|
||||
reinstallWidevineCDM() {
|
||||
bootbox.confirm(app.getLz("settings.option.experimental.reinstallwidevine.confirm"), (ok) => {
|
||||
if (ok) {
|
||||
ipcRenderer.invoke("reinstall-widevine-cdm");
|
||||
}
|
||||
})
|
||||
|
@ -1009,16 +1119,17 @@
|
|||
if (app.cfg.advanced.AudioContext === true) {
|
||||
if (navigator.hardwareConcurrency < 6) {
|
||||
bootbox.confirm(app.getLz("settings.warn.audio.enableAdvancedFunctionality.lowcores"), function (result) {
|
||||
if (result) {
|
||||
CiderAudio.init();
|
||||
if (app.cfg.audio.normalization === true) {
|
||||
CiderAudio.normalizerOn()
|
||||
if (result) {
|
||||
CiderAudio.init();
|
||||
if (app.cfg.audio.normalization === true) {
|
||||
CiderAudio.normalizerOn()
|
||||
}
|
||||
if (app.cfg.audio.spatial === true) {
|
||||
CiderAudio.spatialOn()
|
||||
CiderAudio.hierarchical_loading();
|
||||
}
|
||||
}
|
||||
if (app.cfg.audio.spatial === true) {
|
||||
CiderAudio.spatialOn()
|
||||
CiderAudio.hierarchical_loading();
|
||||
}
|
||||
}})
|
||||
})
|
||||
}
|
||||
else {
|
||||
CiderAudio.init();
|
||||
|
@ -1054,22 +1165,22 @@
|
|||
ipcRenderer.invoke('update-store-mtt', app.cfg.general.close_behavior);
|
||||
},
|
||||
checkIfUpdateDisabled() {
|
||||
if (app.cfg.main.UPDATABLE) return;
|
||||
if (app.cfg.main.UPDATABLE) return;
|
||||
|
||||
let updateFields = document.getElementsByClassName('update-check');
|
||||
for (let i=0; i < updateFields.length; i++) {
|
||||
for (let i = 0; i < updateFields.length; i++) {
|
||||
updateFields[i].style = "opacity: 0.5; pointer-events: none;";
|
||||
updateFields[i].title = "Not available on this type of build";
|
||||
}
|
||||
|
||||
},
|
||||
promptForRelaunch(){
|
||||
promptForRelaunch() {
|
||||
bootbox.confirm(app.getLz('action.relaunch.confirm'), function (result) {
|
||||
if (result) {
|
||||
ipcRenderer.send('relaunchApp','');
|
||||
}
|
||||
});
|
||||
if (result) {
|
||||
ipcRenderer.send('relaunchApp', '');
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
</script>
|
|
@ -10,7 +10,6 @@
|
|||
v-model="$root.cfg.visual.theme">
|
||||
<option value="default.less">{{$root.getLz('settings.option.visual.theme.default')}}</option>
|
||||
<option value="dark.less">{{$root.getLz('settings.option.visual.theme.dark')}}</option>
|
||||
<option value="sweetener.less">Sweetener</option>
|
||||
<option v-for="theme in themes" :value="theme.file">{{ theme.name }}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue