Add:Playlists

2026-08-29 22:57:16 +02:00 · 2022-12-03 15:20:27 -06:00
parent 6d9e902fe7
commit b62ce27487
13 changed files with 404 additions and 16 deletions
@@ -0,0 +1,103 @@
+<template>
+  <div class="w-full px-2 py-2 overflow-hidden relative">
+    <nuxt-link v-if="libraryItem" :to="`/item/${libraryItem.id}`" class="flex w-full">
+      <div class="h-full relative" :style="{ width: '50px' }">
+        <covers-book-cover :library-item="libraryItem" :width="50" :book-cover-aspect-ratio="bookCoverAspectRatio" />
+      </div>
+      <div class="flex-grow item-table-content h-full px-2 flex items-center">
+        <div class="max-w-full">
+          <p class="truncate block text-sm">{{ itemTitle }}</p>
+          <p class="truncate block text-gray-400 text-xs">{{ bookAuthorName }}</p>
+          <p class="text-xxs text-gray-500">{{ itemDuration }}</p>
+        </div>
+      </div>
+    </nuxt-link>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    playlistId: String,
+    item: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      isProcessingReadUpdate: false,
+      processingRemove: false
+    }
+  },
+  computed: {
+    libraryItem() {
+      return this.item.libraryItem || {}
+    },
+    episode() {
+      return this.item.episode
+    },
+    episodeId() {
+      return this.episode ? this.episode.id : null
+    },
+    media() {
+      return this.libraryItem.media || {}
+    },
+    mediaMetadata() {
+      return this.media.metadata || {}
+    },
+    tracks() {
+      if (this.episode) return []
+      return this.media.tracks || []
+    },
+    itemTitle() {
+      if (this.episode) return this.episode.title
+      return this.mediaMetadata.title || ''
+    },
+    bookAuthors() {
+      if (this.episode) return []
+      return this.mediaMetadata.authors || []
+    },
+    bookAuthorName() {
+      return this.bookAuthors.map((au) => au.name).join(', ')
+    },
+    itemDuration() {
+      if (this.episode) return this.$elapsedPretty(this.episode.duration)
+      return this.$elapsedPretty(this.media.duration)
+    },
+    isMissing() {
+      return this.libraryItem.isMissing
+    },
+    isInvalid() {
+      return this.libraryItem.isInvalid
+    },
+    bookCoverAspectRatio() {
+      return this.$store.getters['libraries/getBookCoverAspectRatio']
+    },
+    coverWidth() {
+      return 50
+    },
+    isMissing() {
+      return this.libraryItem.isMissing
+    },
+    isInvalid() {
+      return this.libraryItem.isInvalid
+    },
+    isStreaming() {
+      return this.$store.getters['getIsItemStreaming'](this.item.id)
+    },
+    showPlayBtn() {
+      return !this.isMissing && !this.isInvalid && !this.isStreaming && (this.tracks.length || this.episode)
+    }
+  },
+  methods: {},
+  mounted() {}
+}
+</script>
+
+<style>
+.item-table-content {
+  width: calc(100% - 50px);
+  max-width: calc(100% - 50px);
+}
+</style>