From a087826d51217201f5b859d19b4f44983b49ac4d Mon Sep 17 00:00:00 2001
From: "kissudad@outlook.com" <kissudad@outlook.com>
Date: Wed, 10 Apr 2024 12:22:32 +0800
Subject: [PATCH] fix:

1. audio preview
2. in mobile, filelist header layer is too high
---
 frontend/src/css/_share.css              |  1 -
 frontend/src/stores/auth.ts              |  5 +-
 frontend/src/views/Files.vue             | 25 ++++++-
 frontend/src/views/Share.vue             | 23 +++---
 frontend/src/views/files/FileListing.vue | 93 +++++++++++++-----------
 5 files changed, 90 insertions(+), 57 deletions(-)

diff --git a/frontend/src/css/_share.css b/frontend/src/css/_share.css
index 04034a32..f6a19a5f 100644
--- a/frontend/src/css/_share.css
+++ b/frontend/src/css/_share.css
@@ -19,7 +19,6 @@
   color: var(--textPrimary);
   border-radius: 0.2em;
   margin: 5px;
-  overflow: hidden;
 }
 
 .share__box__header {
diff --git a/frontend/src/stores/auth.ts b/frontend/src/stores/auth.ts
index 2f5f653a..40c97c5e 100644
--- a/frontend/src/stores/auth.ts
+++ b/frontend/src/stores/auth.ts
@@ -16,7 +16,10 @@ export const useAuthStore = defineStore("auth", () => {
     perm: { create: false },
   });
 
-  const shareConfig = ref({ sortBy: "name", asc: false });
+  const shareConfig = useStorage("share-config", {
+    sortBy: "name",
+    asc: false,
+  });
   const isLoggedIn = computed(() => registeredUser.value !== null);
   const user = computed({
     get: () =>
diff --git a/frontend/src/views/Files.vue b/frontend/src/views/Files.vue
index 2e82fc6b..aa5edd87 100644
--- a/frontend/src/views/Files.vue
+++ b/frontend/src/views/Files.vue
@@ -8,7 +8,11 @@
 
     <breadcrumbs base="/files" />
     <errors v-if="error" :errorCode="error.status" />
-    <component v-else-if="currentView" :is="currentView"></component>
+    <component
+      v-else-if="currentView"
+      :is="currentView"
+      v-bind="currentViewProps"
+    ></component>
     <div v-else-if="currentView !== null">
       <h2 class="message delayed">
         <div class="spinner">
@@ -65,6 +69,25 @@ const clean = (path: string) => {
 
 const error = ref<StatusError | null>(null);
 
+const currentViewProps = computed(() => {
+  if (fileStore.req?.type === undefined) {
+    return null;
+  }
+
+  if (fileStore.req.isDir) {
+    return {
+      headerStickyTop: "4em",
+    };
+  } else if (
+    fileStore.req.type === "text" ||
+    fileStore.req.type === "textImmutable"
+  ) {
+    return {};
+  } else {
+    return {};
+  }
+});
+
 const currentView = computed(() => {
   if (fileStore.req?.type === undefined) {
     return null;
diff --git a/frontend/src/views/Share.vue b/frontend/src/views/Share.vue
index 4fe8b8d2..1e38fd1d 100644
--- a/frontend/src/views/Share.vue
+++ b/frontend/src/views/Share.vue
@@ -161,7 +161,7 @@
             </a>
             <div
               v-else-if="
-                fileStore.multiple &&
+                !fileStore.multiple &&
                 fileStore.selectedCount === 1 &&
                 req.items[fileStore.selected[0]].type === 'audio'
               "
@@ -228,12 +228,15 @@
           </div>
         </div>
         <div
-          id="shareList"
           v-if="req.isDir && req.items.length > 0"
           class="share__box share__box__items"
           style="background-color: transparent"
         >
-          <FileListing />
+          <FileListing
+            :header-sticky-top="
+              useMediaQuery('min-width: 916px') ? '19em' : '0'
+            "
+          />
         </div>
         <div
           v-else-if="req.isDir && req.items.length === 0"
@@ -271,6 +274,7 @@ import { useI18n } from "vue-i18n";
 import { StatusError } from "@/api/utils";
 import { copy } from "@/utils/clipboard";
 import { storeToRefs } from "pinia";
+import { useMediaQuery } from "@vueuse/core";
 
 const error = ref<StatusError | null>(null);
 const showLimit = ref<number>(100);
@@ -364,6 +368,7 @@ const play = () => {
 watch(reload, (newValue) => {
   newValue && fetchData();
 });
+
 const fetchData = async () => {
   fileStore.reload = false;
   fileStore.selected = [];
@@ -486,16 +491,8 @@ onBeforeUnmount(() => {
 </script>
 
 <style scoped>
-#listing.list {
-  height: auto;
-}
-
-#shareList {
-  overflow-y: scroll;
-}
-
-@media (min-width: 930px) {
-  #shareList {
+@media (min-width: 916px) {
+  .share__box__items {
     height: calc(100vh - 9.8em);
     overflow-y: auto;
   }
diff --git a/frontend/src/views/files/FileListing.vue b/frontend/src/views/files/FileListing.vue
index 4d6f41eb..0a1bb991 100644
--- a/frontend/src/views/files/FileListing.vue
+++ b/frontend/src/views/files/FileListing.vue
@@ -161,48 +161,56 @@
         class="file-icons"
         :class="authStore.user?.viewMode ?? ''"
       >
-        <div>
-          <div class="item header">
-            <div></div>
-            <div>
-              <p
-                :class="{ active: nameSorted }"
-                class="name"
-                role="button"
-                tabindex="0"
-                @click="sort('name')"
-                :title="t('files.sortByName')"
-                :aria-label="t('files.sortByName')"
-              >
-                <span>{{ t("files.name") }}</span>
-                <i class="material-icons">{{ nameIcon }}</i>
-              </p>
+        <div
+          class="item header"
+          :style="
+            headerStickyTop
+              ? {
+                  position: 'sticky',
+                  top: headerStickyTop,
+                }
+              : {}
+          "
+        >
+          <div></div>
+          <div>
+            <p
+              :class="{ active: nameSorted }"
+              class="name"
+              role="button"
+              tabindex="0"
+              @click="sort('name')"
+              :title="t('files.sortByName')"
+              :aria-label="t('files.sortByName')"
+            >
+              <span>{{ t("files.name") }}</span>
+              <i class="material-icons">{{ nameIcon }}</i>
+            </p>
 
-              <p
-                :class="{ active: sizeSorted }"
-                class="size"
-                role="button"
-                tabindex="0"
-                @click="sort('size')"
-                :title="t('files.sortBySize')"
-                :aria-label="t('files.sortBySize')"
-              >
-                <span>{{ t("files.size") }}</span>
-                <i class="material-icons">{{ sizeIcon }}</i>
-              </p>
-              <p
-                :class="{ active: modifiedSorted }"
-                class="modified"
-                role="button"
-                tabindex="0"
-                @click="sort('modified')"
-                :title="t('files.sortByLastModified')"
-                :aria-label="t('files.sortByLastModified')"
-              >
-                <span>{{ t("files.lastModified") }}</span>
-                <i class="material-icons">{{ modifiedIcon }}</i>
-              </p>
-            </div>
+            <p
+              :class="{ active: sizeSorted }"
+              class="size"
+              role="button"
+              tabindex="0"
+              @click="sort('size')"
+              :title="t('files.sortBySize')"
+              :aria-label="t('files.sortBySize')"
+            >
+              <span>{{ t("files.size") }}</span>
+              <i class="material-icons">{{ sizeIcon }}</i>
+            </p>
+            <p
+              :class="{ active: modifiedSorted }"
+              class="modified"
+              role="button"
+              tabindex="0"
+              @click="sort('modified')"
+              :title="t('files.sortByLastModified')"
+              :aria-label="t('files.sortByLastModified')"
+            >
+              <span>{{ t("files.lastModified") }}</span>
+              <i class="material-icons">{{ modifiedIcon }}</i>
+            </p>
           </div>
         </div>
 
@@ -305,6 +313,9 @@ import {
 import { useRoute } from "vue-router";
 import { useI18n } from "vue-i18n";
 import { storeToRefs } from "pinia";
+const { headerStickyTop } = defineProps<{
+  headerStickyTop?: string;
+}>();
 
 const showLimit = ref<number>(50);
 const columnWidth = ref<number>(280);