Merge branch 'ciderapp:main' into main

.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

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

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

src/renderer/less/elements.less

@@ -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,7 +1059,10 @@
     }
   }
 
-  @media (min-width: 1600px) {
+  &: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));
 
@@ -1065,6 +1072,20 @@
       }
     }
 
+    @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) {
+    &: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(212px * var(--scaleRateArtwork));
+          width: calc(220px * var(--scaleRateArtwork));
-        height: calc(120px * 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) {
+    &:hover {
-    //  width: calc(230px * 1.25);
+      .artwork{
-    //  height: calc(298px * 1.25);
+        filter: brightness(0.8);
-    //  .artwork-container>.artwork {
+      }
-    //    width: calc(230px * 1.25);
+      .info-rect-card::before {
-    //    height: calc(230px * 1.25);
+        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);
+        }
+      }
+    }
   }
 }
 

src/renderer/less/helpers.less

@@ -153,22 +153,8 @@
       }
 
       .close-btn {
-        width              : 50px;
+        .menu-panel.menu-header-text.close-btn
-        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)
-        }
       }
     }
   }
@@ -191,22 +177,7 @@
       }
 
       .close-btn {
-        width              : 50px;
+        .menu-panel.menu-header-text.close-btn
-        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)
-        }
       }
     }
 
@@ -371,23 +342,31 @@
     }
   }
 
-
   .menu-header-text {
     margin: 18px 6px;
 
     .close-btn {
-      width              : 50px;
+      width: 36px;
-      height             : 42px;
+      height: 36px;
-      background-image   : var(--gfx-closeBtn);
       background-position: center;
-      background-repeat  : no-repeat;
+      background-repeat: no-repeat;
-      -webkit-app-region : no-drag;
+      -webkit-app-region: no-drag;
-      appearance         : none;
+      appearance: none;
-      border             : 0;
+      border: 0;
-      background-color   : transparent;
+      background-color: transparent;
-      position           : absolute;
+      position: absolute;
-      top                : 0;
+      top: 10px;
-      right              : 0;
+      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 {

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    : "";
+            }
+        }
+    }
 }

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;

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,18 +1163,14 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
   &-macos {
     width: 100px;
   }
-}
 
-.app-chrome .app-chrome-item > .window-controls > div {
+  > div {
     height: 100%;
     width: 32px;
-}
+    &:hover {
-
-.app-chrome .app-chrome-item > .window-controls > div:hover {
       background: rgb(200 200 200 / 10%);
-}
+    }
-
+    &.close {
-.app-chrome .app-chrome-item > .window-controls > div.close {
       width: 100%;
       height: 100%;
       background-image: var(--gfx-closeBtn);
@@ -1185,28 +1181,27 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
       &:hover {
         background-color: rgb(196, 43, 28)
       }
-}
+    }
-
+    &.minmax {
-.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%;
-}
+    }
-
+    &.minmax.restore {
-.app-chrome .app-chrome-item > .window-controls > div.minmax.restore {
       background-image: var(--gfx-restoreBtn);
-}
+    }
-
+    &.minimize {
-.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 {
@@ -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;
+        .menu-panel.menu-header-text.close-btn
-        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)
-        }
       }
     }
 

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;

src/renderer/views/app/chrome-bottom.ejs

@@ -10,10 +10,10 @@
                     <b-popover custom-class="mediainfo-popover" target="artworkLCD" triggers="hover" placement="right">
                         <div class="content">
                             <div class="shadow-artwork">
-                                <mediaitem-artwork :url="currentArtUrl" :url="currentArtUrlRaw"></mediaitem-artwork>
+                                <mediaitem-artwork :url="currentArtUrl"></mediaitem-artwork>
                             </div>
                             <div class="popover-artwork">
-                                <mediaitem-artwork :size="210" :url="currentArtUrlRaw"></mediaitem-artwork>
+                                <mediaitem-artwork :url="currentArtUrl"></mediaitem-artwork>
                             </div>
                             <div class="song-name">{{ mk.nowPlayingItem["attributes"]["name"] }}</div>
                             <div class="song-artist" @click="getNowPlayingItemDetailed(`artist`)">{{ mk.nowPlayingItem["attributes"]["artistName"] }}</div>
@@ -60,6 +60,19 @@
                 </div>
             </template>
 
+            <template v-else>
+                <div class="app-playback-controls">
+                    <div class="artwork" id="artworkLCD" style="pointer-events: none;">
+                        <mediaitem-artwork :url="currentArtUrl"></mediaitem-artwork>
+                    </div>
+                    <div class="playback-info">
+                        <div class="song-name">
+                            
+                        </div>
+                    </div>
+
+                </div>
+            </template>
         </div>
 
     </div>

src/renderer/views/app/chrome-top.ejs

@@ -89,10 +89,10 @@
           <b-popover custom-class="mediainfo-popover" target="artworkLCD" triggers="hover" placement="bottom">
             <div class="content">
               <div class="shadow-artwork">
-                <mediaitem-artwork :url="currentArtUrl" :url="currentArtUrlRaw"></mediaitem-artwork>
+                <mediaitem-artwork :url="currentArtUrl"></mediaitem-artwork>
               </div>
               <div class="popover-artwork">
-                <mediaitem-artwork :size="210" :url="currentArtUrlRaw"></mediaitem-artwork>
+                <mediaitem-artwork :size="210" :url="currentArtUrl"></mediaitem-artwork>
               </div>
               <div class="song-name">
                 {{ mk.nowPlayingItem["attributes"]["name"] }}
