From d4b519a572b5ba899b1e719655d096296858bee0 Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <fabio@manganiello.tech>
Date: Sun, 12 Nov 2023 15:54:27 +0100
Subject: [PATCH] [media UI] Wrapped the file browser into a `MediaBrowser`
 component.

This will make it easier to support multiple media collection providers
other than local files.
---
 .../src/components/panels/Media/Browser.vue   | 86 +++++++++++++++++++
 .../src/components/panels/Media/Index.vue     |  6 +-
 2 files changed, 88 insertions(+), 4 deletions(-)
 create mode 100644 platypush/backend/http/webapp/src/components/panels/Media/Browser.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
new file mode 100644
index 000000000..19dc35e3d
--- /dev/null
+++ b/platypush/backend/http/webapp/src/components/panels/Media/Browser.vue
@@ -0,0 +1,86 @@
+<template>
+  <keep-alive>
+    <div class="media-browser">
+      <Loading v-if="loading" />
+
+      <div class="media-index grid" v-else-if="!collection">
+        <div class="item" @click="collection = 'files'">
+          <div class="icon">
+            <i class="fas fa-folder"></i>
+          </div>
+          <div class="name">
+            Files
+          </div>
+        </div>
+      </div>
+
+      <div class="media-browser fade-in" v-else>
+        <Browser :is-media="true"
+           :filter="filter"
+           :has-back="true"
+           @back="collection = null"
+           @path-change="$emit('path-change', $event)"
+           @play="$emit('play', $event)"
+           v-if="collection === 'files'" />
+      </div>
+    </div>
+  </keep-alive>
+</template>
+
+<script>
+import Browser from "@/components/File/Browser";
+import Loading from "@/components/Loading";
+
+export default {
+  emits: ['path-change', 'play'],
+  components: {
+    Browser,
+    Loading,
+  },
+
+  props: {
+    filter: {
+      type: String,
+      default: '',
+    },
+  },
+
+  data() {
+    return {
+      loading: false,
+      collection: null,
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.media-browser {
+  height: 100%;
+
+  .item {
+    height: 100px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    border: $default-border-2;
+    cursor: pointer;
+
+    &:hover {
+      background: $hover-bg;
+    }
+
+    .icon {
+      height: 60%;
+      display: inline-flex;
+      justify-content: center;
+      opacity: 0.5;
+
+      i {
+        font-size: 40px;
+      }
+    }
+  }
+}
+</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 4f8e6f7fd..32c5259ef 100644
--- a/platypush/backend/http/webapp/src/components/panels/Media/Index.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Media/Index.vue
@@ -48,9 +48,7 @@
                            @play="play"
                            v-else-if="selectedView === 'torrents'" />
 
-              <Browser :plugin-name="torrentPlugin"
-                       :is-media="true"
-                       :filter="browserFilter"
+              <Browser :filter="browserFilter"
                        @path-change="browserFilter = ''"
                        @play="play($event)"
                        v-else-if="selectedView === 'browser'" />
@@ -84,7 +82,7 @@ import Loading from "@/components/Loading";
 import Modal from "@/components/Modal";
 import Utils from "@/Utils";
 
-import Browser from "@/components/File/Browser";
+import Browser from "@/components/panels/Media/Browser";
 import Header from "@/components/panels/Media/Header";
 import MediaUtils from "@/components/Media/Utils";
 import MediaView from "@/components/Media/View";