From 2819317924625c0fd72e0b48d0fa3a21d1af83bd Mon Sep 17 00:00:00 2001
From: mikiher <mikiher@gmail.com>
Date: Tue, 25 Jun 2024 09:14:33 +0300
Subject: [PATCH] Remove now-unsued slider components

---
 client/components/widgets/AuthorsSlider.vue   | 112 ------------
 client/components/widgets/EpisodeSlider.vue   | 161 ------------------
 client/components/widgets/NarratorsSlider.vue | 100 -----------
 client/components/widgets/SeriesSlider.vue    | 109 ------------
 4 files changed, 482 deletions(-)
 delete mode 100644 client/components/widgets/AuthorsSlider.vue
 delete mode 100644 client/components/widgets/EpisodeSlider.vue
 delete mode 100644 client/components/widgets/NarratorsSlider.vue
 delete mode 100644 client/components/widgets/SeriesSlider.vue

diff --git a/client/components/widgets/AuthorsSlider.vue b/client/components/widgets/AuthorsSlider.vue
deleted file mode 100644
index 1a87bb60..00000000
--- a/client/components/widgets/AuthorsSlider.vue
+++ /dev/null
@@ -1,112 +0,0 @@
-<template>
-  <div class="w-full">
-    <div class="flex items-center py-3">
-      <slot />
-      <div class="flex-grow" />
-      <button v-if="isScrollable" class="w-8 h-8 mx-1 flex items-center justify-center rounded-full" :class="canScrollLeft ? 'hover:bg-white hover:bg-opacity-5 text-gray-300 hover:text-white' : 'text-white text-opacity-40 cursor-text'" @click="scrollLeft">
-        <span class="material-icons text-2xl">chevron_left</span>
-      </button>
-      <button v-if="isScrollable" class="w-8 h-8 mx-1 flex items-center justify-center rounded-full" :class="canScrollRight ? 'hover:bg-white hover:bg-opacity-5 text-gray-300 hover:text-white' : 'text-white text-opacity-40 cursor-text'" @click="scrollRight">
-        <span class="material-icons text-2xl">chevron_right</span>
-      </button>
-    </div>
-    <div ref="slider" class="w-full overflow-y-hidden overflow-x-auto no-scroll" style="scroll-behavior: smooth" @scroll="scrolled">
-      <div class="flex space-x-4" :style="{ height: height + 'px' }">
-        <template v-for="(item, index) in items">
-          <cards-author-card :key="item.id" :ref="`slider-item-${item.id}`" :index="index" :author="item" :height="cardHeight" :width="cardWidth" class="relative" @edit="editAuthor" @hook:updated="setScrollVars" />
-        </template>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    items: {
-      type: Array,
-      default: () => []
-    },
-    height: {
-      type: Number,
-      default: 192
-    },
-    bookshelfView: {
-      type: Number,
-      default: 1
-    }
-  },
-  data() {
-    return {
-      isScrollable: false,
-      canScrollLeft: false,
-      canScrollRight: false,
-      clientWidth: 0
-    }
-  },
-  computed: {
-    bookCoverAspectRatio() {
-      return this.$store.getters['libraries/getBookCoverAspectRatio']
-    },
-    cardScaleMulitiplier() {
-      return this.height / 192
-    },
-    cardHeight() {
-      return this.height
-    },
-    cardWidth() {
-      return this.cardHeight / this.bookCoverAspectRatio / 1.25
-    },
-    booksPerPage() {
-      return Math.floor(this.clientWidth / (this.cardWidth + 16))
-    },
-    isSelectionMode() {
-      return this.$store.getters['globals/getIsBatchSelectingMediaItems']
-    }
-  },
-  methods: {
-    editAuthor(author) {
-      this.$store.commit('globals/showEditAuthorModal', author)
-    },
-    scrolled() {
-      this.setScrollVars()
-    },
-    scrollRight() {
-      if (!this.canScrollRight) return
-      const slider = this.$refs.slider
-      if (!slider) return
-      const scrollAmount = this.booksPerPage * this.cardWidth
-      const maxScrollLeft = slider.scrollWidth - slider.clientWidth
-
-      const newScrollLeft = Math.min(maxScrollLeft, slider.scrollLeft + scrollAmount)
-      slider.scrollLeft = newScrollLeft
-    },
-    scrollLeft() {
-      if (!this.canScrollLeft) return
-      const slider = this.$refs.slider
-      if (!slider) return
-
-      const scrollAmount = this.booksPerPage * this.cardWidth
-
-      const newScrollLeft = Math.max(0, slider.scrollLeft - scrollAmount)
-      slider.scrollLeft = newScrollLeft
-    },
-    setScrollVars() {
-      const slider = this.$refs.slider
-      if (!slider) return
-      const { scrollLeft, scrollWidth, clientWidth } = slider
-      const scrollPercent = (scrollLeft + clientWidth) / scrollWidth
-
-      this.clientWidth = clientWidth
-      this.isScrollable = scrollWidth > clientWidth
-      this.canScrollRight = scrollPercent < 1
-      this.canScrollLeft = scrollLeft > 0
-    }
-  },
-  updated() {
-    this.setScrollVars()
-  },
-  mounted() {},
-  beforeDestroy() {}
-}
-</script>
\ No newline at end of file
diff --git a/client/components/widgets/EpisodeSlider.vue b/client/components/widgets/EpisodeSlider.vue
deleted file mode 100644
index 400f0a0c..00000000
--- a/client/components/widgets/EpisodeSlider.vue
+++ /dev/null
@@ -1,161 +0,0 @@
-<template>
-  <div class="w-full">
-    <div class="flex items-center py-3">
-      <slot />
-      <div class="flex-grow" />
-      <button v-if="isScrollable" class="w-8 h-8 mx-1 flex items-center justify-center rounded-full" :class="canScrollLeft ? 'hover:bg-white hover:bg-opacity-5 text-gray-300 hover:text-white' : 'text-white text-opacity-40 cursor-text'" @click="scrollLeft">
-        <span class="material-icons text-2xl">chevron_left</span>
-      </button>
-      <button v-if="isScrollable" class="w-8 h-8 mx-1 flex items-center justify-center rounded-full" :class="canScrollRight ? 'hover:bg-white hover:bg-opacity-5 text-gray-300 hover:text-white' : 'text-white text-opacity-40 cursor-text'" @click="scrollRight">
-        <span class="material-icons text-2xl">chevron_right</span>
-      </button>
-    </div>
-    <div ref="slider" class="w-full overflow-y-hidden overflow-x-auto no-scroll" style="scroll-behavior: smooth" @scroll="scrolled">
-      <div class="flex space-x-4" :style="{ height: height + 'px' }">
-        <template v-for="(item, index) in items">
-          <cards-lazy-book-card
-            :key="item.recentEpisode.id"
-            :ref="`slider-episode-${item.recentEpisode.id}`"
-            :index="index"
-            :book-mount="item"
-            :height="cardHeight"
-            :width="cardWidth"
-            :book-cover-aspect-ratio="bookCoverAspectRatio"
-            :bookshelf-view="bookshelfView"
-            :continue-listening-shelf="continueListeningShelf"
-            class="relative"
-            @edit="editEpisode"
-            @editPodcast="editPodcast"
-            @select="selectItem"
-            @hook:updated="setScrollVars"
-          />
-        </template>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    items: {
-      type: Array,
-      default: () => []
-    },
-    height: {
-      type: Number,
-      default: 192
-    },
-    bookshelfView: {
-      type: Number,
-      default: 1
-    },
-    continueListeningShelf: Boolean
-  },
-  data() {
-    return {
-      isScrollable: false,
-      canScrollLeft: false,
-      canScrollRight: false,
-      clientWidth: 0
-    }
-  },
-  computed: {
-    bookCoverAspectRatio() {
-      return this.$store.getters['libraries/getBookCoverAspectRatio']
-    },
-    cardScaleMulitiplier() {
-      return this.height / 192
-    },
-    cardHeight() {
-      return this.height - 40 * this.cardScaleMulitiplier
-    },
-    cardWidth() {
-      return this.cardHeight / this.bookCoverAspectRatio
-    },
-    booksPerPage() {
-      return Math.floor(this.clientWidth / (this.cardWidth + 16))
-    },
-    isSelectionMode() {
-      return this.$store.getters['globals/getIsBatchSelectingMediaItems']
-    }
-  },
-  methods: {
-    clearSelectedEntities() {
-      this.updateSelectionMode(false)
-    },
-    editEpisode({ libraryItem, episode }) {
-      this.$store.commit('setSelectedLibraryItem', libraryItem)
-      this.$store.commit('globals/setSelectedEpisode', episode)
-      this.$store.commit('globals/setShowEditPodcastEpisodeModal', true)
-    },
-    editPodcast(libraryItem) {
-      var itemIds = this.items.map((e) => e.id)
-      this.$store.commit('setBookshelfBookIds', itemIds)
-      this.$store.commit('showEditModal', libraryItem)
-    },
-    selectItem(payload) {
-      this.$emit('selectEntity', payload)
-    },
-    itemSelectedEvt() {
-      this.updateSelectionMode(this.isSelectionMode)
-    },
-    updateSelectionMode(val) {
-      const selectedMediaItems = this.$store.state.globals.selectedMediaItems
-
-      this.items.forEach((ent) => {
-        let component = this.$refs[`slider-episode-${ent.recentEpisode.id}`]
-        if (!component || !component.length) return
-        component = component[0]
-        component.setSelectionMode(val)
-        component.selected = selectedMediaItems.some((i) => i.id === ent.id)
-      })
-    },
-    scrolled() {
-      this.setScrollVars()
-    },
-    scrollRight() {
-      if (!this.canScrollRight) return
-      const slider = this.$refs.slider
-      if (!slider) return
-      const scrollAmount = this.booksPerPage * this.cardWidth
-      const maxScrollLeft = slider.scrollWidth - slider.clientWidth
-
-      const newScrollLeft = Math.min(maxScrollLeft, slider.scrollLeft + scrollAmount)
-      slider.scrollLeft = newScrollLeft
-    },
-    scrollLeft() {
-      if (!this.canScrollLeft) return
-      const slider = this.$refs.slider
-      if (!slider) return
-
-      const scrollAmount = this.booksPerPage * this.cardWidth
-
-      const newScrollLeft = Math.max(0, slider.scrollLeft - scrollAmount)
-      slider.scrollLeft = newScrollLeft
-    },
-    setScrollVars() {
-      const slider = this.$refs.slider
-      if (!slider) return
-      const { scrollLeft, scrollWidth, clientWidth } = slider
-      const scrollPercent = (scrollLeft + clientWidth) / scrollWidth
-
-      this.clientWidth = clientWidth
-      this.isScrollable = scrollWidth > clientWidth
-      this.canScrollRight = scrollPercent < 1
-      this.canScrollLeft = scrollLeft > 0
-    }
-  },
-  updated() {
-    this.setScrollVars()
-  },
-  mounted() {
-    this.$eventBus.$on('bookshelf_clear_selection', this.clearSelectedEntities)
-    this.$eventBus.$on('item-selected', this.itemSelectedEvt)
-  },
-  beforeDestroy() {
-    this.$eventBus.$off('bookshelf_clear_selection', this.clearSelectedEntities)
-    this.$eventBus.$off('item-selected', this.itemSelectedEvt)
-  }
-}
-</script>
\ No newline at end of file
diff --git a/client/components/widgets/NarratorsSlider.vue b/client/components/widgets/NarratorsSlider.vue
deleted file mode 100644
index 881c148b..00000000
--- a/client/components/widgets/NarratorsSlider.vue
+++ /dev/null
@@ -1,100 +0,0 @@
-<template>
-  <div class="w-full">
-    <div class="flex items-center py-3">
-      <slot />
-      <div class="flex-grow" />
-      <button v-if="isScrollable" class="w-8 h-8 mx-1 flex items-center justify-center rounded-full" :class="canScrollLeft ? 'hover:bg-white hover:bg-opacity-5 text-gray-300 hover:text-white' : 'text-white text-opacity-40 cursor-text'" @click="scrollLeft">
-        <span class="material-icons text-2xl">chevron_left</span>
-      </button>
-      <button v-if="isScrollable" class="w-8 h-8 mx-1 flex items-center justify-center rounded-full" :class="canScrollRight ? 'hover:bg-white hover:bg-opacity-5 text-gray-300 hover:text-white' : 'text-white text-opacity-40 cursor-text'" @click="scrollRight">
-        <span class="material-icons text-2xl">chevron_right</span>
-      </button>
-    </div>
-    <div ref="slider" class="w-full overflow-y-hidden overflow-x-auto no-scroll" style="scroll-behavior: smooth" @scroll="scrolled">
-      <div class="flex space-x-4" :style="{ height: height + 'px' }">
-        <template v-for="item in items">
-          <cards-narrator-card :key="item.name" :ref="`slider-item-${item.name}`" :narrator="item" :height="cardHeight" :width="cardWidth" class="relative" @hook:updated="setScrollVars" />
-        </template>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    items: {
-      type: Array,
-      default: () => []
-    },
-    height: {
-      type: Number,
-      default: 192
-    },
-    bookshelfView: {
-      type: Number,
-      default: 1
-    }
-  },
-  data() {
-    return {
-      isScrollable: false,
-      canScrollLeft: false,
-      canScrollRight: false,
-      clientWidth: 0
-    }
-  },
-  computed: {
-    cardHeight() {
-      return this.height
-    },
-    cardWidth() {
-      return this.cardHeight * 1.5
-    },
-    booksPerPage() {
-      return Math.floor(this.clientWidth / (this.cardWidth + 16))
-    }
-  },
-  methods: {
-    scrolled() {
-      this.setScrollVars()
-    },
-    scrollRight() {
-      if (!this.canScrollRight) return
-      const slider = this.$refs.slider
-      if (!slider) return
-      const scrollAmount = this.booksPerPage * this.cardWidth
-      const maxScrollLeft = slider.scrollWidth - slider.clientWidth
-
-      const newScrollLeft = Math.min(maxScrollLeft, slider.scrollLeft + scrollAmount)
-      slider.scrollLeft = newScrollLeft
-    },
-    scrollLeft() {
-      if (!this.canScrollLeft) return
-      const slider = this.$refs.slider
-      if (!slider) return
-
-      const scrollAmount = this.booksPerPage * this.cardWidth
-
-      const newScrollLeft = Math.max(0, slider.scrollLeft - scrollAmount)
-      slider.scrollLeft = newScrollLeft
-    },
-    setScrollVars() {
-      const slider = this.$refs.slider
-      if (!slider) return
-      const { scrollLeft, scrollWidth, clientWidth } = slider
-      const scrollPercent = (scrollLeft + clientWidth) / scrollWidth
-
-      this.clientWidth = clientWidth
-      this.isScrollable = scrollWidth > clientWidth
-      this.canScrollRight = scrollPercent < 1
-      this.canScrollLeft = scrollLeft > 0
-    }
-  },
-  updated() {
-    this.setScrollVars()
-  },
-  mounted() {},
-  beforeDestroy() {}
-}
-</script>
\ No newline at end of file
diff --git a/client/components/widgets/SeriesSlider.vue b/client/components/widgets/SeriesSlider.vue
deleted file mode 100644
index 820cbe1e..00000000
--- a/client/components/widgets/SeriesSlider.vue
+++ /dev/null
@@ -1,109 +0,0 @@
-<template>
-  <div class="w-full">
-    <div class="flex items-center py-3">
-      <slot />
-      <div class="flex-grow" />
-      <button v-if="isScrollable" class="w-8 h-8 mx-1 flex items-center justify-center rounded-full" :class="canScrollLeft ? 'hover:bg-white hover:bg-opacity-5 text-gray-300 hover:text-white' : 'text-white text-opacity-40 cursor-text'" @click="scrollLeft">
-        <span class="material-icons text-2xl">chevron_left</span>
-      </button>
-      <button v-if="isScrollable" class="w-8 h-8 mx-1 flex items-center justify-center rounded-full" :class="canScrollRight ? 'hover:bg-white hover:bg-opacity-5 text-gray-300 hover:text-white' : 'text-white text-opacity-40 cursor-text'" @click="scrollRight">
-        <span class="material-icons text-2xl">chevron_right</span>
-      </button>
-    </div>
-    <div ref="slider" class="w-full overflow-y-hidden overflow-x-auto no-scroll" style="scroll-behavior: smooth" @scroll="scrolled">
-      <div class="flex space-x-4" :style="{ height: height + 'px' }">
-        <template v-for="(item, index) in items">
-          <cards-lazy-series-card :key="item.id" :ref="`slider-item-${item.id}`" :index="index" :series-mount="item" :height="cardHeight" :width="cardWidth" :book-cover-aspect-ratio="bookCoverAspectRatio" :bookshelf-view="$constants.BookshelfView.DETAIL" class="relative" @hook:updated="setScrollVars" />
-        </template>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    items: {
-      type: Array,
-      default: () => []
-    },
-    height: {
-      type: Number,
-      default: 192
-    },
-    bookshelfView: {
-      type: Number,
-      default: 1
-    }
-  },
-  data() {
-    return {
-      isScrollable: false,
-      canScrollLeft: false,
-      canScrollRight: false,
-      clientWidth: 0
-    }
-  },
-  computed: {
-    bookCoverAspectRatio() {
-      return this.$store.getters['libraries/getBookCoverAspectRatio']
-    },
-    cardScaleMulitiplier() {
-      return this.height / 192
-    },
-    cardHeight() {
-      return this.height - 40 * this.cardScaleMulitiplier
-    },
-    cardWidth() {
-      return 2 * (this.cardHeight / this.bookCoverAspectRatio)
-    },
-    booksPerPage() {
-      return Math.floor(this.clientWidth / (this.cardWidth + 16))
-    },
-    isSelectionMode() {
-      return this.$store.getters['globals/getIsBatchSelectingMediaItems']
-    }
-  },
-  methods: {
-    scrolled() {
-      this.setScrollVars()
-    },
-    scrollRight() {
-      if (!this.canScrollRight) return
-      const slider = this.$refs.slider
-      if (!slider) return
-      const scrollAmount = this.booksPerPage * this.cardWidth
-      const maxScrollLeft = slider.scrollWidth - slider.clientWidth
-
-      const newScrollLeft = Math.min(maxScrollLeft, slider.scrollLeft + scrollAmount)
-      slider.scrollLeft = newScrollLeft
-    },
-    scrollLeft() {
-      if (!this.canScrollLeft) return
-      const slider = this.$refs.slider
-      if (!slider) return
-
-      const scrollAmount = this.booksPerPage * this.cardWidth
-
-      const newScrollLeft = Math.max(0, slider.scrollLeft - scrollAmount)
-      slider.scrollLeft = newScrollLeft
-    },
-    setScrollVars() {
-      const slider = this.$refs.slider
-      if (!slider) return
-      const { scrollLeft, scrollWidth, clientWidth } = slider
-      const scrollPercent = (scrollLeft + clientWidth) / scrollWidth
-
-      this.clientWidth = clientWidth
-      this.isScrollable = scrollWidth > clientWidth
-      this.canScrollRight = scrollPercent < 1
-      this.canScrollLeft = scrollLeft > 0
-    }
-  },
-  updated() {
-    this.setScrollVars()
-  },
-  mounted() {},
-  beforeDestroy() {}
-}
-</script>
\ No newline at end of file