diff --git a/.circleci/config.yml b/.circleci/config.yml index f1370fb9..e02b98b2 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -3,7 +3,7 @@ version: 2.1 executors: cider-ci: docker: - - image: circleci/node:16 + - image: cimg/node:lts-browsers working_directory: ~/Cider orbs: # Add orbs to your configuration @@ -15,15 +15,9 @@ jobs: executor: cider-ci steps: - checkout - # - run: - # name: Rename Repository - # command: sed -i 's/github:ciderapp\/Cider/github:ciderapp\/cider-releases/' package.json - run: name: Update Version Number of App command: sudo chmod +x resources/version.sh && ./resources/version.sh || true - - run: - name: Update Package Managers - command: sudo npm update -g npm yarn - restore_cache: name: Restore Yarn Package Cache keys: @@ -60,9 +54,6 @@ jobs: steps: - attach_workspace: at: ~/Cider -# - run: -# name: Fix Versioning and Add Channel -# command: yarn circle:script - run: name: Generate Builds (Linux) command: yarn electron-builder -l -p never @@ -89,9 +80,6 @@ jobs: sudo dpkg --add-architecture i386 sudo apt-get update -y sudo apt-get install -y wine32 -# - run: -# name: Fix Versioning and Add Channel -# command: yarn circle:script - run: name: Generate Builds (Windows) command: yarn electron-builder -w --x64 -p never @@ -117,9 +105,6 @@ jobs: sudo dpkg --add-architecture i386 sudo apt-get update -y sudo apt-get install -y wine32 -# - run: -# name: Fix Versioning and Add Channel -# command: yarn circle:script - run: name: Generate Builds (Winget) command: yarn electron-builder --win -c winget.json -p never @@ -156,9 +141,6 @@ jobs: mv ~/Cider/dist/*.blockmap ~/Cider/dist/artifacts - store_artifacts: path: ~/Cider/dist/artifacts -# - run: -# name: Fix Versioning and Add Channel -# command: yarn circle:script - run: name: Update Version Number of App command: sudo chmod +x resources/version.sh && ./resources/version.sh || true diff --git a/src/i18n/en_GB.json b/src/i18n/en_GB.json index bd4f7203..3be188ea 100644 --- a/src/i18n/en_GB.json +++ b/src/i18n/en_GB.json @@ -2,7 +2,7 @@ "i18n.languageName": "English (UK)", "i18n.languageNameEnglish": "English (UK)", "i18n.category": "main", - "i18n.authors": "Core, inalone, nosh118", + "i18n.authors": "Core, inalone, nosh118, booploops", "date.format": "${d} ${m}, ${y}", "term.equalizer": "Equaliser", "settings.option.audio.enableAdvancedFunctionality.description": "Enabling AudioContext functionality will allow for extended audio features like Audio Normalisation, Equalisers and Visualisers - however on some systems this may cause stuttering in audio tracks.", @@ -14,5 +14,14 @@ "term.track": { "one" : "song", "other" : "songs" - } + }, + "home.syncFavorites": "Sync Favourites", + "home.syncFavorites.gettingArtists": "Getting Favourited Artists...", + "action.addToFavorites": "Add to Favourites", + "action.favorite": "Favourite", + "action.removeFavorite": "Remove Favourite", + "settings.option.visual.customAccentColor": "Custom Accent Colour", + "settings.option.visual.accentColor": "Accent Colour", + "settings.option.visual.windowColor": "Window Tint Colour", + "settings.header.visual.windowBackgroundStyle.color": "Colour Tint" } diff --git a/src/main/base/browserwindow.ts b/src/main/base/browserwindow.ts index 89c54e55..e0d646d3 100644 --- a/src/main/base/browserwindow.ts +++ b/src/main/base/browserwindow.ts @@ -53,6 +53,7 @@ export class BrowserWindow { dev: app.isPackaged, osRelease: os.release(), updatable: !process.windowsStore || !process.mas, + useV3: utils.getStoreValue('advanced.experiments').includes("ampv3"), components: [ "pages/podcasts", "pages/apple-account-settings", @@ -849,6 +850,7 @@ export class BrowserWindow { }) ipcMain.handle("get-github-plugin", async (event, url) => { + await this.StopWatcher() const returnVal = { success: true, theme: null, @@ -893,9 +895,11 @@ export class BrowserWindow { returnVal.success = false; } BrowserWindow.win.webContents.send("plugin-installed", returnVal); + this.StartWatcher(utils.getPath('themes')); }); ipcMain.handle("get-github-theme", async (event, url) => { + await this.StopWatcher() const returnVal = { success: true, theme: null, @@ -940,6 +944,8 @@ export class BrowserWindow { returnVal.success = false; } BrowserWindow.win.webContents.send("theme-installed", returnVal); + this.StartWatcher(utils.getPath('themes')); + BrowserWindow.win.webContents.send("theme-update", "") }); ipcMain.on("get-themes", (event, _key) => { diff --git a/src/renderer/less/elements.less b/src/renderer/less/elements.less index 1604effa..e43e8a6c 100644 --- a/src/renderer/less/elements.less +++ b/src/renderer/less/elements.less @@ -400,15 +400,15 @@ .listitem-content { width: 100%; - height: 60px; - display: flex; - flex: 0 0 auto; - flex-direction: row; - font-size: 14px; - justify-content: center-between; - align-items: center; - border-radius: var(--mediaItemRadius); - position: relative; + height: 60px; + display: flex; + flex: 0 0 auto; + flex-direction: row; + font-size: 14px; + justify-content: center-between; + align-items: center; + border-radius: var(--mediaItemRadius); + position: relative; } &:hover { @@ -444,6 +444,7 @@ .mediaitem-artwork { border-radius: var(--mediaItemRadiusSmall); } + .overlay-play { background: rgba(0, 0, 0, 0.5); opacity: 0; @@ -957,6 +958,7 @@ /* mediaitem-square */ .cd-mediaitem-square { + --transitionDuration: .25s; --scaleRate: 1.25; --scaleRateArtwork: 1; width: 200px; @@ -968,6 +970,7 @@ justify-content: center; align-items: center; border-radius: 6px; + transition: width var(--transitionDuration) linear, height var(--transitionDuration) linear; .artwork-container { position: relative; @@ -982,6 +985,7 @@ flex: 0 0 auto; margin: 6px; cursor: pointer; + transition: width var(--transitionDuration) linear, height var(--transitionDuration) linear; .mediaitem-artwork { box-shadow: unset; @@ -1055,16 +1059,33 @@ } } - @media (min-width: 1600px) { - width: calc(200px * var(--scaleRate)); - height: calc(200px * var(--scaleRate)); + &:not(.mediaitem-card):not(.mediaitem-brick):not(.mediaitem-video):not(.noscale) { + @media (min-width: 1460px) { + --scaleRate: 1.1; + --scaleRateArtwork: 0.9; + width: calc(200px * var(--scaleRate)); + height: calc(200px * var(--scaleRate)); - .artwork-container > .artwork { - width: calc(190px * var(--scaleRateArtwork)); - height: calc(190px * var(--scaleRateArtwork)); + .artwork-container > .artwork { + width: calc(190px * var(--scaleRateArtwork)); + height: calc(190px * var(--scaleRateArtwork)); + } + } + + @media (min-width: 1550px) { + --scaleRate: 1.25; + --scaleRateArtwork: 1; + width: calc(200px * var(--scaleRate)); + height: calc(200px * var(--scaleRate)); + + .artwork-container > .artwork { + width: calc(190px * var(--scaleRateArtwork)); + height: calc(190px * var(--scaleRateArtwork)); + } } } + .info-rect { width: 90%; height: 100%; @@ -1112,8 +1133,6 @@ } &.mediaitem-video { - --scaleRate: 1.25; - --scaleRateArtwork: 1.25; height: 200px; width: 240px; @@ -1122,13 +1141,29 @@ width: 212px; } - @media (min-width: 1600px) { - width: calc(240px * var(--scaleRate)); - height: calc(200px * var(--scaleRate)); - - .artwork-container > .artwork { - width: calc(212px * var(--scaleRateArtwork)); - height: calc(120px * var(--scaleRateArtwork)); + &:not(.noscale) { + @media (min-width: 1460px) { + --scaleRate: 1.1; + --scaleRateArtwork: 1.1; + width: calc(240px * var(--scaleRate)); + height: calc(200px * var(--scaleRate)); + + .artwork-container > .artwork { + width: calc(220px * var(--scaleRateArtwork)); + height: calc(123px * var(--scaleRateArtwork)); + } + } + + @media (min-width: 1550px) { + --scaleRate: 1.25; + --scaleRateArtwork: 1.25; + width: calc(240px * var(--scaleRate)); + height: calc(200px * var(--scaleRate)); + + .artwork-container > .artwork { + width: calc(220px * var(--scaleRateArtwork)); + height: calc(123px * var(--scaleRateArtwork)); + } } } } @@ -1141,6 +1176,32 @@ height: 123px; width: 220px; } + + &:not(.noscale) { + @media (min-width: 1460px) { + --scaleRate: 1.1; + --scaleRateArtwork: 1.1; + width: calc(240px * var(--scaleRate)); + height: calc(200px * var(--scaleRate)); + + .artwork-container > .artwork { + width: calc(220px * var(--scaleRateArtwork)); + height: calc(123px * var(--scaleRateArtwork)); + } + } + + @media (min-width: 1550px) { + --scaleRate: 1.25; + --scaleRateArtwork: 1.25; + width: calc(240px * var(--scaleRate)); + height: calc(200px * var(--scaleRate)); + + .artwork-container > .artwork { + width: calc(220px * var(--scaleRateArtwork)); + height: calc(123px * var(--scaleRateArtwork)); + } + } + } } &.mediaitem-small { @@ -1169,7 +1230,7 @@ overflow: hidden; border-radius: 0px; margin: 0; - + transition: width var(--transitionDuration) linear, height var(--transitionDuration) linear, filter 0.2s ease-in-out; .mediaitem-artwork { border-radius: 0px; @@ -1183,6 +1244,8 @@ padding: 10px 10px 14px; position: relative; width: 100%; + display: grid; + align-content: center; &::before { background: var(--bgartwork); @@ -1197,6 +1260,7 @@ z-index: 0; opacity: 1; filter: brightness(0.5) blur(50px) saturate(180%); + transition: filter 0.2s ease-in-out; } } @@ -1211,7 +1275,7 @@ & + .subtitle { max-height: none !important; - margin-top: -0.5em; + // margin-top: -0.5em; } } @@ -1241,14 +1305,34 @@ border-radius: inherit; } - //@media (min-width: 1600px) { - // width: calc(230px * 1.25); - // height: calc(298px * 1.25); - // .artwork-container>.artwork { - // width: calc(230px * 1.25); - // height: calc(230px * 1.25); - // } - //} + &:hover { + .artwork{ + filter: brightness(0.8); + } + .info-rect-card::before { + filter: brightness(0.3) blur(50px) saturate(180%); + } + } + + &:not(.noscale) { + @media (min-width: 1460px) { + width: calc(230px * 1.1); + height: calc(298px * 1.1); + .artwork-container > .artwork { + width: calc(230px * 1.1); + height: calc(230px * 1.1); + } + } + + @media (min-width: 1550px) { + width: calc(230px * 1.25); + height: calc(298px * 1.25); + .artwork-container > .artwork { + width: calc(230px * 1.25); + height: calc(230px * 1.25); + } + } + } } } diff --git a/src/renderer/less/helpers.less b/src/renderer/less/helpers.less index 73ee3d45..1350f7f0 100644 --- a/src/renderer/less/helpers.less +++ b/src/renderer/less/helpers.less @@ -153,22 +153,8 @@ } .close-btn { - width : 50px; - height : 100%; - background-image : var(--gfx-closeBtn); - background-position: center; - background-repeat : no-repeat; - -webkit-app-region : no-drag; - appearance : none; - border : 0; - background-color : transparent; - position : absolute; - top : 0; - right : 0; + .menu-panel.menu-header-text.close-btn - &:hover { - background-color: rgb(196, 43, 28) - } } } } @@ -191,22 +177,7 @@ } .close-btn { - width : 50px; - height : 100%; - background-image : var(--gfx-closeBtn); - background-position: center; - background-repeat : no-repeat; - -webkit-app-region : no-drag; - appearance : none; - border : 0; - background-color : transparent; - position : absolute; - top : 0; - right : 0; - - &:hover { - background-color: rgb(196, 43, 28) - } + .menu-panel.menu-header-text.close-btn } } @@ -371,23 +342,31 @@ } } - .menu-header-text { margin: 18px 6px; .close-btn { - width : 50px; - height : 42px; - background-image : var(--gfx-closeBtn); + width: 36px; + height: 36px; background-position: center; - background-repeat : no-repeat; - -webkit-app-region : no-drag; - appearance : none; - border : 0; - background-color : transparent; - position : absolute; - top : 0; - right : 0; + background-repeat: no-repeat; + -webkit-app-region: no-drag; + appearance: none; + border: 0; + background-color: transparent; + position: absolute; + top: 10px; + right: 10px; + border-radius: 50px; + display: grid; + align-content: center; + + &:before { + content: ""; + font-family: "codicon"; + color: var(--textColor); + font-size: 20px; + } &:hover { background-color: rgb(196, 43, 28) @@ -505,7 +484,8 @@ .popover-artwork { width: 200px; height: 200px; - margin: 0 0 20px 0; + margin: 0 auto; + margin-bottom: 20px; } .song-name { diff --git a/src/renderer/less/linux.less b/src/renderer/less/linux.less index dc0be238..777e9cd0 100644 --- a/src/renderer/less/linux.less +++ b/src/renderer/less/linux.less @@ -3,4 +3,57 @@ body[platform="linux"] { #window-controls-container { //display: none; } + + .window-controls { + justify-content: flex-end; + align-items : center; + padding-right : 6px; + + >div { + --iconSize: 16px; + + &.close, + &.minmax, + &.minimize, + &.minmax.restore { + background-image: unset!important; + position : relative; + display : grid; + align-content : center; + text-align : center; + height : 36px!important; + width : 36px!important; + border-radius : 50px; + transition: background-color .1s ease-in-out; + + &:hover { + background: rgb(200 200 200 / 10%)!important; + } + } + + &.close::before { + font-family: "codicon"; + font-size : var(--iconSize); + content : ""; + } + + &.minmax::before { + font-family: "codicon"; + font-size : var(--iconSize); + content : ""; + } + + &.minimize::before { + font-family: "codicon"; + font-size : var(--iconSize); + content : ""; + } + + &.restore::before { + font-family: "codicon"; + font-size : var(--iconSize); + content : ""; + } + } + } } \ No newline at end of file diff --git a/src/renderer/less/pages.less b/src/renderer/less/pages.less index 3abcb2c9..a540ce6d 100644 --- a/src/renderer/less/pages.less +++ b/src/renderer/less/pages.less @@ -634,7 +634,7 @@ opacity : .7; animation : playlistArtworkFadeIn 1s var(--appleEase); - .artworkMaterial>img { + .artworkMaterial img { filter : brightness(100%) blur(80px) saturate(100%) contrast(1); object-position: center; object-fit : cover; @@ -990,7 +990,7 @@ opacity : .7; animation : playlistArtworkFadeIn 1s var(--appleEase); - .artworkMaterial>img { + .artworkMaterial img { filter : brightness(100%) blur(80px) saturate(100%) contrast(1); object-position: center; object-fit : cover; diff --git a/src/renderer/style.less b/src/renderer/style.less index fb15e61b..200735f0 100644 --- a/src/renderer/style.less +++ b/src/renderer/style.less @@ -311,19 +311,19 @@ a.dropdown-item { overflow: hidden; pointer-events: none; - > img { + img { position: absolute; width: 200%; opacity: 0.5; filter: brightness(200%) blur(180px) saturate(280%) contrast(2); } - > img:first-child { + img:first-child { top: 0; left: 0; } - > img:last-child { + img:last-child { bottom: 0; right: 0; transform: rotate(180deg); @@ -1163,52 +1163,47 @@ input[type=range].web-slider::-webkit-slider-runnable-track { &-macos { width: 100px; } -} -.app-chrome .app-chrome-item > .window-controls > div { - height: 100%; - width: 32px; -} - -.app-chrome .app-chrome-item > .window-controls > div:hover { - background: rgb(200 200 200 / 10%); -} - -.app-chrome .app-chrome-item > .window-controls > div.close { - width: 100%; - height: 100%; - background-image: var(--gfx-closeBtn); - background-position: center; - background-repeat: no-repeat; - -webkit-app-region: no-drag; - - &:hover { - background-color: rgb(196, 43, 28) + > div { + height: 100%; + width: 32px; + &:hover { + background: rgb(200 200 200 / 10%); + } + &.close { + width: 100%; + height: 100%; + background-image: var(--gfx-closeBtn); + background-position: center; + background-repeat: no-repeat; + -webkit-app-region: no-drag; + + &:hover { + background-color: rgb(196, 43, 28) + } + } + &.minmax { + background-image: var(--gfx-maxBtn); + background-position: center; + background-repeat: no-repeat; + -webkit-app-region: no-drag; + width: 100%; + height: 100%; + } + &.minmax.restore { + background-image: var(--gfx-restoreBtn); + } + &.minimize { + background-image: var(--gfx-minBtn); + background-position: center; + background-repeat: no-repeat; + -webkit-app-region: no-drag; + width: 100%; + height: 100%; + } } } -.app-chrome .app-chrome-item > .window-controls > div.minmax { - background-image: var(--gfx-maxBtn); - background-position: center; - background-repeat: no-repeat; - -webkit-app-region: no-drag; - width: 100%; - height: 100%; -} - -.app-chrome .app-chrome-item > .window-controls > div.minmax.restore { - background-image: var(--gfx-restoreBtn); -} - -.app-chrome .app-chrome-item > .window-controls > div.minimize { - background-image: var(--gfx-minBtn); - background-position: center; - background-repeat: no-repeat; - -webkit-app-region: no-drag; - width: 100%; - height: 100%; -} - body[platform="darwin"] .app-chrome .app-chrome-item > .window-controls > div.minimize { display: none; } @@ -1452,10 +1447,13 @@ div[data-type="musicVideo"] .info-rect .title::before { background-position: center; background-size: contain; background-repeat: no-repeat; - border-radius: 4px; + border-radius: var(--mediaItemRadiusSmall); flex: 0 0 auto; margin: 6px; image-rendering: -webkit-optimize-contrast; + .mediaitem-artwork { + border-radius: var(--mediaItemRadiusSmall); + } } .app-chrome .app-chrome-item > .app-playback-controls .actions { @@ -3475,22 +3473,7 @@ body.no-gpu { } .close-btn { - width: 50px; - height: 100%; - background-image: var(--gfx-closeBtn); - background-position: center; - background-repeat: no-repeat; - -webkit-app-region: no-drag; - appearance: none; - border: 0; - background-color: transparent; - position: absolute; - top: 0; - right: 0; - - &:hover { - background-color: rgb(196, 43, 28) - } + .menu-panel.menu-header-text.close-btn } } diff --git a/src/renderer/themes/sweetener.less b/src/renderer/themes/sweetener.less index 18e029f4..1d40e315 100644 --- a/src/renderer/themes/sweetener.less +++ b/src/renderer/themes/sweetener.less @@ -57,10 +57,6 @@ .cd-mediaitem-square:not(.mediaitem-card) { transition : transform .2s var(--appleEase); transition-delay: .1s; - padding : 12px; - - // background-color: red; - height: 220px; .artwork-container {} @@ -73,9 +69,16 @@ transition-delay: .05s; } + .artwork-container { + transform : scale(0.962) translateZ(0); + transition : transform .1s var(--appleEase); + transition-delay: 0s; + transform-origin: center; + } + &:hover { .artwork-container { - transform : scale(1.1); + transform : scale(1.0); transition : transform .1s var(--appleEase); transition-delay: 0s; transform-origin: center; diff --git a/src/renderer/views/app/chrome-bottom.ejs b/src/renderer/views/app/chrome-bottom.ejs index 2a3ede26..f54a4254 100644 --- a/src/renderer/views/app/chrome-bottom.ejs +++ b/src/renderer/views/app/chrome-bottom.ejs @@ -10,10 +10,10 @@
- +
- +
{{ mk.nowPlayingItem["attributes"]["name"] }}
{{ mk.nowPlayingItem["attributes"]["artistName"] }}
@@ -60,6 +60,19 @@
+ diff --git a/src/renderer/views/app/chrome-top.ejs b/src/renderer/views/app/chrome-top.ejs index b1f461a8..42522d5e 100644 --- a/src/renderer/views/app/chrome-top.ejs +++ b/src/renderer/views/app/chrome-top.ejs @@ -89,10 +89,10 @@
- +
- +
{{ mk.nowPlayingItem["attributes"]["name"] }} @@ -183,6 +183,18 @@
+
diff --git a/src/renderer/views/components/artist-chip.ejs b/src/renderer/views/components/artist-chip.ejs index 098f773a..eed505fc 100644 --- a/src/renderer/views/components/artist-chip.ejs +++ b/src/renderer/views/components/artist-chip.ejs @@ -1,7 +1,9 @@ diff --git a/src/renderer/views/components/mediaitem-square.ejs b/src/renderer/views/components/mediaitem-square.ejs index 385a463e..3ace5791 100644 --- a/src/renderer/views/components/mediaitem-square.ejs +++ b/src/renderer/views/components/mediaitem-square.ejs @@ -87,6 +87,11 @@ default: false, required: false }, + noScale: { + type: Boolean, + default: false, + required: false + }, 'contextExt': { type: Object, required: false }, }, data: function () { @@ -251,6 +256,10 @@ }, getClasses() { let type = [] + let classes = [] + if(this.noScale) { + classes.push("noscale") + } try { type = this.item.type @@ -263,25 +272,26 @@ } switch (type) { default: - return [] + break; case "editorial-elements": case "card": - return ["mediaitem-card"] + classes.push("mediaitem-card") break; case "385": // editorial - return ["mediaitem-brick"] + classes.push("mediaitem-brick") break; case "small": - return ["mediaitem-small"] + classes.push("mediaitem-small") break; case "music-videos": case "uploadedVideo": case "uploaded-videos": case "library-music-videos": - return "mediaitem-video"; + classes.push("mediaitem-video") break; } + return classes }, visibilityChanged: function (isVisible, entry) { this.isVisible = isVisible diff --git a/src/renderer/views/main.ejs b/src/renderer/views/main.ejs index dff0e197..b9b7baad 100644 --- a/src/renderer/views/main.ejs +++ b/src/renderer/views/main.ejs @@ -105,7 +105,8 @@ <% } %> - +