From 9dc454032966ab0c85434ad49167d5b83c5158ba Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Tue, 14 Jan 2025 16:48:24 -0500
Subject: [PATCH] Now images will show inline when viewing a post.

---
 .../bb/ae_idaa_comp__post_obj_id_view.svelte  | 87 ++++++++++++-------
 1 file changed, 54 insertions(+), 33 deletions(-)

diff --git a/src/routes/idaa/(idaa)/bb/ae_idaa_comp__post_obj_id_view.svelte b/src/routes/idaa/(idaa)/bb/ae_idaa_comp__post_obj_id_view.svelte
index 1aeb090a..11212a17 100644
--- a/src/routes/idaa/(idaa)/bb/ae_idaa_comp__post_obj_id_view.svelte
+++ b/src/routes/idaa/(idaa)/bb/ae_idaa_comp__post_obj_id_view.svelte
@@ -128,41 +128,62 @@ onDestroy(() => {
                 </a> -->
 
                 {#if $ae_loc.authenticated_access && linked_obj?.hosted_file_id_random}
-                <button
-                    type="button"
-                    disabled={!$ae_loc.trusted_access}
-                    on:click={() => {
-                        ae_promises[linked_obj.hosted_file_id_random] = api.download_hosted_file({
-                            api_cfg: $ae_api,
-                            hosted_file_id: linked_obj.hosted_file_id_random,
-                            return_file: true,
-                            filename: linked_obj.filename,
-                            auto_download: true,
-                            log_lvl: 0
-                        });
+                    {#if linked_obj.extension === 'png' || linked_obj.extension === 'jpg' || linked_obj.extension === 'jpeg' || linked_obj.extension === 'gif' || linked_obj.extension === 'webp' || linked_obj.extension === 'svg'}
+                        <div>
+                            <img src="{$ae_api.base_url}/hosted_file/{linked_obj?.hosted_file_id_random}/download?x_no_account_id_token=direct-download"
+                                alt={linked_obj.filename}
+                                class="w-fit min-w-96 h-fit object-cover rounded-lg shadow-md"
+                                />
+                            <!-- <img src={api.download_hosted_file({
+                                    api_cfg: $ae_api,
+                                    hosted_file_id: linked_obj.hosted_file_id_random,
+                                    return_file: true,
+                                    filename: linked_obj.filename,
+                                    auto_download: false,
+                                    log_lvl: 1
+                                    })
+                                }
+                                alt={linked_obj.filename}
+                                class="w-fit min-w-96 h-fit object-cover rounded-lg shadow-md"
+                                /> -->
+                        </div>
+                    {:else}
+                        <button
+                            type="button"
+                            disabled={!$ae_loc.trusted_access}
+                            on:click={() => {
+                                ae_promises[linked_obj.hosted_file_id_random] = api.download_hosted_file({
+                                    api_cfg: $ae_api,
+                                    hosted_file_id: linked_obj.hosted_file_id_random,
+                                    return_file: true,
+                                    filename: linked_obj.filename,
+                                    auto_download: true,
+                                    log_lvl: 0
+                                });
 
-                        // window.postMessage({ type: 'download_event_file', hosted_file_id: linked_obj.hosted_file_id_random, filename: linked_obj.filename, auto_download: true }, '*');
-                    }}
-                    class="novi_btn btn btn-sm lg:btn-md variant-ghost-tertiary hover:variant-filled-tertiary min-w-48"
-                    title={`Download this file:\n${linked_obj.filename}\n[API] SHA256: ${linked_obj?.hash_sha256.slice(0, 10)}... Hosted ID: ${linked_obj.hosted_file_id_random} Archive Content ID: ${linked_obj.archive_content_id}`}
-                    >
-                    {#await ae_promises[linked_obj.hosted_file_id_random]}
-                        <span class="fas fa-spinner fa-spin mx-1"></span>
-                        <span class="">
-                            Downloading
-                            {#if $ae_sess.api_download_kv[linked_obj.hosted_file_id_random]}
-                                {$ae_sess.api_download_kv[linked_obj.hosted_file_id_random].percent_completed}%
-                            {/if}
-                            :
-                        </span>
-                    {:then}
-                        <span class="fas fa-{ae_util.file_extension_icon(linked_obj?.extension)}"></span>
-                    {/await}
+                                // window.postMessage({ type: 'download_event_file', hosted_file_id: linked_obj.hosted_file_id_random, filename: linked_obj.filename, auto_download: true }, '*');
+                            }}
+                            class="novi_btn btn btn-sm lg:btn-md variant-ghost-tertiary hover:variant-filled-tertiary min-w-48"
+                            title={`Download this file:\n${linked_obj.filename}\n[API] SHA256: ${linked_obj?.hash_sha256.slice(0, 10)}... Hosted ID: ${linked_obj.hosted_file_id_random} Archive Content ID: ${linked_obj.archive_content_id}`}
+                            >
+                            {#await ae_promises[linked_obj.hosted_file_id_random]}
+                                <span class="fas fa-spinner fa-spin mx-1"></span>
+                                <span class="">
+                                    Downloading
+                                    {#if $ae_sess.api_download_kv[linked_obj.hosted_file_id_random]}
+                                        {$ae_sess.api_download_kv[linked_obj.hosted_file_id_random].percent_completed}%
+                                    {/if}
+                                    :
+                                </span>
+                            {:then}
+                                <span class="fas fa-{ae_util.file_extension_icon(linked_obj?.extension)}"></span>
+                            {/await}
 
-                    <span class="grow">
-                    {ae_util.shorten_filename({filename: linked_obj?.filename, max_length: 30})}
-                    </span>
-                </button>
+                            <span class="grow">
+                            {ae_util.shorten_filename({filename: linked_obj?.filename, max_length: 30})}
+                            </span>
+                        </button>
+                    {/if}
                 {/if}