From fa98cb91777a4e49dcddd169706a85b7ec829fd9 Mon Sep 17 00:00:00 2001
From: Leo Vasanko <leo@git>
Date: Mon, 20 Nov 2023 12:08:17 -0800
Subject: [PATCH] Refactor empty folder to a separate component, allow creating
 new folders in empty folders again.

---
 frontend/src/components/EmptyFolder.vue | 37 +++++++++++++++++++++++++
 frontend/src/repositories/Document.ts   |  6 ++++
 frontend/src/views/ExplorerView.vue     | 29 ++++---------------
 3 files changed, 48 insertions(+), 24 deletions(-)
 create mode 100644 frontend/src/components/EmptyFolder.vue

diff --git a/frontend/src/components/EmptyFolder.vue b/frontend/src/components/EmptyFolder.vue
new file mode 100644
index 0000000..4313f8a
--- /dev/null
+++ b/frontend/src/components/EmptyFolder.vue
@@ -0,0 +1,37 @@
+<template>
+  <div v-if="!props.path || documents.length === 0" class="empty-container">
+    <component :is="cog" class="cog"/>
+    <p v-if="!store.connected">No Connection</p>
+    <p v-else-if="store.document.length === 0">Waiting for File List</p>
+    <p v-else-if="store.query">No matches!</p>
+    <p v-else-if="!store.document.some(doc => (doc.loc ? `${doc.loc}/${doc.name}` : doc.name) === props.path.join('/'))">Folder not found</p>
+    <p v-else>Empty folder</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineProps } from 'vue'
+import { useMainStore } from '@/stores/main'
+import cog from '@/assets/svg/cog.svg'
+
+const store = useMainStore()
+const props = defineProps<{
+  path: string[],
+  documents: Document[],
+}>()
+</script>
+
+<style scoped>
+@keyframes rotate {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+svg.cog {
+  width: 10rem;
+  height: 10rem;
+  margin: 0 auto;
+  animation: rotate 10s linear infinite;
+  filter: drop-shadow(0 0 1rem black);
+  fill: #888;
+}
+</style>
diff --git a/frontend/src/repositories/Document.ts b/frontend/src/repositories/Document.ts
index 1ee9d46..2b311d8 100644
--- a/frontend/src/repositories/Document.ts
+++ b/frontend/src/repositories/Document.ts
@@ -40,6 +40,12 @@ export class Doc {
     const ext = this.name.split('.').pop()?.toLowerCase()
     return ['jpg', 'jpeg', 'png', 'gif', 'webp', 'avif', 'svg'].includes(ext || '')
   }
+  get previewable(): boolean {
+    if (this.img) return true
+    const ext = this.name.split('.').pop()?.toLowerCase()
+    // Not a comprehensive list, but good enough for now
+    return ['mp4', 'mkv', 'webm', 'ogg', 'mp3', 'flac', 'aac', 'pdf'].includes(ext || '')
+  }
   get previewurl(): string {
     return this.url.replace(/^\/files/, '/preview')
   }
diff --git a/frontend/src/views/ExplorerView.vue b/frontend/src/views/ExplorerView.vue
index 6511945..4ec9aef 100644
--- a/frontend/src/views/ExplorerView.vue
+++ b/frontend/src/views/ExplorerView.vue
@@ -1,14 +1,6 @@
 <template>
-  <div v-if="!props.path || documents.length === 0" class="empty-container">
-    <component :is="cog" class="cog"/>
-    <p v-if="!store.connected">No Connection</p>
-    <p v-else-if="store.document.length === 0">Waiting for File List</p>
-    <p v-else-if="store.query">No matches!</p>
-    <p v-else-if="!store.document.some(doc => (doc.loc ? `${doc.loc}/${doc.name}` : doc.name) === props.path.join('/'))">Folder not found</p>
-    <p v-else>Empty folder</p>
-  </div>
   <Gallery
-    v-else-if="store.prefs.gallery"
+    v-if="store.prefs.gallery"
     ref="fileExplorer"
     :key="`gallery-${Router.currentRoute.value.path}`"
     :path="props.path"
@@ -21,10 +13,11 @@
     :path="props.path"
     :documents="documents"
   />
-  <div v-if="!store.prefs.gallery && documents.some(doc => doc.img)" class="suggest-gallery">
-    <p>Media files found. Would you like a gallery view?</p>
-    <SvgButton name="eye" taborder=0 @click="() => { store.prefs.gallery = true }">Gallery</SvgButton>
+  <div v-if="!store.prefs.gallery && documents.some(doc => doc.previewable)" class="suggest-gallery">
+    <SvgButton name="eye" taborder=0 @click="() => { store.prefs.gallery = true }"></SvgButton>
+    Gallery View
   </div>
+  <EmptyFolder :documents=documents :path=props.path />
 </template>
 
 <script setup lang="ts">
@@ -97,10 +90,6 @@ watchEffect(() => {
   text-shadow: 0 0 .3rem #000, 0 0 2rem #0008;
   color: var(--accent-color);
 }
-@keyframes rotate {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(359deg); }
-}
 .suggest-gallery p {
   font-size: 2rem;
   color: var(--accent-color);
@@ -112,12 +101,4 @@ watchEffect(() => {
   justify-content: center;
 }
 
-svg.cog {
-  width: 10rem;
-  height: 10rem;
-  margin: 0 auto;
-  animation: rotate 10s linear infinite;
-  filter: drop-shadow(0 0 1rem black);
-  fill: #888;
-}
 </style>