Add media server settings

CHANGELOG.md

@@ -6,6 +6,7 @@
 * Fix @-mentions
 * Replace nsec.app signup with njump.me
 * Add new messages button in rooms
+* Add media server settings
 
 # 0.2.5
 

src/app/components/ContentLinkBlock.svelte

@@ -30,7 +30,7 @@
       </video>
     {:else if url.match(/\.(jpe?g|png|gif|webp)$/)}
       <button type="button" on:click|stopPropagation|preventDefault={expand}>
-        <img alt="Link preview" src={imgproxy(url)} class="m-auto max-h-96" />
+        <img alt="Link preview" src={imgproxy(url)} class="m-auto max-h-96 rounded-box" />
       </button>
     {:else}
       {#await loadPreview()}

src/lib/components/SearchSelect.svelte

@@ -9,7 +9,7 @@
   import Tippy from "@lib/components/Tippy.svelte"
 
   export let value: string
-  export let options: string[]
+  export let options: string[] = []
   export let allowCreate = false
 
   let input: Element
@@ -20,7 +20,7 @@
     createSearch(options, {
       getValue: identity,
       fuseOptions: {keys: [""]},
-    }),
+    }).searchValues,
   )
 
   const select = (newValue: string) => {

src/routes/settings/+page.svelte

@@ -4,6 +4,7 @@
   import {pubkey, signer, userMutes, tagPubkey, publishThunk} from "@welshman/app"
   import Field from "@lib/components/Field.svelte"
   import FieldInline from "@lib/components/FieldInline.svelte"
+  import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import ProfileMultiSelect from "@app/components/ProfileMultiSelect.svelte"
   import {pushToast} from "@app/toast"
@@ -79,6 +80,24 @@
         {settings.send_delay === 1000 ? "second" : "seconds"}.
       </p>
     </FieldInline>
+    <Field>
+      <p slot="label">Media Server</p>
+      <div slot="input" class="flex gap-2">
+        <select bind:value={settings.upload_type} class="select select-bordered">
+          <option value="nip96">NIP 96 (default)</option>
+          <option value="blossom">Blossom</option>
+        </select>
+        <label class="input input-bordered flex flex-grow items-center gap-2">
+          <Icon icon="link-round" />
+          {#if settings.upload_type === "nip96"}
+            <input class="grow" bind:value={settings.nip96_urls[0]} />
+          {:else}
+            <input class="grow" bind:value={settings.blossom_urls[0]} />
+          {/if}
+        </label>
+      </div>
+      <p slot="info">Choose a media server type and url for files you upload to flotilla.</p>
+    </Field>
     <div class="mt-4 flex flex-row items-center justify-between gap-4">
       <Button class="btn btn-neutral" on:click={reset}>Discard Changes</Button>
       <Button type="submit" class="btn btn-primary">Save Changes</Button>

src/routes/spaces/[relay]/[room]/+page.svelte

@@ -5,7 +5,7 @@
   import {now} from "@welshman/lib"
   import type {TrustedEvent, EventContent} from "@welshman/util"
   import {createEvent, MESSAGE, DELETE, REACTION} from "@welshman/util"
-  import {formatTimestampAsDate, publishThunk, deriveRelay, repository} from "@welshman/app"
+  import {formatTimestampAsDate, pubkey, publishThunk, deriveRelay, repository} from "@welshman/app"
   import {slide, fade, fly} from "@lib/transition"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
@@ -142,7 +142,12 @@
 
         const date = formatTimestampAsDate(created_at)
 
-        if (!newMessagesSeen && lastChecked && created_at > lastChecked) {
+        if (
+          !newMessagesSeen &&
+          event.pubkey !== $pubkey &&
+          lastChecked &&
+          created_at > lastChecked
+        ) {
           elements.push({type: "new-messages", id: "new-messages"})
           newMessagesSeen = true
         }