Fix: android auto requirements, Change: New UI #33

2026-08-30 23:27:17 +02:00 · 2021-11-14 19:59:34 -06:00
parent bf8e48fd27
commit 0abefbd9bc
43 changed files with 2336 additions and 308 deletions
@@ -0,0 +1,113 @@
+<template>
+  <div class="rounded-sm relative" @click="clickCard">
+    <nuxt-link :to="groupTo" class="cursor-pointer">
+      <div class="w-full relative bg-primary" :style="{ height: coverHeight + 'px', width: coverWidth + 'px' }">
+        <cards-series-cover ref="groupcover" :name="groupName" :group-to="groupTo" :type="groupType" :book-items="bookItems" :width="coverWidth" :height="coverHeight" />
+
+        <div class="absolute top-2 right-2 w-7 h-7 rounded-lg bg-black bg-opacity-90 text-gray-300 box-shadow-book flex items-center justify-center border border-white border-opacity-25 pointer-events-none z-40">
+          <p class="font-book text-xl">{{ bookItems.length }}</p>
+        </div>
+        <div class="absolute bottom-0 left-0 w-full h-1 flex flex-nowrap z-40">
+          <div v-for="userProgress in userProgressItems" :key="userProgress.audiobookId" class="h-full w-full" :class="userProgress.isRead ? 'bg-success' : userProgress.progress > 0 ? 'bg-yellow-400' : ''" />
+        </div>
+      </div>
+    </nuxt-link>
+
+    <div class="categoryPlacard absolute z-30 left-0 right-0 mx-auto -bottom-5 h-5 rounded-md font-book text-center" :style="{ width: Math.min(160, coverWidth) + 'px' }">
+      <div class="w-full h-full shinyBlack flex items-center justify-center rounded-sm border" :style="{ padding: `0rem ${0.8 * sizeMultiplier}rem` }">
+        <p class="truncate pt-px" :style="{ fontSize: labelFontSize + 'rem' }">{{ groupName }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    group: {
+      type: Object,
+      default: () => null
+    },
+    width: {
+      type: Number,
+      default: 120
+    }
+  },
+  data() {
+    return {}
+  },
+  watch: {
+    width(newVal) {
+      this.$nextTick(() => {
+        if (this.$refs.groupcover && this.$refs.groupcover.init) {
+          this.$refs.groupcover.init()
+        }
+      })
+    }
+  },
+  computed: {
+    currentLibraryId() {
+      return this.$store.state.libraries.currentLibraryId
+    },
+    labelFontSize() {
+      if (this.coverWidth < 160) return 0.7
+      return 0.75
+    },
+    _group() {
+      return this.group || {}
+    },
+    groupType() {
+      return this._group.type
+    },
+    groupTo() {
+      if (this.groupType === 'series') {
+        return `/bookshelf/series?series=${this.groupEncode}`
+      } else {
+        return `/bookshelf?filter=tags.${this.groupEncode}`
+      }
+    },
+    coverWidth() {
+      return this.coverHeight
+    },
+    coverHeight() {
+      return this.width * 1.6
+    },
+    sizeMultiplier() {
+      return this.width / 120
+    },
+    paddingX() {
+      return 16 * this.sizeMultiplier
+    },
+    bookItems() {
+      return this._group.books || []
+    },
+    userAudiobooks() {
+      return Object.values(this.$store.state.user.user ? this.$store.state.user.user.audiobooks || {} : {})
+    },
+    userProgressItems() {
+      return this.bookItems.map((item) => {
+        var userAudiobook = this.userAudiobooks.find((ab) => ab.audiobookId === item.id)
+        return userAudiobook || {}
+      })
+    },
+    groupName() {
+      return this._group.name || 'No Name'
+    },
+    groupEncode() {
+      return this.$encode(this.groupName)
+    },
+    filter() {
+      return `${this.groupType}.${this.$encode(this.groupName)}`
+    },
+    hasValidCovers() {
+      var validCovers = this.bookItems.map((bookItem) => bookItem.book.cover)
+      return !!validCovers.length
+    }
+  },
+  methods: {
+    clickCard() {
+      this.$emit('click', this.group)
+    }
+  }
+}
+</script>