improve volume control style

src/global.d.ts

@@ -4,6 +4,7 @@ declare module '*.vue' {
 }
 
 declare module 'md5-es';
+declare module 'vue-slider-component';
 
 type MediaSessionPlaybackState = 'none' | 'paused' | 'playing';
 

src/player/Player.vue

@@ -41,13 +41,15 @@
         <div class="col-auto col-sm p-0">
           <div class="d-flex flex-nowrap justify-content-end pr-3">
             <div class="m-0 d-none d-md-inline-flex align-items-center">
-              <b-button variant="link" @click="toggleMute">
+              <b-button id="player-volume-btn" variant="link" title="Volume">
                 <Icon :icon="muteActive ? 'volume-mute-fill' : 'volume-up-fill'" />
               </b-button>
-              <b-form-input type="range" min="0" max="1" step="0.05"
-                            style="width: 120px; min-width: 0; padding-right: 0.75rem"
-                            :title="`Volume: ${Math.round(volume * 100)}%`"
-                            :value="muteActive ? 0.0 : volume" @input="setVolume" />
+              <b-popover target="player-volume-btn" placement="top" triggers="click blur" no-fade>
+                <Slider class="pt-2" style="height: 120px;" direction="btt"
+                        :min="0" :max="1" :step="0.01" percent
+                        :value="muteActive ? 0.0 : volume" @input="setVolume"
+                />
+              </b-popover>
               <b-button title="Shuffle"
                         variant="link" class="m-0" :class="{ 'text-primary': shuffleActive }"
                         @click="toggleShuffle">
@@ -61,12 +63,11 @@
             </div>
             <OverflowMenu class="d-md-none">
               <b-dropdown-text>
-                <div class="d-flex justify-content-between">
+                <div class="d-flex justify-content-between align-items-center">
                   <strong>Volume</strong>
-                  <b-form-input
-                    class="px-2" style="width: 120px"
-                    type="range" min="0" max="1" step="0.05"
-                    :value="volume" @input="setVolume"
+                  <Slider class="px-3" style="width: 120px;"
+                          :min="0" :max="1" :step="0.01" percent
+                          :value="muteActive ? 0.0 : volume" @input="setVolume"
                   />
                 </div>
               </b-dropdown-text>

src/shared/components/Icon.vue

@@ -27,8 +27,8 @@
     BIconPersonFill,
     BIconRss,
     BIconX,
-    BIconVolumeUpFill,
     BIconVolumeMuteFill,
+    BIconVolumeUpFill,
   } from 'bootstrap-vue'
 
   export default Vue.extend({
@@ -56,8 +56,8 @@
       BIconPersonFill,
       BIconRss,
       BIconX,
-      BIconVolumeUpFill,
       BIconVolumeMuteFill,
+      BIconVolumeUpFill,
     },
     props: {
       icon: { type: String, required: true }

src/shared/components/Slider.vue

@@ -0,0 +1,54 @@
+<template>
+  <VueSlider
+    v-bind="$attrs"
+    :value="value"
+    :min="min"
+    :max="max"
+    :interval="step"
+    :tooltip-formatter="formatter"
+    @change="onInput"
+  />
+</template>
+<style>
+  @import '~vue-slider-component/theme/default.css';
+  .vue-slider-rail {
+    background-color: var(--secondary) !important;
+  }
+  .vue-slider-process {
+    background-color: var(--primary) !important;
+  }
+  .vue-slider-dot-tooltip-inner {
+    background-color: var(--primary);
+    border-color: var(--primary);
+  }
+  .vue-slider-dot-handle {
+    background-color: var(--text-body);
+  }
+</style>
+<script lang="ts">
+  import Vue from 'vue'
+  import VueSlider from 'vue-slider-component'
+
+  export default Vue.extend({
+    components: {
+      VueSlider,
+    },
+    props: {
+      value: { type: Number, required: true },
+      min: { type: Number, required: true },
+      max: { type: Number, required: true },
+      step: { type: Number, required: true },
+      percent: { type: Boolean, default: false },
+    },
+    methods: {
+      onInput(value: number) {
+        this.$emit('input', value)
+      },
+      formatter(value: number) {
+        return this.percent
+          ? `${Math.round(((value - this.min) * 100) / (this.max - this.min))}%`
+          : `${value}`
+      }
+    }
+  })
+</script>

src/shared/components/index.ts

@@ -4,6 +4,7 @@ import ExternalLink from './ExternalLink.vue'
 import Icon from './Icon.vue'
 import InfiniteLoader from './InfiniteLoader.vue'
 import OverflowMenu from './OverflowMenu.vue'
+import Slider from './Slider.vue'
 import Tiles from './Tiles.vue'
 import Tile from './Tile.vue'
 import {
@@ -16,6 +17,7 @@ import {
   BFormTextarea,
   BModal,
   BOverlay,
+  BPopover,
   BProgress,
   BSidebar,
   DropdownPlugin,
@@ -30,6 +32,7 @@ Vue.component('BFormInput', BFormInput)
 Vue.component('BFormCheckbox', BFormCheckbox)
 Vue.component('BFormTextarea', BFormTextarea)
 Vue.component('BButton', BButton)
+Vue.component('BPopover', BPopover)
 Vue.component('BProgress', BProgress)
 Vue.component('BOverlay', BOverlay)
 Vue.use(DropdownPlugin)
@@ -40,6 +43,7 @@ const components = {
   Icon,
   InfiniteLoader,
   OverflowMenu,
+  Slider,
   Tiles,
   Tile,
 }

src/style/main.scss

@@ -30,6 +30,10 @@ $dropdown-link-hover-color: $theme-text-muted;
 $dropdown-border-color: $theme-elevation-2;
 $dropdown-divider-bg: $theme-elevation-2;
 
+// Popover
+$popover-bg: $theme-elevation-1;
+$popover-border-color: $theme-elevation-2;
+
 // Form
 $input-bg: $theme-elevation-2;
 $input-border-color: $theme-elevation-2;
@@ -42,6 +46,7 @@ $custom-range-track-bg: $theme-text-muted;
 $progress-bg: rgb(35, 35, 35);
 
 :root {
+  --text-body: #{$theme-text};
   --text-muted: #{$theme-text-muted};
 }