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

2026-08-27 13:54:01 +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,80 @@
+<template>
+  <div class="w-full bg-primary bg-opacity-40">
+    <div class="w-full h-14 flex items-center px-4 bg-primary">
+      <p>Collection List</p>
+      <div class="w-6 h-6 bg-white bg-opacity-10 flex items-center justify-center rounded-full ml-2">
+        <p class="font-mono text-sm">{{ books.length }}</p>
+      </div>
+      <div class="flex-grow" />
+      <p v-if="totalDuration">{{ totalDurationPretty }}</p>
+    </div>
+    <template v-for="book in booksCopy">
+      <tables-collection-book-table-row :key="book.id" :book="book" :collection-id="collectionId" class="item" :class="drag ? '' : 'collection-book-item'" @edit="editBook" />
+    </template>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    collectionId: String,
+    books: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      booksCopy: []
+    }
+  },
+  watch: {
+    books: {
+      handler(newVal) {
+        this.init()
+      }
+    }
+  },
+  computed: {
+    totalDuration() {
+      var _total = 0
+      this.books.forEach((book) => {
+        _total += book.duration
+      })
+      return _total
+    },
+    totalDurationPretty() {
+      return this.$elapsedPretty(this.totalDuration)
+    }
+  },
+  methods: {
+    editBook(book) {
+      var bookIds = this.books.map((b) => b.id)
+      this.$store.commit('setBookshelfBookIds', bookIds)
+      this.$store.commit('showEditModal', book)
+    },
+    init() {
+      this.booksCopy = this.books.map((b) => ({ ...b }))
+    }
+  },
+  mounted() {
+    this.init()
+  }
+}
+</script>
+
+<style>
+.collection-book-item {
+  transition: all 0.4s ease;
+}
+
+.collection-book-enter-from,
+.collection-book-leave-to {
+  opacity: 0;
+  transform: translateX(30px);
+}
+
+.collection-book-leave-active {
+  position: absolute;
+}
+</style>
@@ -0,0 +1,122 @@
+<template>
+  <div class="w-full px-2 py-2 overflow-hidden relative">
+    <div v-if="book" class="flex h-20">
+      <div class="h-full relative" :style="{ width: '50px' }">
+        <cards-book-cover :audiobook="book" :width="50" />
+      </div>
+      <div class="w-80 h-full px-2 flex items-center">
+        <div>
+          <nuxt-link :to="`/audiobook/${book.id}`" class="truncate hover:underline">{{ bookTitle }}</nuxt-link>
+          <nuxt-link :to="`/bookshelf/library?filter=authors.${$encode(bookAuthor)}`" class="truncate block text-gray-400 text-sm hover:underline">{{ bookAuthor }}</nuxt-link>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    collectionId: String,
+    book: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      isProcessingReadUpdate: false,
+      processingRemove: false
+    }
+  },
+  watch: {
+    userIsRead: {
+      immediate: true,
+      handler(newVal) {
+        this.isRead = newVal
+      }
+    }
+  },
+  computed: {
+    _book() {
+      return this.book.book || {}
+    },
+    bookTitle() {
+      return this._book.title || ''
+    },
+    bookAuthor() {
+      return this._book.authorFL || ''
+    },
+    bookDuration() {
+      return this.$secondsToTimestamp(this.book.duration)
+    },
+    isMissing() {
+      return this.book.isMissing
+    },
+    isIncomplete() {
+      return this.book.isIncomplete
+    },
+    numTracks() {
+      return this.book.numTracks
+    },
+    isStreaming() {
+      return this.$store.getters['getAudiobookIdStreaming'] === this.book.id
+    },
+    showPlayBtn() {
+      return !this.isMissing && !this.isIncomplete && !this.isStreaming && this.numTracks
+    },
+    userAudiobooks() {
+      return this.$store.state.user.user ? this.$store.state.user.user.audiobooks || {} : {}
+    },
+    userAudiobook() {
+      return this.userAudiobooks[this.book.id] || null
+    },
+    userIsRead() {
+      return this.userAudiobook ? !!this.userAudiobook.isRead : false
+    }
+  },
+  methods: {
+    playClick() {
+      // this.$store.commit('setStreamAudiobook', this.book)
+      // this.$root.socket.emit('open_stream', this.book.id)
+    },
+    clickEdit() {
+      this.$emit('edit', this.book)
+    },
+    toggleRead() {
+      var updatePayload = {
+        isRead: !this.isRead
+      }
+      this.isProcessingReadUpdate = true
+      this.$axios
+        .$patch(`/api/user/audiobook/${this.book.id}`, updatePayload)
+        .then(() => {
+          this.isProcessingReadUpdate = false
+          this.$toast.success(`"${this.bookTitle}" Marked as ${updatePayload.isRead ? 'Read' : 'Not Read'}`)
+        })
+        .catch((error) => {
+          console.error('Failed', error)
+          this.isProcessingReadUpdate = false
+          this.$toast.error(`Failed to mark as ${updatePayload.isRead ? 'Read' : 'Not Read'}`)
+        })
+    },
+    removeClick() {
+      this.processingRemove = true
+
+      this.$axios
+        .$delete(`/api/collection/${this.collectionId}/book/${this.book.id}`)
+        .then((updatedCollection) => {
+          console.log(`Book removed from collection`, updatedCollection)
+          this.$toast.success('Book removed from collection')
+          this.processingRemove = false
+        })
+        .catch((error) => {
+          console.error('Failed to remove book from collection', error)
+          this.$toast.error('Failed to remove book from collection')
+          this.processingRemove = false
+        })
+    }
+  },
+  mounted() {}
+}
+</script>