From c3cf0b46cab15bf92a41e538a435a8f5a376b95f Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Sun, 29 Sep 2024 00:31:48 +0800
Subject: [PATCH] refactor(video-card): use picture tag

---
 src/components/Picture.vue             | 20 ++++++++++++++++++
 src/components/VideoCard/VideoCard.vue | 29 +++++++++++++-------------
 2 files changed, 34 insertions(+), 15 deletions(-)
 create mode 100644 src/components/Picture.vue

diff --git a/src/components/Picture.vue b/src/components/Picture.vue
new file mode 100644
index 00000000..698f0f96
--- /dev/null
+++ b/src/components/Picture.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+defineProps<{
+  src: string
+  loading: 'lazy' | 'eager'
+  alt: string
+}>()
+</script>
+
+<template>
+  <picture>
+    <source :srcset="`${src}.avif`" type="image/avif">
+    <source :srcset="`${src}.webp`" type="image/webp">
+    <img
+      :src="src"
+      :loading="loading"
+      block w-full h-full object="[inherit]" aspect-inherit
+      rounded-inherit
+    >
+  </picture>
+</template>
diff --git a/src/components/VideoCard/VideoCard.vue b/src/components/VideoCard/VideoCard.vue
index fb385e34..2e5690ad 100644
--- a/src/components/VideoCard/VideoCard.vue
+++ b/src/components/VideoCard/VideoCard.vue
@@ -243,13 +243,12 @@ function handleUndo() {
             transform="~ translate-z-0"
           >
             <!-- Video cover -->
-            <img
-              :src="`${removeHttpFromUrl(video.cover)}@672w_378h_1c`"
+            <Picture
+              :src="`${removeHttpFromUrl(video.cover)}@672w_378h_1c_!web-home-common-cover`"
               loading="lazy"
-              w="full" max-w-full align-middle aspect-video
-              bg="cover center"
+              w="full" max-w-full align-middle aspect-video object-cover
               rounded="$bew-radius"
-            >
+            />
 
             <div
               v-if="removed"
@@ -381,13 +380,14 @@ function handleUndo() {
                 position-relative
                 @click.stop=""
               >
-                <img
-                  rounded="1/2"
+
+                <Picture
                   :src="`${removeHttpFromUrl(video.authorFace)}@50w_50h_1c`"
-                  width="36"
-                  height="36"
                   loading="lazy"
-                >
+                  w="36px" h="36px"
+                  rounded="1/2"
+                />
+
                 <div
                   v-if="video.followed"
                   pos="absolute bottom--2px right--2px"
@@ -440,13 +440,12 @@ function handleUndo() {
                       object="center cover" bg="$bew-skeleton" cursor="pointer" relative
                       @click.stop=""
                     >
-                      <img
+                      <Picture
                         :src="`${removeHttpFromUrl(video.authorFace)}@50w_50h_1c`"
-                        width="30"
-                        height="30"
                         loading="lazy"
-                        object-cover rounded="1/2"
-                      >
+                        w="30px" h="30px"
+                        rounded="1/2"
+                      />
                       <div
                         v-if="video.followed"
                         pos="absolute bottom--2px right--2px"