Merge branch 'dev' into refactor-message-listeners

src/components/VideoCard/VideoCard.vue

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { Icon } from '@iconify/vue'
 import { getCSRF, removeHttpFromUrl } from '~/utils/main'
 import { calcCurrentTime, calcTimeSince, numFormatter } from '~/utils/dataFormatter'
 import type { VideoPreviewResult } from '~/models/video/videoPreview'
@@ -38,9 +39,6 @@ interface Props {
   moreBtn?: boolean
   moreBtnActive?: boolean
   removed?: boolean
-  showDislikeOptions?: boolean
-  feedbackReason?: { id: number, name: string }
-  dislikeReason?: { id: number, name: string }
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -49,6 +47,8 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits<{
   (e: 'moreClick', event: MouseEvent): MouseEvent
+  (e: 'undo'): void
+  (e: 'tellUsWhy'): void
 }>()
 
 const videoUrl = computed(() => {
@@ -78,7 +78,6 @@ const wValue = computed((): string => {
     return 'w-full'
 })
 
-const isDislike = ref<boolean>(false)
 const isInWatchLater = ref<boolean>(false)
 const isHover = ref<boolean>(false)
 const contentVisibility = ref<'auto' | 'visible'>('auto')
@@ -153,6 +152,10 @@ function handelMouseLeave() {
 function handleMoreBtnClick(event: MouseEvent) {
   emit('moreClick', event)
 }
+
+function handleUndo() {
+  emit('undo')
+}
 </script>
 
 <template>
@@ -163,19 +166,48 @@ function handleMoreBtnClick(event: MouseEvent) {
     <div hidden w="xl:280px lg:250px md:200px 200px" />
     <div hidden w="full" />
 
+    <template v-if="removed">
+      <div
+        :style="{ contentVisibility }"
+        w-full
+        pos="absolute top-0 left-0" aspect-video
+      >
+        <div :w="wValue" h-fit relative>
+          <img
+            :src="`${removeHttpFromUrl(cover)}@672w_378h_1c`" alt=""
+            w-full h-fit object-cover pos="absolute top-0 left-0" aspect-video
+            z--1 rounded="$bew-radius"
+          >
+
+          <div
+            pos="absolute top-0 left-0" w-full h-fit aspect-video flex="~ col gap-2 items-center justify-center"
+            bg="$bew-fill-4" backdrop-blur-20px mix-blend-luminosity rounded="$bew-radius"
+          >
+            <p mb-2 color-white text-lg>
+              {{ $t('home.video_removed') }}
+            </p>
+            <Button
+              color="rgba(255,255,255,.35)" text-color="white" size="small"
+              @click="handleUndo"
+            >
+              <template #left>
+                <Icon icon="mingcute:back-line" text-lg />
+              </template>
+              {{ $t('common.undo') }}
+            </Button>
+          </div>
+        </div>
+      </div>
+    </template>
     <div
+      v-else
       class="video-card group"
-      :class="isDislike ? 'is-dislike' : ''"
       w="full" pos="absolute top-0 left-0"
       rounded="$bew-radius" duration-300 ease-in-out
       bg="hover:$bew-fill-2 active:$bew-fill-3" hover:ring="8 $bew-fill-2" active:ring="8 $bew-fill-3"
       :style="{ contentVisibility }"
     >
-      <template v-if="showDislikeOptions">
-        fdsflsd
-      </template>
       <a
-        v-else
         :style="{ display: horizontal ? 'flex' : 'block', gap: horizontal ? '1.5rem' : '0' }"
         :href="videoUrl" target="_blank" rel="noopener noreferrer"
       >
@@ -419,7 +451,7 @@ function handleMoreBtnClick(event: MouseEvent) {
     <!-- skeleton -->
     <template v-if="!horizontal">
       <div
-        block mb-10 pointer-events-none select-none invisible
+        block mb-6 pointer-events-none select-none invisible
       >
         <!-- Cover -->
         <div w-full shrink-0 aspect-video h-fit rounded="$bew-radius" />
@@ -451,7 +483,7 @@ function handleMoreBtnClick(event: MouseEvent) {
     <template v-else>
       <div
         flex="~ gap-6"
-        mb-10 pointer-events-none select-none invisible
+        mb-6 pointer-events-none select-none invisible
       >
         <!-- Cover -->
         <div
@@ -483,11 +515,11 @@ function handleMoreBtnClick(event: MouseEvent) {
 </template>
 
 <style lang="scss" scoped>
-.video-card.is-dislike {
-  > *:not(#dislike-control) {
-    --at-apply: invisible pointer-events-none duration-0 transition-none;
-  }
-}
+// .video-card.is-dislike {
+//   > *:not(#dislike-control) {
+//     --at-apply: invisible pointer-events-none duration-0 transition-none;
+//   }
+// }
 
 .more-active {
   --at-apply: opacity-100 bg-$bew-fill-3;

src/components/VideoCard/VideoCardSkeleton.vue

@@ -15,7 +15,7 @@ const wValue = computed((): string => {
 <template>
   <div
     v-if="!horizontal"
-    mb-8 pointer-events-none select-none
+    mb-6 pointer-events-none select-none
   >
     <div aspect-video bg="$bew-fill-4" rounded="$bew-radius" />
     <div flex mt-4>
@@ -45,7 +45,7 @@ const wValue = computed((): string => {
   <div
     v-else
     flex="~ gap-6"
-    mb-10 pointer-events-none select-none
+    mb-6 pointer-events-none select-none
   >
     <!-- By directly using predefined unocss width properties, it is possible to dynamically set the width attribute -->
     <div hidden w="xl:280px lg:250px md:200px 200px" />