{"version":3,"file":"CommentBasicView-bNaLVdjT.mjs","names":[],"sources":["../src/components/display/comments/item/CommentBasicView.vue","../src/components/display/comments/item/CommentBasicView.vue"],"sourcesContent":["<template>\n  <div class=\"d-flex flex-column w-100\">\n    <div class=\"d-flex align-items-center h6 mb-2\">\n      <button\n        :id=\"'popover-comment' + comment.commentId\"\n        :class=\"isValidComment ? 'c-hand-auto' : 'text-danger'\"\n        class=\"btn-transparent me-2\"\n        >{{ username }}</button>\n      <ClassicPopover\n        :disable=\"isValidComment\"\n        :target=\"'popover-comment' + comment.commentId\"\n        :content=\"t('Comment waiting')\"\n      />\n      <time :datetime=\"comment.date\" class=\"me-2\">\n        {{ date }}\n      </time>\n      <div\n        v-if=\"comment.abuse && editRight\"\n        class=\"d-flex align-items-center text-danger me-2\"\n      >\n        <AlertIcon :size=\"16\" class=\"me-1\" />\n        {{ t(\"abuse denounced\", { nb: comment.abuse }) }}\n      </div>\n      <span v-if=\"editRight\" :class=\"'status-' + comment.state\" />\n    </div>\n    <!-- eslint-disable vue/no-v-html -->\n    <pre v-html=\"urlify(contentDisplay)\" />\n    <!-- eslint-enable -->\n    <a\n      v-if=\"commentTooLong\"\n      class=\"c-hand font-italic\"\n      @click=\"displayPreview = !displayPreview\"\n      >{{ readMore }}\n    </a>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport AlertIcon from \"vue-material-design-icons/Alert.vue\";\nimport dayjs from \"dayjs\";\nimport relativeTime from \"dayjs/plugin/relativeTime\";\ndayjs.extend(relativeTime);\nimport displayHelper from \"../../../../helper/displayHelper\";\nimport { CommentPodcast } from \"@/stores/class/general/comment\";\nimport ClassicPopover from \"../../../misc/ClassicPopover.vue\";\nimport { computed, onMounted, onUnmounted, Ref, ref } from \"vue\";\nimport { useI18n } from \"vue-i18n\";\n\n//Props \nconst props = defineProps({\n  comment: { default: () => ({}), type: Object as () => CommentPodcast },\n  editRight: { default: false, type: Boolean },\n})\n\n//Data \nconst displayPreview = ref(true);\nconst date = ref(\"\");\nconst dateInterval: Ref<ReturnType<typeof setTimeout> | undefined> = ref(undefined);\n\n //Composables\nconst { t } = useI18n();\n\n//Computed\nconst commentTooLong = computed(() => props.comment.content.length > 300);\nconst username = computed(() => props.comment.poster.userName);\nconst isValidComment = computed(() => \"VALIDATED\" === props.comment.state);\nconst readMore = computed(() => displayPreview.value ? t(\"Read more\") : t(\"Read less\"));\nconst contentDisplay = computed(() => {\n  if (!displayPreview.value || !commentTooLong.value) {\n    return props.comment.content;\n  }\n  return props.comment.content.substring(0, 300) + \"...\";\n});\n\nonMounted(()=>{\n  defineDateFromNow();\n  dateInterval.value = setInterval(() => {\n    defineDateFromNow();\n  }, 60000);\n})\n \nonUnmounted(()=>clearInterval(dateInterval.value as unknown as number))\n\n//Methods\nfunction urlify(text:string|undefined){\n  return displayHelper.urlify(text);\n}\nfunction defineDateFromNow() {\n  if (!props.comment.date) {\n    date.value = \"\";\n  }\n  date.value = dayjs(props.comment.date).fromNow();\n}\n</script>\n<style lang=\"scss\">\n@use \"../../../../style/comments\";\n</style>\n","<template>\n  <div class=\"d-flex flex-column w-100\">\n    <div class=\"d-flex align-items-center h6 mb-2\">\n      <button\n        :id=\"'popover-comment' + comment.commentId\"\n        :class=\"isValidComment ? 'c-hand-auto' : 'text-danger'\"\n        class=\"btn-transparent me-2\"\n        >{{ username }}</button>\n      <ClassicPopover\n        :disable=\"isValidComment\"\n        :target=\"'popover-comment' + comment.commentId\"\n        :content=\"t('Comment waiting')\"\n      />\n      <time :datetime=\"comment.date\" class=\"me-2\">\n        {{ date }}\n      </time>\n      <div\n        v-if=\"comment.abuse && editRight\"\n        class=\"d-flex align-items-center text-danger me-2\"\n      >\n        <AlertIcon :size=\"16\" class=\"me-1\" />\n        {{ t(\"abuse denounced\", { nb: comment.abuse }) }}\n      </div>\n      <span v-if=\"editRight\" :class=\"'status-' + comment.state\" />\n    </div>\n    <!-- eslint-disable vue/no-v-html -->\n    <pre v-html=\"urlify(contentDisplay)\" />\n    <!-- eslint-enable -->\n    <a\n      v-if=\"commentTooLong\"\n      class=\"c-hand font-italic\"\n      @click=\"displayPreview = !displayPreview\"\n      >{{ readMore }}\n    </a>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport AlertIcon from \"vue-material-design-icons/Alert.vue\";\nimport dayjs from \"dayjs\";\nimport relativeTime from \"dayjs/plugin/relativeTime\";\ndayjs.extend(relativeTime);\nimport displayHelper from \"../../../../helper/displayHelper\";\nimport { CommentPodcast } from \"@/stores/class/general/comment\";\nimport ClassicPopover from \"../../../misc/ClassicPopover.vue\";\nimport { computed, onMounted, onUnmounted, Ref, ref } from \"vue\";\nimport { useI18n } from \"vue-i18n\";\n\n//Props \nconst props = defineProps({\n  comment: { default: () => ({}), type: Object as () => CommentPodcast },\n  editRight: { default: false, type: Boolean },\n})\n\n//Data \nconst displayPreview = ref(true);\nconst date = ref(\"\");\nconst dateInterval: Ref<ReturnType<typeof setTimeout> | undefined> = ref(undefined);\n\n //Composables\nconst { t } = useI18n();\n\n//Computed\nconst commentTooLong = computed(() => props.comment.content.length > 300);\nconst username = computed(() => props.comment.poster.userName);\nconst isValidComment = computed(() => \"VALIDATED\" === props.comment.state);\nconst readMore = computed(() => displayPreview.value ? t(\"Read more\") : t(\"Read less\"));\nconst contentDisplay = computed(() => {\n  if (!displayPreview.value || !commentTooLong.value) {\n    return props.comment.content;\n  }\n  return props.comment.content.substring(0, 300) + \"...\";\n});\n\nonMounted(()=>{\n  defineDateFromNow();\n  dateInterval.value = setInterval(() => {\n    defineDateFromNow();\n  }, 60000);\n})\n \nonUnmounted(()=>clearInterval(dateInterval.value as unknown as number))\n\n//Methods\nfunction urlify(text:string|undefined){\n  return displayHelper.urlify(text);\n}\nfunction defineDateFromNow() {\n  if (!props.comment.date) {\n    date.value = \"\";\n  }\n  date.value = dayjs(props.comment.date).fromNow();\n}\n</script>\n<style lang=\"scss\">\n@use \"../../../../style/comments\";\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;EAyCA,MAAM,OAAO,YAAY;EAQzB,MAAM,QAAQ;EAMd,MAAM,iBAAiB,IAAI,IAAI;EAC/B,MAAM,OAAO,IAAI,EAAE;EACnB,MAAM,eAA+D,IAAI,KAAA,CAAS;EAGlF,MAAM,EAAE,MAAM,QAAQ;EAGtB,MAAM,iBAAiB,eAAe,MAAM,QAAQ,QAAQ,SAAS,GAAG;EACxE,MAAM,WAAW,eAAe,MAAM,QAAQ,OAAO,QAAQ;EAC7D,MAAM,iBAAiB,eAAe,gBAAgB,MAAM,QAAQ,KAAK;EACzE,MAAM,WAAW,eAAe,eAAe,QAAQ,EAAE,WAAW,IAAI,EAAE,WAAW,CAAC;EACtF,MAAM,iBAAiB,eAAe;GACpC,IAAI,CAAC,eAAe,SAAS,CAAC,eAAe,OAC3C,OAAO,MAAM,QAAQ;GAEvB,OAAO,MAAM,QAAQ,QAAQ,UAAU,GAAG,GAAG,IAAI;EACnD,CAAC;EAED,gBAAc;GACZ,kBAAkB;GAClB,aAAa,QAAQ,kBAAkB;IACrC,kBAAkB;GACpB,GAAG,GAAK;EACV,CAAC;EAED,kBAAgB,cAAc,aAAa,KAA0B,CAAC;EAGtE,SAAS,OAAO,MAAsB;GACpC,OAAO,sBAAc,OAAO,IAAI;EAClC;EACA,SAAS,oBAAoB;GAC3B,IAAI,CAAC,MAAM,QAAQ,MACjB,KAAK,QAAQ;GAEf,KAAK,QAAQ,MAAM,MAAM,QAAQ,IAAI,EAAE,QAAQ;EACjD;;;;;;;;;;;;;;;;;;;;;;;;;;mBC3FO,OAAM,2BAA0B;mBAC9B,OAAM,oCAAmC;;;;;CAgB1C,OAAM;;;;qBAjBZ,mBAiCM,OAjCN,YAiCM;EAhCJ,mBAsBM,OAtBN,YAsBM;GArBJ,mBAI0B,UAAA;IAHvB,IAAE,oBAAsB,OAAA,QAAQ;IAChC,OAAK,eAAA,CAAE,OAAA,iBAAc,gBAAA,eAChB,sBAAsB,CAAA;sBACxB,OAAA,QAAQ,GAAA,IAAA,UAAA;GACd,YAIE,OAAA,mBAAA;IAHC,SAAS,OAAA;IACT,QAAM,oBAAsB,OAAA,QAAQ;IACpC,SAAS,OAAA,EAAC,iBAAA;;;;;;GAEb,mBAEO,QAAA;IAFA,UAAU,OAAA,QAAQ;IAAM,OAAM;sBAChC,OAAA,IAAI,GAAA,GAAA,UAAA;GAGD,OAAA,QAAQ,SAAS,OAAA,aAAA,UAAA,GADzB,mBAMM,OANN,YAMM,CAFJ,YAAqC,OAAA,cAAA;IAAzB,MAAM;IAAI,OAAM;uBAAS,MACrC,gBAAG,OAAA,EAAC,mBAAA,EAAA,IAA0B,OAAA,QAAQ,MAAK,CAAA,CAAA,GAAA,CAAA,CAAA,CAAA,KAAA,mBAAA,QAAA,IAAA;GAEjC,OAAA,aAAA,UAAA,GAAZ,mBAA4D,QAAA;;IAApC,OAAK,eAAA,YAAc,OAAA,QAAQ,KAAK;;;EAE1D,mBAAA,gCAAA;EACA,mBAAuC,OAAA,EAAlC,WAAQ,OAAA,OAAO,OAAA,cAAc,EAAA,GAAA,MAAA,GAAA,UAAA;EAClC,mBAAA,iBAAA;EAEQ,OAAA,kBAAA,UAAA,GADR,mBAKI,KAAA;;GAHF,OAAM;GACL,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,OAAA,iBAAc,CAAI,OAAA;qBACtB,OAAA,QAAQ,GAAA,CAAA,KAAA,mBAAA,QAAA,IAAA"}