forked from BRETT/BRETT
FliesentischKingandDevin
fe9e723c72
- Audio/video attachments render as media cards (cover or icon, title/artist/size) instead of plain file chips; image attachments use 3:2 thumbnails matching the audio card height - Players open in a Popover (autoplay on open) with a dimming overlay; AudioPlayerDialog/VideoPlayerDialog removed - New useMediaVolume composable shares volume/mute between all audio players and Plyr via the 4brett-player storage key - Player buttons and Plyr controls follow the theme border radius - Portrait videos: aspect is applied even when metadata loaded before hydration, and the raw video is height-capped pre-JS Generated with [Devin](https://devin.ai) Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
88 lines
2.7 KiB
Vue
88 lines
2.7 KiB
Vue
<script setup lang="ts">
|
|
const props = defineProps<{
|
|
src: string
|
|
name: string
|
|
autoplay?: boolean
|
|
}>()
|
|
|
|
const audioRef = ref<HTMLAudioElement>()
|
|
const { playing, currentTime, duration, volume, muted } = useMediaVolume(audioRef)
|
|
|
|
onMounted(() => {
|
|
if (props.autoplay) playing.value = true
|
|
})
|
|
|
|
function toggle() {
|
|
playing.value = !playing.value
|
|
}
|
|
|
|
function seek(event: Event) {
|
|
currentTime.value = Number((event.target as HTMLInputElement).value)
|
|
}
|
|
|
|
function formatTime(sec: number) {
|
|
if (!Number.isFinite(sec)) return '0:00'
|
|
const m = Math.floor(sec / 60)
|
|
const s = Math.floor(sec % 60).toString().padStart(2, '0')
|
|
return `${m}:${s}`
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="flex w-full max-w-md items-center gap-2.5 rounded-md border bg-muted/50 px-3 py-2"
|
|
@click.stop
|
|
>
|
|
<audio ref="audioRef" :src="src" preload="metadata" class="hidden" />
|
|
<button
|
|
type="button"
|
|
class="flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-md transition-colors hover:bg-accent"
|
|
:aria-label="playing ? $t('audio.pause') : $t('audio.play')"
|
|
@click="toggle"
|
|
>
|
|
<Icon name="ph:pause-fill" v-if="playing" class="size-4" />
|
|
<Icon name="ph:play-fill" v-else class="size-4" />
|
|
</button>
|
|
<span class="shrink-0 text-xs tabular-nums text-muted-foreground">{{ formatTime(currentTime) }}</span>
|
|
<input
|
|
type="range"
|
|
min="0"
|
|
:max="Number.isFinite(duration) ? duration : 0"
|
|
step="0.1"
|
|
:value="currentTime"
|
|
:aria-label="$t('audio.seek')"
|
|
class="min-w-0 flex-1 cursor-pointer accent-primary"
|
|
@input="seek"
|
|
>
|
|
<span class="shrink-0 text-xs tabular-nums text-muted-foreground">{{ formatTime(duration) }}</span>
|
|
<button
|
|
type="button"
|
|
class="flex size-7 shrink-0 cursor-pointer items-center justify-center rounded-md transition-colors hover:bg-accent"
|
|
:aria-label="muted ? $t('audio.unmute') : $t('audio.mute')"
|
|
@click="muted = !muted"
|
|
>
|
|
<Icon name="ph:speaker-x-fill" v-if="muted" class="size-3.5" />
|
|
<Icon name="ph:speaker-high-fill" v-else class="size-3.5" />
|
|
</button>
|
|
<input
|
|
v-model.number="volume"
|
|
type="range"
|
|
min="0"
|
|
max="1"
|
|
step="0.05"
|
|
:aria-label="$t('audio.volume')"
|
|
class="w-14 min-w-0 shrink-0 cursor-pointer accent-primary"
|
|
:class="muted && 'opacity-40'"
|
|
>
|
|
<a
|
|
:href="src"
|
|
:download="name"
|
|
class="flex size-7 shrink-0 cursor-pointer items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
|
|
:aria-label="$t('audio.download')"
|
|
:title="$t('audio.download')"
|
|
>
|
|
<Icon name="ph:download-fill" class="size-3.5" />
|
|
</a>
|
|
</div>
|
|
</template>
|