Add:Change volume with hover and scroll wheel #366

client/components/controls/VolumeControl.vue

@@ -51,11 +51,25 @@ export default {
     }
   },
   methods: {
+    scroll(e) {
+      if (!e || !e.wheelDeltaY) return
+      if (e.wheelDeltaY > 0) {
+        this.volume = Math.min(1, this.volume + 0.1)
+      } else {
+        this.volume = Math.max(0, this.volume - 0.1)
+      }
+    },
     mouseover() {
+      if (!this.isHovering) {
+        window.addEventListener('mousewheel', this.scroll)
+      }
       this.isHovering = true
       this.setOpen()
     },
     mouseleave() {
+      if (this.isHovering) {
+        window.removeEventListener('mousewheel', this.scroll)
+      }
       this.isHovering = false
     },
     setOpen() {
@@ -127,6 +141,11 @@ export default {
     if (this.value === 0) {
       this.isMute = true
     }
+  },
+  beforeDestroy() {
+    window.removeEventListener('mousewheel', this.scroll)
+    document.body.removeEventListener('mousemove', this.mousemove)
+    document.body.removeEventListener('mouseup', this.mouseup)
   }
 }
 </script>

client/components/covers/PreviewCover.vue

@@ -4,9 +4,6 @@
       <div v-show="showCoverBg" class="absolute top-0 left-0 w-full h-full overflow-hidden rounded-sm bg-primary">
         <div class="absolute cover-bg" ref="coverBg" />
       </div>
-      <!-- <div v-if="showCoverBg" class="bg-primary absolute top-0 left-0 w-full h-full">
-        <div class="w-full h-full z-0" ref="coverBg" />
-      </div> -->
       <img ref="cover" :src="cover" @error="imageError" @load="imageLoaded" class="w-full h-full absolute top-0 left-0" :class="showCoverBg ? 'object-contain' : 'object-cover'" />
 
       <a v-if="!imageFailed && showOpenNewTab && isHovering" :href="cover" @click.stop target="_blank" class="absolute bg-primary flex items-center justify-center shadow-sm rounded-full hover:scale-110 transform duration-100" :style="{ top: sizeMultiplier * 0.5 + 'rem', right: sizeMultiplier * 0.5 + 'rem', width: 2.5 * sizeMultiplier + 'rem', height: 2.5 * sizeMultiplier + 'rem' }">

client/components/modals/edit-tabs/Cover.vue

@@ -39,20 +39,6 @@
             </template>
           </div>
         </div>
-
-        <!-- <form @submit.prevent="submitSearchForm">
-          <div class="flex items-center justify-start -mx-1 py-2 mt-2">
-            <div class="flex-grow px-1">
-              <ui-text-input-with-label v-model="searchTitle" label="Search Title" placeholder="Search" :disabled="processing" />
-            </div>
-            <div class="flex-grow px-1">
-              <ui-text-input-with-label v-model="searchAuthor" label="Author" :disabled="processing" />
-            </div>
-            <div class="w-24 px-1">
-              <ui-btn type="submit" class="mt-5 w-full" :padding-x="0">Search</ui-btn>
-            </div>
-          </div>
-        </form> -->
       </div>
     </div>
     <form @submit.prevent="submitSearchForm">