From edd1ca9200e2e12aba13505ac2358b16619e3e16 Mon Sep 17 00:00:00 2001
From: TheNonPirate <thenonpirate@gmail.com>
Date: Thu, 11 Jun 2026 12:08:15 -0600
Subject: [PATCH 01/12] Initial work on audio export Currently it downloads
 rather than sharing the audio.

---
 src/lib/components/ShareSelector.svelte       | 182 ++++++++++++++++++
 .../components/TextSelectionToolbar.svelte    |  37 ++--
 src/lib/components/VerseOnImage.svelte        |   2 +-
 src/routes/+layout.svelte                     |   2 +
 4 files changed, 206 insertions(+), 17 deletions(-)
 create mode 100644 src/lib/components/ShareSelector.svelte

diff --git a/src/lib/components/ShareSelector.svelte b/src/lib/components/ShareSelector.svelte
new file mode 100644
index 000000000..ff5db9c2a
--- /dev/null
+++ b/src/lib/components/ShareSelector.svelte
@@ -0,0 +1,182 @@
+<!--
+@component
+A component for verse-on-image providing a dropdown where you can choose to download an image or a video
+-->
+
+<script lang="ts">
+    import { scriptureConfig } from '$assets/config';
+    import { getBook, logShareContent } from '$lib/data/analytics';
+    import { getAudioSourceInfo } from '$lib/data/audio';
+    import { shareText } from '$lib/data/share';
+    import { refs, selectedVerses, t } from '$lib/data/stores';
+    import { AudioIcon } from '$lib/icons';
+    import FormatAlignLeftIcon from '$lib/icons/image/FormatAlignLeftIcon.svelte';
+    import {
+        AudioBufferSource,
+        BufferTarget,
+        canEncodeAudio,
+        Mp4OutputFormat,
+        Output,
+        WebMOutputFormat
+    } from 'mediabunny';
+    import type { AudioEncodingConfig } from 'mediabunny';
+    import Modal from './Modal.svelte';
+
+    let { vertOffset = '1rem' } = $props();
+    const reference = $derived(selectedVerses.getCompositeReference());
+    async function shareSelectedText() {
+        const book = $selectedVerses[0].book;
+        const reference = selectedVerses.getCompositeReference();
+        const text = await selectedVerses.getCompositeText();
+        const bookCol = $selectedVerses[0].collection;
+        const fullBook = getBook({ collection: bookCol, book: book });
+        const bookAbbrev = fullBook?.abbreviation ?? fullBook?.name;
+        shareText(
+            scriptureConfig.name ?? '',
+            scriptureConfig.name + '\n\n' + text + '\n' + reference,
+            book + '.txt'
+        );
+        logShareContent('Text', bookCol, bookAbbrev ?? '', reference);
+    }
+    async function shareAudio() {
+        const audioCtx = new AudioContext();
+        try {
+            const audioConfig: AudioEncodingConfig = await pickSupportedAudioConfig();
+            const useWebm = audioConfig.codec === 'opus';
+            const output = new Output({
+                format: useWebm ? new WebMOutputFormat() : new Mp4OutputFormat(),
+                target: new BufferTarget()
+            });
+
+            const audioSourceInfo = await getAudioSourceInfo({
+                collection: $refs.collection,
+                book: $refs.book,
+                chapter: $refs.chapter
+            });
+            if (!audioSourceInfo?.source) {
+                throw new Error('No audio source available for this chapter');
+            }
+
+            const audioSource = new AudioBufferSource(audioConfig);
+            output.addAudioTrack(audioSource);
+            await output.start();
+
+            const audioBlob = await fetch(audioSourceInfo?.source).then((r) => r.blob());
+            const audioBuffer = await audioCtx.decodeAudioData(await audioBlob.arrayBuffer());
+
+            const sampleRate = audioBuffer.sampleRate;
+
+            for (let i = 0; i < $selectedVerses.length; i++) {
+                let startFrame = 0;
+                let endFrame = 0;
+                for (var j = 0; j < (audioSourceInfo?.timing?.length || 0); j++) {
+                    const timing = audioSourceInfo?.timing?.[j];
+                    const verse = timing?.tag?.replace(/\D/g, '');
+                    if (verse === $selectedVerses[i].verse) {
+                        if (!startFrame) {
+                            startFrame = Math.floor((timing?.starttime || 0) * sampleRate);
+                            endFrame = Math.floor((timing?.endtime || 0) * sampleRate);
+                        } else {
+                            endFrame = Math.floor((timing?.endtime || 0) * sampleRate);
+                        }
+                    }
+                }
+                if (endFrame <= startFrame) {
+                    console.warn(`No timing found for verse ${$selectedVerses[i].verse}, skipping`);
+                    continue;
+                }
+                const trimmedBuffer = audioCtx.createBuffer(
+                    audioBuffer.numberOfChannels,
+                    endFrame - startFrame,
+                    sampleRate
+                );
+
+                for (let ch = 0; ch < audioBuffer.numberOfChannels; ch++) {
+                    const src = audioBuffer.getChannelData(ch);
+                    const dst = trimmedBuffer.getChannelData(ch);
+                    dst.set(src.slice(startFrame, endFrame));
+                }
+
+                await audioSource.add(trimmedBuffer);
+            }
+            await output.finalize();
+
+            const buffer = output.target.buffer as BlobPart;
+            const blob = new Blob([buffer], {
+                type: useWebm ? 'audio/webm' : 'audio/mp4'
+            });
+            const filename = reference + (useWebm ? '.webm' : '.mp4');
+            const file = new File([blob], filename, {
+                type: useWebm ? 'audio/webm' : 'audio/mp4'
+            });
+            const url = URL.createObjectURL(file);
+
+            const anchor = document.createElement('a');
+            anchor.href = url;
+            anchor.download = filename;
+            anchor.click();
+
+            URL.revokeObjectURL(url);
+        } catch (error) {
+            console.error('Error generating audio export:', error);
+        } finally {
+            await audioCtx?.close();
+        }
+    } //I'll need to have it share it rather than downloading it.
+    async function pickSupportedAudioConfig() {
+        const candidates: AudioEncodingConfig[] = [
+            { codec: 'aac', bitrate: 128000 },
+            { codec: 'aac', bitrate: 96000 },
+            { codec: 'aac', bitrate: 64000 },
+            {
+                codec: 'opus',
+                bitrate: 96000
+            }
+        ];
+
+        for (const cfg of candidates) {
+            if (await canEncodeAudio(cfg.codec, cfg)) {
+                return cfg;
+            }
+        }
+
+        throw new Error('No supported AAC configuration found.');
+    } //This is used to determine a supported audio configuration. It first tries AAC, but then falls back to opus if AAC isn't supported. This is a duplicate of the function with the same name in VerseOnImage.svelte, so maybe it should be moved to somewhere that exports it for any place that needs it to use it?
+    let modalId = 'shareSelector';
+    let modalThis: Modal;
+    export function showModal() {
+        modalThis.showModal();
+    }
+    const positioningCSS = $derived(
+        'position:absolute; bottom:' +
+            (Number(vertOffset.replace('rem', '')) + 1) +
+            'rem; inset-inline-end:1rem; width:auto;'
+    );
+</script>
+
+<!-- svelte-ignore a11y_consider_explicit_label -->
+<Modal bind:this={modalThis} id={modalId} addCSS={positioningCSS}>
+    <div class="grid gap-2 m-2">
+        <button
+            class="dy-btn dy-btn-sm flex items-center justify-center gap-2"
+            onclick={() => shareSelectedText()}
+        >
+            <FormatAlignLeftIcon />
+            {$t['Share_Text']}
+        </button>
+        <button
+            class="dy-btn dy-btn-sm flex items-center justify-center gap-2"
+            onclick={() => shareAudio()}
+        >
+            <AudioIcon.Volume />
+            {$t['Share_Audio']}
+        </button>
+        <!--<button
+            class="dy-btn dy-btn-sm flex items-center justify-center gap-2"
+            onclick={() => downloadVideo()}
+        >
+            <VideoIcon />
+            {$t['Share_Video']}
+        </button>-->
+    </div>
+</Modal>
diff --git a/src/lib/components/TextSelectionToolbar.svelte b/src/lib/components/TextSelectionToolbar.svelte
index 9b4670b93..cae8cf51f 100644
--- a/src/lib/components/TextSelectionToolbar.svelte
+++ b/src/lib/components/TextSelectionToolbar.svelte
@@ -7,7 +7,6 @@ TODO:
  -> Share
  -> Play
  -> Play Repeat
