zenn
095a8fa5f0
종류별 업로드 크기 한도와 413 안내를 추가하고, 임베드·미디어 라이브 프리뷰·제목 Enter 포커스·스크롤 동작을 보정한다. Co-authored-by: Cursor <cursoragent@cursor.com>
55 lines
1.4 KiB
Vue
55 lines
1.4 KiB
Vue
<script setup>
|
|
const props = defineProps({
|
|
src: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
title: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
poster: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
caption: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
})
|
|
|
|
/**
|
|
* 재생 가능한 비디오 URL인지 확인한다.
|
|
* @returns {boolean} 비디오 URL 여부
|
|
*/
|
|
const hasVideoSource = computed(() => Boolean(props.src && (props.src.startsWith('/') || /^https?:\/\//i.test(props.src))))
|
|
</script>
|
|
|
|
<template>
|
|
<figure class="prose-video my-8">
|
|
<div class="prose-video__shell overflow-hidden rounded-[10px] border border-[var(--site-line)] bg-[var(--site-panel)] shadow-[0_16px_40px_rgba(15,23,42,0.08)]">
|
|
<video
|
|
v-if="hasVideoSource"
|
|
class="prose-video__media aspect-video w-full bg-black object-cover"
|
|
:src="src"
|
|
:poster="poster || undefined"
|
|
:title="title || 'Video'"
|
|
controls
|
|
preload="metadata"
|
|
/>
|
|
<div
|
|
v-else
|
|
class="prose-video__empty flex aspect-video w-full items-center justify-center bg-[color-mix(in_srgb,var(--site-line)_45%,var(--site-panel))] text-sm font-semibold text-[var(--site-muted)]"
|
|
>
|
|
비디오 URL이 없습니다.
|
|
</div>
|
|
</div>
|
|
<figcaption
|
|
v-if="caption || title"
|
|
class="prose-video__caption mt-3 text-center text-sm leading-relaxed text-[var(--site-muted)]"
|
|
>
|
|
{{ caption || title }}
|
|
</figcaption>
|
|
</figure>
|
|
</template>
|