From 8e9fb65db5a7b0554a7a19a8d157c11fdd6925ef Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <fabio@manganiello.tech>
Date: Sun, 20 Oct 2024 02:51:26 +0200
Subject: [PATCH] [#414] Support for Jellyfin book items [frontend].

---
 .../src/components/panels/Media/Item.vue      |  2 +-
 .../components/panels/Media/MediaImage.vue    | 20 ++++++++++++++++---
 .../Media/Providers/Jellyfin/Collections.vue  |  4 ++--
 .../Providers/Jellyfin/views/Media/Index.vue  | 14 +++++++++++--
 4 files changed, 32 insertions(+), 8 deletions(-)

diff --git a/platypush/backend/http/webapp/src/components/panels/Media/Item.vue b/platypush/backend/http/webapp/src/components/panels/Media/Item.vue
index 55eade1123..7673efc809 100644
--- a/platypush/backend/http/webapp/src/components/panels/Media/Item.vue
+++ b/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',
diff --git a/platypush/backend/http/webapp/src/components/panels/Media/MediaImage.vue b/platypush/backend/http/webapp/src/components/panels/Media/MediaImage.vue
index 9f287b0351..6d8d68a858 100644
--- a/platypush/backend/http/webapp/src/components/panels/Media/MediaImage.vue
+++ b/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'
diff --git a/platypush/backend/http/webapp/src/components/panels/Media/Providers/Jellyfin/Collections.vue b/platypush/backend/http/webapp/src/components/panels/Media/Providers/Jellyfin/Collections.vue
index 6f29d38e62..e0dd37fbf1 100644
--- a/platypush/backend/http/webapp/src/components/panels/Media/Providers/Jellyfin/Collections.vue
+++ b/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>
diff --git a/platypush/backend/http/webapp/src/components/panels/Media/Providers/Jellyfin/views/Media/Index.vue b/platypush/backend/http/webapp/src/components/panels/Media/Providers/Jellyfin/views/Media/Index.vue
index 5cd10d33d7..12db0c7ec3 100644
--- a/platypush/backend/http/webapp/src/components/panels/Media/Providers/Jellyfin/views/Media/Index.vue
+++ b/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