MkImgWithBlurHashでratioを計算する

packages/frontend/src/components/MkImgWithBlurhash.vue

@@ -6,7 +6,7 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted } from 'vue';
+import { onMounted, watch } from 'vue';
 import { decode } from 'blurhash';
 
 const props = withDefaults(defineProps<{
@@ -28,6 +28,8 @@ const props = withDefaults(defineProps<{
 
 const canvas = $shallowRef<HTMLCanvasElement>();
 let loaded = $ref(false);
+let width = $ref(props.width);
+let height = $ref(props.height);
 
 function draw() {
 	if (props.hash == null) return;
@@ -42,6 +44,23 @@ function onLoad() {
 	loaded = true;
 }
 
+watch(() => props.hash, () => {
+	draw();
+});
+
+watch([() => props.width, () => props.height], () => {
+	const ratio = props.width / props.height;
+	if (ratio > 1) {
+		width = Math.round(64 * ratio);
+		height = 64;
+	} else {
+		width = 64;
+		height = Math.round(64 / ratio);
+	}
+}, {
+	immediate: true,
+});
+
 onMounted(() => {
 	draw();
 });

packages/frontend/src/components/MkMediaImage.vue

@@ -1,6 +1,6 @@
 <template>
 <div v-if="hide" :class="$style.hidden" @click="hide = false">
-	<ImgWithBlurhash style="filter: brightness(0.5);" :hash="image.blurhash" :title="image.comment" :alt="image.comment" :width="width" :height="height"/>
+	<ImgWithBlurhash style="filter: brightness(0.5);" :hash="image.blurhash" :title="image.comment" :alt="image.comment" :width="image.properties.width" :height="image.properties.height" />
 	<div :class="$style.hiddenText">
 		<div :class="$style.hiddenTextWrapper">
 			<b style="display: block;"><i class="ti ti-alert-triangle"></i> {{ i18n.ts.sensitive }}</b>
@@ -14,7 +14,7 @@
 		:href="image.url"
 		:title="image.name"
 	>
-		<ImgWithBlurhash :hash="image.blurhash" :src="url" :alt="image.comment || image.name" :title="image.comment || image.name" :width="width" :height="height" :cover="false"/>
+		<ImgWithBlurhash :hash="image.blurhash" :src="url" :alt="image.comment || image.name" :title="image.comment || image.name" :width="image.properties.width" :height="image.properties.height" :cover="false"/>
 	</a>
 	<div :class="$style.indicators">
 		<div v-if="['image/gif', 'image/apng'].includes(image.type)" :class="$style.indicator">GIF</div>
@@ -39,8 +39,6 @@ const props = defineProps<{
 
 let hide = $ref(true);
 let darkMode = $ref(defaultStore.state.darkMode);
-let width = $ref(64);
-let height = $ref(64);
 
 const url = $computed(() => (props.raw || defaultStore.state.loadRawImages)
 	? props.image.url
@@ -52,17 +50,6 @@ const url = $computed(() => (props.raw || defaultStore.state.loadRawImages)
 // Plugin:register_note_view_interruptor を使って書き換えられる可能性があるためwatchする
 watch(() => props.image, () => {
 	hide = (defaultStore.state.nsfw === 'force') ? true : props.image.isSensitive && (defaultStore.state.nsfw !== 'ignore');
-
-	if (props.image.properties.width && props.image.properties.height) {
-		const ratio = props.image.properties.width / props.image.properties.height;
-		if (ratio > 1) {
-			width = Math.round(64 * ratio);
-			height = 64;
-		} else {
-			width = 64;
-			height = Math.round(64 / ratio);
-		}
-	}
 }, {
 	deep: true,
 	immediate: true,