アニメーション停止箇所の追加 (#4138)

5 files changed, 48 insertions, 12 deletions

diff --git a/src/client/app/common/views/widgets/photo-stream.vue b/src/client/app/common/views/widgets/photo-stream.vue
index 516c626323..d57be1d33f 100644
--- a/src/client/app/common/views/widgets/photo-stream.vue
+++ b/src/client/app/common/views/widgets/photo-stream.vue
@@ -5,9 +5,9 @@
 
 		<p :class="$style.fetching" v-if="fetching"><fa icon="spinner" pulse fixed-width/>{{ $t('@.loading') }}<mk-ellipsis/></p>
 		<div :class="$style.stream" v-if="!fetching && images.length > 0">
-			<div v-for="image in images"
+			<div v-for="(image, i) in images" :key="i"
 				:class="$style.img"
-				:style="`background-image: url(${image.thumbnailUrl || image.url})`"
+				:style="`background-image: url(${thumbnail(image)})`"
 				draggable="true"
 				@dragstart="onDragstart(image, $event)"
 			></div>
@@ -20,6 +20,7 @@
 <script lang="ts">
 import define from '../../../common/define-widget';
 import i18n from '../../../i18n';
+import { getStaticImageUrl } from '../../scripts/get-static-image-url';
 
 export default define({
 	name: 'photo-stream',
@@ -77,6 +78,12 @@ export default define({
 			e.dataTransfer.effectAllowed = 'move';
 			e.dataTransfer.setData('mk_drive_file', JSON.stringify(file));
 		},
+
+		thumbnail(image: any): string {
+			return this.$store.state.device.disableShowingAnimatedImages
+				? getStaticImageUrl(image.thumbnailUrl)
+				: image.thumbnailUrl;
+		},
 	}
 });
 </script>
diff --git a/src/client/app/desktop/views/pages/user/user.photos.vue b/src/client/app/desktop/views/pages/user/user.photos.vue
index cd8853e0b0..d989738e52 100644
--- a/src/client/app/desktop/views/pages/user/user.photos.vue
+++ b/src/client/app/desktop/views/pages/user/user.photos.vue
@@ -3,8 +3,8 @@
 	<p class="title"><fa icon="camera"/>{{ $t('title') }}</p>
 	<p class="initializing" v-if="fetching"><fa icon="spinner" pulse fixed-width/>{{ $t('loading') }}<mk-ellipsis/></p>
 	<div class="stream" v-if="!fetching && images.length > 0">
-		<div v-for="image in images" class="img"
-			:style="`background-image: url(${image.thumbnailUrl})`"
+		<div v-for="(image, i) in images" :key="i" class="img"
+			:style="`background-image: url(${thumbnail(image)})`"
 		></div>
 	</div>
 	<p class="empty" v-if="!fetching && images.length == 0">{{ $t('no-photos') }}</p>
@@ -14,6 +14,8 @@
 <script lang="ts">
 import Vue from 'vue';
 import i18n from '../../../../i18n';
+import { getStaticImageUrl } from '../../../../common/scripts/get-static-image-url';
+
 export default Vue.extend({
 	i18n: i18n('desktop/views/pages/user/user.photos.vue'),
 	props: ['user'],
@@ -44,7 +46,14 @@ export default Vue.extend({
 			}
 			this.fetching = false;
 		});
-	}
+	},
+	methods: {
+		thumbnail(image: any): string {
+			return this.$store.state.device.disableShowingAnimatedImages
+				? getStaticImageUrl(image.thumbnailUrl)
+				: image.thumbnailUrl;
+		},
+	},
 });
 </script>
 
diff --git a/src/client/app/mobile/views/components/note-card.vue b/src/client/app/mobile/views/components/note-card.vue
index 43f8210855..01f52c76f8 100644
--- a/src/client/app/mobile/views/components/note-card.vue
+++ b/src/client/app/mobile/views/components/note-card.vue
@@ -2,7 +2,7 @@
 <div class="mk-note-card">
 	<a :href="note | notePage">
 		<header>
-			<img :src="note.user.avatarUrl" alt="avatar"/>
+			<img :src="avator" alt="avatar"/>
 			<h3><mk-user-name :user="note.user"/></h3>
 		</header>
 		<div>