- -> Verse On Image
 - Add note dialog
 - Add highlight colors
 -->
@@ -21,6 +20,8 @@ TODO:
     import { shareText } from '$lib/data/share';
     import {
         audioActive,
+        modal,
+        ModalType,
         refs,
         s,
         selectedVerses,
@@ -136,21 +137,25 @@ TODO:
     }
 
     async function shareSelectedText() {
-        const book = $selectedVerses[0].book;
-        const reference = selectedVerses.getCompositeReference();
-        const text = await selectedVerses.getCompositeText();
-        const bookCol = $selectedVerses[0].collection;
-        const fullBook = getBook({ collection: bookCol, book: book });
-        const bookAbbrev = fullBook?.abbreviation ?? fullBook?.name;
-        const copyShareMessage = scriptureConfig.bookCollections?.find(
-            (x) => x.id === bookCol
-        )?.copyShareMessage;
-        shareText(
-            scriptureConfig.name ?? '',
-            text + '\n' + reference + (copyShareMessage ? '\n' + copyShareMessage : ''),
-            book + '.txt'
-        );
-        logShareContent('Text', bookCol, bookAbbrev ?? '', reference);
+        if ($refs.hasAudio?.timingFile) {
+            modal.open(ModalType.Share);
+        } else {
+            const book = $selectedVerses[0].book;
+            const reference = selectedVerses.getCompositeReference();
+            const text = await selectedVerses.getCompositeText();
+            const bookCol = $selectedVerses[0].collection;
+            const fullBook = getBook({ collection: bookCol, book: book });
+            const bookAbbrev = fullBook?.abbreviation ?? fullBook?.name;
+            const copyShareMessage = scriptureConfig.bookCollections?.find(
+                (x) => x.id === bookCol
+            )?.copyShareMessage;
+            shareText(
+                scriptureConfig.name ?? '',
+                text + '\n' + reference + (copyShareMessage ? '\n' + copyShareMessage : ''),
+                book + '.txt'
+            );
+            logShareContent('Text', bookCol, bookAbbrev ?? '', reference);
+        }
     }
 
     const backgroundColor = $derived($s['ui.bar.text-select']['background-color']);
diff --git a/src/lib/components/VerseOnImage.svelte b/src/lib/components/VerseOnImage.svelte
index e8a22c975..880124d49 100644
--- a/src/lib/components/VerseOnImage.svelte
+++ b/src/lib/components/VerseOnImage.svelte
@@ -647,7 +647,7 @@ The verse on image component.
             downloadProgress = 0;
             await audioCtx?.close();
         }
-    } //Most of this is AI-generated, so serious testing is needed. I've done a lot of testing, but it would be good to make sure there aren't subtle problems with this code.
+    }
 
     // EditorTabs centering feature:
 
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 251968cc8..6af6d722f 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -9,6 +9,7 @@
     import FontSelector from '$lib/components/FontSelector.svelte';
     import NoteDialog from '$lib/components/NoteDialog.svelte';
     import PlanStopDialog from '$lib/components/PlanStopDialog.svelte';
+    import ShareSelector from '$lib/components/ShareSelector.svelte';
     import Sidebar from '$lib/components/Sidebar.svelte';
     import TextAppearanceSelector from '$lib/components/TextAppearanceSelector.svelte';
     import catalog from '$lib/data/catalogData';
