Merge branch 'develop' into fix-msg-room

CHANGELOG.md

@@ -7,6 +7,15 @@
 
 -->
 
+## 12.x.x (unreleased)
+
+### Improvements
+
+### Bugfixes
+- 投稿のNSFW画像を表示したあとにリアクションが更新されると画像が非表示になる問題を修正
+- 「クリップ」ページが開かない問題を修正
+- トレンドウィジェットが動作しないのを修正
+
 ## 12.102.1 (2022/01/27)
 ### Bugfixes
 - チャットが表示できない問題を修正

packages/client/src/components/media-image.vue

@@ -20,52 +20,32 @@
 </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent } from 'vue';
+import { watch } from 'vue';
+import * as misskey from 'misskey-js';
 import { getStaticImageUrl } from '@/scripts/get-static-image-url';
 import ImgWithBlurhash from '@/components/img-with-blurhash.vue';
-import * as os from '@/os';
+import { defaultStore } from '@/store';
 
-export default defineComponent({
+const props = defineProps<{
-	components: {
+	image: misskey.entities.DriveFile;
-		ImgWithBlurhash
+	raw?: boolean;
-	},
+}>();
-	props: {
-		image: {
-			type: Object,
-			required: true
-		},
-		raw: {
-			default: false
-		}
-	},
-	data() {
-		return {
-			hide: true,
-		};
-	},
-	computed: {
-		url(): any {
-			let url = this.$store.state.disableShowingAnimatedImages
-				? getStaticImageUrl(this.image.thumbnailUrl)
-				: this.image.thumbnailUrl;
 
-			if (this.raw || this.$store.state.loadRawImages) {
+let hide = $ref(true);
-				url = this.image.url;
-			}
 
-			return url;
+const url = (props.raw || defaultStore.state.loadRawImages)
-		}
+	? props.image.url
-	},
+	: defaultStore.state.disableShowingAnimatedImages
-	created() {
+			? getStaticImageUrl(props.image.thumbnailUrl)
-		// Plugin:register_note_view_interruptor を使って書き換えられる可能性があるためwatchする
+			: props.image.thumbnailUrl;
-		this.$watch('image', () => {
+
-			this.hide = (this.$store.state.nsfw === 'force') ? true : this.image.isSensitive && (this.$store.state.nsfw !== 'ignore');
+// Plugin:register_note_view_interruptor を使って書き換えられる可能性があるためwatchする
-		}, {
+watch(() => props.image, () => {
+	hide = (defaultStore.state.nsfw === 'force') ? true : props.image.isSensitive && (defaultStore.state.nsfw !== 'ignore');
+}, {
 	deep: true,
 	immediate: true,
-		});
-	},
 });
 </script>
 

packages/client/src/components/media-list.vue

@@ -12,8 +12,8 @@
 </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent, onMounted, PropType, ref } from 'vue';
+import { onMounted, ref } from 'vue';
 import * as misskey from 'misskey-js';
 import PhotoSwipeLightbox from 'photoswipe/dist/photoswipe-lightbox.esm.js';
 import PhotoSwipe from 'photoswipe/dist/photoswipe.esm.js';
@@ -25,25 +25,15 @@ import * as os from '@/os';
 import { FILE_TYPE_BROWSERSAFE } from '@/const';
 import { defaultStore } from '@/store';
 
-export default defineComponent({
+const props = defineProps<{
-	components: {
+	mediaList: misskey.entities.DriveFile[];
-		XBanner,
+	raw?: boolean;
-		XImage,
+}>();
-		XVideo,
-	},
-	props: {
-		mediaList: {
-			type: Array as PropType<misskey.entities.DriveFile[]>,
-			required: true,
-		},
-		raw: {
-			default: false
-		},
-	},
-	setup(props) {
-		const gallery = ref(null);
 
-		onMounted(() => {
+const gallery = ref(null);
+const pswpZIndex = os.claimZIndex('middle');
+
+onMounted(() => {
 	const lightbox = new PhotoSwipeLightbox({
 		dataSource: props.mediaList
 			.filter(media => {
@@ -82,8 +72,8 @@ export default defineComponent({
 		pswpModule: PhotoSwipe,
 	});
 
-			lightbox.on('itemData', (e) => {
+	lightbox.on('itemData', (ev) => {
-				const { itemData } = e;
+		const { itemData } = ev;
 
 		// element is children
 		const { element } = itemData;
@@ -102,21 +92,13 @@ export default defineComponent({
 	});
 
 	lightbox.init();
-		});
+});
 
-		const previewable = (file: misskey.entities.DriveFile): boolean => {
+const previewable = (file: misskey.entities.DriveFile): boolean => {
 	if (file.type === 'image/svg+xml') return true; // svgのwebpublic/thumbnailはpngなのでtrue
 	// FILE_TYPE_BROWSERSAFEに適合しないものはブラウザで表示するのに不適切
 	return (file.type.startsWith('video') || file.type.startsWith('image')) && FILE_TYPE_BROWSERSAFE.includes(file.type);
-		};
+};
-
-		return {
-			previewable,
-			gallery,
-			pswpZIndex: os.claimZIndex('middle'),
-		};
-	},
-});
 </script>
 
 <style lang="scss" scoped>

packages/client/src/pages/my-clips/index.vue

@@ -19,7 +19,7 @@ import MkPagination from '@/components/ui/pagination.vue';
 import MkButton from '@/components/ui/button.vue';
 import * as os from '@/os';
 import * as symbols from '@/symbols';
-import i18n from '@/components/global/i18n';
+import { i18n } from '@/i18n';
 
 const pagination = {
 	endpoint: 'clips/list' as const,

packages/client/src/scripts/use-note-capture.ts

@@ -19,51 +19,41 @@ export function useNoteCapture(props: {
 			case 'reacted': {
 				const reaction = body.reaction;
 
-				const updated = JSON.parse(JSON.stringify(appearNote.value));
-
 				if (body.emoji) {
 					const emojis = appearNote.value.emojis || [];
 					if (!emojis.includes(body.emoji)) {
-						updated.emojis = [...emojis, body.emoji];
+						appearNote.value.emojis = [...emojis, body.emoji];
 					}
 				}
 
 				// TODO: reactionsプロパティがない場合ってあったっけ？ なければ || {} は消せる
 				const currentCount = (appearNote.value.reactions || {})[reaction] || 0;
 
-				updated.reactions[reaction] = currentCount + 1;
+				appearNote.value.reactions[reaction] = currentCount + 1;
 
 				if ($i && (body.userId === $i.id)) {
-					updated.myReaction = reaction;
+					appearNote.value.myReaction = reaction;
 				}
-
-				appearNote.value = updated;
 				break;
 			}
 
 			case 'unreacted': {
 				const reaction = body.reaction;
 
-				const updated = JSON.parse(JSON.stringify(appearNote.value));
-
 				// TODO: reactionsプロパティがない場合ってあったっけ？ なければ || {} は消せる
 				const currentCount = (appearNote.value.reactions || {})[reaction] || 0;
 
-				updated.reactions[reaction] = Math.max(0, currentCount - 1);
+				appearNote.value.reactions[reaction] = Math.max(0, currentCount - 1);
 
 				if ($i && (body.userId === $i.id)) {
-					updated.myReaction = null;
+					appearNote.value.myReaction = null;
 				}
-
-				appearNote.value = updated;
 				break;
 			}
 
 			case 'pollVoted': {
 				const choice = body.choice;
 
-				const updated = JSON.parse(JSON.stringify(appearNote.value));
-
 				const choices = [...appearNote.value.poll.choices];
 				choices[choice] = {
 					...choices[choice],
@@ -73,16 +63,12 @@ export function useNoteCapture(props: {
 					} : {})
 				};
 
-				updated.poll.choices = choices;
+				appearNote.value.poll.choices = choices;
-
-				appearNote.value = updated;
 				break;
 			}
 
 			case 'deleted': {
-				const updated = JSON.parse(JSON.stringify(appearNote.value));
+				appearNote.value.deletedAt = new Date();
-				updated.value = true;
-				appearNote.value = updated;
 				break;
 			}
 		}

packages/client/src/widgets/trends.vue

@@ -52,8 +52,8 @@ const stats = ref([]);
 const fetching = ref(true);
 
 const fetch = () => {
-	os.api('hashtags/trend').then(stats => {
+	os.api('hashtags/trend').then(res => {
-		stats.value = stats;
+		stats.value = res;
 		fetching.value = false;
 	});
 };