Desktop: Fixes #11939: Import audio from OneNote as file links (#11942)

2025-03-08 08:49:20 -03:00 · 2025-03-08 08:49:20 -03:00 · 1f192696de
parent ab86b95fad
commit 1f192696de
4 changed files with 158 additions and 2 deletions
--- a/packages/app-cli/tests/support/onenote/note_with_audio_embedded.zip
+++ b/packages/app-cli/tests/support/onenote/note_with_audio_embedded.zip
--- a/packages/lib/services/interop/InteropService_Importer_OneNote.test.ts
+++ b/packages/lib/services/interop/InteropService_Importer_OneNote.test.ts
@ -220,4 +220,17 @@ describe('InteropService_Importer_OneNote', () => {
 		}
 		BaseModel.setIdGenerator(originalIdGenerator);
 	});
+
+	skipIfNotCI('should render audio as links to resource', async () => {
+		let idx = 0;
+		const originalIdGenerator = BaseModel.setIdGenerator(() => String(idx++));
+		const notes = await importNote(`${supportDir}/onenote/note_with_audio_embedded.zip`);
+
+		expect(notes.length).toBe(2);
+
+		for (const note of notes) {
+			expect(note.body).toMatchSnapshot(note.title);
+		}
+		BaseModel.setIdGenerator(originalIdGenerator);
+	});
 });
