Merge pull request #3153 from charlesdagenais/master

improve "open" button behaviour for files when in browser

src/public/app/services/note_content_renderer.js

@@ -74,7 +74,7 @@ async function getRenderedContent(note, options = {}) {
         const $openButton = $('<button class="file-open btn btn-primary" type="button">Open</button>');
 
         $downloadButton.on('click', () => openService.downloadFileNote(note.noteId));
-        $openButton.on('click', () => openService.openNoteExternally(note.noteId));
+        $openButton.on('click', () => openService.openNoteExternally(note.noteId, note.mime));
 
         // open doesn't work for protected notes since it works through browser which isn't in protected session
         $openButton.toggle(!note.isProtected);

src/public/app/services/open.js

@@ -4,6 +4,9 @@ import server from "./server.js";
 function getFileUrl(noteId) {
     return getUrlForDownload("api/notes/" + noteId + "/download");
 }
+function getOpenFileUrl(noteId) {
+    return getUrlForDownload("api/notes/" + noteId + "/open");
+}
 
 function download(url) {
     if (utils.isElectron()) {
@@ -21,7 +24,7 @@ function downloadFileNote(noteId) {
     download(url);
 }
 
-async function openNoteExternally(noteId) {
+async function openNoteExternally(noteId, mime) {
     if (utils.isElectron()) {
         const resp = await server.post("notes/" + noteId + "/save-to-tmp-dir");
 
@@ -34,7 +37,13 @@ async function openNoteExternally(noteId) {
         }
     }
     else {
-        window.location.href = getFileUrl(noteId);
+        // allow browser to handle opening common file
+         if (mime === "application/pdf" ||  mime.startsWith("image") || mime.startsWith("audio") || mime.startsWith("video")){
+            window.open(getOpenFileUrl(noteId));
+        }
+         else {
+            window.location.href = getFileUrl(noteId);
+        }
     }
 }
 

src/public/app/services/root_command_executor.js

@@ -45,9 +45,10 @@ export default class RootCommandExecutor extends Component {
 
     openNoteExternallyCommand() {
         const noteId = appContext.tabManager.getActiveContextNoteId();
-
+        const mime = appContext.tabManager.getActiveContextNoteMime()
+        
         if (noteId) {
-            openService.openNoteExternally(noteId);
+            openService.openNoteExternally(noteId, mime);
         }
     }
 

src/public/app/services/tab_manager.js

@@ -197,6 +197,12 @@ export default class TabManager extends Component {
 
         return activeNote ? activeNote.type : null;
     }
+    /** @returns {string|null} */
+    getActiveContextNoteMime() {
+        const activeNote = this.getActiveContextNote();
+
+        return activeNote ? activeNote.mime : null;
+    }
 
     async switchToNoteContext(ntxId, notePath) {
         const noteContext = this.noteContexts.find(nc => nc.ntxId === ntxId)

src/public/app/widgets/ribbon_widgets/file_properties.js

@@ -90,7 +90,7 @@ export default class FilePropertiesWidget extends NoteContextAwareWidget {
         this.$uploadNewRevisionInput = this.$widget.find(".file-upload-new-revision-input");
 
         this.$downloadButton.on('click', () => openService.downloadFileNote(this.noteId));
-        this.$openButton.on('click', () => openService.openNoteExternally(this.noteId));
+        this.$openButton.on('click', () => openService.openNoteExternally(this.noteId, this.note.mime));
 
         this.$uploadNewRevisionButton.on("click", () => {
             this.$uploadNewRevisionInput.trigger("click");

src/public/app/widgets/ribbon_widgets/image_properties.js

@@ -69,7 +69,7 @@ export default class ImagePropertiesWidget extends NoteContextAwareWidget {
         this.$fileSize = this.$widget.find(".image-filesize");
 
         this.$openButton = this.$widget.find(".image-open");
-        this.$openButton.on('click', () => openService.openNoteExternally(this.noteId));
+        this.$openButton.on('click', () => openService.openNoteExternally(this.noteId, this.note.mime ));
 
         this.$imageDownloadButton = this.$widget.find(".image-download");
         this.$imageDownloadButton.on('click', () => openService.downloadFileNote(this.noteId));