matt/flotilla
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions

Render audio attachments as a player (#429)

Browse source
This commit is contained in:
Coracle-Bot 2026-09-07 22:08:50 +00:00 committed by hodlbod
parent 898ac18450
commit 3bd821efc1
2 changed files with 17 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/app/components/ContentLinkBlock.svelte
View file

@ -26,7 +26,7 @@
import ContentLinkBlockImage from "@app/components/ContentLinkBlockImage.svelte" import ContentLinkBlockImage from "@app/components/ContentLinkBlockImage.svelte"
import {pushModal} from "@app/modal" import {pushModal} from "@app/modal"
import {PLATFORM_URL, THUMBNAIL_URL} from "@app/env" import {PLATFORM_URL, THUMBNAIL_URL} from "@app/env"
import {IMAGE_CONTENT_TYPES, VIDEO_CONTENT_TYPES} from "@app/content" import {AUDIO_CONTENT_TYPES, IMAGE_CONTENT_TYPES, VIDEO_CONTENT_TYPES} from "@app/content"
import {isRoomId} from "@app/rooms" import {isRoomId} from "@app/rooms"
const {value, event} = $props() const {value, event} = $props()
@ -43,6 +43,10 @@
const fileType = tagValue(tagSpec("file-type"), event.tags) || "" const fileType = tagValue(tagSpec("file-type"), event.tags) || ""
const isAudio =
Boolean(url.match(/\.(mp3|m4a|wav|ogg|oga|opus|flac)$/)) ||
AUDIO_CONTENT_TYPES.includes(fileType)
const getVideoPoster = (videoUrl: string): string | undefined => { const getVideoPoster = (videoUrl: string): string | undefined => {
if (Capacitor.getPlatform() === "android" && THUMBNAIL_URL) { if (Capacitor.getPlatform() === "android" && THUMBNAIL_URL) {
return `${THUMBNAIL_URL}/thumbnail?url=${encodeURIComponent(videoUrl)}` return `${THUMBNAIL_URL}/thumbnail?url=${encodeURIComponent(videoUrl)}`
@ -60,6 +64,8 @@
{#if isRoomOrRelay} {#if isRoomOrRelay}
<ContentLinkUrl {url} class="link-content whitespace-nowrap" /> <ContentLinkUrl {url} class="link-content whitespace-nowrap" />
{:else if isAudio}
<audio controls src={url} preload="metadata" class="my-2 w-full max-w-xl"></audio>
{:else} {:else}
<Link {external} {href} class="my-2 block"> <Link {external} {href} class="my-2 block">
{#if url.match(/\.(mov|webm|mp4)$/) || VIDEO_CONTENT_TYPES.includes(fileType)} {#if url.match(/\.(mov|webm|mp4)$/) || VIDEO_CONTENT_TYPES.includes(fileType)}

10
src/app/content.ts
View file

@ -22,6 +22,16 @@ export const IMAGE_CONTENT_TYPES = ["image/jpeg", "image/png", "image/gif", "ima
export const VIDEO_CONTENT_TYPES = ["video/quicktime", "video/webm", "video/mp4"] export const VIDEO_CONTENT_TYPES = ["video/quicktime", "video/webm", "video/mp4"]
export const AUDIO_CONTENT_TYPES = [
"audio/mpeg",
"audio/mp4",
"audio/wav",
"audio/x-wav",
"audio/ogg",
"audio/webm",
"audio/flac",
]
export const makeCommentFilter = (kinds: number[], extra: Filter = {}) => ({ export const makeCommentFilter = (kinds: number[], extra: Filter = {}) => ({
kinds: [COMMENT], kinds: [COMMENT],
"#K": kinds.map(String), "#K": kinds.map(String),