Add support for .mp3 and .wav urls

.changeset/yellow-bugs-rest.md

@@ -0,0 +1,5 @@
+---
+"nostrudel": minor
+---
+
+Add support for .mp3 and .wav urls

src/components/embed-event/event-types/embedded-unknown.tsx

@@ -21,6 +21,7 @@ import { EmbedableContent, embedUrls } from "../../../helpers/embeds";
 import Timestamp from "../../timestamp";
 import { CodeIcon } from "../../icons";
 import NoteDebugModal from "../../debug-modals/note-debug-modal";
+import { renderAudioUrl } from "../../embed-types/audio";
 
 export default function EmbeddedUnknown({ event, ...props }: Omit<CardProps, "children"> & { event: NostrEvent }) {
   const debugModal = useDisclosure();
@@ -34,7 +35,7 @@ export default function EmbeddedUnknown({ event, ...props }: Omit<CardProps, "ch
     jsx = embedNostrHashtags(jsx, event);
     jsx = embedEmoji(jsx, event);
 
-    jsx = embedUrls(jsx, [renderImageUrl, renderVideoUrl, renderGenericUrl]);
+    jsx = embedUrls(jsx, [renderImageUrl, renderVideoUrl, renderAudioUrl, renderGenericUrl]);
 
     return jsx;
   }, [event.content, alt]);

src/components/embed-types/audio.tsx

@@ -0,0 +1,20 @@
+import styled from "@emotion/styled";
+import { isAudioURL } from "../../helpers/url";
+
+const StyledAudio = styled.audio`
+  max-width: 30rem;
+  max-height: 20rem;
+  width: 100%;
+  position: relative;
+  z-index: 1;
+`;
+
+export function renderAudioUrl(match: URL) {
+  if (!isAudioURL(match)) return null;
+
+  return (
+    <StyledAudio controls>
+      <source src={match.toString()} />
+    </StyledAudio>
+  );
+}

src/components/note/text-note-contents.tsx

@@ -30,6 +30,7 @@ import {
 } from "../embed-types";
 import { LightboxProvider } from "../lightbox-provider";
 import { renderModelUrl } from "../embed-types/model";
+import { renderAudioUrl } from "../embed-types/audio";
 
 function buildContents(event: NostrEvent | DraftNostrEvent, simpleLinks = false) {
   let content: EmbedableContent = [event.content.trim()];
@@ -52,6 +53,7 @@ function buildContents(event: NostrEvent | DraftNostrEvent, simpleLinks = false)
     renderSoundCloudUrl,
     renderImageUrl,
     renderVideoUrl,
+    renderAudioUrl,
     renderModelUrl,
     simpleLinks ? renderGenericUrl : renderOpenGraphUrl,
   ]);

src/helpers/url.ts

@@ -4,6 +4,7 @@ export const convertToUrl = (url: string | URL) => (url instanceof URL ? url : n
 
 export const IMAGE_EXT = [".svg", ".gif", ".png", ".jpg", ".jpeg", ".webp", ".avif"];
 export const VIDEO_EXT = [".mp4", ".mkv", ".webm", ".mov"];
+export const AUDIO_EXT = [".mp3", ".wav", ".ogg", ".aac"];
 
 export function isMediaURL(url: string | URL) {
   return isImageURL(url) || isVideoURL(url);
@@ -16,6 +17,10 @@ export function isVideoURL(url: string | URL) {
   const u = new URL(url);
   return VIDEO_EXT.some((ext) => u.pathname.endsWith(ext));
 }
+export function isAudioURL(url: string | URL) {
+  const u = new URL(url);
+  return AUDIO_EXT.some((ext) => u.pathname.endsWith(ext));
+}
 
 export function normalizeRelayUrl(relayUrl: string) {
   const url = new URL(relayUrl);

src/services/relay-scoreboard.ts

@@ -259,7 +259,7 @@ relayScoreboardService.loadStats();
 
 setInterval(() => {
   relayScoreboardService.saveStats();
-}, 1000 * 5);
+}, 1000 * 30);
 
 if (import.meta.env.DEV) {
   // @ts-ignore

src/views/channels/components/channel-message-content.tsx

@@ -29,6 +29,7 @@ import {
   renderYoutubeUrl,
 } from "../../../components/embed-types";
 import { LightboxProvider } from "../../../components/lightbox-provider";
+import { renderAudioUrl } from "../../../components/embed-types/audio";
 
 const ChannelMessageContent = memo(({ message, children, ...props }: BoxProps & { message: NostrEvent }) => {
   const content = useMemo(() => {
@@ -52,6 +53,7 @@ const ChannelMessageContent = memo(({ message, children, ...props }: BoxProps &
       renderSoundCloudUrl,
       renderImageUrl,
       renderVideoUrl,
+      renderAudioUrl,
       renderGenericUrl,
     ]);
 

src/views/dms/components/direct-message-content.tsx

@@ -21,6 +21,7 @@ import {
 } from "../../../components/embed-types";
 import { TrustProvider } from "../../../providers/local/trust";
 import { LightboxProvider } from "../../../components/lightbox-provider";
+import { renderAudioUrl } from "../../../components/embed-types/audio";
 
 export default function DirectMessageContent({
   event,
@@ -45,6 +46,7 @@ export default function DirectMessageContent({
     renderSoundCloudUrl,
     renderImageUrl,
     renderVideoUrl,
+    renderAudioUrl,
     renderGenericUrl,
   ]);