zenn
095a8fa5f0
종류별 업로드 크기 한도와 413 안내를 추가하고, 임베드·미디어 라이브 프리뷰·제목 Enter 포커스·스크롤 동작을 보정한다. Co-authored-by: Cursor <cursoragent@cursor.com>
61 lines
2.1 KiB
Vue
61 lines
2.1 KiB
Vue
<script setup>
|
|
const props = defineProps({
|
|
src: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
title: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
description: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
})
|
|
|
|
/**
|
|
* 표시용 오디오 제목을 반환한다.
|
|
* @returns {string} 오디오 제목
|
|
*/
|
|
const displayTitle = computed(() => props.title || 'Audio')
|
|
|
|
/**
|
|
* 재생 가능한 오디오 URL인지 확인한다.
|
|
* @returns {boolean} 오디오 URL 여부
|
|
*/
|
|
const hasAudioSource = computed(() => Boolean(props.src && (props.src.startsWith('/') || /^https?:\/\//i.test(props.src))))
|
|
</script>
|
|
|
|
<template>
|
|
<section class="prose-audio my-8 rounded-[10px] border border-[var(--site-line)] bg-[var(--site-panel)] p-4 shadow-[0_14px_36px_rgba(15,23,42,0.06)] sm:p-5">
|
|
<div class="prose-audio__inner flex flex-col gap-4 sm:flex-row sm:items-center">
|
|
<div class="prose-audio__icon flex h-20 w-20 shrink-0 items-center justify-center rounded-[6px] bg-[var(--site-accent)] text-white sm:h-[86px] sm:w-[86px]">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-9 w-9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
|
<path d="M9 18V5l10-2v13" />
|
|
<circle cx="6" cy="18" r="3" />
|
|
<circle cx="16" cy="16" r="3" />
|
|
</svg>
|
|
</div>
|
|
<div class="prose-audio__body min-w-0 flex-1">
|
|
<p class="prose-audio__title mb-2 text-base font-semibold leading-snug text-[var(--site-text)] sm:text-lg">
|
|
{{ displayTitle }}
|
|
</p>
|
|
<p v-if="description" class="prose-audio__description mb-3 text-sm leading-relaxed text-[var(--site-muted)]">
|
|
{{ description }}
|
|
</p>
|
|
<audio
|
|
v-if="hasAudioSource"
|
|
class="prose-audio__player w-full accent-[var(--site-accent)]"
|
|
:src="src"
|
|
controls
|
|
preload="metadata"
|
|
/>
|
|
<p v-else class="prose-audio__empty text-sm font-semibold text-[var(--site-muted)]">
|
|
오디오 URL이 없습니다.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|