Add: Library list view

components/home/BookshelfToolbar.vue

@@ -96,6 +96,7 @@ export default {
 
       var bookshelfView = this.isListView ? 'list' : 'grid'
       this.$localStore.setBookshelfView(bookshelfView)
+      this.$store.commit('setBookshelfView', bookshelfView)
     },
     updateOrder() {
       this.saveSettings()
@@ -113,7 +114,7 @@ export default {
       var bookshelfView = await this.$localStore.getBookshelfView()
       this.isListView = bookshelfView === 'list'
       this.bookshelfReady = true
-      console.log('Bookshelf view', bookshelfView)
+      this.$store.commit('setBookshelfView', bookshelfView)
     },
     settingsUpdated(settings) {
       for (const key in settings) {

pages/bookshelf/library.vue

@@ -1,8 +1,15 @@
 <template>
   <div class="w-full h-full">
-    <template v-for="(shelf, index) in shelves">
+    <div class="w-full h-full" v-show="!isListView">
-      <bookshelf-library-shelf :key="shelf.id" :books="shelf.books" :style="{ zIndex: shelves.length - index }" />
+      <template v-for="(shelf, index) in shelves">
-    </template>
+        <bookshelf-library-shelf :key="shelf.id" :books="shelf.books" :style="{ zIndex: shelves.length - index }" />
+      </template>
+    </div>
+    <div class="w-full h-full px-4 py-2" v-show="isListView">
+      <template v-for="book in books">
+        <app-bookshelf-list-row :key="book.id" :audiobook="book" :page-width="pageWidth" class="my-2" />
+      </template>
+    </div>
   </div>
 </template>
 
@@ -10,10 +17,17 @@
 export default {
   data() {
     return {
-      booksPerRow: 3
+      booksPerRow: 3,
+      pageWidth: 0
     }
   },
   computed: {
+    bookshelfView() {
+      return this.$store.state.bookshelfView
+    },
+    isListView() {
+      return this.bookshelfView === 'list'
+    },
     books() {
       return this.$store.getters['audiobooks/getFilteredAndSorted']()
     },
@@ -37,12 +51,15 @@ export default {
         }
       }
       if (shelf.books.length) {
+        shelf.id++
         shelves.push(shelf)
       }
       return shelves
     }
   },
   methods: {},
-  mounted() {}
+  mounted() {
+    this.pageWidth = window.innerWidth
+  }
 }
-</script>
+</script>

store/index.js

@@ -16,7 +16,8 @@ export const state = () => ({
   showReader: false,
   downloadFolder: null,
   mediaScanResults: {},
-  showSideDrawer: false
+  showSideDrawer: false,
+  bookshelfView: 'grid'
 })
 
 export const getters = {
@@ -104,5 +105,8 @@ export const mutations = {
   },
   setShowSideDrawer(state, val) {
     state.showSideDrawer = val
+  },
+  setBookshelfView(state, val) {
+    state.bookshelfView = val
   }
 }