@@ -109,6 +110,7 @@
 
     let textAppearanceSelector: TextAppearanceSelector | undefined = $state();
     let fontSelector: FontSelector | undefined = $state();
+    let shareSelector: ShareSelector | undefined = $state();
     let noteDialog: NoteDialog | undefined = $state();
     let collectionModal: CollectionModal | undefined = $state();
     let planStopDialog: PlanStopDialog | undefined = $state(undefined);

From 233b51f77c61936b3da27826f047dcc7e0ddc548 Mon Sep 17 00:00:00 2001
From: TheNonPirate <thenonpirate@gmail.com>
Date: Thu, 11 Jun 2026 15:30:33 -0600
Subject: [PATCH 02/12] Caused it to share rather than downloading audio Audio
 will be downloaded if sharing fails, which occurs on most browsers.

---
 src/lib/components/ShareSelector.svelte | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/src/lib/components/ShareSelector.svelte b/src/lib/components/ShareSelector.svelte
index ff5db9c2a..82caf1bd4 100644
--- a/src/lib/components/ShareSelector.svelte
+++ b/src/lib/components/ShareSelector.svelte
@@ -109,6 +109,23 @@ A component for verse-on-image providing a dropdown where you can choose to down
             const file = new File([blob], filename, {
                 type: useWebm ? 'audio/webm' : 'audio/mp4'
             });
+            try {
+                if (
+                    navigator.share &&
+                    navigator.canShare &&
+                    navigator.canShare({ files: [file] })
+                ) {
+                    let verses = await selectedVerses.getCompositeText();
+                    const shareData: ShareData = { title: reference, text: verses, files: [file] };
+
+                    await navigator.share(shareData);
+                    return;
+                }
+            } catch (error) {
+                console.error('Error sharing: ', error);
+            }
+
+            // if we're here, we failed to share, so we'll try to use the download link
             const url = URL.createObjectURL(file);
 
             const anchor = document.createElement('a');

From d2c0001f4dad95822be6fdec5febbd146ea9f928 Mon Sep 17 00:00:00 2001
From: TheNonPirate <thenonpirate@gmail.com>
Date: Thu, 11 Jun 2026 15:46:10 -0600
Subject: [PATCH 03/12] Prevent aborted share from causing download

---
 src/lib/components/ShareSelector.svelte | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/lib/components/ShareSelector.svelte b/src/lib/components/ShareSelector.svelte
index 82caf1bd4..76986feb5 100644
--- a/src/lib/components/ShareSelector.svelte
+++ b/src/lib/components/ShareSelector.svelte
@@ -122,6 +122,9 @@ A component for verse-on-image providing a dropdown where you can choose to down
                     return;
                 }
             } catch (error) {
+                if ((error as { name?: string })?.name === 'AbortError') {
+                    return; // user intentionally dismissed native share UI
+                }
                 console.error('Error sharing: ', error);
             }
 

From 22229e4f31073785aaba61afe7d2d7b7721a3796 Mon Sep 17 00:00:00 2001
From: TheNonPirate <thenonpirate@gmail.com>
Date: Mon, 15 Jun 2026 11:20:45 -0600
Subject: [PATCH 04/12] Added wav audio as another audio export type

---
 src/lib/components/ShareSelector.svelte | 23 ++++++++++++++++-------
 1 file changed, 16 insertions(+), 7 deletions(-)

diff --git a/src/lib/components/ShareSelector.svelte b/src/lib/components/ShareSelector.svelte
index 76986feb5..d866fc947 100644
--- a/src/lib/components/ShareSelector.svelte
+++ b/src/lib/components/ShareSelector.svelte
@@ -17,6 +17,7 @@ A component for verse-on-image providing a dropdown where you can choose to down
         canEncodeAudio,
         Mp4OutputFormat,
         Output,
+        WavOutputFormat,
         WebMOutputFormat
     } from 'mediabunny';
     import type { AudioEncodingConfig } from 'mediabunny';
@@ -42,9 +43,14 @@ A component for verse-on-image providing a dropdown where you can choose to down
         const audioCtx = new AudioContext();
         try {
             const audioConfig: AudioEncodingConfig = await pickSupportedAudioConfig();
-            const useWebm = audioConfig.codec === 'opus';
+            const outputFormat =
+                audioConfig.codec === 'aac'
+                    ? { name: 'mp4', format: new Mp4OutputFormat() }
+                    : audioConfig.codec === 'opus'
+                      ? { name: 'webm', format: new WebMOutputFormat() }
+                      : { name: 'wav', format: new WavOutputFormat() };
             const output = new Output({
-                format: useWebm ? new WebMOutputFormat() : new Mp4OutputFormat(),
+                format: outputFormat.format,
                 target: new BufferTarget()
             });
 
@@ -103,11 +109,11 @@ A component for verse-on-image providing a dropdown where you can choose to down
 
             const buffer = output.target.buffer as BlobPart;
             const blob = new Blob([buffer], {
-                type: useWebm ? 'audio/webm' : 'audio/mp4'
+                type: 'audio/' + outputFormat.name
             });
-            const filename = reference + (useWebm ? '.webm' : '.mp4');
+            const filename = reference + '.' + outputFormat.name;
             const file = new File([blob], filename, {
-                type: useWebm ? 'audio/webm' : 'audio/mp4'
+                type: 'audio/' + outputFormat.name
             });
             try {
                 if (
@@ -151,7 +157,10 @@ A component for verse-on-image providing a dropdown where you can choose to down
             {
                 codec: 'opus',
                 bitrate: 96000
-            }
+            },
+            { codec: 'pcm-f32' },
+            { codec: 'pcm-s24' },
+            { codec: 'pcm-s16' }
         ];
 
         for (const cfg of candidates) {
@@ -160,7 +169,7 @@ A component for verse-on-image providing a dropdown where you can choose to down
             }
         }
 
