audiobookshelf/client/components/controls/VolumeControl.vue

<template>
  <div class="relative" v-click-outside="clickOutside" @mouseover="mouseover" @mouseleave="mouseleave">
    <div class="cursor-pointer" @mousedown.prevent @mouseup.prevent @click="clickVolumeIcon">
      <span class="material-icons text-3xl">{{ volumeIcon }}</span>
    </div>
    <transition name="menux">
      <div v-show="isOpen" class="volumeMenu h-6 absolute bottom-2 w-28 px-2 bg-bg shadow-sm rounded-lg" style="left: -116px">
        <div ref="volumeTrack" class="h-1 w-full bg-gray-500 my-2.5 relative cursor-pointer rounded-full" @mousedown="mousedownTrack" @click="clickVolumeTrack">
          <div class="bg-gray-100 h-full absolute left-0 top-0 pointer-events-none rounded-full" :style="{ width: volume * trackWidth + 'px' }" />
          <div class="w-2.5 h-2.5 bg-white shadow-sm rounded-full absolute pointer-events-none" :class="isDragging ? 'transform scale-125 origin-center' : ''" :style="{ left: cursorLeft + 'px', top: '-3px' }" />
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  props: {
    value: Number
  },
  data() {
    return {
      isOpen: false,
      isDragging: false,
      isHovering: false,
      posX: 0,
      lastValue: 0.5,
      isMute: false,
      trackWidth: 112 - 20,
      openTimeout: null
    }
  },
  computed: {
    volume: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    },
    cursorLeft() {
      var left = this.trackWidth * this.volume
      return left - 3
    },
    volumeIcon() {
      if (this.volume <= 0) return 'volume_mute'
      else if (this.volume <= 0.5) return 'volume_down'
      else return 'volume_up'
    }
  },
  methods: {
    mouseover() {
      this.isHovering = true
      this.setOpen()
    },
    mouseleave() {
      this.isHovering = false
    },
    setOpen() {
      this.isOpen = true
      clearTimeout(this.openTimeout)
      this.openTimeout = setTimeout(() => {
        if (!this.isHovering && !this.isDragging) {
          this.isOpen = false
        } else {
          this.setOpen()
        }
      }, 600)
    },
    mousemove(e) {
      var diff = this.posX - e.x
      this.posX = e.x
      var volShift = 0
      if (diff < 0) {
        // Volume up
        volShift = diff / this.trackWidth
      } else {
        // volume down
        volShift = diff / this.trackWidth
      }
      var newVol = this.volume - volShift
      newVol = Math.min(Math.max(0, newVol), 1)
      this.volume = newVol
      e.preventDefault()
    },
    mouseup(e) {
      if (this.isDragging) {
        this.isDragging = false
        document.body.removeEventListener('mousemove', this.mousemove)
        document.body.removeEventListener('mouseup', this.mouseup)
      }
    },
    mousedownTrack(e) {
      this.isDragging = true
      this.posX = e.x
      var vol = e.offsetX / this.trackWidth
      vol = Math.min(Math.max(vol, 0), 1)
      this.volume = vol
      document.body.addEventListener('mousemove', this.mousemove)
      document.body.addEventListener('mouseup', this.mouseup)
      e.preventDefault()
    },
    clickOutside() {
      this.isOpen = false
    },
    clickVolumeIcon() {
      this.isMute = !this.isMute
      if (this.isMute) {
        this.lastValue = this.volume
        this.volume = 0
      } else {
        this.volume = this.lastValue || 0.5
      }
    },
    toggleMute() {
      this.clickVolumeIcon()
    },
    clickVolumeTrack(e) {
      var vol = e.offsetX / this.trackWidth
      vol = Math.min(Math.max(vol, 0), 1)
      this.volume = vol
    }
  },
  mounted() {
    if (this.value === 0) {
      this.isMute = true
    }
  }
}
</script>