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

View File

@ -966,7 +966,8 @@
"enter_workspace": "Enter workspace {{title}}" "enter_workspace": "Enter workspace {{title}}"
}, },
"file": { "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": { "protected_session": {
"enter_password_instruction": "Showing protected note requires entering your password:", "enter_password_instruction": "Showing protected note requires entering your password:",