From d8dcc4da275230e332fad0eb6ce09703d08aec30 Mon Sep 17 00:00:00 2001
From: Aya Morisawa <AyaMorisawa4869@gmail.com>
Date: Sat, 1 Sep 2018 23:12:51 +0900
Subject: [PATCH 01/11] Use string interpolation

---
 src/client/app/auth/views/index.vue                         | 2 +-
 src/client/app/boot.js                                      | 2 +-
 src/client/app/common/scripts/streaming/stream.ts           | 4 ++--
 src/client/app/common/views/components/autocomplete.vue     | 4 ++--
 .../views/components/connect-failed.troubleshooter.vue      | 2 +-
 src/client/app/common/views/components/url-preview.vue      | 2 +-
 src/client/app/common/views/directives/autocomplete.ts      | 4 ++--
 src/client/app/common/views/filters/note.ts                 | 2 +-
 src/client/app/common/views/filters/user.ts                 | 2 +-
 src/client/app/common/views/pages/follow.vue                | 2 +-
 src/client/app/desktop/views/components/drive.folder.vue    | 2 +-
 src/client/app/desktop/views/components/drive.vue           | 4 ++--
 src/client/app/desktop/views/components/media-image.vue     | 2 +-
 src/client/app/desktop/views/components/post-form.vue       | 6 +++---
 src/client/app/desktop/views/pages/drive.vue                | 2 +-
 src/client/app/desktop/views/pages/games/reversi.vue        | 4 ++--
 src/client/app/desktop/views/pages/messaging-room.vue       | 2 +-
 src/client/app/mobile/views/components/post-form.vue        | 6 +++---
 src/client/app/mobile/views/components/ui.nav.vue           | 2 +-
 src/client/app/mobile/views/pages/drive.vue                 | 4 ++--
 src/client/app/mobile/views/pages/followers.vue             | 2 +-
 src/client/app/mobile/views/pages/following.vue             | 2 +-
 src/client/app/mobile/views/pages/games/reversi.vue         | 4 ++--
 src/client/app/mobile/views/pages/settings.vue              | 2 +-
 src/client/app/mobile/views/pages/user-lists.vue            | 2 +-
 src/client/app/mobile/views/pages/user.vue                  | 2 +-
 src/daemons/notes-stats.ts                                  | 2 +-
 src/daemons/server-stats.ts                                 | 2 +-
 src/mfm/html-to-mfm.ts                                      | 2 +-
 src/mfm/html.ts                                             | 4 ++--
 src/misc/fa.ts                                              | 2 +-
 src/remote/activitypub/renderer/hashtag.ts                  | 2 +-
 src/server/activitypub.ts                                   | 2 +-
 src/server/api/endpoints.ts                                 | 2 +-
 src/server/api/stream/notes-stats.ts                        | 2 +-
 src/server/api/stream/server-stats.ts                       | 2 +-
 src/server/web/docs.ts                                      | 2 +-
 src/server/web/views/user.pug                               | 2 +-
 src/services/drive/add-file.ts                              | 2 +-
 webpack.config.ts                                           | 4 ++--
 40 files changed, 53 insertions(+), 53 deletions(-)

