BewlyBewly/src/components/VideoCard.vue

<script lang="ts" setup>
import { removeHttpFromUrl } from '~/utils/main'
import { calcCurrentTime, calcTimeSince, numFormatter } from '~/utils/dataFormatter'

const props = defineProps<{
  duration: number
  title: string
  cover: string
  author: string
  authorFace: string
  mid: number
  view: number
  danmaku: number
  publishedTimestamp: number
  bvid?: string
  aid?: number
}>()

const videoUrl = computed(() => {
  return `https://www.bilibili.com/video/${props.bvid ?? `av${props.aid}`}`
})

const isDislike = ref<boolean>(false)
// const dislikeReasonId = ref<number | null>(null)
const showPopCtrl = ref<boolean>(false)

function gotoChannel(mid: number) {
  window.open(`//space.bilibili.com/${mid}`)
}

// function submitDislike(
//   reasonID: number,
//   goto: string,
//   id: string,
//   mid: number,
//   rid: number,
//   tagID: number,
// ) {
//   browser.runtime
//     .sendMessage({
//       contentScriptQuery: 'submitDislike',
//       accessKey: accessKey.value,
//       reasonID,
//       goto,
//       id,
//       mid,
//       rid,
//       tagID,
//     })
//     .then((res) => {
//       if (res.code === 0) {
//         isDislike.value = true
//         dislikeReasonId.value = reasonID
//       }
//     })
// }

// function undoDislike(
//   reasonID: number,
//   goto: string,
//   id: string,
//   mid: number,
//   rid: number,
//   tagID: number,
// ) {
//   browser.runtime
//     .sendMessage({
//       contentScriptQuery: 'undoDislike',
//       accessKey,
//       reasonID,
//       goto,
//       id,
//       mid,
//       rid,
//       tagID,
//     })
//     .then((res) => {
//       if (res.code === 0) {
//         isDislike.value = false
//         dislikeReasonId.value = null
//         showPopCtrl.value = false
//       }
//     })
// }
</script>

<template>
  <div
    class="video-card group"
    :class="isDislike ? 'is-dislike' : ''"
    m="b-8"
    rounded="“$bew-radius"
  >
    <!-- Undo control -->
    <div :style="{ visibility: isDislike ? 'visible' : 'hidden' }" pos="absolute">
      <div
        id="dislike-control"
        pos="absolute top-0 left-0"
        w="full"
        h="auto"
        flex="~ col"
        justify="center"
        align="content-center"
        border="solid $bew-fill-1"
        text="$bew-text-3 sm center"
        rounded="$bew-radius"
        class="aspect-video"
      >
        {{ $t('home.video_removed') }}
        <!-- <button
          text="$bew-theme-color base"
          font="bold"
          m="t-4"
          @click="
            undoDislike(
              dislikeReasonId ? dislikeReasonId : 0,
              goto,
              param,
              mid,
              tid,
              tag.tag_id,
            )
          "
        >
          {{ $t('common.undo') }}
        </button> -->
      </div>
    </div>

    <div>
      <a :href="videoUrl" target="_blank">
        <div w="full" relative bg="$bew-fill-4" rounded="$bew-radius" overflow-hidden>
          <!-- Video duration -->
          <div
            pos="absolute bottom-0 right-0"
            z="2"
            p="x-2 y-1"
            m="1"
            rounded="$bew-radius"
            text="!white xs"
            bg="black opacity-60"
          >
            {{ calcCurrentTime(duration) }}
          </div>

          <!-- Video cover -->
          <img
            :src="`${removeHttpFromUrl(cover)}@672w_378h_1c`"
            loading="lazy"
            w="full" aspect-video
            bg="cover center"
          >
        </div>
      </a>
      <div flex="~" m="t-4">
        <div class="flex">
          <a
            m="r-4" w="48px" h="48px" rounded="$bew-radius" overflow="hidden" object="center cover"
            bg="$bew-fill-4" cursor="pointer"
            @click="gotoChannel(mid)"
          >
            <img
              :src="`${removeHttpFromUrl(authorFace)}@60w_60h_1c`"
              width="48"
              height="48"
              loading="lazy"
            >
          </a>
        </div>
        <div class="meta" flex="~ col" w="full" align="items-start">
          <div flex="~" justify="between" w="full" pos="relative">
            <h3
              class="keep-two-lines"
              text="lg overflow-ellipsis space-normal $bew-text-1"
              cursor="pointer"
            >
              <a :href="videoUrl" target="_blank" :title="title">
                {{ title }}</a>
            </h3>

            <!-- <div
              id="dislike-control-btn"
              class="icon-btn"
              p="t-0.15rem x-2"
              pointer="auto"
              display="invisible"
              group-hover:display="visible"
              @click.stop="showPopCtrl = !showPopCtrl"
            >
              <tabler:dots-vertical text="lg" />
            </div> -->

            <!-- dislike control -->
            <template v-if="showPopCtrl">
              <!-- cover mask -->
              <div
                pos="fixed top-0 left-0"
                w="full"
                h="full"
                z="30"
                @click="showPopCtrl = false"
              />

              <!-- dislike reason popup -->
              <!-- <div
                pos="absolute top-9 right-0"
                p="2"
                z="30"
                w="180px"
                bg="$bew-content-1"
                rounded="$bew-radius"
                style="
                  box-shadow: var(--bew-shadow-2);
                  backdrop-filter: var(--bew-filter-glass);
                "
              >
                <p p="2" text="$bew-text-3">
                  {{ $t('home.not_interested_in') }}
                </p>
                <ul>
                  <li
                    v-for="reason in dislikeReasons"
                    :key="reason.reason_id"
                    p="2"
                    m="b-1"
                    cursor="pointer"
                    hover:bg="$bew-fill-2"
                    transition="all duration-300"
                    rounded="$bew-radius"
                    @click.stop="
                      submitDislike(
                        reason.reason_id,
                        goto,
                        param,
                        mid,
                        tid,
                        tag.tag_id,
                      )
                    "
                  >
                    {{ reason.reason_name }}
                  </li>
                </ul>
              </div> -->
            </template>
          </div>
          <div
            class="channel-name"
            text="base $bew-text-2"
            m="t-2"
            @click="gotoChannel(mid)"
          >
            {{ author }}
          </div>
          <div class="video-info" text="base $bew-text-2">
            <!-- <uil:play-circle inline /> -->
            <span>{{
              $t('common.view', { count: numFormatter(view) }, view)
            }}</span>
            <span text-xs font-light mx-1>•</span>
            <!-- <uil:list-ui-alt inline /> -->
            <span>{{ $t('common.danmaku', { count: numFormatter(danmaku) }, danmaku) }}</span>
            <!-- <span class="text-xs font-light">•</span> -->
            <br>
            <span text="$bew-text-3 sm" inline-block mt-2 p="x-2 y-1" bg="$bew-fill-1" rounded-4>{{ calcTimeSince(publishedTimestamp * 1000) }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.video-card.is-dislike {
  > *:not(#dislike-control) {
    --at-apply: invisible pointer-events-none duration-0 transition-none;
  }
}
</style>