{"version":3,"file":"item-_id_.D0TUZ5G1.js","sources":["../../../../components/video/VideoRelatedCard.vue","../../../../components/video/VideoItemPageContent.vue"],"sourcesContent":["<template>\n  <article class=\"flex gap-3\">\n    <div class=\"w-[120px]\">\n      <BaseLocaleLink :to=\"route\">\n        <BaseRatio :ratio=\"9 / 16\" size=\"cover\">\n          <ClientOnly>\n            <div\n              class=\"w-full h-full rounded-xl overflow-hidden flex items-center justify-center bg-gray-200\"\n            >\n              <img\n                v-if=\"previewImage\"\n                loading=\"lazy\"\n                class=\"w-full\"\n                :src=\"previewImage\"\n                :alt=\"video.title\"\n                @load=\"(event) => getFallbackImage(event)\"\n              />\n              <BaseIcon\n                v-else\n                name=\"solid_play\"\n                size=\"lg\"\n                class=\"text-gray-900\"\n              />\n            </div>\n          </ClientOnly>\n        </BaseRatio>\n      </BaseLocaleLink>\n    </div>\n    <div class=\"flex-1 flex flex-col\">\n      <BaseLink theme=\"dark\" class=\"!inline py-1\" :to=\"route\">\n        <h2 class=\"font-bold text-xs text-gray-900 line-clamp-2\">\n          {{ video.title }}\n        </h2>\n      </BaseLink>\n      <div v-if=\"video.date\" class=\"text-gray-500 text-xs\">\n        {{ getFormattedDate(video.date) }}\n      </div>\n    </div>\n  </article>\n</template>\n\n<script setup lang=\"ts\">\nimport { useVideo } from '~/stores/video'\nimport type { Video } from '~/models/video'\nimport { useNavigation } from '~/stores/navigation'\n\ninterface PropsInterface {\n  video: Video\n}\n\nconst props = defineProps<PropsInterface>()\n\nconst { VideoPreviewFallbackGetters, getVideoId, getVideoPreview } = useVideo()\nconst { getFormattedDate } = useDate()\nconst { getCategoryItemsByIds } = useNavigation()\n\nconst categories = getCategoryItemsByIds(\n  props.video.categories.map((category) => category.id),\n  'video'\n)\n\nconst route = {\n  name: 'video-category-item-id',\n  params: {\n    id: props.video.id,\n    category: categories[0].slug,\n  },\n}\n\nconst previewImage = computed((): string => {\n  const videoId = getVideoId(props.video)\n\n  return (\n    props.video.preview?.url ||\n    getVideoPreview(props.video.video_source, videoId) ||\n    ''\n  )\n})\n\nfunction getFallbackImage(event: Event) {\n  props.video.video_source &&\n    VideoPreviewFallbackGetters[props.video.video_source]?.(\n      event,\n      props.video.video_id\n    )\n}\n</script>\n","<template>\n  <div>\n    <div\n      v-if=\"!videoStore.isVideoLoaded || videoStore.isCategoryChanging\"\n      class=\"py-10 flex justify-center\"\n    >\n      <BaseSpinner />\n    </div>\n    <div v-else-if=\"videoStore.video\">\n      <article class=\"flex flex-col gap-6 mb-6 text-gray-900\">\n        <div class=\"flex flex-col gap-2 p-4 sm:p-8 bg-white rounded-xl\">\n          <BaseRatio\n            :ratio=\"9 / 16\"\n            class=\"bg-black rounded-xl overflow-hidden mb-2\"\n          >\n            <iframe\n              v-if=\"videoStore.video.video_source !== VideoSource.WNMeet\"\n              class=\"w-full h-full rounded-xl\"\n              :src=\"videoUrl\"\n              allow=\"accelerometer; encrypted-media; gyroscope; picture-in-picture\"\n              allowfullscreen\n              credentialless\n              anonymous\n            />\n            <video v-else class=\"w-full h-full rounded-xl\" controls>\n              <source\n                :src=\"videoStore.video?.temp_video_url\"\n                type=\"video/mp4\"\n              />\n            </video>\n          </BaseRatio>\n          <div class=\"flex justify-between\">\n            <div\n              v-if=\"categories.length\"\n              class=\"flex flex-wrap items-center gap-1\"\n            >\n              <BaseLocaleLink\n                v-for=\"item in categories\"\n                :key=\"item.id\"\n                :to=\"item.route\"\n                class=\"no-underline font-normal\"\n                :class=\"item.hidden && 'pointer-events-none'\"\n              >\n                <BaseButton\n                  size=\"xs\"\n                  look=\"none\"\n                  class=\"bg-primary-100 hover:bg-primary-400\"\n                >\n                  {{ item.local }}\n                </BaseButton>\n              </BaseLocaleLink>\n            </div>\n            <BaseButton\n              look=\"link\"\n              theme=\"dark\"\n              class=\"font-normal inline-flex\"\n              size=\"xs\"\n              @click=\"goBackToVideos\"\n            >\n              <BaseIcon name=\"outline_arrow_turn_left\" size=\"xs\" class=\"mr-2\" />\n              <span class=\"text-sm\">\n                {{ $t('video.back_to_videos') }}\n              </span>\n            </BaseButton>\n          </div>\n          <h2 class=\"text-2xl text-gray-900 font-bold\">\n            {{ videoStore.video.title }}\n          </h2>\n          <div\n            v-if=\"videoStore.video.date\"\n            class=\"flex gap-2 text-gray-900 items-center\"\n          >\n            <BaseIcon name=\"outline_calendar\" size=\"xs\" class=\"flex-shrink-0\" />\n            <div>\n              {{ getHumanizedDate(videoStore.video.date) }}\n            </div>\n          </div>\n          <div v-if=\"event\">\n            <BaseLink\n              v-if=\"event.slug\"\n              :to=\"getEventPageRoute(event.slug, event.type)\"\n            >\n              <div class=\"flex gap-2 items-center\">\n                <BaseIcon\n                  name=\"outline_external_link\"\n                  size=\"xs\"\n                  class=\"flex-shrink-0 text-primary\"\n                />\n                <div>\n                  {{ event.name }}\n                  <span v-if=\"event.date_from && event.date_to\">\n                    -\n                    {{\n                      getHumanizedDatePeriod(\n                        event.date_from,\n                        event.date_to,\n                        event.timezone\n                      )\n                    }}\n                  </span>\n                </div>\n              </div>\n            </BaseLink>\n            <div v-else class=\"flex gap-2 items-center\">\n              <BaseIcon\n                name=\"outline_ticket\"\n                size=\"xs\"\n                class=\"flex-shrink-0 mt-[1px]\"\n              />\n              <div class=\"font-semibold\">\n                {{ event.name }}\n              </div>\n            </div>\n          </div>\n          <div\n            v-if=\"videoStore.video.speakers?.length\"\n            class=\"flex gap-6 flex-wrap leading-5\"\n          >\n            <template\n              v-for=\"speaker in videoStore.video.speakers\"\n              :key=\"speaker.id\"\n            >\n              <UsersUserAvatar\n                :src=\"getAvatar(speaker)\"\n                :abbr=\"getAbbr(speaker)\"\n                size=\"lg\"\n                class=\"w-max\"\n              >\n                <template v-if=\"speaker?.is_subscription_active\" #topBadge>\n                  <SubscriptionsProBadge />\n                </template>\n                <template #title>\n                  <BaseLocaleLink\n                    v-if=\"authStore.auth\"\n                    :to=\"`/users/${speaker.id}`\"\n                    class=\"hover:text-gray-700 font-medium\"\n                  >\n                    {{ getFullName(speaker) }}\n                  </BaseLocaleLink>\n                  <span v-else class=\"font-medium\">\n                    {{ getFullName(speaker) }}\n                  </span>\n                </template>\n                <template v-if=\"speaker.job\" #text>\n                  <div class=\"text-xs text-gray-500\">\n                    {{ speaker.job }}\n                  </div>\n                </template>\n              </UsersUserAvatar>\n            </template>\n          </div>\n          <CardActionsPanel\n            class=\"!px-0 mt-4\"\n            :name=\"videoStore.video.title\"\n            :comments=\"commentsCounter\"\n            :reactions=\"reactionsCounters\"\n            :page-link=\"pageLink\"\n            :is-counters-processing=\"isCountersProcessing\"\n            @change-reaction=\"onChangeReaction\"\n          />\n        </div>\n        <div class=\"flex flex-col gap-2 bg-white rounded-xl p-4 sm:p-8\">\n          <div class=\"marked\" v-html=\"$marked(videoStore.video?.description)\" />\n        </div>\n      </article>\n      <div class=\"flex gap-6 flex-col lg:flex-row\">\n        <div class=\"flex-1\">\n          <div ref=\"commentsElement\" class=\"p-4 sm:p-8 bg-white rounded-xl\">\n            <CommentsList\n              :id=\"id\"\n              :total=\"commentsCounter\"\n              :entity-type=\"EntityType.Video\"\n              @loaded=\"scrollToComments\"\n              @create=\"onCommentCreate\"\n            />\n          </div>\n        </div>\n        <div class=\"flex flex-col gap-2 w-full lg:w-1/3 xl:w-1/4 px-4 sm:px-0\">\n          <div class=\"text-lg font-bold text-gray-900\">\n            {{ $t('video.related') }}\n          </div>\n          <div\n            v-if=\"!videoStore.isRelatedVideoListLoaded\"\n            class=\"py-10 flex justify-center\"\n          >\n            <BaseSpinner />\n          </div>\n          <VideoRelatedList v-else :video-list=\"videoStore.relatedVideoList\">\n            <template #empty>\n              <span class=\"text-gray-700\">\n                {{ $t('video.no_related') }}\n              </span>\n            </template>\n          </VideoRelatedList>\n          <BaseLink\n            v-if=\"isShowRelatedLink\"\n            class=\"mt-2\"\n            :to=\"{ name: 'video-category', params: { category: categorySlug } }\"\n          >\n            {{ $t('video.all_related_videos') }}\n          </BaseLink>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport type { RouteLocationRaw } from 'vue-router'\nimport { VideoSource } from '~core/plugins/helpers/videoHelper'\nimport { useVideo } from '~/stores/video'\nimport { EntityType } from '~/models/common'\nimport { useNavigation } from '~/stores/navigation'\nimport { useAuth } from '~/stores/auth'\nimport { useEvents } from '~/stores/events'\n\nconst videoStore = useVideo()\nconst route = useRoute()\nconst { getCategoryItemsByIds, getPageLinkCategorySlug } = useNavigation()\nconst authStore = useAuth()\nconst host = useHost()\nconst { getEventPageRoute } = useEvents()\nconst router = useRouter()\nconst { getHumanizedDate, getHumanizedDatePeriod } = useDate()\nconst nuxtApp = useNuxtApp()\n\nconst id = Array.isArray(route.params.id)\n  ? Number(route.params.id[0])\n  : Number(route.params.id)\n\nconst categories = computed(() =>\n  getCategoryItemsByIds(\n    videoStore.video?.categories.map((category) => category.id) || [],\n    'video'\n  )\n)\n\nconst categorySlug = computed(() => getPageLinkCategorySlug(categories.value))\nconst pageLink = computed(() => {\n  return videoStore.getVideoPageLink(id, categorySlug.value)\n})\n\nconst videoUrl = computed(() => {\n  if (!videoStore.video) {\n    return ''\n  }\n\n  const {\n    video_source: videoSource,\n    video_id: videoId,\n    video_url: videoUrl,\n  } = videoStore.video\n\n  return (\n    (videoStore.video &&\n      videoStore.getVideoSrc({ videoSource, videoId, videoUrl, host })) ||\n    ''\n  )\n})\n\nconst fetchRelatedVideoList = async () => {\n  if (videoStore.video?.event.id) {\n    await videoStore.fetchRelatedVideoList(\n      Number(categories.value[0].id),\n      videoStore.video.id\n    )\n  }\n}\n\nconst entity = {\n  entity_id: id,\n  entity_type: EntityType.Video,\n}\n\nconst {\n  initCountersHelper,\n  commentsCounter,\n  reactionsCounters,\n  updateCommentsCounter,\n  onChangeReaction,\n  isCountersProcessing,\n} = useCountersHelper()\n\nonServerPrefetch(async () => {\n  await videoStore.fetchVideo(id)\n  nuxtApp.runWithContext(() => initMeta())\n  await fetchRelatedVideoList()\n})\n\nonMounted(async () => {\n  await videoStore.fetchVideo(id)\n  initMeta()\n  !useNuxtApp().isHydrating && (await fetchRelatedVideoList())\n  await initCountersHelper({\n    entity,\n    isLoadComments: true,\n    isLoadReactions: true,\n  })\n})\n\nconst commentsElement = ref<HTMLElement | null>(null)\nfunction scrollToComments() {\n  route.query.scroll === 'comments' && commentsElement.value?.scrollIntoView()\n}\n\nfunction onCommentCreate() {\n  updateCommentsCounter(commentsCounter.value + 1)\n}\n\nconst event = computed(() => videoStore.video?.event)\n\nconst categoriesNames = computed(() =>\n  categories.value.map((item) => item.local)\n)\nconst tagsNames = computed(\n  () => videoStore.video?.tags.map((item) => item.name) || []\n)\n\nconst initMeta = () => {\n  if (videoStore.video) {\n    useHeadMeta(\n      {\n        title: videoStore.video.meta_title || videoStore.video.title.trim(),\n        description:\n          videoStore.video.meta_description || videoStore.video.title.trim(),\n        keywords: videoStore.video.meta_keywords || tagsNames.value.join(', '),\n        image: `https://img.youtube.com/vi/${videoStore.video.video_id}/hqdefault.jpg`,\n        article: {\n          publishedTime: videoStore.video.date,\n          sections: categoriesNames.value,\n          tags: tagsNames.value,\n        },\n      },\n      { canonical: pageLink }\n    )\n  }\n}\n\nconst isShowRelatedLink = computed(\n  () =>\n    videoStore.isRelatedVideoListLoaded && videoStore.relatedVideoList.length\n)\n\nconst goBackToVideos = () => {\n  const prevRoute = router.options.history.state.back?.toString() || ''\n\n  if (prevRoute.includes('video') && !prevRoute.includes('item-')) {\n    router.back()\n  } else {\n    router.push(useLocaleRoute()({ name: 'video' }) as RouteLocationRaw)\n  }\n}\n\nwatch(\n  () => !!authStore.auth,\n  async () => {\n    videoStore.resetVideo()\n    await videoStore.fetchVideo(id)\n    fetchRelatedVideoList()\n  }\n)\n</script>\n"],"names":["props","__props","VideoPreviewFallbackGetters","getVideoId","getVideoPreview","useVideo","getFormattedDate","useDate","getCategoryItemsByIds","useNavigation","categories","category","route","previewImage","computed","videoId","_a","getFallbackImage","event","videoStore","useRoute","getPageLinkCategorySlug","authStore","useAuth","host","useHost","getEventPageRoute","useEvents","router","useRouter","getHumanizedDate","getHumanizedDatePeriod","id","categorySlug","pageLink","videoUrl","videoSource","fetchRelatedVideoList","entity","EntityType","initCountersHelper","commentsCounter","reactionsCounters","updateCommentsCounter","onChangeReaction","isCountersProcessing","useCountersHelper","onMounted","initMeta","useNuxtApp","commentsElement","ref","scrollToComments","onCommentCreate","categoriesNames","item","tagsNames","useHeadMeta","isShowRelatedLink","goBackToVideos","prevRoute","useLocaleRoute","watch"],"mappings":"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"}