From d171795e7c7de5c41bce35dc11476e61473885ae Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <fabio@manganiello.tech>
Date: Sat, 19 Oct 2024 17:07:05 +0200
Subject: [PATCH] [#414] Added embedded player support for Jellyfin and YouTube
 media.

---
 .../src/components/panels/Media/Browser.vue   |   2 +
 .../components/panels/Media/EmbedPlayer.vue   | 158 ++++++++++++++++++
 .../src/components/panels/Media/Index.vue     |  29 +++-
 .../src/components/panels/Media/Item.vue      |   2 +-
 .../panels/Media/Providers/Jellyfin.vue       |   3 +
 .../panels/Media/Providers/Jellyfin/Mixin.vue |   1 +
 .../Providers/Jellyfin/views/Media/Index.vue  |   1 +
 .../Providers/Jellyfin/views/Movies/Index.vue |   1 +
 .../Providers/Jellyfin/views/Music/Index.vue  |   1 +
 .../panels/Media/Providers/YouTube.vue        |   4 +
 .../Media/Providers/YouTube/Channel.vue       |   2 +
 .../panels/Media/Providers/YouTube/Feed.vue   |   2 +
 .../Media/Providers/YouTube/Playlist.vue      |   2 +
 13 files changed, 205 insertions(+), 3 deletions(-)
 create mode 100644 platypush/backend/http/webapp/src/components/panels/Media/EmbedPlayer.vue

diff --git a/platypush/backend/http/webapp/src/components/panels/Media/Browser.vue b/platypush/backend/http/webapp/src/components/panels/Media/Browser.vue
index dbb542d82b..478e16e50d 100644
--- a/platypush/backend/http/webapp/src/components/panels/Media/Browser.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Media/Browser.vue
@@ -35,6 +35,7 @@
             @path-change="$emit('path-change', $event)"
             @play="$emit('play', $event)"
             @play-with-opts="$emit('play-with-opts', $event)"
+            @view="$emit('view', $event)"
         />
       </div>
     </div>
@@ -61,6 +62,7 @@ export default {
     'remove-from-playlist',
     'remove-playlist',
     'rename-playlist',
+    'view',
   ],
 
   components: {
diff --git a/platypush/backend/http/webapp/src/components/panels/Media/EmbedPlayer.vue b/platypush/backend/http/webapp/src/components/panels/Media/EmbedPlayer.vue
new file mode 100644
index 0000000000..c1ce71f018
--- /dev/null
+++ b/platypush/backend/http/webapp/src/components/panels/Media/EmbedPlayer.vue
@@ -0,0 +1,158 @@
+<template>
+  <div class="embed-player">
+    <div class="player-container" :class="{ youtube: !!youtubeUrl }">
+      <Loading v-if="loading" />
+
+      <iframe :src="youtubeUrl"
+              class="player"
+              allowfullscreen
+              frameborder="0"
+              v-else-if="youtubeUrl" />
+
+      <video ref="video"
+             class="player"
+             controls
+             :poster="poster"
+             @canplay="$refs.video.play()"
+             @ended="$emit('ended')"
+             v-else-if="mediaItem">
+        <source :src="mediaItem.url" :type="mediaItem.mime_type">
+      </video>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+import Loading from "@/components/Loading";
+import MediaUtils from "@/components/Media/Utils";
+
+export default {
+  components: {
+    Loading,
+  },
+  emits: ['ended'],
+  mixins: [MediaUtils],
+  props: {
+    item: {
+      type: Object,
+      required: true,
+    },
+
+    pluginName: {
+      type: String,
+      required: true,
+    },
+  },
+
+  data() {
+    return {
+      loading: false,
+      mediaItem: null,
+      mimeType: null,
+    }
+  },
+
+  computed: {
+    youtubeUrl() {
+      if (this.item.type !== 'youtube')
+        return null
+
+      const youtubeId = this.item.url.match(/(?:\?v=|\/embed\/|\/\d\/|\/vi\/|\/v\/|https?:\/\/(?:www\.)?youtu\.be\/)([^?&"'>]+)/)[1]
+      return `https://www.youtube-nocookie.com/embed/${youtubeId}?autoplay=1`
+    },
+  },
+
+  methods: {
+    async refresh() {
+      this.loading = true
+
+      try {
+        if (this.item.type === 'file') {
+          let streamable = null
+          let error = false
+          this.loading = true
+
+          try {
+            streamable = await this.startStreaming(this.item.url, this.pluginName)
+          } catch (e) {
+            error = true
+          } finally {
+            this.opening = false
+            if (!streamable) {
+              this.notify({
+                title: 'Error starting streaming',
+                text: error || 'Unknown error',
+                error: true,
+              })
+            }
+          }
+
+          if (!streamable)
+            return
+
+          this.mediaItem = {
+            ...this.item,
+            url: streamable.url,
+            mime_type: streamable.mime_type,
+          }
+        } else if (this.item.type !== 'youtube') {
+          const response = await axios.head(this.item.url)
+          this.mediaItem = {
+            ...this.item,
+            mime_type: response.headers["content-type"],
+          }
+        }
+      } finally {
+        this.loading = false
+      }
+    },
+  },
+
+  watch: {
+    item: {
+      handler() {
+        this.refresh()
+      },
+      deep: true,
+    },
+  },
+
+  mounted() {
+    this.refresh()
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+@import "~@/components/Media/vars";
+
+.embed-player {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background-color: black;
+  overflow: hidden;
+
+  .player-container {
+    position: relative;
+    width: 100%;
+    height: 100%;
+
+    &.youtube {
+      min-width: 95vw;
+      min-height: 90vh;
+    }
+  }
+
+  video {
+    width: 100%;
+    height: 100%;
+  }
+
+  iframe {
+    width: 95%;
+    height: 95%;
+  }
+}
+</style>
diff --git a/platypush/backend/http/webapp/src/components/panels/Media/Index.vue b/platypush/backend/http/webapp/src/components/panels/Media/Index.vue
index b2458cbce8..228642ce98 100644
--- a/platypush/backend/http/webapp/src/components/panels/Media/Index.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Media/Index.vue
@@ -91,6 +91,7 @@
                        @path-change="browserFilter = ''"
                        @play="play($event)"
                        @play-with-opts="play($event.item, $event.opts)"
+                       @view="view"
                        v-else-if="selectedView === 'browser'"
               />
             </div>
@@ -142,6 +143,14 @@
           />
         </Modal>
       </div>
+
+      <div class="embed-player-container" v-if="viewItem != null">
+        <Modal :visible="true" @close="viewItem = null">
+          <EmbedPlayer :item="viewItem"
+                       :plugin-name="pluginName"
+                       @ended="viewItem = null" />
+        </Modal>
+      </div>
     </div>
   </keep-alive>
 </template>
@@ -151,6 +160,7 @@ import Modal from "@/components/Modal";
 import Utils from "@/Utils";
 
 import Browser from "@/components/panels/Media/Browser";
+import EmbedPlayer from "@/components/panels/Media/EmbedPlayer";
 import Header from "@/components/panels/Media/Header";
 import Info from "@/components/panels/Media/Info";
 import Loading from "@/components/Loading";
@@ -169,6 +179,7 @@ export default {
   mixins: [Utils, MediaUtils],
   components: {
     Browser,
+    EmbedPlayer,
     Header,
     Info,
     Loading,
@@ -225,6 +236,7 @@ export default {
         'torrent': true,
       },
       urlPlay: null,
+      viewItem: null,
       torrentPlugin: null,
       torrentPlugins: [
         'torrent',
@@ -373,8 +385,7 @@ export default {
     },
 
     async view(item) {
-      const ret = await this.startStreaming(item, this.pluginName, true)
-      window.open(ret.url, '_blank')
+      this.viewItem = item
     },
 
     async download(item, args) {
@@ -867,4 +878,18 @@ export default {
     padding: 0 !important;
   }
 }
+
+:deep(.embed-player-container) {
+  .content {
+    max-width: 95%;
+    background: black;
+  }
+
+  .body {
+    height: 100%;
+    max-height: 85vh !important;
+    background: black;
+    padding: 0 !important;
+  }
+}
 </style>
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 44a6441b36..55eade1123 100644
--- a/platypush/backend/http/webapp/src/components/panels/Media/Item.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Media/Item.vue
@@ -159,7 +159,7 @@ export default {
         })
       }
 
-      if (this.item.type === 'file') {
+      if (['file', 'jellyfin', 'youtube'].includes(this.item.type)) {
         actions.push({
           iconClass: 'fa fa-window-maximize',
           text: 'View in Browser',
diff --git a/platypush/backend/http/webapp/src/components/panels/Media/Providers/Jellyfin.vue b/platypush/backend/http/webapp/src/components/panels/Media/Providers/Jellyfin.vue
index cab6799abd..29da377a33 100644
--- a/platypush/backend/http/webapp/src/components/panels/Media/Providers/Jellyfin.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Media/Providers/Jellyfin.vue
@@ -9,6 +9,7 @@
               v-on="componentData.on"
               :collection="collection"
               @select="select"
+              @view="$emit('view', $event)"
               v-else-if="currentView === 'movies'" />
 
       <Media v-bind="componentData.props"
@@ -16,6 +17,7 @@
              :collection="collection"
              @select="select"
              @select-collection="selectCollection"
+             @view="$emit('view', $event)"
              v-else />
     </div>
   </div>
@@ -44,6 +46,7 @@ export default {
     'path-change',
     'play',
     'play-with-opts',
+    'view',
   ],
 
   data() {
diff --git a/platypush/backend/http/webapp/src/components/panels/Media/Providers/Jellyfin/Mixin.vue b/platypush/backend/http/webapp/src/components/panels/Media/Providers/Jellyfin/Mixin.vue
index c81a0b8748..6309278ece 100644
--- a/platypush/backend/http/webapp/src/components/panels/Media/Providers/Jellyfin/Mixin.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Media/Providers/Jellyfin/Mixin.vue
@@ -11,6 +11,7 @@ export default {
     'play',
     'play-with-opts',
     'select',
+    'view',
   ],
 
   props: {
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 ee9fa7971c..98a575a38b 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,6 +37,7 @@
                @play-with-opts="$emit('play-with-opts', $event)"
                @remove-from-playlist="$emit('remove-from-playlist', $event)"
                @select="selectedResult = $event"
+               @view="$emit('view', $event)"
                v-if="mediaItems.length > 0" />
     </div>
   </div>
diff --git a/platypush/backend/http/webapp/src/components/panels/Media/Providers/Jellyfin/views/Movies/Index.vue b/platypush/backend/http/webapp/src/components/panels/Media/Providers/Jellyfin/views/Movies/Index.vue
index 2904e3e1bb..46dacd7111 100644
--- a/platypush/backend/http/webapp/src/components/panels/Media/Providers/Jellyfin/views/Movies/Index.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Media/Providers/Jellyfin/views/Movies/Index.vue
@@ -17,6 +17,7 @@
              @play-with-opts="$emit('play-with-opts', $event)"
              @remove-from-playlist="$emit('remove-from-playlist', $event)"
              @select="selectedResult = $event"
+             @view="$emit('view', $event)"
              v-else />
 
     <SortButton :value="sort"
diff --git a/platypush/backend/http/webapp/src/components/panels/Media/Providers/Jellyfin/views/Music/Index.vue b/platypush/backend/http/webapp/src/components/panels/Media/Providers/Jellyfin/views/Music/Index.vue
index 1999a08408..6bbf72b4a9 100644
--- a/platypush/backend/http/webapp/src/components/panels/Media/Providers/Jellyfin/views/Music/Index.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Media/Providers/Jellyfin/views/Music/Index.vue
@@ -64,6 +64,7 @@
                @play-with-opts="$emit('play-with-opts', $event)"
                @remove-from-playlist="$emit('remove-from-playlist', $event)"
                @select="selectedResult = $event"
+               @view="$emit('view', $event)"
                v-if="mediaItems?.length > 0" />
     </main>
   </div>
diff --git a/platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube.vue b/platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube.vue
index 7700379233..eace022676 100644
--- a/platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube.vue
@@ -15,6 +15,7 @@
               @open-channel="selectChannelFromItem"
               @play="$emit('play', $event)"
               @play-with-opts="$emit('play-with-opts', $event)"
+              @view="$emit('view', $event)"
               v-if="selectedView === 'feed'"
         />
 
@@ -29,6 +30,7 @@
                    @play-with-opts="$emit('play-with-opts', $event)"
                    @remove-from-playlist="removeFromPlaylist"
                    @select="onPlaylistSelected"
+                   @view="$emit('view', $event)"
                    v-else-if="selectedView === 'playlists'"
         />
 
@@ -41,6 +43,7 @@
                        @play="$emit('play', $event)"
                        @play-with-opts="$emit('play-with-opts', $event)"
                        @select="onChannelSelected"
+                       @view="$emit('view', $event)"
                        v-else-if="selectedView === 'subscriptions'"
         />
 
@@ -80,6 +83,7 @@ export default {
     'download-audio',
     'play',
     'play-with-opts',
+    'view',
   ],
 
   data() {
diff --git a/platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube/Channel.vue b/platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube/Channel.vue
index 90a7665a42..3d006d0c8e 100644
--- a/platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube/Channel.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube/Channel.vue
@@ -54,6 +54,7 @@
                @play-with-opts="$emit('play-with-opts', $event)"
                @scroll-end="loadNextPage"
                @select="selectedResult = $event"
+               @view="$emit('view', $event)"
       />
     </div>
   </div>
@@ -73,6 +74,7 @@ export default {
     'open-channel',
     'play',
     'play-with-opts',
+    'view',
   ],
 
   components: {
diff --git a/platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube/Feed.vue b/platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube/Feed.vue
index fee2435238..8d393d4723 100644
--- a/platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube/Feed.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube/Feed.vue
@@ -16,6 +16,7 @@
              @select="selectedResult = $event"
              @play="$emit('play', $event)"
              @play-with-opts="$emit('play-with-opts', $event)"
+             @view="$emit('view', $event)"
              v-else />
   </div>
 </template>
@@ -35,6 +36,7 @@ export default {
     'open-channel',
     'play',
     'play-with-opts',
+    'view',
   ],
 
   components: {
diff --git a/platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube/Playlist.vue b/platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube/Playlist.vue
index 6deb447a7e..01d120ada2 100644
--- a/platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube/Playlist.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube/Playlist.vue
@@ -57,6 +57,7 @@
                @play-with-opts="$emit('play-with-opts', $event)"
                @remove-from-playlist="$emit('remove-from-playlist', $event)"
                @select="selectedResult = $event"
+               @view="$emit('view', $event)"
                v-else />
     </div>
   </div>
@@ -78,6 +79,7 @@ export default {
     'play',
     'play-with-opts',
     'remove-from-playlist',
+    'view',
   ],
 
   components: {