From ebeaef94e2545098ee81f143503180defa731793 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Wed, 5 Sep 2018 01:08:18 +0900
Subject: [PATCH] Improve media list

---
 locales/ja-JP.yml                             |  13 +--
 .../app/common/views/components/index.ts      |   2 +
 .../common/views/components/media-banner.vue  |  85 ++++++++++++++
 .../common/views/components/media-list.vue    | 109 +++++++++---------
 .../app/desktop/views/components/index.ts     |   2 -
 .../desktop/views/components/media-audio.vue  |  67 -----------
 .../views/components/media-download.vue       |  79 -------------
 .../desktop/views/components/media-image.vue  |   2 +-
 .../desktop/views/components/media-video.vue  |  21 +---
 .../mobile/views/components/media-image.vue   |   2 +-
 10 files changed, 152 insertions(+), 230 deletions(-)
 create mode 100644 src/client/app/common/views/components/media-banner.vue
 delete mode 100644 src/client/app/desktop/views/components/media-audio.vue
 delete mode 100644 src/client/app/desktop/views/components/media-download.vue

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 193c3c5022..de5505e7db 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -250,6 +250,10 @@ common/views/components/connect-failed.troubleshooter.vue:
   flush: "キャッシュの削除"
   set-version: "バージョン指定"
 
+common/views/components/media-banner.vue:
+  sensitive: "閲覧注意"
+  click-to-show: "クリックして表示"
+
 common/views/components/messaging.vue:
   search-user: "ユーザーを探す"
   you: "あなた"
@@ -583,15 +587,6 @@ desktop/views/components/media-video.vue:
   sensitive: "閲覧注意"
   click-to-show: "クリックして表示"
 
-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: "フォロー"
diff --git a/src/client/app/common/views/components/index.ts b/src/client/app/common/views/components/index.ts
index 4700b6269e..43cde6c54f 100644
--- a/src/client/app/common/views/components/index.ts
+++ b/src/client/app/common/views/components/index.ts
@@ -18,6 +18,7 @@ import reactionsViewer from './reactions-viewer.vue';
 import time from './time.vue';
 import timer from './timer.vue';
 import mediaList from './media-list.vue';
+import mediaBanner from './media-banner.vue';
 import uploader from './uploader.vue';
 import specialMessage from './special-message.vue';
 import streamIndicator from './stream-indicator.vue';
@@ -59,6 +60,7 @@ Vue.component('mk-reactions-viewer', reactionsViewer);
 Vue.component('mk-time', time);
 Vue.component('mk-timer', timer);
 Vue.component('mk-media-list', mediaList);
+Vue.component('mk-media-banner', mediaBanner);
 Vue.component('mk-uploader', uploader);
 Vue.component('mk-special-message', specialMessage);
 Vue.component('mk-stream-indicator', streamIndicator);
diff --git a/src/client/app/common/views/components/media-banner.vue b/src/client/app/common/views/components/media-banner.vue
new file mode 100644
index 0000000000..69cd579446
--- /dev/null
+++ b/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>
diff --git a/src/client/app/common/views/components/media-list.vue b/src/client/app/common/views/components/media-list.vue
index 0312c2dfda..e949c063ab 100644
--- a/src/client/app/common/views/components/media-list.vue
+++ b/src/client/app/common/views/components/media-list.vue
@@ -1,12 +1,15 @@
 <template>
 <div class="mk-media-list">
-	<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-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>
+	<template v-for="media in mediaList">
+		<mk-media-banner :media="media" :key="media.id" v-if="!media.type.startsWith('image') && !media.type.startsWith('video')"/>
+	</template>
+	<div class="mk-media-list-fixed" v-if="mediaList.filter(media => media.type.startsWith('image') || media.type.startsWith('video')).length > 0">
+		<div :data-count="mediaList.filter(media => media.type.startsWith('video') || media.type.startsWith('image')).length" ref="grid">
+			<template v-for="media in mediaList">
+				<mk-media-video :video="media" :key="media.id" v-if="media.type.startsWith('video')"/>
+				<mk-media-image :image="media" :key="media.id" v-else-if="media.type.startsWith('image')" :raw="raw"/>
+			</template>
+		</div>
 	</div>
 </div>
 </template>
