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)"
/>
@@ -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 @@
+
+
+
+
+
+
+
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'"
/>
@@ -142,6 +143,14 @@
/>
+
+
+
+
+
+
@@ -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;
+ }
+}
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'" />
@@ -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" />
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 />
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)"
/>
@@ -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 />
@@ -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 />
@@ -78,6 +79,7 @@ export default {
'play',
'play-with-opts',
'remove-from-playlist',
+ 'view',
],
components: {