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

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>

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 {

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>