feat(file): display videos in full width

This commit is contained in:
Elian Doran 2025-02-26 19:30:16 +02:00
parent 07c2342b7b
commit e330d91df2
No known key found for this signature in database
2 changed files with 14 additions and 1 deletions

View File

@ -63,7 +63,7 @@ export default class NoteWrapperWidget extends FlexContainer<BasicWidget> {
return true; return true;
} }
if (note.type === "file" && note.mime === "application/pdf") { if (note.type === "file" && (note.mime === "application/pdf" || note.mime.startsWith("video/"))) {
return true; return true;
} }

View File

@ -22,6 +22,10 @@ const TPL = `
padding: 0; padding: 0;
} }
.note-split.full-content-width .note-detail-file[data-preview-type="video"] {
overflow: hidden;
}
.file-preview-content { .file-preview-content {
background-color: var(--accented-background-color); background-color: var(--accented-background-color);
padding: 15px; padding: 15px;
@ -90,6 +94,8 @@ export default class FileTypeWidget extends TypeWidget {
this.$videoPreview.hide(); this.$videoPreview.hide();
this.$audioPreview.hide(); this.$audioPreview.hide();
let previewType: string;
if (blob?.content) { if (blob?.content) {
this.$previewContent.show().scrollTop(0); this.$previewContent.show().scrollTop(0);
const trimmedContent = blob.content.substring(0, TEXT_MAX_NUM_CHARS); const trimmedContent = blob.content.substring(0, TEXT_MAX_NUM_CHARS);
@ -97,23 +103,30 @@ export default class FileTypeWidget extends TypeWidget {
this.$previewTooBig.removeClass("hidden-ext"); this.$previewTooBig.removeClass("hidden-ext");
} }
this.$previewContent.text(trimmedContent); this.$previewContent.text(trimmedContent);
previewType = "text";
} 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`));
previewType = "pdf";
} else if (note.mime.startsWith("video/")) { } else if (note.mime.startsWith("video/")) {
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() ?? 0); .css("width", this.$widget.width() ?? 0);
previewType = "video";
} 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() ?? 0); .css("width", this.$widget.width() ?? 0);
previewType = "audio";
} else { } else {
this.$previewNotAvailable.show(); this.$previewNotAvailable.show();
previewType = "not-available";
} }
this.$widget.attr("data-preview-type", previewType ?? "");
} }
async entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) { async entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) {