-        throw new Error('No supported AAC configuration found.');
+        throw new Error('No supported audio configuration found.');
     } //This is used to determine a supported audio configuration. It first tries AAC, but then falls back to opus if AAC isn't supported. This is a duplicate of the function with the same name in VerseOnImage.svelte, so maybe it should be moved to somewhere that exports it for any place that needs it to use it?
     let modalId = 'shareSelector';
     let modalThis: Modal;

From dcb114317387f572c56afb68ba5b7e964ba00b18 Mon Sep 17 00:00:00 2001
From: TheNonPirate <thenonpirate@gmail.com>
Date: Mon, 15 Jun 2026 12:27:33 -0600
Subject: [PATCH 05/12] Fixed shared verse reference not updating

---
 src/lib/components/ShareSelector.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/ShareSelector.svelte b/src/lib/components/ShareSelector.svelte
index d866fc947..b220d99e3 100644
--- a/src/lib/components/ShareSelector.svelte
+++ b/src/lib/components/ShareSelector.svelte
@@ -24,7 +24,6 @@ A component for verse-on-image providing a dropdown where you can choose to down
     import Modal from './Modal.svelte';
 
     let { vertOffset = '1rem' } = $props();
-    const reference = $derived(selectedVerses.getCompositeReference());
     async function shareSelectedText() {
         const book = $selectedVerses[0].book;
         const reference = selectedVerses.getCompositeReference();
@@ -40,6 +39,7 @@ A component for verse-on-image providing a dropdown where you can choose to down
         logShareContent('Text', bookCol, bookAbbrev ?? '', reference);
     }
     async function shareAudio() {
+        const reference = selectedVerses.getCompositeReference();
         const audioCtx = new AudioContext();
         try {
             const audioConfig: AudioEncodingConfig = await pickSupportedAudioConfig();
@@ -148,7 +148,7 @@ A component for verse-on-image providing a dropdown where you can choose to down
         } finally {
             await audioCtx?.close();
         }
-    } //I'll need to have it share it rather than downloading it.
+    }
     async function pickSupportedAudioConfig() {
         const candidates: AudioEncodingConfig[] = [
             { codec: 'aac', bitrate: 128000 },

From 44552dfc4410cb6a7b9c2399120be5363b804a87 Mon Sep 17 00:00:00 2001
From: TheNonPirate <thenonpirate@gmail.com>
Date: Tue, 16 Jun 2026 12:15:11 -0600
Subject: [PATCH 06/12] Update ShareSelector description to be correct

---
 src/lib/components/ShareSelector.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/ShareSelector.svelte b/src/lib/components/ShareSelector.svelte
index b220d99e3..fa1c12f85 100644
--- a/src/lib/components/ShareSelector.svelte
+++ b/src/lib/components/ShareSelector.svelte
@@ -1,6 +1,6 @@
 <!--
 @component
-A component for verse-on-image providing a dropdown where you can choose to download an image or a video
+A component providing a dropdown where you can choose to download audio or video for selected text
 -->
 
 <script lang="ts">

From 5864049f675d16cd767b9394d4d4d439506c8261 Mon Sep 17 00:00:00 2001
From: TheNonPirate <thenonpirate@gmail.com>
Date: Tue, 16 Jun 2026 15:15:57 -0600
Subject: [PATCH 07/12] Implement audio sharing for remote audio files

---
 src/lib/components/ShareSelector.svelte | 170 ++++++++++++++----------
 1 file changed, 103 insertions(+), 67 deletions(-)

diff --git a/src/lib/components/ShareSelector.svelte b/src/lib/components/ShareSelector.svelte
index fa1c12f85..7233695aa 100644
--- a/src/lib/components/ShareSelector.svelte
+++ b/src/lib/components/ShareSelector.svelte
@@ -66,83 +66,119 @@ A component providing a dropdown where you can choose to download audio or video
             const audioSource = new AudioBufferSource(audioConfig);
             output.addAudioTrack(audioSource);
             await output.start();
+            console.log(audioSourceInfo?.source);
+            let isRemote;
 
-            const audioBlob = await fetch(audioSourceInfo?.source).then((r) => r.blob());
-            const audioBuffer = await audioCtx.decodeAudioData(await audioBlob.arrayBuffer());
-
-            const sampleRate = audioBuffer.sampleRate;
-
-            for (let i = 0; i < $selectedVerses.length; i++) {
-                let startFrame = 0;
-                let endFrame = 0;
-                for (var j = 0; j < (audioSourceInfo?.timing?.length || 0); j++) {
-                    const timing = audioSourceInfo?.timing?.[j];
-                    const verse = timing?.tag?.replace(/\D/g, '');
-                    if (verse === $selectedVerses[i].verse) {
-                        if (!startFrame) {
-                            startFrame = Math.floor((timing?.starttime || 0) * sampleRate);
-                            endFrame = Math.floor((timing?.endtime || 0) * sampleRate);
-                        } else {
-                            endFrame = Math.floor((timing?.endtime || 0) * sampleRate);
-                        }
+            try {
+                let url = new URL(audioSourceInfo.source);
+                isRemote = url.protocol === 'http:' || url.protocol === 'https:';
+            } catch (_) {
+                isRemote = false;
+            }
+            if (isRemote) {
+                try {
+                    let verses = await selectedVerses.getCompositeText();
+                    navigator.share({
+                        title: reference,
+                        text: verses,
+                        url: audioSourceInfo.source
+                    });
+                } catch (error) {
+                    if ((error as { name?: string })?.name === 'AbortError') {
+                        return; // user intentionally dismissed native share UI
                     }
+                    console.error('Error sharing: ', error);
                 }
-                if (endFrame <= startFrame) {
-                    console.warn(`No timing found for verse ${$selectedVerses[i].verse}, skipping`);
-                    continue;
-                }
-                const trimmedBuffer = audioCtx.createBuffer(
-                    audioBuffer.numberOfChannels,
-                    endFrame - startFrame,
-                    sampleRate
-                );
-
-                for (let ch = 0; ch < audioBuffer.numberOfChannels; ch++) {
-                    const src = audioBuffer.getChannelData(ch);
-                    const dst = trimmedBuffer.getChannelData(ch);
-                    dst.set(src.slice(startFrame, endFrame));
-                }
-
-                await audioSource.add(trimmedBuffer);
-            }
-            await output.finalize();
 
-            const buffer = output.target.buffer as BlobPart;
-            const blob = new Blob([buffer], {
-                type: 'audio/' + outputFormat.name
-            });
-            const filename = reference + '.' + outputFormat.name;
-            const file = new File([blob], filename, {
-                type: 'audio/' + outputFormat.name
-            });
-            try {
-                if (
-                    navigator.share &&
-                    navigator.canShare &&
-                    navigator.canShare({ files: [file] })
-                ) {
-                    let verses = await selectedVerses.getCompositeText();
-                    const shareData: ShareData = { title: reference, text: verses, files: [file] };
+                // if we're here, we failed to share, so we'll try to use the download link. This generally is just going to open the URL rather than downloading it.
+                const anchor = document.createElement('a');
+                anchor.href = audioSourceInfo.source;
+                anchor.download = '';
+                anchor.click();
+            } else {
+                const audioBlob = await fetch(audioSourceInfo?.source).then((r) => r.blob());
+                const audioBuffer = await audioCtx.decodeAudioData(await audioBlob.arrayBuffer());
+
+                const sampleRate = audioBuffer.sampleRate;
+
+                for (let i = 0; i < $selectedVerses.length; i++) {
+                    let startFrame = 0;
+                    let endFrame = 0;
+                    for (var j = 0; j < (audioSourceInfo?.timing?.length || 0); j++) {
+                        const timing = audioSourceInfo?.timing?.[j];
+                        const verse = timing?.tag?.replace(/\D/g, '');
+                        if (verse === $selectedVerses[i].verse) {
+                            if (!startFrame) {
+                                startFrame = Math.floor((timing?.starttime || 0) * sampleRate);
+                                endFrame = Math.floor((timing?.endtime || 0) * sampleRate);
+                            } else {
+                                endFrame = Math.floor((timing?.endtime || 0) * sampleRate);
+                            }
+                        }
+                    }
+                    if (endFrame <= startFrame) {
+                        console.warn(
+                            `No timing found for verse ${$selectedVerses[i].verse}, skipping`
+                        );
+                        continue;
+                    }
+                    const trimmedBuffer = audioCtx.createBuffer(
+                        audioBuffer.numberOfChannels,
+                        endFrame - startFrame,
+                        sampleRate
+                    );
+
+                    for (let ch = 0; ch < audioBuffer.numberOfChannels; ch++) {
+                        const src = audioBuffer.getChannelData(ch);
+                        const dst = trimmedBuffer.getChannelData(ch);
+                        dst.set(src.slice(startFrame, endFrame));
+                    }
 
-                    await navigator.share(shareData);
-                    return;
+                    await audioSource.add(trimmedBuffer);
                 }
-            } catch (error) {
-                if ((error as { name?: string })?.name === 'AbortError') {
-                    return; // user intentionally dismissed native share UI
+                await output.finalize();
+
+                const buffer = output.target.buffer as BlobPart;
+                const blob = new Blob([buffer], {
+                    type: 'audio/' + outputFormat.name
+                });
+                const filename = reference + '.' + outputFormat.name;
+                const file = new File([blob], filename, {
+                    type: 'audio/' + outputFormat.name
+                });
+                try {
+                    if (
+                        navigator.share &&
+                        navigator.canShare &&
+                        navigator.canShare({ files: [file] })
+                    ) {
+                        let verses = await selectedVerses.getCompositeText();
+                        const shareData: ShareData = {
+                            title: reference,
+                            text: verses,
+                            files: [file]
+                        };
+
+                        await navigator.share(shareData);
+                        return;
+                    }
+                } catch (error) {
+                    if ((error as { name?: string })?.name === 'AbortError') {
+                        return; // user intentionally dismissed native share UI
+                    }
+                    console.error('Error sharing: ', error);
                 }
-                console.error('Error sharing: ', error);
-            }
 
-            // if we're here, we failed to share, so we'll try to use the download link
-            const url = URL.createObjectURL(file);
+                // if we're here, we failed to share, so we'll try to use the download link
+                const url = URL.createObjectURL(file);
 
-            const anchor = document.createElement('a');
-            anchor.href = url;
-            anchor.download = filename;
-            anchor.click();
+                const anchor = document.createElement('a');
+                anchor.href = url;
+                anchor.download = filename;
+                anchor.click();
 
-            URL.revokeObjectURL(url);
+                URL.revokeObjectURL(url);
+            }
         } catch (error) {
             console.error('Error generating audio export:', error);
         } finally {

From dc91442dc326c0930570db62f238f727fd4f43ff Mon Sep 17 00:00:00 2001
From: TheNonPirate <thenonpirate@gmail.com>
Date: Tue, 16 Jun 2026 15:55:44 -0600
Subject: [PATCH 08/12] Minor remote sharing fixes

---
 src/lib/components/ShareSelector.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/ShareSelector.svelte b/src/lib/components/ShareSelector.svelte
index 7233695aa..da15c65da 100644
--- a/src/lib/components/ShareSelector.svelte
+++ b/src/lib/components/ShareSelector.svelte
@@ -66,7 +66,6 @@ A component providing a dropdown where you can choose to download audio or video
             const audioSource = new AudioBufferSource(audioConfig);
             output.addAudioTrack(audioSource);
             await output.start();
-            console.log(audioSourceInfo?.source);
             let isRemote;
 
             try {
@@ -78,11 +77,12 @@ A component providing a dropdown where you can choose to download audio or video
             if (isRemote) {
                 try {
                     let verses = await selectedVerses.getCompositeText();
-                    navigator.share({
+                    await navigator.share({
                         title: reference,
                         text: verses,
                         url: audioSourceInfo.source
                     });
+                    return;
                 } catch (error) {
                     if ((error as { name?: string })?.name === 'AbortError') {
                         return; // user intentionally dismissed native share UI

From f3ab18f42b47d7cc079cf75a4fb815ac2dd72d80 Mon Sep 17 00:00:00 2001
From: TheNonPirate <thenonpirate@gmail.com>
Date: Wed, 1 Jul 2026 16:29:56 -0600
Subject: [PATCH 09/12] Fix minor errors

---
 src/lib/components/ShareSelector.svelte | 8 ++++++--
 src/lib/data/stores/view.ts             | 3 ++-
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/ShareSelector.svelte b/src/lib/components/ShareSelector.svelte
index da15c65da..724ea001d 100644
--- a/src/lib/components/ShareSelector.svelte
+++ b/src/lib/components/ShareSelector.svelte
@@ -8,7 +8,7 @@ A component providing a dropdown where you can choose to download audio or video
     import { getBook, logShareContent } from '$lib/data/analytics';
     import { getAudioSourceInfo } from '$lib/data/audio';
     import { shareText } from '$lib/data/share';
-    import { refs, selectedVerses, t } from '$lib/data/stores';
+    import { refs, selectedVerses, t, themeColors } from '$lib/data/stores';
     import { AudioIcon } from '$lib/icons';
     import FormatAlignLeftIcon from '$lib/icons/image/FormatAlignLeftIcon.svelte';
     import {
@@ -220,7 +220,11 @@ A component providing a dropdown where you can choose to download audio or video
 </script>
 
 <!-- svelte-ignore a11y_consider_explicit_label -->
-<Modal bind:this={modalThis} id={modalId} addCSS={positioningCSS}>
+<Modal
+    bind:this={modalThis}
+    id={modalId}
+    styling="background-color:{$themeColors['PopupBackgroundColor']}; {positioningCSS}"
+>
     <div class="grid gap-2 m-2">
         <button
             class="dy-btn dy-btn-sm flex items-center justify-center gap-2"
diff --git a/src/lib/data/stores/view.ts b/src/lib/data/stores/view.ts
index da6240ea7..c6751eb21 100644
--- a/src/lib/data/stores/view.ts
+++ b/src/lib/data/stores/view.ts
@@ -33,7 +33,8 @@ export const ModalType = {
     PlaybackSpeed: 'playback-speed',
     VerseOnImage: 'verse-on-image',
     Download: 'download',
-    Collection: 'collection'
+    Collection: 'collection',
+    Share: 'share'
 } as const;
 export type ModalType = (typeof ModalType)[keyof typeof ModalType];
 

From f316c6b7527805e2f5c26e8eb58b3bb0b453cce9 Mon Sep 17 00:00:00 2001
From: TheNonPirate <thenonpirate@gmail.com>
Date: Thu, 9 Jul 2026 10:32:53 -0600
Subject: [PATCH 10/12] Fix ShareSelector popup not working

---
 src/lib/components/ShareSelector.svelte        | 13 ++++++++++---
 src/lib/components/TextSelectionToolbar.svelte | 16 +---------------
 src/routes/+layout.svelte                      |  4 ++++
 3 files changed, 15 insertions(+), 18 deletions(-)

diff --git a/src/lib/components/ShareSelector.svelte b/src/lib/components/ShareSelector.svelte
index 724ea001d..7f6f2be58 100644
--- a/src/lib/components/ShareSelector.svelte
+++ b/src/lib/components/ShareSelector.svelte
@@ -31,9 +31,12 @@ A component providing a dropdown where you can choose to download audio or video
         const bookCol = $selectedVerses[0].collection;
         const fullBook = getBook({ collection: bookCol, book: book });
         const bookAbbrev = fullBook?.abbreviation ?? fullBook?.name;
+        const copyShareMessage = scriptureConfig.bookCollections?.find(
+            (x) => x.id === bookCol
+        )?.copyShareMessage;
         shareText(
             scriptureConfig.name ?? '',
-            scriptureConfig.name + '\n\n' + text + '\n' + reference,
+            text + '\n' + reference + (copyShareMessage ? '\n' + copyShareMessage : ''),
             book + '.txt'
         );
         logShareContent('Text', bookCol, bookAbbrev ?? '', reference);
@@ -209,8 +212,12 @@ A component providing a dropdown where you can choose to download audio or video
     } //This is used to determine a supported audio configuration. It first tries AAC, but then falls back to opus if AAC isn't supported. This is a duplicate of the function with the same name in VerseOnImage.svelte, so maybe it should be moved to somewhere that exports it for any place that needs it to use it?
     let modalId = 'shareSelector';
     let modalThis: Modal;
-    export function showModal() {
-        modalThis.showModal();
+    export function showModal(shareTextOnly: boolean) {
+        if (shareTextOnly) {
+            shareSelectedText();
+        } else {
+            modalThis.showModal();
+        }
     }
     const positioningCSS = $derived(
         'position:absolute; bottom:' +
diff --git a/src/lib/components/TextSelectionToolbar.svelte b/src/lib/components/TextSelectionToolbar.svelte
index cae8cf51f..88fc2beca 100644
--- a/src/lib/components/TextSelectionToolbar.svelte
+++ b/src/lib/components/TextSelectionToolbar.svelte
@@ -140,21 +140,7 @@ TODO:
         if ($refs.hasAudio?.timingFile) {
             modal.open(ModalType.Share);
         } else {
-            const book = $selectedVerses[0].book;
-            const reference = selectedVerses.getCompositeReference();
-            const text = await selectedVerses.getCompositeText();
-            const bookCol = $selectedVerses[0].collection;
-            const fullBook = getBook({ collection: bookCol, book: book });
-            const bookAbbrev = fullBook?.abbreviation ?? fullBook?.name;
-            const copyShareMessage = scriptureConfig.bookCollections?.find(
-                (x) => x.id === bookCol
-            )?.copyShareMessage;
-            shareText(
-                scriptureConfig.name ?? '',
-                text + '\n' + reference + (copyShareMessage ? '\n' + copyShareMessage : ''),
-                book + '.txt'
-            );
-            logShareContent('Text', bookCol, bookAbbrev ?? '', reference);
+            modal.open(ModalType.Share, true); //Just share the text rather than giving the user a choice about how to share it
         }
     }
 
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 6af6d722f..d20593576 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -80,6 +80,9 @@
                     case ModalType.Font:
                         fontSelector?.showModal();
                         break;
+                    case ModalType.Share:
+                        shareSelector?.showModal(data as boolean);
+                        break;
                     case ModalType.StopPlan:
                         planStopId = data as string;
                         planStopDialog?.showModal();
@@ -165,6 +168,7 @@
                 />
                 <AudioPlaybackSpeed bind:this={audioPlaybackSpeed} />
                 <FontSelector bind:this={fontSelector} />
+                <ShareSelector bind:this={shareSelector} />
             </div>
             {@render children()}
         </div>

From 6ed6cb2bf0a9afe507c220b16066b39b8e1db035 Mon Sep 17 00:00:00 2001
From: TheNonPirate <thenonpirate@gmail.com>
Date: Wed, 15 Jul 2026 12:43:51 -0600
Subject: [PATCH 11/12] Adjust and refactor modal styling

---
 src/lib/components/DownloadSelector.svelte    | 10 +++-------
 src/lib/components/PlanStopDialog.svelte      |  9 +--------
 src/lib/components/ShareSelector.svelte       | 20 ++++++++-----------
 .../components/TextAppearanceSelector.svelte  |  7 ++-----
 src/lib/data/stores/view.ts                   |  9 +++++++++
 src/routes/+layout.svelte                     |  6 +-----
 6 files changed, 24 insertions(+), 37 deletions(-)

diff --git a/src/lib/components/DownloadSelector.svelte b/src/lib/components/DownloadSelector.svelte
index 9cca68c34..d30dda4cf 100644
--- a/src/lib/components/DownloadSelector.svelte
+++ b/src/lib/components/DownloadSelector.svelte
@@ -4,7 +4,7 @@ A component for verse-on-image providing a dropdown where you can choose to down
 -->
 
 <script lang="ts">
-    import { convertStyle, s, t, themeColors } from '$lib/data/stores';
+    import { getPositioningCSS, t, themeColors } from '$lib/data/stores';
     import { ImageIcon, VideoIcon } from '$lib/icons';
     import Modal from './Modal.svelte';
 
@@ -15,18 +15,14 @@ A component for verse-on-image providing a dropdown where you can choose to down
     export function showModal() {
         modalThis.showModal();
     }
-    const positioningCSS = $derived(
-        'position:absolute; top:' +
-            (Number(vertOffset.replace('rem', '')) + 1) +
-            'rem; inset-inline-end:1rem; width:auto;'
-    );
+    const positioningCSS = $derived(getPositioningCSS(vertOffset, 'top'));
 </script>
 
 <!-- svelte-ignore a11y_consider_explicit_label -->
 <Modal
     bind:this={modalThis}
     id={modalId}
-    styling="background-color:{$themeColors['PopupBackgroundColor']}; {positioningCSS}"
+    styling="background-color:{$themeColors['PopupBackgroundColor']}; width:auto; {positioningCSS}"
 >
     <div class="grid gap-2 m-2">
         <button
diff --git a/src/lib/components/PlanStopDialog.svelte b/src/lib/components/PlanStopDialog.svelte
index e5693b64d..b93ac215d 100644
--- a/src/lib/components/PlanStopDialog.svelte
+++ b/src/lib/components/PlanStopDialog.svelte
@@ -11,7 +11,7 @@ Plan Stop Modal Dialog component.
     import { resolve } from '$lib/utils/paths';
     import Modal from './Modal.svelte';
 
-    let { planId = $bindable(undefined), vertOffset = '1rem' } = $props();
+    let { planId = $bindable(undefined) } = $props();
 
     const modalId = 'planStopDialog';
     let modal: Modal | undefined = $state(undefined);
@@ -31,13 +31,6 @@ Plan Stop Modal Dialog component.
             goto(resolve(`/plans`));
         });
     }
-
-    //The positioningCSS positions the modal 1rem below the navbar and 1rem from the right edge of the screen (on mobile it will be centered)
-    const positioningCSS = $derived(
-        'position:absolute; top:' +
-            (Number(vertOffset.replace('rem', '')) + 1) +
-            'rem; inset-inline-end:1rem;'
-    );
 </script>
 
 <Modal bind:this={modal} id={modalId}>
diff --git a/src/lib/components/ShareSelector.svelte b/src/lib/components/ShareSelector.svelte
index 7f6f2be58..e9491bd10 100644
--- a/src/lib/components/ShareSelector.svelte
+++ b/src/lib/components/ShareSelector.svelte
@@ -8,7 +8,7 @@ A component providing a dropdown where you can choose to download audio or video
     import { getBook, logShareContent } from '$lib/data/analytics';
     import { getAudioSourceInfo } from '$lib/data/audio';
     import { shareText } from '$lib/data/share';
-    import { refs, selectedVerses, t, themeColors } from '$lib/data/stores';
+    import { getPositioningCSS, refs, selectedVerses, t } from '$lib/data/stores';
     import { AudioIcon } from '$lib/icons';
     import FormatAlignLeftIcon from '$lib/icons/image/FormatAlignLeftIcon.svelte';
     import {
@@ -23,7 +23,7 @@ A component providing a dropdown where you can choose to download audio or video
     import type { AudioEncodingConfig } from 'mediabunny';
     import Modal from './Modal.svelte';
 
-    let { vertOffset = '1rem' } = $props();
+    let { vertOffset = '2rem' } = $props();
     async function shareSelectedText() {
         const book = $selectedVerses[0].book;
         const reference = selectedVerses.getCompositeReference();
@@ -219,36 +219,32 @@ A component providing a dropdown where you can choose to download audio or video
             modalThis.showModal();
         }
     }
-    const positioningCSS = $derived(
-        'position:absolute; bottom:' +
-            (Number(vertOffset.replace('rem', '')) + 1) +
-            'rem; inset-inline-end:1rem; width:auto;'
-    );
+    const positioningCSS = $derived(getPositioningCSS(vertOffset, 'bottom'));
 </script>
 
 <!-- svelte-ignore a11y_consider_explicit_label -->
 <Modal
     bind:this={modalThis}
     id={modalId}
-    styling="background-color:{$themeColors['PopupBackgroundColor']}; {positioningCSS}"
+    styling="background-color:red; box-shadow:none; padding:0; width:auto; {positioningCSS}"
 >
-    <div class="grid gap-2 m-2">
+    <div class="grid">
         <button
-            class="dy-btn dy-btn-sm flex items-center justify-center gap-2"
+            class="dy-btn flex items-center justify-center rounded-none"
             onclick={() => shareSelectedText()}
         >
             <FormatAlignLeftIcon />
             {$t['Share_Text']}
         </button>
         <button
-            class="dy-btn dy-btn-sm flex items-center justify-center gap-2"
+            class="dy-btn flex items-center justify-center rounded-none"
             onclick={() => shareAudio()}
         >
             <AudioIcon.Volume />
             {$t['Share_Audio']}
         </button>
         <!--<button
-            class="dy-btn dy-btn-sm flex items-center justify-center gap-2"
+            class="dy-btn flex items-center justify-center rounded-none"
             onclick={() => downloadVideo()}
         >
             <VideoIcon />
diff --git a/src/lib/components/TextAppearanceSelector.svelte b/src/lib/components/TextAppearanceSelector.svelte
index d56f9b5bd..e802a17be 100644
--- a/src/lib/components/TextAppearanceSelector.svelte
+++ b/src/lib/components/TextAppearanceSelector.svelte
@@ -35,6 +35,7 @@ The navbar component. We have sliders that update reactively to both font size a
         contentsFontSize,
         currentFont,
         fontChoices,
+        getPositioningCSS,
         language,
         languages,
         modal,
@@ -67,11 +68,7 @@ The navbar component. We have sliders that update reactively to both font size a
 
     const contentsMode = $derived(options?.contentsMode ?? false);
     //The positioningCSS positions the modal 1rem below the navbar and 1rem from the right edge of the screen (on mobile it will be centered)
-    const positioningCSS = $derived(
-        'position:absolute; top:' +
-            (Number(vertOffset.replace('rem', '')) + 1) +
-            'rem; inset-inline-end:1rem;'
-    );
+    const positioningCSS = $derived(getPositioningCSS(vertOffset, 'top'));
     const barColor = $derived($themeColors['SliderBarColor']);
     const progressColor = $derived($themeColors['SliderProgressColor']);
     const _showFontSize = showFontSize();
diff --git a/src/lib/data/stores/view.ts b/src/lib/data/stores/view.ts
index c6751eb21..8781ca2ef 100644
--- a/src/lib/data/stores/view.ts
+++ b/src/lib/data/stores/view.ts
@@ -13,6 +13,15 @@ export const isFirstLaunch = derived(
     [firstLaunchTime, launchTime],
     ([$firstLaunchTime, $launchTime]) => $firstLaunchTime === $launchTime
 );
+export function getPositioningCSS(vertOffset: string, position: string) {
+    return (
+        'position:absolute; ' +
+        position +
+        ':' +
+        (Number(vertOffset.replace('rem', '')) + 1) +
+        'rem; inset-inline-end:1rem;'
+    );
+}
 
 /**the current view/layout mode*/
 export const Layout = {
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index d20593576..ca3e3ab45 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -161,11 +161,7 @@
                     vertOffset={NAVBAR_HEIGHT}
                 />
                 <CollectionModal bind:this={collectionModal} />
-                <PlanStopDialog
-                    bind:this={planStopDialog}
-                    bind:planId={planStopId}
-                    vertOffset={NAVBAR_HEIGHT}
-                />
+                <PlanStopDialog bind:this={planStopDialog} bind:planId={planStopId} />
                 <AudioPlaybackSpeed bind:this={audioPlaybackSpeed} />
                 <FontSelector bind:this={fontSelector} />
                 <ShareSelector bind:this={shareSelector} />

From 38be1d5aa4ee99c117b082671b0dabd8b08720d0 Mon Sep 17 00:00:00 2001
From: TheNonPirate <thenonpirate@gmail.com>
Date: Wed, 15 Jul 2026 12:47:53 -0600
Subject: [PATCH 12/12] Remove unnecessary todos and imports

---
 src/lib/components/TextSelectionToolbar.svelte | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/src/lib/components/TextSelectionToolbar.svelte b/src/lib/components/TextSelectionToolbar.svelte
index 88fc2beca..dde0c79d9 100644
--- a/src/lib/components/TextSelectionToolbar.svelte
+++ b/src/lib/components/TextSelectionToolbar.svelte
@@ -2,22 +2,13 @@
 @component
 Taken from modifying a copy of the AudioBar.svelte file
 Enables users to copy, highlight, bookmark, share, and annotate selected verses.
-TODO:
-- Implement functionality for
- -> Share
- -> Play
- -> Play Repeat
-- Add note dialog
-- Add highlight colors
 -->
 <script lang="ts">
     import { goto } from '$app/navigation';
     import { scriptureConfig } from '$assets/config';
-    import { getBook, logShareContent } from '$lib/data/analytics';
     import { playVerses } from '$lib/data/audio';
     import { addBookmark, findBookmark, removeBookmark } from '$lib/data/bookmarks';
     import { addHighlights, removeHighlights } from '$lib/data/highlights';
-    import { shareText } from '$lib/data/share';
     import {
         audioActive,
         modal,