Merge branch 'master' into ios-downloads

pages/bookshelf/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="w-full h-full min-h-full relative">
-    <div v-if="!loading" class="w-full">
+    <div v-if="!loading" class="w-full" :class="{ 'py-6': altViewEnabled }">
       <template v-for="(shelf, index) in shelves">
         <bookshelf-shelf :key="shelf.id" :label="shelf.label" :entities="shelf.entities" :type="shelf.type" :style="{ zIndex: shelves.length - index }" />
       </template>
@@ -53,6 +53,9 @@ export default {
     },
     currentLibraryId() {
       return this.$store.state.libraries.currentLibraryId
+    },
+    altViewEnabled() {
+      return this.$store.getters['getAltViewEnabled']
     }
   },
   methods: {
@@ -183,12 +186,10 @@ export default {
       })
     },
     initListeners() {
-      // this.$server.on('initialized', this.socketInit)
       this.$eventBus.$on('library-changed', this.libraryChanged)
       // this.$eventBus.$on('downloads-loaded', this.downloadsLoaded)
     },
     removeListeners() {
-      // this.$server.off('initialized', this.socketInit)
       this.$eventBus.$off('library-changed', this.libraryChanged)
       // this.$eventBus.$off('downloads-loaded', this.downloadsLoaded)
     }

pages/item/_id.vue

@@ -136,7 +136,7 @@ export default {
       })
       // Check if
       if (libraryItem) {
-        var localLibraryItem = await app.$db.getLocalLibraryItemByLLId(libraryItemId)
+        var localLibraryItem = await app.$db.getLocalLibraryItemByLId(libraryItemId)
         if (localLibraryItem) {
           console.log('Library item has local library item also', localLibraryItem.id)
           libraryItem.localLibraryItem = localLibraryItem

pages/localMedia/folders/_id.vue

@@ -17,7 +17,7 @@
     <div v-else class="w-full media-item-container overflow-y-auto">
       <template v-for="mediaItem in localLibraryItems">
         <nuxt-link :to="`/localMedia/item/${mediaItem.id}`" :key="mediaItem.id" class="flex my-1">
-          <div class="w-12 h-12 bg-primary">
+          <div class="w-12 h-12 min-w-12 min-h-12 bg-primary">
             <img v-if="mediaItem.coverPathSrc" :src="mediaItem.coverPathSrc" class="w-full h-full object-contain" />
           </div>
           <div class="flex-grow px-2">

pages/localMedia/folders/index.vue

@@ -1,5 +1,28 @@
 <template>
   <div class="w-full h-full py-6">
+    <div v-if="lastLocalMediaSyncResults" class="px-2 mb-4">
+      <div class="w-full pl-2 pr-2 py-2 bg-black bg-opacity-25 rounded-lg relative">
+        <div class="flex items-center mb-1">
+          <span class="material-icons text-success text-xl">sync</span>
+          <p class="text-sm text-gray-300 pl-2">Local media progress synced with server</p>
+        </div>
+        <div class="flex justify-between mb-1.5">
+          <p class="text-xs text-gray-400 font-semibold">{{ syncedServerConfigName }}</p>
+          <p class="text-xs text-gray-400 italic">{{ $dateDistanceFromNow(syncedAt) }}</p>
+        </div>
+
+        <div v-if="!numLocalProgressUpdates && !numServerProgressUpdates">
+          <p class="text-sm text-gray-300">Local media progress was up-to-date with server ({{ numLocalMediaSynced }} item{{ numLocalMediaSynced == 1 ? '' : 's' }})</p>
+        </div>
+        <div v-else>
+          <p v-if="numServerProgressUpdates" class="text-sm text-gray-300">- {{ numServerProgressUpdates }} local media item{{ numServerProgressUpdates === 1 ? '' : 's' }} progress was updated on the server (local more recent).</p>
+          <p v-else class="text-sm text-gray-300">- No local media progress had to be synced on the server.</p>
+          <p v-if="numLocalProgressUpdates" class="text-sm text-gray-300">- {{ numLocalProgressUpdates }} local media item{{ numLocalProgressUpdates === 1 ? '' : 's' }} progress was updated to match the server (server more recent).</p>
+          <p v-else class="text-sm text-gray-300">- No server progress had to be synced with local media progress.</p>
+        </div>
+      </div>
+    </div>
+
     <h1 class="text-base font-semibold px-3 mb-2">Local Folders</h1>
 
     <div v-if="!isIos" class="w-full max-w-full px-3 py-2">
@@ -49,8 +72,28 @@ export default {
     isIos() {
       return this.$platform === 'ios'
     },
-    isSocketConnected() {
-      return this.$store.state.socketConnected
+    lastLocalMediaSyncResults() {
+      return this.$store.state.lastLocalMediaSyncResults
+    },
+    numLocalMediaSynced() {
+      if (!this.lastLocalMediaSyncResults) return 0
+      return this.lastLocalMediaSyncResults.numLocalMediaProgressForServer || 0
+    },
+    syncedAt() {
+      if (!this.lastLocalMediaSyncResults) return 0
+      return this.lastLocalMediaSyncResults.syncedAt || 0
+    },
+    syncedServerConfigName() {
+      if (!this.lastLocalMediaSyncResults) return ''
+      return this.lastLocalMediaSyncResults.serverConfigName
+    },
+    numLocalProgressUpdates() {
+      if (!this.lastLocalMediaSyncResults) return 0
+      return this.lastLocalMediaSyncResults.numLocalProgressUpdates || 0
+    },
+    numServerProgressUpdates() {
+      if (!this.lastLocalMediaSyncResults) return 0
+      return this.lastLocalMediaSyncResults.numServerProgressUpdates || 0
     }
   },
   methods: {

pages/settings.vue

@@ -1,5 +1,11 @@
 <template>
   <div class="w-full h-full p-8">
+    <div class="flex items-center py-3" @click="toggleEnableAltView">
+      <div class="w-10 flex justify-center">
+        <ui-toggle-switch v-model="settings.enableAltView" @input="saveSettings" />
+      </div>
+      <p class="pl-4">Alternative Bookshelf View</p>
+    </div>
     <div v-if="$platform !== 'ios'" class="flex items-center py-3" @click="toggleDisableAutoRewind">
       <div class="w-10 flex justify-center">
         <ui-toggle-switch v-model="settings.disableAutoRewind" @input="saveSettings" />
@@ -28,6 +34,7 @@ export default {
       deviceData: null,
       settings: {
         disableAutoRewind: false,
+        enableAltView: false,
         jumpForwardTime: 10,
         jumpBackwardsTime: 10
       }
@@ -60,6 +67,10 @@ export default {
       this.settings.disableAutoRewind = !this.settings.disableAutoRewind
       this.saveSettings()
     },
+    toggleEnableAltView() {
+      this.settings.enableAltView = !this.settings.enableAltView
+      this.saveSettings()
+    },
     toggleJumpForward() {
       var next = (this.currentJumpForwardTimeIndex + 1) % 3
       this.settings.jumpForwardTime = this.jumpForwardItems[next].value
@@ -85,6 +96,7 @@ export default {
 
       const deviceSettings = this.deviceData.deviceSettings || {}
       this.settings.disableAutoRewind = !!deviceSettings.disableAutoRewind
+      this.settings.enableAltView = !!deviceSettings.enableAltView
       this.settings.jumpForwardTime = deviceSettings.jumpForwardTime || 10
       this.settings.jumpBackwardsTime = deviceSettings.jumpBackwardsTime || 10
     }