@@ -183,6 +183,18 @@
           </template>
         </div>
       </template>
+      <template v-else>
+        <div class="app-playback-controls">
+          <div class="artwork" id="artworkLCD" style="pointer-events: none;">
+            <mediaitem-artwork :url="currentArtUrl"></mediaitem-artwork>
+          </div>
+          <div class="playback-info">
+            <div class="info-rect">
+
+            </div>
+          </div>
+        </div>
+      </template>
     </div>
     <div class="app-chrome-item" v-else>
       <div class="top-nav-group">

src/renderer/views/components/artist-chip.ejs

@@ -1,7 +1,9 @@
 <script type="text/x-template" id="artist-chip">
     <div class="artist-chip" @click.self="route" tabindex="0">
-        <div class="artist-chip__image">
+        <div class="artist-chip__image" v-if="image" :style="{backgroundColor: '#' + (artist.attributes.artwork?.bgColor ?? '000')}">
-            <mediaitem-artwork v-if="artist.id != null" :url="artist.attributes.artwork.url" :size="32"></mediaitem-artwork>
+            <mediaitem-artwork v-if="artist.id != null" :url="artist.attributes.artwork.url" :size="80"></mediaitem-artwork>
+        </div>
+        <div class="artist-chip__image" v-else>
         </div>
         <div class="artist-chip__name">
             <span>{{ item.attributes.name }}</span>
@@ -21,6 +23,7 @@
         },
         data: function() {
             return {
+                image: false,
                 artist: {
                     id: null
                 }
@@ -34,6 +37,7 @@
             }
             app.mk.api.v3.music(`/v1/catalog/${app.mk.storefrontId}/artists/${artistId}`).then(response => {
                 this.artist = response.data.data[0];
+                this.image = true;
             });
         },
         methods: {

src/renderer/views/components/artwork-material.ejs

@@ -1,6 +1,6 @@
 <script type="text/x-template" id="artwork-material">
     <div class="artworkMaterial">
-        <img :src="src" v-for="image in images"/>
+        <mediaitem-artwork :url="src" :size="500" v-for="image in images"/>
     </div>
 </script>
 

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

src/renderer/views/main.ejs

@@ -105,7 +105,8 @@
             <% } %>
 
 
-                <script async src="https://js-cdn.music.apple.com/musickit/v3/amp/musickit.js" data-web-components></script>
+                <script async src="<%- (env.useV3 ? "https://js-cdn.music.apple.com/musickit/v3/amp/musickit.js" : "https://js-cdn.music.apple.com/musickit/v2/amp/musickit.js" ) %>" data-web-components>
+                </script>
                 <script src="index.js?v=1"></script>
 
                 <script type="text/x-template" id="am-musiccovershelf">

src/renderer/views/pages/artist.ejs

@@ -69,7 +69,7 @@
                 <div class="latestRelease" v-if="data.views['latest-release'].data.length != 0">
                     <h3>{{app.getLz('term.latestReleases')}}</h3>
                     <div style="width: auto;margin: 0 auto;">
-                        <mediaitem-square kind="card" v-for="song in data.views['latest-release'].data"
+                        <mediaitem-square kind="card" :no-scale="true" v-for="song in data.views['latest-release'].data"
                                           :item="song">
                         </mediaitem-square>
                     </div>

src/renderer/views/pages/cider-playlist.ejs

@@ -121,7 +121,7 @@
                     </div>
                 </div>
                 <div class="artworkContainer" v-if="data.attributes.artwork != null">
-                    <artwork-material :url="data.attributes.artwork.url" size="260" images="1"></artwork-material>
+                    <artwork-material :url="data.attributes.artwork.url" size="500" images="1"></artwork-material>
                 </div>
                 <button class="md-btn md-btn-small editTracksBtn" v-if="(data.attributes.canEdit && data.type == 'library-playlists')" @click="editing = !editing">
                     <span v-if="!editing">

src/renderer/views/pages/replay.ejs

@@ -28,7 +28,7 @@
                     <h4>{{ loaded.attributes.uniqueSongCount }} {{$root.getLz('term.uniqueSongs')}}</h4>
                 </div>
                 <div class="col-auto replay-playlist-container">
-                    <mediaitem-square kind="card" :force-video="true" :item="loaded.playlist"></mediaitem-square>
+                    <mediaitem-square kind="card" :no-scale="true" :force-video="true" :item="loaded.playlist"></mediaitem-square>
                 </div>
             </div>
             <!--            Top Artists-->

src/renderer/views/pages/settings.ejs

@@ -1185,6 +1185,20 @@
                             </div>
                         </div>
 
+                        <div class="md-option-line">
+                            <div class="md-option-segment">
+                                Use MusicKit V3
+                                <small>Requires relaunch</small>
+                            </div>
+                            <div class="md-option-segment md-option-segment_auto">
+                                <label>
+                                    <input type="checkbox" v-model="app.cfg.advanced.experiments.includes('ampv3')"
+                                           @click="app.cfg.advanced.experiments.includes('ampv3') ? removeExperiment('ampv3') : addExperiment('ampv3')"
+                                           switch/>
+                                </label>
+                            </div>
+                        </div>
+
                         <div class="md-option-line">
                             <div class="md-option-segment">
                                 {{$root.getLz('settings.option.advanced.playlistTrackMapping')}}