wip

2 files changed, 69 insertions, 0 deletions

diff --git a/src/client/app/common/views/components/media-list.vue b/src/client/app/common/views/components/media-list.vue
index cdfc2c8d3c..c531f9ac91 100644
--- a/src/client/app/common/views/components/media-list.vue
+++ b/src/client/app/common/views/components/media-list.vue
@@ -3,6 +3,7 @@
 	<div :data-count="mediaList.length" ref="grid">
 		<template v-for="media in mediaList">
 			<mk-media-video :video="media" :key="media.id" v-if="media.type.startsWith('video')" :inline-playable="mediaList.length === 1"/>
+			<mk-media-audio :video="media" :key="media.id" v-if="media.type.startsWith('audio')" :inline-playable="mediaList.length === 1"/>
 			<mk-media-image :image="media" :key="media.id" v-else :raw="raw"/>
 		</template>
 	</div>
diff --git a/src/client/app/desktop/views/components/media-audio.vue b/src/client/app/desktop/views/components/media-audio.vue
new file mode 100644
index 0000000000..4a0c26fb9e
--- /dev/null
+++ b/src/client/app/desktop/views/components/media-audio.vue
@@ -0,0 +1,68 @@
+<template>
+<div class="abunaiaudionankasirankedoichioux" v-if="audio.isSensitive && hide" @click="hide = false">
+	<div>
+		<b>%fa:exclamation-triangle% %i18n:@sensitive%</b>
+		<span>%i18n:@click-to-show%</span>
+	</div>
+</div>
+<div class="komeijiokayusabanomisoniohitashi" v-else>
+	<audio class="audio"
+		:src="audio.url"
+		:title="audio.name"
+		controls
+		ref="audio"
+		v-if="inlinePlayable" />
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	props: {
+		audio: {
+			type: Object,
+			required: true
+		},
+		inlinePlayable: {
+			default: false
+		},
+		hide: {
+			type: Boolean,
+			default: true
+		}
+	},
+	computed: {
+		imageStyle(): any {
+			return {
+				'background-image': `url(${this.audio.url})`
+			};
+		}
+	}
+})
+</script>
+
+<style lang="stylus" scoped>
+.komeijiokayusabanomisoniohitashi
+	.audio
+		display block
+		width 100%
+		height 100%
+		border-radius 4px
+
+.abunaiaudionankasirankedoichioux
+	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>