feat(client/file): trim big files in order to improve performance

This commit is contained in:
Elian Doran 2025-02-19 13:41:05 +02:00
parent 4a34d5b2df
commit 61f2e35717
No known key found for this signature in database
2 changed files with 16 additions and 2 deletions

View File

@ -4,6 +4,8 @@ import { t } from "../../services/i18n.js";
import type { EventData } from "../../components/app_context.js";
import type FNote from "../../entities/fnote.js";
const TEXT_MAX_NUM_CHARS = 5000;
const TPL = `
<div class="note-detail-file note-detail-printable">
<style>
@ -29,6 +31,10 @@ const TPL = `
}
</style>
<div class="file-preview-too-big alert alert-info">
${t("file.too_big", { maxNumChars: TEXT_MAX_NUM_CHARS })}
</div>
<pre class="file-preview-content"></pre>
<div class="file-preview-not-available alert alert-info">
@ -46,6 +52,7 @@ export default class FileTypeWidget extends TypeWidget {
private $previewContent!: JQuery<HTMLElement>;
private $previewNotAvailable!: JQuery<HTMLElement>;
private $previewTooBig!: JQuery<HTMLElement>;
private $pdfPreview!: JQuery<HTMLElement>;
private $videoPreview!: JQuery<HTMLElement>;
private $audioPreview!: JQuery<HTMLElement>;
@ -58,6 +65,7 @@ export default class FileTypeWidget extends TypeWidget {
this.$widget = $(TPL);
this.$previewContent = this.$widget.find(".file-preview-content");
this.$previewNotAvailable = this.$widget.find(".file-preview-not-available");
this.$previewTooBig = this.$widget.find(".file-preview-too-big");
this.$pdfPreview = this.$widget.find(".pdf-preview");
this.$videoPreview = this.$widget.find(".video-preview");
this.$audioPreview = this.$widget.find(".audio-preview");
@ -73,12 +81,17 @@ export default class FileTypeWidget extends TypeWidget {
this.$previewContent.empty().hide();
this.$pdfPreview.attr("src", "").empty().hide();
this.$previewNotAvailable.hide();
this.$previewTooBig.hide();
this.$videoPreview.hide();
this.$audioPreview.hide();
if (blob?.content) {
this.$previewContent.show().scrollTop(0);
this.$previewContent.text(blob.content);
const trimmedContent = blob.content.substring(0, TEXT_MAX_NUM_CHARS);
if (trimmedContent.length !== blob.content.length) {
this.$previewTooBig.show();
}
this.$previewContent.text(trimmedContent);
} else if (note.mime === "application/pdf") {
this.$pdfPreview.show().attr("src", openService.getUrlForDownload(`api/notes/${this.noteId}/open`));
} else if (note.mime.startsWith("video/")) {

View File

@ -966,7 +966,8 @@
"enter_workspace": "Enter workspace {{title}}"
},
"file": {
"file_preview_not_available": "File preview is not available for this file format."
"file_preview_not_available": "File preview is not available for this file format.",
"too_big": "The preview only shows the first {{maxNumChars}} characters of the file for performance reasons. Download the file and open it externally to be able to see the entire content."
},
"protected_session": {
"enter_password_instruction": "Showing protected note requires entering your password:",