diff --git a/src/client/app/auth/views/index.vue b/src/client/app/auth/views/index.vue
index 609e758994..ba7df911e5 100644
--- a/src/client/app/auth/views/index.vue
+++ b/src/client/app/auth/views/index.vue
@@ -80,7 +80,7 @@ export default Vue.extend({
 		accepted() {
 			this.state = 'accepted';
 			if (this.session.app.callbackUrl) {
-				location.href = this.session.app.callbackUrl + '?token=' + this.session.token;
+				location.href = `${this.session.app.callbackUrl}?token=${this.session.token}`;
 			}
 		}
 	}
diff --git a/src/client/app/boot.js b/src/client/app/boot.js
index 54397c98c6..dd2cf93a89 100644
--- a/src/client/app/boot.js
+++ b/src/client/app/boot.js
@@ -94,7 +94,7 @@
 
 	// Get salt query
 	const salt = localStorage.getItem('salt')
-		? '?salt=' + localStorage.getItem('salt')
+		? `?salt=${localStorage.getItem('salt')}`
 		: '';
 
 	// Load an app script
diff --git a/src/client/app/common/scripts/streaming/stream.ts b/src/client/app/common/scripts/streaming/stream.ts
index fefa8e5ced..4ab78f1190 100644
--- a/src/client/app/common/scripts/streaming/stream.ts
+++ b/src/client/app/common/scripts/streaming/stream.ts
@@ -44,11 +44,11 @@ export default class Connection extends EventEmitter {
 
 		const query = params
 			? Object.keys(params)
-				.map(k => encodeURIComponent(k) + '=' + encodeURIComponent(params[k]))
+				.map(k => `${encodeURIComponent(k)}=${encodeURIComponent(params[k])}`)
 				.join('&')
 			: null;
 
-		this.socket = new ReconnectingWebsocket(`${wsUrl}/${endpoint}${query ? '?' + query : ''}`);
+		this.socket = new ReconnectingWebsocket(`${wsUrl}/${endpoint}${query ? `?${query}` : ''}`);
 		this.socket.addEventListener('open', this.onOpen);
 		this.socket.addEventListener('close', this.onClose);
 		this.socket.addEventListener('message', this.onMessage);
diff --git a/src/client/app/common/views/components/autocomplete.vue b/src/client/app/common/views/components/autocomplete.vue
index b274eaa0a0..ea05afd6dc 100644
--- a/src/client/app/common/views/components/autocomplete.vue
+++ b/src/client/app/common/views/components/autocomplete.vue
@@ -125,7 +125,7 @@ export default Vue.extend({
 			}
 
 			if (this.type == 'user') {
-				const cacheKey = 'autocomplete:user:' + this.q;
+				const cacheKey = `autocomplete:user:${this.q}`;
 				const cache = sessionStorage.getItem(cacheKey);
 				if (cache) {
 					const users = JSON.parse(cache);
@@ -148,7 +148,7 @@ export default Vue.extend({
 					this.hashtags = JSON.parse(localStorage.getItem('hashtags') || '[]');
 					this.fetching = false;
 				} else {
-					const cacheKey = 'autocomplete:hashtag:' + this.q;
+					const cacheKey = `autocomplete:hashtag:${this.q}`;
 					const cache = sessionStorage.getItem(cacheKey);
 					if (cache) {
 						const hashtags = JSON.parse(cache);
diff --git a/src/client/app/common/views/components/connect-failed.troubleshooter.vue b/src/client/app/common/views/components/connect-failed.troubleshooter.vue
index 6c23cc7969..f64cae6b4b 100644
--- a/src/client/app/common/views/components/connect-failed.troubleshooter.vue
+++ b/src/client/app/common/views/components/connect-failed.troubleshooter.vue
@@ -57,7 +57,7 @@ export default Vue.extend({
 		}
 
 		// Check internet connection
-		fetch('https://google.com?rand=' + Math.random(), {
+		fetch(`https://google.com?rand=${Math.random()}`, {
 			mode: 'no-cors'
 		}).then(() => {
 			this.internet = true;
diff --git a/src/client/app/common/views/components/url-preview.vue b/src/client/app/common/views/components/url-preview.vue
index d5dda0c80a..e182e7f8cb 100644
--- a/src/client/app/common/views/components/url-preview.vue
+++ b/src/client/app/common/views/components/url-preview.vue
@@ -170,7 +170,7 @@ export default Vue.extend({
 			return;
 		}
 
-		fetch('/url?url=' + encodeURIComponent(this.url)).then(res => {
+		fetch(`/url?url=${encodeURIComponent(this.url)}`).then(res => {
 			res.json().then(info => {
 				if (info.url == null) return;
 				this.title = info.title;
diff --git a/src/client/app/common/views/directives/autocomplete.ts b/src/client/app/common/views/directives/autocomplete.ts
index b252cf5c1f..26bc13871d 100644
--- a/src/client/app/common/views/directives/autocomplete.ts
+++ b/src/client/app/common/views/directives/autocomplete.ts
@@ -191,7 +191,7 @@ class Autocomplete {
 			const acct = renderAcct(value);
 
 			// 挿入
-			this.text = trimmedBefore + '@' + acct + ' ' + after;
+			this.text = `${trimmedBefore}@${acct} ${after}`;
 
 			// キャレットを戻す
 			this.vm.$nextTick(() => {
@@ -207,7 +207,7 @@ class Autocomplete {
 			const after = source.substr(caret);
 
 			// 挿入
-			this.text = trimmedBefore + '#' + value + ' ' + after;
+			this.text = `${trimmedBefore}#${value} ${after}`;
 
 			// キャレットを戻す
 			this.vm.$nextTick(() => {
diff --git a/src/client/app/common/views/filters/note.ts b/src/client/app/common/views/filters/note.ts
index a611dc8685..3c9c8b7485 100644
--- a/src/client/app/common/views/filters/note.ts
+++ b/src/client/app/common/views/filters/note.ts
@@ -1,5 +1,5 @@
 import Vue from 'vue';
 
 Vue.filter('notePage', note => {
-	return '/notes/' + note.id;
+	return `/notes/${note.id}`;
 });
diff --git a/src/client/app/common/views/filters/user.ts b/src/client/app/common/views/filters/user.ts
index ca0910fc53..e5220229b7 100644
--- a/src/client/app/common/views/filters/user.ts
+++ b/src/client/app/common/views/filters/user.ts
@@ -11,5 +11,5 @@ Vue.filter('userName', user => {
 });
 
 Vue.filter('userPage', (user, path?) => {
-	return '/@' + Vue.filter('acct')(user) + (path ? '/' + path : '');
+	return `/@${Vue.filter('acct')(user)}${(path ? `/${path}` : '')}`;
 });
diff --git a/src/client/app/common/views/pages/follow.vue b/src/client/app/common/views/pages/follow.vue
index 13d855d20a..ec74b3a9b9 100644
--- a/src/client/app/common/views/pages/follow.vue
+++ b/src/client/app/common/views/pages/follow.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="syxhndwprovvuqhmyvveewmbqayniwkv" v-if="!fetching" :data-darkmode="$store.state.device.darkmode">
-	<div class="signed-in-as" v-html="'%i18n:@signed-in-as%'.replace('{}', '<b>' + myName + '</b>')"></div>
+	<div class="signed-in-as" v-html="'%i18n:@signed-in-as%'.replace('{}', `<b>${myName}`)"></div>
 
 	<main>
 		<div class="banner" :style="bannerStyle"></div>
diff --git a/src/client/app/desktop/views/components/drive.folder.vue b/src/client/app/desktop/views/components/drive.folder.vue
index 83880fef5c..e6b71f9426 100644
--- a/src/client/app/desktop/views/components/drive.folder.vue
+++ b/src/client/app/desktop/views/components/drive.folder.vue
@@ -163,7 +163,7 @@ export default Vue.extend({
 							});
 							break;
 						default:
-							alert('%i18n:@unhandled-error% ' + err);
+							alert(`%i18n:@unhandled-error% ${err}`);
 					}
 				});
 			}
diff --git a/src/client/app/desktop/views/components/drive.vue b/src/client/app/desktop/views/components/drive.vue
index d919e4a5ea..cb289027d4 100644
--- a/src/client/app/desktop/views/components/drive.vue
+++ b/src/client/app/desktop/views/components/drive.vue
@@ -323,7 +323,7 @@ export default Vue.extend({
 							});
 							break;
 						default:
-							alert('%i18n:@unhandled-error% ' + err);
+							alert(`%i18n:@unhandled-error% ${err}`);
 					}
 				});
 			}
@@ -404,7 +404,7 @@ export default Vue.extend({
 					folder: folder
 				});
 			} else {
-				window.open(url + '/i/drive/folder/' + folder.id,
+				window.open(`${url}/i/drive/folder/${folder.id}`,
 					'drive_window',
 					'height=500, width=800');
 			}
diff --git a/src/client/app/desktop/views/components/media-image.vue b/src/client/app/desktop/views/components/media-image.vue
index 8b68f260fa..52d029a269 100644
--- a/src/client/app/desktop/views/components/media-image.vue
+++ b/src/client/app/desktop/views/components/media-image.vue
@@ -48,7 +48,7 @@ export default Vue.extend({
 			const mouseY = e.clientY - rect.top;
 			const xp = mouseX / this.$el.offsetWidth * 100;
 			const yp = mouseY / this.$el.offsetHeight * 100;
-			this.$el.style.backgroundPosition = xp + '% ' + yp + '%';
+			this.$el.style.backgroundPosition = `${xp}% ${yp}%';
 			this.$el.style.backgroundImage = `url("${this.image.url}")`;
 		},
 
diff --git a/src/client/app/desktop/views/components/post-form.vue b/src/client/app/desktop/views/components/post-form.vue
index bacaea65ee..eb8b40062a 100644
--- a/src/client/app/desktop/views/components/post-form.vue
+++ b/src/client/app/desktop/views/components/post-form.vue
@@ -110,9 +110,9 @@ export default Vue.extend({
 	computed: {
 		draftId(): string {
 			return this.renote
-				? 'renote:' + this.renote.id
+				? `renote:${this.renote.id}`
 				: this.reply
-					? 'reply:' + this.reply.id
+					? `reply:${this.reply.id}`
 					: 'note';
 		},
 
@@ -313,7 +313,7 @@ export default Vue.extend({
 				this.geo = pos.coords;
 				this.$emit('geo-attached', this.geo);
 			}, err => {
-				alert('%i18n:@error%: ' + err.message);
+				alert(`%i18n:@error%: ${err.message}`);
 			}, {
 					enableHighAccuracy: true
 				});
diff --git a/src/client/app/desktop/views/pages/drive.vue b/src/client/app/desktop/views/pages/drive.vue
index 217dcb7751..dec6c4551a 100644
--- a/src/client/app/desktop/views/pages/drive.vue
+++ b/src/client/app/desktop/views/pages/drive.vue
@@ -31,7 +31,7 @@ export default Vue.extend({
 			const title = folder.name + ' | %i18n:@title%';
 
 			// Rewrite URL
-			history.pushState(null, title, '/i/drive/folder/' + folder.id);
+			history.pushState(null, title, `/i/drive/folder/${folder.id}`);
 
 			document.title = title;
 		}
diff --git a/src/client/app/desktop/views/pages/games/reversi.vue b/src/client/app/desktop/views/pages/games/reversi.vue
index ce9b42c65f..1b0e790a22 100644
--- a/src/client/app/desktop/views/pages/games/reversi.vue
+++ b/src/client/app/desktop/views/pages/games/reversi.vue
@@ -16,10 +16,10 @@ export default Vue.extend({
 	methods: {
 		nav(game, actualNav) {
 			if (actualNav) {
-				this.$router.push('/reversi/' + game.id);
+				this.$router.push(`/reversi/${game.id}`);
 			} else {
 				// TODO: https://github.com/vuejs/vue-router/issues/703
-				this.$router.push('/reversi/' + game.id);
+				this.$router.push(`/reversi/${game.id}`);
 			}
 		}
 	}
diff --git a/src/client/app/desktop/views/pages/messaging-room.vue b/src/client/app/desktop/views/pages/messaging-room.vue
index 1ebd53cef4..4be33dda04 100644
--- a/src/client/app/desktop/views/pages/messaging-room.vue
+++ b/src/client/app/desktop/views/pages/messaging-room.vue
@@ -46,7 +46,7 @@ export default Vue.extend({
 				this.user = user;
 				this.fetching = false;
 
-				document.title = 'メッセージ: ' + getUserName(this.user);
+				document.title = `メッセージ: ${getUserName(this.user)}`;
 
 				Progress.done();
 			});
diff --git a/src/client/app/mobile/views/components/post-form.vue b/src/client/app/mobile/views/components/post-form.vue
index b076cae26d..8b1f7b08c8 100644
--- a/src/client/app/mobile/views/components/post-form.vue
+++ b/src/client/app/mobile/views/components/post-form.vue
@@ -105,9 +105,9 @@ export default Vue.extend({
 	computed: {
 		draftId(): string {
 			return this.renote
-				? 'renote:' + this.renote.id
+				? `renote:${this.renote.id}`
 				: this.reply
-					? 'reply:' + this.reply.id
+					? `reply:${this.reply.id}`
 					: 'note';
 		},
 
@@ -229,7 +229,7 @@ export default Vue.extend({
 			navigator.geolocation.getCurrentPosition(pos => {
 				this.geo = pos.coords;
 			}, err => {
-				alert('%i18n:@error%: ' + err.message);
+				alert(`%i18n:@error%: ${err.message}`);
 			}, {
 					enableHighAccuracy: true
 				});
diff --git a/src/client/app/mobile/views/components/ui.nav.vue b/src/client/app/mobile/views/components/ui.nav.vue
index 39ea513b76..54eed1b6d4 100644
--- a/src/client/app/mobile/views/components/ui.nav.vue
+++ b/src/client/app/mobile/views/components/ui.nav.vue
@@ -82,7 +82,7 @@ export default Vue.extend({
 		search() {
 			const query = window.prompt('%i18n:@search%');
 			if (query == null || query == '') return;
-			this.$router.push('/search?q=' + encodeURIComponent(query));
+			this.$router.push(`/search?q=${encodeURIComponent(query)}`);
 		},
 		onReversiInvited() {
 			this.hasGameInvitation = true;
diff --git a/src/client/app/mobile/views/pages/drive.vue b/src/client/app/mobile/views/pages/drive.vue
index 657f43c7c3..27ac956043 100644
--- a/src/client/app/mobile/views/pages/drive.vue
+++ b/src/client/app/mobile/views/pages/drive.vue
@@ -80,7 +80,7 @@ export default Vue.extend({
 
 			if (!silent) {
 				// Rewrite URL
-				history.pushState(null, title, '/i/drive/folder/' + folder.id);
+				history.pushState(null, title, `/i/drive/folder/${folder.id}`);
 			}
 
 			document.title = title;
@@ -93,7 +93,7 @@ export default Vue.extend({
 
 			if (!silent) {
 				// Rewrite URL
-				history.pushState(null, title, '/i/drive/file/' + file.id);
+				history.pushState(null, title, `/i/drive/file/${file.id}`);
 			}
 
 			document.title = title;
diff --git a/src/client/app/mobile/views/pages/followers.vue b/src/client/app/mobile/views/pages/followers.vue
index 421c150856..601f6670c1 100644
--- a/src/client/app/mobile/views/pages/followers.vue
+++ b/src/client/app/mobile/views/pages/followers.vue
@@ -49,7 +49,7 @@ export default Vue.extend({
 				this.user = user;
 				this.fetching = false;
 
-				document.title = '%i18n:@followers-of%'.replace('{}', this.name) + ' | ' + (this as any).os.instanceName;
+				document.title = `${'%i18n:@followers-of%'.replace('{}', this.name)} | ${(this as any).os.instanceName}`;
 			});
 		},
 		onLoaded() {
diff --git a/src/client/app/mobile/views/pages/following.vue b/src/client/app/mobile/views/pages/following.vue
index ff201ff2bd..0efac6110e 100644
--- a/src/client/app/mobile/views/pages/following.vue
+++ b/src/client/app/mobile/views/pages/following.vue
@@ -48,7 +48,7 @@ export default Vue.extend({
 				this.user = user;
 				this.fetching = false;
 
-				document.title = '%i18n:@followers-of%'.replace('{}', this.name) + ' | ' + (this as any).os.instanceName;
+				document.title = `${'%i18n:@followers-of%'.replace('{}', this.name)} | ${(this as any).os.instanceName}`;
 			});
 		},
 		onLoaded() {
diff --git a/src/client/app/mobile/views/pages/games/reversi.vue b/src/client/app/mobile/views/pages/games/reversi.vue
index d6849a1c11..bdadc88a43 100644
--- a/src/client/app/mobile/views/pages/games/reversi.vue
+++ b/src/client/app/mobile/views/pages/games/reversi.vue
@@ -16,10 +16,10 @@ export default Vue.extend({
 	methods: {
 		nav(game, actualNav) {
 			if (actualNav) {
-				this.$router.push('/reversi/' + game.id);
+				this.$router.push(`/reversi/${game.id}`);
 			} else {
 				// TODO: https://github.com/vuejs/vue-router/issues/703
-				this.$router.push('/reversi/' + game.id);
+				this.$router.push(`/reversi/${game.id}`);
 			}
 		}
 	}
diff --git a/src/client/app/mobile/views/pages/settings.vue b/src/client/app/mobile/views/pages/settings.vue
index 7437eb8b47..838ffd2a6b 100644
--- a/src/client/app/mobile/views/pages/settings.vue
+++ b/src/client/app/mobile/views/pages/settings.vue
@@ -2,7 +2,7 @@
 <mk-ui>
 	<span slot="header">%fa:cog%%i18n:@settings%</span>
 	<main :data-darkmode="$store.state.device.darkmode">
-		<div class="signin-as" v-html="'%i18n:@signed-in-as%'.replace('{}', '<b>' + name + '</b>')"></div>
+		<div class="signin-as" v-html="'%i18n:@signed-in-as%'.replace('{}', `<b>${name}</b>`)"></div>
 
 		<div>
 			<x-profile/>
diff --git a/src/client/app/mobile/views/pages/user-lists.vue b/src/client/app/mobile/views/pages/user-lists.vue
index abd04c1496..5ee0636dea 100644
--- a/src/client/app/mobile/views/pages/user-lists.vue
+++ b/src/client/app/mobile/views/pages/user-lists.vue
@@ -43,7 +43,7 @@ export default Vue.extend({
 					title
 				});
 
-				this.$router.push('/i/lists/' + list.id);
+				this.$router.push(`/i/lists/${list.id}`);
 			});
 		}
 	}
diff --git a/src/client/app/mobile/views/pages/user.vue b/src/client/app/mobile/views/pages/user.vue
index 8918847a8f..ddea43c9f2 100644
--- a/src/client/app/mobile/views/pages/user.vue
+++ b/src/client/app/mobile/views/pages/user.vue
@@ -107,7 +107,7 @@ export default Vue.extend({
 				this.fetching = false;
 
 				Progress.done();
-				document.title = Vue.filter('userName')(this.user) + ' | ' + (this as any).os.instanceName;
+				document.title = `${Vue.filter('userName')(this.user)} | ${(this as any).os.instanceName}`;
 			});
 		}
 	}
diff --git a/src/daemons/notes-stats.ts b/src/daemons/notes-stats.ts
index 3d2c4820a6..bddb54cfa5 100644
--- a/src/daemons/notes-stats.ts
+++ b/src/daemons/notes-stats.ts
@@ -16,7 +16,7 @@ export default function() {
 	});
 
 	ev.on('requestNotesStatsLog', id => {
-		ev.emit('notesStatsLog:' + id, log.toArray());
+		ev.emit(`notesStatsLog:${id}`, log.toArray());
 	});
 
 	process.on('exit', code => {
diff --git a/src/daemons/server-stats.ts b/src/daemons/server-stats.ts
index 4a653f81f4..9bb43fe84e 100644
--- a/src/daemons/server-stats.ts
+++ b/src/daemons/server-stats.ts
@@ -16,7 +16,7 @@ export default function() {
 	const log = new Deque<any>();
 
 	ev.on('requestServerStatsLog', x => {
-		ev.emit('serverStatsLog:' + x.id, log.toArray().slice(0, x.length || 50));
+		ev.emit(`serverStatsLog:${x.id}`, log.toArray().slice(0, x.length || 50));
 	});
 
 	async function tick() {
diff --git a/src/mfm/html-to-mfm.ts b/src/mfm/html-to-mfm.ts
index e2681f5447..b476a9af5c 100644
--- a/src/mfm/html-to-mfm.ts
+++ b/src/mfm/html-to-mfm.ts
@@ -45,7 +45,7 @@ export default function(html: string): string {
 
 					if (part.length == 2) {
 						//#region ホスト名部分が省略されているので復元する
-						const acct = txt + '@' + (new URL(href.value)).hostname;
+						const acct = `${txt}@${(new URL(href.value)).hostname}`;
 						text += acct;
 						break;
 						//#endregion
diff --git a/src/mfm/html.ts b/src/mfm/html.ts
index c798ee410a..2e38fe10a0 100644
--- a/src/mfm/html.ts
+++ b/src/mfm/html.ts
@@ -44,8 +44,8 @@ const handlers: { [key: string]: (window: any, token: any, mentionedRemoteUsers:
 
 	hashtag({ document }, { hashtag }) {
 		const a = document.createElement('a');
-		a.href = config.url + '/tags/' + hashtag;
-		a.textContent = '#' + hashtag;
+		a.href = `${config.url}/tags/${hashtag}`;
+		a.textContent = `#${hashtag}`;
 		a.setAttribute('rel', 'tag');
 		document.body.appendChild(a);
 	},
diff --git a/src/misc/fa.ts b/src/misc/fa.ts
index 8be06362c3..90cdac89b2 100644
--- a/src/misc/fa.ts
+++ b/src/misc/fa.ts
@@ -26,7 +26,7 @@ export const replacement = (match: string, key: string) => {
 				arg == 'B' ? 'fab' :
 				'';
 		} else if (arg.startsWith('.')) {
-			classes.push('fa-' + arg.substr(1));
+			classes.push(`fa-${arg.substr(1)}`);
 		} else if (arg.startsWith('-')) {
 			transform = arg.substr(1).split('|').join(' ');
 		} else {
diff --git a/src/remote/activitypub/renderer/hashtag.ts b/src/remote/activitypub/renderer/hashtag.ts
index a37ba63532..36563c2df5 100644
--- a/src/remote/activitypub/renderer/hashtag.ts
+++ b/src/remote/activitypub/renderer/hashtag.ts
@@ -3,5 +3,5 @@ import config from '../../../config';
 export default (tag: string) => ({
 	type: 'Hashtag',
 	href: `${config.url}/tags/${encodeURIComponent(tag)}`,
-	name: '#' + tag
+	name: `#${tag}`
 });
diff --git a/src/server/activitypub.ts b/src/server/activitypub.ts
index 1007790ca6..f04f9e91e9 100644
--- a/src/server/activitypub.ts
+++ b/src/server/activitypub.ts
@@ -22,7 +22,7 @@ const router = new Router();
 function inbox(ctx: Router.IRouterContext) {
 	let signature;
 
-	ctx.req.headers.authorization = 'Signature ' + ctx.req.headers.signature;
+	ctx.req.headers.authorization = `Signature ${ctx.req.headers.signature}`;
 
 	try {
 		signature = httpSignature.parseRequest(ctx.req, { 'headers': [] });
diff --git a/src/server/api/endpoints.ts b/src/server/api/endpoints.ts
index d4a44070e6..2b00094269 100644
--- a/src/server/api/endpoints.ts
+++ b/src/server/api/endpoints.ts
@@ -79,7 +79,7 @@ const files = glob.sync('**/*.js', {
 });
 
 const endpoints: IEndpoint[] = files.map(f => {
-	const ep = require('./endpoints/' + f);
+	const ep = require(`./endpoints/${f}`);
 
 	return {
 		name: f.replace('.js', ''),
diff --git a/src/server/api/stream/notes-stats.ts b/src/server/api/stream/notes-stats.ts
index ab00620018..ba99403226 100644
--- a/src/server/api/stream/notes-stats.ts
+++ b/src/server/api/stream/notes-stats.ts
@@ -16,7 +16,7 @@ export default function(request: websocket.request, connection: websocket.connec
 
 		switch (msg.type) {
 			case 'requestLog':
-				ev.once('notesStatsLog:' + msg.id, statsLog => {
+				ev.once(`notesStatsLog:${msg.id}`, statsLog => {
 					connection.send(JSON.stringify({
 						type: 'statsLog',
 						body: statsLog
diff --git a/src/server/api/stream/server-stats.ts b/src/server/api/stream/server-stats.ts
index f6c1f14ebe..d4fbeefa04 100644
--- a/src/server/api/stream/server-stats.ts
+++ b/src/server/api/stream/server-stats.ts
@@ -16,7 +16,7 @@ export default function(request: websocket.request, connection: websocket.connec
 
 		switch (msg.type) {
 			case 'requestLog':
-				ev.once('serverStatsLog:' + msg.id, statsLog => {
+				ev.once(`serverStatsLog:${msg.id}`, statsLog => {
 					connection.send(JSON.stringify({
 						type: 'statsLog',
 						body: statsLog
diff --git a/src/server/web/docs.ts b/src/server/web/docs.ts
index 81e5ace3e8..14ccbdd04f 100644
--- a/src/server/web/docs.ts
+++ b/src/server/web/docs.ts
@@ -196,7 +196,7 @@ router.get('/*/api/entities/*', async ctx => {
 	const lang = ctx.params[0];
 	const entity = ctx.params[1];
 
-	const x = yaml.safeLoad(fs.readFileSync(path.resolve(__dirname + '/../../../src/docs/api/entities/' + entity + '.yaml'), 'utf-8')) as any;
+	const x = yaml.safeLoad(fs.readFileSync(path.resolve(`${__dirname}/../../../src/docs/api/entities/${entity}.yaml`), 'utf-8')) as any;
 
 	await ctx.render('../../../../src/docs/api/entities/view', Object.assign(await genVars(lang), {
 		id: `api/entities/${entity}`,
diff --git a/src/server/web/views/user.pug b/src/server/web/views/user.pug
index b5ea2f6eb4..98a53ab549 100644
--- a/src/server/web/views/user.pug
+++ b/src/server/web/views/user.pug
@@ -2,7 +2,7 @@ extends ../../../../src/client/app/base
 
 block vars
 	- const title = user.name ? `${user.name} (@${user.username})` : `@${user.username}`;
-	- const url = config.url + '/@' + (user.host ? `${user.username}@${user.host}` : user.username);
+	- const url = `${config.url}/@${(user.host ? `${user.username}@${user.host}` : user.username)}`;
 	- const img = user.avatarId ? `${config.drive_url}/${user.avatarId}` : null;
 
 block title
diff --git a/src/services/drive/add-file.ts b/src/services/drive/add-file.ts
index 1da0f49a24..d1c7051ab0 100644
--- a/src/services/drive/add-file.ts
+++ b/src/services/drive/add-file.ts
@@ -40,7 +40,7 @@ async function save(path: string, name: string, type: string, hash: string, size
 		const thumbnailKey = `${config.drive.prefix}/${uuid.v4()}/${name}.thumbnail.jpg`;
 
 		const baseUrl = config.drive.baseUrl
-			|| `${ config.drive.config.useSSL ? 'https' : 'http' }://${ config.drive.config.endPoint }${ config.drive.config.port ? ':' + config.drive.config.port : '' }/${ config.drive.bucket }`;
+			|| `${ config.drive.config.useSSL ? 'https' : 'http' }://${ config.drive.config.endPoint }${ config.drive.config.port ? `:${config.drive.config.port}` : '' }/${ config.drive.bucket }`;
 
 		await minio.putObject(config.drive.bucket, key, fs.createReadStream(path), size, {
 			'Content-Type': type,
diff --git a/webpack.config.ts b/webpack.config.ts
index ad67530f51..341d4c7022 100644
--- a/webpack.config.ts
+++ b/webpack.config.ts
@@ -20,7 +20,7 @@ const constants = require('./src/const.json');
 
 const locales = require('./locales');
 const meta = require('./package.json');
-const version = meta.clientVersion + '-' + rndstr({ length: 8, chars: '0-9a-z' });
+const version = `${meta.clientVersion}-${rndstr({ length: 8, chars: '0-9a-z' })}`;
 const codename = meta.codename;
 
 declare var global: {
@@ -42,7 +42,7 @@ global['collapseSpacesReplacement'] = (html: string) => {
 };
 
 global['base64replacement'] = (_: any, key: string) => {
-	return fs.readFileSync(__dirname + '/src/client/' + key, 'base64');
+	return fs.readFileSync(`${__dirname}/src/client/${key}`, 'base64');
 };
 
 global['i18nReplacement'] = i18nReplacement;

From 2555e23b107bb2c38e068e5f2f9da568a2adb375 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Tue, 4 Sep 2018 20:01:15 +0900
Subject: [PATCH 02/11] wip

---
 .../common/views/components/media-list.vue    |  1 +
 .../desktop/views/components/media-audio.vue  | 68 +++++++++++++++++++
 2 files changed, 69 insertions(+)
 create mode 100644 src/client/app/desktop/views/components/media-audio.vue

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>

From dd3e3ddcdd69136023cb39a769d7785fac6696be Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Tue, 4 Sep 2018 20:21:36 +0900
Subject: [PATCH 03/11] wip

---
 locales/ja-JP.yml                             |  5 ++
 .../common/views/components/media-list.vue    |  3 +-
 .../views/components/media-download.vue       | 79 +++++++++++++++++++
 3 files changed, 86 insertions(+), 1 deletion(-)
 create mode 100644 src/client/app/desktop/views/components/media-download.vue

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index a57f724a32..af1ef601af 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -583,6 +583,11 @@ desktop/views/components/media-video.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/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>

From 8bcfa97349b73b3c9759cad7b1678a02bc36e2f9 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Tue, 4 Sep 2018 21:06:02 +0900
Subject: [PATCH 04/11] wip

---
 locales/ja-JP.yml                                       | 4 ++++
 src/client/app/common/views/components/media-list.vue   | 2 +-
 src/client/app/desktop/views/components/index.ts        | 2 ++
 src/client/app/desktop/views/components/media-audio.vue | 3 +--
 4 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index a57f724a32..f04495ed95 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -583,6 +583,10 @@ desktop/views/components/media-video.vue:
   sensitive: "閲覧注意"
   click-to-show: "クリックして表示"
 
+desktop/views/components/media-audio.vue:
+  sensitive: "閲覧注意"
+  click-to-show: "クリックして表示"
+
 desktop/views/components/follow-button.vue:
   following: "フォロー中"
   follow: "フォロー"
diff --git a/src/client/app/common/views/components/media-list.vue b/src/client/app/common/views/components/media-list.vue
index c531f9ac91..4408ba2792 100644
--- a/src/client/app/common/views/components/media-list.vue
+++ b/src/client/app/common/views/components/media-list.vue
@@ -3,7 +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-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"/>
 		</template>
 	</div>
diff --git a/src/client/app/desktop/views/components/index.ts b/src/client/app/desktop/views/components/index.ts
index 7b7a38afa2..159ead4983 100644
--- a/src/client/app/desktop/views/components/index.ts
+++ b/src/client/app/desktop/views/components/index.ts
@@ -13,6 +13,7 @@ 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';
@@ -43,6 +44,7 @@ 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
index 4a0c26fb9e..5d41947b17 100644
--- a/src/client/app/desktop/views/components/media-audio.vue
+++ b/src/client/app/desktop/views/components/media-audio.vue
@@ -10,8 +10,7 @@
 		:src="audio.url"
 		:title="audio.name"
 		controls
-		ref="audio"
-		v-if="inlinePlayable" />
+		ref="audio" />
 </div>
 </template>
 

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 05/11] 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>

From 299f83684bbced1cabd36836ca37ccc1684ce750 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Wed, 5 Sep 2018 18:01:47 +0900
Subject: [PATCH 06/11] media-banner darkmode

---
 src/client/app/common/views/components/media-banner.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/client/app/common/views/components/media-banner.vue b/src/client/app/common/views/components/media-banner.vue
index 69cd579446..48b0d03d30 100644
--- a/src/client/app/common/views/components/media-banner.vue
+++ b/src/client/app/common/views/components/media-banner.vue
@@ -70,7 +70,10 @@ export default Vue.extend({
 		> .mk-media-banner-icon
 			font-size 1.6em
 
-	.mk-media-banner-download
+	.mk-media-banner-download[data-darkmode]
+		background #21242d
+
+	.mk-media-banner-download:not([data-darkmode])
 		background #f7f7f7
 
 	.mk-media-banner-sensitive

From 4257fed5009a30b7815fe3254d18b4b87806fe51 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Wed, 5 Sep 2018 19:46:55 +0900
Subject: [PATCH 07/11] fix mk-media darkmode

---
 .../app/common/views/components/media-banner.vue  | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/client/app/common/views/components/media-banner.vue b/src/client/app/common/views/components/media-banner.vue
index 48b0d03d30..5c83925a32 100644
--- a/src/client/app/common/views/components/media-banner.vue
+++ b/src/client/app/common/views/components/media-banner.vue
@@ -42,7 +42,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-.mk-media-banner
+root(isDark)
 	width 100%
 	border-radius 4px
 	margin-top 4px
@@ -70,11 +70,8 @@ export default Vue.extend({
 		> .mk-media-banner-icon
 			font-size 1.6em
 
-	.mk-media-banner-download[data-darkmode]
-		background #21242d
-
-	.mk-media-banner-download:not([data-darkmode])
-		background #f7f7f7
+	.mk-media-banner-download
+		background isDark ? #21242d : #f7f7f7
 
 	.mk-media-banner-sensitive
 		background #111
@@ -85,4 +82,10 @@ export default Vue.extend({
 			display block
 			width 100%
 			height 100%
+
+.mk-media-banner[data-darkmode]
+	root(true)
+
+.mk-media-banner:not([data-darkmode])
+	root(false)
 </style>

From 952a49f7496c5c6a6dae8998e8d42ea53281db2e Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Sat, 15 Sep 2018 22:22:41 +0900
Subject: [PATCH 08/11] =?UTF-8?q?revert=20=E3=83=87=E3=82=B9=E3=82=AF?=
 =?UTF-8?q?=E3=83=88=E3=83=83=E3=83=97=E3=81=AE=E5=8B=95=E7=94=BB=E5=9F=8B?=
 =?UTF-8?q?=E3=82=81=E8=BE=BC=E3=81=BF=E3=82=92=E5=BB=83=E6=AD=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../desktop/views/components/media-video.vue  | 26 +++++++++++++------
 1 file changed, 18 insertions(+), 8 deletions(-)

diff --git a/src/client/app/desktop/views/components/media-video.vue b/src/client/app/desktop/views/components/media-video.vue
index 0a374acb8f..8af5f9b07e 100644
--- a/src/client/app/desktop/views/components/media-video.vue
+++ b/src/client/app/desktop/views/components/media-video.vue
@@ -6,11 +6,19 @@
 	</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">
+		:title="video.name"
+		v-else>
 		%fa:R play-circle%
 	</a>
 </div>
@@ -19,13 +27,15 @@
 <script lang="ts">
 import Vue from 'vue';
 import MkMediaVideoDialog from './media-video-dialog.vue';
-
 export default Vue.extend({
 	props: {
 		video: {
 			type: Object,
 			required: true
 		},
+		inlinePlayable: {
+			default: false
+		},
 		hide: {
 			type: Boolean,
 			default: true
@@ -57,32 +67,32 @@ 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
 		align-items center
 		font-size 3.5em
-
 		cursor zoom-in
 		overflow hidden
 		background-position center
 		background-size cover
 		width 100%
 		height 100%
-
 .uofhebxjdgksfmltszlxurtjnjjsvioh
 	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>

From 2a96429be81460036cea60cf57f88f2e9a77d8ba Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sun, 16 Sep 2018 04:21:48 +0900
Subject: [PATCH 09/11] =?UTF-8?q?=E3=83=90=E3=82=B0=E4=BF=AE=E6=AD=A3?=
 =?UTF-8?q?=E3=82=84=E3=83=87=E3=82=B6=E3=82=A4=E3=83=B3=E8=AA=BF=E6=95=B4?=
 =?UTF-8?q?=E3=81=AA=E3=81=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/views/components/media-banner.vue  | 26 +++++++++----------
 .../common/views/components/media-list.vue    | 22 +++++++++++-----
 2 files changed, 27 insertions(+), 21 deletions(-)

diff --git a/src/client/app/common/views/components/media-banner.vue b/src/client/app/common/views/components/media-banner.vue
index 5c83925a32..0693143f02 100644
--- a/src/client/app/common/views/components/media-banner.vue
+++ b/src/client/app/common/views/components/media-banner.vue
@@ -1,11 +1,11 @@
 <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>
+	<div class="sensitive" v-if="media.isSensitive && hide" @click="hide = false">
+		<span class="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')">
+	<div class="audio" v-else-if="media.type.startsWith('audio')">
 		<audio class="audio"
 			:src="media.url"
 			:title="media.name"
@@ -13,12 +13,12 @@
 			ref="audio"
 			preload="metadata" />
 	</div>
-	<a class="mk-media-banner-download" v-else
+	<a class="download" v-else
 		:href="media.url"
 		:title="media.name"
 		:download="media.name"
 	>
-		<span class="mk-media-banner-icon">%fa:download%</span>
+		<span class="icon">%fa:download%</span>
 		<b>{{ media.name }}</b>
 	</a>
 </div>
@@ -48,40 +48,38 @@ root(isDark)
 	margin-top 4px
 	overflow hidden
 
-	.mk-media-banner-download,
-	.mk-media-banner-sensitive
+	> .download,
+	> .sensitive
 		display flex
 		align-items center
 		font-size 12px
-		padding .2em .6em
+		padding 8px 12px
 		white-space nowrap
 
 		> *
 			display block
 
 		> b
-			flex-shrink 2147483647
 			overflow hidden
 			text-overflow ellipsis
 
 		> *:not(:last-child)
 			margin-right .2em
 
-		> .mk-media-banner-icon
+		> .icon
 			font-size 1.6em
 
-	.mk-media-banner-download
+	> .download
 		background isDark ? #21242d : #f7f7f7
 
-	.mk-media-banner-sensitive
+	> .sensitive
 		background #111
 		color #fff
 
-	.mk-media-banner-audio
+	> .audio
 		.audio
 			display block
 			width 100%
-			height 100%
 
 .mk-media-banner[data-darkmode]
 	root(true)
diff --git a/src/client/app/common/views/components/media-list.vue b/src/client/app/common/views/components/media-list.vue
index e949c063ab..b4b7d8f87f 100644
--- a/src/client/app/common/views/components/media-list.vue
+++ b/src/client/app/common/views/components/media-list.vue
@@ -1,10 +1,10 @@
 <template>
 <div class="mk-media-list">
-	<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 v-for="media in mediaList.filter(media => !previewable(media))">
+		<mk-media-banner :media="media" :key="media.id"/>
 	</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">
+	<div v-if="mediaList.filter(media => previewable(media)).length > 0" class="gird-container">
+		<div :data-count="mediaList.filter(media => previewable(media)).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"/>
@@ -27,15 +27,23 @@ export default Vue.extend({
 		}
 	},
 	mounted() {
-		// for Safari bug
-		this.$refs.grid.style.height = this.$refs.grid.clientHeight ? `${this.$refs.grid.clientHeight}px` : '128px';
+		//#region for Safari bug
+		if (this.$refs.grid) {
+			this.$refs.grid.style.height = this.$refs.grid.clientHeight ? `${this.$refs.grid.clientHeight}px` : '128px';
+		}
+		//#endregion
+	},
+	methods: {
+		previewable(file) {
+			return file.type.startsWith('video') || file.type.startsWith('image');
+		}
 	}
 });
 </script>
 
 <style lang="stylus" scoped>
 .mk-media-list
-	> .mk-media-list-fixed
+	> .gird-container
 		width 100%
 		margin-top 4px
 

From 8d24fcba6ab18ef03127f8d95eb87ce45bb005d7 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sun, 16 Sep 2018 04:26:01 +0900
Subject: [PATCH 10/11] :v:

---
 src/client/app/common/views/components/index.ts       | 2 --
 src/client/app/common/views/components/media-list.vue | 6 +++++-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/client/app/common/views/components/index.ts b/src/client/app/common/views/components/index.ts
index 21af4ec846..6f8152cea2 100644
--- a/src/client/app/common/views/components/index.ts
+++ b/src/client/app/common/views/components/index.ts
@@ -20,7 +20,6 @@ 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';
@@ -64,7 +63,6 @@ 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-list.vue b/src/client/app/common/views/components/media-list.vue
index b4b7d8f87f..d83d6f85cd 100644
--- a/src/client/app/common/views/components/media-list.vue
+++ b/src/client/app/common/views/components/media-list.vue
@@ -1,7 +1,7 @@
 <template>
 <div class="mk-media-list">
 	<template v-for="media in mediaList.filter(media => !previewable(media))">
-		<mk-media-banner :media="media" :key="media.id"/>
+		<x-banner :media="media" :key="media.id"/>
 	</template>
 	<div v-if="mediaList.filter(media => previewable(media)).length > 0" class="gird-container">
 		<div :data-count="mediaList.filter(media => previewable(media)).length" ref="grid">
@@ -16,8 +16,12 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import XBanner from './media-banner.vue';
 
 export default Vue.extend({
+	components: {
+		XBanner
+	},
 	props: {
 		mediaList: {
 			required: true

From a680bcda1fdb6f0658fea1c99cc115ce10e190c5 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sun, 16 Sep 2018 04:27:10 +0900
Subject: [PATCH 11/11] Fix

---
 src/client/app/desktop/views/components/media-video.vue | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/client/app/desktop/views/components/media-video.vue b/src/client/app/desktop/views/components/media-video.vue
index 8af5f9b07e..d2752b0c95 100644
--- a/src/client/app/desktop/views/components/media-video.vue
+++ b/src/client/app/desktop/views/components/media-video.vue
@@ -27,6 +27,7 @@
 <script lang="ts">
 import Vue from 'vue';
 import MkMediaVideoDialog from './media-video-dialog.vue';
+
 export default Vue.extend({
 	props: {
 		video: {
@@ -72,6 +73,7 @@ export default Vue.extend({
 		width 100%
 		height 100%
 		border-radius 4px
+
 	.thumbnail
 		display flex
 		justify-content center
@@ -83,16 +85,19 @@ export default Vue.extend({
 		background-size cover
 		width 100%
 		height 100%
+
 .uofhebxjdgksfmltszlxurtjnjjsvioh
 	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>