feat: now clicking on a title will launch a file preview (close #22)

songquanpeng · May 12, 2023 · 97e1a09 · 97e1a09
1 parent dc37744
commit 97e1a09
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 5 deletions.
diff --git a/common/public/index.html b/common/public/index.html
@@ -40,19 +40,19 @@
                     <article class="media">
                         <div class="media-content">
                             <div class="content">
-                                <div class="page-card-title"><a download="{{$file.Filename}}"
-                                                                href="/upload/{{$file.Link}}">{{$file.Filename}}</a>
+                                <div class="page-card-title">
+                                    <a onclick="displayFile('/upload/{{$file.Link}}')">{{$file.Filename}}</a>
                                 </div>
                                 <span class="tag is-light">{{$file.Uploader}}</span>
                                 <span class="tag is-light">{{$file.Time}}</span>
                                 <span class="tag is-light"
                                       id="counter-{{$file.Id}}">{{$file.DownloadCounter}} 次下载</span>
                                 <div class="page-card-text">
-                                {{if $file.Description}}
+                                    {{if $file.Description}}
                                     {{$file.Description}}
-                                {{else}}
+                                    {{else}}
                                     无描述信息
-                                {{end}}
+                                    {{end}}
                                 </div>
                                 <div class="actions">
                                     {{if $.username}}

diff --git a/common/public/modal.html b/common/public/modal.html
@@ -56,4 +56,21 @@ <h3 class="title is-5" id="uploadFileDialogTitle">选择文件或者拖拽文件
         </div>
     </div>
 </div>
+
+<div class="modal" id="displayModal">
+    <div class="modal-background" onclick="closeModal('displayModal')"></div>
+    <div class="modal-content">
+        <div class="box">
+            <article class="media">
+                <div class="media-content">
+                    <div class="content">
+                        <div class="page-card-title" id="displayModalTitle"></div>
+                        <div class="page-card-text center-container" id="displayModalContent">
+                        </div>
+                    </div>
+                </div>
+            </article>
+        </div>
+    </div>
+</div>
 {{end}}
diff --git a/common/public/static/app.css b/common/public/static/app.css
@@ -313,4 +313,10 @@ span.line {
 
 #videoPlayer {
     max-height: 70vh !important;
+}
+
+.center-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
diff --git a/common/public/static/main.js b/common/public/static/main.js
@@ -458,6 +458,56 @@ async function generateNewToken() {
     }
 }
 
+function isMobile() {
+    return window.innerWidth <= 768;
+}
+
+function getFileExt(link) {
+    let parts = link.split('.');
+    if (parts.length === 1) return "";
+    return parts[parts.length - 1].toLowerCase();
+}
+
+function getFilename(link) {
+    let parts = link.split('/');
+    return parts[parts.length - 1];
+}
+
+function displayFile(link) {
+    // TODO: text file preview support
+    let ext = getFileExt(link);
+    let filename = getFilename(link);
+    console.log(link, ext, filename)
+    document.getElementById("displayModalTitle").innerText = filename;
+    if (ext === "mp3" || ext === "wav" || ext === "ogg") {
+        document.getElementById("displayModalContent").innerHTML = `
+        <audio controls>
+            <source src="${link}" type="audio/${ext}">
+        </audio>`;
+    } else if (ext === "mp4" || ext === "webm" || ext === "ogv") {
+        document.getElementById("displayModalContent").innerHTML = `
+        <video controls style="width: 100%">
+            <source src="${link}" type="video/${ext}">
+        </video>`;
+    } else if (ext === "png" || ext === "jpg" || ext === "jpeg" || ext === "gif") {
+        document.getElementById("displayModalContent").innerHTML = `
+        <img src="${link}" alt="${filename}" width="100%">`;
+    } else if (ext === "pdf") {
+        if (isMobile()) {
+            window.open(link);
+            return;
+        }
+        document.getElementById("displayModalContent").innerHTML = `
+        <div style="width:100%; height: 600px!important;">
+            <iframe src="${link}" width="100%" height="100%"></iframe>
+        </div>`;
+    } else {
+        window.open(link);
+        return;
+    }
+    showModal("displayModal");
+}
+
 function init() {
     const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
     if ($navbarBurgers.length > 0) {