--- a/packages/lib/services/interop/snapshots/InteropService_Importer_OneNote.test.js.snap
+++ b/packages/lib/services/interop/snapshots/InteropService_Importer_OneNote.test.js.snap
@ -1166,6 +1166,148 @@ exports[`InteropService_Importer_OneNote should remove hyperlink from title: 风
 </html>"
 `;

+exports[`InteropService_Importer_OneNote should render audio as links to resource: My title 1`] = `
+"<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>My title</title>
+    <style>
+    * { margin: 0; padding: 0; font-weight: normal; }
+    table, tr, td { border-color: #A3A3A3; }
+    ul, ol { padding: 0; }
+    .title .outline-element { display: inline; }
+    .title .outline-element:nth-child(2) { margin-left: 10px !important; }
+    .container-outline { font-family: Calibri, sans-serif; font-size: 6pt; }
+    .ink-text, .ink-space { display: inline-block; position: relative; vertical-align: bottom; }
+    .ink-text { top: 0; left: 0; }
+    .note-tag-icon { position: relative; }
+    .note-tag-icon > svg { position: absolute; }
+    .icon-secondary > svg { position: absolute; fill: black; filter: drop-shadow(0 0 2px white); height: 12px; top: -1px; }
+    .icon-secondary > .content { position: absolute; color: black; filter: drop-shadow(0 0 2px white); font-size: 10px; color: black; top: -1px; user-select: none; }
+
+    
+    </style>
+</head>
+<body>
+
+<div class="title" style="left: 48px; position: absolute; top: 24px;"><div class="container-outline" style="width: 624px;"><div class="outline-element" style="margin-left: 0px;"><span style="font-family: Calibri Light; font-size: 20pt;">My title</span></div>
+</div><div class="container-outline"><div class="outline-element" style="margin-left: 0px;"><span style="color: rgb(128,128,128); font-family: Calibri; font-size: 10pt;">Friday, March 7, 2025</span></div>
+<div class="outline-element" style="margin-left: 0px;"><span style="color: rgb(128,128,128); font-family: Calibri; font-size: 10pt;">11:16 AM</span></div>
+</div></div><div class="container-outline" style="left: 48px; position: absolute; top: 115px; width: 624px;"><div class="outline-element" style="margin-left: 0px;"><p style="font-size: 11pt; line-height: 17px;"><a href=":/5">Audio Recording.wav</a></p></div>
+<div class="outline-element" style="margin-left: 0px;"><p style="font-family: Calibri; font-size: 11pt;">&nbsp;</p></div>
+</div><div class="container-outline" style="left: 245px; position: absolute; top: 166px; width: 624px;"><div class="outline-element" style="margin-left: 0px;"><p style="font-family: Calibri; font-size: 11pt;">&nbsp;</p></div>
+<div class="outline-element" style="margin-left: 0px;"><p style="font-family: Calibri; font-size: 11pt;">&nbsp;</p></div>
+</div><div class="container-outline" style="left: 61px; position: absolute; top: 304px; width: 624px;"><div class="outline-element" style="margin-left: 0px;"><p style="font-family: Calibri; font-size: 11pt;">Some text here</p></div>
+</div><div class="container-outline" style="left: 240px; position: absolute; top: 373px; width: 624px;"><div class="outline-element" style="margin-left: 0px;"><p style="font-family: Calibri; font-size: 11pt;">&nbsp;</p></div>
+</div>
+
+<script>
+    if (window.parent !== null) {
+        window.parent.postMessage(window.location.href, '*');
+    }
+</script>
+</body>
+</html>"
+`;
+
+exports[`InteropService_Importer_OneNote should render audio as links to resource: Quick Notes 1`] = `
+"<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Quick Notes</title>
+    <style>
+        html, body { margin: 0; padding: 0; }
+
+        body {
+            display: flex;
+        }
+
+        nav {
+            height: 100vh;
+            min-width: 200px;
+            max-width: 300px;
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+            border-right: 1px solid rgb(235, 235, 235);
+        }
+
+        nav ul {
+            padding: 0;
+            margin: 0;
+            overflow-y: auto;
+            height: 100%;
+        }
+
+        nav li {
+            padding: 10px 20px;
+            border-bottom: 1px solid rgb(235, 235, 235);
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: nowrap;
+        }
+
+        nav li.active {
+            background-color: rgb(233, 233, 233);
+        }
+
+        nav a {
+            color: black;
+            text-decoration: none;
+        }
+
+        .content {
+            flex: 1;
+        }
+    </style>
+</head>
+<body>
+
+<nav>
+    <ul>
+        
+        <li class="l1"><a href=":/3" target="content" title="My title">My title</a></li>
+        
+    </ul>
+</nav>
+<iframe src="" frameborder="0" name="content" class="content"></iframe>
+
+<style>
+    .l2 { padding: 10px 20px 10px 40px }
+    .l3 { padding: 10px 20px 10px 60px }
+    .l4 { padding: 10px 20px 10px 80px }
+    .l5 { padding: 10px 20px 10px 100px }
+</style>
+<script>
+    document.addEventListener('click', function (event) {
+        // If the clicked element doesn't have the right selector, bail
+        if (!event.target.matches('nav a')) return;
+        for (const child of event.target.parentElement.parentElement.children) {
+            child.classList.remove('active');
+        }
+        event.target.parentElement.classList.add('active');
+
+    }, false);
+
+    window.addEventListener('message', (event) => {
+        const activeTarget = event.data;
+
+        for (const link of document.querySelectorAll('nav ul li a')) {
+            if (link.href === activeTarget) {
+                link.parentElement.classList.add('active');
+            }
+        }
+    });
+
+    if (window.parent !== null) {
+        window.parent.postMessage(window.location.href, '*');
+    }
+</script>
+
+</body>
+</html>"
+`;
+
 exports[`InteropService_Importer_OneNote should render links properly by ignoring wrongly set indices when the first character is a hyperlink marker: Is Mexico safe for shooting Street Photography 1`] = `
 "<!DOCTYPE html>
 <html lang="en">
--- a/packages/onenote-converter/src/page/embedded_file.rs
+++ b/packages/onenote-converter/src/page/embedded_file.rs
@ -22,9 +22,10 @@ impl<'a> Renderer<'a> {
        let file_type = Self::guess_type(file);

        match file_type {
-            FileType::Audio => content = format!("<audio controls src=\"{}\"></audio>", filename),
+            // TODO: we still don't have support for the audio tag on html notes https://github.com/laurent22/joplin/issues/11939
+            // FileType::Audio => content = format!("<audio class=\"media-player media-audio\"controls><source src=\"{}\" type=\"audio/x-wav\"></source></audio>", filename),
            FileType::Video => content = format!("<video controls src=\"{}\"></video>", filename),
-            FileType::Unknown => {
+            FileType::Unknown | FileType::Audio => {
                content = format!(
                    "<p style=\"font-size: 11pt; line-height: 17px;\"><a href=\"{}\">{}</a></p>",
                    filename, filename