wip

locales/ja-JP.yml

@@ -587,6 +587,11 @@ desktop/views/components/media-audio.vue:
   sensitive: "閲覧注意"
   click-to-show: "クリックして表示"
 
+desktop/views/components/media-download.vue:
+  sensitive: "閲覧注意"
+  click-to-show: "クリックして表示"
+  download: "ダウンロード"
+
 desktop/views/components/follow-button.vue:
   following: "フォロー中"
   follow: "フォロー"

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

@@ -3,8 +3,9 @@
 	<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 :audio="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"/>
+			<mk-media-audio :audio="media" :key="media.id" v-else-if="media.type.startsWith('audio')"/>
+			<mk-media-image :image="media" :key="media.id" v-else-if="media.type.startsWith('image')" :raw="raw"/>
+			<mk-media-download :download="media" :key="media.id" v-else/>
 		</template>
 	</div>
 </div>

src/client/app/desktop/views/components/media-download.vue

@@ -0,0 +1,79 @@
+<template>
+<div class="ldwbgwstjsdgcjruamauqdrffetqudry" v-if="download.isSensitive && hide" @click="hide = false">
+	<div>
+		<b>%fa:exclamation-triangle% %i18n:@sensitive%</b>
+		<span>%i18n:@click-to-show%</span>
+	</div>
+</div>
+<a class="reiujibreakfastbreadbaconeggnuts" v-else
+	:href="download.url"
+	:style="style"
+	:title="download.name"
+	download="{{ download.name }}{{ download.ext }}"
+>
+	<div>
+		<div>%fa:download%</div>
+		<div>%i18n:@download%</div>
+		<div>{{ download.name }}{{ download.ext }}</div>
+	</div>
+</a>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	props: {
+		download: {
+			type: Object,
+			required: true
+		},
+		raw: {
+			default: false
+		},
+		hide: {
+			type: Boolean,
+			default: true
+		}
+	},
+	computed: {
+		style(): any {
+			return {
+				'background-color': this.download.properties.avgColor && this.download.properties.avgColor.length == 3 ? `rgb(${this.download.properties.avgColor.join(',')})` : 'transparent',
+				'background-download': this.raw ? `url(${this.download.url})` : `url(${this.download.thumbnailUrl})`
+			};
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.reiujibreakfastbreadbaconeggnuts
+	display flex
+	justify-content center
+	align-items center
+
+	> div
+		display table-cell
+		text-align center
+		font-size 12px
+
+		> *
+			display block
+
+.ldwbgwstjsdgcjruamauqdrffetqudry
+	display flex
+	justify-content center
+	align-items center
+	background #111
+	color #fff
+
+	> div
+		display table-cell
+		text-align center
+		font-size 12px
+
+		> *
+			display block
+
+</style>