[#414] Support for Jellyfin book items [frontend].

platypush/backend/http/webapp/src/components/panels/Media/Item.vue

@@ -135,7 +135,7 @@ export default {
     actions() {
       const actions = []
 
-      if (this.item.type !== 'torrent' && this.item.item_type !== 'photo') {
+      if (!['book', 'photo', 'torrent'].includes(this.item.item_type)) {
         actions.push({
           iconClass: 'fa fa-play',
           text: 'Play',

platypush/backend/http/webapp/src/components/panels/Media/MediaImage.vue

@@ -1,7 +1,8 @@
 <template>
-  <div class="image-container"
-       :class="{ 'with-image': !!item?.image, 'photo': item?.item_type === 'photo' }">
-    <div class="play-overlay" @click.stop="onItemClick" v-if="hasPlay || item?.item_type === 'photo'">
+  <div class="image-container" :class="containerClasses">
+    <div class="play-overlay"
+         @click.stop="onItemClick"
+         v-if="hasPlay || ['book', 'photo'].includes(item?.item_type)">
       <i :class="overlayIconClass" />
     </div>
 
@@ -66,6 +67,7 @@ export default {
   computed: {
     clickEvent() {
       switch (this.item?.item_type) {
+        case 'book':
         case 'channel':
         case 'playlist':
         case 'folder':
@@ -76,8 +78,18 @@ export default {
       }
     },
 
+    containerClasses() {
+      return {
+        'with-image': !!this.item?.image,
+        photo: this.item?.item_type === 'photo',
+        book: this.item?.item_type === 'book',
+      }
+    },
+
     iconClass() {
       switch (this.item?.item_type) {
+        case 'book':
+          return 'fas fa-book'
         case 'channel':
           return 'fas fa-user'
         case 'playlist':
@@ -111,6 +123,8 @@ export default {
         return 'fas fa-folder-open'
       } else if (this.item?.item_type === 'photo') {
         return 'fas fa-eye'
+      } else if (this.item?.item_type === 'book') {
+        return 'fas fa-book-open'
       }
 
       return 'fas fa-play'

platypush/backend/http/webapp/src/components/panels/Media/Providers/Jellyfin/Collections.vue

@@ -103,11 +103,11 @@ export default {
   },
 
   mounted() {
-    this.$el.parentElement.addEventListener('scroll', this.onScroll)
+    this.$el.parentElement?.addEventListener('scroll', this.onScroll)
   },
 
   unmounted() {
-    this.$el.parentElement.removeEventListener('scroll', this.onScroll)
+    this.$el.parentElement?.removeEventListener('scroll', this.onScroll)
   },
 }
 </script>

platypush/backend/http/webapp/src/components/panels/Media/Providers/Jellyfin/views/Media/Index.vue

@@ -37,7 +37,7 @@
                @play="$emit('play', $event)"
                @play-with-opts="$emit('play-with-opts', $event)"
                @remove-from-playlist="$emit('remove-from-playlist', $event)"
-               @select="selectedResult = $event"
+               @select="selectItem"
                @view="$emit('view', $event)"
                v-if="mediaItems.length > 0" />
     </div>
@@ -71,7 +71,7 @@ export default {
     mediaItems() {
       const items = this.sortedItems?.filter((item) => item.item_type !== 'collection') ?? []
 
-      if (this.collection && !this.collection.collection_type) {
+      if (this.collection && (!this.collection.collection_type || this.collection.collection_type === 'books')) {
         return items.sort((a, b) => {
           if (a.created_at && b.created_at)
             return (new Date(a.created_at)) < (new Date(b.created_at))
@@ -99,6 +99,16 @@ export default {
       })
     },
 
+    selectItem(index) {
+      const item = this.items[index]
+      if (item.item_type === 'book' && item.embed_url) {
+        window.open(item.embed_url, '_blank')
+        return
+      }
+
+      this.selectedResult = index
+    },
+
     async init() {
       const args = this.getUrlArgs()
       let collection = args?.collection