rename Media components

ROADMAP.md

@@ -1,13 +1,10 @@
 # Current
 
 - [ ] Fix issues
-- [ ] Write NIP to support proxies. Update COUNT NIP to mention how proxies are a good use case for COUNT
-- [ ] Write blog post on multiplexer
 - [ ] Fix performance issues
 - [ ] Fix reactions and replies showing up
 - [ ] Fix iOS/safari/firefox
 - [ ] https://github.com/coracle-social/coracle/issues/42
-- [ ] Multiplex, charge past a certain usage level based on bandwidth
 - [ ] Add onError handler to subscriptions for when sockets fail to connect?
 - [ ] Add bugsnag to multiplexr
 
@@ -19,6 +16,7 @@
 
 # More
 
+- [ ] Monetize multiplexing
 - [ ] Nostr Wallet Connect https://nwc.getalby.com/
 - [ ] Build per-relay pagination, put it in paravel https://github.com/nostr-protocol/nips/pull/408
 - [ ] Linkify topics

src/partials/Media.svelte

@@ -53,18 +53,18 @@
           <small>{ellipsize(description, 140)}</small>
         </div>
       {/if}
-      {#if onClose}
-        <div
-          on:click|preventDefault={onClose}
-          class="absolute top-0 right-0 m-1 flex h-6 w-6 cursor-pointer items-center justify-center
-           rounded-full border border-solid border-gray-6 bg-white text-black opacity-50 shadow">
-          <i class="fa fa-times" />
-        </div>
-      {/if}
     {:catch}
       <p class="mb-1 py-24 px-12 text-center text-gray-5">
         Unable to load a preview for {link.url}
       </p>
     {/await}
   {/if}
+  {#if onClose}
+    <div
+      on:click|preventDefault={onClose}
+      class="absolute top-0 right-0 m-1 flex h-6 w-6 cursor-pointer items-center justify-center
+       rounded-full border border-solid border-gray-6 bg-white text-black opacity-50 shadow">
+      <i class="fa fa-times" />
+    </div>
+  {/if}
 </Anchor>

src/partials/MediaSet.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import {sortBy} from "ramda"
   import {slide} from "svelte/transition"
-  import CarouselItem from "src/partials/CarouselItem.svelte"
+  import Media from "src/partials/Media.svelte"
   import Content from "src/partials/Content.svelte"
   import Modal from "src/partials/Modal.svelte"
 
@@ -42,7 +42,7 @@
 
 {#if !hidden}
   <div in:slide class="relative">
-    <CarouselItem link={annotated[0]} onClose={close} />
+    <Media link={annotated[0]} onClose={close} />
     {#if annotated.length > 1}
       <p class="text-gray-500 py-4 text-center underline" on:click={openModal}>
         <i class="fa fa-plus" /> Show {annotated.length} link previews
@@ -55,7 +55,7 @@
   <Modal onEscape={closeModal}>
     <Content>
       {#each annotated as link}
-        <CarouselItem {link} />
+        <Media {link} />
       {/each}
     </Content>
   </Modal>

src/views/notes/Note.svelte

@@ -20,7 +20,7 @@
   import PersonCircle from "src/partials/PersonCircle.svelte"
   import RelayCard from "src/views/relays/RelayCard.svelte"
   import Modal from "src/partials/Modal.svelte"
-  import CarouselItem from "src/partials/CarouselItem.svelte"
+  import Media from "src/partials/Media.svelte"
   import Anchor from "src/partials/Anchor.svelte"
   import {toast, modal} from "src/app/ui"
   import Compose from "src/partials/Compose.svelte"
@@ -512,8 +512,8 @@
       </div>
       {#if image}
         <div class="bg-gray-7 p-2">
-          <CarouselItem
-            link={{type: 'image', url: image}}
+          <Media
+            link={{type: "image", url: image}}
             onClose={() => {
               image = null
             }} />

src/views/notes/NoteContent.svelte

@@ -6,7 +6,7 @@
   import {warn} from "src/util/logger"
   import {parseContent} from "src/util/html"
   import {displayPerson, Tags} from "src/util/nostr"
-  import Carousel from "src/partials/Carousel.svelte"
+  import MediaSet from "src/partials/MediaSet.svelte"
   import Card from "src/partials/Card.svelte"
   import Spinner from "src/partials/Spinner.svelte"
   import Anchor from "src/partials/Anchor.svelte"
@@ -60,7 +60,7 @@
     }
 
     // Keep track of total characters, if we're not dealing with a string just guess
-    if (typeof value === 'string') {
+    if (typeof value === "string") {
       l += value.length
 
       if (shouldTruncate && l > 350 && type !== "newline") {
@@ -80,8 +80,8 @@
     // implementations are 1-indexed
     if (note.tags[i]?.[0] === "p") {
       return note.tags[i][1]
-    } else if (note.tags[i-1]?.[0] === "p") {
-      return note.tags[i-1][1]
+    } else if (note.tags[i - 1]?.[0] === "p") {
+      return note.tags[i - 1][1]
     } else {
       return Tags.from(note).type("p").values().nth(i)
     }
@@ -140,7 +140,7 @@
   </p>
   {#if showMedia && links.length > 0}
     <div on:click={e => e.stopPropagation()}>
-      <Carousel {links} />
+      <MediaSet {links} />
     </div>
   {/if}
   {#if entities.length > 0}

src/views/notes/NoteCreate.svelte

@@ -8,7 +8,7 @@
   import Button from "src/partials/Button.svelte"
   import Compose from "src/partials/Compose.svelte"
   import ImageInput from "src/partials/ImageInput.svelte"
-  import CarouselItem from "src/partials/CarouselItem.svelte"
+  import Media from "src/partials/Media.svelte"
   import Input from "src/partials/Input.svelte"
   import RelayCardSimple from "src/partials/RelayCardSimple.svelte"
   import Content from "src/partials/Content.svelte"
@@ -113,8 +113,8 @@
         </div>
       </div>
       {#if image}
-        <CarouselItem
-          link={{type: 'image', url: image}}
+        <Media
+          link={{type: "image", url: image}}
           onClose={() => {
             image = null
           }} />