Improve media list

src/client/app/common/views/components/media-banner.vue

@@ -0,0 +1,85 @@
+<template>
+<div class="mk-media-banner">
+	<div class="mk-media-banner-sensitive" v-if="media.isSensitive && hide" @click="hide = false">
+		<span class="mk-media-banner-icon">%fa:exclamation-triangle%</span>
+		<b>%i18n:@sensitive%</b>
+		<span>%i18n:@click-to-show%</span>
+	</div>
+	<div class="mk-media-banner-audio" v-else-if="media.type.startsWith('audio')">
+		<audio class="audio"
+			:src="media.url"
+			:title="media.name"
+			controls
+			ref="audio"
+			preload="metadata" />
+	</div>
+	<a class="mk-media-banner-download" v-else
+		:href="media.url"
+		:title="media.name"
+		:download="media.name"
+	>
+		<span class="mk-media-banner-icon">%fa:download%</span>
+		<b>{{ media.name }}</b>
+	</a>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	props: {
+		media: {
+			type: Object,
+			required: true
+		},
+		hide: {
+			type: Boolean,
+			default: true
+		}
+	}
+})
+</script>
+
+<style lang="stylus" scoped>
+.mk-media-banner
+	width 100%
+	border-radius 4px
+	margin-top 4px
+	overflow hidden
+
+	.mk-media-banner-download,
+	.mk-media-banner-sensitive
+		display flex
+		align-items center
+		font-size 12px
+		padding .2em .6em
+		white-space nowrap
+
+		> *
+			display block
+
+		> b
+			flex-shrink 2147483647
+			overflow hidden
+			text-overflow ellipsis
+
+		> *:not(:last-child)
+			margin-right .2em
+
+		> .mk-media-banner-icon
+			font-size 1.6em
+
+	.mk-media-banner-download
+		background #f7f7f7
+
+	.mk-media-banner-sensitive
+		background #111
+		color #fff
+
+	.mk-media-banner-audio
+		.audio
+			display block
+			width 100%
+			height 100%
+</style>