{"version":3,"file":"live-list-6b7fc2a6.js","sources":["../../../../../src/components/layout/article/live.vue","../../../../../src/logic/video/live-list.ts"],"sourcesContent":["<script setup lang='ts'>\r\nimport { numFormat, timeFormat, timeStamp } from '@qcwp/utils'\r\nimport { articleAuthorPath, imageTransform, liveDetailPath } from '@qcwp/common'\r\n\r\nimport { pxToRem } from '~~/src/common/theme/naive'\r\nimport type { LiveListResponse, LiveMedia } from '~~/src/server/modules/article/type'\r\n\r\nconst props = withDefaults(defineProps<{\r\n  item: LiveListResponse | null\r\n  mediaUserId?: string\r\n  hiddenAuthor?: boolean\r\n}>(), {\r\n  item: null,\r\n  hiddenAuthor: false,\r\n})\r\n\r\nconst { isDesktop } = useDevice()\r\n\r\nconst mediaList = computed<LiveMedia[]>(() => {\r\n  const items: LiveMedia[] = [...(props.item?.mediaUserVOList || [])]\r\n  return items\r\n})\r\nconst media = computed<LiveMedia | null>(() => mediaList.value[0] || null)\r\nconst isStart = computed(() => {\r\n  const start = timeStamp(props.item?.liveStartTime) as number\r\n  const current = timeStamp() as number\r\n  return start < current\r\n})\r\nconst isEnd = computed(() => {\r\n  const end = timeStamp(props.item?.liveEndTime) as number\r\n  const current = timeStamp() as number\r\n  return end < current\r\n})\r\nconst query = computed(() => {\r\n  return props.mediaUserId ? { mediaId: props.mediaUserId } : {}\r\n})\r\n\r\nconst router = useRouter()\r\nfunction goPage() {\r\n  if (!props.item)\r\n    return\r\n  const link = liveDetailPath(props.item.id, false, query.value)\r\n  router.push(link)\r\n}\r\n</script>\r\n\r\n<template>\r\n  <div v-if=\"item\" class=\"flex flex-col\" md=\"p-5 bg-white shadow-sm rounded-md border-1 border-gray-1\">\r\n    <NuxtLink\r\n      v-if=\"!isDesktop\" no-rel text-0\r\n      :to=\"liveDetailPath(item.id)\" @click.stop\r\n    >\r\n      <n-ellipsis line-clamp=\"2\" :tooltip=\"false\" class=\"text-4.5 md:public-hover flex-grow pb-1\">\r\n        {{ item.liveTopic }}\r\n      </n-ellipsis>\r\n    </NuxtLink>\r\n    <div v-if=\"item.liveCover\" no-rel class=\"relative border-1 border-gray-100 rounded-md\" @click.stop=\"goPage\">\r\n      <base-proportion-img\r\n        class=\"flex-shrink-0 bg-gray-100 rounded-md overflow-hidden w-full\"\r\n        :proportion=\"56.25\"\r\n        :img-props=\"{ class: 'object-cover md:img-hover', alt: item.liveTopic, lazy: true }\"\r\n        :src=\"imageTransform(item.liveCover, { width: 576, height: 332, format: 'webp' })\"\r\n      />\r\n      <div v-if=\"item.liveRecom === '1'\" class=\"absolute top-2 right-2 bg-green-5 bg-opacity-80 rounded-md px-2 pt-0.5 text-2.5 text-white\">\r\n        推荐\r\n      </div>\r\n      <div\r\n        v-if=\"isStart && !isEnd\"\r\n        class=\"absolute top-2 left-2 bg-black bg-opacity-80 rounded-md px-2 pt-0.5 text-2.5 text-white\"\r\n        :class=\"{ 'bg-blue-500': isStart, 'bg-gray-500': isEnd }\"\r\n      >\r\n        直播中\r\n      </div>\r\n      <div\r\n        v-else-if=\"!isStart\"\r\n        class=\"absolute top-2 left-2 bg-black bg-opacity-80 rounded-md px-2 pt-1.5 pb-1 text-2.5 text-white\"\r\n        md=\"px-3 pt-2 pb-1.5 text-3\"\r\n      >\r\n        <span>未开始</span>\r\n        <span class=\"ml-1\">{{ timeFormat(item.liveStartTime, 'MM-DD HH:mm') }}</span>\r\n      </div>\r\n      <div\r\n        v-else-if=\"isEnd\"\r\n        class=\"absolute bottom-10% left-0 right-0  grid place-items-center\"\r\n        @click.stop\r\n      >\r\n        <div class=\"text-white bg-black px-3 py-1 bg-opacity-70 rounded-md max-w-80%\">\r\n          <div class=\"text-center text-3.5 pt-1 pb-1\">\r\n            <span>直播已结束</span>\r\n          </div>\r\n          <div class=\"grid grid-cols-2 gap-5 items-center text-4\">\r\n            <span v-if=\"item?.liveLookTotal\" class=\"flex items-center \">\r\n              <i class=\"i-octicon:people-16 mr-1 flex-shrink-0\" />\r\n              <span flex-shrink-0>{{ numFormat(Number(item?.liveLookTotal) || 0) }}</span>\r\n            </span>\r\n            <span v-if=\"item?.liveLikeTotal\" class=\"flex items-center\">\r\n              <i class=\"i-mdi:like-outline mr-1 flex-shrink-0\" />\r\n              <span flex-shrink-0>{{ numFormat(Number(item?.liveLikeTotal) || 0) }}</span>\r\n            </span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div\r\n        v-else\r\n        class=\"absolute top-2 left-2 bg-black bg-opacity-70 rounded-md px-2 pt-1.5 pb-1 text-2.5 text-white\"\r\n        md=\"px-3 pt-2 pb-1.5 text-3\"\r\n      >\r\n        <span>未开始</span>\r\n        <span class=\"ml-1\">{{ timeFormat(item.liveStartTime, 'MM-DD HH:mm') }}</span>\r\n      </div>\r\n    </div>\r\n    <div\r\n      v-if=\"mediaList?.length\"\r\n      class=\"flex items-end justify-between gap-2 text-3.5 text-title-600 h-auto relative\"\r\n      :class=\"[hiddenAuthor ? 'pt-3' : 'pt-8']\"\r\n    >\r\n      <NuxtLink\r\n        v-if=\"!hiddenAuthor && mediaList?.length === 1\"\r\n        :to=\"articleAuthorPath(mediaList[0]?.mediaUserId)\"\r\n        class=\"flex flex-grow w-0 items-end gap-2 absolute pl-2 public-hover -top-4 z-1 w-full\"\r\n        @click.stop\r\n      >\r\n        <utils-media-avatar\r\n          :style=\"{ '--n-avatar-size-override': `${pxToRem(40)}rem` }\"\r\n          :src=\"imageTransform(mediaList[0]?.mediaAvatar, { width: 100, height: 100, format: 'webp' })\"\r\n          :type=\"mediaList[0]?.mediaType\"\r\n          :media-grade=\"mediaList[0]?.mediaGrade\"\r\n          :name=\"mediaList[0]?.mediaName\"\r\n        />\r\n        <n-ellipsis line-clamp=\"1\" :tooltip=\"false\">\r\n          {{ mediaList[0]?.mediaName }}\r\n        </n-ellipsis>\r\n      </NuxtLink>\r\n      <div v-else-if=\"!hiddenAuthor\" class=\"flex items-end flex-grow w-0 absolute pl-5 -top-4 z-1 w-full\">\r\n        <n-avatar-group\r\n          :options=\"(mediaList.reverse() as any[])\" :size=\"40\" :max=\"4\"\r\n          :style=\"{ '--n-avatar-size-override': `${pxToRem(40)}rem`, '--n-merged-size': `${pxToRem(40)}rem` }\"\r\n        >\r\n          <template #avatar=\"{ option }\">\r\n            <NuxtLink no-rel :to=\"liveDetailPath(item.id, false, { mediaId: (option as LiveMedia).mediaUserId })\" @click.stop>\r\n              <utils-media-avatar\r\n                class=\"ml-[var(--n-gap)]\"\r\n                :src=\"imageTransform((option as LiveMedia).mediaAvatar, { width: 100, height: 100, format: 'webp' })\"\r\n                :type=\"(option as LiveMedia).mediaType\"\r\n                :name=\"(option as LiveMedia).mediaName\"\r\n              />\r\n            </NuxtLink>\r\n          </template>\r\n          <template #rest=\"{ rest }\">\r\n            <n-popover :trigger=\"isDesktop ? 'hover' : 'click'\" :show-arrow=\"false\" raw>\r\n              <template #trigger>\r\n                <n-avatar>+{{ rest }}</n-avatar>\r\n              </template>\r\n              <div class=\"divide-y-1 divide-slate-2 max-w-35 max-h-40 overflow-auto scrollbar-default px-3 bg-white rounded-md\">\r\n                <NuxtLink\r\n                  v-for=\"v, i in mediaList\" :key=\"i\" no-rel\r\n                  :to=\"liveDetailPath(item.id, false, { mediaId: v.mediaUserId })\"\r\n                  class=\"flex items-center py-2\" @click.stop\r\n                >\r\n                  <utils-media-avatar\r\n                    :style=\"{ '--n-avatar-size-override': `${pxToRem(30)}rem` }\"\r\n                    :src=\"imageTransform(v.mediaAvatar, { width: 100, height: 100, format: 'webp' })\"\r\n                    :type=\"v.mediaType\"\r\n                    :media-grade=\"v.mediaGrade\"\r\n                    :name=\"v.mediaName\"\r\n                  />\r\n                  <span class=\"ml-1 truncate\" :title=\"v.mediaName\">{{ v.mediaName }}</span>\r\n                </NuxtLink>\r\n              </div>\r\n            </n-popover>\r\n          </template>\r\n        </n-avatar-group>\r\n        <div class=\"ml-1\">\r\n          参与直播\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <NuxtLink v-if=\"isDesktop\" class=\"text-0\" no-rel :to=\"liveDetailPath(item.id, false, query)\" @click.stop>\r\n      <n-ellipsis line-clamp=\"2\" :tooltip=\"false\" class=\"text-5 font-bold md:public-hover flex-grow \">\r\n        {{ item.liveTopic }}\r\n      </n-ellipsis>\r\n    </NuxtLink>\r\n  </div>\r\n</template>\r\n\r\n<style lang=\"scss\" scoped>\r\n.video-time {\r\n  --uno: flex items-center bg-black bg-opacity-80text-white;\r\n  --uno: rounded-sm z-2 absolute px-2  py-0.5 right-1.5 bottom-1.5 text-3  md-bottom-2 md-right-2;\r\n}\r\n\r\n.avatar {\r\n  --n-avatar-size-override: 40px;\r\n}\r\n\r\n@screen lt-md {\r\n  .avatar {\r\n    --n-avatar-size-override: 30px;\r\n  }\r\n}\r\n</style>\r\n","import type { PaginationOption } from '@qcwp/common'\r\nimport { LogicTemplateList } from '../common'\r\nimport { getLiveList } from '~~/src/server/modules/article'\r\nimport type { LiveListResponse } from '~~/src/server/modules/article/type'\r\n\r\nexport function LogicLiveList(option: PaginationOption = { pageSize: 12 }) {\r\n  const filter = (list: LiveListResponse[], data: LiveListResponse[]) => {\r\n    const ids = list.map(item => item.id)\r\n    return data.filter(item => !ids.includes(item.id))\r\n  }\r\n  return LogicTemplateList('LIVE_LIST', getLiveList, option, filter)\r\n}\r\n"],"names":["isDesktop","useDevice","mediaList","computed","_a","props","isStart","start","timeStamp","current","isEnd","end","query","router","useRouter","goPage","link","liveDetailPath","LogicLiveList","option","LogicTemplateList","getLiveList","list","data","ids","item"],"mappings":"6lEAgBA,CAAA,UAAAA,GAAAC,KAEAC,EAAAC,EAAA,IAAA,OAEE,MADA,CAAA,KAAAC,EAAAC,EAAA,OAAA,YAAAD,EAAA,kBAAA,CAAA,CAAA,CACO,CAAA,EAETD,EAAA,IAAAD,EAAA,MAAA,CAAA,GAAA,IAAA,EACA,MAAAI,EAAAH,EAAA,IAAA,OACE,MAAAI,EAAAC,GAAAJ,EAAAC,EAAA,OAAA,YAAAD,EAAA,aAAA,EACAK,EAAAD,IACA,OAAAD,EAAAE,CAAe,CAAA,EAEjBC,EAAAP,EAAA,IAAA,OACE,MAAAQ,EAAAH,GAAAJ,EAAAC,EAAA,OAAA,YAAAD,EAAA,WAAA,EACAK,EAAAD,IACA,OAAAG,EAAAF,CAAa,CAAA,EAEfG,EAAAT,EAAA,IACEE,EAAA,YAAA,CAAA,QAAAA,EAAA,WAAA,EAAA,EAA6D,EAG/DQ,EAAAC,IACA,SAAAC,GAAA,CACE,GAAA,CAAAV,EAAA,KACE,OACF,MAAAW,EAAAC,EAAAZ,EAAA,KAAA,GAAA,GAAAO,EAAA,KAAA,EACAC,EAAA,KAAAG,CAAA,CAAgB,knICrCX,SAASE,GAAcC,EAA2B,CAAE,SAAU,IAAM,CAKzE,OAAOC,GAAkB,YAAaC,EAAaF,EAJpC,CAACG,EAA0BC,IAA6B,CACrE,MAAMC,EAAMF,EAAK,IAAIG,GAAQA,EAAK,EAAE,EAC7B,OAAAF,EAAK,OAAeE,GAAA,CAACD,EAAI,SAASC,EAAK,EAAE,CAAC,CAAA,CAEc,CACnE"}