diff options
| author | misskey-release-bot[bot] <157398866+misskey-release-bot[bot]@users.noreply.github.com> | 2024-09-29 11:42:24 +0000 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2024-09-29 11:42:24 +0000 |
| commit | 5fc8b3bc5018a2cb553f114a570cc33ef6831163 (patch) | |
| tree | 40edc874ae384548fd13e55fff6e317d1ef84fbb /packages/frontend-embed/src/components/EmMediaVideo.vue | |
| parent | Merge pull request #14391 from misskey-dev/develop (diff) | |
| parent | Release: 2024.9.0 (diff) | |
| download | misskey-5fc8b3bc5018a2cb553f114a570cc33ef6831163.tar.gz misskey-5fc8b3bc5018a2cb553f114a570cc33ef6831163.tar.bz2 misskey-5fc8b3bc5018a2cb553f114a570cc33ef6831163.zip | |
Merge pull request #14580 from misskey-dev/develop
Release: 2024.9.0
Diffstat (limited to 'packages/frontend-embed/src/components/EmMediaVideo.vue')
| -rw-r--r-- | packages/frontend-embed/src/components/EmMediaVideo.vue | 64 |
1 files changed, 64 insertions, 0 deletions
diff --git a/packages/frontend-embed/src/components/EmMediaVideo.vue b/packages/frontend-embed/src/components/EmMediaVideo.vue new file mode 100644 index 0000000000..ce751f9acd --- /dev/null +++ b/packages/frontend-embed/src/components/EmMediaVideo.vue @@ -0,0 +1,64 @@ +<!-- +SPDX-FileCopyrightText: syuilo and misskey-project +SPDX-License-Identifier: AGPL-3.0-only +--> + +<template> +<a :href="href" target="_blank" :class="$style.root"> + <img v-if="!video.isSensitive && video.thumbnailUrl" :class="$style.thumbnail" :src="video.thumbnailUrl"> + <div :class="$style.videoOverlayPlayButton"><i class="ti ti-player-play-filled"></i></div> +</a> +</template> + +<script setup lang="ts"> +import * as Misskey from 'misskey-js'; + +defineProps<{ + video: Misskey.entities.DriveFile; + href: string; +}>(); +</script> + +<style lang="scss" module> +.root { + position: relative; + box-sizing: border-box; + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: auto; + aspect-ratio: 16 / 9; + padding: var(--margin); + border: 1px solid var(--divider); + border-radius: var(--radius); + background-color: #000; + + &:hover { + text-decoration: none; + } +} + +.thumbnail { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + object-fit: cover; +} + +.videoOverlayPlayButton { + background: var(--accent); + color: #fff; + padding: 1rem; + border-radius: 99rem; + + font-size: 1rem; + line-height: 1rem; + + &:focus-visible { + outline: none; + } +} +</style> |