アニメーション画像を無効にする際、サーバーサイドではなくクライアントサイドでURLを変更するように

7 files changed, 32 insertions, 9 deletions

diff --git a/src/client/app/common/scripts/get-static-image-url.ts b/src/client/app/common/scripts/get-static-image-url.ts
new file mode 100644
index 0000000000..f84adf709c
--- /dev/null
+++ b/src/client/app/common/scripts/get-static-image-url.ts
@@ -0,0 +1,9 @@
+import { url as instanceUrl } from '../../config';
+
+export function getStaticImageUrl(url: string): string {
+	const u = new URL(url);
+	const dummy = `${u.host}${u.pathname}`;	// 拡張子がないとキャッシュしてくれないCDNがあるので
+	let result = `${instanceUrl}/proxy/${dummy}?url=${encodeURIComponent(u.href)}`;
+	result += '&static=1';
+	return result;
+}
diff --git a/src/client/app/common/views/components/avatar.vue b/src/client/app/common/views/components/avatar.vue
index 698873833d..205b4a6d79 100644
--- a/src/client/app/common/views/components/avatar.vue
+++ b/src/client/app/common/views/components/avatar.vue
@@ -15,6 +15,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import { getStaticImageUrl } from '../../../common/scripts/get-static-image-url';
 
 export default Vue.extend({
 	props: {
@@ -47,6 +48,11 @@ export default Vue.extend({
 				borderRadius: this.$store.state.settings.circleIcons ? '100%' : null
 			};
 		},
+		url(): string {
+			return this.$store.state.device.doNotAutoplayAnimation
+				? getStaticImageUrl(this.user.avatarUrl)
+				: this.user.avatarUrl;
+		},
 		icon(): any {
 			return {
 				backgroundColor: this.lightmode
@@ -54,7 +60,7 @@ export default Vue.extend({
 					: this.user.avatarColor && this.user.avatarColor.length == 3
 						? `rgb(${this.user.avatarColor.join(',')})`
 						: null,
-				backgroundImage: this.lightmode ? null : `url(${this.user.avatarUrl})`,
+				backgroundImage: this.lightmode ? null : `url(${this.url})`,
 				borderRadius: this.$store.state.settings.circleIcons ? '100%' : null
 			};
 		}
diff --git a/src/client/app/common/views/components/emoji.vue b/src/client/app/common/views/components/emoji.vue
index 29b09947e4..b791dcab6a 100644
--- a/src/client/app/common/views/components/emoji.vue
+++ b/src/client/app/common/views/components/emoji.vue
@@ -9,6 +9,7 @@
 import Vue from 'vue';
 // スクリプトサイズがデカい
 //import { lib } from 'emojilib';
+import { getStaticImageUrl } from '../../../common/scripts/get-static-image-url';
 
 export default Vue.extend({
 	props: {
@@ -54,7 +55,9 @@ export default Vue.extend({
 			const customEmoji = this.customEmojis.find(x => x.name == this.name);
 			if (customEmoji) {
 				this.customEmoji = customEmoji;
-				this.url = customEmoji.url;
+				this.url = this.$store.state.device.doNotAutoplayAnimation
+					? getStaticImageUrl(customEmoji.url)
+					: customEmoji.url;
 			} else {
 				//const emoji = lib[this.name];
 				//if (emoji) {
diff --git a/src/client/app/common/views/components/media-image.vue b/src/client/app/common/views/components/media-image.vue
index 01187465f1..4433ec2afc 100644
--- a/src/client/app/common/views/components/media-image.vue
+++ b/src/client/app/common/views/components/media-image.vue
@@ -17,6 +17,7 @@
 import Vue from 'vue';
 import i18n from '../../../i18n';
 import ImageViewer from './image-viewer.vue';
+import { getStaticImageUrl } from '../../../common/scripts/get-static-image-url';
 
 export default Vue.extend({
 	i18n: i18n('common/views/components/media-image.vue'),
@@ -36,7 +37,11 @@ export default Vue.extend({
 	}
 	computed: {
 		style(): any {
-			let url = `url(${this.image.thumbnailUrl})`;
+			let url = `url(${
+				this.$store.state.device.doNotAutoplayAnimation
+					? getStaticImageUrl(this.image.thumbnailUrl)
+					: this.image.thumbnailUrl
+			})`;
 
 			if (this.$store.state.device.loadRemoteMedia || this.$store.state.device.lightmode) {
 				url = null;
diff --git a/src/client/app/desktop/views/components/settings.vue b/src/client/app/desktop/views/components/settings.vue
index 8ab956830e..be0244ee00 100644
--- a/src/client/app/desktop/views/components/settings.vue
+++ b/src/client/app/desktop/views/components/settings.vue
@@ -518,8 +518,8 @@ export default Vue.extend({
 		},
 
 		doNotAutoplayAnimation: {
-			get() { return !!this.$store.state.settings.doNotAutoplayAnimation; },
-			set(value) { this.$store.dispatch('settings/set', { key: 'doNotAutoplayAnimation', value }); }
+			get() { return this.$store.state.device.doNotAutoplayAnimation; },
+			set(value) { this.$store.commit('device/set', { key: 'doNotAutoplayAnimation', value }); }
 		},
 
 		remainDeletedNote: {
diff --git a/src/client/app/mobile/views/pages/settings.vue b/src/client/app/mobile/views/pages/settings.vue
index f7ddefc5f0..8c01b6ac26 100644
--- a/src/client/app/mobile/views/pages/settings.vue
+++ b/src/client/app/mobile/views/pages/settings.vue
@@ -315,8 +315,8 @@ export default Vue.extend({
 		},
 
 		doNotAutoplayAnimation: {
-			get() { return !!this.$store.state.settings.doNotAutoplayAnimation; },
-			set(value) { this.$store.dispatch('settings/set', { key: 'doNotAutoplayAnimation', value }); }
+			get() { return this.$store.state.device.doNotAutoplayAnimation; },
+			set(value) { this.$store.commit('device/set', { key: 'doNotAutoplayAnimation', value }); }
 		},
 
 		showReplyTarget: {
diff --git a/src/client/app/store.ts b/src/client/app/store.ts
index 8cde2d3595..ef2e57170e 100644
--- a/src/client/app/store.ts
+++ b/src/client/app/store.ts
@@ -3,7 +3,6 @@ import createPersistedState from 'vuex-persistedstate';
 import * as nestedProperty from 'nested-property';
 
 import MiOS from './mios';
-import { hostname } from './config';
 import { erase } from '../../prelude/array';
 import getNoteSummary from '../../misc/get-note-summary';
 
@@ -70,7 +69,8 @@ const defaultDeviceSettings = {
 	mobileNotificationPosition: 'bottom',
 	deckTemporaryColumn: null,
 	deckDefault: false,
-	useOsDefaultEmojis: false
+	useOsDefaultEmojis: false,
+	doNotAutoplayAnimation: false
 };
 
 export default (os: MiOS) => new Vuex.Store({