@@ -16,13 +16,19 @@
 <script lang="ts">
 import Vue from 'vue';
 import summary from '../../../../../misc/get-note-summary';
+import { getStaticImageUrl } from '../../../common/scripts/get-static-image-url';
 
 export default Vue.extend({
 	props: ['note'],
 	computed: {
 		text(): string {
 			return summary(this.note);
-		}
+		},
+		avator(): string {
+			return this.$store.state.device.disableShowingAnimatedImages
+				? getStaticImageUrl(this.note.user.avatarUrl)
+				: this.note.user.avatarUrl;
+		},
 	}
 });
 </script>
diff --git a/src/client/app/mobile/views/pages/user.vue b/src/client/app/mobile/views/pages/user.vue
index c475750cf2..5d15a9718a 100644
--- a/src/client/app/mobile/views/pages/user.vue
+++ b/src/client/app/mobile/views/pages/user.vue
@@ -1,6 +1,6 @@
 <template>
 <mk-ui>
-	<template slot="header" v-if="!fetching"><img :src="user.avatarUrl" alt="">
+	<template slot="header" v-if="!fetching"><img :src="avator" alt="">
 		<mk-user-name :user="user"/>
 	</template>
 	<main v-if="!fetching">
@@ -11,7 +11,7 @@
 			<div class="body">
 				<div class="top">
 					<a class="avatar">
-						<img :src="user.avatarUrl" alt="avatar"/>
+						<img :src="avator" alt="avatar"/>
 					</a>
 					<button class="menu" ref="menu" @click="menu"><fa icon="ellipsis-h"/></button>
 					<mk-follow-button v-if="$store.getters.isSignedIn && $store.state.i.id != user.id" :user="user"/>
@@ -82,6 +82,7 @@ import parseAcct from '../../../../../misc/acct/parse';
 import Progress from '../../../common/scripts/loading';
 import XUserMenu from '../../../common/views/components/user-menu.vue';
 import XHome from './user/home.vue';
+import { getStaticImageUrl } from '../../../common/scripts/get-static-image-url';
 
 export default Vue.extend({
 	i18n: i18n('mobile/views/pages/user.vue'),
@@ -99,6 +100,11 @@ export default Vue.extend({
 		age(): number {
 			return age(this.user.profile.birthday);
 		},
+		avator(): string {
+			return this.$store.state.device.disableShowingAnimatedImages
+				? getStaticImageUrl(this.user.avatarUrl)
+				: this.user.avatarUrl;
+		},
 		style(): any {
 			if (this.user.bannerUrl == null) return {};
 			return {
diff --git a/src/client/app/mobile/views/pages/user/home.photos.vue b/src/client/app/mobile/views/pages/user/home.photos.vue
index cd6d0e674b..bb9c5b8c51 100644
--- a/src/client/app/mobile/views/pages/user/home.photos.vue
+++ b/src/client/app/mobile/views/pages/user/home.photos.vue
@@ -2,9 +2,9 @@
 <div class="root photos">
 	<p class="initializing" v-if="fetching"><fa icon="spinner" pulse fixed-width/>{{ $t('@.loading') }}<mk-ellipsis/></p>
 	<div class="stream" v-if="!fetching && images.length > 0">
-		<a v-for="image in images"
+		<a v-for="(image, i) in images" :key="i"
 			class="img"
-			:style="`background-image: url(${image.media.thumbnailUrl})`"
+			:style="`background-image: url(${thumbnail(image.media)})`"
 			:href="image.note | notePage"
 		></a>
 	</div>
@@ -15,6 +15,7 @@
 <script lang="ts">
 import Vue from 'vue';
 import i18n from '../../../../i18n';
+import { getStaticImageUrl } from '../../../../common/scripts/get-static-image-url';
 
 export default Vue.extend({
 	i18n: i18n('mobile/views/pages/user/home.photos.vue'),
@@ -50,7 +51,14 @@ export default Vue.extend({
 			}
 			this.fetching = false;
 		});
-	}
+	},
+	methods: {
+		thumbnail(image: any): string {
+			return this.$store.state.device.disableShowingAnimatedImages
+				? getStaticImageUrl(image.thumbnailUrl)
+				: image.thumbnailUrl;
+		},
+	},
 });
 </script>