You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
37 lines
1.1 KiB
37 lines
1.1 KiB
<template>
|
|
<article>
|
|
<div class="media-visual" :class="visualClass">
|
|
<span v-if="variant === 'live'" class="live-corner"><i></i>LIVE</span>
|
|
<t-button shape="square" variant="text" @click="$emit('play')">
|
|
<svg><use href="#i-play" /></svg>
|
|
</t-button>
|
|
<small v-if="variant === 'live'">{{ source }}</small>
|
|
<small v-else class="media-duration">{{ duration }}</small>
|
|
</div>
|
|
<div class="media-card-copy">
|
|
<span><strong>{{ name }}</strong><small>{{ desc }}</small></span>
|
|
<t-button
|
|
class="icon-button"
|
|
shape="square"
|
|
variant="text"
|
|
@click="$emit('action')"
|
|
>
|
|
<svg>
|
|
<use :href="variant === 'live' ? '#i-more' : '#i-download'" />
|
|
</svg>
|
|
</t-button>
|
|
</div>
|
|
</article>
|
|
</template>
|
|
|
|
<script setup>
|
|
defineProps({
|
|
variant: { type: String, required: true }, // 'live' | 'video'
|
|
name: { type: String, required: true },
|
|
desc: { type: String, required: true },
|
|
visualClass: { type: String, required: true },
|
|
source: { type: String, default: '' },
|
|
duration: { type: String, default: '' }
|
|
})
|
|
defineEmits(['play', 'action'])
|
|
</script>
|
|
|