wip

2 files changed, 81 insertions, 1 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..41b8bf9bb7 100644
--- a/src/client/app/common/views/components/media-list.vue
+++ b/src/client/app/common/views/components/media-list.vue
@@ -3,7 +3,8 @@
 	<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-image :image="media" :key="media.id" v-else :raw="raw"/>
+			<mk-media-image :image="media" :key="media.id" v-if="media.type.startsWith('image')" :raw="raw"/>
+			<mk-media-download :download="media" :key="media.id" v-else :raw="raw"/>
 		</template>
 	</div>
 </div>
diff --git a/src/client/app/desktop/views/components/media-download.vue b/src/client/app/desktop/views/components/media-download.vue
new file mode 100644
index 0000000000..236b065204
--- /dev/null
+++ b/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>