fixup! fix: スケルトンを設定してレイアウトシフトを抑制

Author: uni-kakurenbo

src/components/Main/MainView/MessageElement/Embeddings/MessageFileListImage.vue

@@ -4,19 +4,16 @@
       <SkeletonImage
         :src="fileThumbnailPath"
         :alt="name"
+        :class="$style.image"
+        fixed
         :height="fileThumbnailSize.height"
         :width="fileThumbnailSize.width"
       >
         <PlayIcon v-if="isAnimatedImage" :class="$style.playIcon" />
       </SkeletonImage>
     </router-link>
     <router-link v-else :to="fileLink" :class="$style.container">
-      <SkeletonImage
-        :src="fileThumbnailPath"
-        :alt="name"
-        :width="240"
-        :height="160"
-      >
+      <SkeletonImage :src="fileThumbnailPath" :alt="name">
         <PlayIcon v-if="isAnimatedImage" :class="$style.playIcon" />
       </SkeletonImage>
     </router-link>
@@ -85,16 +82,18 @@ const {
     color: $theme-background-secondary-border;
   }
   max-width: 100%;
-  img {
-    height: auto;
-    width: auto;
-    max-height: 450px;
-    max-width: min(600px, 100%);
-    min-width: 100px;
-    object-fit: contain;
-    cursor: pointer;
-  }
 }
+
+.image {
+  height: auto;
+  width: auto;
+  max-height: 450px;
+  max-width: min(600px, 100%);
+  min-width: 100px;
+  object-fit: contain;
+  cursor: pointer;
+}
+
 .playIcon {
   position: absolute;
   top: 0;

src/components/Main/MainView/MessageElement/Embeddings/MessageFileSummaryImage.vue

@@ -1,6 +1,13 @@
 <template>
   <RouterLink :to="fileLink" :class="$style.container" @click.stop>
-    <SkeletonImage :src="fileThumbnailPath" :class="$style.image" background />
+    <SkeletonImage
+      :src="fileThumbnailPath"
+      fixed
+      width="9rem"
+      height="6rem"
+      :class="$style.image"
+      background
+    />
     <PlayIcon v-if="isAnimatedImage" :class="$style.playIcon" />
   </RouterLink>
 </template>
@@ -27,8 +34,6 @@ const { fileLink, fileThumbnailPath, isAnimatedImage } = useFileThumbnail(props)
 .image {
   border: 2px solid $theme-background-secondary-border;
   border-radius: 6px;
-  height: 6rem;
-  width: 9rem;
   overflow: hidden;
   background: {
     position: center;

src/components/Main/MainView/MessageElement/Embeddings/MessageOgpContentVideo.vue

@@ -2,6 +2,8 @@
   <div :class="$style.container">
     <MessageOgpEmbed
       :preview-url="previewUrl"
+      :preview-width="previewWidth"
+      :preview-height="previewHeight"
       :embedded-url="embeddedUrl"
       show-play-icon
       @click.prevent.stop=""
@@ -29,6 +31,8 @@ withDefaults(
   defineProps<{
     url: string
     previewUrl: string
+    previewWidth?: number
+    previewHeight?: number
     embeddedUrl: string
     title?: string
     description?: string

src/components/Main/MainView/MessageElement/Embeddings/MessageOgpEmbed.vue

@@ -7,39 +7,43 @@
       allowfullscreen
       allow="fullscreen; autoplay; encrypted-media; picture-in-picture"
     />
-    <template v-else>
-      <img :src="previewUrl" :class="$style.image" />
+    <SkeletonImage v-else fixed :src="previewUrl" :class="$style.image">
       <div :class="$style.icon">
         <AIcon v-if="showPlayIcon" mdi name="play" :size="32" />
       </div>
-    </template>
+    </SkeletonImage>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { computed } from 'vue'
 
 import AIcon from '/@/components/UI/AIcon.vue'
+import SkeletonImage from '/@/components/UI/SkeletonImage.vue'
 import useToggle from '/@/composables/utils/useToggle'
 
 const props = withDefaults(
   defineProps<{
     previewUrl?: string
+    previewWidth?: number
+    previewHeight?: number
     embeddedUrl: string
     showPlayIcon?: boolean
     aspectRatio?: number
   }>(),
   {
-    showPlayIcon: false,
-    aspectRatio: 9 / 16
+    showPlayIcon: false
   }
 )
 
 const { value: isContentShown, open: showContent } = useToggle()
 
 const containerStyle = computed(() => ({
-  // TODO: Safariが15以降で aspect-ratio に対応している
-  paddingTop: `${props.aspectRatio * 100}%`
+  aspectRatio:
+    props.aspectRatio ??
+    (props.previewWidth && props.previewHeight
+      ? `${props.previewWidth} / ${props.previewHeight}`
+      : '16 / 9')
 }))
 </script>
 

src/components/Main/MainView/MessageElement/Embeddings/MessageOgpListItem.vue

@@ -6,6 +6,8 @@
       :title="ogpData.title"
       :description="ogpData.description"
       :preview-url="imageUrl"
+      :preview-width="imageWidth"
+      :preview-height="imageHeight"
       :embedded-url="videoUrl"
     />
     <MessageOgpContentWebsite

src/components/UI/SkeletonImage.vue

@@ -1,5 +1,12 @@
 <template>
-  <div :class="$style.container" :style="containerStyle">
+  <div
+    v-if="background"
+    v-bind="$attrs"
+    :style="[skeletonStyle, backgroundStyle]"
+  >
+    <slot />
+  </div>
+  <template v-else>
     <span
       v-if="!src || !isImageLoaded"
       :class="$style.skeleton"
@@ -8,18 +15,17 @@
     />
     <img
       v-show="isImageLoaded"
-      v-if="src"
+      v-if="src && !background"
       :src="src"
       v-bind="$attrs"
-      :class="{ [$style.hidden]: !isImageLoaded }"
       @load="onImageLoad"
     />
     <slot />
-  </div>
+  </template>
 </template>
 
 <script lang="ts" setup>
-import { computed, ref, watch } from 'vue'
+import { computed, ref, watch, watchEffect } from 'vue'
 
 import { isNumber } from '/@/lib/basic/arithmetic'
 
@@ -71,8 +77,7 @@ watch(
   { immediate: true }
 )
 
-const containerStyle = computed(() => {
-  if (!props.background) return {}
+const backgroundStyle = computed(() => {
   return {
     backgroundImage: isImageLoaded.value ? `url(${props.src})` : 'none'
   }
@@ -90,6 +95,9 @@ const skeletonStyle = computed(() => {
     }
   }
 })
+watchEffect(() => {
+  console.log(skeletonStyle.value)
+})
 </script>
 
 <style lang="scss" module>
@@ -112,10 +120,6 @@ const skeletonStyle = computed(() => {
   border-radius: 4px;
 }
 
-.hidden {
-  display: none;
-}
-
 @keyframes skeleton-loading {
   0% {
     background-position: 200% 0;