to keep things manageable i merged a lot of one off values into just a handful of common sizes, so some parts of the ui will look different than upstream even with the "Misskey" rounding mode
86 lines
1.7 KiB
Vue
86 lines
1.7 KiB
Vue
<!--
|
|
SPDX-FileCopyrightText: syuilo and other misskey contributors
|
|
SPDX-License-Identifier: AGPL-3.0-only
|
|
-->
|
|
|
|
<template>
|
|
<div :class="$style.root">
|
|
<div v-if="media.isSensitive && hide" :class="$style.sensitive" @click="hide = false">
|
|
<span style="font-size: 1.6em;"><i class="ph-warning ph-bold ph-lg"></i></span>
|
|
<b>{{ i18n.ts.sensitive }}</b>
|
|
<span>{{ i18n.ts.clickToShow }}</span>
|
|
</div>
|
|
<div v-else-if="media.type.startsWith('audio') && media.type !== 'audio/midi'" :class="$style.audio">
|
|
<audio
|
|
ref="audioEl"
|
|
:src="media.url"
|
|
:title="media.name"
|
|
controls
|
|
preload="metadata"
|
|
/>
|
|
</div>
|
|
<a
|
|
v-else :class="$style.download"
|
|
:href="media.url"
|
|
:title="media.name"
|
|
:download="media.name"
|
|
>
|
|
<span style="font-size: 1.6em;"><i class="ph-download ph-bold ph-lg"></i></span>
|
|
<b>{{ media.name }}</b>
|
|
</a>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { onMounted, shallowRef, watch } from 'vue';
|
|
import * as Misskey from 'misskey-js';
|
|
import { soundConfigStore } from '@/scripts/sound.js';
|
|
import { i18n } from '@/i18n.js';
|
|
|
|
const props = withDefaults(defineProps<{
|
|
media: Misskey.entities.DriveFile;
|
|
}>(), {
|
|
});
|
|
|
|
const audioEl = shallowRef<HTMLAudioElement>();
|
|
let hide = $ref(true);
|
|
|
|
watch(audioEl, () => {
|
|
if (audioEl.value) {
|
|
audioEl.value.volume = 0.3;
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" module>
|
|
.root {
|
|
width: 100%;
|
|
border-radius: var(--radius-xs);
|
|
margin-top: 4px;
|
|
overflow: clip;
|
|
}
|
|
|
|
.download,
|
|
.sensitive {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 12px;
|
|
padding: 8px 12px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.download {
|
|
background: var(--noteAttachedFile);
|
|
}
|
|
|
|
.sensitive {
|
|
background: #111;
|
|
color: #fff;
|
|
}
|
|
|
|
.audio {
|
|
border-radius: var(--radius-sm);
|
|
overflow: clip;
|
|
}
|
|
</style>
|