From e7a47cf2dfca0529edc3835fa96d5f4e1671894f Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Fri, 13 Oct 2023 18:45:28 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20add=20horizontal=20style=20in=20`VideoC?=
 =?UTF-8?q?ard`=20*=20fix:=20=E4=BF=AE=E6=AD=A3=E6=BB=91=E5=8B=95=E5=88=B0?=
 =?UTF-8?q?=E5=BD=B1=E7=89=87=E5=8D=A1=E7=89=87hover=E6=95=88=E6=9E=9C?=
 =?UTF-8?q?=E6=9C=89=E6=99=82=E6=9C=83=E5=87=BA=E7=8F=BE=E8=A2=AB=E8=A3=81?=
 =?UTF-8?q?=E5=88=87=E5=95=8F=E9=A1=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/VideoCard.vue | 99 ++++++++++++++++++++++++++----------
 1 file changed, 73 insertions(+), 26 deletions(-)

diff --git a/src/components/VideoCard.vue b/src/components/VideoCard.vue
index fe73faac..cdcdab46 100644
--- a/src/components/VideoCard.vue
+++ b/src/components/VideoCard.vue
@@ -7,6 +7,7 @@ const props = defineProps<{
   duration?: number
   durationStr?: string
   title: string
+  desc?: string
   cover: string
   author?: string
   authorFace?: string
@@ -20,6 +21,7 @@ const props = defineProps<{
   bvid?: string
   aid?: number
   isFollowed?: boolean
+  horizontal?: boolean
 }>()
 
 const videoUrl = computed(() => {
@@ -134,9 +136,8 @@ function handelMouseLeave() {
     <div
       class="video-card group"
       :class="isDislike ? 'is-dislike' : ''"
-      m="b-8" pos="absolute top-0 left-0" w-full h-full
-      rounded="$bew-radius"
-      :style="{ contentVisibility }"
+      p-20px m--20px w="[calc(100%+40px)]" pos="absolute top-0 left-0"
+      rounded="$bew-radius" content-visibility-auto
       @mousemove="handleMouseMove"
       @mouseleave="handelMouseLeave"
     >
@@ -176,9 +177,12 @@ function handelMouseLeave() {
         </div>
       </div>
 
-      <div>
+      <div :style="{ display: horizontal ? 'flex' : 'block', gap: horizontal ? '1.5rem' : '0' }">
+        <!-- Cover -->
         <div
-          w="full" relative bg="$bew-fill-4" rounded="$bew-radius" cursor-pointer group-hover:shadow
+          :style="{ width: horizontal ? '250px' : '100%' }"
+          shrink-0
+          w="full" h-fit relative bg="$bew-fill-4" rounded="$bew-radius" cursor-pointer group-hover:shadow
           group-hover:transform="translate--4px"
           style="--un-shadow:
             0 0 0 4px var(--bew-theme-color),
@@ -233,8 +237,16 @@ function handelMouseLeave() {
           >
         </div>
 
-        <div flex="~" m="t-4">
-          <div class="flex">
+        <!-- Other Information -->
+        <div
+          :style="{
+            width: horizontal ? '100%' : 'unset',
+            marginTop: horizontal ? '0' : '1rem'
+          }"
+          flex="~"
+        >
+          <!-- Author Avatar -->
+          <div :style="{ display: horizontal ? 'none' : 'flex' }">
             <a
               v-if="authorFace"
               m="r-4" w="40px" h="40px" rounded="1/2" overflow="hidden" object="center cover"
@@ -328,24 +340,50 @@ function handelMouseLeave() {
                 </div> -->
               </template>
             </div>
-            <div
-              v-if="author"
-              class="channel-name"
-              text="base $bew-text-2"
-              m="t-2" cursor-pointer
-              @click="gotoChannel(mid ?? 0)"
-            >
-              {{ author }}
-            </div>
-            <div class="video-info" text="base $bew-text-2">
-              <span v-if="view || viewStr">{{
-                view ? $t('common.view', { count: numFormatter(view) }, view) : `${viewStr}${$t('common.viewWithoutNum')}`
-              }}</span>
-              <template v-if="danmaku || danmakuStr">
-                <span text-xs font-light mx-1>•</span>
-                <span>{{ danmaku ? $t('common.danmaku', { count: numFormatter(danmaku) }, danmaku) : `${danmakuStr}${$t('common.danmakuWithoutNum')}` }}</span>
+            <div text="base $bew-text-2" w-fit m="t-2">
+              <span
+                v-if="author"
+                class="channel-name"
+                text="hover:$bew-text-1"
+                cursor-pointer mr-4
+                @click="gotoChannel(mid ?? 0)"
+              >
+                {{ author }}
+              </span>
+              <template v-if="horizontal">
+                <span v-if="view || viewStr">{{
+                  view ? $t('common.view', { count: numFormatter(view) }, view) : `${viewStr}${$t('common.viewWithoutNum')}`
+                }}</span>
+                <template v-if="danmaku || danmakuStr">
+                  <span text-xs font-light mx-1>•</span>
+                  <span>{{ danmaku ? $t('common.danmaku', { count: numFormatter(danmaku) }, danmaku) : `${danmakuStr}${$t('common.danmakuWithoutNum')}` }}</span>
+                </template>
               </template>
-              <br>
+            </div>
+
+            <!-- Video Description -->
+            <div
+              v-if="desc"
+              mt-2 text="base $bew-text-2" w-full max-h-12 overflow-y-scroll
+              style="white-space: pre-line;"
+            >
+              {{ desc }}
+            </div>
+
+            <div text="base $bew-text-2">
+              <!-- View & Danmaku Count -->
+              <template v-if="!horizontal">
+                <span v-if="view || viewStr">{{
+                  view ? $t('common.view', { count: numFormatter(view) }, view) : `${viewStr}${$t('common.viewWithoutNum')}`
+                }}</span>
+                <template v-if="danmaku || danmakuStr">
+                  <span text-xs font-light mx-1>•</span>
+                  <span>{{ danmaku ? $t('common.danmaku', { count: numFormatter(danmaku) }, danmaku) : `${danmakuStr}${$t('common.danmakuWithoutNum')}` }}</span>
+                </template>
+                <br>
+              </template>
+
+              <!-- Capsule -->
               <span v-if="publishedTimestamp || capsuleText" text="$bew-text-3 sm" inline-block mt-2 p="x-2 y-1" bg="$bew-fill-1" rounded-4>
                 {{ publishedTimestamp ? calcTimeSince(publishedTimestamp * 1000) : capsuleText }}
               </span>
@@ -357,11 +395,20 @@ function handelMouseLeave() {
 
     <!-- skeleton -->
     <div
+      :style="{ display: horizontal ? 'flex' : 'block' }"
       mb-10 pointer-events-none select-none invisible
     >
-      <div aspect-video bg="$bew-fill-4" rounded="$bew-radius" />
+      <!-- Cover -->
+      <div :style="{ width: horizontal ? '250px' : '100%' }" aspect-video bg="$bew-fill-4" rounded="$bew-radius" />
+      <!-- Other Information -->
       <div flex mt-4>
-        <div m="r-4" w="40px" h="40px" rounded="1/2" bg="$bew-fill-4" shrink-0 />
+        <div
+          :style="{
+            width: horizontal ? '100%' : 'unset',
+            marginTop: horizontal ? '0' : '1rem'
+          }"
+          w="40px" h="40px" rounded="1/2" bg="$bew-fill-4" shrink-0
+        />
         <div w-full>
           <div grid gap-2>
             <div w-full h-5 bg="$bew-fill-3" />