Add buttons to the cover art

front/src/components/Queue.vue

@@ -147,6 +147,13 @@ const hideArtist = () => {
     })
   }
 }
+
+enum CoverType {
+  COVER_ART,
+  MILK_DROP
+}
+
+const coverType = ref(CoverType.COVER_ART)
 </script>
 
 <template>
@@ -165,12 +172,19 @@ const hideArtist = () => {
         <template v-if="currentTrack">
           <div class="cover-container">
             <div class="cover">
-              <milk-drop />
               <img
+                v-if="coverType === CoverType.COVER_ART"
                 ref="cover"
                 alt=""
                 :src="$store.getters['instance/absoluteUrl'](currentTrack.coverUrl)"
               >
+              <milk-drop v-else-if="coverType === CoverType.MILK_DROP" />
+
+              <div class="cover-buttons">
+                <button class="ui secondary button">
+                  <i class="icon ellipsis vertical" />
+                </button>
+              </div>
             </div>
           </div>
           <h1 class="ui header">

front/src/components/audio/visualizer/MilkDrop.vue

@@ -36,13 +36,16 @@ onScopeDispose(() => {
       ref="canvas"
       @click="loadRandomPreset()"
     />
-    <button
+
-      v-if="!fullscreen"
+    <Teleport to=".cover > .cover-buttons">
-      class="ui secondary button"
+      <button
-      @click="enter"
+        v-if="!fullscreen"
-    >
+        class="ui secondary button"
-      <i class="icon expand arrows alternate" />
+        @click="enter"
-    </button>
+      >
+        <i class="icon expand arrows alternate" />
+      </button>
+    </Teleport>
 
     <Transition name="slide-down">
       <div
@@ -77,27 +80,6 @@ onScopeDispose(() => {
     }
   }
 
-  button {
-    z-index: 2;
-    position: absolute;
-    right: 1em;
-    bottom: 1em;
-    padding: 0.78571429em;
-    margin-right: 0 !important;
-
-    i.icon {
-      display: inline-block;
-      margin-right: 0 !important;
-      display: contents;
-
-      &::before {
-        display: flex;
-        justify-content: center;
-        width: 1em;
-        height: 1em;
-      }
-    }
-  }
 }
 
 .track-info {

front/src/style/components/_queue.scss

@@ -307,6 +307,45 @@
           canvas {
             z-index: 1;
           }
+
+          &:hover .cover-buttons {
+            opacity: 1;
+            transform: translateY(0);
+          }
+
+          .cover-buttons {
+            position: absolute;
+            bottom: 1em;
+            right: 1em;
+            z-index: 2;
+            display: flex;
+            flex-direction: row-reverse;
+            transition: all 0.2s ease-in-out;
+            opacity: 0;
+            transform: translateY(0.5em);
+
+            button {
+              z-index: 2;
+              padding: 0.78571429em;
+
+              &:first-child {
+                margin-right: 0 !important;
+              }
+
+              i.icon {
+                display: inline-block;
+                margin-right: 0 !important;
+                display: contents;
+
+                &::before {
+                  display: flex;
+                  justify-content: center;
+                  width: 1em;
+                  height: 1em;
+                }
+              }
+            }
+          }
         }
       }