frontend/src/css/listing.css

@@ -195,6 +195,10 @@ html[dir="rtl"] #listing {
   align-items: center;
 }
 
+#listing.list .item p.name:not(#listing.list .item.header .name) {
+  margin-right: -3em;
+}
+
 #listing.list .item .name {
   width: 50%;
 }
@@ -223,18 +227,18 @@ html[dir="rtl"] #listing {
   border-bottom: 1px solid var(--borderPrimary);
 }
 
-#listing.list .item.header > div {
+#listing.list .item.header > div:first-child {
-  width: 100%;
+  width: 0;
-}
-
-#listing.list .item.header .name {
-  margin-right: 3em;
 }
 
 #listing.list .header a {
   color: inherit;
 }
 
+#listing.list .item.header > div:first-child {
+  width: 0;
+}
+
 #listing.list .name {
   font-weight: normal;
   word-wrap: break-word;

frontend/src/views/files/FileListing.vue

@@ -162,6 +162,7 @@
       >
         <div>
           <div class="item header">
+            <div></div>
             <div>
               <p
                 :class="{ active: nameSorted }"

frontend/src/views/files/Preview.vue

@@ -60,7 +60,7 @@
         <div v-if="isEpub" class="epub-reader">
           <vue-reader
             :location="location"
-            :url="previewUrl"
+            :url="raw"
             :get-rendition="getRendition"
             :epubInitOptions="{
               requestCredentials: true,
@@ -87,14 +87,11 @@
             <span>{{ size }}%</span>
           </div>
         </div>
-        <ExtendedImage
+        <ExtendedImage v-else-if="fileStore.req?.type == 'image'" :src="raw" />
-          v-else-if="fileStore.req?.type == 'image'"
-          :src="previewUrl"
-        />
         <audio
           v-else-if="fileStore.req?.type == 'audio'"
           ref="player"
-          :src="previewUrl"
+          :src="raw"
           controls
           :autoplay="autoPlay"
           @play="autoPlay = true"
@@ -102,12 +99,12 @@
         <VideoPlayer
           v-else-if="fileStore.req?.type == 'video'"
           ref="player"
-          :source="previewUrl"
+          :source="raw"
           :subtitles="subtitles"
           :options="videoOptions"
         >
         </VideoPlayer>
-        <object v-else-if="isPdf" class="pdf" :data="previewUrl"></object>
+        <object v-else-if="isPdf" class="pdf" :data="raw"></object>
         <div v-else-if="fileStore.req?.type == 'blob'" class="info">
           <div class="title">
             <i class="material-icons">feedback</i>
@@ -122,7 +119,7 @@
             </a>
             <a
               target="_blank"
-              :href="previewUrl"
+              :href="raw"
               class="button button--flat"
               v-if="!fileStore.req?.isDir"
             >
@@ -259,20 +256,16 @@ const downloadUrl = computed(() =>
   fileStore.req ? api.getDownloadURL(fileStore.req, false) : ""
 );
 
-const previewUrl = computed(() => {
+const raw = computed(() => {
-  if (!fileStore.req) {
+  if (fileStore.req?.type === "image" && !fullSize.value) {
-    return "";
-  }
-
-  if (fileStore.req.type === "image" && !fullSize.value) {
     return api.getPreviewURL(fileStore.req, "big");
   }
 
   if (isEpub.value) {
-    return createURL("api/raw" + fileStore.req.path, {});
+    return createURL("api/raw" + fileStore.req?.path, {});
   }
 
-  return api.getDownloadURL(fileStore.req, true);
+  return downloadUrl.value;
 });
 
 const isPdf = computed(() => fileStore.req?.extension.toLowerCase() == ".pdf");