audiolabs selector changes

src/renderer/audio/audio.js

@@ -71,24 +71,28 @@ const CiderAudio = {
             "file": './audio/impulses/CiderSpatial_v69.420_Audiophile.wav',
             "name": "Signature (Classic)",
             "description": "",
+            "img": "./assets/audiolabs/classic.png",
         },
         {
             "id": "420signature-B",
             "file": './audio/impulses/CiderSpatial_v69.420_Audiophile_B.wav',
             "name": "Signature (Focused)",
             "description": "",
+            "img": "./assets/audiolabs/focused.png",
         },
         {
             "id": "standard",
             "file": './audio/impulses/CiderSpatial_v69_Standard.wav',
             "name": "Minimal",
             "description": "",
+            "img": "./assets/audiolabs/minimal.png",
         },
         {
             "id": "audiophile",
             "file": './audio/impulses/CiderSpatial_v69_Audiophile.wav',
             "name": "Expansive",
             "description": "",
+            "img": "./assets/audiolabs/expansive.png",
         }
     ],
     spatialOn: function () {

src/renderer/less/pages.less

@@ -862,7 +862,9 @@
   .spprofile-line {
     height: 300px;
     width: 100%;
+    max-width: 1024px;
     padding: 16px;
+    margin: 0 auto;
 
     .spprofile-viewport {
       height: 100%;
@@ -877,24 +879,48 @@
         height: 100%;
         width: 64px;
         top: 0;
-        background: #eee;
+        background: rgb(0 0 0 / 20%);
         z-index: 1;
         border: 0px;
+        transition: background 0.2s var(--appleEase), transform 0.2s var(--appleEase);
+        &:hover {
+          background: var(--selected);
+          transform: scale(1.1);
+        }
+
+        &:active {
+          transition: background 0s var(--appleEase);
+          background: var(--selected-click);
+        }
+
+        &:before {
+          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;
-
+        }
       }
 
       .spprev {
         left: 0;
+        &:before {
           -webkit-mask-image: url("./views/svg/chevron-left.svg");
+        }
 
       }
 
       .nextprev {
         right: 0;
+        &:before {
           -webkit-mask-image: url("./views/svg/chevron-right.svg");
+        }
 
       }
 
@@ -905,14 +931,40 @@
         overflow: hidden;
         background: black;
 
+        >img {
+          WIDTH: 100%;
+          height: 100%;
+          object-fit: cover;
+        }
+
         .sptitle {
           position: absolute;
-          bottom: 32px;
+          bottom: 0px;
           left: 0;
-          width:100%;
+          width: 100%;
           text-align: center;
+          font-size: 18px;
+          text-shadow: 0px 2px 4px #00000033;
         }
       }
+
+      .spfade-enter-active,
+      .spfade-leave-active {
+        --transitionTime: 0.2s;
+        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);
+        will-change: opacity, transform;
+      }
+      .spfade-leave-to {
+        opacity: 1;
+        transform: scale(1) translate3d(0,0,0);
+        will-change: opacity, transform;
+      }
     }
   }
 

src/renderer/views/pages/audiolabs.ejs

@@ -120,8 +120,9 @@
                         <button class="spprev" @click="profilePrev"></button>
                         <button class="nextprev" @click="profileNext"></button>
                         <template v-for="profile in spprofiles" v-if="$root.cfg.audio.maikiwiAudio.spatialProfile == profile.id">
-                            <transition name="wpfade">
+                            <transition name="spfade">
                                 <div class="spslide" :key="profile.id">
+                                    <img v-if="profile.img" loading="eager" decoding="async" :src="profile.img" alt="">
                                     <h1 class="sptitle">{{ profile.name }}</h1>
                                 </div>
                             </transition>