jormungandr-bite/packages/client/src/components/media-video.vue
Johann150 bb8e8d7daf properly display alt text for videos ()
The alt text is already properly federated and given by the API,
it is just not displayed properly by the client.
2022-06-09 23:35:58 +09:00

88 lines
1.7 KiB
Vue

<template>
<div v-if="hide" class="icozogqfvdetwohsdglrbswgrejoxbdj" @click="hide = false">
<div>
<b><i class="fas fa-exclamation-triangle"></i> {{ $ts.sensitive }}</b>
<span>{{ $ts.clickToShow }}</span>
</div>
</div>
<div v-else class="kkjnbbplepmiyuadieoenjgutgcmtsvu">
<video
:poster="video.thumbnailUrl"
:title="video.comment"
:alt="video.comment"
preload="none"
controls
@contextmenu.stop
>
<source
:src="video.url"
:type="video.type"
>
</video>
<i class="fas fa-eye-slash" @click="hide = true"></i>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import * as misskey from 'misskey-js';
import { defaultStore } from '@/store';
const props = defineProps<{
video: misskey.entities.DriveFile;
}>();
const hide = ref((defaultStore.state.nsfw === 'force') ? true : props.video.isSensitive && (defaultStore.state.nsfw !== 'ignore'));
</script>
<style lang="scss" scoped>
.kkjnbbplepmiyuadieoenjgutgcmtsvu {
position: relative;
> i {
display: block;
position: absolute;
border-radius: 6px;
background-color: var(--fg);
color: var(--accentLighten);
font-size: 14px;
opacity: .5;
padding: 3px 6px;
text-align: center;
cursor: pointer;
top: 12px;
right: 12px;
}
> video {
display: flex;
justify-content: center;
align-items: center;
font-size: 3.5em;
overflow: hidden;
background-position: center;
background-size: cover;
width: 100%;
height: 100%;
}
}
.icozogqfvdetwohsdglrbswgrejoxbdj {
display: flex;
justify-content: center;
align-items: center;
background: #111;
color: #fff;
> div {
display: table-cell;
text-align: center;
font-size: 12px;
> b {
display: block;
}
}
}
</style>