@@ -32,62 +35,64 @@ export default Vue.extend({
 
 <style lang="stylus" scoped>
 .mk-media-list
-	width 100%
+	> .mk-media-list-fixed
+		width 100%
+		margin-top 4px
 
-	&:before
-		content ''
-		display block
-		padding-top 56.25% // 16:9
+		&:before
+			content ''
+			display block
+			padding-top 56.25% // 16:9
 
-	> div
-		position absolute
-		top 0
-		right 0
-		bottom 0
-		left 0
-		display grid
-		grid-gap 4px
+		> div
+			position absolute
+			top 0
+			right 0
+			bottom 0
+			left 0
+			display grid
+			grid-gap 4px
 
-		> *
-			overflow hidden
-			border-radius 4px
+			> *
+				overflow hidden
+				border-radius 4px
 
-		&[data-count="1"]
-			grid-template-rows 1fr
+			&[data-count="1"]
+				grid-template-rows 1fr
 
-		&[data-count="2"]
-			grid-template-columns 1fr 1fr
-			grid-template-rows 1fr
+			&[data-count="2"]
+				grid-template-columns 1fr 1fr
+				grid-template-rows 1fr
 
-		&[data-count="3"]
-			grid-template-columns 1fr 0.5fr
-			grid-template-rows 1fr 1fr
+			&[data-count="3"]
+				grid-template-columns 1fr 0.5fr
+				grid-template-rows 1fr 1fr
+
+				> *:nth-child(1)
+					grid-row 1 / 3
+
+				> *:nth-child(3)
+					grid-column 2 / 3
+					grid-row 2 / 3
+
+			&[data-count="4"]
+				grid-template-columns 1fr 1fr
+				grid-template-rows 1fr 1fr
 
 			> *:nth-child(1)
-				grid-row 1 / 3
+				grid-column 1 / 2
+				grid-row 1 / 2
+
+			> *:nth-child(2)
+				grid-column 2 / 3
+				grid-row 1 / 2
 
 			> *:nth-child(3)
+				grid-column 1 / 2
+				grid-row 2 / 3
+
+			> *:nth-child(4)
 				grid-column 2 / 3
 				grid-row 2 / 3
 
-		&[data-count="4"]
-			grid-template-columns 1fr 1fr
-			grid-template-rows 1fr 1fr
-
-		> *:nth-child(1)
-			grid-column 1 / 2
-			grid-row 1 / 2
-
-		> *:nth-child(2)
-			grid-column 2 / 3
-			grid-row 1 / 2
-
-		> *:nth-child(3)
-			grid-column 1 / 2
-			grid-row 2 / 3
-
-		> *:nth-child(4)
-			grid-column 2 / 3
-			grid-row 2 / 3
-
 </style>
diff --git a/src/client/app/desktop/views/components/index.ts b/src/client/app/desktop/views/components/index.ts
index 159ead4983..7b7a38afa2 100644
--- a/src/client/app/desktop/views/components/index.ts
+++ b/src/client/app/desktop/views/components/index.ts
@@ -13,7 +13,6 @@ import ellipsisIcon from './ellipsis-icon.vue';
 import mediaImage from './media-image.vue';
 import mediaImageDialog from './media-image-dialog.vue';
 import mediaVideo from './media-video.vue';
-import mediaAudio from './media-audio.vue';
 import notifications from './notifications.vue';
 import noteForm from './post-form.vue';
 import renoteForm from './renote-form.vue';
@@ -44,7 +43,6 @@ Vue.component('mk-ellipsis-icon', ellipsisIcon);
 Vue.component('mk-media-image', mediaImage);
 Vue.component('mk-media-image-dialog', mediaImageDialog);
 Vue.component('mk-media-video', mediaVideo);
-Vue.component('mk-media-audio', mediaAudio);
 Vue.component('mk-notifications', notifications);
 Vue.component('mk-post-form', noteForm);
 Vue.component('mk-renote-form', renoteForm);
diff --git a/src/client/app/desktop/views/components/media-audio.vue b/src/client/app/desktop/views/components/media-audio.vue
deleted file mode 100644
index 5d41947b17..0000000000
--- a/src/client/app/desktop/views/components/media-audio.vue
+++ /dev/null
@@ -1,67 +0,0 @@
-<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" />
-</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>
diff --git a/src/client/app/desktop/views/components/media-download.vue b/src/client/app/desktop/views/components/media-download.vue
deleted file mode 100644
index 236b065204..0000000000
--- a/src/client/app/desktop/views/components/media-download.vue
+++ /dev/null
@@ -1,79 +0,0 @@
-<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>
diff --git a/src/client/app/desktop/views/components/media-image.vue b/src/client/app/desktop/views/components/media-image.vue
index 0284872c68..904dc7f832 100644
--- a/src/client/app/desktop/views/components/media-image.vue
+++ b/src/client/app/desktop/views/components/media-image.vue
@@ -89,7 +89,7 @@ export default Vue.extend({
 		text-align center
 		font-size 12px
 
-		> b
+		> *
 			display block
 
 </style>
diff --git a/src/client/app/desktop/views/components/media-video.vue b/src/client/app/desktop/views/components/media-video.vue
index 6c60f2da96..0a374acb8f 100644
--- a/src/client/app/desktop/views/components/media-video.vue
+++ b/src/client/app/desktop/views/components/media-video.vue
@@ -6,19 +6,11 @@
 	</div>
 </div>
 <div class="vwxdhznewyashiknzolsoihtlpicqepe" v-else>
-	<video class="video"
-		:src="video.url"
-		:title="video.name"
-		controls
-		@dblclick.prevent="onClick"
-		ref="video"
-		v-if="inlinePlayable" />
 	<a class="thumbnail"
 		:href="video.url"
 		:style="imageStyle"
 		@click.prevent="onClick"
-		:title="video.name"
-		v-else>
+		:title="video.name">
 		%fa:R play-circle%
 	</a>
 </div>
@@ -34,9 +26,6 @@ export default Vue.extend({
 			type: Object,
 			required: true
 		},
-		inlinePlayable: {
-			default: false
-		},
 		hide: {
 			type: Boolean,
 			default: true
@@ -68,12 +57,6 @@ export default Vue.extend({
 
 <style lang="stylus" scoped>
 .vwxdhznewyashiknzolsoihtlpicqepe
-	.video
-		display block
-		width 100%
-		height 100%
-		border-radius 4px
-
 	.thumbnail
 		display flex
 		justify-content center
@@ -99,7 +82,7 @@ export default Vue.extend({
 		text-align center
 		font-size 12px
 
-		> b
+		> *
 			display block
 
 </style>
diff --git a/src/client/app/mobile/views/components/media-image.vue b/src/client/app/mobile/views/components/media-image.vue
index e40069bbe3..c8766f5464 100644
--- a/src/client/app/mobile/views/components/media-image.vue
+++ b/src/client/app/mobile/views/components/media-image.vue
@@ -65,7 +65,7 @@ export default Vue.extend({
 		text-align center
 		font-size 12px
 
-		> b
+		> *
 			display block
 
 </style>