chore(client/ts): port file

This commit is contained in:
Elian Doran 2025-02-08 22:01:21 +02:00
parent 659e551cdd
commit 90ca4e923e
No known key found for this signature in database

View File

@ -1,6 +1,8 @@
import openService from "../../services/open.js"; import openService from "../../services/open.js";
import TypeWidget from "./type_widget.js"; import TypeWidget from "./type_widget.js";
import { t } from "../../services/i18n.js"; import { t } from "../../services/i18n.js";
import type { EventData } from "../../components/app_context.js";
import type FNote from "../../entities/fnote.js";
const TPL = ` const TPL = `
<div class="note-detail-file note-detail-printable"> <div class="note-detail-file note-detail-printable">
@ -8,7 +10,7 @@ const TPL = `
.type-file .note-detail { .type-file .note-detail {
height: 100%; height: 100%;
} }
.note-detail-file { .note-detail-file {
padding: 10px; padding: 10px;
height: 100%; height: 100%;
@ -22,21 +24,28 @@ const TPL = `
margin: 10px; margin: 10px;
} }
</style> </style>
<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">
${t("file.file_preview_not_available")} ${t("file.file_preview_not_available")}
</div> </div>
<iframe class="pdf-preview" style="width: 100%; height: 100%; flex-grow: 100;"></iframe> <iframe class="pdf-preview" style="width: 100%; height: 100%; flex-grow: 100;"></iframe>
<video class="video-preview" controls></video> <video class="video-preview" controls></video>
<audio class="audio-preview" controls></audio> <audio class="audio-preview" controls></audio>
</div>`; </div>`;
export default class FileTypeWidget extends TypeWidget { export default class FileTypeWidget extends TypeWidget {
private $previewContent!: JQuery<HTMLElement>;
private $previewNotAvailable!: JQuery<HTMLElement>;
private $pdfPreview!: JQuery<HTMLElement>;
private $videoPreview!: JQuery<HTMLElement>;
private $audioPreview!: JQuery<HTMLElement>;
static getType() { static getType() {
return "file"; return "file";
} }
@ -52,10 +61,10 @@ export default class FileTypeWidget extends TypeWidget {
super.doRender(); super.doRender();
} }
async doRefresh(note) { async doRefresh(note: FNote) {
this.$widget.show(); this.$widget.show();
const blob = await this.note.getBlob(); const blob = await this.note?.getBlob();
this.$previewContent.empty().hide(); this.$previewContent.empty().hide();
this.$pdfPreview.attr("src", "").empty().hide(); this.$pdfPreview.attr("src", "").empty().hide();
@ -63,7 +72,7 @@ export default class FileTypeWidget extends TypeWidget {
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); this.$previewContent.text(blob.content);
} else if (note.mime === "application/pdf") { } else if (note.mime === "application/pdf") {
@ -72,20 +81,20 @@ export default class FileTypeWidget extends TypeWidget {
this.$videoPreview this.$videoPreview
.show() .show()
.attr("src", openService.getUrlForDownload(`api/notes/${this.noteId}/open-partial`)) .attr("src", openService.getUrlForDownload(`api/notes/${this.noteId}/open-partial`))
.attr("type", this.note.mime) .attr("type", this.note?.mime ?? "")
.css("width", this.$widget.width()); .css("width", this.$widget.width() ?? 0);
} else if (note.mime.startsWith("audio/")) { } else if (note.mime.startsWith("audio/")) {
this.$audioPreview this.$audioPreview
.show() .show()
.attr("src", openService.getUrlForDownload(`api/notes/${this.noteId}/open-partial`)) .attr("src", openService.getUrlForDownload(`api/notes/${this.noteId}/open-partial`))
.attr("type", this.note.mime) .attr("type", this.note?.mime ?? "")
.css("width", this.$widget.width()); .css("width", this.$widget.width() ?? 0);
} else { } else {
this.$previewNotAvailable.show(); this.$previewNotAvailable.show();
} }
} }
async entitiesReloadedEvent({ loadResults }) { async entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) {
if (loadResults.isNoteReloaded(this.noteId)) { if (loadResults.isNoteReloaded(this.noteId)) {
this.refresh(); this.refresh();
} }