audiobookshelf/client/components/widgets/CoverSizeWidget.vue

<template>
  <div>
    <div class="rounded-full py-1 bg-primary px-2 border border-black-100 text-center flex items-center box-shadow-md" @mousedown.prevent @mouseup.prevent>
      <span class="material-icons" :class="selectedSizeIndex === 0 ? 'text-gray-400' : 'hover:text-yellow-300 cursor-pointer'" style="font-size: 0.9rem" @mousedown.prevent @click="decreaseSize" aria-label="Decrease Cover Size">remove</span>
      <p class="px-2 font-mono">{{ bookCoverWidth }}</p>
      <span class="material-icons" :class="selectedSizeIndex === availableSizes.length - 1 ? 'text-gray-400' : 'hover:text-yellow-300 cursor-pointer'" style="font-size: 0.9rem" @mousedown.prevent @click="increaseSize" aria-label="Increase Cover Size">add</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedSizeIndex: 3,
      availableSizes: [60, 80, 100, 120, 140, 160, 180, 200, 220]
    }
  },
  watch: {
    selectedSize: {
      immediate: true,
      handler() {
        this.setSelectedIndex()
      }
    }
  },
  computed: {
    selectedSize() {
      return this.$store.getters['user/getUserSetting']('bookshelfCoverSize')
    },
    bookCoverWidth() {
      return this.availableSizes[this.selectedSizeIndex]
    }
  },
  methods: {
    increaseSize() {
      this.selectedSizeIndex = Math.min(this.availableSizes.length - 1, this.selectedSizeIndex + 1)
      this.$store.dispatch('user/updateUserSettings', { bookshelfCoverSize: this.bookCoverWidth })
    },
    decreaseSize() {
      this.selectedSizeIndex = Math.max(0, this.selectedSizeIndex - 1)
      this.$store.dispatch('user/updateUserSettings', { bookshelfCoverSize: this.bookCoverWidth })
    },
    setSelectedIndex() {
      var sizeIndex = this.availableSizes.findIndex((s) => s === this.selectedSize)
      if (!isNaN(sizeIndex)) this.selectedSizeIndex = sizeIndex
    }
  },
  mounted() {}
}
</script>