Added album shimmer effect on play, fixed info overlap

Author: basharovV

public/images/cd-shimmer.png

@@ -9,7 +9,7 @@
         draggedSongs,
         isPlaying,
         playlist,
-        playlistType
+        playlistType,
     } from "../../data/store";
     import audioPlayer from "../player/AudioPlayer";
     import Icon from "../ui/Icon.svelte";
@@ -117,11 +117,13 @@
                     </div>
                 {/if}
                 {#if isHovered || ($playlistType === "album" && isPlayingCurrentAlbum)}
-                    <div class={$playlistType === "album" &&
+                    <div
+                        class={$playlistType === "album" &&
                         $isPlaying &&
                         isPlayingCurrentAlbum
                             ? "play-button-container pause-button"
-                            : "play-button-container play-button"}>
+                            : "play-button-container play-button"}
+                    >
                         <div class="button" on:click={playPauseToggle}>
                             <Icon
                                 icon={$playlistType === "album" &&
@@ -145,7 +147,10 @@
                 <small>{album.year}</small>
                 <small>•</small>
             {/if}
-            <small>{album?.tracksIds.length} {$LL.albums.item.tracksLabel()}</small>
+            <small
+                >{album?.tracksIds.length}
+                {$LL.albums.item.tracksLabel()}</small
+            >
         </div>
     {/if}
 </div>
@@ -154,14 +159,42 @@
     .playing {
         transform: scale(1.1);
         z-index: 9;
-        
+
         .cd {
             z-index: 8;
             /* box-shadow: 2px 2px 30px 20px rgba(39, 0, 178, 0.181) !important; */
             box-shadow: 2px 2px 50px 40px
                 color-mix(in srgb, var(--album-playing-shadow) 50%, transparent) !important;
             .hinge {
-                background-color: rgba(167, 164, 173, 0.078);
+                background-color: color-mix(
+                    in srgb,
+                    var(--inverse) 10.32%,
+                    transparent
+                );
+                backdrop-filter: blur(8px);
+                border-left: 1px solid
+                    color-mix(in srgb, var(--inverse), transparent 50%);
+                box-shadow:
+                    inset -0.75px -0.5px rgba(255, 255, 255, 0.1),
+                    inset + 0.75px +0.5px rgba(255, 255, 255, 0.025),
+                    3px 2px 10px rgba(0, 0, 0, 0.25),
+                    inset 0px 0px 10px 5px rgba(255, 255, 255, 0.025),
+                    inset 0px 0px 40px 5px rgba(255, 255, 255, 0.025);
+            }
+            .artwork-frame {
+                &::after {
+                    content: "";
+                    position: absolute;
+                    top: 0;
+                    left: 0;
+                    width: 100%;
+                    height: 100%;
+                    background-image: url("images/cd-shimmer.png");
+                    background-repeat: no-repeat;
+                    z-index: 20;
+                    animation: playing-shimmer 3.5s cubic-bezier(.4,0,.41,.97) 1;
+                    pointer-events: none;
+                }
             }
         }
 
@@ -173,13 +206,25 @@
             border-radius: 4px;
             color: var(--text);
             z-index: 20;
+            margin-top: 3px !important;
         }
         .artist,
         .info {
             z-index: 20;
         }
     }
 
+    @keyframes playing-shimmer {
+        0% {
+            background-position: -40% 110%;
+            background-size: 250%;
+        }
+        100% {
+            background-position: 120% -30%;
+            background-size: 250%;
+        }
+    }
+
     .hovered:not(.playing) {
         z-index: 8;
 
@@ -316,11 +361,11 @@
         box-sizing: border-box;
         .hinge {
             border-left: 1px solid
-                color-mix(in srgb, var(--inverse) 10.32%, transparent);
+                color-mix(in srgb, var(--inverse) 20.32%, transparent);
             width: 5%;
             background-color: color-mix(
                 in srgb,
-                var(--inverse) 4.32%,
+                var(--inverse) 9.32%,
                 transparent
             );
         }
@@ -374,7 +419,7 @@
                                 transparent
                             );
                         background-color: var(--album-playing-play-bg);
-                        
+
                         .button {
                             position: relative;
                             left: 1px;
@@ -383,10 +428,12 @@
                             align-self: center;
                             color: var(--album-playing-play-icon);
                         }
-                        
+
                         &:hover {
-                            background-color: var(--album-playing-play-hover-bg);
-                            
+                            background-color: var(
+                                --album-playing-play-hover-bg
+                            );
+
                             .button {
                                 color: var(--album-playing-play-hover-icon);
                             }
@@ -401,17 +448,19 @@
                                 transparent
                             );
                         background-color: var(--album-playing-pause-bg);
-                        
+
                         .button {
                             font-size: 2.2em;
                             margin: auto;
                             align-self: center;
                             color: var(--album-playing-pause-icon);
                         }
-                        
+
                         &:hover {
-                            background-color: var(--album-playing-pause-hover-bg);
-                            
+                            background-color: var(
+                                --album-playing-pause-hover-bg
+                            );
+
                             .button {
                                 color: var(--album-playing-pause-hover-icon);
                             }